马宇豪
2023-06-14 e2f129ee192ae3469848beeceac262b13ba8eacb
src/views/Admin/notice.vue
@@ -1,146 +1,384 @@
<template>
   <div class="inner">
      <h2>预警信息发布</h2>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :wrapper-col="wrapperCol">
      <div class="left">
         <a-input placeholder="请输入标题" style="height: 50px; font-size: 20px;" />
         <br /><br />
         <a-radio-group v-model="value" @change="onChange">
            <a-radio :value="1">
               蓝色
            </a-radio>
            <a-radio :value="2">
               黄色
            </a-radio>
            <a-radio :value="3">
               橙色
            </a-radio>
            <a-radio :value="4">
               红色
            </a-radio>
         </a-radio-group>
         <br /><br />
         <a-radio-group default-value="a" button-style="solid">
            <a-radio-button value="a">
        <a-form-model-item prop="title">
          <a-input v-model="form.title" placeholder="请输入标题" style="height: 50px; font-size: 20px;" />
        </a-form-model-item>
        <!--      <a-row>-->
        <!--        <a-col :span="12" style="display: flex;align-items: center">-->
        <!--          <span style="display: block;margin-bottom: 24px">相关灾种</span>-->
        <!--        </a-col>-->
        <!--        <a-col :span="12" style="display: flex;align-items: center;justify-content: right">-->
        <!--          <span style="display: block;margin-bottom: 24px">预警级别:</span>-->
        <!--        </a-col>-->
        <!--      </a-row>-->
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="emergType">
              <a-radio-group v-model="form.emergType" button-style="solid">
                <a-radio-button :value="2">
               常规
            </a-radio-button>
            <a-radio-button value="b">
                <a-radio-button :value="1">
               紧临
            </a-radio-button>
         </a-radio-group>
         <div class="ftright">
            平级接收人选择:
            <a-select mode="multiple" placeholder="选择平级接收单位" :value="selectedItems" style="width: 180px"
               @change="handle">
               <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
                  {{ item }}
            </a-form-model-item>
          </a-col>
          <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">
                  {{ item.name }}
               </a-select-option>
            </a-select>
         </div>
         <br /><br />
         <a-textarea v-model="message" placeholder="请输入短信通知内容部分" :auto-size="{ minRows: 3, maxRows: 5 }" />
         <br /><br />
         <a-button>上传附件</a-button>  <div style="float: right;width:50%;text-align: right;">超时设置: <a-input style="width:100px;" placeholder="输入时间" /> 分钟</div>
         <br /><br />
         <span><b>发布单位:</b>{{department}}</span>
            </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">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item prop="content">
          <a-textarea v-model="form.content" placeholder="请输入短信通知内容部分" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-model-item>
        <a-row>
          <a-col :span="12">
            <a-button>上传附件</a-button>
          </a-col>
          <a-col :span="12" style="display: flex;align-items: center;justify-content: right">
            <b style="margin-bottom: 24px">超时设置:</b>
            <a-form-model-item prop="timeout">
              <a-input v-model="form.timeout" style="width:200px;" placeholder="输入时间" suffix="分钟"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <span><b>发布单位:</b>{{form.publishingUnit}}</span>
         <br/><br/>
         <!-- 子单位-->
         <div style="margin-bottom: 10px">选择接收单位:</div>
        <a-row :gutter="24">
          <a-col :span="12">
            <div style="display:flex;justify-content: space-between;align-items: center;">
              <b>选择接收单位:</b>
              <a-checkbox :checked="checkAll" @change="checkChange">
                全选
              </a-checkbox>
            </div>
            <a-form-model-item prop="receiver">
         <a-tree-select
             show-search
          tree-checkable
          treeCheckStrictly
             style="width: 100%"
          v-model="svalue"
                  v-model="form.receiver"
             :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
             placeholder="选择工作通知接收单位"
             allow-clear
             multiple
             tree-default-expand-all
             @change="onChanges"
                  @change="depChanges"
             @search="onSearch"
             @select="onSelect"
                  :tree-data="areaUsers"
                  :replaceFields="replaceFields"
           >
        <a-tree-select-node key="0" value="all" title="全选">
        </a-tree-select-node>
             <a-tree-select-node key="0-1" value="乌鲁木齐" title="乌鲁木齐(张XX 13268813610)">
               <a-tree-select-node key="0-1-1" value="米东区" title="米东区(张XX 13268813610)">
                 <a-tree-select-node key="0-1-1-1" value="XX村1" title="XX村(李有田 13268813610)" />
               </a-tree-select-node>
               <a-tree-select-node key="0-1-2" value="天山区" title="天山区">
                 <a-tree-select-node key="0-1-2-1" value="XX村2">
                   <b slot="title" style="color: #08c">XX村</b>
                 </a-tree-select-node>
               </a-tree-select-node>
             </a-tree-select-node>
           </a-tree-select>
           <br/><br/>
         <div style="float: right;"><b>选择审批领导:</b> <a-select show-search placeholder="请选择审批领导"
               option-filter-prop="children" style="width: 200px" :filter-option="filterOption"
               @focus="handleFocus" @blur="handleBlur" @change="handleChange">
               <a-select-option value="jack">
                  裴小威
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <b style="margin-bottom: 6px">平级接收人选择:</b>
            <a-form-model-item prop="recipient">
              <a-select mode="multiple" placeholder="选择平级接收单位" v-model="form.recipient" @change="handle">
                <a-select-option v-for="item in filteredOptions" :key="item.id" :value="item.id">
                  {{ item.recipientName }}
               </a-select-option>
               <a-select-option value="lucy">
                  赵东升
               </a-select-option>
               <a-select-option value="tom">
                  王卫萍
               </a-select-option>
            </a-select></div>
         <br /><br />
         <a-button type="primary" class="ftright">
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="display: flex;align-items: center">
          <a-col :span="12">
            <b style="margin-bottom: 6px">选择审批领导:</b>
            <a-form-model-item prop="reviewId">
              <a-select show-search v-model="form.reviewId" placeholder="请选择审批领导" style="width: 300px">
                <a-select-option v-for="(item,index) in leaders" :value="item.id" :key="index">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" style="text-align: right">
            <a-button type="primary" style="width: 250px;" @click="confirmSend()">
            确认并提交审核
         </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="right">
         <h2>短信预览</h2>
         <div class="mobile">
            <div class="mesg">
               <P>【{{signname}}】{{message}}。发布单位:{{department}}</P>
            <P>【{{form.title}}】{{form.content}}。发布单位:{{form.publishingUnit}}</P>
            </div>
         </div>
      </div>
    </a-form-model>
   </div>
