ADD scSelectFilter 分类筛选器 组件
This commit is contained in:
sakuya
parent
09ecd7fed7
commit
e2505cbfb3
|
|
@ -0,0 +1,125 @@
|
|||
<!--
|
||||
* @Descripttion: 分类筛选器
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2022年5月26日15:59:52
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-select-filter">
|
||||
<div v-if="data.length<=0" class="sc-select-filter__no-data">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
|
||||
<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label></div>
|
||||
<div class="sc-select-filter__item-options">
|
||||
<ul>
|
||||
<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}" v-for="option in item.options" :key="option.value" @click="select(option, item)">
|
||||
<el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
|
||||
<span>{{option.label}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: { type: Array, default: () => [] },
|
||||
selectedValues: { type: Object, default: () => { return {} } },
|
||||
labelWidth: {type: Number, default: 80},
|
||||
outputValueTypeToArray: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: {}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data(val) {
|
||||
val.forEach(item => {
|
||||
this.selected[item.key] = this.selectedValues[item.key] || [item.options[0].value]
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedString() {
|
||||
var outputData = JSON.parse(JSON.stringify(this.selected))
|
||||
for (var key in outputData) {
|
||||
outputData[key] = outputData[key].join(",")
|
||||
}
|
||||
return outputData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//默认赋值
|
||||
this.data.forEach(item => {
|
||||
this.selected[item.key] = this.selectedValues[item.key] || [item.options[0].value]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
select(option, item){
|
||||
//判断单选多选
|
||||
if(item.multiple){
|
||||
//如果多选选择的第一个
|
||||
if(option.value === item.options[0].value){
|
||||
//就赋值第一个的值
|
||||
this.selected[item.key] = [option.value]
|
||||
}else{
|
||||
//如果选择的值已有
|
||||
if(this.selected[item.key].includes(option.value)){
|
||||
//删除选择的值
|
||||
this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === option.value), 1)
|
||||
//当全删光时，把第一个选中
|
||||
if(this.selected[item.key].length == 0){
|
||||
this.selected[item.key] = [item.options[0].value]
|
||||
}
|
||||
}else{
|
||||
//未有值的时候，追加选中值
|
||||
this.selected[item.key].push(option.value)
|
||||
//当含有第一个的值的时候，把第一个删除
|
||||
if(this.selected[item.key].includes(item.options[0].value)){
|
||||
this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === item.options[0].value), 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{
|
||||
//单选时，如果点击了已有值就赋值
|
||||
if(!this.selected[item.key].includes(option.value)){
|
||||
this.selected[item.key] = [option.value]
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
change(){
|
||||
if(this.outputValueTypeToArray){
|
||||
this.$emit('onChange', this.selected)
|
||||
}else{
|
||||
this.$emit('onChange', this.selectedString)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-select-filter {width: 100%;}
|
||||
.sc-select-filter__item {display: flex;}
|
||||
.sc-select-filter__item-title {width: 80px;}
|
||||
.sc-select-filter__item-title label {font-size: 14px;padding-top:13px;display: inline-block;color: #999;}
|
||||
.sc-select-filter__item-options {flex: 1;border-bottom: 1px dashed var(--el-border-color-light);}
|
||||
.sc-select-filter__item-options ul {display: flex;flex-wrap: wrap;padding-top: 10px;}
|
||||
.sc-select-filter__item-options li {list-style: none;cursor: pointer;height:28px;padding:0 15px;border-radius:32px;margin: 0 10px 10px 0;display: flex;align-items: center;background: var(--el-color-primary-light-9);}
|
||||
.sc-select-filter__item-options li .el-icon {margin-right: 3px;font-size: 16px;}
|
||||
.sc-select-filter__item-options li:hover {color: var(--el-color-primary);}
|
||||
.sc-select-filter__item-options li.active {background: var(--el-color-primary);color: #fff;font-weight: bold;}
|
||||
.sc-select-filter__item:last-of-type .sc-select-filter__item-options {border: 0;}
|
||||
|
||||
.sc-select-filter__no-data {color: #999;}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,9 @@
|
|||
<el-tab-pane label="已完成" name="4"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-header>
|
||||
<el-header style="height: auto;">
|
||||
<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
|
||||
</el-header>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
|
|
@ -44,11 +47,95 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import scSelectFilter from '@/components/scSelectFilter'
|
||||
|
||||
export default {
|
||||
name: 'listTab',
|
||||
components: {
|
||||
scSelectFilter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupId: "1",
|
||||
groupId: "0",
|
||||
filterData: [
|
||||
{
|
||||
title: "所属行业",
|
||||
key: "type",
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "汽车",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "大健康",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "节能环保",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "智能信息",
|
||||
value: "4"
|
||||
},
|
||||
{
|
||||
label: "文化旅游",
|
||||
value: "5"
|
||||
},
|
||||
{
|
||||
label: "新材料",
|
||||
value: "6"
|
||||
},
|
||||
{
|
||||
label: "高端装备",
|
||||
value: "7"
|
||||
},
|
||||
{
|
||||
label: "其他行业",
|
||||
value: "99"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "所属区域",
|
||||
key: "area",
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "华东",
|
||||
value: "HD"
|
||||
},
|
||||
{
|
||||
label: "华北",
|
||||
value: "HB"
|
||||
},
|
||||
{
|
||||
label: "华南",
|
||||
value: "HN"
|
||||
},
|
||||
{
|
||||
label: "华中",
|
||||
value: "HZ"
|
||||
},
|
||||
{
|
||||
label: "华西南",
|
||||
value: "HXN"
|
||||
},
|
||||
{
|
||||
label: "东北",
|
||||
value: "DB"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
},
|
||||
|
|
@ -68,6 +155,9 @@
|
|||
groupId: name
|
||||
}
|
||||
this.$refs.table.reload(params)
|
||||
},
|
||||
filterChange(data){
|
||||
this.$refs.table.upData(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="分类筛选器">
|
||||
<sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
||||
<pre>{{ filterData }}</pre>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scSelectFilter from '@/components/scSelectFilter'
|
||||
|
||||
export default {
|
||||
name: 'selectFilter',
|
||||
components: {
|
||||
scSelectFilter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: "状态(单)",
|
||||
key: "state",
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "待审核",
|
||||
value: "1",
|
||||
icon: "el-icon-flag"
|
||||
},
|
||||
{
|
||||
label: "已退回",
|
||||
value: "2",
|
||||
icon: "el-icon-bottom-left"
|
||||
},
|
||||
{
|
||||
label: "已关闭",
|
||||
value: "3",
|
||||
icon: "el-icon-circle-close"
|
||||
},
|
||||
{
|
||||
label: "已完成",
|
||||
value: "4",
|
||||
icon: "el-icon-checked"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "类型(多)",
|
||||
key: "type",
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "请假申请",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "加班申请",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
selectedValues: {
|
||||
state: [""],
|
||||
type: [""]
|
||||
},
|
||||
filterData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(selected){
|
||||
this.filterData = selected
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue