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/customerSet/components/clueRule.vue

 <template>
-    <div class="q-pa-md">
-        <div class="q-gutter-lg">
-            <q-radio
-                v-model="configMsg.ClueType"
-                :val="2"
-                label="自动分配"
-                @update:model-value="configChange"
-            ></q-radio>
-            <q-radio
-                v-model="configMsg.ClueType"
-                :val="1"
-                label="手动分配"
-                @update:model-value="configChange"
-            ></q-radio>
-        </div>
-        <div class="q-pa-md" v-if="configMsg.ClueType === 1">
-            <div class="aoto-matic-header">
-                若客户满足多条规则，会优先按照编号顺序执行规则
-                <q-btn
-                    color="primary"
-                    label="+新增规则"
-                    style="margin-left: 10px;"
-                    @click="jumpPage('/editor/editRule')"
-                />
-            </div>
-            <table class="payTable">
-                <thead>
-                    <tr>
-                        <th>排序</th>
-                        <!-- <th>查询类型</th> -->
-                        <th>规则</th>
-                        <th>部门列表</th>
-                        <th>人员列表</th>
-                        <th>分配方式</th>
-                        <th width="10%">编辑</th>
-                        <th width="5%"></th>
-                    </tr>
-                </thead>
-                <tr v-if="data.length == 0 && defaultData.length == 0">
-                    <td :colspan="9" align="center">暂无数据</td>
-                </tr>
-                <template v-if="defaultData.length > 0">
-                    <tr v-for="(item,index) in defaultData" :key="index">
-                        <td></td>
-                        <!-- <td>
+  <div class="q-pa-md">
+    <div class="q-gutter-lg">
+      <q-radio v-model="configMsg.ClueType" :val="2" @update:model-value="configChange"> 自动分配
+        <n-popover trigger="hover" placement="right-start">
+          <template #trigger>
+            <q-icon name="help" size="xs" color="grey-4" />
+          </template>
+          <div class="tipBox">
+            场景一：线索认定有效后，流转至待分配客户库，进行自动分配；<br />
+            场景二：将客户导入到待分配客户库，进行自动分配；
+          </div>
+        </n-popover>
+      </q-radio>
+      <q-radio v-model="configMsg.ClueType" :val="1" @update:model-value="configChange">手动分配
+        <n-popover trigger="hover" placement="right-start">
+          <template #trigger>
+            <q-icon name="help" size="xs" color="grey-4" />
+          </template>
+          <div class="tipBox">
+            在线索库或待分配客户库，可以进行手动分配
+          </div>
+        </n-popover>
+      </q-radio>
+    </div>
+    <div class="q-pa-md" v-if="configMsg.ClueType === 2">
+      <div class="aoto-matic-header">
+        若客户满足多条规则，会优先按照编号顺序执行规则
+        <q-btn color="primary" label="+新增规则" style="margin-left: 10px;" @click="jumpPage('/editor/editRule')" />
+      </div>
+      <table class="payTable">
+        <thead>
+          <tr>
+            <th>排序</th>
+            <!-- <th>查询类型</th> -->
+            <th>规则</th>
+            <th>部门列表</th>
+            <th>人员列表</th>
+            <th>分配方式</th>
+            <th width="10%">编辑</th>
+            <th width="5%"></th>
+          </tr>
+        </thead>
+        <tr v-if="data.length == 0 && defaultData.length == 0">
+          <td :colspan="9" align="center">暂无数据</td>
+        </tr>
+        <template v-if="defaultData.length > 0">
+          <tr v-for="(item,index) in defaultData" :key="index">
+            <td></td>
+            <!-- <td>
                             <span v-if="item.RuleSelectType === 1">并且</span>
                             <span v-if="item.RuleSelectType === 2">或者</span>
                         </td>-->
