1

src/module/customer/editor/editCustomerLibModule.ts

+import { ref, reactive } from 'vue'
+import customerSetService from '@/api/customerSet'
+import customerService from '@/api/customer'
+import router from '@/router/index'
+import message from '@/utils/message'
+
+
+const msg = () => {
+  const curQueryId = Number(router.currentRoute.value.query.Id)
+  return {
+    RuleId: curQueryId
+  }
+}
+const condition = ref<any>(null)
+const data = reactive<any>({
+  step:1
+})
+const jumpBeforePage = () => {
+  router.push({
+    path: '/customerSetup',
+    query: {
+      type: 'lib'
+    }
+  })
+}
+
+
+
+const editRuleModule = () => {
+  //获取分配客户条件
+  const getCondition = val => {
+    data.editMsg.ConditionList = [...val]
+  }
+  //获取已选部门成员
+  const getdpt = val => {
+    data.showDialog = false
+    data.editMsg.DeptList = []
+    data.editMsg.EmpList = []
+    val.map(e => {
+      if (e.Id.slice(0, 1) == 1) {
+        data.editMsg.DeptList.push({
+          DeptId: e.Id.slice(2),
+          DeptName: e.Name
+        })
+      } else {
+        data.editMsg.EmpList.push({
+          Id: e.Id.slice(2),
+          EmployeeName: e.Name
+        })
+      }
+    })
+    console.log(val, 'dpt')
+  }
+  //获取已选人数
+  const getNum = n => {
+    data.peopleNum = n
+  }
+  //获取线索详情
+  const getDetail = () => {
+    customerSetService.getCustomerClueRuleDetail(msg()).then(res => {
+      const d = res.data.Data
+      data.editMsg.DeptList = d.DeptList
+      data.editMsg.EmpList = d.EmpList
+      data.editMsg.ConditionList = d.ConditionList
+      data.defaultConditionList = d.ConditionList
+      data.editMsg.RuleAllotWay = d.RuleAllotWay
+      data.editMsg.RuleSelectType = d.RuleSelectType
+      const Dep = d.DeptList.map(e => {
+        return '1-' + e.DeptId
+      })
+      const Emp = d.EmpList.map(e => {
+        return '2-' + e.Id
+      })
+      data.defaultArray = [...Dep, ...Emp]
+    })
+  }
+  //获取部门数据
+  const getEmployeeData = () => {
+    customerService.getEmployeeData({}).then(res => {
+      console.log(res.data.Data, '部门')
+      data.dataTree = res.data.Data
+      // 重组唯一id
+      if (data.dataTree.length == 0) return
+      data.dataTree.forEach(x => {
+        x.newId = x.DataType + '-' + x.DeptId
+        if (x.ChildList && x.ChildList.length > 0) {
+          getChildList(x.ChildList)
+        }
+      })
+    })
+  }
+  const getChildList = (ChildList: Array<any>) => {
+    ChildList.forEach(x => {
+      x.newId = x.DataType + '-' + x.DeptId
+      if (x.ChildList && x.ChildList.length > 0) {
+        getChildList(x.ChildList)
+      }
+    })
+  }
+  // 新增，修改
+  const setCustomerClueRuleInfo = () => {
+      customerSetService.setCustomerClueRuleInfo(data.editMsg).then(res => {
+        message.successMsg(res.data.Message)
+        setTimeout(() => {
+          router.push({
+            path: '/customerSetup',
+            query: {
+              type: 'clue'
+            }
+          })
+        }, 2000)
+      })
+  }
+  
+  return {
+    msg,
+    condition,
+    data,
+    getDetail,
+    getEmployeeData,
+    jumpBeforePage,
+    setCustomerClueRuleInfo,
+    getCondition,
+    getdpt,
+    getNum,
+  }
+}
+
+export default editRuleModule

src/pages/customerManage/customerSet/components/CustomerLibrary.vue

 <template>
-  <div class="q-pa-md">
-
+  <div class="q-pa-md customerLib">
     <div class="q-py-md">
       <div class="flex justify-between q-mb-md">
         <div>
