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

@@ -17,14 +17,6 @@
            <el-button plain size="small" type="primary" @click="flushed">刷新</el-button>
          </div>
        </div>
        <el-upload
          multiple
          :limit="3"
          :on-preview="handlePreview"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList">
          <el-button size="small" type="primary" @click="importExcel">点击上传</el-button>
        </el-upload>
        <!--        树节点添加对话框-->
        <el-dialog :title="this.TreeFlag ? '添加分类' :'添加主题库'" :visible.sync="TreeAddFormVisible" append-to-body
                   style="width: 1700px;margin: auto">
@@ -58,8 +50,8 @@
            <el-button type="primary" @click="TreeAddHandler">确 定</el-button>
          </div>
        </el-dialog>
<!--        修改对话框-->
        <el-dialog  title="修改分类" :visible.sync="TreeEditFormVisible" append-to-body>
        <!--        修改对话框-->
        <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"
@@ -77,14 +69,23 @@
        <!--        右侧表格-->
        <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"
               >
            <template slot="menuLeft">
              <el-button plain size="small" type="primary">查询</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>

          <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption"
          ></avue-crud>
          <templatePro></templatePro>
            </template>
          </avue-crud>
          </basic-container>
    <templatePro :ProData="this.ProData"></templatePro>
        </span>
        <span v-else-if="type.prop==='tab2'">
<!--          如果是表格加表单就再次引入这个classifyTreeform组件，里面是表单的内容，没用就删掉。把上面的tab栏也删除了-->
<!--          如果是表格加表单就再次引入这个classifyTreeform组件，里面是表单的内容，没用就删除掉。把上面tab栏也删除了-->
           <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
        </span>
      </basic-container>
@@ -96,7 +97,19 @@
//首先父组件调用子组件菜单，通过provide传递参数。有Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
//其中表格的配置项直接父传子传递过来就行，直接:option=传递的参数名，里面数据显示的内容因为是和左侧联动的，所以重新一个Formlist，通过点击树节点下标来动态渲染右侧表格，下面方法都有具体注释
//然后再说右侧的表单，专门定义了一个组件，通过父传子再把表单数据TreeList传递过去，传递前在10deCLi1ck方法里面便了处理也是一个联动的效果，表单的配置项在哪个子组件或者父组件写都可以。
import {getAtrrList, TreeSave, TreeDel, TreeCheckDel,TreeObjcet,TreeEnable,TreeDeactivate,importClassify,gridCodeClassifyTemplateAttr} from "@/api/template/templateAttr";
import {
  getAtrrList,
  TreeSave,
  TreeDel,
  TreeCheckDel,
  TreeObjcet,
  TreeEnable,
  TreeDeactivate,
  importClassify,
  gridCodeClassifyTemplate,
  getObjectByOid,
  gridCodeClassifyTemplateAttr
} from "@/api/template/templateAttr";

