From e41099397da8d6de97b0462003fe40d26b9bde90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Fri, 30 Jun 2023 00:39:02 +0800
Subject: [PATCH] no message

---
 src/components/scFilterBar/index.vue | 156 +++++++++++++--------------
 src/components/scFilterBar/my.vue    |  21 +---
 2 files changed, 77 insertions(+), 100 deletions(-)

diff --git a/src/components/scFilterBar/index.vue b/src/components/scFilterBar/index.vue
index 12379ac..46c675a 100644
--- a/src/components/scFilterBar/index.vue
+++ b/src/components/scFilterBar/index.vue
@@ -8,82 +8,68 @@
 				<el-button icon="el-icon-filter" @click="openFilter"></el-button>
 			</el-badge>
 		</slot>
-		<el-dialog title="过滤器" v-model="dialog" :size="680" append-to-body class="filterBar">
-			<el-tabs class="root">
-				<el-tab-pane lazy>
-					<template #label>
-						<div class="tabs-label">过滤项</div>
-					</template>
-					<el-scrollbar>
-						<div class="sc-filter-main">
-							<h2>设置过滤条件</h2>
-							<div v-if="filter.length<=0"  class="nodata">
-								没有默认过滤条件，请点击增加过滤项
-							</div>
-							<table v-else>
-								<colgroup>
-									<col width="30">
-									<col width="40">
-									<col width="140"> 
-									<col>
-									<col width="110">
-								</colgroup>
-								<tr v-for="(item,index) in filter" :key="index">
-									<td>
-										<el-tag :disable-transitions="true">{{index+1}}</el-tag>
-									</td>
-									<td>
-										<el-icon class="del" @click="delFilter(index)" style="border: 1px solid #e6e6e6;">
-											<el-icon-delete />
-										</el-icon>
-									</td>
-									<td>
-										<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
-										</py-select>
-									</td>
-									<td>
-										<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
-										<!-- 输入框 -->
-										<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
-										<!-- 下拉框 -->
-										<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.options.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" @change="selectChange(item)" :remote="item.field.options.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
-											<el-option v-for="field in item.field.options.items" :key="field.value" :label="field.label || field.name" :value="field.value"></el-option>
-										</el-select>
-										<!-- 日期 -->
-										<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
-										<!-- 日期范围 -->
-										<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD"  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
-										<!-- 日期时间 -->
-										<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
-										<!-- 日期时间范围 -->
-										<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
-										<!-- 自定义日期 -->
-										<el-date-picker v-if="item.field.type=='customDate'" v-model="item.value" :type="item.field.options.dateType||'date'" :value-format="item.field.options.valueFormat" :placeholder="item.field.placeholder||'请选择'" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
-										<!-- 开关 -->
-										<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
-										<!-- 标签 -->
-										<el-select v-if="item.field.type=='tags'" v-model="item.value" multiple filterable allow-create default-first-option no-data-text="输入关键词后按回车确认" :placeholder="item.field.placeholder||'请输入'"></el-select>
-									</td>
-									<td v-if="item.field.operators">
-										<el-select v-model="item.operator" placeholder="运算符">
-											<el-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
-										</el-select>
-									</td>
-								</tr>
-							</table>
-							<el-button type="primary" text icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
-						</div>
-					</el-scrollbar>
-				</el-tab-pane>
-				<el-tab-pane lazy>
-					<template #label>
-						<div class="tabs-label">常用</div>
-					</template>
-					<el-scrollbar>
-						<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
-					</el-scrollbar>
-				</el-tab-pane>
-			</el-tabs>
+		<el-dialog title="过滤器" v-model="dialog" :size="680" append-to-body class="dialogClass">
+			<el-scrollbar>
+				<div class="sc-filter-main">
+					<h2>设置过滤条件</h2>
+					<div v-if="filter.length<=0"  class="nodata">
+						没有默认过滤条件，请点击增加过滤项
+					</div>
+					<table v-else>
+						<colgroup>
+							<col width="30">
+							<col width="40">
+							<col width="140"> 
+							<col>
+							<col width="110">
+						</colgroup>
+						<tr v-for="(item,index) in filter" :key="index">
+							<td>
+								<el-tag :disable-transitions="true">{{index+1}}</el-tag>
+							</td>
+							<td>
+								<el-icon class="del" @click="delFilter(index)" style="border: 1px solid #e6e6e6;">
+									<el-icon-delete />
+								</el-icon>
+							</td>
+							<td>
+								<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
+								</py-select>
+							</td>
+							<td>
+								<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
+								<!-- 输入框 -->
+								<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
+								<!-- 下拉框 -->
+								<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.options.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" @change="selectChange(item)" :remote="item.field.options.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
+									<el-option v-for="field in item.field.options.items" :key="field.value" :label="field.label || field.name" :value="field.value"></el-option>
+								</el-select>
+								<!-- 日期 -->
+								<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+								<!-- 日期范围 -->
+								<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD"  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+								<!-- 日期时间 -->
+								<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+								<!-- 日期时间范围 -->
+								<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+								<!-- 自定义日期 -->
+								<el-date-picker v-if="item.field.type=='customDate'" v-model="item.value" :type="item.field.options.dateType||'date'" :value-format="item.field.options.valueFormat" :placeholder="item.field.placeholder||'请选择'" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+								<!-- 开关 -->
+								<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
+								<!-- 标签 -->
+								<el-select v-if="item.field.type=='tags'" v-model="item.value" multiple filterable allow-create default-first-option no-data-text="输入关键词后按回车确认" :placeholder="item.field.placeholder||'请输入'"></el-select>
+							</td>
+							<td v-if="item.field.operators">
+								<el-select v-model="item.operator" placeholder="运算符">
+									<el-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
+								</el-select>
+							</td>
+						</tr>
+					</table>
+					<el-button type="primary" text icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
+				</div>
+				<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
+			</el-scrollbar>
 			<template #footer>
 			    <span class="dialog-footer">
 			    	<el-button type="primary" @click="ok" :disabled="filter.length<=0">立即过滤</el-button>
