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

@@ -1,45 +1,221 @@
<!--suppress ALL -->
<template>
  <el-container>
<!--    左侧菜单-->
    <el-aside >
      <basic-container>
        <avue-tree ref="tree" v-model="form" :data="Treedata" :option="Treeoption" @node-click=" nodeClick"
                   @del="rowDel" @save="rowSave" @check-change="checkChange"  style="height: 754px"  >
    <!--    左侧菜单-->
    <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="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>
        <!--        树节点添加对话框-->
        <el-dialog :title="this.TreeFlag ? '添加分类' :'添加主题库'" :visible.sync="TreeAddFormVisible" append-to-body
                   style="width: 1700px;margin: auto">
          <el-form :model="TreeAddform">
            <el-form-item :label="this.TreeFlag ? '分类编号：' :'主题库编号：'" label-width="150px" style="display: inline-block">
              <el-input v-model="TreeAddform.id" autocomplete="off" style="width: 170px"></el-input>
            </el-form-item>
            <el-form-item :label="this.TreeFlag ? '分类名称：' :'主题库名称：'" label-width="100px" style="display: inline-block">
              <el-input v-model="TreeAddform.name" autocomplete="off" style="width: 170px"></el-input>
            </el-form-item>
            <el-form-item label="描述：" label-width="150px">
              <el-input v-model="TreeAddform.description" autocomplete="off" style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item v-show="this.TreeFlag==false" label="存储的业务类型：" label-width="150px">
              <el-input v-model="TreeAddform.btmtypename" autocomplete="off" style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item label="编码规则：" label-width="150px">
              <el-input v-model="TreeAddform.coderuleoidName" autocomplete="off" style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item label="关键属性查询规则：" label-width="150px">
              <el-input v-model="TreeAddform.codekeyattrrepeatoidName" autocomplete="off"
                        style="width: 585px"></el-input>
            </el-form-item>
            <el-form-item label="相似查询规则：" label-width="150px">
              <el-input v-model="TreeAddform.codeResembleRuleOidName" autocomplete="off"
                        style="width: 585px"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="TreeAddFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="TreeAddHandler">确 定</el-button>
          </div>
        </el-dialog>
        <!--        修改对话框-->
        <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="修改分类">
          <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
        </el-dialog>
        <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :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>
      <basic-container>
<!--        右侧表格-->
      <basic-container style="height: 85vh; max-height: 155vh; ">
        <!--        右侧表格-->
        <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='tab1'">
            <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption" style="height: 700px"></avue-crud>
          <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"
               >
            <template slot="menuLeft">
              <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>
              <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>
            </template>
          </avue-crud>
          </basic-container>
    <templatePro :ProData="this.ProData"></templatePro>
        </span>
        <span v-else-if="type.prop==='tab2'">
<!--          如果是表格加表单就再次引入这个classifyTreeform组件，里面是表单的内容，没用就删除掉。把上面tab栏也删除了-->
          <classifyTreeform  ref="childForm" :nodeList="nodeList" :TreeNewForm="TreeList"></classifyTreeform>
          <template-pro></template-pro>
           <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
        </span>
      </basic-container>
    </el-main>
  </el-container>
</template>

<script>
//这里声明一些菜单组件用法：首先布局分为左侧菜单右侧表格，可能会有右侧Tab栏加表单的情况。所以另外引入了一个右侧表单的组件"classifyTreeform"。
//首先父组件调用子组件菜单，通过provide传递参数。有Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
//其中表格的配置项直接父传子传递过来就行，直接:option=传递的参数名，里面数据显示的内容因为是和左侧联动的，所以重新一个Formlist，通过点击树节点下标来动态渲染右侧表格，下面方法都有具体注释
//然后再说右侧的表单，专门定义了一个组件，通过父传子再把表单数据TreeList传递过去，传递前在10deCLi1ck方法里面便了处理也是一个联动的效果，表单的配置项在哪个子组件或者父组件写都可以。
import {
  getAtrrList,
  TreeSave,
  TreeDel,
  TreeCheckDel,
  TreeObjcet,
  TreeEnable,
  TreeDeactivate,
  importClassify,
  gridCodeClassifyTemplate,
  getObjectByOid,
  gridCodeClassifyTemplateAttr,
  gridCodeClassifyFindTemplate,
  addSave,
  deleteData,
  editSave
} from "@/api/template/templateAttr";