export default {
  name: "classifyTrees.vue",
@@ -106,10 +119,12 @@
  inject: ['crudTreeOption', "crudTreeData"],
  data() {
    return {
      fileList:[],
      FlagObj:{},
      ProData: [],
      FindText: "",
      fileList: [],
      FlagObj: {},
      //修改对话框
      TreeEditFormVisible:false,
      TreeEditFormVisible: false,
      //添加对话框
      TreeAddFormVisible: false,
      //当前点击项
@@ -118,6 +133,7 @@
      TreeFlag: false,
      //树加载
      loading: false,
      FormLoing:false,
      TreeAddform: {
        id: "",
        name: "",
@@ -174,29 +190,16 @@
        }
      ],
      //传递给子组件动态渲染的数据
      TreeList: {}
      TreeList: {},
      //定义一个模板属性id，数据是模板管理表格里面的oid
    }
  },
  //tab栏默认是表格
  mounted() {
    this.type = this.tabOption.column[0];
    this.getAttr();
    console.log(this.fileList)
  },
  methods: {
    ExportExcel(){
      console.log(this.fileList)
    },
    importExcel(){

    },
    handlePreview(file) {
      debugger
      console.log(file);
      importClassify(file.raw).then(res=>{
        console.log(res)
      })
    },
    //分类树数据处理
    getAttr() {
      getAtrrList().then(res => {
@@ -209,7 +212,7 @@
        //调用修改属性名方法
        this.ModifyProperties(this.Treedata, 'text', 'label');
      }).catch(res => {
        console.log(res)
        this.$message.error(res)
      })
    },
    //定义一个修改对象属性名的方法
@@ -236,7 +239,6 @@
    TreeAddHandler() {
      const data = this.TreeAddform
      this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid)
      console.log(data)
      TreeSave(data).then(() => {
        this.$message({
          type: 'success',
@@ -244,7 +246,7 @@
        });
        this.getAttr();
        this.TreeAddFormVisible = false
        this.TreeAddform=""
        this.TreeAddform = ""
      }).catch(res => {
        this.$message({
          type: 'warning',
@@ -309,42 +311,40 @@
      });
    },
    //修改回填
    TreeEdit(){
      if(this.nodeClickList == ""){
    TreeEdit() {
      if (this.nodeClickList == "") {
        this.$message({
          type: 'warning',
          message:'请先从树上选择一条数据!'
          message: '请先从树上选择一条数据!'
        });
      }else {
        this.TreeEditFormVisible=true
      } else {
        this.TreeEditFormVisible = true
      }
    },
    //树刷新
    flushed() {
      console.log(this.fileList)
      // this.loading = true
      // this.getAttr()
      // setTimeout(() => {
      //   this.loading = false;
      //   this.nodeClickList = ""
      // }, 600);
      this.loading = true
      this.getAttr()
      setTimeout(() => {
        this.loading = false;
        this.nodeClickList = ""
      }, 600);
    },
    //启用和停用都先判断状态
    //启用
    Enable(){
      if(this.FlagObj.lcStatus == "Enabled"){
    Enable() {
      if (this.FlagObj.lcStatus == "Enabled") {
        this.$message({
          type: 'warning',
          message: '当前分类不是停用状态'
        });
      }else {
      } else {
        this.$confirm('是否将子分类一并启用？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeEnable(this.nodeClickList).then((res)=>{
            console.log(res)
          TreeEnable(this.nodeClickList).then((res) => {
            this.$message({
              type: 'success',
              message: '启用成功!'
@@ -360,25 +360,24 @@
      }
    },
    //停用
    Deactivate(){
      if(this.FlagObj.lcStatus ==="Disabled"){
    Deactivate() {
      if (this.FlagObj.lcStatus === "Disabled") {
        this.$message({
          type: 'warning',
          message: '当前分类不是启用状态!'
        });
      }else {
      } else {
        this.$confirm('是否停用当前分类，停用后，子分类也将不能被使用，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TreeDeactivate(this.nodeClickList).then((res)=>{
            console.log(res)
          TreeDeactivate(this.nodeClickList).then((res) => {
            this.$message({
              type: 'success',
              message: '停用成功!'
            });
            this.nodeClickList['flag']=true;
            this.nodeClickList['flag'] = true;
            this.getAttr()
          })
        }).catch(() => {
@@ -389,27 +388,79 @@
        });
      }
    },
    nodeClick(data) {
      //点击左侧树右侧动态的方法
      // this.Formlist = this.crudTreeData[data.value].column
      // this.nodeList=data.value
      // this.TreeList = this.Treeform.find(item => {
      //   return item.value == data.value
      // });
    async nodeClick(data) {
      //定义一个模板属性id，数据是模板管理表格里面的oid
      this.nodeClickList = data
      TreeObjcet(data.oid).then(res=>{
        console.log("object",res)
        this.FlagObj=res.data.data
      })
      gridCodeClassifyTemplateAttr(data.oid).then(res=>{
        console.log(res)
      }).catch(res=>{
        console.log(res)
      })
      console.log(data.oid)
      try {
        await TreeObjcet(data.oid).then(res => {
          this.FlagObj = res.data.data
        }).catch(res => {
          this.$message.error(res)
        })
        //模板管理表格数据
        await gridCodeClassifyTemplate(data.oid).then(res => {
          this.Formlist = res.data.data.filter(item => {
          if(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
    },
    //模板管理表格查询
    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(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) {
@@ -419,18 +470,21 @@
}
</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;
}