-                        <td>
-                            <div v-if="item.ConditionStrList.length > 0">
-                                <div v-for="(e,i) in item.ConditionStrList" :key="i">{{ e }}</div>
-                            </div>
-                            <div v-else>未匹配设定规则的客户</div>
-                        </td>
-                        <td>
-                            <div v-if="item.DeptList.length > 0">
-                                <div v-for="(e) in item.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
-                            </div>
-                            <div v-else>-</div>
-                        </td>
-                        <td>
-                            <div v-if="item.EmpList.length > 0">
-                                <div v-for="(e) in item.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
-                            </div>
-                            <div v-else>-</div>
-                        </td>
-                        <td>
-                            <span v-if="item.RuleAllotWay === 1">依次轮流</span>
-                            <span v-if="item.RuleAllotWay === 2">随机分配</span>
-                        </td>
-                        <td>
-                            <q-btn
-                                flat
-                                size="xs"
-                                icon="edit"
-                                style="font-weight:400;color: #3FC4FF"
-                                class="q-mr-xs"
-                                label="编辑"
-                                @click="jumpPage('/editor/editRule', item.Id)"
-                            />
-                        </td>
-                        <td></td>
-                    </tr>
-                </template>
-                <draggable
-                    v-model="data"
-                    tag="tbody"
-                    item-key="Id"
-                    @update="datadragEnd"
-                    v-if="data.length > 0"
-                    :move="getDragId"
-                >
-                    <template #item="{ element, index }">
-                        <tr>
-                            <td>
-                                <span style="color:#606266">{{ index + 1 }}</span>
-                            </td>
-                            <!-- <td>
+            <td>
+              <div v-if="item.ConditionStrList.length > 0">
+                <div v-for="(e,i) in item.ConditionStrList" :key="i">{{ e }}</div>
+              </div>
+              <div v-else>未匹配设定规则的客户</div>
+            </td>
+            <td>
+              <div v-if="item.DeptList.length > 0">
+                <div v-for="(e) in item.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
+              </div>
+              <div v-else>-</div>
+            </td>
+            <td>
+              <div v-if="item.EmpList.length > 0">
+                <div v-for="(e) in item.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
+              </div>
+              <div v-else>-</div>
+            </td>
+            <td>
+              <span v-if="item.RuleAllotWay === 1">依次轮流</span>
+              <span v-if="item.RuleAllotWay === 2">随机分配</span>
+            </td>
+            <td>
+              <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
+                @click="jumpPage('/editor/editRule', item.Id)" />
+            </td>
+            <td></td>
+          </tr>
+        </template>
+        <draggable v-model="data" tag="tbody" item-key="Id" @update="datadragEnd" v-if="data.length > 0"
+          :move="getDragId">
+          <template #item="{ element, index }">
+            <tr>
+              <td>
+                <span style="color:#606266">{{ index + 1 }}</span>
+              </td>
+              <!-- <td>
                                 <span v-if="element.RuleSelectType === 1">并且</span>
                                 <span v-if="element.RuleSelectType === 2">或者</span>
                             </td>-->
-                            <td>
-                                <div v-if="element.ConditionStrList.length > 0">
-                                    <div v-for="(e,i) in element.ConditionStrList" :key="i">{{ e }}</div>
-                                </div>
-                                <div v-else>未匹配设定规则的客户</div>
-                            </td>
-                            <td>
-                                <div v-if="element.DeptList.length > 0">
-                                    <div
-                                        v-for="(e) in element.DeptList"
-                                        :key="e.DeptId"
-                                    >{{ e.DeptName }}</div>
-                                </div>
+              <td>
+                <div v-if="element.ConditionStrList.length > 0">
+                  <div v-for="(e,i) in element.ConditionStrList" :key="i">{{ e }}</div>
+                </div>
+                <div v-else>未匹配设定规则的客户</div>
+              </td>
+              <td>
+                <div v-if="element.DeptList.length > 0">
+                  <div v-for="(e) in element.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
+                </div>
 
-                                <div v-else>-</div>
-                            </td>
-                            <td>
-                                <div v-if="element.EmpList.length > 0">
-                                    <div
-                                        v-for="(e) in element.EmpList"
-                                        :key="e.Id"
-                                    >{{ e.EmployeeName }}</div>
-                                </div>
+                <div v-else>-</div>
+              </td>
+              <td>
+                <div v-if="element.EmpList.length > 0">
+                  <div v-for="(e) in element.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
+                </div>
 