-          <q-btn color="primary" unelevated label="+新增客户库" class="q-mr-md" />
-          <span>了解多客户库的好处</span>
+          <q-btn color="primary" unelevated label="+新增客户库" class="q-mr-md" @click="jumpPage('/editor/editCustomerLib')"/>
+          <n-popover trigger="hover" :width="620" placement="right">
+            <template #trigger>
+              <span>了解多客户库的好处</span>
+            </template>
+            <div class="q-pa-md">
+              <div class="tip-title">
+                有效实现业务独立，提高管理效率，降低客户资源浪费
+              </div>
+              <div class="tip-content">
+                <div class="tip-header">
+                  多公海
+                </div>
+                <div class="tip-text">
+                  每个客户库都有自己独立的公海，对本客户库外的数据隔离，有效提高线索流转的效率。
+                </div>
+                <div class="tip-list-text">
+                    <div style="white-space:nowrap">
+                      例如：
+                    </div>
+                    <div>
+                      场景一：设置“北京客户库”、“南京客户库” 保持业务的独立性；<br/>
+                      场景二：设置“市场客户库”、“电销客户库”、“面销客户库”，区分客户的流转阶段/属性；
+                    </div>
+                </div>
+              </div>
+              <div class="tip-content">
+                <div class="tip-header">
+                  多规则
+                </div>
+                <div class="tip-text">
+                  每个客户库都有自己独立的规则，不同部门之间可能存在不同的规则：
+                </div>
+                <div class="tip-list-text">
+                    <div style="white-space:nowrap">
+                      例如：
+                    </div>
+                    <div>
+                      回收客户的规则：不同的部门/员工，可设置不同的客户回收规则，合理利用资源；<br/>
+                      员工的客户上限：不同的部门/员工，设置不同的客户上限，降低资源浪费的可能；<br/>
+                      录入客户的标准：有的部门支持创建重复客户，有的部门则不支持；
+                    </div>
+                </div>
+              </div>
+            </div>
+          </n-popover>
         </div>
         <q-btn text-color="accent" outline unelevated label="设置查重规则" @click="showRuleDig=true" />
       </div>
@@ -39,6 +82,7 @@
         </template>
       </q-table>
     </div>
+
     <!-- 查重规则弹窗 -->
     <q-dialog v-model="showRuleDig" full-height maximized position="right" transition-show="slide-left">
       <q-card>
@@ -49,44 +93,46 @@
         </q-card-section>
         <q-card-section>
           <div style="width:750px">
-            <q-item tag="label" >
+            <q-item tag="label">
               <q-item-section avatar top>
                 <q-radio v-model="LookRepeat" :val="1" color="primary" />
               </q-item-section>
               <q-item-section>
-                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">全局查重</span> (一个客户在<span style="color:#f00">整个企业</span>内，只允许被一个员工跟进)</div>
-               
+                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">全局查重</span> (一个客户在<span
+                    style="color:#f00">整个企业</span>内，只允许被一个员工跟进)</div>
+
                 <div class="ruleset-box">
-                    <div class="ruleset-txt">
-                         一个客户，在整个企业内查重（整个企业不允许创建重复客户） 
-                    </div>
-                    <div class="ruleset-img">
-                        <img src="@/assets/images/customer/customerSet/rule1.jpg"/>
-                    </div>
+                  <div class="ruleset-txt">
+                    一个客户，在整个企业内查重（整个企业不允许创建重复客户）
+                  </div>
+                  <div class="ruleset-img">
+                    <img src="@/assets/images/customer/customerSet/rule1.jpg" />
+                  </div>
                 </div>
               </q-item-section>
             </q-item>
-            <q-item tag="label" >
+            <q-item tag="label">
               <q-item-section avatar top>
                 <q-radio v-model="LookRepeat" :val="2" color="primary" />
               </q-item-section>
               <q-item-section>
-                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">客户库查重</span> (一个客户在<span style="color:#f00">单个客户库</span>内，只允许被一个员工跟进)</div>
-               
+                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">客户库查重</span> (一个客户在<span
+                    style="color:#f00">单个客户库</span>内，只允许被一个员工跟进)</div>
+
                 <div class="ruleset-box">
-                    <div class="ruleset-txt">
-                         一个客户，在整个企业内查重（整个企业不允许创建重复客户） 
-                    </div>
-                    <div class="ruleset-img">
-                        <img src="@/assets/images/customer/customerSet/rule2.jpg"/>
-                    </div>
+                  <div class="ruleset-txt">
+                    一个客户，在整个企业内查重（整个企业不允许创建重复客户）
+                  </div>
+                  <div class="ruleset-img">
+                    <img src="@/assets/images/customer/customerSet/rule2.jpg" />
+                  </div>
                 </div>
               </q-item-section>
             </q-item>
           </div>
         </q-card-section>
         <q-card-actions align="left" class="bg-white text-teal">
