插件管理增加插件类型，集成任务日志明细增加级联选择器（根据插件类型分类任务名称）

src/components/base/baseLayout/index.vue

@@ -72,6 +72,16 @@
       <!-- 搜索 -->
       <div v-show="queryShow" style="padding: 16px;" flex="cross:center" ref="serchRefs" class="searchContainer">
         <div v-for="(row, indexRow) in searchList" class="searchBox" :key="indexRow">
+
+          <el-cascader v-model="ruleForm[row.prop]"
+                       :options="row.options"
+                       :show-all-levels="false"
+                       @change="(value)=>handleSelectChange(row,value)"
+                       :props="{emitPath:false}"
+                       :placeholder="!row.placeholder ? '请选择' : row.placeholder" v-if="row.tag==='elCascader'"
+                       clearable>
+          </el-cascader>
+
           <el-input v-model="ruleForm[row.prop]" clearable :type="row.type ? row.type : 'text'" style="width: 100%"
                     :placeholder="!row.placeholder ? '请输入' : row.placeholder" v-if="row.tag === 'elInput'" min="1">
           </el-input>
@@ -103,7 +113,8 @@
           </div>
           <el-select v-model="ruleForm[row.prop]" filterable style="width: 100%" :multiple="row.multiple?row.multiple:false"
                     :collapse-tags="true"
-                     @change="selectChange($event, indexRow, indexRow, row)" :clearable="row.clearable ? row.clearable : true"
+                     @change="selectChange($event, indexRow, indexRow, row)"
+                     :clearable="row.clearable ? row.clearable : true"
                      :placeholder="!row.placeholder ? '请选择' : row.placeholder" v-if="row.tag === 'elSelect'">
             <el-option v-for="(el, elIndex) in row.options" :key="!row.optionValue ? el['value'] : el[row.optionValue]"
                        :label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
@@ -355,6 +366,11 @@ export default {
     // }
   },
   methods: {
+    handleSelectChange(row,value) {
+      this.ruleForm[row.prop]=value
+      console.log("Selected value:"+value);
+    },
+
     watchSize() {
       const _this = this;
       var erd = elementResizeDetectorMaker();

src/views/applicationList/inserterAdmin/configData.js

@@ -5,11 +5,23 @@ const formRow = [
                 type: "input",
                 title: "插件名称",
                 id: "pluginName",
-                row: 24,
+
                 disabled: false,
                 required: true,
                 fontSize: 16
             },
+          {
+            title: '插件类型',
+            id: 'typeId',
+            type:'select',
+            options: [
+            ],
+            optionValue: 'id',
+            optionLabel: 'name',
+            disabled: false,
+            required: true,
+            fontSize: 16
+          },
         ],
     },
     {
@@ -18,50 +30,38 @@ const formRow = [
                 type: "input",
                 title: "插件编号",
                 id: "pluginCode",
-                row: 24,
                 disabled: false,
                 required: true,
                 fontSize: 16
             },
+          {
+            type: "input",
+            title: "插件包名",
+            id: "pluginPackageName",
+            disabled: false,
+            required: true,
+            fontSize: 16
+          },
         ],
     },
