From 1f6893d24ba87313d4114c68813073ead53b2e12 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 30 八月 2024 09:26:22 +0800
Subject: [PATCH] 群发新通讯录懒加载

---
 src/views/Admin/massSend.vue |  246 +++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 206 insertions(+), 40 deletions(-)

diff --git a/src/views/Admin/massSend.vue b/src/views/Admin/massSend.vue
index e19d961..ad09f01 100644
--- a/src/views/Admin/massSend.vue
+++ b/src/views/Admin/massSend.vue
@@ -88,28 +88,49 @@
         <a-col :span="12" v-if="isNewTxl == 1">
           <div style="display:flex;justify-content: space-between;align-items: center;">
             <b>新通讯录接收人:</b>
-            <a-checkbox :checked="checkTxlAll1" @change="checkTxlChange1">
-              全选
-            </a-checkbox>
+<!--            <a-checkbox :checked="checkTxlAll1" @change="checkTxlChange1">-->
+<!--              全选-->
+<!--            </a-checkbox>-->
           </div>
           <a-form-model-item prop="txlUsers">
             <a-tree-select
-                show-search
-                tree-checkable
-                style="width: 100%"
+                @change="onChangeUser"
                 v-model="form.txlUsers"
-                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-                placeholder="选择新通讯录接收人"
-                allow-clear
-                multiple
-                :maxTagCount="3"
-                @change="onTxlChanges1"
-                @search="onTxlSearch"
-                @select="onTxlSelect"
+                tree-checkable
                 :tree-data="addressBook"
-                :replaceFields="replaceTxlFields"
+
+                :replaceFields="{
+                 title: 'name', //  == 下拉框显示值 ==
+                 children: 'children',
+                 value: 'id'
+               }"
+                search-placeholder="请选择"
+                class="color-select"
+                :maxTagCount="3"
+                style="min-width: 100%"
+                :dropdownStyle="{ width: '600px' }"
+                :dropdownMatchSelectWidth="false"
+                treeNodeLabelProp="label"
+                :load-data="onLoadData"
             >
             </a-tree-select>
+<!--            <a-tree-select-->
+<!--                show-search-->
+<!--                tree-checkable-->
+<!--                style="width: 100%"-->
+<!--                v-model="form.txlUsers"-->
+<!--                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
+<!--                placeholder="选择新通讯录接收人"-->
+<!--                allow-clear-->
+<!--                multiple-->
+<!--                :maxTagCount="3"-->
+<!--                @change="onTxlChanges1"-->
+<!--                @search="onTxlSearch"-->
+<!--                @select="onTxlSelect"-->
+<!--                :tree-data="addressBook"-->
+<!--                :replaceFields="replaceTxlFields"-->
+<!--            >-->
+<!--            </a-tree-select>-->
           </a-form-model-item>
         </a-col>
         <a-col :span="12" v-else>
@@ -226,11 +247,15 @@
 import { TreeSelect } from 'ant-design-vue';
 import { massSend } from "@/api/send";
 import {getUserInfo} from "@/util/storage";
