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

@@ -7,8 +7,10 @@
        <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="ExportExcel">导出</el-button>
            <el-button plain size="small" type="primary" @click="ImportExcel">导入</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;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
@@ -26,9 +28,6 @@
            </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>
@@ -49,7 +48,7 @@
        </el-dialog>
        <!--        修改对话框-->
        <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="修改分类">
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
          <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}"></classifyTreeform>
        </el-dialog>
        <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" :defaultExpandAll="false"
                   :option="Treeoption"
@@ -65,7 +64,7 @@
        <!--        右侧表格-->
        <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='tab1'">
           <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
           <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'renonly'"></classifyTreeform>
        </span>
        <span v-else-if="type.prop==='tab2'">
            <basic-container>
@@ -77,16 +76,11 @@
                          @select="selectHandle"
               >
            <template slot="menuLeft">
              <el-button plain size="small" type="primary" @click="FindFormVisible = true;">查询</el-button>
              <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="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>
@@ -95,7 +89,7 @@
              </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">
                <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>
@@ -169,17 +163,13 @@
          </avue-crud>

          </basic-container>
          <templatePro :ProData="this.ProData" :crudOid="this.crudOid" :crudArray="this.crudArray" :Formlist="this.Formlist"></templatePro>
          <templatePro :ProData="this.ProData" :crudOid="this.crudOid" :crudArray="this.crudArray" :Formlist="this.Formlist" :codeClassifyOid="this.codeClassifyOid"></templatePro>
        </span>
      </basic-container>
    </el-main>
  </el-container>
</template>
<script>
//这里声明一些菜单组件用法：首先布局分为左侧菜单右侧表格，可能会有右侧Tab栏加表单的情况。所以另外引入了一个右侧表单的组件"classifyTreeform"。
//首先父组件调用子组件菜单，通过provide传递参数。有Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
//其中表格的配置项直接父传子传递过来就行，直接:option=传递的参数名，里面数据显示的内容因为是和左侧联动的，所以重新一个Formlist，通过点击树节点下标来动态渲染右侧表格，下面方法都有具体注释
//然后再说右侧的表单，专门定义了一个组件，通过父传子再把表单数据TreeList传递过去，传递前在10deCLi1ck方法里面便了处理也是一个联动的效果，表单的配置项在哪个子组件或者父组件写都可以。
import {
  getAtrrList,
  TreeSave,
@@ -206,36 +196,6 @@
  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:"",
@@ -244,7 +204,11 @@
      //模板属性展示内容
      ProData: [],
      //回车键搜索绑定值
      FindText: "",
      searchTemplate: {
        searchCondition: 'id',
        findText: "",
      },

      //高级查询对话框
      FindFormVisible: false,
      //克隆模板对话框
@@ -434,11 +398,55 @@
    this.type = this.tabOption.column[0];
    this.getAttr();
  },
  computed:{
    crudTreeOption(){
      return{
        index: true,
        border: true,
        height:180,
        selection:true,
        addBtn:this.Formlist.length<=0  && this.nodeClickList != "",
        column: [
          {
            label: "模板编号",
            prop: "id"
          },
          {
            label:"模板名称",
            prop:"name"
          },
          {
            label: "模板描述",
            prop:"description"
          },
          {
            label:"版本号",
            prop:"revisionSeq",
            display:false
          },
          {
            label:"状态",
            prop:"lcStatusText",
            display:false
          }
        ]
      }
    }
  },
  methods: {
    MasterHandler(val){
      console.log('父亲',val)
      this.TreeList=val
    },
    //行单选事件
    selectHandle(selection,row){
      this.crudOid=row.oid
      this.crudArray=selection
      this.crudOid=row.oid;
      this.crudArray=selection;
      gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => {
        this.ProData = res.data.data;
      }).catch(res => {
        this.$message.error(res)
      })
    },
    //分类树数据处理
    getAttr() {
@@ -559,7 +567,7 @@
          message: '请先从树上选择一条数据!'
        });
      } else {
        this.TreeEditFormVisible = true
        this.TreeEditFormVisible = true;
      }
    },
    //树刷新
@@ -633,7 +641,7 @@
    async nodeClick(data) {
      //定义一个模板属性id，数据是模板管理表格里面的oid
      this.nodeClickList = data
      console.log(data.oid)
      this.ProData=[]
      try {
        await TreeObjcet(data.oid).then(res => {
          this.FlagObj = res.data.data
@@ -648,16 +656,8 @@
              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)
            })
          }
        }).catch(res => {
          console.log(res)
          this.$message.error(res)
        })
        //  基本信息表单数据
        await getObjectByOid(this.nodeClickList.oid).then(res => {
@@ -666,13 +666,12 @@
          this.$message.error(res)
        })
      } catch (error) {
        console.log(error)
        this.$message.error(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 != "") {
@@ -760,8 +759,7 @@
          message: '请先从树上选择一条数据!'
        });
      } else {
        let codeClassifyOid = this.codeClassifyOid
        this.$set(row, "codeclassifyoid", codeClassifyOid)
        this.$set(row, "codeclassifyoid", this.nodeClickList.oid)
        addSave(row).then(() => {
          this.$message({
            type: "success",
@@ -776,6 +774,7 @@
          });
        })
      }
      console.log('123',this.codeClassifyOid)
    },
    //模板管理修改
    CrudRowUpdata(row,index,done) {
@@ -787,7 +786,7 @@
        });
        done()
      }).catch(res => {
        console.log(res)
        this.$message.error(res)
      })
    },
    //模板管理删除
@@ -801,21 +800,20 @@
        });
      })
    },
    //模板管理表格查询
    EnterFind() {
      console.log(this.Formlist)
      if (this.FindText == "") {
    //模板管理表格查询,只有一条数据没必要做搜索
    /*nterFind() {
      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)
            return item.name.includes(this.findText)
          })
        })
      }
    },
    },*/
    //克隆模板查询
    CloneEnterFind(){
      gridCodeClassifyTemplate().then(res => {
@@ -827,6 +825,14 @@
          }
        })
      })
    },
    // 查询
    FindeHanler(){
      if(this.nodeClickList != ""){
        this.FindFormVisible=true
      }else {
        this.$message.warning('请从树上选择一条数据')
      }
    },
    //克隆模板选择确定
    Clonehandler(){
@@ -919,4 +925,5 @@
.my-messageboxs {
  width: 500px;
}

</style>