</template>
<script>
   const OPTIONS = ['自治区消防(李XX)', '自治区公安厅(王XX)', '自治区自然资源厅(刘XX)'];
import {getAreaWithUserIfo, getPeerRecipient, getLeaders} from '@/api/user'
  import {getUserInfo} from "@/util/storage";
  import Cookies from "js-cookie";
import {massSend, msgSend} from "@/api/send";
   export default {
      name: "release",
      name: "notice",
      data() {
         return {
            value: 1,
            message: '',
            signname: '自然灾害风险预警提示',
            department: '自治区自然灾害综合监测预警中心',
            selectedItems: [],
            svalue:undefined,
        userInfo: {},
        wrapperCol: { span: 24 },
        filteredOptions:[],
        form: {
          id: null,
          title: '',
          emergType: null,
          disasterType: undefined,
          warningLevel: undefined,
          content: '',
          publishingUnit: '',
          districtId: null,
          attachments: [],
          timeout: null,
          reviewId: null,
          receiver: [],
          recipient: [],
          acceptingUnitIds: [],
          peerRecipientIds: []
        },
        leaders: [],
        checkAll: false,
        areaUsers: [],
        replaceFields: {
          children:'children',
          title:'name',
          key:'id',
          value: 'id'
        },
        riskOptions: [
          {name: '地震',value: 1},
          {name: '洪涝',value: 2},
          {name: '气象',value: 3},
          {name: '泥石流',value: 4},
          {name: '水旱',value: 5},
          {name: '森林草原火灾',value: 6}
        ],
        levelOptions: [
          {name: '红色预警',value: 1},
          {name: '橙色预警',value: 2},
          {name: '黄色预警',value: 3},
          {name: '蓝色预警',value: 4}
        ],
        rules: {
          emergType: [{ required: true, message: '请选择紧急类型', trigger: 'change'}],
          disasterType: [{ required: true, message: '请选择灾种', trigger: 'change'}],
          warningLevel: [{ required: true, message: '请选择预警级别', trigger: 'change'}],
          title: [{ required: true, message: '请输入信息标题', trigger: 'blur'}],
          content: [{ required: true, message: '请输入信息内容', trigger: 'blur'}],
          timeout: [{ required: true, message: '请输入超时时间', trigger: 'blur'}],
          receiver: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
          reviewId: [{ required: true, message: '请选择审批人', trigger: 'change'}],
          recipient: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
          // acceptingUnitIds: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
          // peerRecipientIds: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
        }
         };
      },
      components: {},
      computed: {
         filteredOptions() {
            return OPTIONS.filter(o => !this.selectedItems.includes(o));
    created() {
      const t = this
      t.userInfo = getUserInfo()
      t.form.districtId = t.userInfo.districtId
      t.form.publishingUnit = t.userInfo.company
      t.getSameLevel()
      t.getAreaUsers()
      t.getLeaders()
         },
      },
    computed: {},
      methods: {
         //选择子部门部分
         onChanges(value) {
            if(value.find(i=>i.value == 'all')){
              console.log('全选了')
      // 获取同级接收人
      async getSameLevel(){
        let t = this
        let res = await getPeerRecipient()
        if(res.data.code == 100){
          if(res.data.data){
            t.filteredOptions = res.data.data
            }else{
              this.svalue = value;
            this.$message.warning('暂无数据');
            }
            console.log(this.svalue);
        }else{
          this.$message.warning(res.data.msg);
        }
             },
      // 获取接收单位
      async getAreaUsers(){
        let t = this
        let res = await getAreaWithUserIfo()
        if(res.data.code == 100){
          if(res.data.data){
            const treeD = []
            t.userTitTree(res.data.data)
            const obj = t.findNodeById(res.data.data,t.userInfo.districtId)
            treeD.push(t.removeNodesWithoutUsers(obj))
            t.areaUsers = treeD
            t.unittype = this.findNodeById(this.areaUsers,t.userInfo.districtId)?.type
          }else{
            this.$message.warning('暂无数据');
          }
        }else{
          this.$message.warning(res.data.msg);
        }
      },
      // 获取领导
      async getLeaders(){
        let t = this
        let res = await getLeaders()
        if(res.data.code == 100){
          if(res.data.data){
            t.leaders = res.data.data
          }else{
            this.$message.warning('暂无数据');
          }
        }else{
          this.$message.warning(res.data.msg);
        }
      },
         //选择子部门部分
      depChanges(value,label,extra) {
        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])
        }else{
          t.form.receiver = []
        }
      },
      confirmSend(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.form.acceptingUnitIds = []
            this.form.peerRecipientIds = []
            const aList = this.form.receiver.map(item=>this.findNodeById(this.areaUsers,item.value)?.users)
            console.log(aList,'a')
            const newAList = [].concat(...aList)
            console.log(newAList,'b')
            for(let i of newAList){
              const {realName,...data} = i
              const {id:recipienterId,name: recipienterName,phone: recipienterPhone,company: receiveUnit,...rest} = data
              const obj = { recipienterId, recipienterName, recipienterPhone, receiveUnit,...rest}
              this.form.acceptingUnitIds.push(obj)
            }
            const bList = this.form.recipient.map(item => this.filteredOptions.find(i=>i.id == item))
            for(let i of bList){
              const {id:recipienterId,recipientName: recipienterName,phone: recipienterPhone, company: receiveUnit,...rest} = i
              const obj = {recipienterId, recipienterName,recipienterPhone,receiveUnit,unittype:this.unittype,...rest}
              this.form.peerRecipientIds.push(obj)
            }
            const {receiver,recipient,id,...data} = this.form
            msgSend(data).then( res =>{
              if(res.data.code == 100){
                this.$message.success('信息已提交审核')
              }else{
                this.$message.error(res.data.msg)
              }
              this.$refs.ruleForm.clearValidate()
              this.$refs.ruleForm.resetFields()
            })
          }else{
            console.log('error submit!!');
            return false;
          }
        })
      },
