1

src/components/common/departmentStaff.vue

 <template>
-    <q-dialog v-model="modelValue" persistent transition-show="scale" transition-hide="scale"  @hide ="hideDialog">
-        <q-card style="width: 800px">
+    <q-dialog
+        v-model="modelValue"
+        class="col-6"
+        persistent
+        transition-show="scale"
+        transition-hide="scale"
+        @hide="hideDialog"
+    >
+        <q-card style="width: 600px;height:600px; max-width: 80vw;">
             <q-card-section class="row items-center q-pb-none">
                 <div class="text-h6">选择部门/员工</div>
                 <q-space />
                 <q-btn icon="close" flat round dense v-close-popup />
             </q-card-section>
 
-            <q-card-section class="q-pt-none">
-                <div class="flex col">
-                    <div class="col-6">1
-
+            <q-card-section class="q-pt-none" style="height:480px;">
+                <div class="row" style="height:100%;">
+                    <div class="col-6 q-px-sm" style="border-right:1px solid #999;height:100%;">
+                        <q-input
+                            color="teal"
+                            dense
+                            outlined
+                            placeholder="请输入"
+                            style="margin-bottom:10px"
+                        >
+                            <template v-slot:append>
+                                <q-icon name="search" />
+                            </template>
+                        </q-input>
+                        <q-tree
+                            style="height:calc(100% - 50px);overflow-y:scroll"
+                            ref="tree"
+                            class="col-12"
+                            :nodes="treeData"
+                            :node-key="nodeKey"
+                            :label-key="labelKey"
+                            :children-key="childrenKey"
+                            :tick-strategy="strategy"
+                            :default-expand-all="defaultExpandAll"
+                            no-connectors
+                            v-model:ticked="defaultArray"
+                            @update:ticked="tickedTree"
+                        />
+                    </div>
+                    <div class="col-6 q-px-sm">
+                        <div class="list-title">已选择的部门或成员</div>
+                        <div class="q-pb-none col-12 list-box">
+                            <div
+                                v-for="(item,index) in defaultArray"
+                                :key="index"
+                                class="list-item"
+                            >
+                                <div class="flex-center">
+                                    <q-icon
+                                        name="work"
+                                        color="primary"
+                                        v-if="item.slice(0, 1) == 1"
+                                    />
+                                    <q-icon
+                                        name="person"
+                                        color="accent"
+                                        v-if="item.slice(0, 1) == 2"
+                                    />
+                                    <span class="q-ml-sm">{{ item.split('-')[1] }}</span>
+                                </div>
+                                <q-icon name="cancel" @click="delItem(index)"></q-icon>
+                            </div>
+                        </div>
                     </div>
-                    <div class="col-6">2</div>
                 </div>
             </q-card-section>
 
             <q-card-actions align="right" class="bg-white text-teal">
                 <q-btn flat label="取消" v-close-popup />
-                <q-btn color="primary" label="确定"  />
+                <q-btn color="primary" v-close-popup label="确定" />
             </q-card-actions>
         </q-card>
     </q-dialog>
 </template>
 <script lang="ts">
