表格检索封装

This commit is contained in:
龙运模
2024-07-12 17:46:32 +08:00
parent d6ad74cbb5
commit cfe3bba57f
8 changed files with 254 additions and 67 deletions
+38 -55
View File
@@ -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">
<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>
<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
<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: {
activation_date: {
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
active_status:'',
}
searchList:[
{name:'开通日期',type:'date',code:'activation_date'},
{name:'公司名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称",},
{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",},
{name:'关键字',type:'text',code:['domain','name','address','owner','mobile'],keyword:true},
],
params: {},
}
},
methods: {
async getCompanyList(e) {
if(!e) return
const res = await this.$API.system.company.select.post(this.params);
if(res.code == 200){
this.setMap['full_name'] = res.data;
getSelectData(item){
let {data,params} = item;
this.params = params;
if(data.code == "id"){
this.getCompanyList(data,params)
}else if(data.code == "active_status"){
this.getStatusList(data,params);
}
},
async getStatusList(e) {
if(!e) return
const res = await this.$API.oss.status.post(this.params);
async getCompanyList(data,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 = {
activation_date: {
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
active_status:'',
};
this.params = {};
this.$refs.scSearch.reload();
this.$refs.table.reload();
},
handleSaveSuccess(){
this.$refs.table.refresh();
},
+5 -5
View File
@@ -50,8 +50,8 @@
</el-col>
</el-row>
</el-form-item>
<el-form-item label="账号" prop="admin_access">
<el-input v-model="form.admin_access" placeholder="请填写管理员账号"></el-input>
<el-form-item label="账号" prop="admin_account">
<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;