-          <q-btn color="primary" unelevated label="确定" class="q-ml-lg" @click="setLookRepeatRule"/>
+          <q-btn color="primary" unelevated label="确定" class="q-ml-lg" @click="setLookRepeatRule" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -103,10 +149,7 @@
   // import { Dialog } from 'quasar'
   import message from '@/utils/message'
   import customerSetService from '@/api/customerSet';
-  // import router from '@/router/index'
-
-
-
+  import router from '@/router/index'
   export default defineComponent({
 
     setup() {
@@ -170,7 +213,15 @@
       const setLookRepeatRule = () => {
         customerSetService.setCustomerLibraryLookRepeat(LookRepeatMsg).then(res => {
           message.successMsg(res.data.Message)
-          data.showRuleDig=false
+          data.showRuleDig = false
+        })
+      }
+       const jumpPage = (url: string, Id = 0) => {
+        router.push({
+          path: url,
+          query: {
+            Id
+          }
         })
       }
       onMounted(() => {
@@ -180,32 +231,70 @@
       return {
         ...toRefs(data),
         ...toRefs(LookRepeatMsg),
-        setLookRepeatRule
+        setLookRepeatRule,
+        jumpPage
       }
     }
   })
 
 </script>
 <style lang="scss" scoped>
-.ruleset-title{
+  .ruleset-title {
     line-height: 40px;
-}
-.ruleset-box{
+  }
+
+  .ruleset-box {
     width: 606px;
     align-items: center;
     color: #333;
     padding: 30px 0 42px 0;
-    margin: 10px 0 ;
+    margin: 10px 0;
     border-radius: 8px;
     border: 1px solid #ccc;
-    .ruleset-txt{
-        text-align: center;
+
+    .ruleset-txt {
+      text-align: center;
     }
-    .ruleset-img{
-        margin-top: 24px;
-        display: flex;
-        justify-content: center;
+
+    .ruleset-img {
+      margin-top: 24px;
+      display: flex;
+      justify-content: center;
     }
-}
+  }
+
+  .tip-title {
+    font-size: 18px;
+    margin-bottom: 15px;
+    font-weight: bolder;
+  }
+
+  .tip-content {
+    background-color: #f4f4f6;
+    padding: 30px;
+    border-radius: 10px;
+    margin-bottom: 15px;
+  }
+
+  .tip-header {
+    color: var(--q-accent);
+    font-size: 18px;
+    font-weight: bolder;
+    margin-bottom: 15px;
+  }
+
+  .tip-text {
+    font-size: 14px;
+    margin-bottom: 5px;
+  }
+   .tip-list-text {
+    color: var(--q-accent);
+    font-size: 12px;
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+    font-weight: 500;
+    line-height:22px;
+  }
 
 </style>

src/pages/customerManage/customerSet/components/CustomerOperation.vue

@@ -11,7 +11,16 @@
         <div class="col-10">
           <div class="flex items-center">
             <q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" />
-            开启后，员工领取公海客户时需要企微端设置的部门上级审批，审批同意后才可领取
+            开启后，员工领取公海客户时需要企微端设置的部门上级审批，审批同意后才可领取。
+            <n-popover trigger="hover" placement="right-start">
+              <template #trigger>
+                <q-icon name="help" size="xs" color="grey-4" />
+              </template>
+              <div class="tipBox">
+                <div class="text-center q-mb-xs">部门上级：指在【企业微信后台】-【通讯录】设置的部门上级</div>
+                <img src="@/assets/images/tip/dept-superior.png" style="width: 450px" />
+              </div>
+            </n-popover>
           </div>
           <div class="flex items-center">
             <q-toggle v-model="PublicGetDeptState" @update:model-value="ChangePublicGetDeptState" />以下部门允许领取公海客户
@@ -19,10 +28,10 @@
               @click="checkedPublicGetDept" />
           </div>
           <div v-if="PublicGetDeptState">
-            <div v-for="(item,index) in PublicGetDeptNameList" :key="index" class="dept-item">
+            <div v-for="(item, index) in PublicGetDeptNameList" :key="index" class="dept-item">
               <div class="flex justify-center items-center">
-                <q-icon name="work" color="primary" v-if="item.Type==1" />
-                <q-icon name="person" color="primary" v-if="item.Type==2" />
+                <q-icon name="work" color="primary" v-if="item.Type == 1" />
+                <q-icon name="person" color="primary" v-if="item.Type == 2" />
                 <span class="q-ml-sm">{{ item.DeptName }}</span>
               </div>
             </div>
@@ -157,13 +166,13 @@
     defineComponent,
     onMounted,
     provide,
-    watch,
+    watch
   } from 'vue'
   import message from '@/utils/message'
   import customerSetService from '@/api/customerSet'
   import customerService from '@/api/customer'
   import departmentStaff from '@/components/common/departmentStaff.vue'
-  import Abandon from "./CustomerOperationComponents/Abandon.vue"
+  import Abandon from './CustomerOperationComponents/Abandon.vue'
   interface dataParams {
     data: {
         AbandonReasonList: string[]
@@ -222,12 +231,12 @@
           PublicGetDept: -1,
           AbandonType: 1,
           AbandonAudit: 0,
-          AbandonReasonList: [],
+          AbandonReasonList: []
         },
         PublicGetDeptState: false, //以下部门允许领取公海客户
         PublicGetDeptNameList: [], //允许领取公海客户列表
         showDptDialog: false,
-        DptDataTreeDefault: [], //部门默认值
+        DptDataTreeDefault: [] //部门默认值
       })
       provide('DptDataTree', DptDataTree)
       provide('data', data)
@@ -252,7 +261,7 @@
             e.Type = 2
             return e
           })
