'增加关联应用弹窗'

back/src/views/modules/ability/bsabilityai-relate-application.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="visible"
+      title="关联应用"
+      @close="close"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :key="showKey"
+    >
+      <div class="relate-application-content">
+        <el-transfer 
+          v-model="transferValue" 
+          filterable 
+          :filter-method="filterMethod" 
+          filter-placeholder="请输入应用名称" 
+          :titles="['未关联应用名称', '已关联应用名称']"
+          :props="{
+            key: 'id',
+            label: 'name'
+          }"
+          :data="transferData"
+        ></el-transfer>
+      </div>
+      <template slot="footer">
+        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
+        <el-button type="primary" @click="confirmSubmitHandle()">{{
+          $t("confirm")
+        }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  components: {
+
+  },
+  data () {
+    return {
+      showKey: 0,
+      visible: true,
+      transferData: [], //穿梭框所有数据
+      transferValue: [], //已关联的数据id
+    }
+  },
+  props: {
+    relateInfo: {
+      type: Object,
+      default: {}
+    }
+  },
+  computed: {
+    
+  },
+  methods: {
+    close () {
+      this.$emit('isShowRelatePopup', false)
+    },
+    // 表单提交
+    confirmSubmitHandle: debounce(
+      function () {
+        this.$http.post('/dataResourceRel/saveDataResourceRel', { 
+          linkType: this.relateInfo.linkType || 2, 
+          id: this.relateInfo.id,
+          referenceIds: this.transferValue
+        }).then(({ data: res }) => {
+          if(res.code == 0) {
+            this.$message.success('关联成功！')
+          } else {
+            this.$message.error('关联失败，请联系管理员！')
+          }
+          this.$emit('isShowRelatePopup', false);
+        }).catch(() => { })
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    filterMethod(query, item) {
+      return item.name.indexOf(query) > -1;
+    }
+  },
+  mounted () {
+    if(this.relateInfo && this.relateInfo.responseData) {
+      const alreadLinkedArr = this.relateInfo.responseData.alreadLinked || [];
+      this.transferData = alreadLinkedArr.concat(this.relateInfo.responseData.notLinked || []);
+      alreadLinkedArr.length && alreadLinkedArr.forEach(item => {
+        this.transferValue.push(item.id);
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+::v-deep .el-dialog__body {
+  height: 580px;
+  overflow: auto;
+}
+::v-deep .el-checkbox-button__inner {
+  width: 130px;
+  margin: 0 10px 5px;
+  border-left: unset !important;
+  border-radius: unset !important;
+  border: 1px solid #dcdfe6 !important;
+}
+.relate-application-content {
+  height: 100%;
+  ::v-deep .el-transfer {
+    height: 100%;
+  }
+  ::v-deep .el-transfer-panel {
+    width: 39.5%;
+    height: 100%;
+  }
+  ::v-deep .el-transfer-panel__body {
+    height: 100%;
+  }
+  ::v-deep .el-transfer-panel__list.is-filterable {
+    height: calc(100% - 102px);
+  }
+}
+
+</style>

back/src/views/modules/ability/bsabilityai.vue

@@ -99,6 +99,7 @@
             <el-button type="text" size="small" @click="showDocument(scope.row)"
               >开发文档</el-button
             >
+            <el-button type="text" size="small" @click="showRelateApplication(scope.row)">关联应用</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -119,6 +120,7 @@
         ref="addOrUpdate"
         @refreshDataList="getDataList"
       ></add-or-update>
+      <relate-application v-if="relateApplicationVisible" ref="relateApplication" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
     </div>
   </el-card>
 </template>
@@ -128,6 +130,7 @@ import mixinViewModule from "@/mixins/view-module";
 import AddOrUpdate from "./bsabilityai-add-or-update";
 import dictionaries from "@/utils/dictionaries";
 import qs from "qs";
+import RelateApplication from "./bsabilityai-relate-application.vue"
 export default {
   mixins: [mixinViewModule],
   data() {
@@ -151,11 +154,19 @@ export default {
         type: "组件服务",
       },
       qp: false,
+      // 关联应用弹窗
+      relateApplicationVisible: false,
+      relateInfo: {
+        id: '',
+        responseData: {},
+        linkType: ''
+      }
     };
   },
   watch: {},
   components: {
     AddOrUpdate,
+    RelateApplication
   },
   created() {
     this.dataForm.name = "";
@@ -312,6 +323,23 @@ export default {
         this.qp = true;
       }
     },
+    // 点击关联应用按钮
+    showRelateApplication(row){
+      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
+        if( res && res.data ) {
+          this.relateApplicationVisible = true;
+          this.relateInfo = {
+            id: row.id,
+            responseData: res.data,
+            linkType: '2'
+          };
+        }
+      }).catch(() => { })
+    },
+    // 是否展示关联应用弹窗
+    handleIsShowRelatePopup(type) {
+      this.relateApplicationVisible = type;
+    }
   },
 };
 </script>