// 根据id查对象
      findNodeById(data,value) {
        for (const node of data) {
          if (node.id === value) {
            return node;
          }
          if (node.children) {
            const foundNode = this.findNodeById(node.children, value);
            if (foundNode) {
              return foundNode;
            }
          }
        }
        return null;
      },
      // 将树状数据所有id和name放入对象数组
      traverseTree(treeData) {
        let result = [];
        function traverse(node) {
          result.push({ label: node.name, value: node.id });
          if (node.children && node.children.length > 0) {
            for (let child of node.children) {
              traverse(child);
            }
          }
        }
        traverse(treeData);
        return result;
      },
      // 将树状数据name字段放入users的姓名电话
      userTitTree(treeData) {
        for(const node of treeData){
          if(node.users){
            node.users = node.users.map((i)=>{
              return{
                ...i,
                unittype: node.type,
                districtId: node.id
              }
            })
            node.name = node.name + '('+node.users.map(i=>i.name +' '+ i.phone).join(',')+')'
          }
          if(node.children){
            this.userTitTree(node.children)
          }
        }
        return treeData
      },
      // 将users为null的节点删除
      removeNodesWithoutUsers(node) {
          if (node.users === null) {
            return null; // 返回 null 表示删除节点
          }
          if (node.children && node.children.length > 0) {
            node.children = node.children.map(child => this.removeNodesWithoutUsers(child)).filter(Boolean);
          }
          return node;
      },
      onSearch() {
        console.log(...arguments);
      },
@@ -151,6 +389,13 @@
         handle(selectedItems) {
            this.selectedItems = selectedItems;
         },
      handleRisk(selectedItems) {
        // this.selectedItems = selectedItems;
      },
      handleLevel(selectedItems) {
        // this.selectedItems = selectedItems;
      },
         onChange(){
            console.log(this.value)
         },