-import { reactive, ref,watch } from 'vue'
+import { ref } from 'vue'
+
+interface parmas {
+    [key: string]: any
+}
 export default {
     props: {
         modelValue: {
@@ -39,16 +98,119 @@ export default {
         showType: {
             type: Number,//0:显示部门和员工，1：只显示部门
             default: 0
-        }
         },
-    // emits:["update:modelValue"],
-    setup(props,ctx) {
-        let hideDialog=()=>{
-            ctx.emit("update:modelValue",false)
+        //是否默认展开
+        defaultExpandAll: {
+            type: Boolean,
+            default: false
+        },
+        //默认选中值
+        defaultArray: {
+            type: Array,
+            default: () => [],
+            required: true,
+        },
+        //节点Key
+        nodeKey: {
+            type: String,//格式需拼成 '类型-名字-id'的形式
+            default: 'id'
+        },
+        //节点名称
+        labelKey: {
+            type: String,
+            default: 'name'
+        },
+        //子节点名称
+        childrenKey: {
+            type: String,
+            default: 'children'
+        },
+        //滴答策略
+        strategy: {
+            type: String,
+            default: 'strict'
+        },
+        
+    },
+
+    setup(props, ctx) {
+        let tree = ref<any>(null);
+        let list = ref<Array<string>>([])
+        let hideDialog = () => {
+            ctx.emit("update:modelValue", false)
+        }
+        let findChild = (arr: parmas) => {
+            arr.map((e) => {
+                if (e[props.childrenKey] && e[props.childrenKey].length > 0) {
+                    let parentId = e[props.nodeKey]
+                    let flag= tree.value.isTicked (parentId)
+                      
+                    // let childArr = e[props.childrenKey].map(_e => _e[props.nodeKey])
+                    // let flag2 = childArr.every(_e => {
+                    //     return props.defaultArray.toString().indexOf(_e) != -1
+                    // })
+                   
+                     console.log(147,parentId, flag)
+                   
+                    findChild(e[props.childrenKey])
+                }
+            })
+
+
         }
+        let tickedTree = (val) => {
+            ctx.emit("update:defaultArray", val)
+            // findChild(props.treeData)
+            let chected=tree.value.getTickedNodes () 
+            console.log(165,chected)
+        }
+        let delItem = (i: number) => {
+            props.defaultArray.splice(i, 1)
+        }
+
         return {
-            hideDialog
+            tree,
+            hideDialog,
+            tickedTree,
+            delItem,
+            list
         }
     }
 }
 </script>
+<style scoped>
+::-webkit-scrollbar {
+    height: 7px;
+    width: 7px;
+}
+::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 3px;
+    background-color: #ddd;
+}
+::-webkit-scrollbar-track-piece {
+    background-color: #fff;
+    -webkit-border-radius: 12px;
+}
+.list-title {
+    height: 50px;
+    padding-bottom: 10px;
+    color: #606266;
+    font-size: 14px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+}
+.list-box {
+    height: 420px;
+    overflow-y: scroll;
+}
+.list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 0 0 10px;
+    border-radius: 5px;
+    height: 30px;
+}
+</style>
\ No newline at end of file

src/module/editor/editRuleModule.ts

@@ -2,23 +2,46 @@ import {  reactive } from 'vue'
 import customerService from '@/api/customer'
 import customerService2 from '@/api/customer2'
 import router from '@/router/index'
-interface Params {
-  RuleId: number
+
+interface dataParams {
+  showDialog: boolean
+  shape: number
+  dataTree: Array<any>
+  defaultArray: Array<number | string>
+  editMsg: any
 }
-const curQueryId = Number(router.currentRoute.value.query.Id) ?? 0
-console.log(8, curQueryId)
 
-const msg = reactive<Params>({
-  RuleId: 0
-})
-if (curQueryId > 0) {
-  msg.RuleId = <number>curQueryId
+const msg = () => {
+  const curQueryId = Number(router.currentRoute.value.query.Id)
+  return {
+    RuleId: curQueryId
+  }
 }
-const data = reactive({
+
+const data = reactive<dataParams>({
   showDialog: false,
   shape: 0,
-  dataTree: {}
+  dataTree: [],
+  defaultArray: [],
+  editMsg: {
+    Id: 0,
+    RuleSelectType: 1, //客户的查询类型 1并且 2或者
+    DeptList: [], //部门列表
+    EmpList: [], //员工列表
+    RuleAllotWay: 1, //分配方式 1依次轮流 2随机分配
+    ConditionList: [] //条件列表
+  }
 })
+// watch(
+//   () =>data.defaultArray,
+//   (val) => {
+//     val.map(e => {
+//     console.log('valDefault', e)
+      
+//     })
+//   }
+  
+// )
 const jumpBeforePage = () => {
   router.go(-1)
 }
@@ -30,8 +53,10 @@ const changeDialog = () => {
 const editRuleModule = () => {
   //获取线索详情
   const getDetail = () => {
-    customerService.getCustomerClueRuleDetail(msg).then(res => {
-      console.log(res, '数据')
+    customerService.getCustomerClueRuleDetail(msg()).then(res => {
+      console.log(res.data.Data, '详情数据')
+      data.defaultArray = []
+      // res.data.Data.
     })
   }
   //获取部门数据
@@ -39,6 +64,22 @@ const editRuleModule = () => {
     customerService2.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. DeptName + '-' + 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.DeptName + '-' + x.DeptId
+      if (x.ChildList && x.ChildList.length > 0) {
+        getChildList(x.ChildList)
+      }
     })
   }
   return {

src/pages/customer/components/clueRule.vue

@@ -61,7 +61,7 @@
                                     style="font-weight:400;color: #3FC4FF"
                                     class="q-mr-xs"
                                     label="编辑"
-                                   
+                                    @click="jumpPage('/editor/editRule',item.Id)"
                                 />
                             </td>
                             <td>
@@ -103,7 +103,7 @@
                                     style="font-weight:400;color: #3FC4FF"
                                     class="q-mr-xs"
                                     label="编辑"
-                                    @click="goedit(element)"
+                                   @click="jumpPage('/editor/editRule',element.Id)"
                                 />
                                 <q-btn
                                     v-if="element.IsDefault != 1"

src/pages/editor/editRule.vue

@@ -25,8 +25,8 @@
                     </div>
                 </div>
                 <div class="staff-box mt20">
-                    <q-chip color="primary" text-color="white" icon="work" label="部门"></q-chip>
-                    <q-chip color="accent" text-color="white" icon="person" label="员工"></q-chip>
+                    <!-- <q-chip color="primary" text-color="white" icon="work" label="部门"></q-chip>
+                    <q-chip color="accent" text-color="white" icon="person" label="员工"></q-chip> -->
                 </div>
             </div>
             <div class="content-block mt20">
@@ -34,13 +34,21 @@
                 <div class="fission-subtitle flex align-center">
                     选择分配规则：
                     <div class="q-gutter-sm">
-                        <q-radio v-model="data.shape" :val="1" label="顺序分配" />
-                        <q-radio v-model="data.shape" :val="2" label="随机分配" />
+                        <q-radio v-model="data.editMsg.RuleAllotWay" :val="1" label="顺序分配" />
+                        <q-radio v-model="data.editMsg.RuleAllotWay" :val="2" label="随机分配" />
                     </div>
                 </div>
             </div>
         </div>
-        <departmentStaff v-model='data.showDialog' :treeData='data.dataTree'/>
+        <departmentStaff
+            v-model="data.showDialog"
+            v-model:defaultArray="data.defaultArray"
+            nodeKey="newId"
+            labelKey="DeptName"
+            childrenKey="ChildList"
+            strategy='leaf'
+            :treeData="data.dataTree"
+        />
     </div>
 </template>
 <script lang="ts">
@@ -51,15 +59,12 @@ import {
 import requestGroup from '@/components/customer/request-group.vue'
 import departmentStaff from '@/components/common/departmentStaff.vue'
 import editRuleModule from '@/module/editor/editRuleModule'
-
 export default defineComponent({
     components: {
         requestGroup,
         departmentStaff
     },
     setup() {
-
-
         let {
             jumpBeforePage,
             changeDialog,
@@ -69,7 +74,9 @@ export default defineComponent({
             getEmployeeData
         } = editRuleModule();
         onMounted(() => {
-            if (msg.RuleId > 0) {
+
+            if (msg().RuleId > 0) {
+                console.log('getDetail', msg())
                 getDetail()
             }
             getEmployeeData()