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