群发新通讯录懒加载

zhouwx

2024-08-30 1f6893d24ba87313d4114c68813073ead53b2e12

 src/views/Admin/massSend.vue

@@ -41,14 +41,14 @@
        <a-col :span="12" style="display: flex;align-items: center;justify-content: right">
          <a-form-model-item prop="disasterType" style="margin-right: 20px">
            <a-select placeholder="请选择相关灾种" v-model="form.disasterType" style="width: 240px" allowClear @change="handleRisk">
              <a-select-option v-for="item in riskOptions" :key="item.value" :value="item.value">
              <a-select-option v-for="(item,index) in riskOptions" :key="item.id" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item prop="warningLevel">
            <a-select placeholder="请选择预警级别" v-model="form.warningLevel" style="width: 240px" allowClear @change="handleLevel">
              <a-select-option v-for="item in levelOptions" :key="item.value" :value="item.value">
              <a-select-option v-for="(item,index) in levelOptions" :key="item.id" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
@@ -70,13 +70,73 @@
<!--        </a-col>-->
<!--      </a-row>-->
<!--         <span><b>发布单位：</b>{{form.publishingUnit}}</span>-->
         <br/><br/>
         <!-- 子单位-->
      <a-row :gutter="24">

      <a-row :gutter="24" v-if="unittype == 1">
        <a-col :span="12">
          <a-radio-group v-model="isNewTxl" button-style="solid" style="margin-bottom: 20px" @change="changeTxl">
            <a-radio-button :value="1">
              新通讯录
            </a-radio-button>
            <a-radio-button :value="2">
              原通讯录
            </a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <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>-->
          </div>
          <a-form-model-item prop="txlUsers">
            <a-tree-select
                @change="onChangeUser"
                v-model="form.txlUsers"
                tree-checkable
                :tree-data="addressBook"

                :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>
          <div style="display:flex;justify-content: space-between;align-items: center;">
            <b>原通讯录接收人：</b>
            <a-checkbox :checked="checkTxlAll" @change="checkTxlChange">
            <a-checkbox :checked="checkTxlAll2" @change="checkTxlChange2">
              全选
            </a-checkbox>
          </div>
@@ -91,11 +151,11 @@
                allow-clear
                multiple
                :maxTagCount="3"
                @change="onTxlChanges"
                @change="onTxlChanges2"
                @search="onTxlSearch"
                @select="onTxlSelect"
                :tree-data="addressBook"
                :replaceFields="replaceTxlFields"
                :tree-data="oldAddressBook"
                :replaceFields="replaceOldTxlFields"
            >
            </a-tree-select>
          </a-form-model-item>
@@ -173,7 +233,7 @@
         <h2>短信预览</h2>
         <div class="mobile">
            <div class="mesg">
               <P>【自然灾害风险预警提示】{{form.content}}</P>
               <P>【防灾减灾工作提示】{{form.content}}</P>
            </div>

         </div>
