完成组件封装

src/App.vue

@@ -21,4 +21,6 @@ export default defineComponent({
 .svg-icon-grey g [fill]
   transition: fill 0.3s ease
   fill: #ddd !important
+.all-borders
+  border:1px solid #ddd
 </style>

src/api/customer.ts

@@ -5,8 +5,6 @@
 import { HttpResponse } from '@/@types'
 import Axios from './axios'
 
-
-
 /**
  * @interface loginParams -登录参数
  * @property {string} grant_type -授权类型
@@ -161,6 +159,15 @@ class CustomerService {
       data
     })
   }
+  //获取客户线索下载模板地址
+  static async getLabelListByIds(ids: string): Promise<HttpResponse> {
+    const data = { ids }
+    return Axios('/QYWeChat/GetLabelListByIds', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
 }
-export {CutomerParams}
+export { CutomerParams }
 export default CustomerService

src/components/common/customWhere/vtCustomBtn.vue

@@ -59,6 +59,7 @@ export default {
     columns: Array
   },
   setup(props, context) {
+    console.log(props.columns)
     const queryMsg = reactive({
       whereId: 0,
       customResult: {

src/components/common/customWhere/where.vue

@@ -6,7 +6,7 @@
           <where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
         </div>
         <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/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="selectList.length>1" @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/common/customWhere/whereItem.vue

@@ -30,7 +30,7 @@ export default {
     )
 
     if (model.value.Name) {
-      const temp = allCol.find(x => x.data.Id === model.value.Name)
+      const temp = allCol.find(x => x.data.Id === model.value.Name || (x.data.Name === model.value.Name && model.value.IsCustom != 1))
       currentNode.value = temp ? temp : allCol[0]
       console.log(currentNode)
     } else {

src/components/common/customWhere/whereNode.vue

@@ -38,7 +38,7 @@ export default {
 
     const initWhere = val => {
       colData.nodeWhere = UseDirection.QueryDirectionByType(val.data.Type)
-      model.value.Name = val.data.Id
+      model.value.Name = val.IsCustom==1?val.data.Id:val.data.Name
       model.value.Type = val.data.Type
       model.value.StartValue = ''
       model.value.EndValue = ''

src/components/common/customWhere/whereNodeValue.vue

@@ -5,9 +5,27 @@
   <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">
+  <div v-if="currentNode.data.Type == 4 && currentNode.IsCustom == 1">
     <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 == 4 && currentNode.IsCustom == 2" class="full-height" @click="checkModel.showLabelDialog()">
+    <div class="rounded-borders all-borders full-height row items-center q-pa-sm overflow-hidden cursor-pointer">
+      <div class="col" v-if="!checkModel.labelLoading">
+        <div class="flex full-height" v-if="checkModel.model && checkModel.model.length > 0">
+          <div class="full-height f12 text-dark rounded-borders bg-grey-2 q-px-sm q-mr-sm">{{ checkModel.model[0].Name }}</div>
+          <div class="full-height f12 text-dark rounded-borders bg-grey-2 q-px-sm" v-if="checkModel.model && checkModel.model.length > 1">+{{ checkModel.model.length - 1 }}</div>
+        </div>
+        <div class="full-height text-grey-5 f12" v-else>请选择标签</div>
+      </div>
+      <div class="col" v-else>
+        <q-inner-loading label="加载中..." class="f12"></q-inner-loading>
+      </div>
+      <div class="q-ml-sm" style="margin-bottom: -7px">
+        <svg-icon icon="Navigation/Angle-down.svg" color="svg-icon-grey" size="18" v-if="!checkModel.model || checkModel.model.length == 0"></svg-icon>
+        <svg-icon icon="Code/Error-circle.svg" color="svg-icon-grey" class="cursor-pointer" @click.stop="checkModel.clearLabelHandler" size="18" v-if="checkModel.model && checkModel.model.length > 0"></svg-icon>
+      </div>
+    </div>
+  </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>
@@ -22,11 +40,15 @@
       </q-popup-proxy>
     </q-input>
   </div>
+  <label-group v-model="checkModel.showDialog" ref="labelRef" :list="checkModel.model" @submit="checkModel.changeLabelHandler" v-if="currentNode.data.Type == 4 && currentNode.IsCustom == 2 && !checkModel.labelLoading"></label-group>
 </template>
 
 <script>
 import { inject, reactive, watch, onMounted, ref } from 'vue'
+import labelGroup from '../../customer/label-group'
+import CustomerService from '@/api/customer'
 export default {
+  components: { labelGroup },
   props: {
     /**
      * 条件节点
@@ -38,6 +60,8 @@ export default {
 
     const currentNode = ref(props.node)
 
+    const labelRef = ref(null)
+
     watch(
       () => props.node,
       val => {
@@ -72,6 +96,8 @@ export default {
       Option: [],
       val: 'Id',
       label: 'Name',
+      showDialog: false,
+      labelLoading: true,
       changeHandler: val => {
         let startValue = ''
         val.forEach((x, i) => {
@@ -82,6 +108,27 @@ export default {
         })
         model.value.StartValue = startValue
         changeModelHandler()
+      },
+      changeLabelHandler: val => {
+        let startValue = ''
+        val.forEach((x, i) => {
+          startValue += x.Id
+          if (i < val.length - 1) {
+            startValue += ','
+          }
+        })
+        model.value.StartValue = startValue
+        checkModel.model = val
+        changeModelHandler()
+      },
+      clearLabelHandler: () => {
+        checkModel.model = []
+        model.value.StartValue = ''
+        labelRef.value.clearListHandler()
+      },
+      showLabelDialog: () => {
+        if (checkModel.labelLoading) return
+        checkModel.showDialog = true
       }
     })
 
@@ -167,25 +214,41 @@ export default {
         radioModel.model = node.data.OptionsList.find(x => x.Id == model.value.StartValue)
       } else {
         radioModel.model = node.data.OptionsList[0]
-        model.value.StartValue = node.data.OptionsList[0].val
+        model.value.StartValue = node.data.OptionsList[0].Id.toString()
       }
 
       radioModel.Option = node.data.OptionsList
     }
 
     const initCheckModel = node => {
-      if (model.value.StartValue != '') {
-        const temp = model.value.StartValue.split(',')
-        checkModel.model = []
-        console.log(temp, node.data.OptionsList)
-        node.data.OptionsList.forEach(x => {
-          if (temp.indexOf(x.Id.toString()) != -1) {
-            checkModel.model.push(x)
-          }
-        })
+      if (model.value.StartValue) {
+        if (node.IsCustom != 2) {
+          const temp = model.value.StartValue.split(',')
+          checkModel.model = []
+          node.data.OptionsList.forEach(x => {
+            if (temp.indexOf(x.Id.toString()) != -1) {
+              checkModel.model.push(x)
+            }
+          })
+          checkModel.labelLoading = false
+        } else {
+          checkModel.model = model.Value ?? []
+          CustomerService.getLabelListByIds(model.value.StartValue).then(r => {
+            if (r.data && r.data.Data) {
+              checkModel.model = r.data.Data
+            }
+            checkModel.labelLoading = false
+          })
+        }
       } else {
-        checkModel.model = [node.data.OptionsList[0]]
-        model.value.StartValue = checkModel.model.Id
+        if (node.IsCustom != 2) {
+          checkModel.model = [node.data.OptionsList[0]]
+          model.value.StartValue = checkModel.model.Id
+        } else {
+          checkModel.model = []
+          model.value.StartValue = ''
+        }
+        checkModel.labelLoading = false
       }
       checkModel.Option = node.data.OptionsList
     }
@@ -242,7 +305,7 @@ export default {
       init(props.node)
     })
 
-    return { model, currentNode, changeModelHandler, radioModel, checkModel, integerModel, dateModel, dateRangeModel, rangeRefs }
+    return { model, currentNode, labelRef, changeModelHandler, radioModel, checkModel, integerModel, dateModel, dateRangeModel, rangeRefs }
   }
 }
 </script>

src/components/customer/clueHead.vue

@@ -6,7 +6,7 @@
         <q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
       </q-popup-proxy>
     </q-input>
-    <vt-custom-btn ref="vtBtn" :page-code="pageCode" :columns="columns" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
+    <vt-custom-btn v-if="allColumn && allColumn.length > 0" ref="vtBtn" :page-code="pageCode" :columns="allColumn" @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>
 </template>
@@ -16,7 +16,7 @@ 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 { GetLabelObject, GetChannelObject } from '@/utils/customColumn'
 export default {
   props: {
     /**
@@ -34,6 +34,12 @@ export default {
   },
   components: { searchBox, vtCustomBtn },
   setup(props, context) {
+    const allColumn = ref(props.columns)
+    allColumn.value.splice(0,0,GetLabelObject())
+    //注意GetChannelObject是异步方法，插入自己需要的位置
+    GetChannelObject().then(r => {
+      allColumn.value.splice(1, 0, r)
+    })
     const pageCode = ref('clue_custom')
     const vtBtn = ref(null)
     const queryMsg = reactive({
@@ -116,7 +122,7 @@ export default {
       pushRelaodHandler()
     }
 
-    return { queryMsg, modelType, updateCreateRange, optionsFn,vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
+    return { queryMsg, modelType, allColumn, updateCreateRange, optionsFn, vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
   }
 }
 </script>

src/components/customer/label-group.vue

@@ -44,8 +44,8 @@
           </div>
         </q-card-section>
         <q-card-actions align="right" class="bg-white">
-          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" v-close-popup />
-          <q-btn label="确定" color="accent q-px-md" style="font-weight:400 !important" @click="determine" />
+          <q-btn label="取消" flat color="grey-10" dense style="font-weight:400 !important" v-close-popup />
+          <q-btn label="确定" color="primary" class="q-px-md" unelevated dense style="font-weight:400 !important" @click="determine" />
         </q-card-actions>
 
       </q-card>
@@ -84,6 +84,7 @@
       }
       const determine = () => {//确定并返回数据
         ctx.emit('submit', selectList.value)
+        goclose()
       }
       const getclose = (tag, index) => {
         let Id = tag.Id
@@ -115,20 +116,14 @@
         })
       }
       const getLabelList = () => {
+        console.log("props.list:",props.list)
         customerSetService.getLabelList({}).then((res) => {
           if (res.data.Code == 1) {
             LableList.value = res.data.Data
             LableList.value.forEach(x => {
               if (x.ChildList.length > 0) {
                 x.ChildList.forEach(j => {
-                  j.chek = false;
-                  for (let index = 0; index < props.list.length; index++) {
-                    const element = props.list[index];
-                    if (element.Id == j.Id) {
-                      j.chek = true;
-                      break
-                    }
-                  }
+                  j.chek = props.list.findIndex(y=>y.Id==j.Id)!=-1;
                 })
               }
             })
@@ -138,6 +133,14 @@
       onMounted(() => {//进入页面就调用
         getLabelList()
       })
+
+      const clearListHandler=()=>{
+        selectList.value=[]
+        LableList.value.forEach(x=>{
+          x.ChildList.forEach(y=>y.chek=false)
+        })
+      }
+
       return {
         show,
         goclose,
@@ -146,7 +149,8 @@
         getLabelList,
         LableList,
         changechek,
-        getclose
+        getclose,
+        clearListHandler
       }
     }
 

src/config/direction.ts

@@ -196,7 +196,7 @@ const TextTypeValidateRule = (model: SelectModel): string => {
     if (directModel && directModel.length > 0) {
       const directItemModel = directModel[0].Childs.find(x => x.Id == model.Direction)
       if (directItemModel) {
-        console.log(directItemModel,directModel)
+        console.log(directItemModel, directModel)
         if (!directItemModel.IsNotValue && model.StartValue.trim() != '') {
           return ''
         } else if (directItemModel.IsNotValue) {
@@ -275,7 +275,7 @@ const MappingAuto = (list: SelectModel[]): SelectModel[] => {
   ]
   list.forEach(x => {
     rule.forEach(y => {
-      if (y.mapping.indexOf(x.Type)!=-1) {
+      if (y.mapping.indexOf(x.Type) != -1) {
         x.Type = y.type
       }
     })
@@ -284,6 +284,8 @@ const MappingAuto = (list: SelectModel[]): SelectModel[] => {
   return list
 }
 
+
+
 //#endregion
 
 const UseDirection = {

src/pages/customerManage/clue.vue

@@ -7,7 +7,7 @@
         <q-tab :name="3" label="无效线索" />
         <q-tab :name="4" label="已转客户" />
       </q-tabs>
-      <clue-head :columns="data.allColumns" @reload-data="reloadListHandler"></clue-head>
+      <clue-head :columns="data.allColumns" @reload-data="reloadListHandler" v-if="data.allColumns.length>0"></clue-head>
       
       <div class="page-content q-mt-lg col full-width">
         <q-table :rows="data.dataList" :loading="data.dataLoding" :columns="data.columns" :visible-columns="data.showColumns" flat class="sticky-tow-column-table full-height sticky-right-column-table" row-key="Id" no-data-label="暂无相关数据" selection="multiple" v-if="data.colLoadingFinish" separator="none" style="max-width: 100%">

src/utils/customColumn.ts

+import customerService from '@/api/customer'
+const GetLabelObject = (): any => {
+  return {
+    IsCustom: 2,
+    name: '标签',
+    value: 'diy_标签',
+    visible: false,
+    data: {
+      Id: 0,
+      Type: 4,
+      Name: '标签',
+      IsDefault: 0,
+      IsLock: 0,
+      IsSystem: 0,
+      OptionsList: [],
+      TypeName: '标签'
+    }
+  }
+}
+
+const GetChannelObject = async (): Promise<any> => {
+  let list: Array<any> = new Array<any>()
+  await customerService.getCustomStageList({}).then(r => {
+    if (r.data && r.data.Data) {
+      list = r.data.Data
+    }
+  })
+  return {
+    IsCustom: 3,
+    name: '客户阶段',
+    value: 'diy_客户阶段',
+    visible: false,
+    data: {
+      Id: 0,
+      Type: 3,
+      Name: '客户阶段',
+      IsDefault: 0,
+      IsLock: 0,
+      IsSystem: 0,
+      OptionsList: list,
+      TypeName: '客户阶段'
+    }
+  }
+}
+
+export { GetLabelObject, GetChannelObject }