-          data.PublicGetDeptNameList=[...PublicGetDeptList,...PublicGetEmpList]
+          data.PublicGetDeptNameList = [...PublicGetDeptList, ...PublicGetEmpList]
         })
       }
       const getDptTree = () => {
@@ -290,7 +299,6 @@
         } else if (curItem.value === 2) {
           // data.DptDataTreeDefault = data.data.AbandonDept.split(',')
         }
-
       }
       const getdpt = val => {
         data.showDptDialog = false
@@ -307,17 +315,20 @@
         console.log('dpt', dept)
       }
       //以下部门允许领取公海客户
-      const ChangePublicGetDeptState = (val) => {
+      const ChangePublicGetDeptState = val => {
         if (!val) {
           data.data.PublicGetDept = '-1'
         }
       }
 
-      watch(() => data.data, val => {
-        console.log('watch', val)
-      }, {
-        deep: true
-      })
+      watch(
+        () => data.data,
+        val => {
+          console.log('watch', val)
+        }, {
+          deep: true
+        }
+      )
 
       onMounted(() => {
         getDptTree()
@@ -332,7 +343,7 @@
         getdpt,
         checkedPublicGetDept,
         setCustomerConfig,
-        ChangePublicGetDeptState,
+        ChangePublicGetDeptState
       }
     }
   })

src/pages/customerManage/customerSet/components/CustomerOperationComponents/Abandon.vue

@@ -8,7 +8,7 @@
           <q-radio v-model="Type" :val="2" @update:model-value="changeAbandonType" label="部分客户" />
         </div>
         <div v-if="Type == 2">
-          <requestGroup v-model:addCondition="SelectType" :defaultData="AbandonKHSelect" @change="getCondition"/>
+          <requestGroup v-model:addCondition="SelectType" :defaultData="AbandonKHSelect" @change="getCondition" />
         </div>
       </div>
     </div>
@@ -36,7 +36,19 @@
       <div class="col-10">
         <div class="flex items-center">
           <q-toggle v-model="Audit" :true-value="1" :false-value="2" @update:model-value="ChangeAbandonAuditState" />
-          开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div>
+          开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。
+          <n-popover trigger="hover" placement="right-start">
+            <template #trigger>
+              <q-icon name="help" size="xs" color="grey-4" />
+            </template>
+            <div class="tipBox">
+              <div class="text-center q-mb-xs">
+                部门上级：指在【企业微信后台】-【通讯录】设置的部门上级
+              </div>
+              <img src="@/assets/images/tip/dept-superior.png" style="width:450px" />
+            </div>
+          </n-popover>
+        </div>
       </div>
     </div>
     <div class="row">
@@ -179,7 +191,7 @@
         const emp = props.AbandonEmpList.map((e: any) => '2-' + e.DeptId)
         const empName = props.AbandonEmpList.map((e: any) => {
           e.Type = 2
-           return e
+          return e
         })
         DptDataDefault.value = [...dept, ...emp]
         data.AbandonDeptNameList = [...deptName, ...empName]
@@ -241,14 +253,14 @@
       const changeAbandonType = (val: number) => {
         ctx.emit('update:AabandonType', val)
       }
