需求：一個(gè)機(jī)構(gòu)下拉菜單，一個(gè)人員下拉菜單，默認(rèn)帶入當(dāng)前登錄用戶的機(jī)構(gòu)和人員。機(jī)構(gòu)下拉菜單為兩個(gè)接口，模糊查詢?yōu)橐粋€(gè)接口不包含懶加載，默認(rèn)非模糊查詢情況下為一個(gè)接口，點(diǎn)擊節(jié)點(diǎn)懶加載。機(jī)構(gòu)下拉菜單數(shù)據(jù)變動(dòng)更新人員下拉菜單數(shù)據(jù)。日期默認(rèn)為當(dāng)天

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-791675.html

<template>
    <div class="app-container">
        <div id="app" class="mb82 grid-content pd20">
          <div>
              <el-row :gutter="20">
                  <el-col id="tittle">檢查信息</el-col>
              </el-row>
               <el-divider ></el-divider>
          </div>
          <div class="center">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="檢查時(shí)間：" prop="checkTime">
                <el-date-picker
                  class="width100"
                  v-model="ruleForm.checkTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="選擇日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="檢查機(jī)構(gòu)：" prop="selectOrg">
                <el-select
                    class="el-input-search width100"
                    v-model="ruleForm.selectOrg"
                    ref="refSelectOrg"
                    :multiple="true"
                    @remove-tag="removetagOrg"
                    @clear="clearallOrg"
                    clearable
                    @change ="$forceUpdate();">
                    <el-option
                        value=""
                        style="height:auto;background-color: #fff;">
                        <el-input
                            :validate-event="false"
                            v-model="filterTextOrg"
                            ref="refSelectOrgSearch"
                            placeholder="請(qǐng)輸入"
                            @click.stop.native
                            clearable
                            @clear="clearallOrgSearch"
                            style="margin-bottom:8px;"></el-input>
                        <el-tree
                          :show-checkbox="true"
                          style="padding:20px 10px;"
                          :data="orgList"
                          :props="defaultPropsOrg"
                          node-key="orgId"
                          check-strictly
                          highlight-current
                          :expand-on-click-node="true"
                          ref="refTreeOrg"
                          :default-expanded-keys="expandedKeysOrgData"
                          :default-checked-keys="checkedKeysOrgData"
                          @check-change="handleNodeCheckOrg"
                          @node-click="handleNodeClick">
                        </el-tree>
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="檢查人員：" prop="selectUser">
                <el-select
                    class="el-input-search width100"
                    v-model="ruleForm.selectUser"
                    ref="refSelectOrg"
                    :multiple="true"
                    @remove-tag="removetagUser"
                    @clear="clearallUser"
                    clearable
                    @change ="$forceUpdate();">
                    <el-option
                        value=""
                        style="height:auto;background-color: #fff;">
                        <el-input
                            :validate-event="false"
                            v-model="filterTextUser"
                            ref="refSelectUserSearch"
                            placeholder="請(qǐng)輸入"
                            @click.stop.native
                            clearable
                            @clear="clearallUserSearch"
                            style="margin-bottom:8px;"></el-input>
                        <el-tree
                          :show-checkbox="true"
                          style="padding:20px 10px;"
                          :data="userList"
                          :props="defaultPropsUser"
                          node-key="userId"
                          check-strictly
                          highlight-current
                          :expand-on-click-node="true"
                          ref="refTreeUser"
                          :default-expanded-keys="expandedKeysUserData"
                          :default-checked-keys="checkedKeysUserData"
                          @check-change="handleNodeCheckUser">
                        </el-tree>
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="檢查結(jié)果：" prop="checkResult">
                <el-input type="textarea" v-model="ruleForm.checkResult"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="footerBtn bg">
          <el-divider></el-divider>
          <el-row class="pd20">
            <el-col :span="23" style="text-align: right;">
              <el-button size="small" @click="goback">返回</el-button>
              <el-button type="primary" size="small" @click="submitBtn('ruleForm')">提交</el-button>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import {warnView,getInfo,childNode,childNodeFuzzyQuery,getUserListByOrg,saveCheck} from "../../../../api/warning"
