1

src/api/customer.ts

@@ -30,23 +30,23 @@
        responseType: 'json',
        data
      })
-   }   
-    // 获取客户标签
-    static async getLabelList(data: any): Promise<HttpResponse> {
-      return Axios('/QYWeChat/GetWeChatLableList', {
-        method: 'post',
-        responseType: 'json',
-        data
-      })
-    }
-    // 客户标签移动
-    static async setCustomerFiledState(data: {Type:number,  SortFiledId:number,FiledId:number}): Promise<HttpResponse> {
-      return Axios('/QYCustomer/SetCustomerFiledState', {
-        method: 'post',
-        responseType: 'json',
-        data
-      })
-    }
+   }
+   // 获取客户标签
+   static async getLabelList(data: any): Promise<HttpResponse> {
+     return Axios('/QYWeChat/GetWeChatLableList', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
+   // 客户标签移动
+   static async setCustomerFiledState(data: { Type: number; SortFiledId: number; FiledId: number }): Promise<HttpResponse> {
+     return Axios('/QYCustomer/SetCustomerFiledState', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
    // 获取客户线索规则列表
    static async getCustomerClueRuleList(data: any): Promise<HttpResponse> {
      return Axios('/QYCustomer/GetCustomerClueRuleList', {
@@ -55,6 +55,14 @@
        data
      })
    }
+   // 获取客户线索规则详情
+   static async getCustomerClueRuleDetail(data: any): Promise<HttpResponse> {
+     return Axios('/QYCustomer/GetCustomerClueRuleInfo', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
    // 获取客户阶段列表
    static async getCustomerStageList(data: any): Promise<HttpResponse> {
      return Axios('/QYCustomer/GetCustomerStageList', {
@@ -65,28 +73,28 @@
    }
    // 获取客户子段类型枚举
    static async getCustomerFieldTypeEnumList(data: any): Promise<HttpResponse> {
-    return Axios('/QYCustomer/GetCustomerFieldTypeEnumList', {
-      method: 'post',
-      responseType: 'json',
-      data
-    })
-  }
-  // 获取部门树形列表
-  static async getDeptTree(data: any): Promise<HttpResponse> {
-    return Axios('/User/GetDeptTree', {
-      method: 'post',
-      responseType: 'json',
-      data
-    })
-  }
-  // 获取部门树形列表
-  static async getCustomerFieldInputTypeEnumList(data: any): Promise<HttpResponse> {
-    return Axios('/QYCustomer/GetCustomerFieldInputTypeEnumList', {
-      method: 'post',
-      responseType: 'json',
-      data
-    })
-  }
+     return Axios('/QYCustomer/GetCustomerFieldTypeEnumList', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
+   // 获取部门树形列表
+   static async getDeptTree(data: any): Promise<HttpResponse> {
+     return Axios('/User/GetDeptTree', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
+   // 获取部门树形列表
+   static async getCustomerFieldInputTypeEnumList(data: any): Promise<HttpResponse> {
+     return Axios('/QYCustomer/GetCustomerFieldInputTypeEnumList', {
+       method: 'post',
+       responseType: 'json',
+       data
+     })
+   }
  }
  
  export default customerService

src/components/common/customRight.vue

@@ -316,7 +316,7 @@
         })
       }
       //获取客户阶段下拉
-      const getCustomStage = (param: {}) => {
+      const getCustomStage = (param) => {
         customer2.getCustomStageList(param).then(res => {
           data.customData = res.data.Data;
         })

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-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
+
+                    </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-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+<script lang="ts">
+import { reactive, ref,watch } from 'vue'
+export default {
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        //树形结构列表
+        treeData: {
+            type: Array,
+            required: true
+        },
+        showType: {
+            type: Number,//0:显示部门和员工，1：只显示部门
+            default: 0
+        }
+    },
+    // emits:["update:modelValue"],
+    setup(props,ctx) {
+        let hideDialog=()=>{
+            ctx.emit("update:modelValue",false)
+        }
+        return {
+            hideDialog
+        }
+    }
+}
+</script>
\ No newline at end of file

src/css/app.scss

 // app global css in SCSS form
+.flex{
+    display: flex;
+}
+.wrap{
+    flex-wrap: wrap;
+}
+.grow{
+    flex-grow: 1;
+}
+.align-center{
+    align-items: center;
+}
+.flex-center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.flex-between-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
\ No newline at end of file

src/module/editor/editRuleModule.ts

+import {  reactive } from 'vue'
+import customerService from '@/api/customer'
+import customerService2 from '@/api/customer2'
+import router from '@/router/index'
+interface Params {
+  RuleId: number
+}
+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 data = reactive({
+  showDialog: false,
+  shape: 0,
+  dataTree: {}
+})
+const jumpBeforePage = () => {
+  router.go(-1)
+}
+
+const changeDialog = () => {
+  data.showDialog = true
+}
+
+const editRuleModule = () => {
+  //获取线索详情
+  const getDetail = () => {
+    customerService.getCustomerClueRuleDetail(msg).then(res => {
+      console.log(res, '数据')
+    })
+  }
+  //获取部门数据
+  const getEmployeeData = () => {
+    customerService2.getEmployeeData({}).then(res => {
+      console.log(res.data.Data, '数据')
+      data.dataTree = res.data.Data
+    })
+  }
+  return {
+    msg,
+    data,
+    getDetail,
+    getEmployeeData,
+    jumpBeforePage,
+    changeDialog
+  }
+}
+
+export default editRuleModule

src/pages/customer/components/clueRule.vue

 <template>
     <div class="q-pa-md">
+        <requestGroup/>
         <div class="q-gutter-lg">
             <q-radio v-model="ClueType" :val="1" label="自动分配"></q-radio>
             <q-radio v-model="ClueType" :val="2" label="手动分配"></q-radio>
@@ -7,7 +8,7 @@
         <div class="q-pa-md" v-if="ClueType === 1">
             <div class="aoto-matic-header">
                 若客户满足多条规则，会优先按照编号顺序执行规则
-                <q-btn color="primary" label="+新增规则" style="margin-left: 10px;" />
+                <q-btn color="primary" label="+新增规则" style="margin-left: 10px;" @click="jumpPage('/editor/editRule')"/>
             </div>
             <table class="payTable">
                 <thead>
@@ -129,6 +130,9 @@
 import { defineComponent, ref, reactive, onMounted } from 'vue'
 import draggable from "vuedraggable";
 import customerService from '@/api/customer';
+import requestGroup from '@/components/customer/request-group.vue'
+import router from '@/router/index'
+// import { url } from 'inspector';
 interface dataType {
     Id: number,
     RuleSelectType: number,
@@ -142,7 +146,8 @@ interface dataType {
 }
 export default defineComponent({
     components: {
-        draggable
+        draggable,
+        requestGroup
     },
     setup() {
         let defaultData:Array<dataType>= reactive([])
@@ -164,6 +169,14 @@ export default defineComponent({
                
             })
         }
+        const jumpPage=(url:string,Id=0)=>{
+            router.push({
+                path:url,
+                query:{
+                    Id
+                }
+            })
+        }
         onMounted(() => {
             getClueList();
         })
@@ -171,7 +184,8 @@ export default defineComponent({
             ClueType: ref(1),
             defaultData,
             data,
-            datadragEnd
+            datadragEnd,
+            jumpPage
         }
     }
 })

src/pages/editor/editRule.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="完成" />
+        </div>
+        <div class="container">
+            <div class="content-block">
+                <div class="fission-title">选择待分配客户</div>
+                <div class="fission-subtitle">当待分配客户符合以下条件时</div>
+                <requestGroup />
+            </div>
+            <div class="content-block mt20">
+                <div class="fission-title">分配给以下部门/成员</div>
+                <div class="fission-subtitle">适用部门/成员</div>
+                <div class="departs flex-between-center">
+                    <q-btn outline color="primary" label="选择部门/成员" @click="changeDialog" />
+                    <div class="flex align-center depart-title">
+                        <span>已选：0人</span>
+                        <div class="per"></div>
+                        <span>有效账号数（已启用探马账号人数）：0人</span>
+                    </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>
+                </div>
+            </div>
+            <div class="content-block mt20">
+                <div class="fission-title">设置分配规则</div>
+                <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="随机分配" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <departmentStaff v-model='data.showDialog' :treeData='data.dataTree'/>
+    </div>
+</template>
+<script lang="ts">
+import {
+    defineComponent,
+    onMounted
+} from 'vue'
+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,
+            msg,
+            data,
+            getDetail,
+            getEmployeeData
+        } = editRuleModule();
+        onMounted(() => {
+            if (msg.RuleId > 0) {
+                getDetail()
+            }
+            getEmployeeData()
+        })
+        return {
+            jumpBeforePage,
+            changeDialog,
+            data,
+        }
+    }
+
+})
+
+</script>
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    background-color: #f4f4f6;
+
+    .mt20 {
+        margin-top: 20px;
+    }
+}
+
+.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;
+    margin-bottom: 50px;
+}
+
+.container {
+    margin: 0 auto;
+    width: 1087px;
+
+    .content-block {
+        padding: 30px 20px;
+        border-radius: 8px;
+        background-color: #fff;
+
+        .fission-title {
+            color: #000;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .fission-subtitle {
+            color: #000;
+            font-weight: bold;
+            margin-top: 15px;
+            margin-bottom: 15px;
+            font-size: 14px;
+        }
+
+        .departs {
+            .depart-title {
+                font-size: 14px;
+
+                .per {
+                    height: 16px;
+                    width: 2px;
+                    display: inline-block;
+                    margin: 0 15px;
+                    background: #d7d7d7;
+                }
+            }
+        }
+    }
+}
+</style>

src/router/routes.ts

@@ -34,7 +34,11 @@ const routes: RouteRecordRaw[] = [
       }
     ]
   },
-
+  // 编辑规则
+  {
+    path: '/editor/editRule',
+    component: () => import('@/pages/editor/editRule.vue')
+  },
   {
     path: '/auth/login',
     component: () => import('@/pages/auth/login.vue')