ADD scSelectFilter 分类筛选器 组件

src/components/scSelectFilter/index.vue

@@ -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>

src/views/template/list/tab.vue

@@ -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)
 			}
 		}
 	}

src/views/vab/selectFilter.vue

@@ -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>