export default {
    data() {
      return {
  // 檢察機(jī)構(gòu)start
        filterTextOrg:'',
        orgList:[],
        defaultPropsOrg: {
          children: 'childNodeList',
          label: 'orgName',
          value:'orgId',
          isLeaf: 'leaf'
        },
        expandedKeysOrgData:['792394093041156096'],
        checkedKeysOrgData:[],
        nodeCheckedOrgData:[],
  // 檢察機(jī)構(gòu)end
  // 檢察人員start
        filterTextUser:'',
        userList:[],
        defaultPropsUser: {
          children: 'userList',
          label: 'realName',
          value:'userId',
          isLeaf: 'leaf'
        },
        expandedKeysUserData:[],
        checkedKeysUserData:[],
        nodeCheckedUserData:[],
  // 檢察人員end
        ruleForm: {
          checkTime: '',
          selectOrg: [],
          selectUser: [],
          checkResult: '',
        },
        rules: {
          checkTime: [
            { required: true, message: '檢查時(shí)間不能為空', trigger: 'change' },
          ],
          selectOrg: [
            { type: 'array', required: true, message: '檢查機(jī)構(gòu)不能為空', trigger: 'change' },
          ],
          selectUser: [
            { type: 'array', required: true, message: '檢查人員不能為空', trigger: 'change' },
          ],
          checkResult: [
            { required: true, message: '檢查結(jié)果不能為空', trigger: 'blur' },
          ],
        },
        orgId:'',
        orgName:'',
      }
    },
    watch: {
      // 檢察機(jī)構(gòu)start
      // 監(jiān)聽輸入值
      filterTextOrg(val) {
        if(val){
          this.childNodeFuzzyQueryChange(val)
        }else{
          this.childNodeChangeAll(this.orgId)
        }
      },
      'ruleForm.selectOrg': {
        handler: function (newVal, oldVal) {
          let that = this
            if(newVal){
              // this.$refs.refTreeOrg.filter(newVal);
            }else{
              console.log('newVal1111111',newVal)

            }
        },
        deep: true
      },
      // 檢察機(jī)構(gòu)end
      // 檢察人員start
      filterTextUser(val) {
        this.getUserListByOrgChange(val)
      },

      // 檢察人員end
    },
    created() {
      getInfo("").then((res) => {
        this.userId = res.data.userId;
        this.realName = res.data.realName;
        this.orgId = res.data.orgId;
        this.orgName = res.data.orgName;
        this.nodeCheckedOrgData = [{
           orgId:this.orgId,
           orgName:this.orgName,
         }]
        this.ruleForm.selectOrg.push(this.orgName)
        this.checkedKeysOrgData.push(this.orgId)
        this.childNodeChangeAll('792394093041156096')

        this.nodeCheckedUserData = [{
           userId:this.userId,
           realName:this.realName,
         }]
        this.ruleForm.selectUser.push(this.realName)
        this.checkedKeysUserData.push(this.userId)
        this.getUserListByOrgChange();
      })

    },
    mounted() {
      this.ruleForm.superviseId = this.$route.query.superviseId; // 監(jiān)管idDate().getTime(); // 檢查編號(hào)
      this.ruleForm.checkTime = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    },
    methods: {
      // 去重
      unique(arr){
        return Array.from(new Set(arr))
      },
      // 返回上一頁(yè)
      goback() {
        this.$router.go(-1);
      },
      // 格式化日期
      dateTypeFormat(fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 時(shí)
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以繼續(xù)添加，必須轉(zhuǎn)化成字符串
        }
        for (const k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
          }
        }
        return fmt
      },
