记录el-select+el-tree复选框，支持模糊查询，懒加载，树父子节点不关联，不全选

加加加菲猫2024-01-15 22:24

需求：一个机构下拉菜单，一个人员下拉菜单，默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口，模糊查询为一个接口不包含懒加载，默认非模糊查询情况下为一个接口，点击节点懒加载。机构下拉菜单数据变动更新人员下拉菜单数据。日期默认为当天

javascript 复制代码 
<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="检查时间：" 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="检查机构：" 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="请输入"
                            @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="请输入"
                            @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="检查结果：" 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 {
  // 检察机构start
        filterTextOrg:'',
        orgList:[],
        defaultPropsOrg: {
          children: 'childNodeList',
          label: 'orgName',
          value:'orgId',
          isLeaf: 'leaf'
        },
        expandedKeysOrgData:['792394093041156096'],
        checkedKeysOrgData:[],
        nodeCheckedOrgData:[],
  // 检察机构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: '检查时间不能为空', trigger: 'change' },
          ],
          selectOrg: [
            { type: 'array', required: true, message: '检查机构不能为空', trigger: 'change' },
          ],
          selectUser: [
            { type: 'array', required: true, message: '检查人员不能为空', trigger: 'change' },
          ],
          checkResult: [
            { required: true, message: '检查结果不能为空', trigger: 'blur' },
          ],
        },
        orgId:'',
        orgName:'',
      }
    },
    watch: {
      // 检察机构start
      // 监听输入值
      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
      },
      // 检察机构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; // 监管idDate().getTime(); // 检查编号
      this.ruleForm.checkTime = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    },
    methods: {
      // 去重
      unique(arr){
        return Array.from(new Set(arr))
      },
      // 返回上一页
      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(), // 时
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        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
      },
// 检察机构start
      // 获取模糊查询机构树
      childNodeFuzzyQueryChange(val){
        let data = {
          orgId:'',
          value:val
        }
        childNodeFuzzyQuery(data).then((res) => {
          this.orgList = res.data || [];
        })
      },
      // 获取机构树非模糊查询
      childNodeChangeAll(id){
        let orgId = id || ''
        childNode(orgId).then((res) => {
          res.data.node.childNodeList = res.data.childOrgList
          this.orgList = []
          this.orgList.push(res.data.node);
         })
      },
      // 删除机构单个下拉菜单标签
      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)
          })
          // 数据变动更改人员树
          this.nodeCheckedUserData=[];
          this.ruleForm.selectUser=[];
          this.checkedKeysUserData=[];
          this.getUserListByOrgChange('')
      },
      // 清空机构下拉菜单
      clearallOrg(){},
      // 清空机构模糊查询
      clearallOrgSearch(){},
      // 点击机构树复选框
      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)
            }
          }
          // 数据变动更改人员树
          this.nodeCheckedUserData=[];
          this.ruleForm.selectUser=[];
          this.checkedKeysUserData=[];
          this.getUserListByOrgChange('')

      },
      // 点击机构树节点
      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 追加数据 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"
            });
          }
        })
      },
// 检查机构end
// 检察人员start
      // 获取模糊查询人员树
            getUserListByOrgChange(val){
              this.checkedKeysOrgData = this.unique(this.checkedKeysOrgData)

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

            // 删除人员单个下拉菜单标签
            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(){},
            // 点击人员树复选框
            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>
相关推荐
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
燃先生._.8 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖9 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
black^sugar10 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_8576009511 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_8576009511 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL11 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据11 小时前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
轻口味11 小时前
Vue.js 核心概念：模板、指令、数据绑定
vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程