@@ -187,14 +247,21 @@
import { TreeSelect } from 'ant-design-vue';
import { massSend } from "@/api/send";
import {getUserInfo} from "@/util/storage";
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:[],
        wrapperCol: { span: 24 },
        isNewTxl: 1,
        unittype: null,
        form: {
          id: null,
          emergType: null,
@@ -209,41 +276,44 @@
          verticalRecipient: [],
          horizontalRecipient: []
        },
        checkTxlAll: false,
        checkTxlAll1: false,
        checkTxlAll2: false,
        checkAll: false,
        checkSlAll: false,
        oldAddressBook: [],
        addressBook: [],
        replaceTxlFields: {
          children:'children',
          title:'name',
          key:'id',
          value: 'code'
        },
        replaceOldTxlFields: {
          children:'userInfos',
          title:'name',
          key:'id',
          value: 'id'
        },
        areaUsers: [],
        replaceFields: {
          children:'children',
          title:'name',
          key:'id',
          value: 'id'
        },
        riskOptions: [
          {name: '地震',value: 1},
          {name: '气象',value: 3},
          {name: '地质灾害',value: 4},
          {name: '水旱',value: 5},
          {name: '森林草原火灾',value: 6}
          {id: 1,name: '地震',value: 1},
          {id: 2,name: '气象',value: 3},
          {id: 3,name: '地质灾害',value: 4},
          {id: 4,name: '水旱',value: 5},
          {id: 5,name: '森林草原火灾',value: 6}
        ],
        levelOptions: [
          {name: '红色预警',value: 1},
          {name: '橙色预警',value: 2},
          {name: '黄色预警',value: 3},
          {name: '蓝色预警',value: 4}
          {id: 6,name: '红色预警',value: 1},
          {id: 7,name: '橙色预警',value: 2},
          {id: 8,name: '黄色预警',value: 3},
          {id: 9,name: '蓝色预警',value: 4}
        ],
        rules: {
          emergType: [{ required: true, message: '请选择紧急类型', trigger: 'change'}],
          disasterType: [{ required: true, message: '请选择灾种', trigger: 'change'}],
          warningLevel: [{ required: true, message: '请选择预警级别', trigger: 'change'}],
          content: [{ required: true, message: '请输入信息内容', trigger: 'blur'}],
          txlUsers: [{ required: true, message: '请选择通讯录接收人', trigger: 'blur'}],
          // receiver: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
          // recipient: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
          // verticalRecipient: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
@@ -254,10 +324,14 @@
      components: {},
    created() {
      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: {
      },
@@ -277,13 +351,165 @@
                  return item
              })
            }
            t.addressBook = bookData
            t.oldAddressBook = bookData
          }else{
            console.log('暂无数据')
          }
        }else{
          this.$message.warning(res.data.msg);
        }
      },

      // 获取新通讯录
      async getNewAddressBook(){
        let t = this
        let res = await getNewAddressBookArea()
        if(res.data.code == 100){
          if(res.data.data){
            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){
        this.checkTxlAll1 = false
        this.checkTxlAll2 = false
        this.form.txlUsers = []
      },

      // 获取同级接收人
@@ -320,62 +546,44 @@
      },

      //选择子部门部分
      onTxlChanges(value,label,extra) {
      onTxlChanges1(value,label,extra) {
        const t = this
        if(t.form.txlUsers.length == 0){
          t.checkTxlAll = false
          t.checkTxlAll1 = false
        }
      },
      checkTxlChange(e) {
      onTxlChanges2(value,label,extra) {
        const t = this
        this.checkTxlAll = !this.checkTxlAll
        if(t.checkTxlAll == true){
        if(t.form.txlUsers.length == 0){
          t.checkTxlAll2 = false
        }
      },
      checkTxlChange1(e) {
        const t = this
        this.checkTxlAll1 = !this.checkTxlAll1
        if(t.checkTxlAll1 == true){
          let res = []
          for(let i of t.addressBook){
            if(i.userInfos && i.userInfos.length>0)
            res = res.concat(...i.userInfos)
            if(i.orgUsers && i.orgUsers.length>0)
            res = res.concat(...i.orgUsers)
          }
          t.form.txlUsers = res.map(i=>i.id)
        }else{
          t.form.txlUsers = []
        }
      },

         //选择子部门部分
         onChanges(value,label,extra) {
      checkTxlChange2(e) {
        const t = this
        if(t.form.receiver.length == 0){
          t.checkAll = false
        }
      },

      checkChange(e) {
        const t = this
        this.checkAll = !this.checkAll
        if(t.checkAll == true){
          t.form.receiver = t.traverseTree(t.areaUsers[0])
        this.checkTxlAll2 = !this.checkTxlAll2
        if(t.checkTxlAll2 == true){
          let res = []
          for(let i of t.oldAddressBook){
            if(i.userInfos && i.userInfos.length>0)
              res = res.concat(...i.userInfos)
          }
          t.form.txlUsers = res.map(i=>i.id)
        }else{
          t.form.receiver = []
        }
      },

      //选择平级部门部分
      handle(selectedItems) {
        const t = this
        if(t.form.recipient.length == t.filteredOptions.length){
          t.checkSlAll = true
        }else{
          t.checkSlAll = false
        }
      },

      checkSlChange(e) {
        const t = this
        t.checkSlAll = !t.checkSlAll
        if(t.checkSlAll == true){
          t.form.recipient = t.filteredOptions.map(i=>i.id)
        }else{
          t.form.recipient = []
          t.form.txlUsers = []
        }
      },

@@ -386,16 +594,27 @@
            this.form.verticalRecipient = []
            this.form.horizontalRecipient = []

            const address = this.form.txlUsers.map((item)=>
                {
                  this.findUserById(item).recipientType = 3
                  const {addressBookGroupId,...data} = this.findUserById(item)
                  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('选择接收单位时存在无用户的单位')
@@ -439,6 +658,14 @@
            return false;
          }
        })
      },
      findUser(id){
        for(let i of this.newBookUsers){
              if(i.id == id){
                return i
              }
        }
        return null
      },

      onSearch() {
@@ -495,16 +722,29 @@
      },

      findUserById(id){
        for(let i of this.addressBook){
          if(i.userInfos && i.userInfos.length>0){
            for(let j of i.userInfos){
              if(j.id == id){
                return j
        if(this.isNewTxl == 1){
          for(let i of this.addressBook){
            if(i.orgUsers && i.orgUsers.length>0){
              for(let j of i.orgUsers){
                if(j.id == id){
                  return j
                }
              }
            }
          }
          return null
        }else{
          for(let i of this.oldAddressBook){
            if(i.userInfos && i.userInfos.length>0){
              for(let j of i.userInfos){
                if(j.id == id){
                  return j
                }
              }
            }
          }
          return null
        }
        return null
      },

      // 将树状数据所有id和name放入对象数组