表格检索封装

src/components/scDatePicker/index.vue

@@ -8,7 +8,10 @@
 
 <template>
 	<div class="scDatePicker">
-		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size" :popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable></el-date-picker>
+		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size"
+			:popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable
+			:default-time="defaultTime"
+		></el-date-picker>
 	</div>
 </template>
 
@@ -37,6 +40,7 @@ export default {
 	data(){
 		return{
 			localDatePicker:[],
+			defaultTime:[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]
 		}
 	},
 	mounted() {

src/components/scInput/index.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Descripttion: 关键字组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scDatePicker">
+		<el-input v-bind="$attrs" class="input" v-model="localText" @input="textChange" :size="size" :placeholder="placeholder" clearable></el-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		activation_text: {
+			type: String,
+			default: ""
+		},
+		size:{ type: String, default: "small" },
+		placeholder:{type:String, default:"请输入关键字"},
+	},
+	watch:{
+		activation_text:{
+			handler(val){
+				this.localText = val;
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localText:this.activation_text,
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		textChange(e){
+			this.localText = e;
+			this.emitActivationText();
+		},
+		emitActivationText() {
+			this.$emit('update:activation_text', this.localText);
+			this.$emit('fetchData');
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.scDatePicker{
+	width: 100%;
+}
+</style>

src/components/scMultipleSelect/index.vue

@@ -18,7 +18,7 @@
 export default {
 	name: "index",
 	props:{
-		select_params: {
+		activation_select: {
 			type: Object,
 			default: () => ({ operator: "in", value: [] })
 		},
@@ -26,7 +26,7 @@ export default {
 		placeholder:{type:String, default:"请选择"},
 	},
 	watch:{
-		select_params:{
+		activation_select:{
 			handler(val){
 				if(!val || val.value.length == 0){
 					this.localData = [];
@@ -52,8 +52,8 @@ export default {
 			this.emitActivationSelect();
 		},
 		emitActivationSelect() {
-			this.$emit('update:select_params', {
+			this.$emit('update:activation_select', {
-				operator: this.select_params.operator,
+				operator: this.activation_select.operator,
 				value: this.localData? this.localData:[]
 			});
 		}

src/components/scSearch/index.vue

@@ -0,0 +1,137 @@
+<template>
+	<div v-for="item in columnList" :key="item">
+		<div class="searchItem" v-if="item.type == 'date'">
+			<label class="name">{{item.name}}</label>
+			<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
+		</div>
+		<div class="searchItem" v-if="item.type =='multiple'">
+			<label class="name">{{item.name}}</label>
+			<scMultipleSelect :size="size" v-model:activation_select="params.id" @fetchData="getSelect(item,$event)" :placeholder="item.placeholder" multiple collapse-tags filterable clearable>
+				<el-option v-for="em in item.data" :key="em" :label="em.full_name" :value="em.id"></el-option>
+			</scMultipleSelect>
+		</div>
+		<div class="searchItem" v-if="item.type == 'select'">
+			<label class="name">{{item.name}}</label>
+			<el-select class="input" :size="size" v-model="params.active_status" @visible-change="getSelect(item,$event)" :placeholder="item.placeholder" filterable clearable>
+				<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.active_status"></el-option>
+			</el-select>
+		</div>
+		<div class="searchItem" v-if="item.type == 'text'">
+			<label class="name">{{item.name}}</label>
+			<scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	emits: ['fetchSelectData'],
+	props:{
+		searchList:{type: Array},
+	},
+	watch:{
+		searchList:{
+			handler(val){
+				if(val && val.length>0){
+					this.params = this.groupByType(val);
+				}
+			},
+			immediate:true,
+		},
+		keywordParams:{
+			handler(val) {
+				for(let i in this.params){
+					if(this.params[i].keyword){
+						this.params[i].value = val===""?"":'%'+val+'%';
+					}
+				}
+			},
+			immediate:true
+		}
+	},
+	data(){
+		return{
+			size:"small",
+			columnList:this.searchList,
+			selectItem:'',
+			selectShow:false,
+
+			params:{},
+			keywordParams:"",
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		getSelect(item,e){
+			if(!e) return
+			this.$emit('fetchSelectData',{data:item,params:this.params});
+		},
+		getText(item){
+			this.$emit('fetchSelectData',{data:item,params:this.params});
+		},
+
+		reload(){
+			this.keywordParams = "";
+			for(let i in this.params){
+				if(typeof this.params[i] === "object" && this.params[i] !=null){
+					if(typeof this.params[i].value == "string"){
+						this.params[i].value = "";
+					}else{
+						this.params[i].value = [];
+					}
+				}else{
+					this.params[i] = "";
+				}
+			}
+		},
+
+		groupByType(list){
+			const grouped = {};
+			list.forEach(item=>{
+				if (!grouped[item.code]) {
+					if(typeof item.code == 'string'){
+						grouped[item.code] = {};
+					}
+				}
+				if (item.type === 'text') {
+					item.code.forEach(code => {
+						if(!grouped[code]){
+							grouped[code] = {};
+						}
+
+						let params = {};
+						if(item.keyword){
+							params = {
+								keyword:true,
+								operator:'like',
+								value:""
+							}
+						}else{
+							params = {
+								operator:'like',
+								value:""
+							}
+						}
+						grouped[code] = params;
+					});
+				} else {
+					let operator = item.type == 'date'?'between':item.type == 'multiple'?'in':item.type == 'text'?'link':'';
+					let params = {
+						operator:operator,
+						value:operator=='link'?"":[]
+					}
+					grouped[item.code] = operator==''?"":params;
+				}
+			})
+			return grouped
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/layout/index.vue

@@ -55,8 +55,8 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
+<!--					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">-->
-<!--					<span>{{ $CONFIG.APP_NAME }}</span>-->
+					<span>{{ $CONFIG.APP_NAME }}</span>
 				</div>
 				<Topbar v-if="!ismobile"></Topbar>
 			</div>

src/scui.js

@@ -23,6 +23,8 @@ import ossImgUpload from "./components/scUpload/uploadImg";
 import ossImgListUpload from "./components/scUpload/uploadListImg";
 import scDatePicker from "./components/scDatePicker";
 import scMultipleSelect from "./components/scMultipleSelect";
+import scInput from "./components/scInput";
+import scSearch from "./components/scSearch";
 
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
@@ -70,6 +72,8 @@ export default {
 		app.component('ossImgListUpload', ossImgListUpload);
 		app.component('scDatePicker', scDatePicker);
 		app.component('scMultipleSelect', scMultipleSelect);
+		app.component('scInput', scInput);
+		app.component('scSearch', scSearch);
 
 		//注册全局指令
 		app.directive('auth', auth)

src/views/setting/company/index.vue

@@ -6,27 +6,13 @@
 				<el-button type="primary" :size="size" plain>批量导入</el-button>
 			</div>
 			<div class="right-panel">
-
+				<el-button :size="size" icon="sc-icon-Download">下载</el-button>
 			</div>
 		</el-header>
 		<el-main class="nopadding">
 			<div class="searchMain searchMainNoTop">
-				<div class="searchItem">
+				<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
-					<label class="name">开通日期</label>
+
-					<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
-				</div>
-				<div class="searchItem">
-					<label class="name">公司名称</label>
-					<scMultipleSelect :size="size" v-model:select_params="params.id" @fetchData="getCompanyList" placeholder="请选择公司名称" multiple collapse-tags filterable clearable>
-						<el-option v-for="item in setMap.full_name" :key="item" :label="item.full_name" :value="item.id"></el-option>
-					</scMultipleSelect>
-				</div>
-				<div class="searchItem">
-					<label class="name">状态</label>
-					<el-select class="input" :size="size" v-model="params.active_status" @visible-change="getStatusList" placeholder="请选择状态" filterable clearable>
-						<el-option v-for="item in setMap.active_status" :key="item" :label="item.label" :value="item.active_status"></el-option>
-					</el-select>
-				</div>
 				<div class="searchItem searchBtn">
 					<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
 					<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
@@ -36,7 +22,7 @@
 				<el-table-column type="selection" align="center" width="40"></el-table-column>
 				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
 				<template #logo="scope">
-					<el-image class="logoCell" :src="scope.row.logo" fit="contain"></el-image>
+					<el-image class="logoCell" :src="scope.row.logo" preview-teleported :preview-src-list="[scope.row.logo]" fit="contain"></el-image>
 				</template>
 				<template #active_status="scope">
 					<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
@@ -80,11 +66,6 @@ export default {
 	data() {
 		return {
 			size:'small',
-			setMap:{
-				full_name:[],
-				active_status:[],
-			},
-
 			dialog: {
 				save: false,
 				show: false
@@ -94,32 +75,44 @@ export default {
 				column: [],
 			},
 			selection: [],
-			params: {
+			searchList:[
-				activation_date: {
+				{name:'开通日期',type:'date',code:'activation_date'},
-					operator:'between',
+				{name:'公司名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称",},
-					value:[]
+				{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",},
-				},
+				{name:'关键字',type:'text',code:['domain','name','address','owner','mobile'],keyword:true},
-				id:{
+			],
-					operator:"in",
+			params: {},
-					value:[]
-				},
-				active_status:'',
-			}
 		}
 	},
 	methods: {
-		async getCompanyList(e) {
+		getSelectData(item){
-			if(!e) return
+			let {data,params} = item;
-			const res = await this.$API.system.company.select.post(this.params);
+			this.params = params;
-			if(res.code == 200){
+			if(data.code == "id"){
-				this.setMap['full_name'] = res.data;
+				this.getCompanyList(data,params)
+			}else if(data.code == "active_status"){
+				this.getStatusList(data,params);
 			}
 		},
-		async getStatusList(e) {
+
-			if(!e) return
+		async getCompanyList(data,params) {
-			const res = await this.$API.oss.status.post(this.params);
+			const res = await this.$API.system.company.select.post(params);
 			if(res.code == 200){
-				this.setMap['active_status'] = res.data;
+				this.searchList.forEach(item=>{
+					if(item.code == data.code){
+						item.data = res.data;
+					}
+				})
+			}
+		},
+		async getStatusList(data,params) {
+			const res = await this.$API.oss.status.post(params);
+			if(res.code == 200){
+				this.searchList.forEach(item=>{
+					if(item.code == data.code){
+						item.data = res.data;
+					}
+				})
 			}
 		},
 
@@ -203,20 +196,10 @@ export default {
 			this.$refs.table.upData(this.params);
 		},
 		reset(){
-			this.params = {
+			this.params = {};
-				activation_date: {
+			this.$refs.scSearch.reload();
-					operator:'between',
-					value:[]
-				},
-				id:{
-					operator:"in",
-					value:[]
-				},
-				active_status:'',
-			};
 			this.$refs.table.reload();
 		},
-
 		handleSaveSuccess(){
 			this.$refs.table.refresh();
 		},

src/views/setting/company/save.vue

@@ -50,8 +50,8 @@
 								</el-col>
 							</el-row>
 						</el-form-item>
-						<el-form-item label="账号" prop="admin_access">
+						<el-form-item label="账号" prop="admin_account">
-							<el-input v-model="form.admin_access" placeholder="请填写管理员账号"></el-input>
+							<el-input v-model="form.admin_account" placeholder="请填写管理员账号"></el-input>
 						</el-form-item>
 						<el-form-item label="登录密码" prop="password" v-if="mode == 'add'">
 							<el-input v-model="form.password" type="password" placeholder="请填写密码"></el-input>
@@ -106,7 +106,7 @@ export default {
 				doc_url:[],
 				owner:"",
 				mobile:"",
-				admin_access:"",
+				admin_account:"",
 				password:"",
 				remark: "",
 				accord:1
@@ -140,7 +140,7 @@ export default {
 				owner:[
 					{required: true, message: '负责人不能为空', trigger: 'blur'}
 				],
-				admin_access: [
+				admin_account: [
 					{required: true, message: '账号不能为空', trigger: 'blur'}
 				],
 				password: [
@@ -212,7 +212,7 @@ export default {
 				this.form.doc_url = res.data.doc_attach && res.data.doc_attach.length>0?res.data.doc_attach.map(em=>em.doc_url):[];
 				this.form.owner = res.data.owner;
 				this.form.mobile = res.data.mobile;
-				this.form.admin_access = res.data.admin_access;
+				this.form.admin_account = res.data.admin_account;
 				this.form.password = res.data.password;
 				this.form.remark = res.data.remark;
 				this.form.accord = 1;