Source/UBCS-WEB/src/components/Tree/classifyTrees.vue

@@ -2,16 +2,23 @@
<template>
  <el-container>
    <!--    左侧菜单-->
    <el-aside>
    <el-aside >
      <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;">
        <div>
          <div style="display: flex;justify-content: space-around">
            <el-button plain size="small" type="primary" @click="TreeAdd">添加</el-button>
            <el-button plain size="small" type="primary" @click="TreeEdit">修改</el-button>
            <el-button plain size="small" type="primary" @click="TreeDel">删除</el-button>
<!--            <el-button plain size="small" type="primary" @click="ExportExcel">导出</el-button>-->
<!--            <el-button plain size="small" type="primary" @click="ImportExcel">导入</el-button>-->
            <el-button plain size="small" type="primary" @click="flushed">刷新</el-button>
        <div>
          <div style="display: flex; flex-direction: column;">
            <div style="display: flex;">
              <el-button plain size="small" type="primary" @click="TreeAdd">添加</el-button>
              <el-button plain size="small" type="primary" @click="TreeEdit">修改</el-button>
              <el-button plain size="small" type="primary" @click="TreeDel">删除</el-button>
              <el-button plain size="small" type="primary" @click="flushed">刷新</el-button>
            </div>
            <div style="display: flex; margin-top: 10px">
              <el-button plain size="small" type="primary" @click="Enable">启用</el-button>
              <el-button plain size="small" type="primary" @click="Deactivate">停用</el-button>
              <el-button plain size="small" type="primary" @click="ImportExcel">导入</el-button>
              <el-button plain size="small" type="primary" @click="ExportExcel">导出</el-button>
            </div>
          </div>
          <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
          </div>
@@ -30,18 +37,18 @@
              <el-input v-model="TreeAddform.description" autocomplete="off" style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item label="编码规则：" label-width="150px">
              <el-input v-model="TreeAddform.coderuleoidName" readonly autocomplete="off" style="width: 585px" @focus="CodeFoucus"></el-input>
              <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="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">
              <el-input v-model="TreeAddform.codekeyattrrepeatoidName" readonly autocomplete="off" @focus="Keyfouce"
                <el-input v-model="TreeAddform.codeKeyAttrRepeatOidName" autocomplete="off" @focus="Keyfouce"
                        style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item label="相似查询规则：" label-width="150px">
              <el-input v-model="TreeAddform.codeResembleRuleOidName"
               autocomplete="off" 
               readonly
               @focus="simFouce"
               style="width: 585px"></el-input>
              <el-input v-model="TreeAddform.codeResembleRuleOidName" autocomplete="off" @focus="simFouce"
                        style="width: 585px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
@@ -51,15 +58,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}"></classifyTreeform>
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}" :TreeFlag="TreeFlagCode" ::nodeClickList="nodeClickList" @referTreeForm="referTreeForm" @flushed="flushed"></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,11 +75,11 @@
        <!--        右侧表格-->
        <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>
               <avue-crud v-model="crudForm" v-loading="FormLoing" :data="this.Formlist" :option="this.crudTreeOption"
               <avue-crud ref="textCrud" v-model="crudForm" v-loading="FormLoing" :data="this.Formlist" :option="this.crudTreeOption"
                          @row-save="CrudRowSave"
                          @row-del="CrudRowDel"
                          @row-update="CrudRowUpdata"
@@ -81,8 +89,6 @@
            <template slot="menuLeft">
              <el-button plain size="small" type="primary" @click="FindeHanler">查询</el-button>
              <el-button plain size="small" type="primary" @click="TemRefresh">刷新</el-button>
            <el-button plain size="small" type="primary" @click="Enable">启用</el-button>
            <el-button plain size="small" type="primary" @click="Deactivate">停用</el-button>
              <el-button plain size="small" type="primary" @click="CloneBtn">从其它模板克隆</el-button>
              <!--              查询对话框-->
           <el-dialog :visible.sync="FindFormVisible" append-to-body title="高级查询">