-                                <div v-else>-</div>
-                            </td>
-                            <td>
-                                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
-                                <span v-if="element.RuleAllotWay === 2">随机分配</span>
-                            </td>
-                            <td>
-                                <q-btn
-                                    flat
-                                    size="xs"
-                                    icon="edit"
-                                    style="font-weight:400;color: #3FC4FF"
-                                    class="q-mr-xs"
-                                    label="编辑"
-                                    @click="jumpPage('/editor/editRule', element.Id)"
-                                />
-                                <q-btn
-                                    v-if="element.IsDefault != 1"
-                                    flat
-                                    size="xs"
-                                    icon="delete"
-                                    color="negative"
-                                    class="q-mr-xs"
-                                    label="删除"
-                                    @click="del(element.Id)"
-                                />
-                            </td>
-                            <td>
-                                <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
-                            </td>
-                        </tr>
-                    </template>
-                </draggable>
-            </table>
+                <div v-else>-</div>
+              </td>
+              <td>
+                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
+                <span v-if="element.RuleAllotWay === 2">随机分配</span>
+              </td>
+              <td>
+                <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
+                  @click="jumpPage('/editor/editRule', element.Id)" />
+                <q-btn v-if="element.IsDefault != 1" flat size="xs" icon="delete" color="negative" class="q-mr-xs"
+                  label="删除" @click="del(element.Id)" />
+              </td>
+              <td>
+                <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
+              </td>
+            </tr>
+          </template>
+        </draggable>
+      </table>
+    </div>
+    <div class="q-pa-md manual" v-if="configMsg.ClueType === 1">
+      <div class="box-manual" :class="{ 'checked-border': configMsg.ClueAllotWay == 1 }"
+        @click="configMsg.ClueAllotWay = 1; configChange()">
+        <q-icon name="autorenew" size="lg" />
+        <div>按已选员工顺序依次轮流分配</div>
+        <div class="right" v-if="configMsg.ClueAllotWay == 1">
+          <q-icon name="check" class="check-icon" />
         </div>
-        <div class="q-pa-md manual" v-if="configMsg.ClueType === 2">
-            <div
-                class="box-manual"
-                :class="{ 'checked-border': configMsg.ClueAllotWay == 1 }"
-                @click="configMsg.ClueAllotWay = 1; configChange()"
-            >
-                <q-icon name="autorenew" size="lg" />
-                <div>按已选员工顺序依次轮流分配</div>
-                <div class="right" v-if="configMsg.ClueAllotWay == 1">
-                    <q-icon name="check" class="check-icon" />
-                </div>
-            </div>
-            <div
-                class="box-manual"
-                :class="{ 'checked-border': configMsg.ClueAllotWay == 2 }"
-                @click="configMsg.ClueAllotWay = 2; configChange()"
-            >
-                <q-icon name="shuffle" size="lg" />
-                <div>按已选员工随机分配</div>
-                <div class="right" v-if="configMsg.ClueAllotWay == 2">
-                    <q-icon name="check" class="check-icon" />
-                </div>
-            </div>
+      </div>
+      <div class="box-manual" :class="{ 'checked-border': configMsg.ClueAllotWay == 2 }"
+        @click="configMsg.ClueAllotWay = 2; configChange()">
+        <q-icon name="shuffle" size="lg" />
+        <div>按已选员工随机分配</div>
+        <div class="right" v-if="configMsg.ClueAllotWay == 2">
+          <q-icon name="check" class="check-icon" />
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
-import {
+  import {
     ref,
     defineComponent,
     reactive,
     onMounted
-} from 'vue'
-import draggable from "vuedraggable";
-import { Dialog } from 'quasar'
-import message from '@/utils/message'
-import customerSetService from '@/api/customerSet';
-import router from '@/router/index'
+  } from 'vue'
+  import draggable from "vuedraggable";
+  import {
+    Dialog
+  } from 'quasar'
+  import message from '@/utils/message'
+  import customerSetService from '@/api/customerSet';
+  import router from '@/router/index'
 