-      const getCondition=(val)=>{
-        FaData.data.AbandonKHSelect=JSON.parse(JSON.stringify(val))
+      const getCondition = (val) => {
+        FaData.data.AbandonKHSelect = JSON.parse(JSON.stringify(val))
       }
       return {
         Type: ref(props.AabandonType),
         Audit: ref(props.AbandonAudit),
         SelectType: ref(props.AbandonSelectType),
-        AbandonKHSelect:ref(FaData.data.AbandonKHSelect),
+        AbandonKHSelect: ref(FaData.data.AbandonKHSelect),
         ReasonList,
         DptDataTree,
         ...toRefs(data),
@@ -305,4 +317,9 @@
     margin: 6px;
   }
 
+  .tipBox {
+    font-size: 12px;
+    line-height: 1.8;
+  }
+
 </style>

src/pages/customerManage/editor/editCustomerLib.vue

+<template>
+  <div class="page">
+    <div class="q-pa-md q-gutter-sm navbar">
+      <q-breadcrumbs>
+        <q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" />
+        <q-breadcrumbs-el label="编辑" />
+      </q-breadcrumbs>
+      <q-btn color="primary" label="完成" @click="setCustomerClueRuleInfo" />
+    </div>
+    <div class="container">
+      <q-stepper v-model="step" vertical color="primary" animated flat class="step-container">
+        <q-step :name="1" title="基础设置" icon="settings" :done="step > 1" style="height: 100px;">
+        </q-step>
+        <q-step :name="2" title="公海设置" icon="settings" :done="step > 2" style="height: 100px;">
+        </q-step>
+        <q-step :name="3" title="私库规则" icon="settings" :done="step = 3" style="height: 100px;">
+        </q-step>
+      </q-stepper>
+    </div>
+    <departmentStaff v-model="showDialog" :defaultArray="defaultArray" nodeKey="newId" labelKey="DeptName"
+      childrenKey="ChildList" strategy="leaf" :treeData="dataTree" @select="getdpt" @getNum="getNum" />
+  </div>
+</template>
+<script lang="ts">
+  import {
+    defineComponent,
+    toRefs,
+    onMounted
+  } from 'vue'
+
+  import departmentStaff from '@/components/common/departmentStaff.vue'
+  import editRuleModule from '@/module/customer/editor/editCustomerLibModule'
+  export default defineComponent({
+    components: {
+
+      departmentStaff,
+    },
+    setup() {
+      let {
+        jumpBeforePage,
+        msg,
+        data,
+        condition,
+        getDetail,
+        getEmployeeData,
+        setCustomerClueRuleInfo,
+        getCondition,
+        getdpt,
+        getNum,
+      } = editRuleModule();
+      onMounted(() => {
+        if (msg().RuleId > 0) {
+          //   data.editMsg.Id = msg().RuleId
+          getDetail()
+        }
+        getEmployeeData()
+      })
+      return {
+        jumpBeforePage,
+
+        condition,
+        ...toRefs(data),
+        setCustomerClueRuleInfo,
+        getCondition,
+        getdpt,
+        getNum,
+      }
+    }
+
+  })
+
+</script>
+<style lang="scss" scoped>
+  .page {
+    height: 100vh;
+    background-color: #f4f4f6;
+  }
+
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+    padding-left: 24px;
+    font-size: 16px;
+    border-bottom: 1px solid #d7d7d7;
+    background-color: #fff;
+  }
+
+  .container {
+
+
+    .step-container {
+      width: 200px;
+      height:calc(100vh - 70px);
+      padding: 40px;
+      flex-shrink: 0;
+      border-right: 1px solid #d7d7d7;
+      overflow-x: hidden;
+
+    }
+  }
+
+</style>

src/pages/customerManage/editor/editRule.vue

@@ -80,7 +80,7 @@ import {
 } from 'vue'
 import requestGroup from '@/components/customer/request-group.vue'
 import departmentStaff from '@/components/common/departmentStaff.vue'
-import editRuleModule from '@/module/editor/editRuleModule'
+import editRuleModule from '@/module/customer/editor/editRuleModule'
 // import where from '@/components/common/customWhere/where.vue'
 export default defineComponent({
     components: {

src/router/routes.ts

@@ -49,7 +49,11 @@ const routes: RouteRecordRaw[] = [
     path: '/editor/createStageRange',
     component: () => import('@/pages/customerManage/editor/createStageRange.vue')
   },
-
+  // 编辑客户库
+  {
+    path: '/editor/editCustomerLib',
+    component: () => import('@/pages/customerManage/editor/editCustomerLib.vue')
+  },
   {
     path: '/auth/login',
     component: () => import('@/pages/auth/login.vue')