-  {
-    elCol: [
-      {
-        type: "input",
-        title: "插件包名",
-        id: "pluginPackageName",
-        row: 24,
-        disabled: false,
-        required: true,
-        fontSize: 16
-      },
-    ],
-  },
     {
         elCol: [
             {
                 type: "input",
                 title: "插件版本",
                 id: "pluginVersion",
-                row: 24,
-                disabled: false,
-                required: true,
-                fontSize: 16
-            },
-        ],
-    },
-    {
-        elCol: [
-            {
-                type: "datepick",
-                title: "发布日期",
-                id: "releaseDate",
-                row: 24,
                 disabled: false,
                 required: true,
                 fontSize: 16
             },
+          {
+            type: "datepick",
+            title: "发布日期",
+            id: "releaseDate",
+            disabled: false,
+            required: true,
+            fontSize: 16
+          },
         ],
     },
     {
@@ -107,6 +107,11 @@ const tableColumn = [
         id: "pluginName",
         title: "插件名称",
     },
+  {
+    id:"typeName",
+    title:"插件类型",
+  },
+
     {
         id: "pluginCode",
         title: "插件编号",

src/views/applicationList/inserterAdmin/index.vue

@@ -25,6 +25,31 @@
       </div>
     </header>
     <main>
+      <div class="tree">
+        <div class="title">
+          <div class="text">插件类型</div>
+          <i class="el-icon-plus" @click="openTreeDialog"></i>
+        </div>
+        <div class="item"
+             v-for="(item, index) in treeList" :key="item.catalogueId" @click="treeCLick(item)"
+             :class="{actived:searchForm.catalogueId===item.id}"
+        >
+          <div class="text">{{ item.name }}</div>
+          <div class="btn">
+            <i
+              class="el-icon-edit"
+              style="color: blue"
+              @click.stop="editTree(item)"
+            ></i>
+            <i
+              class="el-icon-delete"
+              style="color: red"
+              @click.stop="deleTree(item)"
+            ></i>
+          </div>
+        </div>
+      </div>
+      <div class="left">
       <BaseTable
           ref="mainTable"
           :tableData="tableData"
@@ -38,12 +63,14 @@
           :border="false"
       >
       </BaseTable>
-      <div class="page">
+        <div class="page">
-        <basePage
+          <basePage
             :pageModel="pageModel"
             @update:pageModel="currentChangeHandle"
-        ></basePage>
+          ></basePage>
+        </div>
       </div>
+
     </main>
     <footer></footer>
     <baseDialog
@@ -53,9 +80,10 @@
         :width="'50%'"
     >
       <div v-if="plugInDialog">
+<!--        baseNewForm-->
         <baseNewForm
             ref="dataSettingForm"
-            :spanNumber="24"
+            :spanNumber="12"
             :isFunBtn="false"
             :lookFlag="lookFlag"
             :formRule="!lookFlag"
@@ -120,6 +148,19 @@
         </div>
       </div>
     </baseDialog>
+    <baseDialog
+      :title="'树管理'"
+      v-model="treeDialog"
+      @confirm="treeConfirm"
+      :width="'30%'"
+    >
+      <div class="chunk">
+        <div class="label" style="margin-bottom: 10px">插件类型名称:</div>
+        <div class="value">
+          <el-input v-model="treeObj.name" placeholder=""></el-input>
+        </div>
+      </div>
+    </baseDialog>
   </div>
 </template>
 
@@ -172,6 +213,11 @@ export default {
           color: "#e47470",
         },
       ],
+      treeList: [],
+      // 左侧树
+      treeDialog: false,
+      treeObj: {},
+
       tableColumn: configData.tableColumn,
       tableData: [],
       pageModel: {
@@ -184,6 +230,127 @@ export default {
   },
 
   methods: {
+    // 树相关
+    editTree(obj) {
+      this.treeDialog = true;
+      this.treeObj = deepClone(obj);
+    },
+    deleTree(item) {
+      this.$confirm('确认删除该模块吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await getApiModuleApi({
+          tl: "sysApplicationPluginTypeService",
+          as: "application",
+          dj: "deletePluginType"
+        }, {
+
+          name: item.name,
+          id: item.id,
+        })
+        if (res.status === '200') {
+          this.$vmNews('删除模块成功', 'success')
+          if (item.id === this.searchForm.catalogueId) {
+            this.treeObj = {}
+            this.treeCLick({id: "", name: ""})
+          }
+          this.initTreeData()
+          this.initMainTableData()
+        }
+      }).catch(() => {
+
+      })
+    },
+
+    openTreeDialog() {
+      this.treeDialog = true;
+      this.treeObj = {};
+    },
+    //选择插件类型，进行查询
+    treeCLick(item) {
+      this.$set(this.searchForm, 'typeId', item.id)
+      console.log(this.searchForm)
+      this.getApiModuleHandle(this.searchForm)
+    },
+    async getApiModuleHandle(obj = {}) {
+      this.mainTabLoading = true;
+      const res = await getApiModuleApi(
+        {
+          tl: "sysApplicationService",
+          as: "application",
+          dj: "queryAppPlugin",
+        },
+        {
+          pageNum: this.pageModel.pageIndex,
+          pageSize: this.pageModel.limit,
+          appId: this.$route.query.id,
+          ...obj,
+        }
+      );
+      if (res.status == 200) {
+        if (
+          this.pageModel.pageIndex * this.pageModel.limit >=
+          this.pageModel.total - 1 + this.pageModel.limit
+        ) {
+          this.pageModel.pageIndex--;
+        }
+        this.pageModel.total = res.attribute.total;
+        this.tableData = res.attribute.list;
+      }
+      this.mainTabLoading = false;
+    },
+
+    // 新增树
+    async treeConfirm() {
+      if (this.treeObj.id) {
+        const res = await getApiModuleApi({
+          tl: "sysApplicationPluginTypeService",
+          as: "application",
+          dj: "updatePluginType"
+        }, {
+          name: this.treeObj.name,
+          id: this.treeObj.id,
+        })
+        if (res.status === '200') {
+          this.$vmNews('修改模块成功', 'success')
+          this.treeDialog = false
+          this.initTreeData()
+          this.initMainTableData()
+        }
+      } else {
+        const res = await getApiModuleApi({
+          tl: "sysApplicationPluginTypeService",
+          as: "application",
+          dj: "savePluginType"
+        }, {
+          name: this.treeObj.name
+        })
+        if (res.status === '200') {
+          this.$vmNews('添加模块成功', 'success')
+          this.initTreeData()
+        }
+      }
+      this.treeDialog = false;
+    },
+
+    // 树的初始化
+    async initTreeData() {
+      const res = await getApiModuleApi({
+        tl: "sysApplicationPluginTypeService",
+        as: "application",
+        dj: "queryPluginType"
+      }, {})
+      if (res.status === '200') {
+        this.treeList = res.attribute
+      }
+      console.log(1)
+      console.log(this.treeList)
+    },
+
+
+
     // beforeRemove(file, fileList) {
     //   return this.$confirm(`确定移除 ${ file.name }？`);
     // },
