封装自定义按钮

src/components/common/customWhere/customWhere.vue

@@ -150,7 +150,7 @@ export default {
           CustomQueryService.saveCustom(model.value).then(r => {
             if (r.data && r.data.Code == 1) {
               message.successMsg('保存完毕')
-              context.emit('change-reload', 'SAVE')
+              context.emit('change-reload', 'SAVE',model.value)
             }
             subLoading.value = false
           })

src/components/common/customWhere/vtCustomBtn.vue

+<template>
+  <q-btn class="q-ml-md q-px-md" :color="(queryMsg.customResult.list && queryMsg.whereId == 0) || queryMsg.whereId != 0 ? 'primary' : 'dark'" label="自定义筛选" dense outline>
+    <q-popup-proxy ref="customRef" transition-show="scale" transition-hide="scale" class="q-py-sm">
+      <q-list style="width: 250px" dense>
+        <q-item clickable v-ripple @click="openWhereBoxHander(1)">
+          <q-item-section>
+            <q-item-label>自定义筛选</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <i class="iconfont icon-arrow-right f12"></i>
+          </q-item-section>
+        </q-item>
+        <q-separator />
+        <q-item-label header class="row">
+          <div class="col f12">常用筛选</div>
+          <div class="text-dark">
+            <i class="iconfont icon-setting f12 q-mr-md cursor-pointer" @click="settingWhereList"></i>
+            <i class="iconfont icon-plus-circle f12 cursor-pointer" @click="openWhereBoxHander(2)"></i>
+          </div>
+        </q-item-label>
+        <q-item v-for="(x, i) in pageData.whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
+          <q-item-section>
+            <q-item-label>{{ x.Name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-separator />
+        <q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
+          <q-item-section>
+            <q-item-label class="text-primary">清空筛选条件</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-popup-proxy>
+  </q-btn>
+  <q-dialog v-model="pageData.showColWhereCard">
+    <custom-where :columns="columns" :dataId="pageData.dataId" :current="queryMsg.customResult" :code="pageCode" :mode="pageData.mode" @change-reload="changeWhereHandler"></custom-where>
+  </q-dialog>
+  <q-dialog v-model="pageData.showWhereList">
+    <where-list :code="pageCode" @update-where="editorWhereHandler"></where-list>
+  </q-dialog>
+</template>
+
+<script>
+import { reactive, ref } from 'vue'
+import CustomWhere from './customWhere.vue'
+import whereList from './whereList.vue'
+import CustomQueryService from '@/api/customQuery'
+import { UseDirection } from '@/config/direction'
+export default {
+  components: { CustomWhere, whereList },
+  props: {
+    /**
+     * 页面功能编码
+     */
+    pageCode: String,
+    /**
+     * @description 列数组
+     */
+    columns: Array
+  },
+  setup(props, context) {
+    const queryMsg = reactive({
+      whereId: 0,
+      customResult: {
+        list: null,
+        condition: 1
+      }
+    })
+    const customRef = ref(null)
+    const pageData = reactive({
+      showColWhereCard: false,
+      showWhereList: false,
+      mode: 1, //声明分类ID，适用于修改分类对应的自定义筛选【mode=3】
+      dataId: 0,
+      whereList: []
+    })
+
+    const openWhereBoxHander = m => {
+      pageData.mode = m
+      pageData.showColWhereCard = true
+    }
+
+    const deleteWhereHandler = () => {
+      queryMsg.whereId = 0
+      queryMsg.customResult = {
+        list: null,
+        condition: 1
+      }
+      context.emit('empty-where')
+    }
+
+    const updateWhereHandler = id => {
+      queryMsg.whereId = id
+      queryMsg.customResult = {}
+      //@TODO: 处理变更
+      let params = {
+        SelectList: [],
+        AddCondition: 1
+      }
+      CustomQueryService.queryCustomById(id).then(r => {
+        if (r.data && r.data.Code == 1) {
+          params.SelectList = JSON.parse(r.data.Data.SelectList)
+          params.SelectList = UseDirection.MappingAuto(params.SelectList)
+          params.AddCondition = r.data.Data.AddCondition
+        }
+        context.emit('update-where', params)
+      })
+    }
+
+    //#region 初始化已保存的自定义信息
+
+    const loadWhereList = () => {
+      pageData.whereList = []
+      CustomQueryService.queryMyCustom(props.pageCode).then(r => {
+        pageData.whereList = r.data.Data
+      })
+    }
+
+    loadWhereList()
+
+    //#endregion
+
+    //#region 处理数据回调
+
+    const changeWhereHandler = (code, result) => {
+      console.log('触发了吗？')
+      if (code == 'SAVE') {
+        loadWhereList()
+        console.log(queryMsg.whereId,result)
+        if (result.Id == queryMsg.whereId) {
+          let params = {}
+          params.AddCondition = result.AddCondition
+          params.SelectList = UseDirection.MappingAuto(JSON.parse(result.SelectList))
+          context.emit('update-where', params)
+        }
+      } else if (code == 'CUSTOM') {
+        queryMsg.customResult = JSON.parse(JSON.stringify(result))
+        let params = {}
+        params.AddCondition = result.condition
+        params.SelectList = UseDirection.MappingAuto(result.list)
+        context.emit('update-where', params)
+      }
+      pageData.showColWhereCard = false
+      customRef.value.hide()
+    }
+
+    const editorWhereHandler = id => {
+      pageData.showWhereList = false
+
+      if (id > 0) {
+        pageData.mode = 3 //3 代表编辑
+        pageData.dataId = id
+      } else {
+        pageData.mode = 2
+      }
+
+      pageData.showColWhereCard = true
+    }
+
+    const settingWhereList = () => {
+      pageData.showColWhereCard = false
+      pageData.showWhereList = true
+    }
+
+    const clearWhereHandler = () => {
+      queryMsg.whereId = 0
+      queryMsg.customResult = {}
+    }
+
+    //#endregion
+
+    return { queryMsg, pageData, customRef, clearWhereHandler, openWhereBoxHander, updateWhereHandler, changeWhereHandler, editorWhereHandler, deleteWhereHandler, settingWhereList }
+  }
+}
+</script>
+
+<style></style>

src/components/common/customWhere/where.vue

@@ -2,11 +2,11 @@
   <div class="relative-position">
     <div class="bg-white relative-position" :class="{ 'q-ml-xl': selectList.length > 1 }" v-if="selectList.length > 0" style="z-index: 2">
       <div class="row q-mb-md" v-for="(x, i) in selectList" :key="`${i}`">
-        <div class="col-11">
+        <div class="col-10">
           <where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
         </div>
-        <div class="col-1 flex items-center justify-start">
-          <img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="i + 1 != selectList.length" @click="deleteSelect" />
+        <div class="col-2 flex items-center justify-start">
+          <img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="selectList.length>0" @click="deleteSelect" />
           <img src="@/assets/images/customer/add.png" style="width: 20px" class="cursor-pointer" @click="addSelect" v-if="i + 1 == selectList.length" />
         </div>
       </div>

src/components/customer/clueHead.vue

@@ -6,63 +6,23 @@
         <q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
       </q-popup-proxy>
     </q-input>
-    <q-btn class="q-ml-md q-px-md" :color="queryMsg.customResult.list || queryMsg.whereId != 0 ? 'primary' : 'dark'" label="自定义筛选" dense outline>
-      <q-popup-proxy ref="customRef" transition-show="scale" transition-hide="scale" class="q-py-sm">
-        <q-list style="width: 250px" dense>
-          <q-item clickable v-ripple @click="openWhereBoxHander(1)">
-            <q-item-section>
-              <q-item-label>自定义筛选</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <i class="iconfont icon-arrow-right f12"></i>
-            </q-item-section>
-          </q-item>
-          <q-separator />
-          <q-item-label header class="row">
-            <div class="col f12">常用筛选</div>
-            <div class="text-dark">
-              <i class="iconfont icon-setting f12 q-mr-md cursor-pointer" @click="settingWhereList"></i>
-              <i class="iconfont icon-plus-circle f12 cursor-pointer" @click="openWhereBoxHander(2)"></i>
-            </div>
-          </q-item-label>
-          <q-item v-for="(x, i) in whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
-            <q-item-section>
-              <q-item-label>{{ x.Name }}</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-separator />
-          <q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
-            <q-item-section>
-              <q-item-label class="text-primary">清空筛选条件</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-popup-proxy>
-    </q-btn>
+    <vt-custom-btn ref="vtBtn" :page-code="pageCode" :columns="columns" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
     <q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn>
   </div>
-  <q-dialog v-model="showColWhereCard">
-    <custom-where :columns="columns" :dataId="dataId" :current="queryMsg.customResult" :code="pageCode" :mode="mode" @change-reload="changeWhereHandler"></custom-where>
-  </q-dialog>
-  <q-dialog v-model="showWhereList">
-    <where-list :code="pageCode" @update-where="editorWhereHandler"></where-list>
-  </q-dialog>
 </template>
 
 <script>
 import searchBox from '../common/searchBox.vue'
 import { formatDateTime } from '@/utils/tools'
+import vtCustomBtn from '../common/customWhere/vtCustomBtn.vue'
 import { reactive, computed, ref } from 'vue'
-import CustomWhere from '../common/customWhere/customWhere.vue'
-import whereList from '@/components/common/customWhere/whereList.vue'
-import CustomQueryService from '@/api/customQuery'
-import { UseDirection } from '@/config/direction'
+
 export default {
   props: {
     /**
      * @description 模式：0为未选择表格内容模式，1为选中了表格内容模式
      */
-    model: {
+    mode: {
       type: Number,
       default: 0 | 1
     },
@@ -72,21 +32,14 @@ export default {
      */
     columns: Array
   },
-  components: { searchBox, CustomWhere, whereList },
+  components: { searchBox, vtCustomBtn },
   setup(props, context) {
-    const whereList = ref([])
     const pageCode = ref('clue_custom')
-    const showColWhereCard = ref(false)
-    const showWhereList = ref(false)
-    const customRef = ref(null)
-    const mode = ref(1)
-    const dataId = ref(0) //声明分类ID，适用于修改分类对应的自定义筛选【mode=3】
+    const vtBtn = ref(null)
     const queryMsg = reactive({
       searchKey: '',
       createDate: {},
-      formatCreateDateRange: '',
-      whereId: 0,
-      customResult: {}
+      formatCreateDateRange: ''
     })
     const selectMsg = reactive({
       CustomerName: '',
@@ -100,7 +53,7 @@ export default {
     })
 
     const modelType = computed(() => {
-      return props.model
+      return props.mode
     })
 
     const updateCreateRange = e => {
@@ -125,22 +78,7 @@ export default {
     }
 
     const qDateProxy = ref(null)
-    const updateWhereHandler = id => {
-      queryMsg.whereId = id
-      queryMsg.customResult = {}
-      selectMsg.SelectList = []
-      CustomQueryService.queryCustomById(id).then(r => {
-        if (r.data && r.data.Code == 1) {
-          selectMsg.SelectList = JSON.parse(r.data.Data.SelectList)
-          selectMsg.SelectList = UseDirection.MappingAuto(selectMsg.SelectList)
-          selectMsg.AddCondition = r.data.Data.AddCondition
-        }
-        pushRelaodHandler()
-      })
-    }
-
     const deleteWhereHandler = type => {
-      queryMsg.customResult = {}
       selectMsg.SelectList = []
       selectMsg.AddCondition = 0
       queryMsg.whereId = 0
@@ -149,23 +87,19 @@ export default {
         queryMsg.formatCreateDateRange = ''
         queryMsg.createDate = {}
         queryMsg.searchKey = ''
+        vtBtn.value.clearWhereHandler()
       }
       reloadDataHandler()
     }
-
-    //#region 初始化已保存的自定义信息
-
-    const loadWhereList = () => {
-      CustomQueryService.queryMyCustom(pageCode.value).then(r => {
-        whereList.value = r.data.Data
-      })
+    const updateWhereHandler = params => {
+      selectMsg.SelectList = params.SelectList
+      selectMsg.AddCondition = params.AddCondition
+      pushRelaodHandler()
     }
 
-    loadWhereList()
-
-    //#endregion
-
-    //#region 处理数据回调
+    const pushRelaodHandler = () => {
+      context.emit('reload-data', selectMsg)
+    }
 
     const reloadDataHandler = () => {
       selectMsg.CustomerName = queryMsg.searchKey
@@ -182,48 +116,7 @@ export default {
       pushRelaodHandler()
     }
 
-    const changeWhereHandler = (code, result) => {
-      if (code == 'SAVE') {
-        loadWhereList()
-      } else if (code == 'CUSTOM') {
-        queryMsg.customResult = JSON.parse(JSON.stringify(result))
-        //selectMsg.SelectList = result.list
-        selectMsg.AddCondition = result.condition
-        selectMsg.SelectList = UseDirection.MappingAuto(result.list)
-        pushRelaodHandler()
-      }
-      showColWhereCard.value = false
-      customRef.value.hide()
-    }
-
-    const pushRelaodHandler = () => {
-      context.emit('reload-data', selectMsg)
-    }
-
-    const openWhereBoxHander = m => {
-      mode.value = m
-      showColWhereCard.value = true
-    }
-
-    const editorWhereHandler = id => {
-      showWhereList.value = false
-      
-      if (id > 0) {
-        mode.value = 3 //3 代表编辑
-        dataId.value = id
-      } else {
-        mode.value = 2
-      }
-      showColWhereCard.value = true
-    }
-
-    const settingWhereList=()=>{
-       showColWhereCard.value = false
-      showWhereList.value = true
-    }
-
-    //#endregion
-    return { queryMsg, modelType, customRef,settingWhereList, showWhereList, dataId, editorWhereHandler, updateCreateRange, openWhereBoxHander, changeWhereHandler, optionsFn, qDateProxy, mode, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard, pageCode, reloadDataHandler }
+    return { queryMsg, modelType, updateCreateRange, optionsFn,vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
   }
 }
 </script>

src/config/direction.ts

@@ -17,7 +17,7 @@ interface DirectionItem {
   /**
    * 是否不需要值
    */
-  IsNotValue?: boolean
+  IsNotValue: boolean
 }
 
 /**
@@ -54,15 +54,18 @@ DirectionRule.push({
   Childs: [
     {
       Id: 1,
-      Name: '包含所有'
+      Name: '包含所有',
+      IsNotValue: false
     },
     {
       Id: 2,
-      Name: '包含任意'
+      Name: '包含任意',
+      IsNotValue: false
     },
     {
       Id: 3,
-      Name: '不包含'
+      Name: '不包含',
+      IsNotValue: false
     },
     {
       Id: 4,
@@ -85,11 +88,13 @@ DirectionRule.push({
   Childs: [
     {
       Id: 1,
-      Name: '等于'
+      Name: '等于',
+      IsNotValue: false
     },
     {
       Id: 2,
-      Name: '不等于'
+      Name: '不等于',
+      IsNotValue: false
     },
     {
       Id: 3,
@@ -104,7 +109,8 @@ DirectionRule.push({
     {
       Id: 5,
       Name: '模糊',
-      ExceptionMapping: [3]
+      ExceptionMapping: [3],
+      IsNotValue: false
     }
   ]
 })
@@ -112,32 +118,38 @@ DirectionRule.push({
 
 //#region 第三组组用于文本，多好文本，单选之类
 DirectionRule.push({
-  Id: 2,
+  Id: 3,
   MappingType: [7],
   Childs: [
     {
       Id: 1,
-      Name: '等于'
+      Name: '等于',
+      IsNotValue: false
     },
     {
       Id: 2,
-      Name: '大于'
+      Name: '大于',
+      IsNotValue: false
     },
     {
       Id: 3,
-      Name: '大于等于'
+      Name: '大于等于',
+      IsNotValue: false
     },
     {
       Id: 4,
-      Name: '小于'
+      Name: '小于',
+      IsNotValue: false
     },
     {
       Id: 5,
-      Name: '小于等于'
+      Name: '小于等于',
+      IsNotValue: false
     },
     {
       Id: 6,
-      Name: '不等于'
+      Name: '不等于',
+      IsNotValue: false
     }
   ]
 })
@@ -182,8 +194,9 @@ const TextTypeValidateRule = (model: SelectModel): string => {
   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))
+      const directItemModel = directModel[0].Childs.find(x => x.Id == model.Direction)
       if (directItemModel) {
+        console.log(directItemModel,directModel)
         if (!directItemModel.IsNotValue && model.StartValue.trim() != '') {
           return ''
         } else if (directItemModel.IsNotValue) {