封装自定义列的筛选

package.json

@@ -40,7 +40,8 @@
     "@typescript-eslint/parser": "^4.31.1",
     "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0",
+    "naive-ui": "^2.21.2"
   },
   "browserslist": [
     "last 10 Chrome versions",

src/components/common/customWhere/customWhere.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { ref,computed,reactive } from 'vue'
+import { ref,computed,reactive,onMounted } from 'vue'
 import useScrollModule from '@/module/scrollbar/scrollModule'
 import whereNode from './whereNode.vue'
 export default {
@@ -53,15 +53,19 @@ export default {
   },
   setup(props) {
     const allCol = computed(() => {
-      return props.columns.filter(x=>x.value.indexOf('diy_')!=-1)
+      return props.columns.filter(x=>x.IsCustom>0)
     })
-    console.log(props.columns,allCol.value)
     const colData=reactive({
         cardTitle:props.title?ref(props.title):'自定义筛选',
         scroll: useScrollModule(),
         currentNode: null
     })
 
+    onMounted(() => {
+      const tempCurrent=props.columns.filter(x=>x.IsCustom>0)
+      colData.currentNode=tempCurrent?tempCurrent[0]:null
+    })
+
     return {allCol,colData}
   }
 }

src/components/common/customWhere/whereNode.vue

 <template>
-  <div class="col-8 row q-pl-md">
-    <q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" v-model="colData.where" :options="colData.nodeWhere" option-label="name" class="col-4" dense option-value="id" map-options filled></q-select>
+  <div class="col-8 row q-px-md">
+    <q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" v-model="colData.where" :options="colData.nodeWhere" option-label="Name" class="col-5" dense option-value="Id" map-options filled></q-select>
+    <div class="col-7 q-pl-md">
+      <where-node-value :node="node" v-model="model" v-if="colData.where && !colData.where.IsNotValue"></where-node-value>
+    </div>
   </div>
 </template>
 
 <script>
 import { reactive, watch, onMounted } from 'vue'
+import { UseDirection } from '@/config/direction'
+import whereNodeValue from './whereNodeValue.vue'
 export default {
+  components: { whereNodeValue },
   props: {
     /**
      * @description 传入Node对象
@@ -17,93 +23,47 @@ export default {
     const colData = reactive({
       nodeWhere: [],
       where: null,
-      whereValue:""
+      whereValue: ''
+    })
+
+    const model = reactive({
+      Name: props.node.data.Id,
+      Type: props.node.data.Type,
+      Direction: -1,
+      StartValue: '',
+      EndValue: '',
+      IsCustom: props.node.data.IsCustom
     })
 
     watch(
       () => props.node,
       val => {
-        initWhere(val.Type)
+        initWhere(val.data)
       },
       { deep: true }
     )
 
-    const wheres = reactive([
-      {
-        name: '包含所有',
-        id: 1,
-        mappingType: [3]
-      },
-      {
-        name: '包含所有',
-        id: 2,
-        mappingType: [3]
-      },
-      {
-        name: '不包含',
-        id: 3,
-        mappingType: [3]
-      },
-      {
-        name: '等于',
-        id: 4,
-        mappingType: [1, 2, 4, 7]
-      },
-      {
-        name: '不等于',
-        id: 5,
-        mappingType: [1, 2, 4, 7]
-      },
-      {
-        name: '为空',
-        id: 6,
-        mappingType: [1, 2, 3, 4]
-      },
-      {
-        name: '不为空',
-        id: 7,
-        mappingType: [1, 2, 3, 4]
-      },
-      {
-        name: '包含',
-        id: 8,
-        mappingType: [1, 2, 4]
-      },
-      {
-        name: '大于',
-        id: 9,
-        mappingType: [7]
-      },
-      {
-        name: '大于等于',
-        id: 10,
-        mappingType: [7]
-      },
-      {
-        name: '小于',
-        id: 11,
-        mappingType: [7]
-      },
-      {
-        name: '大于等于',
-        id: 12,
-        mappingType: [7]
-      }
-    ])
-
-    const initWhere = type => {
-      colData.nodeWhere = wheres.filter(x => x.mappingType.indexOf(type) != -1)
+    const initWhere = data => {
+      console.log(data)
+      colData.nodeWhere = UseDirection.QueryDirectionByType(data.Type)
+      model.Name=data.Id
+      model.Type=data.Type
+      model.StartValue='',
+      model.EndValue='',
+      model.IsCustom=data.IsCustom
       if (colData.nodeWhere && colData.nodeWhere.length > 0) {
         colData.where = colData.nodeWhere[0]
+        model.Direction=colData.where.Id
       } else {
         colData.where = null
+        model.Direction=-1
       }
     }
 
     onMounted(() => {
-      initWhere(props.node.Type)
+      initWhere(props.node.data)
     })
-    return { colData }
+    return { colData,model }
   }
 }
 </script>

src/components/common/customWhere/whereNodeValue.vue

+<template>
+  <div v-if="currentNode.data.Type == 1 || currentNode.data.Type == 2">
+    <q-input v-model="model.StartValue" @update:model-value="changeModelHandler" filled dense placeholder="请输入"></q-input>
+  </div>
+  <div v-if="currentNode.data.Type == 3">
+    <q-select @update:model-value="radioModel.changeHandler" v-model="radioModel.model" map-options :options="radioModel.Option" :option-label="radioModel.label" :option-value="radioModel.val" filled dense></q-select>
+  </div>
+  <div v-if="currentNode.data.Type == 4">
+    <q-select multiple @update:model-value="checkModel.changeHandler" v-model="checkModel.model" map-options :options="checkModel.Option" :option-label="checkModel.label" :option-value="checkModel.val" filled dense></q-select>
+  </div>
+  <div v-if="currentNode.data.Type == 7">
+    <q-input v-model="model.StartValue" @update:model-value="integerModel.changeHandler" filled dense placeholder="请输入"></q-input>
+  </div>
+</template>
+
+<script>
+import { computed, reactive, watch, onMounted, ref } from 'vue'
+export default {
+  props: {
+    /**
+     * 条件节点
+     */
+    node: Object,
+
+    /**
+     * 对象
+     */
+    modelValue: Object
+  },
+  setup(props, context) {
+    const model = computed(() => {
+      return props.modelValue
+    })
+
+    const currentNode = ref(props.node)
+
+    watch(
+      () => props.node,
+      val => {
+        currentNode.value = val
+        init(val)
+      },
+      { deep: true }
+    )
+
+    const changeModelHandler = () => {
+      console.log(model.value)
+      context.emit('update:modelValue', model.value)
+    }
+
+    const radioModel = reactive({
+      model: null,
+      Option: [],
+      val: 'Id',
+      label: 'Name',
+      changeHandler: val => {
+        model.value.StartValue = `${val.Id}`
+        changeModelHandler()
+      }
+    })
+
+    const checkModel = reactive({
+      model: [],
+      Option: [],
+      val: 'Id',
+      label: 'Name',
+      changeHandler: val => {
+        let startValue = ''
+        val.forEach((x, i) => {
+          startValue += x.Id
+          if (i < val.length - 1) {
+            startValue += ','
+          }
+        })
+        model.value.StartValue = startValue
+        changeModelHandler()
+      }
+    })
+
+    const integerModel = reactive({
+      mask: '',
+      nomuch: (val,len) => {
+        val = val.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
+        val = val.replace(/^\./g, '') //验证第一个字符是数字而不是
+        val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
+        val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
+        let lenStr=""
+        for (let i = 0; i < len; i++) {
+          lenStr+="\\d"
+        }
+        let matchRule=''
+        eval(`matchRule=/^(\\-)*(\\d+)\\.(${lenStr}).*$/`)
+        val = val.replace(matchRule, '$1$2.$3') //只能输入一个小数
+        return val
+      },
+      changeHandler: val => {
+        let temp=""
+        if(currentNode.value.data.Digits==0){
+          temp=val.replace(/\D/gi, '')
+          temp=temp?parseInt(temp).toString():''
+        }else{
+          temp= integerModel.nomuch(val,currentNode.value.data.Digits)
+        }
+        console.log(temp)
+        setTimeout(() => {
+          model.value.StartValue = temp
+        }, 200);
+        changeModelHandler()
+      }
+    })
+
+    const initRadioModel = node => {
+      radioModel.model = node.data.OptionsList[0]
+      radioModel.Option = node.data.OptionsList
+    }
+
+    const initCheckModel = node => {
+      checkModel.model = [node.data.OptionsList[0]]
+      checkModel.Option = node.data.OptionsList
+    }
+
+    const initIntegerModel = node => {
+      let mask = /^([^0][0-9]+|0)$/
+      if (node.data.Digits > 0) {
+        eval(`mask= /^(([^0][0-9]+|0)\\.([0-9]{1,${node.data.Digits}})$)|^([^0][0-9]+|0)$/`)
+      }
+      integerModel.mask = mask
+    }
+
+    const init = node => {
+      if (node.data.Type == 3) {
+        initRadioModel(node)
+      } else if (node.data.Type == 4) {
+        initCheckModel(node)
+      } else if (node.data.Type == 7) {
+        initIntegerModel(node)
+      }
+    }
+
+    onMounted(() => {
+      init(props.node)
+    })
+
+    return { model, currentNode, changeModelHandler, radioModel, checkModel, integerModel }
+  }
+}
+</script>
+
+<style></style>

src/config/direction.ts

+
+
+/**
+ * @description 条件子项
+ */
+interface DirectionItem {
+  /**
+   * 编号，注意与后端匹配
+   */
+  Id: number
+  /**
+   * 名称，用于显示
+   */
+  Name: string
+  /**
+   * 例外的规则类型
+   */
+  ExceptionMapping?: Array<number>
+  /**
+   * 是否不需要值
+   */
+  IsNotValue?: boolean
+}
+
+/**
+ * @description 条件集合
+ */
+interface Direction {
+  Id: number
+  Remark?: string
+  MappingType: number[]
+  Childs: DirectionItem[]
+}
+
+/**
+ * 自定义对象
+ */
+interface SelectModel {
+  Name: string
+  Type: number
+  Direction: number
+  StartValue: string
+  EndValue: string
+  IsCustom: number
+}
+
+/**
+ * 初始化数据
+ */
+const DirectionRule = new Array<Direction>()
+
+//#region 第一组用于多选之类的
+DirectionRule.push({
+  Id: 1,
+  MappingType: [4],
+  Childs: [
+    {
+      Id: 1,
+      Name: '包含所有'
+    },
+    {
+      Id: 2,
+      Name: '包含任意'
+    },
+    {
+      Id: 3,
+      Name: '不包含'
+    },
+    {
+      Id: 4,
+      Name: '为空',
+      IsNotValue: true
+    },
+    {
+      Id: 5,
+      Name: '不为空',
+      IsNotValue: true
+    }
+  ]
+})
+//#endregion
+
+//#region 第二组用于文本，多好文本，单选之类
+DirectionRule.push({
+  Id: 2,
+  MappingType: [1, 2, 3],
+  Childs: [
+    {
+      Id: 1,
+      Name: '等于'
+    },
+    {
+      Id: 2,
+      Name: '不等于'
+    },
+    {
+      Id: 3,
+      Name: '为空',
+      IsNotValue: true
+    },
+    {
+      Id: 4,
+      Name: '不为空',
+      IsNotValue: true
+    },
+    {
+      Id: 5,
+      Name: '模糊',
+      ExceptionMapping: [3]
+    }
+  ]
+})
+//#endregion
+
+//#region 第三组组用于文本，多好文本，单选之类
+DirectionRule.push({
+  Id: 2,
+  MappingType: [7],
+  Childs: [
+    {
+      Id: 1,
+      Name: '等于'
+    },
+    {
+      Id: 2,
+      Name: '大于'
+    },
+    {
+      Id: 3,
+      Name: '大于等于'
+    },
+    {
+      Id: 4,
+      Name: '小于'
+    },
+    {
+      Id: 5,
+      Name: '小于等于'
+    },
+    {
+      Id: 6,
+      Name: '不等于'
+    }
+  ]
+})
+//#endregion
+
+/**
+ * 获取指定类型的比较规则
+ * @param type 类型
+ * @returns 返回值
+ */
+const QueryDirectionByType = (type: number): DirectionItem[] => {
+  const temp = DirectionRule.filter(x => x.MappingType.indexOf(type) != -1)
+  if (temp && temp.length > 0) {
+    const tempChild = temp[0].Childs.filter(y => !y.ExceptionMapping || y.ExceptionMapping.indexOf(type) == -1)
+
+    if (tempChild && tempChild.length > 0) {
+      return tempChild
+    } else {
+      console.warn('已匹配规则，但是所有子项都已排除该类型的匹配')
+      return new Array<DirectionItem>()
+    }
+    return tempChild
+  } else {
+    console.warn('未受到支持的数据类型' + type)
+    return new Array<DirectionItem>()
+  }
+}
+
+//#region  时间范围验证
+const RangeTypeValidateRule = (model: SelectModel): string => {
+  if (model.Type == 6 && model.StartValue.trim() != '' && model.EndValue.trim() != '' && model.Direction == 0) {
+    return ''
+  } else {
+    return '数据不合法，请检查'
+  }
+}
+//#endregion
+
+//#region  单选/多选/文本验证
+const TextTypeValidateRule = (model: SelectModel): string => {
+  const SupportList = [1, 2, 3, 4, 7]
+  if (SupportList.indexOf(model.Type) != -1) {
+    const directModel = DirectionRule.filter(x => x.MappingType.indexOf(model.Type) != -1)
+    if (directModel && directModel.length > 0) {
+      const directItemModel = DirectionRule[0].Childs.find(x => (x.Id = model.Direction))
+      if (directItemModel) {
+        if (!directItemModel.IsNotValue && model.StartValue.trim() != '') {
+          return ''
+        } else if (directItemModel.IsNotValue) {
+          return ''
+        } else {
+          return '数据不合法，请检查'
+        }
+      } else {
+        return '数据不合法，请检查'
+      }
+    } else {
+      return '数据不合法，请检查'
+    }
+  } else {
+    return '数据不合法，请检查'
+  }
+}
+//#endregion
+
+//#region  多选日期验证
+const DateTypeValidateRule = (model: SelectModel): string => {
+  if (model.Type == 5 && model.StartValue.trim() != '') {
+    return ''
+  } else {
+    return '数据不合法，请检查'
+  }
+}
+//#endregion
+
+//#region 验证数据
+const ValidateCoustom = (list: SelectModel[]): string => {
+  let msg = ''
+  //定义映射规则
+  for (let i = 0; i < list.length; i++) {
+    if ([1, 2, 3, 4].indexOf(list[i].Type) == -1) {
+      msg = TextTypeValidateRule(list[i])
+    } else if (list[i].Type == 5) {
+      msg = DateTypeValidateRule(list[i])
+    } else if (list[i].Type == 6) {
+      msg = RangeTypeValidateRule(list[i])
+    } else {
+      msg = '不存在的数据验证规则'
+    }
+    if (msg != '') {
+      msg = `第${i + 1}行 ${msg}`
+      break
+    }
+  }
+  return msg
+}
+
+//#endregion
+
+const UseDirection = {
+  QueryDirectionByType,
+  ValidateCoustom
+}
+
+export { UseDirection }

src/module/customer/clueModule.ts

@@ -71,7 +71,7 @@ const ClueModule = () => {
       { name: 'CreateTime', label: '创建时间', field: 'CreateTime', align: 'left' }
     ],
     showColumns: ['Sys_CustomerName', 'CreateTime'],
-    allColumns: [{ name: '创建时间', value: 'CreateTime', visible: true, OptionsList: [], Type: 0 }],
+    allColumns: [{ name: '创建时间', value: 'CreateTime', visible: true, data: {}, IsCustom: 0 }],
     selected: [],
     dataList: [],
     WayList: [],
@@ -97,7 +97,7 @@ const ClueModule = () => {
           if (x.IsDefault == ColumnDefaultState.Yes) {
             data.showColumns.push(`diy_${x.Name}`)
           }
-          data.allColumns.push({ name: x.Name, value: `diy_${x.Name}`, visible: x.IsDefault == ColumnDefaultState.Yes, OptionsList: x.OptionsList, Type: x.Type })
+          data.allColumns.push({ name: x.Name, value: `diy_${x.Name}`, visible: x.IsDefault == ColumnDefaultState.Yes, data: x, IsCustom: 1 })
         })
       }
       //#region 添加菜单权限

src/pages/customerManage/clue.vue

@@ -95,9 +95,9 @@
             </q-td>
           </template>
 
-          <template v-for="x in data.allColumns.filter(x=>x.value.indexOf('diy_')!=-1)" :key="x.value" v-slot:[`body-cell-${x.value}`]="props">
+          <template v-for="x in data.allColumns.filter(x=>x.IsCustom>0)" :key="x.value" v-slot:[`body-cell-${x.value}`]="props">
             <q-td auto-width  :props="props">
-              {{props.row.CustomFiledList.find(y=>y.Name==x.value.replace('diy_','')).ShowValue}}
+              {{props.row.CustomFiledList.find(y=>y.Name==x.name).ShowValue}}
             </q-td>
           </template>
           <template v-slot:body-cell-sys_setting="props">