// 檢察機(jī)構(gòu)start
      // 獲取模糊查詢機(jī)構(gòu)樹
      childNodeFuzzyQueryChange(val){
        let data = {
          orgId:'',
          value:val
        }
        childNodeFuzzyQuery(data).then((res) => {
          this.orgList = res.data || [];
        })
      },
      // 獲取機(jī)構(gòu)樹非模糊查詢
      childNodeChangeAll(id){
        let orgId = id || ''
        childNode(orgId).then((res) => {
          res.data.node.childNodeList = res.data.childOrgList
          this.orgList = []
          this.orgList.push(res.data.node);
         })
      },
      // 刪除機(jī)構(gòu)單個(gè)下拉菜單標(biāo)簽
      removetagOrg(val){
        this.nodeCheckedOrgData.forEach((item, index, arr) => {
          if(item.orgName === val) {
            arr.splice(index, 1)
            this.checkedKeysOrgData = this.checkedKeysOrgData.filter(i => i !== item.orgId)
          }
        })
          this.checkedKeysOrgData = this.unique(this.checkedKeysOrgData)

          this.$nextTick(() => {
? ? ? ? ? ? ?this.$refs.refTreeOrg.setCheckedKeys(this.checkedKeysOrgData,true)
? ? ? ? ? })
          // 數(shù)據(jù)變動(dòng)更改人員樹
          this.nodeCheckedUserData=[];
          this.ruleForm.selectUser=[];
          this.checkedKeysUserData=[];
          this.getUserListByOrgChange('')
      },
      // 清空機(jī)構(gòu)下拉菜單
      clearallOrg(){},
      // 清空機(jī)構(gòu)模糊查詢
      clearallOrgSearch(){},
      // 點(diǎn)擊機(jī)構(gòu)樹復(fù)選框
      handleNodeCheckOrg(data,checked){
        if(checked === true) {
            this.ruleForm.selectOrg.push(data.orgName)
            this.checkedKeysOrgData.push(data.orgId)
            this.nodeCheckedOrgData.push(data)
            if(this.ruleForm.selectOrg)
            this.ruleForm.selectOrg = this.unique(this.ruleForm.selectOrg)
            this.checkedKeysOrgData = this.unique(this.checkedKeysOrgData)
            const map = new Map();
            this.nodeCheckedOrgData.filter(i => !map.has(i.orgId) && map.set(i.orgId, i));
            this.$refs.refTreeOrg.setChecked(data.orgId, true)
          }else{
            this.nodeCheckedOrgData.forEach((item, index, arr) => {
              if(item.orgId === data.orgId) {
                arr.splice(index, 1)
                this.checkedKeysOrgData = this.checkedKeysOrgData.filter(i => i !== item.orgId)
              }
            })
            if(this.ruleForm.selectOrg.includes(data.orgName)) {
              this.ruleForm.selectOrg.forEach((item, index, arr) => {
                if(item === data.orgName) {
                  arr.splice(index, 1)
                }
              })
              this.$refs.refTreeOrg.setChecked(data.orgId, false)
            }
          }
          // 數(shù)據(jù)變動(dòng)更改人員樹
          this.nodeCheckedUserData=[];
          this.ruleForm.selectUser=[];
          this.checkedKeysUserData=[];
          this.getUserListByOrgChange('')

      },
      // 點(diǎn)擊機(jī)構(gòu)樹節(jié)點(diǎn)
      handleNodeClick(data,node){
        console.log(data)
        console.log(node)
        let that = this
        let orgId = '';
        if (node.level >= 1) {
             orgId = node.data.orgId;
         }

        childNode(orgId).then((res) =>{
          if(res.code == 20000){
            let parentData = [];
            let data;
          if (node.level === 0) {
            parentData[0] = res.data.node
            data = parentData;
           }
          if (node.level >= 1) {
               data = res.data.childOrgList;
           }

           //TODO 追加數(shù)據(jù) append data
          this.$refs.refTreeOrg.updateKeyChildren(orgId,res.data.childOrgList);
          setTimeout(()=>{
            if(res.data.childOrgList){ node.expanded = true}
          },300)
          } else {
            this.$message({
                message: res.message,
                type: "error"
            });
          }
        })
      },
// 檢查機(jī)構(gòu)end
// 檢察人員start
      // 獲取模糊查詢?nèi)藛T樹
            getUserListByOrgChange(val){
              this.checkedKeysOrgData = this.unique(this.checkedKeysOrgData)

              let data = {
                orgIds:this.checkedKeysOrgData,
                searchValue:val || ''
              }
              getUserListByOrg(data).then((res) => {
                this.userList = res.data || [];
              })
            },

            // 刪除人員單個(gè)下拉菜單標(biāo)簽
            removetagUser(val){
                this.nodeCheckedUserData.forEach((item, index, arr) => {
                  if(item.realName === val) {
                    arr.splice(index, 1)
                    this.checkedKeysUserData = this.checkedKeysUserData.filter(i => i !== item.userId)
                  }
                })
                this.checkedKeysUserData = this.unique(this.checkedKeysUserData)

                this.$nextTick(() => {
      ? ? ? ? ? ? ?this.$refs.refTreeUser.setCheckedKeys(this.checkedKeysUserData,true)
      ? ? ? ? ? })
            },
            // 清空人員下拉菜單
            clearallUser(){},
            // 清空人員模糊查詢
            clearallUserSearch(){},
            // 點(diǎn)擊人員樹復(fù)選框
            handleNodeCheckUser(data,checked){
              if(checked === true) {
                  this.ruleForm.selectUser.push(data.realName)
                  this.checkedKeysUserData.push(data.userId)
                  this.nodeCheckedUserData.push(data)
                  if(this.ruleForm.selectUser)
                  this.ruleForm.selectUser = this.unique(this.ruleForm.selectUser)
                  this.checkedKeysUserData = this.unique(this.checkedKeysUserData)
                  const map = new Map();
                  this.nodeCheckedUserData.filter(i => !map.has(i.userId) && map.set(i.userId, i));
                  this.$refs.refTreeUser.setChecked(data.userId, true)
                }else{
                  this.nodeCheckedUserData.forEach((item, index, arr) => {
                    if(item.userId === data.userId) {
                      arr.splice(index, 1)
                      this.checkedKeysUserData = this.checkedKeysUserData.filter(i => i !== item.userId)
                    }
                  })
                  if(this.ruleForm.selectUser.includes(data.realName)) {
                    this.ruleForm.selectUser.forEach((item, index, arr) => {
                      if(item === data.realName) {
                        arr.splice(index, 1)
                      }
                    })
                    this.$refs.refTreeUser.setChecked(data.userId, false)
                  }
                }


            },

