完成自定义列表功能

src/App.vue

@@ -12,4 +12,13 @@ export default defineComponent({
 @import url('./css/font.sass')
 @import url('//at.alicdn.com/t/font_2930340_at4xv6vjdh.css')
 @import url('./css/table.sass')
+.svg-icon-primary g [fill]
+  transition: fill 0.3s ease
+  fill: var(--q-primary) !important
+.svg-icon-negative g [fill]
+  transition: fill 0.3s ease
+  fill: var(--q-negative) !important
+.svg-icon-grey g [fill]
+  transition: fill 0.3s ease
+  fill: #ddd !important
 </style>

src/components/common/customWhere/customWhere.vue

@@ -4,18 +4,18 @@
       <div class="text-h6 pfb">{{ colData.cardTitle }}</div>
       <div class="f12 text-grey">当线索符合以下条件时</div>
     </q-card-section>
-    <q-card-section v-else-if="modeType != 1">
+    <q-card-section v-else-if="modeType == 2 || modeType == 3">
       <div class="text-h6 pfb">{{ modeType == 2 ? '添加' : '编辑' }}常用筛选</div>
     </q-card-section>
-    <q-card-section v-if="modeType != 1">
+    <q-card-section v-if="(modeType == 2 || modeType == 3) && model">
       <q-input ref="whereName" maxlength="20" filled dense v-model="model.Name" :rules="[val => !!val || '请输入分类名称']" placeholder="请输入分类名称"></q-input>
     </q-card-section>
-    <q-card-section v-if="modeType != 1">
+    <q-card-section v-if="modeType == 2 || modeType == 3">
       <div class="text-h6 pfb">当线索符合以下条件时</div>
     </q-card-section>
     <div class="col">
       <q-scroll-area :thumb-style="colData.scroll.scrollStyle.thumbStyle" :bar-style="colData.scroll.scrollStyle.barStyle" class="full-height full-width q-px-md">
-        <where ref="whereBox" :columns="allCol" :data="current" v-if="allCol.length > 0"></where>
+        <where ref="whereBox" :columns="allCol" :data="currentData" v-if="allCol.length > 0 && modeType!=0"></where>
       </q-scroll-area>
     </div>
     <q-separator />
@@ -26,7 +26,7 @@
       <div>
         <q-btn dense flat label="重置" class="q-mr-md" v-if="modeType == 1" @click="resetHandler"></q-btn>
         <q-btn unelevated dense color="primary" @click="subCustomHander" label="确定" :loading="subLoading" v-if="modeType == 1" class="q-mr-md q-px-lg"></q-btn>
-        <q-btn unelevated dense color="primary" label="立即保存" :loading="subLoading" @click="saveHandler" v-if="modeType != 1" class="q-mr-md q-px-lg"></q-btn>
+        <q-btn unelevated dense color="primary" label="立即保存" :loading="subLoading" @click="saveHandler" v-if="modeType == 2 || modeType == 3" class="q-mr-md q-px-lg"></q-btn>
       </div>
     </q-card-section>
   </q-card>
@@ -76,8 +76,9 @@ export default {
       return props.columns.filter(x => x.IsCustom > 0)
     })
     const model = ref(null)
-    const modeType = ref(props.mode)
+    const modeType = ref(0)
     const whereName = ref(null)
+    const currentData = ref(props.current)
 
     const colData = reactive({
       cardTitle: props.title ? ref(props.title) : '自定义筛选',
@@ -110,14 +111,19 @@ export default {
     const changeModeToModify = () => {
       if (props.dataId) {
         CustomQueryService.queryCustomById(props.dataId).then(r => {
-          if (r.data.Data.Id != props.dataId) {
-            changeModeToNew()
+          if (r.data.Data.Id !== props.dataId) {
+            changeModeToNew()  
           } else {
             model.value = r.data.Data
+            currentData.value.list = JSON.parse(model.value.SelectList)
+            currentData.value.condition = model.value.AddCondition
+            modeType.value = 3
           }
         })
+        
       } else {
         changeModeToNew()
+        modeType.value = 2
       }
     }
 
@@ -125,7 +131,11 @@ export default {
       changeModeToModify()
     } else if (props.mode == 2) {
       changeModeToNew()
+    } else if (props.mode == 1) {
+      modeType.value=1
     }
+
+
     const subLoading = ref(false)
     const saveHandler = () => {
       subLoading.value = true
@@ -138,7 +148,7 @@ export default {
           model.value.AddCondition = data.condition
           model.value.SelectList = JSON.stringify(data.list)
           CustomQueryService.saveCustom(model.value).then(r => {
-            if(r.data && r.data.Code ==1){
+            if (r.data && r.data.Code == 1) {
               message.successMsg('保存完毕')
               context.emit('change-reload', 'SAVE')
             }
@@ -149,19 +159,18 @@ export default {
       subLoading.value = false
     }
 
-    const subCustomHander=()=>{
-      
+    const subCustomHander = () => {
       subLoading.value = true
       const data = whereBox.value.getData()
       if (data.list && data.list.length > 0) {
-        context.emit('change-reload', 'CUSTOM',data)
-      }else{
-        message.warnMsg("你还未设置任何查询内容")
+        context.emit('change-reload', 'CUSTOM', data)
+      } else {
+        message.warnMsg('你还未设置任何查询内容')
       }
       subLoading.value = false
     }
 
-    return { allCol, colData, whereBox, subCustomHander, resetHandler, changeModeToNew, model, modeType, saveHandler, subLoading, whereName }
+    return { allCol, colData, currentData, whereBox, subCustomHander, resetHandler, changeModeToNew, model, modeType, saveHandler, subLoading, whereName }
   }
 }
 </script>

src/components/common/customWhere/whereList.vue

+<template>
+  <q-card style="width: 500px; height: 400px; max-width: 500px" class="column" flat>
+    <q-card-section>
+      <div class="text-h6 pfb">管理分类</div>
+    </q-card-section>
+    <div class="col" v-if="!data.loading && data.list && data.list.length > 0">
+      <q-scroll-area :thumb-style="data.scroll.scrollStyle.thumbStyle" :bar-style="data.scroll.scrollStyle.barStyle" class="full-width full-height q-px-md">
+        <q-list v-if="data.list.length > 0">
+          <q-item clickable v-ripple v-for="(x, i) in data.list" :key="i">
+            <q-item-section>
+              <div class="row items-center">
+                <svg-icon icon="Media/Rec.svg" size="14" color="svg-icon-primary"></svg-icon>
+                <q-item-label class="f16 q-ml-md col">{{ x.Name }}</q-item-label>
+                <div class="row">
+                  <q-btn dense flat color="primary" @click="editorHandler(x.Id)">
+                    <div class="row items-center">
+                      <svg-icon style="margin-top: 6px" icon="Design/Edit.svg" size="16" color="svg-icon-primary"></svg-icon>
+                      <span class="q-ml-sm">编辑</span>
+                    </div>
+                  </q-btn>
+                  <q-btn dense flat color="negative" class="q-ml-md" @click="deleteHandler(x.Id)">
+                    <svg-icon style="margin-top: 6px" icon="Home/Trash.svg" size="16" color="svg-icon-negative"></svg-icon>
+                    <span class="q-ml-sm">删除</span>
+                  </q-btn>
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-scroll-area>
+    </div>
+    <div class="col column items-center" v-else-if="!data.loading && (!data.list || data.list.length == 0)">
+      <div class="text-center">
+        <svg-icon icon="Shopping/Box3.svg" size="80" color="svg-icon-grey"></svg-icon>
+        <div class="f12 row items-center">
+          <div>暂时没有创建自定义筛选分类，是否</div>
+          <q-btn class="f12" color="primary" flat style="margin-top: -5jpx" @click="editorHandler(0)">立即创建</q-btn>
+        </div>
+      </div>
+    </div>
+    <div class="col column items-center" v-else>
+      <div class="text-center">
+        <q-inner-loading :showing="true" label="正在加载数据，请稍等..." label-class="text-grey-5 f12" />
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script>
+import useScrollModule from '@/module/scrollbar/scrollModule'
+import CustomQueryService from '@/api/customQuery'
+import { reactive } from 'vue'
+import { useQuasar } from 'quasar'
+import message from '@/utils/message'
+export default {
+  props: {
+    /**
+     * 页面编号
+     */
+    code: String
+  },
+  setup(props, context) {
+    const data = reactive({
+      scroll: useScrollModule(),
+      list: [],
+      loading: true
+    })
+    const $q = useQuasar()
+    const deleteHandler = id => {
+      $q.dialog({
+        title: '删除提示',
+        message: '你将要删除自定义筛选分类，你确定要执行吗？',
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        data.loading = true
+        CustomQueryService.deleteCustom(id).then(r => {
+          if (r.data && r.data.Code == 1) {
+            message.successMsg('删除成功')
+          }
+          init()
+        })
+      })
+    }
+
+    const editorHandler = id => {
+      context.emit('update-where', id)
+    }
+
+    const init = () => {
+      data.loading = true
+      CustomQueryService.queryMyCustom(props.code).then(r => {
+        if (r.data && r.data.Data) {
+          data.list = r.data.Data
+        }
+        data.loading = false
+      })
+    }
+    init()
+
+    return { data, deleteHandler, editorHandler }
+  }
+}
+</script>
+
+<style></style>

src/components/customer/clueHead.vue

@@ -21,7 +21,7 @@
           <q-item-label header class="row">
             <div class="col f12">常用筛选</div>
             <div class="text-dark">
-              <i class="iconfont icon-setting f12 q-mr-md"></i>
+              <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>
@@ -42,7 +42,10 @@
     <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" :current="queryMsg.customResult" :code="pageCode" :mode="mode" @change-reload="changeWhereHandler"></custom-where>
+    <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>
 
@@ -51,8 +54,9 @@ import searchBox from '../common/searchBox.vue'
 import { formatDateTime } from '@/utils/tools'
 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'
+import { UseDirection } from '@/config/direction'
 export default {
   props: {
     /**
@@ -68,13 +72,15 @@ export default {
      */
     columns: Array
   },
-  components: { searchBox, CustomWhere },
+  components: { searchBox, CustomWhere, whereList },
   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 queryMsg = reactive({
       searchKey: '',
       createDate: {},
@@ -104,7 +110,7 @@ export default {
         queryMsg.formatCreateDateRange = `${tempFrom} 至 ${toFrom}`
         selectMsg.CreateSTime = tempFrom
         selectMsg.CreateETime = toFrom
-      }else{
+      } else {
         queryMsg.formatCreateDateRange = ''
         selectMsg.CreateSTime = ''
         selectMsg.CreateETime = ''
@@ -122,12 +128,12 @@ export default {
     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 = []
+      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
+          selectMsg.AddCondition = r.data.Data.AddCondition
         }
         pushRelaodHandler()
       })
@@ -199,8 +205,25 @@ export default {
       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, updateCreateRange, openWhereBoxHander, changeWhereHandler, optionsFn, qDateProxy, mode, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard, pageCode, reloadDataHandler }
+    return { queryMsg, modelType, customRef,settingWhereList, showWhereList, dataId, editorWhereHandler, updateCreateRange, openWhereBoxHander, changeWhereHandler, optionsFn, qDateProxy, mode, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard, pageCode, reloadDataHandler }
   }
 }
 </script>