@@ -117,7 +123,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"
@@ -143,6 +149,7 @@
                            <avue-crud v-model="ClonecrudForm" v-loading="FormLoing" :data="this.CloneFormlist"
                                       :option="this.ClonecrudTreeOption"
                                       @selection-change="selectionChange"

                            ></avue-crud>
                         </div>
                       </el-main>
@@ -163,6 +170,44 @@
                    </el-dialog>
                </el-dialog>
            </template>
                  <template #menu="{ size, row ,index}">
                    <el-button type="text"
                               v-if="row.lcStatus != 'Released'"
                               icon="el-icon-edit-outline "
                                :size="size"
                                @click="$refs.textCrud.rowEdit(row)">编辑</el-button>
                    <el-button type="text"
                               icon="el-icon-delete"
                               :size="size"
                               @click="$refs.textCrud.rowDel(row,index)">删除</el-button>
                <el-button
                  v-show="row.lcStatus === 'Released'"
                  @click="upAndStopAndStart(row, 'upVersion')"
                  :loading="row.upVersionLoad"
                  icon="el-icon-upload2"
                  type="text"
                  :size="size"
                >升版</el-button
                >
                <el-button
                  v-show="row.lcStatus === 'Released'"
                  @click="upAndStopAndStart(row, 'stopLose')"
                  :loading="row.stopLoseLoad"
                  icon="el-icon-circle-close"
                  type="text"
                  :size="size"
                >停用/失效</el-button
                >
                <el-button
                  v-show="['Disabled', 'Editing'].includes(row.lcStatus)"
                  @click="upAndStopAndStart(row, 'startRelease')"
                  :loading="row.startReleaseLoad"
                  icon="el-icon-circle-check"
                  type="text"
                  :size="size"
                >启用/发布</el-button
                >
              </template>
          </avue-crud>

          </basic-container>
@@ -209,7 +254,7 @@
          </template>
          <avue-crud :data="KeyData" :option="masterOption" @select="KeySelect"></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.codekeyattrrepeatoidName ==''?'未设置值':this.TreeAddform.codekeyattrrepeatoidName}}]</div>
            <div style="display: inline-block;float: left;border: 1px solid #eeeeee;padding: 5px;margin-top: 5px;font-size: 14px " >已设置的值为:[{{this.TreeAddform.codeKeyAttrRepeatOidName ==''?'未设置值':this.TreeAddform.codekeyattrrepeatoidName}}]</div>
            <div style="padding-top: 10px;display: flex; justify-content: flex-end;float: right;overflow: hidden" >
              <el-button type="primary" size="small" @click="KeyHandlerClick">确定</el-button>
              <el-button  size="small" @click="KeydialogVisible=false">取消</el-button>
@@ -240,6 +285,30 @@
            </div>
          </div>
        </el-dialog>
<!--        业务类型-->
        <el-dialog  :visible.sync="BtmdialogVisible"   title="为【业务类型规则】选取值" append-to-body>
          <template>
            <el-select v-model="SelectValue" placeholder="请选择" style="width: 135px !important;">
              <el-option
                v-for="item in SelectOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 130px">
              </el-option>
            </el-select>
            <el-input style="width: 260px;margin-left: 15px" placeholder="输入值后进行模糊查询" v-model="SelectFInd"></el-input>
            <el-button size="small"  type="primary" plain @click="BtmSelectFindeHandler" style="margin-left: 20px">查询</el-button>
          </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="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>
            </div>
          </div>
        </el-dialog>
      </basic-container>
    </el-main>
  </el-container>