-interface dataType {
+  interface dataType {
     Id: number,
-    RuleSelectType: number,
-    IsDefault: number,
-    DeptList: Array<any>,
-    EmpList: Array<any>,
-    RuleAllotWay: number,
-    ConditionList: Array<any>,
-    ConditionStrList: Array<string>,
-    Sort: number
-}
-interface dataConfigType {
-    Id?: number,
-    ClueType: number,
-    ClueAllotWay: number
-}
-export default defineComponent({
+      RuleSelectType: number,
+      IsDefault: number,
+      DeptList: Array < any > ,
+      EmpList: Array < any > ,
+      RuleAllotWay: number,
+      ConditionList: Array < any > ,
+      ConditionStrList: Array < string > ,
+      Sort: number
+  }
+  interface dataConfigType {
+    Id ? : number,
+      ClueType: number,
+      ClueAllotWay: number
+  }
+  export default defineComponent({
     components: {
-        draggable,
+      draggable,
     },
     setup() {
-        let defaultData = ref<Array<dataType>>([])
-        let data = ref<Array<dataType>>([])
-        let dragId = ref(0)
-        const getDragId = (e: any) => {
-            dragId.value = e.draggedContext.element.Id
+      let defaultData = ref < Array < dataType >> ([])
+      let data = ref < Array < dataType >> ([])
+      let dragId = ref(0)
+      const getDragId = (e: any) => {
+        dragId.value = e.draggedContext.element.Id
+      }
+      const datadragEnd = (e: any) => {
+        let olddragId = 0
+        if (e.newIndex > 0) {
+          olddragId = data.value[e.newIndex - 1].Id
+        } else {
+          olddragId = 0
+        }
+        let msg = {
+          RuleId: dragId.value,
+          Type: 1,
+          TargetId: olddragId,
         }
-        const datadragEnd = (e: any) => {
-            let olddragId = 0
-            if (e.newIndex > 0) {
-                olddragId = data.value[e.newIndex - 1].Id
+        setState(msg)
+      }
+      const getClueList = () => {
+        defaultData.value = []
+        data.value = []
+        customerSetService.getCustomerClueRuleList({}).then(res => {
+          res.data.Data.map((item: dataType) => {
+            if (item.IsDefault === 1) {
+              defaultData.value.push(item)
             } else {
-                olddragId = 0
+              data.value.push(item)
             }
-            let msg = {
-                RuleId: dragId.value,
-                Type: 1,
-                TargetId: olddragId,
-            }
-            setState(msg)
-        }
-        const getClueList = () => {
-            defaultData.value = []
-            data.value = []
-            customerSetService.getCustomerClueRuleList({}).then(res => {
-                res.data.Data.map((item: dataType) => {
-                    if (item.IsDefault === 1) {
-                        defaultData.value.push(item)
-                    } else {
-                        data.value.push(item)
-                    }
-                })
-            })
-        }
-        let configMsg = reactive<dataConfigType>({
-            ClueType: 1,// 1手动分配 2自动分配
-            ClueAllotWay: 1,// 1依次轮流 2随机分配
+          })
         })
-        const getCustomerClueRuleConfig = () => {
-            customerSetService.getCustomerClueRuleConfig({}).then(res => {
-                let data = res.data.Data
-                configMsg.ClueType = data.ClueType
-                configMsg.ClueAllotWay = data.ClueAllotWay
-            })
-        }
-        const jumpPage = (url: string, Id = 0) => {
-            router.push({
-                path: url,
-                query: {
-                    Id
-                }
-            })
-        }
-        const del = (id) => {
-            Dialog.create({
-                title: "提示",
-                message: "确认删除？",
-                cancel: '取消',
-                ok: "确认"
-            }).onOk(() => {
-                console.log('>>>> OK', id)
-                let msg = {
-                    RuleId: id,
-                    Type: 2,
-                }
-                setState(msg)
-            })
-        }
-        const configChange = () => {
-            customerSetService.setCustomerClueRuleConfig(configMsg).then(res => {
-                console.log(228, res.data)
-            })
-        }
+      }
+      let configMsg = reactive < dataConfigType > ({
+        ClueType: 1, // 1手动分配 2自动分配
+        ClueAllotWay: 1, // 1依次轮流 2随机分配
+      })
+      const getCustomerClueRuleConfig = () => {
+        customerSetService.getCustomerClueRuleConfig({}).then(res => {
+          let data = res.data.Data
+          configMsg.ClueType = data.ClueType
+          configMsg.ClueAllotWay = data.ClueAllotWay
+        })
+      }
+      const jumpPage = (url: string, Id = 0) => {
+        router.push({
+          path: url,
+          query: {
+            Id
+          }
+        })
+      }
+      const del = (id) => {
+        Dialog.create({
+          title: "提示",
+          message: "确认删除？",
+          cancel: '取消',
+          ok: "确认"
+        }).onOk(() => {
+          console.log('>>>> OK', id)
+          let msg = {
+            RuleId: id,
+            Type: 2,
+          }
+          setState(msg)
+        })
+      }
+      const configChange = () => {
+        customerSetService.setCustomerClueRuleConfig(configMsg).then(res => {
+          console.log(228, res.data)
+        })
+      }
 
-        const setState = (msg) => {
-            customerSetService.setCustomerClueRuleState(msg).then(res => {
-                message.successMsg(res.data.Message)
-                if (msg.Type == 2) {
-                    getClueList()
-                }
-            })
-        }
-        onMounted(() => {
-            getClueList();
-            getCustomerClueRuleConfig();
+      const setState = (msg) => {
+        customerSetService.setCustomerClueRuleState(msg).then(res => {
+          message.successMsg(res.data.Message)
+          if (msg.Type == 2) {
+            getClueList()
+          }
         })
-        return {
-            getDragId,
-            configChange,
-            defaultData,
-            data,
-            datadragEnd,
-            jumpPage,
-            configMsg,
-            del
-        }
+      }
+      onMounted(() => {
+        getClueList();
+        getCustomerClueRuleConfig();
+      })
+      return {
+        getDragId,
+        configChange,
+        defaultData,
+        data,
+        datadragEnd,
+        jumpPage,
+        configMsg,
+        del
+      }
     }
-})
+  })
 
 </script>
 <style lang="scss" scoped>
-.payTable {
+  .payTable {
     width: 100%;
     border-collapse: collapse;
-}
+  }
 
-.payTable tr th {
+  .payTable tr th {
     background: #fff;
     height: 60px;
     font-size: 12px;
     font-weight: bold;
     color: #2d2d2d;
     background: #dddee0;
-}
+  }
 
-.payTable tr {
+  .payTable tr {
     background: #fff;
     text-align: center;
     height: 60px;
-}
+  }
 
-.payTable tr td {
+  .payTable tr td {
     font-size: 13px;
     text-align: center;
     color: #2d2d2d;
@@ -347,9 +313,9 @@ export default defineComponent({
     padding: 10px;
     font-weight: bold;
     border-bottom: 1px solid #e5e5e5;
-}
+  }
 
-.aoto-matic-header {
+  .aoto-matic-header {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -357,9 +323,9 @@ export default defineComponent({
     margin-left: 2px;
     color: #858598;
     font-size: 14px;
-}
+  }
 
-.manual {
+  .manual {
     height: 100%;
     display: flex;
     margin: 0 auto;
@@ -368,43 +334,50 @@ export default defineComponent({
     margin-top: 191px;
 
     .box-manual {
-        cursor: pointer;
-        width: 311px;
-        height: 198px;
-        background: #f9f9f9;
-        border-radius: 5px;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
+      cursor: pointer;
+      width: 311px;
+      height: 198px;
+      background: #f9f9f9;
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
 
-        .right {
-            position: absolute;
-            right: -20px;
-            bottom: -20px;
-            display: block;
-            width: 0;
-            height: 0;
-            transform: rotate(45deg);
-            border: 20px solid transparent;
-            border-left: 20px solid #3470ff;
-            .check-icon {
-                position: absolute;
-                top: -8px;
-                left: -19px;
-                transform: rotate(-45deg);
-                font-size: 14px;
-                font-weight: 700;
-                color: #fff;
-            }
+      .right {
+        position: absolute;
+        right: -20px;
+        bottom: -20px;
+        display: block;
+        width: 0;
+        height: 0;
+        transform: rotate(45deg);
+        border: 20px solid transparent;
+        border-left: 20px solid #3470ff;
+
+        .check-icon {
+          position: absolute;
+          top: -8px;
+          left: -19px;
+          transform: rotate(-45deg);
+          font-size: 14px;
+          font-weight: 700;
+          color: #fff;
         }
+      }
     }
-}
+  }
 
-.checked-border {
+  .checked-border {
     background-color: #edf2fd !important;
     border: 2px solid #3470ff !important;
     color: #3470ff;
-}
+  }
+
+  .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')