-import {getNewAddressBook} from "@/api/contactBook";
+import {getNewAddressBook, getNewAddressBookArea, getNewAddressBookUser} from "@/api/contactBook";
+import {debounce} from "@/util/debounce";
 	export default {
 		name: "massSend",
 		data() {
 			return {
+        newBookUsers: [],
+        currentLoadedKeys: [],
+        districtId: null,
         userInfo: getUserInfo(),
 				department: '自治区自然灾害综合监测预警中心',
         filteredOptions:[],
@@ -258,10 +283,10 @@
         oldAddressBook: [],
         addressBook: [],
         replaceTxlFields: {
-          children:'orgUsers',
+          children:'children',
           title:'name',
           key:'id',
-          value: 'id'
+          value: 'code'
         },
         replaceOldTxlFields: {
           children:'userInfos',
@@ -301,10 +326,12 @@
       const t = this
       t.unittype = getUserInfo().unittype
       t.form.publishingUnit = t.userInfo.company
+      t.districtId = t.userInfo.districtId
       t.getUserByGroup()
       t.getNewAddressBook()
       t.getSameLevel()
       t.getAreaUsers()
+
     },
     computed: {
 		},
@@ -336,26 +363,147 @@
       // 获取新通讯录
       async getNewAddressBook(){
         let t = this
-        let res = await getNewAddressBook()
+        let res = await getNewAddressBookArea()
         if(res.data.code == 100){
           if(res.data.data){
-            let bookData = []
-            bookData = res.data.data.filter(i=>i.orgUsers?.length>0)
-            for(let j of bookData){
-              j['name'] = j.orgName
-              j.id = j.id.toString() + '-' + '1'
-              j.orgUsers.map((item)=>{
-                item.name = item.name + '('+ item.company + ' ' + item.phone.replace(/(\d{3})\d{4}(\d+)/, "$1****$2") + ')'
-                return item
-              })
-            }
-            t.addressBook = bookData
+            const data = t.filterBranches(res.data.data,['自治区直辖县级行政区划'])
+            // console.log('  data',  data)
+            // let bookData = []
+            // bookData = res.data.data.filter(i=>i.orgUsers?.length>0)
+            // for(let j of bookData){
+            //   j['name'] = j.orgName
+            //   j.id = j.id.toString() + '-' + '1'
+            //   j.orgUsers.map((item)=>{
+            //     item.name = item.name + '('+ item.company + ' ' + item.phone.replace(/(\d{3})\d{4}(\d+)/, "$1****$2") + ')'
+            //     return item
+            //   })
+            // }
+            // t.addressBook = bookData
+            t.addressBook = this.getData(data,'book')
+            console.log('  t.addressBook',  t.addressBook)
           }else{
             console.log('暂无数据')
           }
         }else{
           this.$message.warning(res.data.msg);
         }
+      },
+      filterBranches(branches, targetNames) {
+        return branches.filter(branch => {
+          if (targetNames.includes(branch.name)) {
+            return false; // 过滤掉当前分支
+          }
+          if (branch.children && branch.children.length > 0) {
+            branch.children = this.filterBranches(branch.children, targetNames);
+          }
+          return true; // 保留当前分支
+        });
+      },
+      getData(data, dataIndex) {
+        const list = data.map((item, index) => {
+          if (item.children && item.children.length > 0) {
+            item.children = item.children.map((child) => {
+              return {
+                ...child,
+                type: 'children', // 添加标识符,判断是否为children/labels 给需求4使用
+                label: child.name, // a-tree-select 中为选中子节点的内容和展示字节点内容做区分
+              }
+            })
+            this.getData(item.children, dataIndex + '-' + index)
+          } else {
+            item.children = []
+          }
+
+          if (item.orgStructures && item.orgStructures.length > 0) {
+
+            item.children =  item.orgStructures.map((label) => {
+              return {
+                ...label,
+                id: label.orgId,
+                type: 'label',
+                label: label.orgName,
+                name: `${label.orgName}`, // 需求2
+              }
+            }).concat(
+                item.children.map((child) => {
+                  return {
+                    ...child,
+                    type: 'children',
+                    label: child.name,
+                  }
+                })
+            )
+
+
+            // item.children = item.children.map((child) => {
+            //       return {
+            //         ...child,
+            //         type: 'children',
+            //         label: child.name,
+            //       }
+            //     }).concat(
+            //         item.orgStructures.map((label) => {
+            //           return {
+            //             ...label,
+            //             id: label.orgId,
+            //             type: 'label',
+            //             label: label.orgName,
+            //             name: `${label.orgName}`, // 需求2
+            //           }
+            //         })
+            //     )
+          }
+          return {
+            ...item,
+            label: item.name,
+            key: dataIndex + '-' + index,
+          }
+        })
+        return list
+      },
+      onChangeUser(value, label, extra){
+        this.form.txlUsers = this.form.txlUsers.filter(item=> {
+          const i = String(item)
+          if(i.indexOf('user') != -1){
+            return item
+          }
+        })
+      },
+      onLoadData(treeNode) {
+        // 懒加载内部数据
+        const _this = this
+        return new Promise(resolve => {
+          if(treeNode.dataRef.children && treeNode.dataRef.children.length>0){
+            resolve()
+          }else {
+            this.loadData(treeNode)
+            resolve()
+          }
+        })
+      },
+      async loadData (treeNode) {
+        let orgId = null
+        if(treeNode.dataRef.orgId){
+          orgId = treeNode.dataRef.orgId.slice(2)
+        }else {
+          orgId = treeNode.dataRef.id
+        }
+        console.log('treeNode',treeNode)
+          let res = await getNewAddressBookUser(orgId)
+          if(res.data.code === 100) {
+
+            this.newBookUsers = this.newBookUsers.concat(res.data.data)
+            treeNode.dataRef.children = res.data.data.map(item => {
+              return {
+                ...item,
+                label: item.name + ' '+ item.phone.replace(/(\d{3})\d{4}(\d+)/, "$1****$2"),
+                name: item.name + '('+ item.company + ' ' + item.phone.replace(/(\d{3})\d{4}(\d+)/, "$1****$2") + ')',
+                id: 'user-' + item.id,
+                isLeaf: true
+              }
+            })
+            this.$forceUpdate();
+          }
       },
 
       changeTxl(e){
@@ -446,17 +594,27 @@
             this.form.verticalRecipient = []
             this.form.horizontalRecipient = []
 
-            const address = this.form.txlUsers.map((item)=>
-                {
-                  this.findUserById(item).recipientType = 3
-                  const {id,name,phone,company,...rest} = this.findUserById(item)
-                  const data = { id,name,phone,company }
-                  data.name = data.name.split('(')[0]
-                  return data
-                }
-            )
+            let address = []
+            if(this.isNewTxl == 1){
+              const userIds = this.form.txlUsers.map(item => item.slice(5))
+              address = userIds.map(item => {
+                const {id,name,phone,company,...rest} = this.findUser(item)
+                const data = { id,name,phone,company }
+                console.log('daa',data)
+                return data
+              })
+            }else {
+              address = this.form.txlUsers.map((item)=>
+                  {
+                    this.findUserById(item).recipientType = 3
+                    const {id,name,phone,company,...rest} = this.findUserById(item)
+                    const data = { id,name,phone,company }
+                    data.name = data.name.split('(')[0]
+                    return data
+                  }
+              )
+            }
             this.form.addressBookRecipient = address
-
             const aList = this.form.receiver.map(item=>this.findNodeById(this.areaUsers,item.value)?.users)
             if(aList.includes(null)){
               this.$message.error('选择接收单位时存在无用户的单位')
@@ -501,6 +659,14 @@
           }
         })
       },
+      findUser(id){
+        for(let i of this.newBookUsers){
+              if(i.id == id){
+                return i
+              }
+        }
+        return null
+      },
 
       onSearch() {
         // console.log(...arguments);

--
Gitblit v1.9.2