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

2024-09-21 11:57:51 +08:00 · 2024-09-21 11:57:51 +08:00 · efe5ecb8cd
parent f0cc351b4a
commit efe5ecb8cd
4 changed files with 453 additions and 49 deletions
--- a/src/components/base/baseLayout/index.vue
+++ b/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();
--- a/src/views/applicationList/inserterAdmin/configData.js
+++ b/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: "插件编号",
--- a/src/views/applicationList/inserterAdmin/index.vue
+++ b/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">
-        <basePage
+        <div class="page">
+          <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>
--- a/src/views/intergrationTask/taskLogdetailData/index.vue
+++ b/src/views/intergrationTask/taskLogdetailData/index.vue
@ -59,10 +59,9 @@ export default {
        {
          placeholder: '任务名称',
          prop: 'plugin_id',
-          tag: 'elSelect',
-          options: [],
-          optionValue: 'pluginId',
-          optionLabel: 'pluginName'
+          tag: 'elCascader',
+          options: [
+          ],
        },
        {
          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') {
-        this.requirementList[0].options = res.attribute
-      }
-    },
+    // async queryProductClassfy() {
+    //   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