From d7778972f58b79d1ff04ff70ed7b6a0b298448dd Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Fri, 8 Jul 2022 16:10:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=9E=8D=E5=90=88=E6=9C=8D=E5=8A=A1=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E7=AE=A1=E7=90=86=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ability/IntegratedServices-add.vue        | 499 ++++++++++++++++++
 .../modules/ability/IntegratedServices.vue    | 449 +++++-----------
 .../views/modules/ability/bsabilityvideo.vue  |   1 -
 .../ability/components/common-question.vue    | 107 ++++
 .../components/integrated-combine-ability.vue | 157 ++++++
 back/src/views/modules/ability/showChild.vue  | 154 ++++++
 6 files changed, 1035 insertions(+), 332 deletions(-)
 create mode 100644 back/src/views/modules/ability/IntegratedServices-add.vue
 create mode 100644 back/src/views/modules/ability/components/common-question.vue
 create mode 100644 back/src/views/modules/ability/components/integrated-combine-ability.vue
 create mode 100644 back/src/views/modules/ability/showChild.vue

diff --git a/back/src/views/modules/ability/IntegratedServices-add.vue b/back/src/views/modules/ability/IntegratedServices-add.vue
new file mode 100644
index 00000000..fc960d21
--- /dev/null
+++ b/back/src/views/modules/ability/IntegratedServices-add.vue
@@ -0,0 +1,499 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
+      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+      <div v-if="modalType !== 'display'" style="
+            text-align: center;
+            font-weight: 600;
+            font-size: 18px;
+            margin-bottom: 10px;
+          ">
+        填写字段
+      </div>
+      <el-checkbox-group v-if="modalType !== 'display'" v-model="checkList" @change="changeBtn"
+        style="margin-bottom: 20px">
+        <el-checkbox-button v-for="(item, i) in btnList" :label="item.name" :key="i">{{ item.name }}
+        </el-checkbox-button>
+      </el-checkbox-group>
+
+      <!-- 挂载和修改-->
+      <div key="1" v-if="modalType !== 'display'">
+        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+          <!-- 基本信息 -->
+          <div style="margin-bottom:20px" v-if="checkList.includes('基本信息')">
+            <div style="
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+                margin-bottom: 10px;
+              ">
+              基本信息
+            </div>
+            <el-form-item label="融合服务名称" prop="name">
+              <el-input v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
+            </el-form-item>
+            <el-form-item label="融合服务描述" prop="description">
+              <el-input v-model="dataForm.description" placeholder="请输入融合服务描述"></el-input>
+            </el-form-item>
+            <el-form-item label="应用领域" prop="applicationArea">
+              <el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
+                <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="部门联系人" prop="deptUser">
+              <el-input v-model="dataForm.deptUser" placeholder="请输入部门联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="部门联系人电话" prop="mobile">
+              <el-input v-model="dataForm.mobile" placeholder="请输入部门联系人电话"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商" prop="provider">
+              <el-input v-model="dataForm.provider" placeholder="请输入服务商"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商联系人" prop="providerUser">
+              <el-input v-model="dataForm.providerUser" placeholder="请输入服务商联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="服务商联系人电话" prop="providerMobile">
+              <el-input v-model="dataForm.providerMobile" placeholder="请输入服务商联系人电话"></el-input>
+            </el-form-item>
+          </div>
+
+          <!-- 组合能力 -->
+          <div class="" v-if="checkList.includes('组合能力')">
+            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
+            </integrated-combine-ability>
+          </div>
+
+          <!-- 技术文档 -->
+          <div style="margin-bottom:20px" v-if="checkList.includes('技术文档')">
+            <div style="
+                          text-align: center;
+                          font-weight: 600;
+                          font-size: 18px;
+                          margin-bottom: 10px;
+                        ">
+              技术文档
+            </div>
+            <div v-for="(item, index) in dataForm.fuseAttrList" :key="index">
+              <div v-if="item.attrType === '技术文档'">
+                <el-form-item label="技术文档" prop="attrValue">
+                  <el-upload ref="addUpload" class="upload-demo" :action="fileUploadUrl"
+                    :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :file-list="fileList"
+                    :show-file-list="false">
+                    <el-button size="small" type="primary">上传</el-button>
+                  </el-upload>
+                  <el-button v-if="item.attrValue" @click="item.attrValue = ''" type="danger">删除</el-button>
+                </el-form-item>
+                <div>
+                  <div v-for="(name, i) in fileNameList" :key="i">{{ name }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 常见问题 -->
+          <div v-if="checkList.includes('常见问题')">
+            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+          </div>
+        </el-form>
+      </div>
+
+      <!-- 展示 -->
+      <el-form key="2" class="detial-form" v-else :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+        <el-form-item :label="displayInfo[data]" v-for="(data, i) in Object.keys(displayInfo)" :key="i" :prop="data">
+          {{ dataForm[data] || "--" }}
+        </el-form-item>
+        <div v-for="(data, i) in displayListInfo['常见问题']" :key="`${i}${JSON.stringify(data)}`">
+          <el-form-item :label="`常见问题${i + 1}`">
+            {{ `${data['question']}` }}
+          </el-form-item>
+          <el-form-item :label="`问题描述${i + 1}`">
+            {{ `${data['answer']} ` }}
+          </el-form-item>
+        </div>
+        <div v-for="(data, i) in displayListInfo['组合能力']" :key="`${i}${JSON.stringify(data)}`">
+          <el-form-item :label="`能力类别${i + 1}`">
+            {{ `${data['type']}` }}
+          </el-form-item>
+          <el-form-item :label="`能力名称${i + 1}`">
+            {{ `${data['name']} ` }}
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <template slot="footer">
+        <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
+        <el-button v-if="modalType !== 'display'" type="primary" @click="dataFormSubmitHandle()">{{
+            $t("confirm")
+        }}</el-button>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import debounce from "lodash/debounce";
+import qs from "qs";
+import CommonQuestion from './components/common-question.vue';
+import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
+import Cookies from 'js-cookie'
+
+export default {
+  components: {
+    CommonQuestion,
+    IntegratedCombineAbility,
+  },
+  data() {
+    return {
+      fileList: [],
+      fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
+      dataForm: {
+        "applicationArea": "",
+        "description": "",
+        "fuseAttrList": [
+          {
+            "attrType": "技术文档",
+            "attrValue": "",
+          },
+          {
+            "attrType": "常见问题",
+            "attrValue": [{ question: "", answer: "" }],
+          }
+        ],
+        "fuseResourceList": [
+          {
+            "resourceId": 0,
+            "sequence": ""
+          }
+        ],
+        "mobile": "",
+        "name": "",
+        "provider": "",
+        "providerMobile": "",
+        "providerUser": "",
+        // "updateDate": "",
+        // "updater": 0,
+        // "createDate": "",
+        // "creator": 0,
+        "deptUser": "",
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入融合服务名称",
+            trigger: "change",
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: "请输入融合服务描述",
+            trigger: "change",
+          },
+        ],
+      },
+      btnList: [
+        {
+          name: '基本信息',
+          key: 'basic',
+          show: true,
+        },
+        {
+          name: '组合能力',
+          key: 'combine',
+          show: true,
+        },
+        {
+          name: '技术文档',
+          key: 'basic',
+          show: true,
+        },
+        {
+          name: '常见问题',
+          key: 'basic',
+          show: true,
+        },
+      ],
+      checkList: ['基本信息', '组合能力', '技术文档', '常见问题'],
+      areaList: [],
+      fileNameList: [],
+      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
+      displayInfo: {
+        'name': '融合服务名称',
+        'description': '融合服务描述',
+        'applicationArea': '应用领域',
+        'deptUser': '部门联系人',
+        'mobile': '部门联系人电话',
+        'provider': '服务商',
+        'providerMobile': '服务商联系人',
+        'providerMobile': '服务商联系人电话',
+      },
+      displayListInfo: {
+        '常见问题': [],
+        '组合能力': []
+      },
+    };
+  },
+  props: {
+    modalType: {
+      type: String,
+      default: 'add'
+    },
+    addOrUpdateVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    dataForm: {
+      handler(newVal) {
+        this.dataForm = newVal
+      },
+      deep: true,
+      immediate: true,
+    },
+    addOrUpdateVisible: {
+      handler(newVal) {
+        this.addOrUpdateVisibleCopy = newVal;
+      },
+      immediate: true,
+    }
+  },
+  mounted() {
+    // 获取应用领域
+    this.getAreaInfo()
+  },
+  methods: {
+    clearForm() {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields();
+    },
+    closeModal() {
+      this.$emit('closeModal')
+    },
+    // 获取应用领域
+    getAreaInfo() {
+      const params = {
+        page: 1,
+        limit: 99,
+        dictTypeId: "1513712507692818433",
+      };
+      this.$http
+        .get("/sys/dict/data/page" + "?" + qs.stringify(params))
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          res.data.list.map((item) => {
+            this.areaList.push({
+              label: item.dictLabel,
+              value: item.dictLabel
+            });
+          });
+        }).catch(err => {
+          this.$message.error(err);
+        })
+    },
+    // 更新表单
+    updateDataForm(data) {
+      if (data.title == '常见问题') {
+        this.dataForm.fuseAttrList.map(v => {
+          if (v.attrType === '常见问题') {
+            v.attrValue = JSON.stringify(data.list)
+          }
+        })
+      }
+      if (data.title == '组合能力') {
+        this.dataForm.fuseResourceList = data.list
+      }
+    },
+    // 改变按钮状态
+    changeBtn(data) {
+      this.checkList = data;
+    },
+    beforeAvatarUpload() { },
+    handleAvatarSuccess(res, file) {
+      console.log(file)
+      if (res.code !== 0) {
+        return this.$message.error("上传文件失败");
+      }
+      this.fileNameList.push(file.name)
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs.dataForm.validate((valid) => {
+          if (!valid) {
+            this.$message.error("请检查表单是否填写完整");
+            return false;
+          }
+          let methodsObj = {
+            'add': 'post',
+            'update': 'put'
+          }
+          let arr = this.dataForm.fuseResourceList.filter(v => v.resourceId !== '') || []
+          if (arr.length == 0) {
+            this.dataForm.fuseResourceList = []
+          }
+          this.$http
+          [methodsObj[this.modalType]]("/fuse", this.dataForm)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.$refs.dataForm && this.$refs.dataForm.resetFields();
+                  this.$emit("refreshDataList");
+                  this.$emit("closeModal");
+                },
+              });
+            })
+            .catch((err) => {
+              this.$message.error(err)
+            });
+        });
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+    // 详情
+    getDetail(data) {
+      this.dataForm = data;
+      this.$nextTick(() => {
+        console.log('this.dataForm----详情-------->', this.dataForm);
+      })
+    },
+    // 重组数据
+    getDisPlayData() {
+      this.$nextTick(() => {
+        console.log('this.dataForm----重组数据-------->', this.dataForm);
+        const questionObj = this.dataForm.fuseAttrList.find(v => v.attrType == '常见问题') || {};
+        let fuseResourceList = this.dataForm.fuseResourceList || [];
+        let arr = []
+        fuseResourceList.map(v => {
+          arr.push({
+            name: v.resource.name,
+            type: v.resource.type,
+          })
+        })
+        this.displayListInfo['常见问题'] = JSON.parse(questionObj.attrValue || '[]')
+        this.displayListInfo['组合能力'] = arr
+      })
+
+    },
+  },
+  beforeDestroy() {
+    this.clearForm()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 580px;
+  overflow: auto;
+}
+
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+
+.detial-form ::v-deep {
+  .el-form-item {
+    margin-bottom: 0px;
+    line-height: 32px;
+  }
+
+  .el-form-item__label {
+    line-height: 32px;
+  }
+
+  .el-form-item__content {
+    line-height: 32px;
+  }
+}
+
+::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;
+}
+</style>
+
+<style lang="scss">
+.mod-sys__menu {
+
+  .menu-list,
+  .icon-list {
+
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+
+    >.el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+
+      >span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+.previewImg {
+  position: fixed;
+  z-index: 9999;
+}
+
+.name {
+  text-align: right;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #606266;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 32px;
+  background: pink;
+  width: 120px;
+}
+
+.text {
+  margin-left: 132px;
+  font-size: 14px;
+  color: #606266;
+  line-height: 32px;
+}
+</style>
diff --git a/back/src/views/modules/ability/IntegratedServices.vue b/back/src/views/modules/ability/IntegratedServices.vue
index dcff9365..1639a50c 100644
--- a/back/src/views/modules/ability/IntegratedServices.vue
+++ b/back/src/views/modules/ability/IntegratedServices.vue
@@ -3,176 +3,94 @@
     <div class="mod-ability__bsabilityai">
       <el-form :inline="true" :model="dataForm">
         <el-form-item>
-          <el-input
-            v-model="dataForm.name"
-            placeholder="名称"
-            clearable
-          ></el-input>
+          <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button @click="getDataList2(dataForm.name)">{{
-            $t("query")
+          <el-button @click="searchData">{{
+              $t("query")
           }}</el-button>
         </el-form-item>
+
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{
-            $t("export")
-          }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            v-if="$hasPermission('ability:bsabilityai:save')"
-            type="primary"
-            @click="addOrUpdateHandleServe()"
-            >挂接</el-button
-          >
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            v-if="$hasPermission('ability:bsabilityai:delete')"
-            type="danger"
-            @click="deleteHandle2()"
-            >{{ $t("deleteBatch") }}</el-button
-          >
+          <el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</el-button>
         </el-form-item>
+
         <el-form-item>
           <el-button @click="reset">重置</el-button>
         </el-form-item>
       </el-form>
-      <el-table
-        v-loading="dataListLoading"
-        :data="dataList"
-        border
-        @selection-change="dataListSelectionChangeHandle"
-        style="width: 100%"
-        :height="qp ? '810px' : '650px'"
-      >
-        <el-table-column
-          type="selection"
-          header-align="center"
-          align="center"
-          width="50"
-        ></el-table-column>
-        <el-table-column
-          prop="name"
-          label="应用名称"
-          header-align="center"
-          align="center"
-        ></el-table-column>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%" :height="qp ? '810px' : '650px'">
 
-        <el-table-column
-          v-for="(item, index) in dataList[0].infoList"
-          :key="index"
-          :label="item.attrType"
-          header-align="center"
-          align="center"
-          :show-overflow-tooltip="true"
-        >
+        <el-table-column prop="name" label="融合服务名称" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="description" label="融合服务描述" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="provider" label="服务商" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="providerUser" label="服务商联系人" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="providerMobile" label="服务商联系人电话" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="applicationArea" label="应用领域" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="deptId" label="所属部门" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="deptUser" label="部门联系人" header-align="center" align="center"></el-table-column>
+
+        <el-table-column prop="mobile" label="部门联系人电话" header-align="center" align="center"></el-table-column>
+
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="94" right="0">
           <template slot-scope="scope">
-            {{ findValue(scope.row.infoList, item.attrType) }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="$t('handle')"
-          fixed="right"
-          header-align="center"
-          align="center"
-          width="94"
-          right="0"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-if="$hasPermission('ability:bsabilityai:update')"
-              type="text"
-              size="small"
-              @click="UpdateHandle(scope.row)"
-              >{{ $t("update") }}</el-button
-            >
-            <el-button
-              v-if="$hasPermission('ability:bsabilityai:delete')"
-              type="text"
-              size="small"
-              @click="deleteHandle2(scope.row.id)"
-              >{{ $t("delete") }}</el-button
-            >
-            <el-button type="text" size="small" @click="showDetail(scope.row)"
-              >展示</el-button
-            >
-            <el-button type="text" size="small" @click="showDocument(scope.row)"
-              >开发文档</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="applyAndAssembly(scope.row)"
-              >应用与组件</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="applyAndDataResource(scope.row)"
-              >应用与数据资源</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="applyAndProject(scope.row)"
-              >应用与项目</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="applyAndInfrastructure(scope.row)"
-              >应用与基础设施</el-button
-            >
+            <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
+              @click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
+            <el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
+              @click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
+            <el-button type="text" size="small" @click="showDetail(scope.row)">能力展示</el-button>
+            <el-button type="text" size="small" @click="showDocument(scope.row)">技术文档</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        :current-page="page"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="limit"
-        :total="Number(total)"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle"
-      >
+
+      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
+        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
       </el-pagination>
+
       <!-- 弹窗, 新增 / 修改 -->
-      <add-or-update
-        :disabled="disabled"
-        v-if="addOrUpdateVisible"
-        ref="addOrUpdate"
-        @refreshDataList="getDataList"
-      ></add-or-update>
-      <relate-application
-        v-if="relateApplicationResourceVisible"
-        ref="relateApplication"
-        :relateInfo="relationData"
-        :nameArray="topNameArray"
-        @isShowRelatePopup="handleIsShowRelatePopupApply"
-      ></relate-application>
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
+        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
+      </add-or-update>
+      <relate-application v-if="relateApplicationResourceVisible" ref="relateApplication" :relateInfo="relationData"
+        :nameArray="topNameArray" @isShowRelatePopup="handleIsShowRelatePopupApply"></relate-application>
+      <show-child v-if="showData" :tableData="tableData" :childName="childName" :isShow="showData"></show-child>
     </div>
   </el-card>
 </template>
 
 <script>
 import mixinViewModule from "@/mixins/view-module";
-import AddOrUpdate from "./bsabilityservice-add-or-update";
+import AddOrUpdate from "./IntegratedServices-add";
 import dictionaries from "@/utils/dictionaries";
 import RelateApplication from "./bsabilityai-relate-application.vue";
+import showChild from './showChild.vue'
 import qs from "qs";
 import { type } from "os";
+
+
 export default {
   mixins: [mixinViewModule],
   data() {
     return {
+      tableData: [],
+      showData: false,
+      childName: '',
       mixinViewModuleOptions: {
-        getDataListURL: "/resource/page",
-        getDataListIsPage: true,
+        getDataListURL: "/fuse/page",
         exportURL: "/ability/bsabilityai/export",
-        deleteURL: "/resource/delete",
-        deleteIsBatch: true,
+        deleteURL: "/fuse",
+        getDataListIsPage: true,
+        deleteIsBatch: false,
       },
       disabled: false,
       sceneArr: dictionaries.sceneArr,
@@ -180,80 +98,83 @@ export default {
       shareFormArr: dictionaries.shareFormArr,
       dataForm: {
         name: "",
-        creator: "",
-        selectType: 0,
-        delFlag: 0,
-        type: "应用资源",
+        order: 'desc',
+        orderField: 'create_date',
       },
       qp: false,
       relateApplicationResourceVisible: false,
       relationData: {}, //打开穿梭框时传递的参数
       topNameArray: [], //
+      modalType: 'add',
     };
   },
   watch: {},
   components: {
     AddOrUpdate,
     RelateApplication,
-  },
-  created() {
-    this.dataForm.name = "";
-    this.dataForm.type = "应用资源";
+    showChild,
   },
   mounted() {
     window.addEventListener("resize", this.a);
     this.fullScreen();
   },
   methods: {
-    reset() {
-      this.$http
-        .get(
-          this.mixinViewModuleOptions.getDataListURL +
-            "?" +
-            qs.stringify({
-              // order: this.order,
-              // orderField: this.orderField,
-              // type: '组件服务',
-              page: 1,
-              selectType: 0,
-              limit: 10,
-              delFlag: 0,
-              creator: "",
-              type: "应用资源",
-              name: "",
-            })
-        )
-        .then(({ data: res }) => {
-          this.dataForm.name = "";
-          if (res.code !== 0) {
-            this.dataList = [];
-            this.total = 0;
-            return this.$message.error(res.msg);
-          }
-          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
-            ? res.data.list
-            : res.data;
-          this.total = this.mixinViewModuleOptions.getDataListIsPage
-            ? res.data.total
-            : 0;
-          if (this.mixinViewModuleOptions.requestCallback) {
-            this.mixinViewModuleOptions.requestCallback(res.data);
-          }
-          this.dataListLoading = false;
-        })
-        .catch(() => {
-          this.dataListLoading = false;
+    deleteRow(id) {
+      this.$http.delete('/fuse/delete', {
+         data: [id]
+      }).then(res => {
+        console.log('删除成功', res)
+        if (res.code !== 0) {
+          return this.$message.error(res.msg);
+        }
+        this.$message({
+          message: '删除成功',
+          type: "success",
+          duration: 500,
+          onClose: () => {
+            this.query()
+          },
         });
+      }).catch(err => {
+        this.$message.error(err);
+      })
     },
+    // 查询
+    searchData() {
+      this.query()
+    },
+    // 重置
+    reset() {
+      this.dataForm.name = "";
+      this.query()
+    },
+    // 修改
+    handleUpdate(val) {
+      this.addOrUpdateVisible = true;
+      this.modalType = 'update';
+      const cloneVal = JSON.parse(JSON.stringify(val))
+      this.$nextTick(() => {
+        // this.$refs.addOrUpdate.dataForm = cloneVal;
+        this.$refs.addOrUpdate.getDetail(cloneVal)
+      })
+    },
+    // 挂接
+    addServe() {
+      this.addOrUpdateVisible = true
+      this.modalType = 'add';
+    },
+    closeModal() {
+      this.addOrUpdateVisible = false;
+    },
+    // 展示
     showDetail(val) {
       this.addOrUpdateVisible = true;
-      this.disabled = false;
+      this.modalType = 'display';
+      const cloneVal = JSON.parse(JSON.stringify(val))
       this.$nextTick(() => {
-        this.$refs.addOrUpdate.UpdateState = false;
-        this.$refs.addOrUpdate.dataFormShowDetails = val;
-        this.$refs.addOrUpdate.init();
-      });
-      this.disabled = true;
+        this.$refs.addOrUpdate.dataForm = cloneVal;
+        this.$refs.addOrUpdate.getDisPlayData()
+      })
     },
     showDocument(val) {
       console.log(val);
@@ -262,60 +183,14 @@ export default {
         "_blank"
       );
     },
-    findValue(list, type) {
-      const found = list.find((item) => item.attrType === type);
-      if (found) {
-        return found.attrValue;
-      } else {
-        return "暂无数据";
-      }
-    },
-    getDataList2(names) {
-      if (names != null) {
-        this.$http
-          .get(
-            this.mixinViewModuleOptions.getDataListURL +
-              "?" +
-              qs.stringify({
-                // order: this.order,
-                // orderField: this.orderField,
-                // type: '组件服务',
-                pageNum: 1,
-                pageSize: this.limit,
-                type: "应用资源",
-                creator: "",
-                selectType: 0,
-                delFlag: 0,
-                name: names,
-              })
-          )
-          .then(({ data: res }) => {
-            if (res.code !== 0) {
-              this.dataList = [];
-              this.total = 0;
-              return this.$message.error(res.msg);
-            }
-            if (res.data.list.length !== 0) {
-              this.dataList = res.data.list;
-              this.total = this.mixinViewModuleOptions.getDataListIsPage
-                ? res.data.total
-                : 0;
-              if (this.mixinViewModuleOptions.requestCallback) {
-                this.mixinViewModuleOptions.requestCallback(res.data);
-              }
-              this.dataListLoading = false;
-            } else {
-              this.$message.error("未查询到相关信息");
-              this.reset();
-            }
-          })
-          .catch(() => {
-            this.dataListLoading = false;
-          });
-      } else {
-        this.$message.error("查询不能输入为空");
-      }
-    },
+    // findValue(list, type) {
+    //   const found = list.find((item) => item.attrType === type);
+    //   if (found) {
+    //     return found.attrValue;
+    //   } else {
+    //     return "暂无数据";
+    //   }
+    // },
     fullScreen() {
       if (window.outerHeight === screen.availHeight) {
         if (window.outerWidth === screen.availWidth) {
@@ -348,94 +223,6 @@ export default {
         this.qp = true;
       }
     },
-    //应用与组件
-    applyAndAssembly(val) {
-      console.log("vvvv", val);
-      //根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
-      let type = "组件服务";
-      let id = val.id;
-      this.$http
-        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
-          params: {
-            keyId: id,
-            type: type,
-            referenceName: "",
-          },
-        })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          console.log("rrrrressssz", res.data);
-          this.relateApplicationResourceVisible = true;
-          this.relationData = {
-            id: id,
-            linkType: "1",
-            responseData: res.data,
-          };
-          this.topNameArray = ["未关联组件名称", "已关联组件名称"];
-          console.log(" this.relationData", this.relationData);
-          //将数据传递给引入的组件
-        });
-    },
-    //应用与数据资源
-    applyAndDataResource(val) {
-      console.log("数据资源");
-    },
-    //应用与项目
-    applyAndProject(val) {
-      let type = "项目";
-      let id = val.id;
-      this.$http
-        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
-          params: {
-            keyId: id,
-            type: type,
-            referenceName: "",
-          },
-        })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          console.log("rrrrressssx", res.data);
-          this.relateApplicationResourceVisible = true;
-          this.relationData = {
-            id: id,
-            linkType: "1",
-            responseData: res.data,
-          };
-          this.topNameArray = ["未关联项目名称", "已关联项目名称"];
-          //将数据传递给引入的组件
-        });
-    },
-    //应用与基础设施
-    applyAndInfrastructure(val) {
-      let type = "基础设施";
-      let id = val.id;
-      this.$http
-        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
-          params: {
-            keyId: id,
-            type: type,
-            referenceName: "",
-          },
-        })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          console.log("rrrrressssj", res.data);
-          this.relateApplicationResourceVisible = true;
-          this.relationData = {
-            id: id,
-            linkType: "1",
-            responseData: res.data,
-          };
-          this.topNameArray = ["未关联基础设施名称", "已关联基础设施名称"];
-          //将数据传递给引入的组件
-        });
-    },
     // 是否展示关联应用弹窗
     handleIsShowRelatePopupApply(type) {
       this.relateApplicationResourceVisible = type;
diff --git a/back/src/views/modules/ability/bsabilityvideo.vue b/back/src/views/modules/ability/bsabilityvideo.vue
index 90419584..83d7d2ce 100644
--- a/back/src/views/modules/ability/bsabilityvideo.vue
+++ b/back/src/views/modules/ability/bsabilityvideo.vue
@@ -1,6 +1,5 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
-    {{ this.$route.meta.type }}
     <div class="mod-ability__bsabilityvideo">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
         <el-form-item>
diff --git a/back/src/views/modules/ability/components/common-question.vue b/back/src/views/modules/ability/components/common-question.vue
new file mode 100644
index 00000000..ba4437e0
--- /dev/null
+++ b/back/src/views/modules/ability/components/common-question.vue
@@ -0,0 +1,107 @@
+<template>
+    <div class="question-box">
+        <div class="title">
+            常见问题
+        </div>
+        <div v-for="(item, index) in dataInfo" :key="item.answer">
+            <el-form-item label="问题名称" prop="question">
+                <el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
+            </el-form-item>
+            <el-form-item label="问题描述" prop="answer">
+                <el-input v-model="item.answer" placeholder="请输入问题描述" style="width:90%"></el-input>
+                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small">删除
+                </el-button>
+            </el-form-item>
+            <el-button style="margin-left:120px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
+                type="primary">添加
+            </el-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        dataForm: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            dataInfo: []
+        }
+    },
+    watch: {
+        dataInfo: {
+            handler(newVal) {
+                this.dataInfo = newVal;
+                this.$emit('update', {
+                    title: '常见问题',
+                    list: newVal
+                })
+            },
+            deep: true,
+            immediate: true,
+        },
+        dataForm: {
+            handler(newVal, oldVal) {
+                // 防止无限循环，简单比较一下
+                if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
+                    this.dataForm = newVal;
+                    this.getDataInfo();
+                }
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
+    methods: {
+        getDataInfo() {
+            let arr = []
+            let fuseAttrList = this.dataForm.fuseAttrList || [];
+            let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
+            console.log('obj-------常见问题----->', obj);
+            let attrValue = JSON.parse(obj.attrValue)
+
+            if (attrValue.length > 0) {
+                attrValue.map(v => {
+                    arr.push({
+                        question: v.question,
+                        answer: v.answer,
+                    })
+                })
+            } else {
+                arr = []
+                arr.push({
+                    question: "",
+                    answer: "",
+                })
+            }
+            this.dataInfo = arr;
+        },
+        // 新增
+        addItem() {
+            this.dataInfo.push({
+                question: "",
+                answer: "",
+            })
+        },
+        // 删除
+        deleteItem(list, index) {
+            this.dataInfo.splice(index, 1)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.question-box {
+    margin-bottom: 20px;
+
+    .title {
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
+        margin-bottom: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/ability/components/integrated-combine-ability.vue b/back/src/views/modules/ability/components/integrated-combine-ability.vue
new file mode 100644
index 00000000..fd82c47c
--- /dev/null
+++ b/back/src/views/modules/ability/components/integrated-combine-ability.vue
@@ -0,0 +1,157 @@
+<!-- 融合服务--组合能力 -->
+<template>
+    <div class="content-box">
+        <div class="title">
+            组合能力
+        </div>
+        <div v-for="(item, index) in dataInfo" :key="index">
+            <el-form-item label="能力类别" prop="">
+                <el-select v-model="item.type" placeholder="请选择能力类别" @change="(data) => changeType(data, item, index)">
+                    <el-option v-for="val in typeOptions" :key="val.value" :label="val.value" :value="val.value">
+                    </el-option>
+                </el-select>
+                <el-select style="margin-left: 20px" v-model="item.name" placeholder="请选择能力" filterable>
+                    <el-option v-for="val in item.abilityOptions" :key="val.id" :label="val.name" :value="val.id">
+                    </el-option>
+                </el-select>
+                <el-button style="margin-left:10px" @click="deleteItem(dataInfo, index)" type="danger" size="small">删除
+                </el-button>
+                <el-button style="margin-left:10px" size="small" v-if="index == dataInfo.length - 1"
+                    @click="addItem(dataInfo, 0)" type="primary">添加
+                </el-button>
+            </el-form-item>
+
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        dataForm: {
+            type: Object,
+            default: () => { }
+        },
+    },
+    data() {
+        return {
+            typeOptions: [
+                {
+                    value: '数据资源',
+                },
+                {
+                    value: '组件服务',
+                },
+                {
+                    value: '应用资源',
+                },
+                {
+                    value: '基础设施',
+                },
+                {
+                    value: '知识库',
+                },
+            ],
+            dataInfo: []
+        }
+    },
+    watch: {
+        dataInfo: {
+            handler(newVal) {
+                this.dataInfo = newVal;
+                let arr = newVal.map((v, index) => {
+                    return {
+                        sequence: index,
+                        resourceId: v.name
+                    }
+                })
+                this.$emit('update', {
+                    title: '组合能力',
+                    list: arr
+                })
+            },
+            deep: true,
+            immediate: true,
+        },
+        dataForm: {
+            handler(newVal, oldVal) {
+                // 防止无限循环，简单比较一下
+                if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+                    this.dataForm = newVal;
+                    this.getDataInfo();
+                }
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
+    methods: {
+        getDataInfo() {
+            let arr = []
+            let attrValue = this.dataForm.fuseResourceList || []
+            if (attrValue.length > 0) {
+                attrValue.map(v => {
+                    arr.push({
+                        type: v.resource && v.resource.type,
+                        name: v.resourceId,
+                        abilityOptions: []
+                    })
+                })
+            } else {
+                arr = []
+                arr.push({
+                    type: "",
+                    name: "",
+                    abilityOptions: []
+                })
+            }
+            this.dataInfo = arr;
+        },
+        // 新增
+        addItem(list) {
+            list.push({
+                type: "",
+                name: "",
+                abilityOptions: []
+            })
+        },
+        // 删除
+        deleteItem(list, index) {
+            list.splice(index, 1)
+        },
+        // 获取能力
+        getAbility(type = '', item) {
+            this.$http.get(`/resource/list`, {
+                params: {
+                    type: type
+                }
+            }).then(({ data: res }) => {
+                if (res.code !== 0) {
+                    return this.$message.error(res.msg)
+                }
+                let arr = res.data || []
+                let selectArray = this.dataInfo.map(v => v.name) || [];
+                // 过滤掉已选的
+                item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
+            }).catch((err) => {
+                this.$message.error(err)
+            })
+        },
+        changeType(data, item) {
+            this.getAbility(data, item)
+        },
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+.content-box {
+    margin-bottom: 20px;
+
+    .title {
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
+        margin-bottom: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/ability/showChild.vue b/back/src/views/modules/ability/showChild.vue
new file mode 100644
index 00000000..92159262
--- /dev/null
+++ b/back/src/views/modules/ability/showChild.vue
@@ -0,0 +1,154 @@
+<template>
+  <el-dialog :visible.sync="isShow" :title="childName" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-table
+      border
+      :data="tableData"
+    >
+
+        <el-table-column
+            prop="id"
+            label="主键id"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+        <el-table-column
+            prop="fuseId"
+            label="融合服务id"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+        <el-table-column
+            v-if="childName==='融合资源属性'"
+            prop="attrType"
+            label="属性类型"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+        <el-table-column
+            v-if="childName==='融合资源属性'"
+            prop="attrValue"
+            label="属性值"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+        <el-table-column
+            v-if="childName==='资源融合关系'"
+            prop="resourceId"
+            label="资源id"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+        <el-table-column
+            v-if="childName==='资源融合关系'"
+            prop="sequence"
+            label="资源挂载顺序"
+            header-align="center"
+            align="center"
+        ></el-table-column>
+
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import 'quill/dist/quill.snow.css'
+
+export default {
+  props: {
+    childName: {
+      type: String,
+      default: ''
+    },
+    // columns: {
+    //   type: Array,
+    //   default: function () {
+    //     return []
+    //   }
+    // },
+    tableData: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      visible: false,
+    }
+  },
+  computed: {
+  },
+  methods: {
+    show () {
+      this.visible = true
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-input ::v-deep .el-input__inner {
+  cursor: pointer;
+}
+.detial-form ::v-deep {
+  .el-form-item {
+    margin-bottom: 0px;
+    line-height: 32px;
+  }
+  .el-form-item__label {
+    line-height: 32px;
+  }
+  .el-form-item__content {
+    line-height: 32px;
+  }
+}
+</style>
+
+<style lang="scss">
+.mod-sys__menu {
+  .menu-list,
+  .icon-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+    > .el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+</style>