处理分类树问题以及搭建组件布局

 Source/UBCS-WEB/src/components/Crud/Crud.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
<template>
  <avue-crud :data="data" ></avue-crud>
</template>

<script>
export default {
  name: "Crud.vue",
  data(){
    return{
      data:[],
      option:{}
    }
  }
}
</script>

<style scoped>

</style>

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

@@ -539,7 +539,7 @@
            cell: false,
            labelWidth: 110,
            width: 125,
            sortable: true,
            sortable: false,
          },
          {
            label: "属性中文名称",
@@ -860,16 +860,17 @@
    },
    // æŽ’序
    sortChange(val) {
      switch (val.order) {
        // case "ascending":
        //   this.data = this.data.sort((a,b) => { return b['name'].localeCompare(a['name']) })
        //   this.data = this.data.sort((a,b) => { return b['id'].localeCompare(a['id']) })
        //   break;
        // case "descending":
        //   this.data = this.data.sort((a,b) => { return a['name'].localeCompare(b['name']) })
        //   this.data = this.data.sort((a,b) => { return a['id'].localeCompare(b['id']) })
        //   break;
      }
      console.log(val)
      // switch (val.order) {
      //   // case "ascending":
      //   //   this.data = this.data.sort((a,b) => { return b['name'].localeCompare(a['name']) })
      //   //   this.data = this.data.sort((a,b) => { return b['id'].localeCompare(a['id']) })
      //   //   break;
      //   // case "descending":
      //   //   this.data = this.data.sort((a,b) => { return a['name'].localeCompare(b['name']) })
      //   //   this.data = this.data.sort((a,b) => { return a['id'].localeCompare(b['id']) })
      //   //   break;
      // }
    }
  }
}

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

@@ -42,7 +42,8 @@
          },
          {
            label:"描述",
            prop:"description"
            prop:"description",
            labelWidth:128,
          },
          {
            label: '存储的业务类型',
@@ -57,17 +58,18 @@
          },
          {
            label:"编码规则",
            prop:"coderuleoidName"
            prop:"coderuleoidName",
            labelWidth:128,
          },
          {
            label:"忽略大小写查重",
            label:"关键属性查询规则",
            prop:"codekeyattrrepeatoidName",
            labelWidth:128,
          },
          {
            label:"相似查询规则",
            prop:"codeResembleRuleOidName",
            labelWidth:100,
            labelWidth:128,
          },
        ]
      },

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

@@ -12,7 +12,6 @@
            <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>
        <!--        æ ‘节点添加对话框-->
@@ -50,9 +49,9 @@
        </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"
@@ -74,6 +73,7 @@
                          @row-save="CrudRowSave"
                          @row-del="CrudRowDel"
                          @row-update="CrudRowUpdata"
                          :before-close="beforeClose"
               >
            <template slot="menuLeft">
              <el-button plain size="small" type="primary" @click="FindFormVisible = true;">查询</el-button>
@@ -118,12 +118,12 @@
                  <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=" nodeClick"
                                   @check-change="checkChange"
                                   @node-click="ClonenodeClick"
                        >
                        </avue-tree>
                    </el-aside>
@@ -244,6 +244,7 @@
      TreeAddFormVisible: false,
      //当前点击项
      nodeClickList: "",
      ClonenodeClickList:"",
      //分类和主题库状态
      TreeFlag: false,
      //树加载
