ubcs.git - Gitblit

<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"  >
        </avue-tree>
      </basic-container>
    </el-aside>
    <el-main>
      <basic-container>
<!--        右侧表格-->
        <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>
        </span>
        <span v-else-if="type.prop==='tab2'">
<!--          如果是表格加表单就再次引入这个classifyTreeform组件，里面是表单的内容，没用就删除掉。把上面tab栏也删除了-->
          <classifyTreeform  ref="childForm" :nodeList="nodeList" :TreeNewForm="TreeList"></classifyTreeform>
          <template-pro></template-pro>
        </span>
      </basic-container>
    </el-main>
  </el-container>
</template>
 
<script>
//这里声明一些菜单组件用法：首先布局分为左侧菜单右侧表格，可能会有右侧Tab栏加表单的情况。所以另外引入了一个右侧表单的组件"classifyTreeform"。
//首先父组件调用子组件菜单，通过provide传递参数。有Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
//其中表格的配置项直接父传子传递过来就行，直接:option=传递的参数名，里面数据显示的内容因为是和左侧联动的，所以重新一个Formlist，通过点击树节点下标来动态渲染右侧表格，下面方法都有具体注释
//然后再说右侧的表单，专门定义了一个组件，通过父传子再把表单数据TreeList传递过去，传递前在10deCLi1ck方法里面便了处理也是一个联动的效果，表单的配置项在哪个子组件或者父组件写都可以。
export default {
  name: "classifyTrees.vue",
  //使用inject接收参数
  //Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
  //Treeform右侧表单配置项
  inject: ['crudTreeOption',"crudTreeData", "Treedata", "Treeoption"],
  data() {
    return {
      crudForm: "",
      form: {},
      //动态切换处理过的表格数据
      Formlist: [],
      //tab状态
      type: {},
      //Tab配置项
      tabOption: {
        column: [{
          icon: 'el-icon-info',
          label: '基本信息',
          prop: 'tab1',
        }, {
          icon: 'el-icon-warning',
          label: '模板管理',
          prop: 'tab2',
        }]
      },
      //模拟表单假数据
      Treeform: [
        {
          name: "测试1",
          sex: "男",
          value:0
        },
        {
          name: "测试2",
          sex: "女",
          value:1
        }
      ],
      //传递给子组件动态渲染的数据
      TreeList:{}
    }
  },
  //tab栏默认是表格
  mounted() {
    this.type = this.tabOption.column[0];
  },
  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)
    },
    //tab栏切换
    handleChange(column) {
      this.type = column
    },
    // 左树多选
    checkChange(val) {
      console.log(val)
    },
    //删除
    rowDel(row, index, done) {
      console.log(row)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        done();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加
    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();
    },
 
  }
}
</script>
 
<style lang="scss">
 
</style>