1

package.json

@@ -22,6 +22,7 @@
     "lockr": "^0.9.0-beta.0",
     "lodash": "^4.17.21",
     "mermaid": "^8.12.1",
+    "naive-ui": "^2.21.2",
     "quasar": "^2.0.0",
     "quasar-tiptap-branch": "^1.8.1",
     "vue-i18n": "^9.0.0",

quasar.conf.js

@@ -29,7 +29,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
-    boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign'],
+    boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign','naiveUI'],
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.scss'],

src/components/common/Cascader.vue

@@ -245,7 +245,6 @@ export default {
             const index = checkbox.value.indexOf(checkVal)
             //父级id数组
             arr.map(e => {
-                
                 const child = e[props.optionChildren]
                 if (checkVal == e[props.optionValue]) {
                     if (index > -1) {

src/components/common/departmentStaff.vue

@@ -10,7 +10,7 @@
     >
         <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>
+                <div class="text-h6">选择部门 <span v-if="showType===0">/员工</span></div>
                 <q-space />
                 <q-btn icon="close" flat round dense v-close-popup />
             </q-card-section>
@@ -50,7 +50,7 @@
                         />
                     </div>
                     <div class="col-6 q-px-sm">
-                        <div class="list-title">已选择的部门或成员</div>
+                        <div class="list-title">已选择的部门<span v-if="showType===0">或成员</span></div>
                         <div class="q-pb-none col-12 list-box">
                             <div v-for="(item,index) in selectArray" :key="index" class="list-item">
                                 <div class="flex-center">
@@ -75,7 +75,7 @@
 
             <q-card-actions align="right" class="bg-white text-teal">
                 <q-btn flat label="取消" v-close-popup />
-                <q-btn color="primary" @click="goback" label="确定" />
+                <q-btn color="primary" @click="goback" flat label="确定" />
             </q-card-actions>
         </q-card>
     </q-dialog>

src/module/customer/customerModule.ts

@@ -5,9 +5,16 @@
 // import { UserGetter } from '@/store/modules/user/getters'
 // import { dispatchAction, getStoreGetter, setStoreState } from '@/store/utils'
 // import message from '@/utils/message'
-import { StaticConfig } from '@/config/app'
-import { ref, reactive } from 'vue'
-import customer2, { CutomerParams } from '@/api/customer2'
+import {
+  StaticConfig
+} from '@/config/app'
+import {
+  ref,
+  reactive
+} from 'vue'
+import customer2, {
+  CutomerParams
+} from '@/api/customer2'
 interface Params {
   selectVal: string
   selectWay: number
@@ -19,22 +26,23 @@ interface customParams {
   customWay: number
 }
 interface friendParams {
-  frendArr: Array<number>
-  wayArr: Array<number>
+  frendArr: Array < number >
+    wayArr: Array < number >
 }
 interface memberParams {
   newId: number | string
   DataType: number | string
   DeptId: number
-  ChildList: Array<any>
+  ChildList: Array < any >|null
 }
 interface dataParams {
-  columns: Array<any>
-  dataList: Array<any>
-  WayList: Array<any>
-  selected: Array<any>
-  EmployeeList: Array<memberParams>
-  defaultArray: Array<number|string>
+  columns: Array < any >
+    dataList: Array < any >
+    WayList: Array < any >
+    selected: Array < any >
+    EmployeeList: Array < memberParams >
+    defaultArray: Array < number | string >
+    CascaderValue: Array < any > | string
 }
 const CustomerModule = () => {
   //调用方法
@@ -64,15 +72,21 @@ const CustomerModule = () => {
       if (data.EmployeeList.length == 0) return
       data.EmployeeList.forEach(x => {
         x.newId = x.DataType + '-' + x.DeptId
-        if (x.ChildList && x.ChildList.length > 0) {
-          getChildList(x.ChildList)
-        }
+          if (x.DataType === 2) {
+            x.ChildList = null
+          }
+          if (x.ChildList && x.ChildList.length > 0) {
+            getChildList(x.ChildList)
+          }
       })
     })
   }
-  const getChildList = (ChildList: Array<any>) => {
+  const getChildList = (ChildList: Array < any > ) => {
     ChildList.forEach(x => {
       x.newId = x.DataType + '-' + x.DeptId
+      if (x.DataType === 2) {
+        x.ChildList = null
+      }
       if (x.ChildList && x.ChildList.length > 0) {
         getChildList(x.ChildList)
       }
@@ -85,31 +99,76 @@ const CustomerModule = () => {
   })
   //日期对象
   // const daySelect =
-  const data = reactive<dataParams>({
-    columns: [
-      {
+  const data = reactive < dataParams > ({
+    columns: [{
         name: 'CustomerName',
         label: '客户',
         field: 'CustomerName',
         align: 'left'
       },
-      { name: 'StageName', align: 'center', field: 'StageName', label: '客户阶段' },
-      { name: 'LableList', label: '客户标签', field: 'LableList', align: 'left' },
-      { name: 'carbs', label: '内容标签', field: 'carbs', align: 'left' },
-      { name: 'CreateTime', label: '创建时间', field: 'CreateTime', align: 'left' },
-      { name: 'sodium', label: '负责人', field: 'sodium', align: 'left' },
-      { name: 'LastFollowUpTime', label: '上次跟进', field: 'LastFollowUpTime', align: 'left' },
-      { name: 'Source', label: '渠道活码来源', field: 'Source', align: 'left' },
+      {
+        name: 'StageName',
+        align: 'center',
+        field: 'StageName',
+        label: '客户阶段'
+      },
+      {
+        name: 'LableList',
+        label: '客户标签',
+        field: 'LableList',
+        align: 'left'
+      },
+      {
+        name: 'carbs',
+        label: '内容标签',
+        field: 'carbs',
+        align: 'left'
+      },
+      {
+        name: 'CreateTime',
+        label: '创建时间',
+        field: 'CreateTime',
+        align: 'left'
+      },
+      {
+        name: 'sodium',
+        label: '负责人',
+        field: 'sodium',
+        align: 'left'
+      },
+      {
+        name: 'LastFollowUpTime',
+        label: '上次跟进',
+        field: 'LastFollowUpTime',
+        align: 'left'
+      },
+      {
+        name: 'Source',
+        label: '渠道活码来源',
+        field: 'Source',
+        align: 'left'
+      },
       // { name: 'num', label: '7日内客户回复消息数', align: 'left'},
       // { name: 'num', label: '7日内员工发送消息数', align: 'left'},
-      { name: 'FriendTime', label: '添加好友时间', field: 'FriendTime', align: 'left' },
-      { name: 'CheckInNum', label: '签到拜访', field: 'CheckInNum', align: 'left' }
+      {
+        name: 'FriendTime',
+        label: '添加好友时间',
+        field: 'FriendTime',
+        align: 'left'
+      },
+      {
+        name: 'CheckInNum',
+        label: '签到拜访',
+        field: 'CheckInNum',
+        align: 'left'
+      }
     ],
     selected: [],
     dataList: [],
     WayList: [],
     EmployeeList: [],
-    defaultArray: [] //
+    defaultArray: [], //
+    CascaderValue: ""
   })
   const msg = reactive({
     PageIndex: 1,
@@ -133,8 +192,7 @@ const CustomerModule = () => {
     OrderBy: 1, //排序
     AddCondition: 0 //查询条件
   })
-  const TypeList = reactive([
-    {
+  const TypeList = reactive([{
       Name: '企业',
       Id: 0
     },
@@ -151,8 +209,7 @@ const CustomerModule = () => {
       Id: 3
     }
   ])
-  const TimeList = reactive([
-    {
+  const TimeList = reactive([{
       Name: '客户创建时间',
       Id: 1
     },
@@ -162,8 +219,7 @@ const CustomerModule = () => {
     }
   ])
   //自定义客户筛选
-  const CustomList = reactive([
-    {
+  const CustomList = reactive([{
       Name: '好友关系',
       Id: 1
     },
@@ -176,8 +232,7 @@ const CustomerModule = () => {
       Id: 3
     }
   ])
-  const friendOptions = reactive([
-    {
+  const friendOptions = reactive([{
       Name: '好友客户',
       Id: 1
     },
@@ -190,17 +245,17 @@ const CustomerModule = () => {
       Id: 3
     }
   ])
-  const SeletObj = reactive<Params>({
+  const SeletObj = reactive < Params > ({
     selectVal: '',
     selectWay: 0
   })
-  const TimeObj = reactive<timeParams>({
+  const TimeObj = reactive < timeParams > ({
     timeWay: 1
   })
-  const customSetObj = reactive<customParams>({
+  const customSetObj = reactive < customParams > ({
     customWay: 1
   })
-  const friendObj = reactive<friendParams>({
+  const friendObj = reactive < friendParams > ({
     frendArr: [],
     wayArr: []
   })
@@ -229,34 +284,59 @@ const CustomerModule = () => {
     getCustomerList(msg)
   }
   const getChild = (deptArray: any) => {
-    //数据处理 获取夏利是 1-2 前面代表部门还是人员  后面是原生ID
-    if(deptArray._value){
-      const Type = deptArray._value.split('-')[0];
-      const MyId = deptArray._value.split('-')[1]  
+    //数据处理 获取夏利是 1-2 前面代表部门还是人员 后面是原生ID
+    if (deptArray._value) {
+      const Type = deptArray._value.split('-')[0]
+      const MyId = deptArray._value.split('-')[1]
       //1部门
-      if(Type==1){
+      if (Type == 1) {
         msg.DeptId = MyId
       }
       //2人员
-      if(Type==2){
+      if (Type == 2) {
         msg.EmpId = MyId
       }
-    }else{
-      msg.DeptId=0;
-      msg.EmpId=0;
+    } else {
+      msg.DeptId = 0
+      msg.EmpId = 0
     }
     getCustomerList(msg)
   }
-  const getCkedFriend = (e:any)=>{
-    const Ids = e.map((x:any)=>{
-      return x.Id
-    }).toString();
-    msg.Q_Friends = Ids;
+  const getCkedFriend = (e: any) => {
+    const Ids = e
+      .map((x: any) => {
+        return x.Id
+      })
+      .toString()
+    msg.Q_Friends = Ids
     getCustomerList(msg)
   }
+  const CascaderUpdateValue = (val) => {
+    console.log('val', val)
+  }
 
-  return { getCustomerList, getWayList, getEmployeeData, data, msg, title, TypeList, SeletObj, getSelectWay, TimeObj, TimeList, changePage, pagination, 
-    CustomList, customSetObj, friendObj, friendOptions, getChild, getCkedFriend}
+  return {
+    getCustomerList,
+    getWayList,
+    getEmployeeData,
+    data,
+    msg,
+    title,
+    TypeList,
+    SeletObj,
+    getSelectWay,
+    TimeObj,
+    TimeList,
+    changePage,
+    pagination,
+    CustomList,
+    customSetObj,
+    friendObj,
+    friendOptions,
+    getChild,
+    getCkedFriend,
+    CascaderUpdateValue
+  }
 }
 
 export default CustomerModule

src/pages/customer/components/CustomerOperation.vue

 <template>
-    <div class="q-mt-md q-pa-md page flex">
-        <div class="customer-operation-category">
-            <div
-                v-for="(item) in leftList"
-                :key="item.Id"
-                :class="{ 'active': curItem == item.Id }"
-                class="customer-operation-category--item"
-                @click="changeActive(item)"
-            >{{ item.Name }}</div>
+  <div class="q-mt-md q-pa-md CustomerOperation flex">
+    <div class="customer-operation-category">
+      <div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }"
+        class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div>
+    </div>
+    <div class="customer-operation-content">
+      <div v-if="curItem == 1" class="row">
+        <div class="col-2 content-left">领取公海客户:</div>
+        <div class="col-10">
+          <div class="flex items-center">
+            <q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" />
+            开启后，员工领取公海客户时需要企微端设置的部门上级审批，审批同意后才可领取
+          </div>
+          <div class="flex items-center">
+            <q-toggle v-model="data.PublicGetDept" false-value="-1" />以下部门允许领取公海客户
+            <q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
+          </div>
+          <div>
+            <div v-for="item in items" :key="item.id">{{ item }}</div>
+          </div>
         </div>
-        <div class="customer-operation-content">
-            <div v-if="curItem == 1" class="row">
-                <div class="col-2 content-left">领取公海客户:</div>
-                <div class="col-10">
-                    <div class="flex items-center">
-                        <q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" />开启后，员工领取公海客户时需要企微端设置的部门上级审批，审批同意后才可领取
-                    </div>
-                    <div class="flex items-center">
-                        <q-toggle v-model="data.PublicGetDept" false-value="-1" />以下部门允许领取公海客户
-                        <q-btn color="primary" label="修改" size="xs" @click="checkedPublicGetDept" />
-                    </div>
-                    <div>
-                        <div v-for="item in items" :key="item.id">{{ item }}</div>
-                    </div>
-                </div>
+      </div>
+      <div v-if="curItem == 2">
+        <div class="row">
+          <div class="col-2 content-left">可放弃客户:</div>
+          <div class="col-10">
+            <div class="q-gutter-sm">
+              <q-radio v-model="data.AbandonType" :val="1" label="全部客户" />
+              <q-radio v-model="data.AbandonType" :val="2" label="部分客户" />
             </div>
-            <div v-if="curItem == 2">
-                <div class="row">
-                    <div class="col-2 content-left">可放弃客户:</div>
-                    <div class="col-10">
-                        <div class="q-gutter-sm">
-                            <q-radio v-model="data.AbandonType" :val="1" label="全部客户" />
-                            <q-radio v-model="data.AbandonType" :val="2" label="部分客户" />
-                        </div>
-                        <div v-if="data.AbandonType == 2">x</div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-2 content-left">可操作员工:</div>
-                    <div class="col-10">
-                        <div class="flex items-center">
-                            <q-toggle v-model="data.AbandonDept" false-value="-1" />以下部门允许将客户放弃到公海
-                            <q-btn
-                                color="primary"
-                                label="修改"
-                                size="xs"
-                                @click="checkedPublicGetDept"
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-2 content-left">放弃后审核:</div>
-                    <div class="col-10">
-                        <div class="flex items-center">
-                            <q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-2 content-left" style="padding-top:15px">放弃原因:</div>
-                    <div class="col-10">
-                        <draggable v-model="data.AbandonReasonList" tag="div" item-key="Id">
-                            <template #item="{ element }">
-                                <div class="flex items-center">
-                                    <i
-                                        class="iconfont icon-drag"
-                                        style="font-size: 20px;color: #777;"
-                                    ></i>
-                                    <div class="AbandonReasonItem flex items-center">{{ element }}</div>
-                                </div>
-                            </template>
-                        </draggable>
-                    </div>
+            <div v-if="data.AbandonType == 2">
+              <requestGroup />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-2 content-left">可操作员工:</div>
+          <div class="col-10">
+            <div class="flex items-center">
+              <q-toggle v-model="data.AbandonDept" false-value="-1" />以下部门允许将客户放弃到公海
+              <q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-2 content-left">放弃后审核:</div>
+          <div class="col-10">
+            <div class="flex items-center">
+              <q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-2 content-left" style="padding-top: 15px">放弃原因:</div>
+          <div class="col-10">
+            <draggable v-model="data.AbandonReasonList" tag="div" item-key="Id">
+              <template #item="{ element }">
+                <div class="flex items-center">
+                  <i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i>
+                  <div class="AbandonReasonItem flex items-center">{{ element }}</div>
                 </div>
+              </template>
+            </draggable>
+          </div>
+        </div>
+      </div>
+      <div v-if="curItem == 3" class="row">
+        <div class="col-2 content-left">申请成为协作人：</div>
+        <div class="col-10">
+          <div class="flex items-center">
+            <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
+            <q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
+            </div>
+          <div>
+            <div v-for="item in items" :key="item.id">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+      <div v-if="curItem == 4" class="row">
+        <div class="col-2 content-left">添加协作人：</div>
+        <div class="col-10">
+          <div class="flex items-center">
+            <q-toggle v-model="data.AddTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
+            <q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
             </div>
+          <div>
+            <div v-for="item in items" :key="item.id">{{ item }}</div>
+          </div>
+          <div class="flex">
+              <q-checkbox v-model="data.AddTeamDept" label="协作人被移除后（若该协作人已添加客户为好友），自动创建新的客户" />
+          </div>
         </div>
-        <departmentStaff
-            v-model="showDptDialog"
-            :defaultArray="defaultDpt"
-            nodeKey="newId"
-            labelKey="DeptName"
-            childrenKey="ChildList"
-            strategy="leaf"
-            :treeData="DptDataTree"
-            @select="getdpt"
-        />
+      </div>
     </div>
+    <departmentStaff v-model="showDptDialog" :defaultArray="defaultDpt" nodeKey="newId" :showType="1"
+      labelKey="DeptName" childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" />
+  </div>
 </template>
 <script lang="ts">
-import {
+  import {
     ref,
     toRefs,
     reactive,
     defineComponent,
     onMounted
-} from 'vue'
-import customerService from '@/api/customer'
-// import customerService2 from '@/api/customer2'
-import departmentStaff from '@/components/common/departmentStaff.vue'
-import draggable from "vuedraggable";
-export default defineComponent({
+  } from 'vue'
+  import customerService from '@/api/customer'
+  // import customerService2 from '@/api/customer2'
+  import departmentStaff from '@/components/common/departmentStaff.vue'
+  import requestGroup from '@/components/customer/request-group.vue'
+  import draggable from 'vuedraggable'
+  export default defineComponent({
     components: {
-        departmentStaff,
-        draggable
+      departmentStaff,
+      requestGroup,
+      draggable
     },
     setup() {
-        const leftList = ref([
-            {
-                Id: 1,
-                Name: "领取公海客户"
-            }, {
-                Id: 2,
-                Name: "放弃到公海"
-            }, {
-                Id: 3,
-                Name: "申请成为协作人"
-            }, {
-                Id: 4,
-                Name: "添加协作人"
-            }, {
-                Id: 5,
-                Name: "转移客户"
-            }, {
-                Id: 6,
-                Name: "删除客户跟进记录"
-            }, {
-                Id: 7,
-                Name: "签到拜访设置"
-            }, {
-                Id: 8,
-                Name: "创建企业"
-            }, {
-                Id: 9,
-                Name: "写跟进"
+      const leftList = ref([{
+          Id: 1,
+          Name: '领取公海客户'
+        },
+        {
+          Id: 2,
+          Name: '放弃到公海'
+        },
+        {
+          Id: 3,
+          Name: '申请成为协作人'
+        },
+        {
+          Id: 4,
+          Name: '添加协作人'
+        },
+        {
+          Id: 5,
+          Name: '转移客户'
+        },
+        {
+          Id: 6,
+          Name: '删除客户跟进记录'
+        },
+        {
+          Id: 7,
+          Name: '签到拜访设置'
+        },
+        {
+          Id: 8,
+          Name: '创建企业'
+        },
+        {
+          Id: 9,
+          Name: '写跟进'
+        }
+      ])
+      let curItem = ref(1)
+      let data = reactive({
+        data: {
+          IsPublicAudit: 1,
+          PublicGetDept: -1,
+          AbandonType: 1
+        },
+        showDptDialog: false,
+        defaultDpt: [],
+        DptDataTree: []
+      })
+      const changeActive = item => {
+        curItem.value = item.Id
+      }
+      const getConfig = () => {
+        customerService.getCustomerConfig({}).then(res => {
+          console.log('CONFIG', res.data.Data)
+          data.data = res.data.Data
+        })
+      }
+      const getDptTree = () => {
+        customerService.getDeptTree({}).then(res => {
+          console.log('DptDataTree', res.data.Data)
+          data.DptDataTree = res.data.Data
+          // 重组唯一id
+          if (data.DptDataTree.length == 0) return
+          data.DptDataTree.forEach((x: any) => {
+            x.newId = x.DataType + '-' + x.DeptId
+            if (x.ChildList && x.ChildList.length > 0) {
+              getChildList(x.ChildList)
             }
-
-        ])
-        let curItem = ref(1)
-        let data = reactive({
-            data: {
-                IsPublicAudit: 1,
-                PublicGetDept: -1,
-                AbandonType: 1,
-            },
-            showDptDialog: false,
-            defaultDpt: [],
-            DptDataTree: []
+          })
         })
-        const changeActive = (item) => {
-            curItem.value = item.Id
-        }
-        const getConfig = () => {
-            customerService.getCustomerConfig({}).then((res) => {
-                console.log('CONFIG', res.data.Data)
-                data.data = res.data.Data
-            })
-        }
-        const getDptTree = () => {
-            customerService.getDeptTree({}).then((res) => {
-                console.log('DptDataTree', res.data.Data)
-                data.DptDataTree = res.data.Data
-                // 重组唯一id
-                if (data.DptDataTree.length == 0) return
-                data.DptDataTree.forEach((x: any) => {
-                    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 getdpt = (val) => {
-            console.log('dpt', val)
-        }
-        //领取公海客户
-        const checkedPublicGetDept = () => {
-            data.showDptDialog = true
-        }
-        const setCustomerConfig = () => {
-            customerService.setCustomerConfig(data.data).then((res) => {
-                console.log('set', res.data.Data)
-            })
-        }
-        onMounted(() => {
-            getDptTree()
-            getConfig()
+      }
+      const getChildList = (ChildList: Array < any > ) => {
+        ChildList.forEach(x => {
+          x.newId = x.DataType + '-' + x.DeptId
+          if (x.ChildList && x.ChildList.length > 0) {
+            getChildList(x.ChildList)
+          }
         })
-        return {
-            leftList,
-            curItem,
-            changeActive,
-            ...toRefs(data),
-            getdpt,
-            checkedPublicGetDept,
-            setCustomerConfig,
-        }
+      }
+      const getdpt = val => {
+        console.log('dpt', val)
+      }
+      //领取公海客户
+      const checkedPublicGetDept = () => {
+        data.showDptDialog = true
+      }
+      const setCustomerConfig = () => {
+        customerService.setCustomerConfig(data.data).then(res => {
+          console.log('set', res.data.Data)
+        })
+      }
+      onMounted(() => {
+        getDptTree()
+        getConfig()
+      })
+      return {
+        leftList,
+        curItem,
+        changeActive,
+        ...toRefs(data),
+        getdpt,
+        checkedPublicGetDept,
+        setCustomerConfig
+      }
     }
-})
+  })
+
 </script>
 <style lang="scss" scoped>
-.page {
+  .CustomerOperation {
     background-color: rgb(243, 246, 249);
-}
-.customer-operation-category {
+  }
+
+  .customer-operation-category {
     margin-right: 10px;
     width: 200px;
     flex: none;
@@ -219,32 +237,37 @@ export default defineComponent({
     border-radius: 8px;
     padding: 15px 0;
     overflow: auto;
+
     .customer-operation-category--item {
-        padding: 15px 25px;
-        cursor: pointer;
-        font-weight: 600;
-        user-select: none;
-        color: #333;
-        font-size: 14px;
+      padding: 15px 25px;
+      cursor: pointer;
+      font-weight: 600;
+      user-select: none;
+      color: #333;
+      font-size: 14px;
     }
+
     .active {
-        background-color: #eaf0ff;
-        color: #3470ff;
+      background-color: #eaf0ff;
+      color: #3470ff;
     }
-}
-.customer-operation-content {
+  }
+
+  .customer-operation-content {
     background: #fff;
     flex: 1;
     border-radius: 8px;
     padding: 25px;
     overflow: auto;
-}
-.content-left {
+  }
+
+  .content-left {
     line-height: 40px;
     font-weight: 600;
     white-space: nowrap;
-}
-.AbandonReasonItem {
+  }
+
+  .AbandonReasonItem {
     width: 453px;
     height: 50px;
     line-height: 50px;
@@ -253,5 +276,6 @@ export default defineComponent({
     border-radius: 5px;
     border: 1px solid #d7d7d7;
     margin: 10px;
-}
-</style>
\ No newline at end of file
+  }
+
+</style>

src/pages/customerManage/customer.vue

@@ -4,58 +4,26 @@
       <div class="page-search row items-center">
         <div class="col row wrap q-mr-lg q-col-gutter-md">
           <div class="col-3">
-            <q-input
-              filled
-              v-model="SeletObj.selectVal"
-              clearable
-              @clear="getCustomerList(msg)"
-              @update:model-value="getSelectWay(), getCustomerList(msg)"
-              label="请输入"
-            >
+            <q-input filled v-model="SeletObj.selectVal" clearable @clear="getCustomerList(msg)"
+              @update:model-value="getSelectWay(), getCustomerList(msg)" label="请输入">
               <template #before>
-                <q-select
-                  filled
-                  style="width:120px;"
-                  @update:model-value="getSelectWay"
-                  option-value="Id"
-                  option-label="Name"
-                  v-model="SeletObj.selectWay"
-                  :options="TypeList"
-                  emit-value
-                  map-options
-                  label="选择类型"
-                />
+                <q-select filled style="width:120px;" @update:model-value="getSelectWay" option-value="Id"
+                  option-label="Name" v-model="SeletObj.selectWay" :options="TypeList" emit-value map-options
+                  label="选择类型" />
               </template>
             </q-input>
           </div>
           <div class="col-3">
-            <q-select
-              filled
-              option-value="Id"
-              option-label="Name"
-              v-model="TimeObj.timeWay"
-              :options="TimeList"
-              emit-value
-              map-options
-            />
+            <q-select filled option-value="Id" option-label="Name" v-model="TimeObj.timeWay" :options="TimeList"
+              emit-value map-options />
           </div>
           <template v-if="TimeObj.timeWay == 1">
             <div class="col-3">
-              <q-input
-                filled
-                v-model="msg.CreateSTime"
-                mask="date"
-                @update:model-value="getCustomerList(msg)"
-                placeholder="创建时间"
-              >
+              <q-input filled v-model="msg.CreateSTime" mask="date" @update:model-value="getCustomerList(msg)"
+                placeholder="创建时间">
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      cover
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
+                    <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                       <q-date v-model="msg.CreateSTime">
                         <div class="row items-center justify-end">
                           <q-btn v-close-popup label="Close" color="primary" flat />
@@ -67,21 +35,11 @@
               </q-input>
             </div>
             <div class="col-3">
-              <q-input
-                filled
-                v-model="msg.CreateETime"
-                mask="date"
-                @range-end="getCustomerList(msg)"
-                placeholder="创建时间"
-              >
+              <q-input filled v-model="msg.CreateETime" mask="date" @range-end="getCustomerList(msg)"
+                placeholder="创建时间">
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      cover
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
+                    <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                       <q-date v-model="msg.CreateETime">
                         <div class="row items-center justify-end">
                           <q-btn v-close-popup label="Close" color="primary" flat />
@@ -98,12 +56,7 @@
               <q-input filled v-model="msg.FriendSTime" mask="date" placeholder="添加时间">
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      cover
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
+                    <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                       <q-date v-model="msg.FriendSTime">
                         <div class="row items-center justify-end">
                           <q-btn v-close-popup label="Close" color="primary" flat />
@@ -118,12 +71,7 @@
               <q-input filled v-model="msg.FriendETime" mask="date" placeholder="添加时间">
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy
-                      ref="qDateProxy"
-                      cover
-                      transition-show="scale"
-                      transition-hide="scale"
-                    >
+                    <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                       <q-date v-model="msg.FriendETime">
                         <div class="row items-center justify-end">
                           <q-btn v-close-popup label="Close" color="primary" flat />
@@ -136,40 +84,16 @@
             </div>
           </template>
           <div class="col-3">
-            <q-select
-              filled
-              option-value="Id"
-              option-label="Name"
-              v-model="customSetObj.customWay"
-              :options="CustomList"
-              emit-value
-              map-options
-            />
+            <q-select filled option-value="Id" option-label="Name" v-model="customSetObj.customWay"
+              :options="CustomList" emit-value map-options />
           </div>
           <div class="col-3" v-if="customSetObj.customWay == 1">
-            <q-select
-              filled
-              label="请选择"
-              use-chips
-              @update:model-value="getCkedFriend"
-              option-value="Id"
-              option-label="Name"
-              :options="friendOptions"
-              v-model="friendObj.frendArr"
-              multiple
-            />
+            <q-select filled label="请选择" use-chips @update:model-value="getCkedFriend" option-value="Id"
+              option-label="Name" :options="friendOptions" v-model="friendObj.frendArr" multiple />
           </div>
           <div class="col-3" v-if="customSetObj.customWay == 2">
-            <q-select
-              filled
-              label="请选择"
-              use-chips
-              option-value="Id"
-              option-label="Name"
-              :options="data.WayList"
-              v-model="friendObj.wayArr"
-              multiple
-            />
+            <q-select filled label="请选择" use-chips option-value="Id" option-label="Name" :options="data.WayList"
+              v-model="friendObj.wayArr" multiple />
           </div>
           <div class="col-3" v-if="customSetObj.customWay == 3">
             <q-input filled v-model="msg.Q_NotFollowUpDay" label="几天未跟进"></q-input>
@@ -185,14 +109,12 @@
               tipText="选择部门/人员"
               @getChild="getChild"
             ></selectTree>-->
-            <Cascader
-              :options="data.EmployeeList"
-              optionLabel="DeptName"
-              optionValue="newId"
-              optionChildren="ChildList"
-              label="选择部门/人员"
-              :multiple="true"
-            />
+            <n-cascader v-model:value="data.CascaderValue" clearable placeholder="选择部门/人员" check-strategy="all"
+              value-field="newId" label-field="DeptName" size="large" :show-path="false" max-tag-count="responsive"
+              :options="data.EmployeeList" cascade children-field="ChildList"
+              @update:value="CascaderUpdateValue" />
+            <!-- <Cascader :options="data.EmployeeList" optionLabel="DeptName" optionValue="newId" optionChildren="ChildList"
+              label="选择部门/人员" :multiple="true" /> -->
           </div>
           <div class="col-3">
             <q-btn color="primary" size="sm" label="导入" />
@@ -201,14 +123,8 @@
         </div>
       </div>
       <div class="page-content" style="margin-top:20px;">
-        <q-table
-          :rows="data.dataList"
-          :columns="data.columns"
-          class="my-sticky-header-column-table"
-          row-key="name"
-          v-model:pagination="pagination"
-          selection="multiple"
-        >
+        <q-table :rows="data.dataList" :columns="data.columns" class="my-sticky-header-column-table" row-key="name"
+          v-model:pagination="pagination" selection="multiple">
           <template v-slot:body-cell-CustomerName="props">
             <q-td auto-width :props="props">
               <div class="cutomer_Header">
@@ -216,10 +132,7 @@
                   <img :src="props.row.WeChatPhoto" style="width:100%;height:100%" />
                 </div>
                 <div>
-                  <div
-                    class="cutomer_Free"
-                    @click="getCustomInfo(props)"
-                  >{{ props.row.CustomerName }}</div>
+                  <div class="cutomer_Free" @click="getCustomInfo(props)">{{ props.row.CustomerName }}</div>
                   <div class="customer_Wechat">{{ props.row.WeChatName }}</div>
                 </div>
               </div>
@@ -231,14 +144,8 @@
             </q-td>
           </template>
           <template v-slot:bottom>
-            <q-pagination
-              class="full-width justify-end"
-              v-model="msg.PageIndex"
-              color="primary"
-              :max="msg.pageCount"
-              :input="true"
-              @update:model-value="changePage"
-            />
+            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="msg.pageCount"
+              :input="true" @update:model-value="changePage" />
           </template>
         </q-table>
         <customRight v-if="isShowCustom" :CustomerId="CustomerId" @close="closeCustomer"></customRight>
@@ -247,109 +154,119 @@
   </div>
 </template>
 <script lang='ts'>
-import { ref, defineComponent, onMounted } from 'vue'
-import CustomerModule from '@/module/customer/customerModule'
-// import selectTree from '@/components/common/selectTree.vue'
-import customRight from '@/components/common/customRight.vue'
-import Cascader from "@/components/common/Cascader.vue"
-export default defineComponent({
-  components: {
-    // selectTree,
-    customRight,
-    Cascader
-  },
-  setup() {
-    let {
-      getCustomerList,
-      getWayList,
-      data,
-      msg,
-      title,
-      TypeList,
-      SeletObj,
-      getSelectWay,
-      TimeObj,
-      TimeList,
-      changePage,
-      pagination,
-      CustomList,
-      customSetObj,
-      friendObj,
-      friendOptions,
-      getEmployeeData,
-      getChild,
-      getCkedFriend
-    } = CustomerModule()
-    let isShowCustom = ref(false)
-    const closeCustomer = () => {
-      isShowCustom.value = false;
-    }
+  import {
+    ref,
+    defineComponent,
+    onMounted
+  } from 'vue'
+  import CustomerModule from '@/module/customer/customerModule'
+  // import selectTree from '@/components/common/selectTree.vue'
+  import customRight from '@/components/common/customRight.vue'
+  // import Cascader from "@/components/common/Cascader.vue"
+  export default defineComponent({
+    components: {
+      // selectTree,
+      customRight,
+      // Cascader
+    },
+    setup() {
+      let {
+        getCustomerList,
+        getWayList,
+        data,
+        msg,
+        title,
+        TypeList,
+        SeletObj,
+        getSelectWay,
+        TimeObj,
+        TimeList,
+        changePage,
+        pagination,
+        CustomList,
+        customSetObj,
+        friendObj,
+        friendOptions,
+        getEmployeeData,
+        getChild,
+        getCkedFriend,
+        CascaderUpdateValue
+      } = CustomerModule()
+      let isShowCustom = ref(false)
+      const closeCustomer = () => {
+        isShowCustom.value = false;
+      }
 
-    let CustomerId = ref(0);
-    const getCustomInfo = (item) => {
-      CustomerId.value = item.row.Id;
-      isShowCustom.value = true;
-    }
+      let CustomerId = ref(0);
+      const getCustomInfo = (item) => {
+        CustomerId.value = item.row.Id;
+        isShowCustom.value = true;
+      }
 
-    onMounted(() => {
-      getCustomerList(msg)
-      getWayList({})
-      getEmployeeData({})
-    })
-    return {
-      getCustomerList,
-      getWayList,
-      data,
-      msg,
-      title,
-      TypeList,
-      SeletObj,
-      getSelectWay,
-      TimeObj,
-      TimeList,
-      changePage,
-      pagination,
-      CustomList,
-      customSetObj,
-      friendObj,
-      friendOptions,
-      getEmployeeData,
-      getChild,
-      getCkedFriend,
-      isShowCustom,
-      closeCustomer,
-      CustomerId,
-      getCustomInfo
+      onMounted(() => {
+        getCustomerList(msg)
+        getWayList({})
+        getEmployeeData({})
+      })
+      return {
+        getCustomerList,
+        getWayList,
+        data,
+        msg,
+        title,
+        TypeList,
+        SeletObj,
+        getSelectWay,
+        TimeObj,
+        TimeList,
+        changePage,
+        pagination,
+        CustomList,
+        customSetObj,
+        friendObj,
+        friendOptions,
+        getEmployeeData,
+        getChild,
+        getCkedFriend,
+        isShowCustom,
+        closeCustomer,
+        CustomerId,
+        getCustomInfo,
+        CascaderUpdateValue
+      }
     }
-  }
-})
+  })
 
 </script>
 <style lang="scss">
-.customer .q-field__before {
-  padding-right: 0 !important;
-}
+  .customer .q-field__before {
+    padding-right: 0 !important;
+  }
+
 </style>
 <style lang="scss" scoped>
-.cutomer_Header {
-  display: flex;
-}
+  .cutomer_Header {
+    display: flex;
+  }
 
-.customer_Img {
-  width: 40px;
-  height: 40px;
-  border-radius: 5px;
-  overflow: hidden;
-  margin-right: 14px;
-}
+  .customer_Img {
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-right: 14px;
+  }
 
-.cutomer_Free {
-  color: #3470ff;
-  font-size: 14px;
-  cursor: pointer;
-}
+  .cutomer_Free {
+    color: #3470ff;
+    font-size: 14px;
+    cursor: pointer;
+  }
 
-.customer_Wechat {
-  color: #9999a8;
+  .customer_Wechat {
+    color: #9999a8;
+  }
+.n-base-selection-label{
+  height: 56px;
 }
 </style>