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

@@ -1,3 +1,4 @@
<!--suppress ALL -->
<template>
  <el-container>
    <!--    左侧菜单-->
@@ -6,15 +7,11 @@
        <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="Enable">启用</el-button>
          </div>
          <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
            <el-button plain size="small" type="primary" @click="Deactivate">停用</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;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
          </div>
        </div>
        <!--        树节点添加对话框-->
@@ -52,16 +49,15 @@
        </el-dialog>
        <!--        修改对话框-->
        <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="修改分类">
          <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
        </el-dialog>
        <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false"
        <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"
        >
        </avue-tree>

      </basic-container>
    </el-aside>
    <el-main>
@@ -69,24 +65,111 @@
        <!--        右侧表格-->
        <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='tab1'">
          <basic-container>
               <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption" v-loading="FormLoing"
           <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></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"
                          @row-save="CrudRowSave"
                          @row-del="CrudRowDel"
                          @row-update="CrudRowUpdata"
                          :before-close="beforeClose"
                          @select="selectHandle"
               >
            <template slot="menuLeft">
              <el-button plain size="small" type="primary">查询</el-button>
              <el-button plain size="small" type="primary" @click="FindFormVisible = true;">查询</el-button>
              <el-button plain size="small" type="primary" @click="TemRefresh">刷新</el-button>
              <el-button plain size="small" type="primary">从其它模板克隆</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="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>
              <div style="display: inline-block"> <el-input v-model="FindText" placeholder="请输入关键字按回车查询"
                                                            size="small"
                                                            @keyup.enter.native="EnterFind"></el-input></div>

              <!--              查询对话框-->
           <el-dialog :visible.sync="FindFormVisible" append-to-body title="高级查询">
              <div>
                <el-button size="small" type="primary" @click="AdvQueries">查询</el-button>
                <el-button size="small" type="primary">重置</el-button>
              </div>
             <div style="padding-left: 80px;margin-top: 15px;">
               <template v-for="(value, key) in FindSelect">
                <div style="display: flex;justify-content: space-around;width: 85%;margin-bottom: 15px">
                <el-select v-model="FindSelect[key]" placeholder="请选择" style="width: 28%"
                           @change="handleSelectChange(key)">
                  <el-option label="模板编号" value="0"></el-option>
                  <el-option label="模板名称" value="1"></el-option>
                  <el-option label="模板描述" value="2"></el-option>
                  <el-option label="版本号" value="3"></el-option>
                  <el-option label="状态" value="4"></el-option>
                 </el-select>
                <el-select v-model="condition[0]" placeholder="请选择" style="width: 15%">
                  <el-option label="包含" value="0"></el-option>
                  <el-option label="等于" value="1"></el-option>
                </el-select>
              <el-input v-model="QueryArray[key]" style="width: 49%"></el-input>
          <span> <i class="el-icon-delete" style="font-size: 22px;margin-top:8px;margin-left: 10px"/></span>
             </div>
          </template>
        </div>
           </el-dialog>
              <!--            模板克隆  -->
                <el-dialog :visible.sync="CloneVisible" append-to-body title="克隆模板">
                  <el-container>
                    <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"
                                   :defaultExpandAll="false"
                                   :option="Treeoption"
                                   style="height: 50.5vh;margin-right: 10px"
                                   @node-click="ClonenodeClick"
                        >
                        </avue-tree>
                    </el-aside>
                     <el-container>
                       <el-main>
                         <div style="padding-left: 10px;height: 50.5vh">
                           <div style="margin: 8px 0;display: flex">
                             <el-select v-model="Clonevalue" size="small" style="width: 130px;">
                               <el-option
                                 v-for="item in this.CloneSelectOptions"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                              </el-option>
                             </el-select>
                            <el-input v-model="CloneFind" size="small" style="width: 40%;margin-left: 15px" placeholder="输入值后按回车进行模糊查询"></el-input>
                             <el-button size="small" type="primary" plain style="margin-left: 10px" @click="CloneEnterFind"  @keyup.enter.native="CloneEnterFind">查询</el-button>
                           </div>
                            <avue-crud v-model="ClonecrudForm" v-loading="FormLoing" :data="this.CloneFormlist"
                                       :option="this.ClonecrudTreeOption"
                                       @selection-change="selectionChange"
                            ></avue-crud>
                         </div>
                       </el-main>
                     </el-container>
                    </el-container >
                   <div style="display: flex; justify-content: flex-end; align-items: center;margin-top: 10px" >
                     <el-button size="small " type="primary" @click="Clonehandler">确定</el-button>
                     <el-button size="small" @click="CloneVisible=false" >取消</el-button>
                   </div>
                      <el-dialog
                        width="30%"
                        title="克隆模板"
                        :visible.sync="CloneinnerVisible"
                        append-to-body>
                        <div>
                          <avue-form :option="CloneOption" @submit="Clonesubmit" v-model="CloneModel"></avue-form>
                        </div>
                    </el-dialog>
                </el-dialog>
            </template>
          </avue-crud>

          </basic-container>
    <templatePro :ProData="this.ProData"></templatePro>
        </span>
        <span v-else-if="type.prop==='tab2'">
           <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
          <templatePro :ProData="this.ProData" :crudOid="this.crudOid" :crudArray="this.crudArray" :Formlist="this.Formlist"></templatePro>
        </span>
      </basic-container>
    </el-main>
