检索增加更多和收起

This commit is contained in:
龙运模 2024-07-13 10:12:02 +08:00
parent 6563381593
commit 4ab5a2eee3
2 changed files with 20 additions and 9 deletions

View File

@ -4,19 +4,19 @@
<label class="name">{{item.name}}</label> <label class="name">{{item.name}}</label>
<scDatePicker :size="size" v-model:activation_date="params[item.code]" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker> <scDatePicker :size="size" v-model:activation_date="params[item.code]" @visible-change="getSelect(item,$event)" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
</div> </div>
<div class="searchItem" v-if="item.type =='multiple'"> <div class="searchItem" v-if="item.type =='multiple' && ((item.isOpen && item.show) || item.show)">
<label class="name">{{item.name}}</label> <label class="name">{{item.name}}</label>
<scMultipleSelect :size="size" v-model:activation_select="params[item.code]" @fetchData="getSelect(item,$event)" :placeholder="item.placeholder" multiple collapse-tags filterable clearable> <scMultipleSelect :size="size" v-model:activation_select="params[item.code]" @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> <el-option v-for="em in item.data" :key="em" :label="em.full_name" :value="em.id"></el-option>
</scMultipleSelect> </scMultipleSelect>
</div> </div>
<div class="searchItem" v-if="item.type == 'select'"> <div class="searchItem" v-if="item.type == 'select' && ((item.isOpen && item.show) || item.show)">
<label class="name">{{item.name}}</label> <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-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-option v-for="em in item.data" :key="em" :label="em.label" :value="em.active_status"></el-option>
</el-select> </el-select>
</div> </div>
<div class="searchItem" v-if="item.type == 'text'"> <div class="searchItem" v-if="item.type == 'text' && ((item.isOpen && item.show) || item.show)">
<label class="name">{{item.name}}</label> <label class="name">{{item.name}}</label>
<div v-if="item.keyword"> <div v-if="item.keyword">
<scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput> <scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>

View File

@ -14,6 +14,7 @@
<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch> <scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
<div class="searchItem searchBtn"> <div class="searchItem searchBtn">
<el-button :size="size" :icon="searchShow?'el-icon-ArrowUpBold':'el-icon-ArrowDownBold'" @click="searchShowClick">{{searchShow?'收起':'更多'}}</el-button>
<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button> <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> <el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
</div> </div>
@ -75,19 +76,29 @@ export default {
column: [], column: [],
}, },
selection: [], selection: [],
searchShow:false,
searchList:[ searchList:[
{name:'开通日期',type:'date',code:'activation_date'}, {name:'开通日期',type:'date',code:'activation_date'},
{name:'公司名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称"}, {name:'公司名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称",show:true},
{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态"}, {name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",show:true},
{name:'手机号',type:'text',code:'mobile',placeholder:"请输入手机号"}, {name:'手机号',type:'text',code:['mobile'],placeholder:"请输入手机号",isOpen:true,show:false},
{name:'公司地址',type:'text',code:['address'],placeholder:"请输入公司地址"}, {name:'邮件地址',type:'text',code:['email'],placeholder:"请输入邮箱地址",isOpen:true,show:false},
{name:'负责人',type:'text',code:['owner'],placeholder:"请输入负责人"}, {name:'公司地址',type:'text',code:['address'],placeholder:"请输入公司地址",isOpen:true,show:false},
{name:'关键字',type:'text',code:['domain','name'],keyword:true}, {name:'负责人',type:'text',code:['owner'],placeholder:"请输入负责人",isOpen:true,show:false},
{name:'关键字',type:'text',code:['domain','name'],keyword:true,show:true},
], ],
params: {}, params: {},
} }
}, },
methods: { methods: {
searchShowClick(){
this.searchShow = !this.searchShow;
this.searchList.forEach(item=>{
if(item.isOpen){
item.show = this.searchShow
}
})
},
getSelectData(item){ getSelectData(item){
let {data,params} = item; let {data,params} = item;
this.params = params; this.params = params;