eam
/
eam-ui
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

SBBJ-917设备保养项配置 添加明细筛选所属厂区不好使

master
张立 4 days ago
parent
468b0b6601
commit
62446f2a13
1 changed files with 182 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 220
      src/components/SearchHigh/src/SearchHigh.vue

220
src/components/SearchHigh/src/SearchHigh.vue
View File

@ -5,7 +5,7 @@
<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-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>
@ -21,31 +21,50 @@
<!-- 输入框 -->
<el-input v-if="getInputType(item.column) == 'input'" v-model="item.value" placeholder="请输入内容" clearable :disabled="item.disabled"/>
<!-- 数字输入框 -->
<el-input-number v-else-if="getInputType(item.column) == 'inputNumber'" v-model="item.value" :precision="getInputPrecision(item.column)" :disabled="item.disabled"/>
<el-input-number v-else-if="getInputType(item.column) == 'inputNumber'" v-model="item.value" :precision="getInputPrecision(item.column)" :disabled="item.disabled"/>
<!-- 下拉框 -->
<el-select v-else-if="getInputType(item.column) == 'select'" v-model="item.value1" placeholder="请选择内容" :filterable="true" clearable :disabled="item.disabled" :multiple="item.action=='in' || item.action=='notIn' ? true : false" collapse-tags collapse-tags-tooltip :key="item.action">
<el-option v-for="dict in initSelectOptions(item.column)" :key="dict.value" :label="dict.label"
<!-- <el-select v-else-if="getInputType(item.column) == 'select' && !getFilterable(item.column)" v-model="item.value1" :placeholder="请选择内容" :filterable="!getFilterable(item.column)" clearable :disabled="item.disabled" :multiple="item.action=='in' || item.action=='notIn' ? true : false" collapse-tags collapse-tags-tooltip :key="item.action">
<el-option v-for="dict in allDictOptions[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-select
v-else-if="getInputType(item.column) == 'select' "
v-model="item.value1"
:multiple="item.action == 'in' || item.action == 'notIn' ? true : false"
collapse-tags
collapse-tags-tooltip
filterable
remote
reserve-keyword
:placeholder="请选择内容"
remote-show-suffix
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="cur in allDictOptions[item.column]"
:key="cur[allDictOptions[item.column+'Value']] || cur.value"
:label="cur[allDictOptions[item.column+'Lable']] || cur.label"
:value="cur[allDictOptions[item.column+'Value']] || cur.value"
/>
</el-select>
<!-- 时间 -->
<el-time-picker v-else-if="getInputType(item.column) == 'time'" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" v-model="item.value1" style="width: calc(100% - 20px);margin-right: 10px;" :disabled="item.disabled"/>
<el-time-picker v-else-if="getInputType(item.column) == 'time'" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" v-model="item.value1" style="width: calc(100% - 20px);margin-right: 10px;" :disabled="item.disabled" />
<!-- 日期 -->
<el-date-picker v-else-if="getInputType(item.column) == 'date'" v-model="item.value1" type="daterange"
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,'daterange')" value-format="YYYY-MM-DD" format="YYYY/MM/DD" :disabled="item.disabled" />
<!-- 日期时间 -->
<el-date-picker v-else-if="getInputType(item.column) == 'datePicker'" v-model="item.value1" type="datetimerange"
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"/>
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"/>
</div>
<!-- 删除条件按钮 -->
<el-button type="danger" :icon="Minus" circle size="small"
@click="moreListDelete(index, item, $event)" />
<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>
<span @click="moreListPush">+ {{ 添加筛选条件 }}</span>
</div>
<!-- 按钮 -->
<div class="moreListBaseBts" >
@ -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,6 +208,16 @@ 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))
@ -157,13 +227,24 @@ const moreListOptions = ref({
}
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,9 +253,9 @@ 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,37 +265,50 @@ 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,16 +317,17 @@ 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,
}
@ -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
})

Write Preview
Loading…
Cancel
Save