美文网首页
element 动态加载tree

element 动态加载tree

作者: 流泪手心_521 | 来源:发表于2020-10-26 15:33 被阅读0次
1. image.png

1.用的是element的tree的懒加载,但是load方法中的node和resolve都是tree自带的参数,在选中下拉中直接调用ztee的方法是得不到的,所以在调用ztree的方法的时候把node和resolve存起来,在选中的时候调用

 // 加载树型组织部门信息(非公开ztree数据)
            loadNodeTwo(node, resolve) {
                this.node=node;//在data里面定义的参数
                this.resolve=resolve;//在data里面定义的参数
                  let params = {
                  deptType: node.key==null?this.noAnnounceParams.myOrgType:node.data.deptType,
                  orgCode: node.key==null?this.noAnnounceParams.myOrgCode:node.data.orgCode,
                };
              sctMngApi.queryDeptList(params).then(res => {
                      if (res.status == 0) {
                        return resolve(res.data)
                      } else {
                        return this.$message.error(res.message)
                      }
                  })
              },

2.在选中的时候调用tree方法

//非公开选中那个作为根节点 select
          changeChecked(rows) {
            if(rows.length>0){
              rows.forEach(item=>{
                if(item.orgCode===this.dialogForm.orgCode){//说明是选中的
                  this.noAnnounceParams.myOrgCode=item.orgCode;
                  this.noAnnounceParams.myOrgName=item.orgName;
                  this.noAnnounceParams.myOrgType=item.orgType
                }
              })
              this.node.childNodes=[]//但是必须清空子节点
              this.loadNodeTwo(this.node,this.resolve)//调用非公开树接口
            }
          },

3.全部的代码