@@ -260,7 +329,10 @@
  addSave,
  deleteData,
  editSave,
  copy
  copy,
  upVersion,
  stopLose,
  startRelease
} from "@/api/template/templateAttr";
import {defaultReferDataGrid,referDataGrid} from '@/api/MasterData/master'
export default {
@@ -268,9 +340,11 @@
  //使用inject接收参数
  //Treeoption左侧树新增表单项 Treedata左侧树节点 配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
  //Treeform右侧表单配置项
  inject: [, "crudTreeData"],
  inject: ["crudTreeData"],
  data() {
    return {
      //树节点显示隐藏
      TreeFlagCode:false,
      //编码规则
      MasterdialogVisible:false,
      masterData:[],
@@ -289,6 +363,12 @@
      simData:[],
      SimidialogVisible:false,
      simSelectList:[],
      //业务类型
      btmName:"",
      btmOid:"",
      BtmData:[],
      BtmdialogVisible:false,
      btmSelectList:[],
      masterOption:{
        addBtn:false,
        index:true,
@@ -390,11 +470,11 @@
        //相似查询规则
        codeResembleRuleOidName: "",
        //关键属性查询规则
        codekeyattrrepeatoidName: "",
        codeKeyAttrRepeatOidName: "",
        //编码规则
        coderuleoidName: "",
        codeRuleOidName: "",
        //存储的业务类型
        btmtypename: ""
        btmTypeName: ""
      },
      //avue-tree数据，暂时没有作用，里面功能用element写了，只用avue的一个树组件不用内置表单了。
      TreeAvueform: {},
@@ -476,11 +556,21 @@
        column: [
          {
            label: "模板编号",
            prop: "id"
            prop: "id",
            rules: [{
              required: true,
              message: "模板编号",
              trigger: "blur"
            }]
          },
          {
            label: "模板名称",
            prop: "name",
            rules: [{
              required: true,
              message: "模板名称",
              trigger: "blur"
            }]
          },
          {
            label: "模板描述",
@@ -510,15 +600,59 @@
          prop: 'tab2',
        }]
      },
      //模拟表单假数据
      Treeform: [
        {
          name: "测试1",
          sex: "男",
          value: 0
        },
        {
          name: "测试2",
          sex: "女",
          value: 1
        }
      ],
      //传递给子组件动态渲染的数据
      TreeList: {},
      codeClassifyOid: ""
      codeClassifyOid: "",
      upAndStopAndStartData: {
        upVersion: {
          tip: "是否进行升版？",
          typeText: "升版",
          funAPi: upVersion,
          load: 'upVersionLoad'
        },
        stopLose: {
          tip: "模板只有发布状态才能被使用，是否确定停用？",
          typeText: "停用/失效",
          funAPi: stopLose,
          load: 'stopLoseLoad'
        },
        startRelease: {
          tip: "是否确定启用/发布这个模板，模板只有发布状态才能被使用，是否继续？",
          typeText: "启用/发布",
          funAPi: startRelease,
          load: 'startReleaseLoad'
        }
      },
      //模板管理编辑
      showEditBtn:false,
    }
  },
  //tab栏默认是表格
  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;
      }
    }, true)
  },
  computed:{
    crudTreeOption(){
@@ -528,14 +662,26 @@
        height:180,
        selection:true,
        addBtn:this.Formlist.length<=0  && this.nodeClickList != "",
        editBtn:false,
        delBtn:false,
        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: "模板描述",
@@ -556,6 +702,10 @@
    }
  },
  methods: {
    //模板管理已发布编辑
    // checkShowEditBtn() {
    //   this.showEditBtn = this.Formlist.some(item => item.lcStatus === 'Released');
    // },
    //编码规则失焦
    CodeFoucus(){
      this.MasterdialogVisible=true;
@@ -596,10 +746,9 @@
      }else {
        this.MasterdialogVisible=false;
        this.masterSelectList=[]
        this.$set(this.TreeAddform,'coderuleoidName',this.masterName)
        this.$set(this.TreeAddform,'coderuleOid',this.masterOid)
        this.$set(this.TreeAddform,'codeRuleOidName',this.masterName)
        this.$set(this.TreeAddform,'codeRuleOid',this.masterOid)
        this.$emit('MasterHandler',this.loneTreeNewForm)
        console.log(this.loneTreeNewForm)
      }
    },
    //编码接口