@@ -329,11 +496,28 @@ export default {
     },
     // 添加应用
     inserterAdd() {
+      this.getPluginType();
       this.uploadStatus = ""
       this.ruleForm = {}
       this.plugInDialog = true;
       // this.$router.push({ path: "/inserterAdmin/inserterAdd" });
     },
+    // 获取插件类型
+    async getPluginType() {
+      const res = await getApiModuleApi(
+        {
+          tl: "sysApplicationPluginTypeService",
+          as: "",
+          dj: "queryPluginType",
+        },
+        {
+
+        }
+      );
+      if (res.status == "200") {
+        this.formRow[0].elCol[1].options = res.attribute;
+      }
+    },
     // 时间处理
     getTimeHandler(time) {
       var days = parseInt(time / (1000 * 60 * 60 * 24));
@@ -372,6 +556,7 @@ export default {
     // 表单操作
     tableButtonHandle(val, item) {
       if (item.type === "view") {
+        this.getPluginType();
         this.ruleForm = deepClone(val)
         this.plugInDialog=true
         this.uploadStatus = val.attachmentId
@@ -468,6 +653,12 @@ export default {
     this.initMainTableData();
     this.$emit("flashActive",5)
   },
+  mounted() {
+    console.log(1)
+    this.initTreeData()
+    // this.getApiModuleHandle();
+    // this.$emit("flashActive", 2)
+  },
 };
 </script>
 
@@ -506,6 +697,72 @@ export default {
     padding: 20px 20px 5px;
     border-radius: 20px;
     background-color: #fff;
+    display: flex;
+    .tree {
+      width: 15%;
+      background-color: #fff;
+      border-radius: 16px;
+      margin-right: 0.5%;
+      padding: 0 10px;
+      height: 83vh;
+      overflow: auto;
+
+      > .title {
+        margin-top: 26px;
+        padding: 14px;
+        border-radius: 16px;
+        background-color: #f7f7f7;
+        font-weight: 600;
+        text-align: center;
+        position: relative;
+
+        > i {
+          position: absolute;
+          top: 14px;
+          right: 10px;
+          cursor: pointer;
+        }
+      }
+
+      > .item {
+        text-align: left;
+        margin: 10px 0;
+        border-radius: 16px;
+        padding: 10px 15px;
+        display: flex;
+        justify-content: space-between;
+
+        cursor: pointer;
+
+        i {
+          margin-right: 5px;
+          cursor: pointer;
+        }
+
+        .btn {
+          display: none;
+        }
+
+        &:hover {
+          background-color: #f7f7f7;
+
+          .btn {
+            display: block;
+          }
+        }
+      }
+
+      .actived {
+        background-color: #f7f7f7 !important;
+      }
+    }
+
+    .left {
+      background-color: #fff;
+      border-radius: 16px;
+      width: 84%;
+      padding: 15px;
+    }
   }
 
   footer {
@@ -552,4 +809,89 @@ export default {
 .c_right {
   margin-right: auto; /* 将下载按钮推到最右边 */
 }
+
+.tablebox {
+  .tablebtn {
+    padding: 10px 15px;
+    border-radius: 16px;
+    margin-bottom: 5px;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+
+    > .search {
+      margin-left: 10px;
+    }
+  }
+
+  .main {
+    display: flex;
+
+    .tree {
+      width: 15%;
+      background-color: #fff;
+      border-radius: 16px;
+      margin-right: 0.5%;
+      padding: 0 10px;
+      height: 83vh;
+      overflow: auto;
+
+      > .title {
+        margin-top: 26px;
+        padding: 14px;
+        border-radius: 16px;
+        background-color: #f7f7f7;
+        font-weight: 600;
+        text-align: center;
+        position: relative;
+
+        > i {
+          position: absolute;
+          top: 14px;
+          right: 10px;
+          cursor: pointer;
+        }
+      }
+
+      > .item {
+        text-align: left;
+        margin: 10px 0;
+        border-radius: 16px;
+        padding: 10px 15px;
+        display: flex;
+        justify-content: space-between;
+
+        cursor: pointer;
+
+        i {
+          margin-right: 5px;
+          cursor: pointer;
+        }
+
+        .btn {
+          display: none;
+        }
+
+        &:hover {
+          background-color: #f7f7f7;
+
+          .btn {
+            display: block;
+          }
+        }
+      }
+
+      .actived {
+        background-color: #f7f7f7 !important;
+      }
+    }
+
+    .left {
+      background-color: #fff;
+      border-radius: 16px;
+      width: 84%;
+      padding: 15px;
+    }
+  }
+}
 </style>

src/views/intergrationTask/taskLogdetailData/index.vue

@@ -59,10 +59,9 @@ export default {
         {
           placeholder: '任务名称',
           prop: 'plugin_id',
-          tag: 'elSelect',
+          tag: 'elCascader',
-          options: [],
+          options: [
-          optionValue: 'pluginId',
+          ],
-          optionLabel: 'pluginName'
         },
         {
           placeholder: '源系统编码',
@@ -134,10 +133,51 @@ export default {
   },
   mounted() {
     this.$refs.baseLayout.getField('new_state', 'N')
-    this.queryProductClassfy()
+    //this.queryProductClassfy()
     this.GetProductionTableData()
+    this.queryOptions()
   },
   methods: {
+    //获取属于特定插件类别的插件编号及插件名称
+    async getOptionChildren(optionItem){
+      let res = await option({
+        tl: 'sysApplicationPluginService',
+        as: '',
+        dj: 'queryEntity'
+      }, {typeId:optionItem.value})
+      if (res.status == '200') {
+        optionItem.children = res.attribute.map(item =>{
+          return {
+            value:item.pluginCode,
+            label:item.pluginName,
+          }
+        })
+      }
+    },
+
+    //获取级联选择器options数据
+    async queryOptions(){
+      const res = await option({
+        tl: 'sysApplicationPluginTypeService',
+        as: '',
+        dj: 'queryPluginType'
+      }, {})
+      if (res.status == '200') {
+        this.requirementList[0].options = res.attribute.map(item =>{
+          return {
+            value: item.id,
+            label: item.name,
+            children: []
+          }
+        });
+      }
+      for (let optionItem of this.requirementList[0].options) {
+        await this.getOptionChildren(optionItem);
+      }
+      console.log(this.requirementList[0].options);
+    },
+
+
     //当点击重置后 设置默认状态值
     refresh(fun, form) {
       console.log(form)
@@ -161,17 +201,18 @@ export default {
         this.$refs.baseLayout.setPageTotal(res.attribute.total)
       }
     },
-    async queryProductClassfy() {
-      const res = await option({
-        tl: 'pluginService',
-        as: 'plugins',
-        dj: 'queryPlugins'
-      }, {})
 
-      if (res.status == '200') {
+    // async queryProductClassfy() {
-        this.requirementList[0].options = res.attribute
+    //   const res = await option({
-      }
+    //     tl: 'pluginService',
-    },
+    //     as: 'plugins',
+    //     dj: 'queryPlugins'
+    //   }, {})
+    //
+    //   if (res.status == '200') {
+    //     this.requirementList[0].options = res.attribute
+    //   }
+    // },
     // 搜索
     handleSearchEvent() {
       let data = this.$refs.baseLayout.ruleForm