<template>
  <div id="contentMng">
    <!--钉钉推送-->
    <el-dialog :close-on-click-modal="false" :before-close="closeDialog" :title="dialogTitle"
               :visible.sync="dialogVisible" v-if="dialogVisible" class="dialogForm">
      <el-form :model="dialogForm" :rules="dialogFormRules" ref="dialogForm">
          <el-form-item  prop="orgNodes" label="推送组织/人员" v-if="dialogForm.announceType==2">
            <el-tree
                    v-model="dialogForm.orgNodes"
                    class="org_div"
                    @check-change="handleCheckChange"
                    :props="props"
                    :load="loadNode"
                    lazy
                    show-checkbox
                    node-key="orgCode"
                    ref="tree">
            </el-tree>
          </el-form-item>
        <div v-if="dialogForm.announceType==2">
          <el-form-item v-if="dialogForm.orgCode" label="模块组织">
            <el-input v-if="dialogForm.orgCode" disabled
                      style="width: 529px"
                      type="textarea" v-model="dialogForm.orgCode" ></el-input>
          </el-form-item>
        </div>
        <div v-else>
        <el-form-item label="模块组织">
            <el-select v-model="noAnnounceParams.myOrgCode" placeholder="请选择"  class="selectBox"  @change="changeChecked(options)">
              <el-option
                      v-for="item in options"
                      :key="item.orgCode"
                      :label="item.orgName"
                      :value="item.orgCode"
              >
              </el-option>
            </el-select>
            <el-tree
                    v-if="dialogForm.announceType==1"
                    v-model="dialogForm.orgNodes"
                    class="org_div org_box"
                    :load="loadNodeTwo"
                    @check-change="handleCheckChangeNoAnnounce"
                    :props="noPropsNoAnnounce"
                    lazy
                    show-checkbox
                    node-key="orgCode"
                    ref="noAnnounceZtree">
            </el-tree>
        </el-form-item>
          <el-form-item v-if="dialogForm.orgCode&&dialogForm.announceType==1" label="模块组织">
            <el-input v-if="dialogForm.orgCode&&dialogForm.announceType==1" disabled
                      style="width: 529px"
                      type="textarea" v-model="dialogForm.orgCode" ></el-input>
          </el-form-item>
          </div>
      </el-form>
      <div class="dialog_button">
        <el-button type="primary" @click="submitInfo('dialogForm')">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "contentMng",
        components:{
          selectSectionColumn
        },
        data() {
            return {
                /*钉钉推送*/
                selectCheckedData:[],
                announceId:'',//当前数据id
                // announceType:'',//2公开,1非公开
                props: {
                  label: 'orgName',
                  children: 'children'
                },
                noProps: {
                  label: 'orgName',
                  children: 'children'
                },
                orgNodes: '',
                dialogTitle: '',
                dialogVisible: false,
                orgInfoList:[],
                userInfoList:[],
                dialogForm: {
                  announceType:'',//2公开,1非公开
                  announceId: '',
                  orgInfoList: [],
                  userInfoList:[],
                  orgCode: '',
                  orgNodes: ''
                },
              //非公开
              noAnnounceParams:{
                myOrgCode:'',//选中的code
                myOrgType:'',//选中的type
                myOrgName:''//选中的name
              },
              options:[],//非公开下拉的数据
              noPropsNoAnnounce: {
                label: 'orgName',
                children: 'children'
              },
              node:[],
              resolve:[],
              value: '',
              dialogFormRules: {
                // orgNodes: [{required: true, message: '请选择模块组织', trigger: ['change', 'blur']}]
              },
              myOrgInfoList:[],
              showOrgInfoListData:[], //根据此字段判断是否是添加还是修改,有数据就是修改,没有数据就是添加
            }
        },
        methods: {
            //钉钉推送
            push(row ){
              this.dialogTitle = '钉钉推送';
              this.dialogVisible = true
              this.dialogForm.announceId=row.announceId;
              this.dialogForm.announceType=row.announceType //1是非公开,2是公开
              ctentMngApi.pushOrgInfoData(this.dialogForm.announceId).then(res => {//调用此接口判断是否是添加还是编辑,如果res.data.orgInfoList||res.data.userInfoList有数据是编辑,没有数据是添加
                if(res.status==0){
                  this.showOrgInfoListData=res.data.orgInfoList
                  let arr=[];
                  if(res.data.orgInfoList){
                    res.data.orgInfoList.map((item)=>{
                      arr.push(item.orgName)
                      return this.dialogForm.orgCode=arr.join(',')
                    });
                  }
                }
              })
              if(this.dialogForm.announceType==1){//非公开
                  //非公开,从列表找到list传给钉钉推送下拉
                if(row.sectionOrg&&row.sectionOrg.orgList.length>0){
                    let result={};
                    this.options=[];
                    row.sectionOrg.orgList.map(item=>{
                      if(this.options.indexOf(item.orgCode)){
                        result={
                          orgName:item.orgName,
                          orgCode:item.orgCode,
                          orgType:item.orgType
                        };
                      }
                      this.options.push(result)
                    })
                  this.noAnnounceParams.myOrgCode=row.sectionOrg.orgList[0].orgCode;//第一次加载默认第一项值
                  this.noAnnounceParams.myOrgType=row.sectionOrg.orgList[0].orgType;
                  this.noAnnounceParams.myOrgName=row.sectionOrg.orgList[0].orgName;
                  }
              }
            },
  loadNodeTwo(node, resolve) {
                this.node=node;//在data里面定义的参数
                this.resolve=resolve;//在data里面定义的参数
                  let params = {
                  deptType: node.key==null?this.noAnnounceParams.myOrgType:node.data.deptType,
                  orgCode: node.key==null?this.noAnnounceParams.myOrgCode:node.data.orgCode,
                };
              sctMngApi.queryDeptList(params).then(res => {
                      if (res.status == 0) {
                        return resolve(res.data)
                      } else {
                        return this.$message.error(res.message)
                      }
                  })
              },
          //非公开选中那个作为根节点 select
          changeChecked(rows) {
            if(rows.length>0){
              rows.forEach(item=>{
                if(item.orgCode===this.dialogForm.orgCode){//说明是选中的
                  this.noAnnounceParams.myOrgCode=item.orgCode;
                  this.noAnnounceParams.myOrgName=item.orgName;
                  this.noAnnounceParams.myOrgType=item.orgType
                }
              })
              this.node.childNodes=[]
              this.loadNodeTwo(this.node,this.resolve)//调用非公开树接口
            }
          },
          //动态加载节点数据的方法
            handleCheckChangeNoAnnounce() {
              this.dialogForm.orgInfoList=this.$refs.noAnnounceZtree.getCheckedNodes()
            },
        
          // 获取除子节点的选中数据
          getNodes() {
            let  checkedNodes=[];
            // 获取选中数据
            if(this.dialogForm.announceType==1){ //非公开
              checkedNodes = this.$refs.noAnnounceZtree.getCheckedNodes();
            }else{//公开
              checkedNodes = this.$refs.tree.getCheckedNodes();
            }

            // 存放选中的orgCode数组
            let orgCodes = []
            for (let i in checkedNodes) {
              orgCodes.push(checkedNodes[i].orgCode)
            }

            // 存放数据父节点
            let orgInfoList = []
            for (let k in checkedNodes) {
              // 判断父节点是否存在于选中的orgCode数组中
              // 若不存在,则存入orgInfoList
              if (orgCodes.indexOf(checkedNodes[k].fatherOrgCode) === -1) {
                orgInfoList.push(checkedNodes[k])
              }
            }
            // 返回选中 除子节点的数据
            this.myOrgInfoList=orgInfoList;
          },
          // 确定
          submitInfo() {
            this.$refs.dialogForm.validate(valid => {
              if (valid) {
                if(this.dialogForm.announceType==1){//非公开
                  if(this.showOrgInfoListData){//如果有组织就说明是编辑,否则是添加
                    this.edit()
                  }else{
                    this.add()
                  }
                }else{
                  if(this.dialogForm.orgCode){//公开,如果有组织就是编辑,否则是添加
                    this.edit()
                  }else{
                    this.add()
                  }
                }

              }
            });
          },
          //添加
          add(){
            this.getNodes();//组装的数据
            let params = {
              announceId: this.dialogForm.announceId,
              announceType: this.dialogForm.announceType,//公开,非公开
              orgInfoList: this.myOrgInfoList,
              userInfoList:[]
            };
            ctentMngApi.addPushData(params).then(res => {
              if (res.status === 0) {
                this.$message.success('钉钉推送成功!')
                this.getList();
              }
            }).finally(() => {
              this.closeDialog();
            })
          },
          //编辑
          edit(){
            this.getNodes();//组装的数据
            let params = {
              announceId: this.dialogForm.announceId,
              announceType: this.dialogForm.announceType,
              orgInfoList: this.myOrgInfoList,
              userInfoList:[]
            };
            ctentMngApi.editPushData(params).then(res => {
              if (res.status === 0) {
                this.$message.success('钉钉推送成功!')
                this.getList();
              }
            }).finally(() => {
              this.closeDialog();
            })
          },
          // 关闭新增/修改版块对话框
          closeDialog() {
            this.dialogVisible = false
            if (this.dialogForm.announceId == '') {
              this.$refs.tree.setCheckedKeys([]);
            }
            this.dialogForm={
              announceId: '',
              orgInfoList: [],
              userInfoList:[],
              announceType:'',//2公开,1非公开
              orgCode: '',
              orgNodes: ''
            };
            this.$nextTick(() => {
              if(this.$refs.dialogForm){
                this.$refs.dialogForm.clearValidate();
              }
            });
          }
        },
        created() {
          this.getList()
        }
    }
</script>


相关文章

网友评论

      本文标题:element 动态加载tree

      本文链接:https://www.haomeiwen.com/subject/kuiamktx.html