@@ -105,10 +188,14 @@
  TreeObjcet,
  TreeEnable,
  TreeDeactivate,
  importClassify,
  gridCodeClassifyTemplate,
  getObjectByOid,
  gridCodeClassifyTemplateAttr
  gridCodeClassifyTemplateAttr,
  gridCodeClassifyFindTemplate,
  addSave,
  deleteData,
  editSave,
  copy
} from "@/api/template/templateAttr";

export default {
@@ -116,12 +203,74 @@
  //使用inject接收参数
  //Treeoption左侧树新增表单项 Treedata左侧树节点 配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
  //Treeform右侧表单配置项
  inject: ['crudTreeOption', "crudTreeData"],
  inject: [, "crudTreeData"],
  data() {
    return {
      //表格option配置项
      crudTreeOption: {
        index: true,
        border: true,
        height:180,
        selection:true,
        addBtn:this.addFlag,
        column: [
          {
            label: "模板编号",
            prop: "id"
          },
          {
            label:"模板名称",
            prop:"name"
          },
          {
            label: "模板描述",
            prop:"description"
          },
          {
            label:"版本号",
            prop:"revisionSeq"
          },
          {
            label:"状态",
            prop:"lcStatusText"
          }
        ]
      },
      addFlag:false,
      // 表格当前行id
      crudOid:"",
      //表格当前选择数组
      crudArray:[],
      //模板属性展示内容
      ProData: [],
      //回车键搜索绑定值
      FindText: "",
      fileList: [],
      //高级查询对话框
      FindFormVisible: false,
      //克隆模板对话框
      CloneVisible: false,
      CloneinnerVisible:false,
      //高级查询下拉框
      FindSelect: {
        id: "0",
        name: "1",
        description: "2",
        revisionValue: "3",
        lcStatus: "4"
      },
      //高级查询条件
      condition: ["0", "0", "0", "0", "0"],
      //高级查询 等于/不等于
      Equalto: "0",
      //高级查询 输入框数据
      QueryArray: {
        id: "",
        name: "",
        description: "",
        revisionValue: "",
        lcStatus: ""
      },
      //停用启用接收数组
      FlagObj: {},
      //修改对话框
      TreeEditFormVisible: false,
@@ -129,11 +278,12 @@
      TreeAddFormVisible: false,
      //当前点击项
      nodeClickList: "",
      ClonenodeClickList:"",
      //分类和主题库状态
      TreeFlag: false,
      //树加载
      loading: false,
      FormLoing:false,
      FormLoing: false,
      TreeAddform: {
        id: "",
        name: "",
@@ -149,7 +299,10 @@
      },
      //avue-tree数据，暂时没有作用，里面功能用element写了，只用avue的一个树组件不用内置表单了。
      TreeAvueform: {},
      //克隆树
      CloneTreeAvueform:{},
      Treedata: [],
      CloneTreedata:[],
      Treeoption: {
        addBtn: false,
        editBtn: false,
@@ -159,19 +312,101 @@
        // //这个是多选
        // multiple: true,
      },
      //模板管理form
      crudForm: "",
      //动态切换处理过的表格数据
      //克隆模板form
      ClonecrudForm: "",
      //动态切换处理过的模板表格数据
      Formlist: [],
      //克隆模板数据
      CloneFormlist: [],
      //克隆模板下拉框value
      Clonevalue: "0",
      //克隆模板搜索输入框
      CloneFind:"",
      //克隆模板下拉框数据
      CloneSelectOptions: [{
        value: '0',
        label: '模板编号'
      },
        {
          value: '1',
          label: '模板名称'
        },
      ],
      //克隆模板确认表单数据
      CloneOption:{
        column:[
          {
            label:'模板编号',
            prop:'id',
            rules: [{
              required: true,
              message: "请输入模板编号",
              trigger: "blur"
            }]
          }, {
            label:'模板名称',
            prop:'name',
            rules: [{
              required: true,
              message: "请输入模板名称",
              trigger: "blur"
            }]
          },
          {
            label:'描述',
            prop:'desc',
            type:'textarea',
            span:24
          }
        ]
      },
      //克隆模板双向绑定数据
      CloneModel:[],
      CloneSelect:[],
      //克隆模板option
      ClonecrudTreeOption: {
        index: true,
        border: true,
        menu: false,
        addBtn: false,
        selection: true,
        header: false,
        height: 430,
        column: [
          {
            label: "模板编号",
            prop: "id"
          },
          {
            label: "模板名称",
            prop: "name",
          },
          {
            label: "模板描述",
            prop: "description"
          },
          {
            label: "版本号",
            prop: "revisionSeq",
            display: false
          },
          {
            label: "状态",
            prop: "lcStatusText",
            display: false
          }
        ]
      },
      //tab状态
      type: {},
      //Tab配置项
      tabOption: {
        column: [{
          icon: 'el-icon-info',
          label: '基本信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '模板管理',
          prop: 'tab2',
        }]
@@ -191,7 +426,7 @@
      ],
      //传递给子组件动态渲染的数据
      TreeList: {},
      //定义一个模板属性id，数据是模板管理表格里面的oid
      codeClassifyOid: ""
    }
  },
  //tab栏默认是表格
@@ -200,22 +435,28 @@
    this.getAttr();
  },
  methods: {
    //行单选事件
    selectHandle(selection,row){
      this.crudOid=row.oid
      this.crudArray=selection
    },
    //分类树数据处理
    getAttr() {
      getAtrrList().then(res => {
        this.Treedata = res.data;
        this.CloneTreedata = res.data;
        this.Treedata.forEach(() => {
          for (let i = 0; i < this.Treedata.length; i++) {
            this.Treedata[i].value = i;
          }
        })
        //调用修改属性名方法
        this.ModifyProperties(this.Treedata, 'text', 'label');
        this.ModifyProperties(this.CloneTreedata, 'name', 'label');
      }).catch(res => {
        this.$message.error(res)
      })
    },
    //定义一个修改对象属性名的方法
    //定义一个修改数据属性名的方法
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
@@ -344,7 +585,7 @@
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeEnable(this.nodeClickList).then((res) => {
          TreeEnable(this.nodeClickList).then(() => {
            this.$message({
              type: 'success',
              message: '启用成功!'
@@ -372,7 +613,7 @@
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeDeactivate(this.nodeClickList).then((res) => {
          TreeDeactivate(this.nodeClickList).then(() => {
            this.$message({
              type: 'success',
              message: '停用成功!'
@@ -388,6 +629,7 @@
        });
      }
    },
    //树点击事件
    async nodeClick(data) {
      //定义一个模板属性id，数据是模板管理表格里面的oid
      this.nodeClickList = data
@@ -399,26 +641,27 @@
          this.$message.error(res)
        })
        //模板管理表格数据
        await gridCodeClassifyTemplate(data.oid).then(res => {
        await gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}).then(res => {
          this.Formlist = res.data.data.filter(item => {
          if(item.codeclassifyoid != ""){
            return  item.codeclassifyoid == this.nodeClickList.oid
            if (item.codeclassifyoid != "") {
              this.codeClassifyOid = item.codeclassifyoid
              return item.codeclassifyoid == this.nodeClickList.oid
            }
          })
          if(this.Formlist.length >0){
            gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => {
              this.ProData = res.data.data;
              console.log(this.ProData)
            }).catch(res => {
              this.$message.error(res)
            })
          }
          })
          console.log("formlist", this.Formlist)
          gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => {
            this.ProData = res.data.data
            console.log(this.ProData)
          }).catch(res => {
            this.$message.error(res)
          })
        }).catch(res => {
              console.log(res)
          console.log(res)
        })
        //  基本信息表单数据
        await getObjectByOid(this.nodeClickList.oid).then(res => {
          this.TreeList = res.data.data
          // eslint-disable-next-line no-const-assig
          this.TreeList = res.data.data;
        }).catch(res => {
          this.$message.error(res)
        })
@@ -426,9 +669,137 @@
        console.log(error)
      }
    },
    //克隆模板树的点击切换数据
    async ClonenodeClick(data){
      this.ClonenodeClickList=data;
      console.log("aaa",this.ClonenodeClickList.oid)
      await gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}).then(res=>{
        this.CloneFormlist = res.data.data.filter(item => {
          if (item.codeclassifyoid != "") {
            this.codeClassifyOid = item.codeclassifyoid
            return item.codeclassifyoid == this.ClonenodeClickList.oid
          }
        })
      })
    },
    //tab栏切换
    handleChange(column) {
      this.type = 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
      const allEmpty = Object.values(this.QueryArray).every(value => !value);
      //如果全部为空，点击查询出现所有数据
      if (allEmpty) {
        gridCodeClassifyTemplate().then(res => {
          this.Formlist = res.data.data
        })
      } else {
        //默认是等于
        gridCodeClassifyFindTemplate({'conditionMap[id]': this.QueryArray.id},
          {'conditionMap[name]': this.QueryArray.name},
          {'conditionMap[description]': this.QueryArray.description},
          {'conditionMap[revisionValue]': this.QueryArray.revisionValue},
          {'conditionMap[lcStatus]': this.QueryArray.lcStatus}
        ).then(res => {
          this.Formlist = res.data.data
        })
      }
    },
    //模板管理渲染
    CrudRend() {
      gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': this.nodeClickList.oid}).then(res => {
        this.Formlist = res.data.data
      })
    },

    //模板管理表格添加
    CrudRowSave(row,done) {
      if (this.nodeClickList.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请先从树上选择一条数据!'
        });
      } else {
        let codeClassifyOid = this.codeClassifyOid
        this.$set(row, "codeclassifyoid", codeClassifyOid)
        addSave(row).then(() => {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          done(row)
          this.CrudRend()
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res
          });
        })
      }
    },
    //模板管理修改
    CrudRowUpdata(row,index,done) {
      editSave(row).then(() => {
        this.CrudRend()
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done()
      }).catch(res => {
        console.log(res)
      })
    },
    //模板管理删除
    CrudRowDel(row) {
      deleteData(row).then(()=> {
        this.CrudRend()
      }).catch(res => {
        this.$message({
          type: 'info',
          message: res
        });
      })
    },
    //模板管理表格查询
    EnterFind() {
@@ -439,32 +810,92 @@
        })
      } else {
        gridCodeClassifyTemplate().then(res => {
            this.Formlist = res.data.data.filter(item => {
                  return item.name.includes(this.FindText)
              }
            )
          }
        )
      }
    },
    TemRefresh(){
      this.FormLoing=true
      if(this.nodeClickList.oid != ""){
        gridCodeClassifyTemplate(this.nodeClickList.oid).then(res=>{
          this.Formlist = res.data.data.filter(item => {
            return  item.codeclassifyoid == this.nodeClickList.oid
            return item.name.includes(this.FindText)
          })
        })
      }
    },
    //克隆模板查询
    CloneEnterFind(){
      gridCodeClassifyTemplate().then(res => {
        this.CloneFormlist = res.data.data.filter(item => {
          if(this.Clonevalue == 0){
            return item.id.includes(this.CloneFind)
          }else if(this.Clonevalue == 1){
            return item.name.includes(this.CloneFind)
          }
        })
      })
    },
    //克隆模板选择确定
    Clonehandler(){
      if(this.CloneSelect.length <= 0){
        this.$message({
          type: 'warning',
          message: '请选择要克隆的模板!'
        });
      }else if(this.CloneSelect.length >1){
        this.$message({
          type: 'warning',
          message: '只能选择一条数据!'
        });
      } else {
        this.CloneinnerVisible=true;

      }
    },
    //点击从其它模板克隆
    CloneBtn(){
      if(this.nodeClickList.length <= 0){
        this.$message({
          type: 'warning',
          message: '请先从[主题库分类】树上选择一条数据!'
        });
      }else {
        this.FormLoing=true
        this.CloneVisible=true;
      }
    },
    //克隆模板单选框改变
    selectionChange(row){
      this.CloneSelect=row;
      //双向绑定，提交表单输入框回填上当前选择的数据
      this.CloneModel.id=row[0].id;
      this.CloneModel.name=row[0].name;
      //这里有点绕，CloneSelect是我选择框选择的数据。等于this.nodeClickList.oid是因为，克隆模板传递数据要把当前选择树的oid传递给后端。而不是当前要克隆模板的oid
      this.CloneSelect[0].codeclassifyoid=this.nodeClickList.oid
    },
    //克隆表单提交
    Clonesubmit(row,done){
      //重新赋值CloneSelect传递的数据为输入框可以修改的数据，CloneModel提交表单输入框双向绑定数据
      this.CloneSelect[0].id=this.CloneModel.id;
      this.CloneSelect[0].name=this.CloneModel.name;
      copy(this.CloneSelect[0]).then(()=>{
        //因为是嵌套弹窗所以手动关闭CloneinnerVisible，CloneVisible两个弹窗。
        this.CloneinnerVisible=false
        this.CloneVisible=false
        this.$message.success("复制成功")
        this.CrudRend()
        done(row)
      }).catch(res=>{
        done(res)
      })
    },
    //刷新
    TemRefresh() {
      this.FormLoing = true
      if (this.nodeClickList.oid != "") {
        gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': this.nodeClickList.oid}).then(res => {
          this.Formlist = res.data.data.filter(item => {
            return item.codeclassifyoid == this.nodeClickList.oid
          })
        })
      } else {
        this.FormLoing = true
      }
      setTimeout(() => {
        this.FormLoing=false
        this.FormLoing = false
      }, 600);
    },
    // 左树多选
    checkChange(val) {
      console.log(val)
    },
  }
}