From 62446f2a13213142416ab339fb73742d28d5453d Mon Sep 17 00:00:00 2001 From: zhang_li Date: Mon, 21 Apr 2025 14:42:43 +0800 Subject: [PATCH] =?UTF-8?q?SBBJ-917=E8=AE=BE=E5=A4=87=E4=BF=9D=E5=85=BB?= =?UTF-8?q?=E9=A1=B9=E9=85=8D=E7=BD=AE=20=E6=B7=BB=E5=8A=A0=E6=98=8E?= =?UTF-8?q?=E7=BB=86=E7=AD=9B=E9=80=89=E6=89=80=E5=B1=9E=E5=8E=82=E5=8C=BA?= =?UTF-8?q?=E4=B8=8D=E5=A5=BD=E4=BD=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SearchHigh/src/SearchHigh.vue | 232 +++++++++++++++---- 1 file changed, 182 insertions(+), 50 deletions(-) diff --git a/src/components/SearchHigh/src/SearchHigh.vue b/src/components/SearchHigh/src/SearchHigh.vue index 89d8adb..a6aa12e 100644 --- a/src/components/SearchHigh/src/SearchHigh.vue +++ b/src/components/SearchHigh/src/SearchHigh.vue @@ -5,7 +5,7 @@
- +
@@ -21,31 +21,50 @@ - + - - + - + --> + + + - + + range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width: calc(100% - 20px);margin-right: 10px;" @change="changeDateTimePicker($event, item,'daterange')" value-format="YYYY-MM-DD" format="YYYY/MM/DD" :disabled="item.disabled" /> + range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" style="width: calc(100% - 20px);margin-right: 10px;" @change="changeDateTimePicker($event, item, 'datetimerange')" value-format="x" format="YYYY/MM/DD HH:mm:ss" :disabled="item.disabled"/> - +
- + 添加筛选条件 + + {{ 添加筛选条件 }}
@@ -57,6 +76,24 @@ import { Minus } from '@element-plus/icons-vue' import * as defaultButtons from '@/utils/disposition/defaultButtons' import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' +// import * as UserApi from '@/api/system/user' +const { t } = useI18n() + +const userListAll = ref([]) +// UserApi.getUserListAll().then((res) => { +// userListAll.value = res.map(item => { +// return { +// label: item.nickname, +// value: item.id +// } +// }) +// options.value = res.map((item) => { +// return { +// label: item.nickname, +// value: item.id +// } +// }) +// }) const props = defineProps({ // 主组件name值 @@ -72,24 +109,45 @@ const props = defineProps({ allSchemas: { type: Object, default: null - } + }, + detailAllSchemas: { + type: Object, + default: null + }, + isShowMainDetailSchemas: { + type: Boolean, + default: false + }, }) const message = useMessage() // 消息弹窗 const route = useRoute() // 路由信息 const popoverVisible = ref(false) -const searchOption_high = ref(props.allSchemas?.tableColumns.filter(item => (item.field != "action" && !item.hiddenSearchHigh))) +const searchOption_high = ref([]) + +if(props.isShowMainDetailSchemas){ + + searchOption_high.value = [...props.allSchemas?.tableColumns,...props.detailAllSchemas?.tableColumns].filter(item => (item.field != "action"&&!item.hiddenSearchHigh)) +}else if(props.detailAllSchemas){ + searchOption_high.value = props.detailAllSchemas?.tableColumns.filter(item => (item.field != "action"&&!item.hiddenSearchHigh)) +}else { + searchOption_high.value = props.allSchemas?.tableColumns.filter(item => (item.field != "action"&&!item.hiddenSearchHigh)) +} const moreListData = ref({ filters:[] }) // 列表-操作按钮 const butttondata = [ defaultButtons.defaultSearchBtn(null), // 查询 - defaultButtons.defaultSearchResetBtn(null), // 重置 + // defaultButtons.defaultSearchResetBtn(null), // 重置 重置功能现在有问题，让去掉 ] -// 高级筛选条件列表配置 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull +// 高级筛选条件列表配置 ==,!=,>,<,>=,<=,like,in,notIn,between,isNull,isNotNull const moreListOptions = ref({ action: [ + { + value: 'like', + label: '模糊' + }, { value: '==', label: '等于' @@ -108,9 +166,6 @@ const moreListOptions = ref({ }, { value: '<=', label: '小于等于' - }, { - value: 'like', - label: '模糊' }, { value: 'in', label: '包含' @@ -118,7 +173,7 @@ const moreListOptions = ref({ value: 'notIn', label: '不包含' }, { - value: 'betweeen', + value: 'between', label: '区间' }, { value: 'isNull', @@ -126,18 +181,23 @@ const moreListOptions = ref({ }, { value: 'isNotNull', label: '不是空' + }, { + value: 'isStr', + label: '是空字符串' + }, { + value: 'isNotStr', + label: '不是空字符串' } ] }) // 判断输入框类型 const getInputType = (val) => { - - const type = searchOption_high.value.find(item => (item.field == val)) + const type = searchOption_high.value.find(item => (item.field == val)) let data = 'input' - if (type?.dictType) { + if (type?.dictType || type?.form?.componentProps?.options?.length>0 || type?.field == 'creator' || type?.showUserSelectHigh ||type?.field == 'updater' ||type?.field == 'worker') { data = 'select' - } else if (type?.form?.component == 'InputNumber') { + } else if (type?.form?.component == 'InputNumber' || type?.field.includes('qty') || type?.field.includes('Qty')) { data = 'inputNumber' } else if (type?.form?.component == 'DatePicker') { if(type?.form?.componentProps?.type=='datetimerange'|| type?.form?.componentProps?.type == 'datetime'){ @@ -148,22 +208,43 @@ const moreListOptions = ref({ } return data } + +const getFilterable = (val) => { + const type = searchOption_high.value.find(item => (item.field == val)) + // 下拉列表过长，去掉筛选功能 + if (type?.field == 'creator' || type?.showUserSelectHigh || type?.field == 'updater' || type?.field == 'worker') { + return true + }else{ + return false + } +} // 判断数字输入框小数点位数 const getInputPrecision = (val) => { const type = searchOption_high.value.find(item => (item.field == val)) let precision = 6 if (type?.form?.component == 'InputNumber') { precision = type?.form?.componentProps?.precision || type?.form?.componentProps?.precision == 0 ? type.form.componentProps.precision : 6 - } + } return precision } -// 根据数据内容约束条件选项 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull +// 根据数据内容约束条件选项 ==,!=,>,<,>=,<=,like,in,notIn,between,isNull,isNotNull const formatMoreListActions = (val) => { + const type = searchOption_high.value.find(item => (item.field == val.column)) if (val) { if(getInputType(val.column)=='datePicker'|| getInputType(val.column) == 'date'){ - return moreListOptions.value.action.filter(item => item.value == 'betweeen') - }else{ - return moreListOptions.value.action.filter(item => item.value != 'betweeen') + return moreListOptions.value.action.filter(item => item.value == 'between') + }else if(getInputType(val.column)=='inputNumber'){ + return moreListOptions.value.action.filter(item => item.value != 'like'&&item.value != 'in'&&item.value != 'notIn'&&item.value != 'between'&&item.value != 'isStr'&&item.value != 'isNotStr') + }else if(val.column == 'creator' || type?.showUserSelectHigh ||val.column == 'updater' ||val.column == 'worker'){ + val.action = '==' + return moreListOptions.value.action.filter(item => item.value == '==') + }else { + // 排除条件特殊处理 20250414byAn.Hr + if(type?.excludeActions && type?.excludeActions.length > 0){ + let _list = moreListOptions.value.action.filter(item => (item.value != 'between') && (type?.excludeActions.indexOf(item.value) < 0)) + return _list + } + return moreListOptions.value.action.filter(item => item.value != 'between') } } return moreListOptions.value.action @@ -172,11 +253,11 @@ const formatMoreListActions = (val) => { // 高级筛选列表-删除筛选条件行 const moreListDelete = (val,item,$event) => { if (moreListData.value.filters.length == 1) { - message.warning('必须保留一条筛选条件!') + message.warning(t('ts.必须保留一条筛选条件!')) } else { - message.confirm('您确定删除吗, 是否继续?').then(() => { + message.confirm(t('ts.您确定删除吗, 是否继续?')).then(() => { moreListData.value.filters.splice(val, 1) - }) + }) } } @@ -184,38 +265,51 @@ const moreListDelete = (val,item,$event) => { const moreListPush = () => { let data = { column: '', - action: "==", + action: "like", value: "", value1 :"" } moreListData.value.filters.push(data) } +const lastestColumn = ref('') // 筛选条件改变重置其他项 const resetSelect = (val) => { + const _colums = searchOption_high.value.find(item => (item.field == val.column)) if (getInputType(val.column) == 'datePicker' || getInputType(val.column) == 'date') { - val.action = 'betweeen' + val.action = 'between' val.disabled = false - }else{ + }else if (getInputType(val.column) == 'inputNumber' ) { val.action = '==' val.disabled = false + } else if(_colums.excludeActions && _colums.excludeActions.length > 0){ + // 排除条件特殊问题处理 20250416byAn.Hr + const _options = formatMoreListActions(val) + val.action = _options[0].value + val.disabled = false + } else{ + val.action = 'like' + val.disabled = false + } + if(lastestColumn.value&&lastestColumn.value!=val.column){ + val.value1 = "" + val.value = "" } - val.value1 = "" - val.value = "" + lastestColumn.value = val.column } // 范围改变 const actionSelect = (val)=>{ - if(val.action=='isNull'|| val.action == 'isNotNull'){ + if(val.action=='isNull'|| val.action == 'isNotNull'|| val.action == 'isStr'|| val.action == 'isNotStr'){ val.disabled = true }else{ val.disabled = false } - val.value1 = undefined - nextTick(()=>{ - val.value1 =[] - val.value = '' - }) - + // val.value1 = undefined + // nextTick(()=>{ + // val.value1 =[] + // val.value = '' + // }) + } // 查询 重置按钮事件 @@ -223,25 +317,26 @@ const buttonBaseClick = (val) => { if (val == 'search') { // 查询 let data = [] moreListData.value.filters.forEach(item => { + const type = searchOption_high.value.find(item1 => (item1.field == item.column)) let obj = {} - if(item.value1&&item.value1.length>0){ + if(item.value1&&item.value1.length>0 || (item.value1&&typeof item.value1 === 'number')){ obj = { - column: item.column, + column: type?.columnSearchHigh || item.column, action: item.action, value:Array.isArray(item.value1)?item.value1.join(','):item.value1, } }else{ obj = { - column: item.column, + column: type?.columnSearchHigh || item.column, action: item.action, value:item.value, } } - + data.push(obj) }) if (props.masterId){ - data.push({ + data.push({ column: 'masterId', action: "==", value: props.masterId, @@ -258,6 +353,27 @@ const buttonBaseClick = (val) => { } } +watch(()=>popoverVisible.value,()=>{ + if(popoverVisible.value){ + getDictOptions() + } +}) +const allDictOptions = ref({}) //所有下拉框选项 +const getDictOptions = ()=>{ + let selectList = searchOption_high.value.filter(item=>getInputType(item.field) == 'select') + selectList.forEach(item=>{ + // allDictOptions.value[item.field] = getStrDictOptions(item.dictType) + allDictOptions.value[item.field] = item.form.componentProps.options + allDictOptions.value[item.field+'Value'] = item?.form?.componentProps?.optionsAlias?.valueField + allDictOptions.value[item.field+'Lable'] = item?.form?.componentProps?.optionsAlias?.labelField + // else if (item.field == 'creator' || item?.showUserSelectHigh || item.field == 'updater' || item.field == 'worker') { + // allDictOptions.value[item.field] = userListAll.value + // } + }) + // console.log(888,userListAll.value) + console.log(999,allDictOptions.value) +} + // 初始化下拉option值 const initSelectOptions = (item) => { return getStrDictOptions(searchOption_high.value.find(searchOptionItem => (searchOptionItem.field == item)).dictType) @@ -283,6 +399,22 @@ const changeDateTimePicker = (e, val,from) =>{ val.value = e.join(',') } } +const loading = ref(false) +const options = ref([]) +const remoteMethod = (query, array) => { + if (query) { + loading.value = true + setTimeout(() => { + loading.value = false + // options.value = userListAll.value.filter((item) => { + // return item.label.toLowerCase().includes(query.toLowerCase()) + // }) + }, 200) + } else { + // options.value = userListAll.value + } +} + defineExpose({ popoverVisible }) @@ -339,4 +471,4 @@ defineExpose({ } } // } - \ No newline at end of file +