// 檢查人員end
      // 表單提交彈窗
      submitBtn(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('確定提交嗎?', '提示', {
              confirmButtonText: '確定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.submitChange();
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });

          } else {
            return false;
          }
        });
      },
      // 提交表單
      submitChange(){
        const map = new Map();
        this.nodeCheckedOrgData = this.nodeCheckedOrgData.filter(i => !map.has(i.orgId) && map.set(i.orgId, i));
        this.nodeCheckedUserData = this.nodeCheckedUserData.filter(i => !map.has(i.userId) && map.set(i.userId, i));
        this.ruleForm.orgList = this.nodeCheckedOrgData;
        this.ruleForm.userList = this.nodeCheckedUserData;

        let data = {
          superviseId:this.ruleForm.superviseId,
          orgList:this.ruleForm.orgList,
          userList:this.ruleForm.userList,
          checkResult:this.ruleForm.checkResult,
          checkTime:this.ruleForm.checkTime,
        }
        console.log('data',data)
        saveCheck(data).then((res) => {
          if(res.code == '20000'){
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.go(-1);
          }else{
            this.$message({
              message: res.message,
              type: 'error'
            });
          }
        })
      },

    }
}
</script>

<style scoped lang="less">
.app-container {
  margin: 10px;
}
#app {
  /* padding: 15px; */
  background-color: #fff;
  font-size: 14px;
}
  .title{
    text-align: center;
    color: #0066FF;
    font-weight:800;
    font-size: 16px;
  }
  .chart-container{
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }

  .description{
    font-size: 12px;
    padding-left: 20px;
    color: #555;
  }
  .mt10{
    margin-top: 10px;
  }
  .mg15-0{
	  margin: 15px 0;
  }
  .mt30{
    margin-top: 30px;
  }
  .mt26{
    margin-top: 26px;
  }
  .state-box{
    width: 10px;
    height: 10px;
    margin-right: 5px;
    margin-bottom: 1px;
    display: inline-block;
  }
  .state-box-max {
    width: 19px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    color: #fff;
    margin-right: 10px;
    margin-top: 1px;
    display: inline-block;
  }
  .violet{
    background: #9933FF;
  }
  .yellow{
    background: #e6a23c;
  }
  .blue{
    background: #0066FF;
  }
  .footerBtn{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: calc(100%);
    -webkit-transition: width 0.28s;
    transition: width 0.28s;
  }
  .el-divider--horizontal{margin: 0px 15px;}
  .bg{
    background: #fff;
  }
 .el-col{
   margin:0 24px;
 }
  .pdt10{
    padding-top: 10px;
  }
  .mb15{
    margin-bottom: 15px;
  }
  .mb82{
    margin-bottom: 82px;
  }
  .mb60{
    margin-bottom: 60px;
  }
  .mb10{
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .diaglogClas{
    margin-bottom: 15px;
  }
  .grid-content {
   /*  padding-top: 15px; */
    border-radius: 4px;
    min-height: 36px;
    background: #fff;
  }
  .bg-purple {
    /* background: #dddfe6; */
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 12px;
    /* font-weight:800; */
    text-align: center;
    border: 1px solid #d3dce6;
  }

  .expClas{
      float: right;
      position: initial;
      margin-top: 30px;
  }
  .footCenter{
    text-align: center;
  }
/deep/.el-autocomplete-suggestion{
  display: inline-table;
}
.width100{width: 100%;}
.center{
  width: 700px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.footerBtn{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: calc(100%);
    -webkit-transition: width 0.28s;
    transition: width 0.28s;
}
.bg{background: #fff;}
.pd20{padding: 15px;padding-right: 0;}
</style>

到了這里，關(guān)于記錄el-select+el-tree復(fù)選框，支持模糊查詢，懶加載，樹父子節(jié)點(diǎn)不關(guān)聯(lián)，不全選的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！