@@ -625,9 +774,8 @@
      }else {
        this.KeydialogVisible=false;
        this.KeySelectLIst=[]
        this.$set(this.TreeAddform,'codeResembleRuleOidName',this.simName)
        this.$set(this.TreeAddform,'codeResembleRuleOid',this.simOid)
        this.$emit('MasterHandler',this.loneTreeNewForm)
        this.$set(this.TreeAddform,'codeKeyAttrRepeatOidName',this.KeyName)
        this.$set(this.TreeAddform,'codeKeyAttrRepeatOid',this.KeyOid)
      }
    },
    //关键属性查询
@@ -706,7 +854,6 @@
      this.simSelectList=row;
      this.simName=row[0].name;
      this.simOid=row[0].oid;
      console.log('oid',this.oid)
    },
    //相似项项接口
    simdefaultRend(){
@@ -716,6 +863,56 @@
        'conditionMap["lcstatus"]':'Enabled'
      }).then(res=>{
        this.simData=res.data.records;
      })
    },
    //业务类型失焦
    btmFoucus(){
      this.BtmdialogVisible=true;
      this.btmdefaultRend()
    },
    //业务类型确定
    btmHandlerClick(){
      if(this.btmSelectList.length>1){
        this.$message.warning('只能选择一条数据')
      }else if(this.btmSelectList.length<=0){
        this.$message.warning('请选择一条数据')
      }else {
        this.BtmdialogVisible=false;
        this.btmSelectList=[]
        this.$set(this.TreeAddform,'btmTypeName',this.btmName)
        this.$set(this.TreeAddform,'btmTypeId',this.btmOid)
        this.$emit('MasterHandler',this.loneTreeNewForm)
      }
    },
    //业务类型查询
    BtmSelectFindeHandler(){
      if(this.SelectValue == 'id'){
        const masterParameter={
          'conditionMap[id]':this.SelectFInd
        }
        this.btmdefaultRend(masterParameter);
        this.SelectValue=""
        this.SelectFInd=""
      }else if(this.SelectValue == 'name'){
        const masterParameter={
          'conditionMap[name]':this.SelectFInd
        }
        this.btmdefaultRend(masterParameter)
        this.SelectValue=""
        this.SelectFInd=""
      }
    },
    //业务类型多选
    btmSelect(row){
      this.btmSelectList=row;
      this.btmName=row[0].name;
      this.btmOid=row[0].oid;
    },
    //业务类型接口
    btmdefaultRend(masterParameter){
      referDataGrid({valueField:'id',isMuti:'false',...masterParameter}).then(res=>{
        // console.log(res)
        this.BtmData=res.data.data.records
      })
    },
    //子传父
