xinhuaqujiaoyujuPCOA/src/components/SelectRen/selectUserByDept.vue

<template>
  <!-- 选择人员对话框 -->
  <el-dialog style="z-index: 2093 !important;" :title="this.title" :visible.sync="childOpen" width="1000px" append-to-body  destroy-on-close="true" >
    <SelectRen ref="renlist" :userIds="receiverAccount" @fatherFunction = "selectChange" @removeFunction="removeSelectuser"/>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitRen">选 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import SelectRen from '@/components/SelectRen'

    export default {
      name: "selectUserByDept",
      components: {
        SelectRen
      },
      props: ['title','open','inputAccount','inputName'],
      data() {
        return {
          childOpen: false,
          receiverName: "", // 收件人的昵称
          receiverAccount: "", // 收件人的账号
        };
      },
      methods:{
        // 人员选择器----取消按钮
        cancel() {
          this.open = false;
          this.childOpen=false;
          this.filterText='';
          // alert("取消前"+this.receiverAccount);
          // alert("取消input:"+this.inputAccount);
          this.receiverAccount =this.inputAccount;
          this.receiverName = this.inputName;
        },
        /** 人员选择器中的 选定按钮操作 */
        submitRen(){
          this.$emit('ok', this.receiverAccount, this.receiverName);
          this.childOpen = false;
        },
        /** 人员选中  */
        selectChange(zh,xm){
          let zhArr=[];
          let xmArr=[];
          if(this.receiverAccount!="")
            zhArr = this.receiverAccount.split(',');
          if(this.receiverName!="")
            xmArr = this.receiverName.split(',');
          let selzhArr=[];
          let selxmArr=[];
          if(zh!="")
            selzhArr = zh.split(',');
          if(xm!="")
            selxmArr = xm.split(',');
          for (let i = 0, len = selzhArr.length; i < len; i++) {
            if (!zhArr.includes(selzhArr[i])) {
              //放一起的目的是 解决重名引起的 账号和名称不对应 问题
              zhArr.push(selzhArr[i]);
              xmArr.push(selxmArr[i]);
            }
          }
          this.receiverAccount =zhArr.join(',');
          this.receiverName = xmArr.join(',');

        },
        /**  人员取消选择  */
        removeSelectuser(zh,xm){
          console.log("去除已选择的数据=="+zh+"=="+xm);
          let zhArr = this.receiverAccount.split(',');
          let xmArr = this.receiverName.split(',');

          for (var i = 0; i < zhArr.length; i++) {
            if (zhArr[i] == zh) {
              //放一起的目的是 解决重名引起的 账号和名称不对应 问题
              zhArr.splice(i, 1);
              xmArr.splice(i, 1);
              break;
            }
          }
          this.receiverAccount =zhArr.join(',');
          this.receiverName =xmArr.join(',');
        }
      },
      watch:{
        open(val) {
          this.childOpen = this.open;
        },
        inputAccount(val) {
            this.receiverAccount = this.inputAccount;
            //alert("监听ry后："+this.receiverAccount);
        }
      }
    }
</script>

<style scoped>
  /*.v-modal{*/
  /*  z-index: 1800 !important;*/
  /*}*/
  /*.el-dialog__wrapper{*/
  /*  z-index: 2093 !important;*/
  /*}*/

</style>