@@ -264,7 +265,10 @@
      },
      //avue-tree数据，暂时没有作用，里面功能用element写了，只用avue的一个树组件不用内置表单了。
      TreeAvueform: {},
      //克隆树
      CloneTreeAvueform:{},
      Treedata: [],
      CloneTreedata:[],
      Treeoption: {
        addBtn: false,
        editBtn: false,
@@ -290,7 +294,7 @@
      CloneSelectOptions: [{
        value: '0',
        label: '模板编号'
        },
      },
        {
          value: '1',
          label: '模板名称'
@@ -343,7 +347,7 @@
          },
          {
            label: "模板名称",
            prop: "name"
            prop: "name",
          },
          {
            label: "模板描述",
@@ -401,18 +405,20 @@
    getAttr() {
      getAtrrList().then(res => {
        this.Treedata = res.data;
        this.Treedata.forEach(() => {
        this.CloneTreedata = res.data;
        this.Treedata.forEach((item) => {
          for (let i = 0; i < this.Treedata.length; i++) {
            this.Treedata[i].value = i;
          }
        })
        //调用修改属性名方法
        this.ModifyProperties(this.Treedata, 'text', 'label');
        this.ModifyProperties(this.CloneTreedata, 'text', 'label');
      }).catch(res => {
        this.$message.error(res)
      })
    },
    //定义一个修改对象属性名的方法 è¿™é‡Œåˆ«æ”¹ï¼ï¼ï¼å¥½åƒæ˜¯åŽå°æŽ¥å£æ•°æ®å­—段不一致，添加的方法。具体什么原因我也忘记了
    //定义一个修改数据属性名的方法
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
@@ -598,21 +604,12 @@
        })
        //模板管理表格数据
        await gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}).then(res => {
          if (this.CloneVisible != true) {
            this.Formlist = res.data.data.filter(item => {
              if (item.codeclassifyoid != "") {
                this.codeClassifyOid = item.codeclassifyoid
                return item.codeclassifyoid == this.nodeClickList.oid
              }
            })
          } else {
            this.CloneFormlist = res.data.data.filter(item => {
              if (item.codeclassifyoid != "") {
                this.codeClassifyOid = item.codeclassifyoid
                return item.codeclassifyoid == this.nodeClickList.oid
              }
            })
          }
          this.Formlist = res.data.data.filter(item => {
            if (item.codeclassifyoid != "") {
              this.codeClassifyOid = item.codeclassifyoid
              return item.codeclassifyoid == this.nodeClickList.oid
            }
          })
          gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => {
            this.ProData = res.data.data
            console.log(this.ProData)
@@ -633,9 +630,22 @@
        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) {
@@ -702,22 +712,24 @@
        this.Formlist = res.data.data
      })
    },

    //模板管理表格添加
    CrudRowSave(row,done) {
      debugger
      console.log(nodeClickList.length)
      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.$message({
            type: "success",
            message: "添加成功!"
          });
          done(row)
          this.CrudRend()
          done()
        }).catch(res => {
          this.$message({
            type: 'info',
@@ -727,14 +739,16 @@
      }
    },
    //模板管理修改
    CrudRowUpdata(row) {
      editSave(row).then(() => {
    CrudRowUpdata(row,index,done) {
      editSave(row).then((res) => {
        this.CrudRend()
      }).catch(res => {
        this.$message({
          type: 'info',
          message: res
          type: "success",
          message: "操作成功!"
        });
        done()
      }).catch(res => {
        console.log(res)
      })
    },
    //模板管理删除
@@ -777,7 +791,7 @@
    },
    //克隆模板选择确定
    Clonehandler(){
      if(this.CloneFormlist.length <= 0){
      if(this.CloneSelect.length <= 0){
        this.$message({
          type: 'warning',
          message: '请选择要克隆的模板!'
@@ -788,7 +802,8 @@
          message: '只能选择一条数据!'
        });
      } else {
        this.CloneinnerVisible=true
        this.CloneinnerVisible=true;

      }
    },
    //点击从其它模板克隆
@@ -804,16 +819,27 @@
    },
    //克隆模板单选框改变
    selectionChange(row){
      console.log(row)
      this.CloneSelect=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(done){
    Clonesubmit(row,done){
      //重新赋值CloneSelect传递的数据为输入框可以修改的数据，CloneModel提交表单输入框双向绑定数据
      this.CloneSelect[0].id=this.CloneModel.id;
      this.CloneSelect[0].name=this.CloneModel.name;
      copy(this.CloneSelect[0]).then(res=>{
        console.log(res)
        done()
        //因为是嵌套弹窗所以手动关闭CloneinnerVisible，CloneVisible两个弹窗。
        this.CloneinnerVisible=false
        this.CloneVisible=false
        this.$message.success("复制成功")
        this.CrudRend()
        done(row)
      }).catch(res=>{
        done(res)
      })
    },
    //刷新
@@ -831,10 +857,6 @@
      setTimeout(() => {
        this.FormLoing = false
      }, 600);
    },
    // å·¦æ ‘多选
    checkChange(val) {
      console.log(val)
    },
  }
}

 Source/UBCS-WEB/src/main.js

@@ -40,6 +40,7 @@
import referConfigCrudDialog from "@/components/code-dialog-page/referConfigCrudDialog"
import referConfigFormDialog from "@/components/code-dialog-page/referConfigFormDialog"
import businessAdd from "@/views/modeling/BusinessAdd"
import TableCrud from "@/components/Crud/Crud"

// æ³¨å†Œå…¨å±€crud驱动
window.$crudCommon = crudCommon;
@@ -78,6 +79,7 @@
Vue.component('referConfigFormDialog',referConfigFormDialog)
Vue.component('businessAdd',businessAdd)
Vue.component('attrCrud',attrCrud)
Vue.component('TableCrud',TableCrud)




 Source/UBCS-WEB/src/views/MasterData/items.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,77 @@
<template>
    <el-container>
      <el-aside>
        <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;">
          <avue-tree  :option="option" :data="data"  v-model="form" style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px"></avue-tree>
        </basic-container>
      </el-aside>
      <el-main>
      <TableCrud></TableCrud>
      </el-main>
    </el-container>
</template>

<script>
export default {
  name: "items.vue",
  data(){
    return{
      form:{},
      data:[
        {
          value:0,
          label:'一级部门',
          children:[
            {
              value:1,
              label:'一级部门1',
            },{
              value:2,
              label:'一级部门2',
            }
          ]
        },{
          value:3,
          label:'二级部门',
          children:[
            {
              value:4,
              label:'二级部门1',
            },{
              value:5,
              label:'二级部门2',
            }
          ]
        }
      ],
      option:{
        title:'我是标题',
        filterText:"搜索关键字自定义",
        defaultExpandAll:true,
        addBtnText:'新增自定义文案',
        editBtnText:'修改自定义文案',
        delBtnText:'删除自定义文案',
        defaultExpandedKeys:[1],
        height:900,
        formOption:{
          labelWidth:100,
          column:[{
            label:'自定义项',
            prop:'label'
          }],
        },
        props:{
          labelText:'标题',
          label:'label',
          value:'value',
          children:'children'
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

 Source/UBCS-WEB/src/views/modeling/classifyTree.vue

@@ -15,6 +15,7 @@
      crudTreeOption: {
        index: true,
        border: true,
        height:180,
        column: [
          {
            label: "模板编号",