ludc
2023-07-11 9d8be8e7580ef577def96c852288a5a95eab4ea3
Source/UBCS-WEB/src/components/Tree/classifyTrees.vue
@@ -2,8 +2,9 @@
<template>
  <el-container>
    <!--    左侧菜单-->
    <el-aside>
    <el-aside >
      <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;">
        <div>
        <div>
          <div style="display: flex;justify-content: space-around">
            <el-button plain size="small" type="primary" @click="TreeAdd">添加</el-button>
@@ -32,7 +33,7 @@
            <el-form-item label="编码规则:" label-width="150px">
              <el-input v-model="TreeAddform.codeRuleOidName" autocomplete="off" style="width: 585px" @focus="CodeFoucus"></el-input>
            </el-form-item>
            <el-form-item label="业务类型:" label-width="150px" v-if="TreeFlag==false">
            <el-form-item label="业务类型:" label-width="150px" v-if="TreeFlagCode==false">
              <el-input v-model="TreeAddform.btmTypeName" autocomplete="off" style="width: 585px" @focus="btmFoucus"></el-input>
            </el-form-item>
            <el-form-item label="关键属性查询规则:" label-width="150px">
@@ -51,15 +52,16 @@
        </el-dialog>
        <!--        修改对话框-->
        <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="修改分类">
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}" :TreeFlag="TreeFlag"></classifyTreeform>
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}" :TreeFlag="TreeFlagCode" ::nodeClickList="nodeClickList"></classifyTreeform>
        </el-dialog>
        <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" :defaultExpandAll="false"
                   :option="Treeoption"
                   style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px"
                   @node-click=" nodeClick"
                   @check-change="checkChange"
                   @node-click="nodeClick"
                   class="classifyTree"
        >
        </avue-tree>
        </div>
      </basic-container>
    </el-aside>
    <el-main>
@@ -67,7 +69,7 @@
        <!--        右侧表格-->
        <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='tab1'">
           <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'renonly'"></classifyTreeform>
           <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'renonly'" ></classifyTreeform>
        </span>
        <span v-else-if="type.prop==='tab2'">
            <basic-container>
@@ -117,7 +119,7 @@
                    <el-aside width="300px">
                      <div style="margin-bottom: 5px"><el-tag>主题库分类</el-tag></div>
                      <!--                      克隆模板的树 沿用首页树的loading和option,但是data和v-model绑定的数据创建一个新的变量,另外点击方法也是重新获取来操作克隆模板的数据-->
                        <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata"
                        <avue-tree  v-model="TreeAvueform" v-loading="loading" :data="Treedata"
                                   :defaultExpandAll="false"
                                   :option="Treeoption"
                                   style="height: 50.5vh;margin-right: 10px"
@@ -286,7 +288,7 @@
          </template>
          <avue-crud :data="BtmData" :option="masterOption" @select="btmSelect"></avue-crud>
          <div style="height: 30px">
            <div style="display: inline-block;float: left;border: 1px solid #eee;padding: 5px;margin-top: 5px;font-size: 14px " >已设置的值为:[{{this.TreeAddform.btmtypename}}]</div>
            <div style="display: inline-block;float: left;border: 1px solid #eee;padding: 5px;margin-top: 5px;font-size: 14px " >已设置的值为:[{{this.TreeAddform.btmTypeName}}]</div>
            <div style="padding-top: 10px;display: flex; justify-content: flex-end;float: right;overflow: hidden" >
              <el-button type="primary" size="small" @click="btmHandlerClick">确定</el-button>
              <el-button  size="small" @click="BtmdialogVisible=false">取消</el-button>
@@ -328,7 +330,7 @@
  data() {
    return {
      //树节点显示隐藏
      TreeFlag:false,
      TreeFlagCode:false,
      //编码规则
      MasterdialogVisible:false,
      masterData:[],
@@ -540,11 +542,21 @@
        column: [
          {
            label: "模板编号",
            prop: "id"
            prop: "id",
            rules: [{
              required: true,
              message: "模板编号",
              trigger: "blur"
            }]
          },
          {
            label: "模板名称",
            prop: "name",
            rules: [{
              required: true,
              message: "模板名称",
              trigger: "blur"
            }]
          },
          {
            label: "模板描述",
@@ -616,6 +628,17 @@
  mounted() {
    this.type = this.tabOption.column[0];
    this.getAttr();
    const treeEle = this.$refs.tree.$el
    treeEle.addEventListener('click', (e) => {
      if (e.target.nodeName !== 'SPAN') {
        this.$refs.tree.setCurrentKey(null)
        this.nodeClickList = {}
        this.TreeList=[]
        this.TreeFlagCode=false
        console.log('后TreeList',this.TreeList)
        console.log('后nodeClickList',this.nodeClickList)
      }
    }, true)
  },
  computed:{
    crudTreeOption(){
@@ -628,11 +651,21 @@
        column: [
          {
            label: "模板编号",
            prop: "id"
            prop: "id",
            rules: [{
              required: true,
              message: "模板编号",
              trigger: "blur"
            }]
          },
          {
            label:"模板名称",
            prop:"name"
            label: "模板名称",
            prop: "name",
            rules: [{
              required: true,
              message: "模板名称",
              trigger: "blur"
            }]
          },
          {
            label: "模板描述",
@@ -829,8 +862,8 @@
      }else {
        this.BtmdialogVisible=false;
        this.btmSelectList=[]
        this.$set(this.loneTreeNewForm,'btmtypename',this.btmName ||this.btmOid)
        this.$set(this.loneTreeNewForm,'btmtypeid',this.btmOid)
        this.$set(this.TreeAddform,'btmTypeName',this.btmName)
        this.$set(this.TreeAddform,'btmTypeId',this.btmOid)
        this.$emit('MasterHandler',this.loneTreeNewForm)
      }
    },
@@ -918,18 +951,20 @@
    //树节点添加事件
    TreeAddHandler() {
      const data = this.TreeAddform;
      data.btmTypeName= this.TreeList.btmtypename
      // data.btmtypename= this.TreeList.btmtypename
      this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid);
      // console.log("data", data);
      console.log("data", data);
      TreeSave(data)
        .then(() => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          Object.keys(this.TreeAddform).forEach(key => {
            this.TreeAddform[key] = "";
          });
          this.getAttr();
          this.TreeAddFormVisible = false;
          this.TreeAddform = "";
        })
        .catch((res) => {
          this.$message({
@@ -996,7 +1031,7 @@
    },
    //修改回填
    TreeEdit() {
      if (this.nodeClickList == "") {
      if ( Object.keys(this.nodeClickList).length<1) {
        this.$message({
          type: 'warning',
          message: '请先从树上选择一条数据!'
@@ -1076,9 +1111,8 @@
    //树点击事件
    async nodeClick(data) {
      //定义一个模板属性id,数据是模板管理表格里面的oid
      console.log('树',data)
      if(data.parentId == ""){
        this.TreeFlag=true;
        this.TreeFlagCode=true;
      }
      this.nodeClickList = data
      this.ProData=[]
@@ -1109,6 +1143,9 @@
        this.$message.error(error)
      }
    },
    treeClick(e) {
      console.log(e);
    },
    //克隆模板树的点击切换数据
    async ClonenodeClick(data){
      this.ClonenodeClickList=data;