4 changed files with 313 additions and 11 deletions
@ -0,0 +1,3 @@ |
|||
import SearchHigh from './src/SearchHigh.vue' |
|||
|
|||
export { SearchHigh } |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<!-- 高级筛选界面 --> |
|||
<Dialog title="筛选" v-model="popoverVisible" :width="'42%'" > |
|||
<el-form id="moreListElForm" size="default" labelWidth="0" :searchData="moreListData"> |
|||
<el-form-item v-for="(item, index) in moreListData.filters" :key="index" :prop="item.column" > |
|||
<!-- 第一列 label--> |
|||
<div class="rowInnerItem"> |
|||
<el-select v-model="item.column" placeholder="请选择筛选对象" :disabled="item.hide" :filterable="true" @change="resetSelect(item)" > |
|||
<el-option v-for="(item, index) in searchOption_high" :key="index" :label="item.label" :value="item.field" /> |
|||
</el-select> |
|||
</div> |
|||
<!-- 第二列 条件--> |
|||
<div class="rowInnerItem"> |
|||
<el-select v-model="item.action" placeholder="请选择条件" :disabled="item.column == '' || item.hide ? true : false"> |
|||
<el-option v-for="item in formatMoreListActions(item) " :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<!-- 第三列 值 --> |
|||
<div class="rowInnerItem"> |
|||
<!-- 输入框 --> |
|||
<el-input v-if="getInputType(item.column) == 'input'" v-model="item.value" placeholder="请输入内容" clearable /> |
|||
<!-- 数字输入框 --> |
|||
<el-input-number v-else-if="getInputType(item.column) == 'inputNumber'" v-model="item.value" :precision="6" /> |
|||
<!-- 下拉框 --> |
|||
<el-select v-else-if="getInputType(item.column) == 'select'" v-model="item.value" placeholder="请选择内容" :filterable="true" clearable > |
|||
<el-option v-for="dict in initSelectOptions(item.column)" :key="dict.value" :label="dict.label" |
|||
:value="dict.value" /> |
|||
<!-- <el-option v-for="(op, index) in initSelectOptions(item.column)" :label="op[item.optionsLabel] || op.label" |
|||
:value="op[item.optionsValue] || op.value" :key="index" /> --> |
|||
</el-select> |
|||
<!-- 时间 --> |
|||
<el-time-picker v-else-if="getInputType(item.column) == 'time'" v-model="item.value" placeholder="选择时间" /> |
|||
<!-- 日期 --> |
|||
<el-date-picker v-else-if="getInputType(item.column) == 'date'" v-model="item.value" type="date" |
|||
placeholder="选择日期" /> |
|||
<!-- 日期时间 --> |
|||
<el-date-picker v-else-if="getInputType(item.column) == 'datePicker'" v-model="item.value" type="datetime" |
|||
placeholder="选择日期时间" /> |
|||
</div> |
|||
<!-- 删除条件按钮 --> |
|||
<el-button type="danger" :icon="Minus" circle size="small" |
|||
@click="moreListDelete(index, item, $event)" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 添加筛选条件 --> |
|||
<div class="moreListPush-btn"> |
|||
<span @click="moreListPush">+ 添加筛选条件</span> |
|||
</div> |
|||
<!-- 按钮 --> |
|||
<div class="moreListBaseBts" > |
|||
<ButtonBase :Butttondata="butttondata" @button-base-click="buttonBaseClick" /> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
<script setup > |
|||
import { Minus } from '@element-plus/icons-vue' |
|||
import * as tableColumnsFun from '@/utils/disposition/tableColumns' |
|||
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|||
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
|||
|
|||
const message = useMessage() // 消息弹窗 |
|||
const route = useRoute() // 路由信息 |
|||
const popoverVisible = ref(false) |
|||
const searchOption_high = ref(tableColumnsFun[route.name].allSchemas.tableColumns.filter(item => (item.field != "action"))) |
|||
const moreListData = ref({ |
|||
filters:[] |
|||
}) |
|||
// 列表-操作按钮 |
|||
const butttondata = [ |
|||
defaultButtons.defaultSearchBtn(null), // 查询 |
|||
defaultButtons.defaultSearchResetBtn(null), // 重置 |
|||
] |
|||
// 高级筛选条件列表配置 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull |
|||
const moreListOptions = ref({ |
|||
action: [ |
|||
{ |
|||
value: '==', |
|||
label: '等于' |
|||
}, { |
|||
value: '!=', |
|||
label: '不等于' |
|||
}, { |
|||
value: '>', |
|||
label: '大于' |
|||
}, { |
|||
value: '<', |
|||
label: '小于' |
|||
}, { |
|||
value: '>=', |
|||
label: '大于等于' |
|||
}, { |
|||
value: '<=', |
|||
label: '小于等于' |
|||
}, { |
|||
value: 'Like', |
|||
label: '模糊' |
|||
}, { |
|||
value: 'in', |
|||
label: '包含' |
|||
}, { |
|||
value: 'notIn', |
|||
label: '不包含' |
|||
}, { |
|||
value: 'betweeen', |
|||
label: '区间' |
|||
}, { |
|||
value: 'isNull', |
|||
label: '是空' |
|||
}, { |
|||
value: 'isNotNull', |
|||
label: '不是空' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
// 判断输入框类型 |
|||
const getInputType = (val) => { |
|||
|
|||
const type = searchOption_high.value.find(item => (item.field == val)) |
|||
let data = 'input' |
|||
if (type?.dictClass) { |
|||
data = 'select' |
|||
} else if (type?.form?.component == 'InputNumber') { |
|||
data = 'inputNumber' |
|||
} else if (type?.form?.component == 'DatePicker') { |
|||
data = 'datePicker' |
|||
} |
|||
return data |
|||
} |
|||
|
|||
// 根据数据内容约束条件选项 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull |
|||
const formatMoreListActions = (val) => { |
|||
if (val) { |
|||
// for(var i = 0; i < searchOption_high.value.length; i++) { |
|||
// if (val == searchOption_high[i].prop) { |
|||
// if (state.searchOption_high[i].filters) { |
|||
// return state.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=') |
|||
// } else if (state.searchOption_high[i].type == 'dateTime') { |
|||
// return state.moreListOptions.action.filter(item => |
|||
// item.value == '==' || |
|||
// item.value == '!=' || |
|||
// item.value == '>' || |
|||
// item.value == '<' || |
|||
// item.value == '>=' || |
|||
// item.value == '<=' ) |
|||
// } else { |
|||
// return moreListOptions.value.action |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
return moreListOptions.value.action |
|||
} |
|||
|
|||
// 高级筛选列表-删除筛选条件行 |
|||
const moreListDelete = (val,item,$event) => { |
|||
if (moreListData.value.filters.length == 1) { |
|||
message.warning('必须保留一条筛选条件!') |
|||
} else { |
|||
message.confirm('您确定删除吗, 是否继续?').then(() => { |
|||
moreListData.value.filters.splice(val, 1) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 高级筛选列表-添加筛选条件行 |
|||
const moreListPush = () => { |
|||
let data = { |
|||
column: '', |
|||
action: "==", |
|||
value: "" |
|||
} |
|||
moreListData.value.filters.push(data) |
|||
} |
|||
|
|||
// 筛选条件改变重置其他项 |
|||
const resetSelect = (val) => { |
|||
val.action = "==" |
|||
val.value = "" |
|||
} |
|||
|
|||
// 查询 重置按钮事件 |
|||
const buttonBaseClick = (val) => { |
|||
if (val == 'search') { // 查询 |
|||
emit('searchFormClick', moreListData.value) |
|||
} else if (val == 'searchReset') { // 重置 |
|||
moreListData.value = {filters:[]} |
|||
moreListPush() |
|||
} |
|||
} |
|||
|
|||
// 初始化下拉option值 |
|||
const initSelectOptions = (item) => { |
|||
return getStrDictOptions(item) |
|||
} |
|||
|
|||
/** 初始化 **/ |
|||
onMounted(async () => { |
|||
moreListPush() |
|||
}) |
|||
|
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'searchFormClick' |
|||
]) |
|||
|
|||
defineExpose({ |
|||
popoverVisible |
|||
}) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
// .searchHighComponent { |
|||
.moreListOuter { |
|||
margin-top: 10px; |
|||
position: relative; |
|||
|
|||
.el-form { |
|||
max-height: 155px; //3行条件个高度 |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
padding: 0 0 15px 0; |
|||
font-weight: bold; |
|||
color: #333; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.rowInnerItem { |
|||
margin-right: 20px; |
|||
width: 220px; |
|||
|
|||
.el-input__wrapper { |
|||
width: 220px; |
|||
} |
|||
} |
|||
|
|||
.moreListBaseBts { |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.moreListPush-btn { |
|||
padding: 0 10px 15px 0; |
|||
color: rgb(64, 158, 255); |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: blue; |
|||
} |
|||
} |
|||
} |
|||
// } |
|||
</style> |
|||
Loading…
Reference in new issue