@@ -770,23 +967,27 @@
    },
    //树节点添加事件
    TreeAddHandler() {
      const data = this.TreeAddform
      this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid)
      // console.log('data',data)
      TreeSave(data).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
      const data = this.TreeAddform;
      // data.btmtypename= this.TreeList.btmtypename
      this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid);
      TreeSave(data)
        .then(() => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          Object.keys(this.TreeAddform).forEach(key => {
            this.TreeAddform[key] = "";
          });
          this.getAttr();
          this.TreeAddFormVisible = false;
        })
        .catch((res) => {
          this.$message({
            type: "warning",
            message: res,
          });
        });
        this.getAttr();
        this.TreeAddFormVisible = false
        this.TreeAddform = ""
      }).catch(res => {
        this.$message({
          type: 'warning',
          message: res
        });
      })
    },
    //树节点删除按钮
    TreeDel() {
@@ -846,7 +1047,7 @@
    },
    //修改回填
    TreeEdit() {
      if (this.nodeClickList == "") {
      if ( Object.keys(this.nodeClickList).length<1) {
        this.$message({
          type: 'warning',
          message: '请先从树上选择一条数据!'
@@ -925,6 +1126,9 @@
    //树点击事件
    async nodeClick(data) {
      //定义一个模板属性id，数据是模板管理表格里面的oid
      if(data.parentId == ""){
        this.TreeFlagCode=true;
      }
      this.nodeClickList = data
      this.ProData=[]
      try {
@@ -945,14 +1149,25 @@
          this.$message.error(res)
        })
        //  基本信息表单数据
        await getObjectByOid(this.nodeClickList.oid).then(res => {
          this.TreeList = res.data.data;
        }).catch(res => {
          this.$message.error(res)
        })
          await getObjectByOid(this.nodeClickList.oid).then(res => {
            this.TreeList = res.data.data;
          }).catch(res => {
            this.$message.error(res)
          })
      } catch (error) {
        this.$message.error(error)
      }
    },
    treeClick(e) {
      console.log(e);
    },
    //基本信息表单刷新
    referTreeForm(){
       getObjectByOid(this.nodeClickList.oid).then(res => {
        this.TreeList = res.data.data;
      }).catch(res => {
        this.$message.error(res)
      })
    },
    //克隆模板树的点击切换数据
    async ClonenodeClick(data){
@@ -970,44 +1185,6 @@
    handleChange(column) {
      this.type = column;
    },
    // //高级查询按钮
    // handleSelectChange(key) {
    //   const selectedValue = this.FindSelect[key];
    //   console.log(selectedValue)
    //   console.log(this.QueryArray[0])
    //   switch (this.FindSelect[key]) {
    //     case '0':
    //       this.QueryArray[key] = '';
    //       this.$set(this.QueryArray, key, '');
    //       // 如果选中的是模板编号，相应的输入框双向绑定关系为 QueryArray.id
    //       this.$set(this.QueryArray, 'id', this.QueryArray[key]);
    //       break;
    //     case '1':
    //       this.QueryArray[key] = '';
    //       this.$set(this.QueryArray, key, '');
    //       // 如果选中的是模板名称，相应的输入框双向绑定关系为 QueryArray.name
    //       this.$set(this.QueryArray, 'name', this.QueryArray[key]);
    //       break;
    //     case '2':
    //       this.QueryArray[key] = '';
    //       this.$set(this.QueryArray, key, '');
    //       // 如果选中的是模板描述，相应的输入框双向绑定关系为 QueryArray.description
    //       this.$set(this.QueryArray, 'description', this.QueryArray[key]);
    //       break;
    //     case '3':
    //       this.QueryArray[key] = '';
    //       this.$set(this.QueryArray, key, '');
    //       // 如果选中的是版本号，相应的输入框双向绑定关系为 QueryArray.revisionValue
    //       this.$set(this.QueryArray, 'revisionValue', this.QueryArray[key]);
    //       break;
    //     case '4':
    //       this.QueryArray[key] = '';
    //       this.$set(this.QueryArray, key, '');
    //       // 如果选中的是状态，相应的输入框双向绑定关系为 QueryArray.lcStatus
    //       this.$set(this.QueryArray, 'lcStatus', this.QueryArray[key]);
    //       break;
    //   }
    // },
    AdvQueries() {
      this.FindFormVisible = false
      //如果全部为空 allEmpty为true
@@ -1059,7 +1236,6 @@
          });
        })
      }
      console.log('123',this.codeClassifyOid)
    },
    //模板管理修改
    CrudRowUpdata(row,index,done) {
@@ -1133,7 +1309,6 @@
        });
      } else {
        this.CloneinnerVisible=true;

      }
    },
    //点击从其它模板克隆
@@ -1188,6 +1363,27 @@
        this.FormLoing = false
      }, 600);
    },
    upAndStopAndStart(row, type) {
      this.$confirm(this.upAndStopAndStartData[type]["tip"], "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$set(row, this.upAndStopAndStartData[type]["load"], true)
        const { ts, oid } = row;
        this.upAndStopAndStartData[type]['funAPi']({ ts, oid }).then((res) => {
          if (res.data.code === 200) {
            this.$set(row, this.upAndStopAndStartData[type]["load"], false)
            this.TemRefresh();
            this.$message.success(
              this.upAndStopAndStartData[type]["typeText"] + "成功！"
            );
          }
        }).catch(() => {
          this.$set(row, this.upAndStopAndStartData[type]["load"], false)
        });
      });
    },
  }
}
</script>