lcw
This commit is contained in:
@ -1,86 +1,97 @@
|
||||
<template>
|
||||
<div style="padding: 0" v-loading="loadingPage" class="pageSearch searchBox"
|
||||
<div v-loading="loadingPage" class="pageSearch searchBox main-container"
|
||||
:style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
|
||||
<div class="filter-title">
|
||||
<span class="filter-label"><el-icon><Filter /></el-icon>筛选条件</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div v-for="(item, index) in getArr" :key="index" class="item">
|
||||
<div class="label" v-if="item.label">{{ item.label }}</div>
|
||||
<!-- select -->
|
||||
<el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
|
||||
:clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
|
||||
collapse-tags-tooltip>
|
||||
<el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label || obj.lable"
|
||||
:value="obj.value" />
|
||||
</el-select>
|
||||
<!-- input -->
|
||||
<el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
|
||||
:clearable="item.clearable" :placeholder="item.placeholder" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
|
||||
unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
|
||||
value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-else-if="item.showType === 'datetimerange'" v-model="searchObj[item.prop]"
|
||||
type="datetimerange" unlink-panels :range-separator="item.rangeSeparator || '至'"
|
||||
:start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
|
||||
:shortcuts="item.shortcuts" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
|
||||
:placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
|
||||
value-format="YYYY-MM-DD">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-else-if="item.showType === 'datetime'" v-model="searchObj[item.prop]" type="datetime"
|
||||
:placeholder="item.placeholder" value-format="YYYY-MM-DD HH:mm:ss">
|
||||
</el-date-picker>
|
||||
<div class="filter-title">
|
||||
<span class="filter-label"><el-icon>
|
||||
<Filter />
|
||||
</el-icon>筛选条件</span>
|
||||
</div>
|
||||
<div class="content-container">
|
||||
<div class="box">
|
||||
<div v-for="(item, index) in getArr" :key="index" class="item">
|
||||
<div class="label" v-if="item.label">{{ item.label }}</div>
|
||||
<!-- select -->
|
||||
<el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
|
||||
:clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
|
||||
collapse-tags-tooltip>
|
||||
<el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label || obj.lable"
|
||||
:value="obj.value" />
|
||||
</el-select>
|
||||
<!-- input -->
|
||||
<el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
|
||||
:clearable="item.clearable" :placeholder="item.placeholder" />
|
||||
<!-- input -->
|
||||
<el-input v-else-if="item.showType === 'number'" class="input" v-model="searchObj[item.prop]"
|
||||
:clearable="item.clearable" :placeholder="item.placeholder" type="number" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
|
||||
unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
|
||||
value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-else-if="item.showType === 'datetimerange'" v-model="searchObj[item.prop]"
|
||||
type="datetimerange" unlink-panels :range-separator="item.rangeSeparator || '至'"
|
||||
:start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
|
||||
:shortcuts="item.shortcuts" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
|
||||
:placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
|
||||
value-format="YYYY-MM-DD">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-else-if="item.showType === 'datetime'" v-model="searchObj[item.prop]" type="datetime"
|
||||
:placeholder="item.placeholder" value-format="YYYY-MM-DD HH:mm:ss">
|
||||
</el-date-picker>
|
||||
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.showType === 'department'">
|
||||
<MOSTY.Department clearable v-model="searchObj[item.prop]" />
|
||||
</template>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.showType === 'checkbox'">
|
||||
<el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.showType === 'department'">
|
||||
<MOSTY.Department clearable v-model="searchObj[item.prop]" />
|
||||
</template>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.showType === 'checkbox'">
|
||||
<el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate"
|
||||
@change="
|
||||
(val) => {
|
||||
handleCheckAllChange(val, item);
|
||||
}
|
||||
">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="searchObj[item.prop]" @change="
|
||||
(val) => {
|
||||
handleCheckedCitiesChange(val, item);
|
||||
}
|
||||
">
|
||||
<el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- radio -->
|
||||
<el-radio-group v-else-if="item.showType === 'radio'" v-model="searchObj[item.prop]" @change="
|
||||
(val) => {
|
||||
handleCheckAllChange(val, item);
|
||||
}
|
||||
">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="searchObj[item.prop]" @change="
|
||||
(val) => {
|
||||
handleCheckedCitiesChange(val, item);
|
||||
handleRadioChange(val, item);
|
||||
}
|
||||
">
|
||||
<el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- radio -->
|
||||
<el-radio-group v-else-if="item.showType === 'radio'" v-model="searchObj[item.prop]" @change="
|
||||
(val) => {
|
||||
handleRadioChange(val, item);
|
||||
}
|
||||
">
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 级联选择 -->
|
||||
<el-cascader v-else-if="item.showType === 'cascader'" v-model="searchObj[item.prop]" :props="item.props"
|
||||
:show-all-levels="item.showAllLevels" :clearable="item.clearable" :options="getOptions[item.prop]"
|
||||
:placeholder="item.placeholder" />
|
||||
<div v-if="item.showType === 'Slot'">
|
||||
<slot :name="item.prop"></slot>
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 级联选择 -->
|
||||
<el-cascader v-else-if="item.showType === 'cascader'" v-model="searchObj[item.prop]" :props="item.props"
|
||||
:show-all-levels="item.showAllLevels" :clearable="item.clearable" :options="getOptions[item.prop]"
|
||||
:placeholder="item.placeholder" />
|
||||
<div v-if="item.showType === 'Slot'">
|
||||
<slot :name="item.prop"></slot>
|
||||
</div>
|
||||
<div v-if="item.showType === 'defaultSlot'">
|
||||
<slot name="defaultSlot"></slot>
|
||||
</div>
|
||||
<div v-if="item.showType === 'nameSlot'">
|
||||
<slot name="nameSlot"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.showType === 'defaultSlot'">
|
||||
<slot name="defaultSlot"></slot>
|
||||
</div>
|
||||
<div v-if="item.showType === 'nameSlot'">
|
||||
<slot name="nameSlot"></slot>
|
||||
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="flex">
|
||||
<el-button type="primary" @click="submit" size="small">确定</el-button>
|
||||
<el-button type="" @click="reset" size="small">重置</el-button>
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
<el-button type="" @click="reset">重置</el-button>
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -476,17 +487,32 @@ watchEffect(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageSearch {
|
||||
.main-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background: linear-gradient(to right, #9ed7ff, #e6f0f8);
|
||||
padding: 5px 15px;
|
||||
background: linear-gradient(to right, #9ed7ff, #e6f0f8);
|
||||
padding: 5px 15px;
|
||||
|
||||
.filter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-right: 10px;
|
||||
@ -501,7 +527,8 @@ padding: 5px 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 0 15px;
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user