@@ -95,18 +81,20 @@
 	</div>
 </template>
 
-<style scoped>
-	.tabs-label {padding:0 20px;}
-
-	
-	.el-dialog__body {
-		padding: 10px;
-	}
+<style>
+.tabs-label {padding:0 20px;}
 
+.dialogClass .el-dialog__body {
+  	margin: 10px 20px;
+   	padding: 0;
+}
+.dialogClass .el-dialog__footer {
+  text-align: right;
+}
 
 	.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
 
-	.sc-filter-main {background: #fff; padding-top: 20px}
+	.sc-filter-main {background: #fff; padding-top: 0px}
 	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
 	.sc-filter-main table {width: 100%;margin: 10px 0;}
 	.sc-filter-main table tr {}
diff --git a/src/components/scFilterBar/my.vue b/src/components/scFilterBar/my.vue
index 7562b5d..d3efdb6 100644
--- a/src/components/scFilterBar/my.vue
+++ b/src/components/scFilterBar/my.vue
@@ -4,28 +4,17 @@
 
 <template>
 	<div class="sc-filter-my">
-		<div v-if="loading" class="sc-filter-my-loading">
-			<el-skeleton :rows="2" animated />
-		</div>
-		<template v-else>
-			<el-empty v-if="myFilter.length<=0" :image-size="100">
-				<template #description>
-					<h2>没有常用的过滤</h2>
-					<p style="margin-top: 10px;max-width: 300px;">常用过滤可以将多个过滤条件保存为一个集合，方便下次进行相同条件的过滤</p>
-				</template>
-			</el-empty>
-			<ul v-else class="sc-filter-my-list">
-				<h2>我的常用过滤</h2>
-				<li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
+		<el-tag v-for="(item, index) in myFilter" @close="closeMyfilter(item, index)" @click="selectMyfilter(item)" :key="index" class="mx-1" style="margin-right: 10px;" closable  :type="item.type">
+    		{{ item.title }}
+  		</el-tag>
+				<!-- <li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
 					<label>{{item.title}}</label>
 					<el-popconfirm title="确认删除此常用过滤吗？" @confirm="closeMyfilter(item, index)">
 						<template #reference>
 							<el-icon class="del" @click.stop="()=>{}"><el-icon-delete /></el-icon>
 						</template>
 					</el-popconfirm>
-				</li>
-			</ul>
-		</template>
+				</li> -->
 	</div>
 
 </template>