export default {
  name: "classifyTrees.vue",
  //使用inject接收参数
  //Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
  //Treeoption左侧树新增表单项 Treedata左侧树节点 配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
  //Treeform右侧表单配置项
  inject: ['crudTreeOption',"crudTreeData", "Treedata", "Treeoption"],
  inject: ['crudTreeOption', "crudTreeData"],
  data() {
    return {
      //模板属性展示内容
      ProData: [],
      //回车键搜索绑定值
      FindText: "",
      //高级查询对话框
      FindFormVisible: 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,
      //添加对话框
      TreeAddFormVisible: false,
      //当前点击项
      nodeClickList: "",
      //分类和主题库状态
      TreeFlag: false,
      //树加载
      loading: false,
      FormLoing: false,
      TreeAddform: {
        id: "",
        name: "",
        description: "",
        //相似查询规则
        codeResembleRuleOidName: "",
        //关键属性查询规则
        codekeyattrrepeatoidName: "",
        //编码规则
        coderuleoidName: "",
        //存储的业务类型
        btmtypename: ""
      },
      //avue-tree数据，暂时没有作用，里面功能用element写了，只用avue的一个树组件不用内置表单了。
      TreeAvueform: {},
      Treedata: [],
      Treeoption: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        defaultExpandAll: false,
        menu: false,
        // //这个是多选
        // multiple: true,
      },
      crudForm: "",
      form: {},
      //动态切换处理过的表格数据
      Formlist: [],
      //tab状态
@@ -61,50 +237,128 @@
        {
          name: "测试1",
          sex: "男",
          value:0
          value: 0
        },
        {
          name: "测试2",
          sex: "女",
          value:1
          value: 1
        }
      ],
      //传递给子组件动态渲染的数据
      TreeList:{}
      TreeList: {},
      codeClassifyOid:""
    }
  },
  //tab栏默认是表格
  mounted() {
    this.type = this.tabOption.column[0];
    this.getAttr();
  },
  methods: {
    nodeClick(data) {
      //点击左侧树右侧动态的方法
      this.Formlist = this.crudTreeData[data.value].column
      this.nodeList=data.value
      this.TreeList = this.Treeform.find(item => {
        return item.value == data.value
      });
      console.log(data)
    //分类树数据处理
    getAttr() {
      getAtrrList().then(res => {
        this.Treedata = 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');
      }).catch(res => {
        this.$message.error(res)
      })
    },
    //tab栏切换
    handleChange(column) {
      this.type = column
    //定义一个修改对象属性名的方法 这里别改！！！好像是后台接口数据字段不一致，添加的方法。具体什么原因我也忘记了
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
          obj[newName] = obj[key];
          delete obj[key];
        }
        if (typeof obj[key] === 'object') {
          this.ModifyProperties(obj[key], oldName, newName);
        }
      }
    },
    // 左树多选
    checkChange(val) {
      console.log(val)
    //树节点添加按钮
    TreeAdd() {
      this.TreeAddFormVisible = true;
      // 判断当前是否有点击子项
      if (this.nodeClickList !== "") {
        this.TreeFlag = true
      }
    },
    //删除
    rowDel(row, index, done) {
      console.log(row)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    //树节点添加事件
    TreeAddHandler() {
      const data = this.TreeAddform
      this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid)
      TreeSave(data).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        this.getAttr();
        this.TreeAddFormVisible = false
        this.TreeAddform = ""
      }).catch(res => {
        this.$message({
          type: 'warning',
          message: res
        });
      })
    },
    //树节点删除按钮
    TreeDel() {
      this.$confirm('是否删除当前选择的分类，将会把子分类一并删除，如果存在编码数据将不能被删除，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        type: 'warning',
        customClass: 'my-messagebox',
      }).then(() => {
        this.$message.success('删除成功')
        done();
        TreeCheckDel(this.nodeClickList).then(res => {
          if (res.data.data) {
            TreeDel(this.nodeClickList).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getAttr();
            }).catch(res => {
              this.$message({
                type: 'warning',
                message: res
              });
            })
          } else {
            this.$confirm('当前数据包含有下级数据，要删除的话会和下级数据一起删除，你确认继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              customClass: 'my-messageboxs',
            }).then(() => {
              TreeDel(this.nodeClickList).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getAttr();
              }).catch(res => {
                this.$message({
                  type: 'warning',
                  message: res
                });
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
@@ -112,25 +366,291 @@
        });
      });
    },
    //添加
    rowSave(node,data,done,loading) {
      this.$message.success('新增回调')
      // this.form.id = new Date().getTime();
      // this.form.value=new Date().getTime();
      // this.form.children=[];
      console.log(this.form)
      // console.log("Type",node,data,done,loading)
      // console.log(node,"node")
      // console.log("data",data)
      // console.log("done",done)
      // console.log("loading",loading)
      done();
    //修改回填
    TreeEdit() {
      if (this.nodeClickList == "") {
        this.$message({
          type: 'warning',
          message: '请先从树上选择一条数据!'
        });
      } else {
        this.TreeEditFormVisible = true
      }
    },

    //树刷新
    flushed() {
      this.loading = true
      this.getAttr()
      setTimeout(() => {
        this.loading = false;
        this.nodeClickList = ""
      }, 600);
    },
    //启用和停用都先判断状态
    //启用
    Enable() {
      if (this.FlagObj.lcStatus == "Enabled") {
        this.$message({
          type: 'warning',
          message: '当前分类不是停用状态'
        });
      } else {
        this.$confirm('是否将子分类一并启用？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeEnable(this.nodeClickList).then((res) => {
            this.$message({
              type: 'success',
              message: '启用成功!'
            });
            this.getAttr()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启用'
          });
        });
      }
    },
    //停用
    Deactivate() {
      if (this.FlagObj.lcStatus === "Disabled") {
        this.$message({
          type: 'warning',
          message: '当前分类不是启用状态!'
        });
      } else {
        this.$confirm('是否停用当前分类，停用后，子分类也将不能被使用，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeDeactivate(this.nodeClickList).then((res) => {
            this.$message({
              type: 'success',
              message: '停用成功!'
            });
            this.nodeClickList['flag'] = true;
            this.getAttr()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消停用'
          });
        });
      }
    },
    //树点击事件
    async nodeClick(data) {
      //定义一个模板属性id，数据是模板管理表格里面的oid
      this.nodeClickList = data
      //console.log(data.oid)
      try {
        await TreeObjcet(data.oid).then(res => {
          this.FlagObj = res.data.data
        }).catch(res => {
          this.$message.error(res)
        })
        //模板管理表格数据
        await gridCodeClassifyTemplate({'conditionMap[codeClassifyOid]':data.oid }).then(res => {
          this.Formlist = res.data.data.filter(item => {
            if (item.codeclassifyoid != "") {
              this.codeClassifyOid=item.codeclassifyoid
              return item.codeclassifyoid == this.nodeClickList.oid
            }
          })
          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)
        })
        //  基本信息表单数据
        await getObjectByOid(this.nodeClickList.oid).then(res => {
          this.TreeList = res.data.data
          // eslint-disable-next-line no-const-assig
        }).catch(res => {
          this.$message.error(res)
        })
      } catch (error) {
        console.log(error)
      }
    },
    //tab栏切换
    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
      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){
      if(this.nodeClickList.length <= 0){
        this.$message({
          type: 'warning',
          message: '请先从树上选择一条数据!'
        });
      }else {
        console.log(this.nodeClickList)
        let codeClassifyOid=this.codeClassifyOid
        this.$set(row,"codeclassifyoid",codeClassifyOid)
        addSave(row).then(res=>{
          this.CrudRend()
        }).catch(res=>{
          this.$message({
            type: 'info',
            message: res
          });
        })
      }
    },
    //模板管理修改
    CrudRowUpdata(row){
      editSave(row).then(()=>{
        this.CrudRend()
      }).catch(res=>{
        this.$message({
          type: 'info',
          message: res
        });
      })
    },
    //模板管理删除
    CrudRowDel(row){
      deleteData(row).then(res=>{
        this.CrudRend()
      }).catch(res=>{
        this.$message({
          type: 'info',
          message: res
        });
      })
    },
    //模板管理表格查询
    EnterFind() {
      console.log(this.Formlist)
      if (this.FindText == "") {
        gridCodeClassifyTemplate().then(res => {
          this.Formlist = res.data.data
        })
      } 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({'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
      }, 600);
    },
    // 左树多选
    checkChange(val) {
      console.log(val)
    },
  }
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap; /* 设置可换行，以便在小屏幕设备上使用多行布局 */
}

.el-form-item {
  flex: 1; /* 设置元素占据1份空间 */
  margin-right: 1rem; /* 设置元素之间的间距 */
}

.my-messagebox {
  width: 700px;
}

.my-messageboxs {
  width: 500px;
}
</style>