From 4132ea058924aa0df387d6373ca9a483ecee22f8 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Fri, 15 Jul 2022 16:43:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=9E=8D=E5=90=88=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ability/IntegratedServices-add.vue        |  55 ++++---
 .../modules/ability/IntegratedServices.vue    |  81 +++-------
 .../ability/components/common-question.vue    |  43 ++----
 .../components/integrated-combine-ability.vue | 142 +++++++++++-------
 4 files changed, 144 insertions(+), 177 deletions(-)

diff --git a/back/src/views/modules/ability/IntegratedServices-add.vue b/back/src/views/modules/ability/IntegratedServices-add.vue
index fc960d21..9df71299 100644
--- a/back/src/views/modules/ability/IntegratedServices-add.vue
+++ b/back/src/views/modules/ability/IntegratedServices-add.vue
@@ -2,7 +2,7 @@
   <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="
+      <div v-show="modalType !== 'display'" style="
             text-align: center;
             font-weight: 600;
             font-size: 18px;
@@ -10,7 +10,7 @@
           ">
         填写字段
       </div>
-      <el-checkbox-group v-if="modalType !== 'display'" v-model="checkList" @change="changeBtn"
+      <el-checkbox-group v-show="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>
@@ -21,7 +21,7 @@
         <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="margin-bottom:20px" v-show="checkList.includes('基本信息')">
             <div style="
                 text-align: center;
                 font-weight: 600;
@@ -60,13 +60,15 @@
           </div>
 
           <!-- 组合能力 -->
-          <div class="" v-if="checkList.includes('组合能力')">
-            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
+          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
+            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" title="组合能力"
+              ref="combineAbility" :disabledType="modalType === 'display'">
             </integrated-combine-ability>
           </div>
 
+
           <!-- 技术文档 -->
-          <div style="margin-bottom:20px" v-if="checkList.includes('技术文档')">
+          <div style="margin-bottom:20px" v-show="checkList.includes('技术文档')">
             <div style="
                           text-align: center;
                           font-weight: 600;
@@ -92,8 +94,8 @@
             </div>
           </div>
           <!-- 常见问题 -->
-          <div v-if="checkList.includes('常见问题')">
-            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+          <div v-show="checkList.includes('常见问题')">
+            <common-question :dataForm="dataForm" @update="updateDataForm" ref="commonQuestion"></common-question>
           </div>
         </el-form>
       </div>
@@ -138,6 +140,7 @@ import qs from "qs";
 import CommonQuestion from './components/common-question.vue';
 import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
 import Cookies from 'js-cookie'
+import { tableColumns } from './IntegratedServices.vue';
 
 export default {
   components: {
@@ -158,7 +161,7 @@ export default {
           },
           {
             "attrType": "常见问题",
-            "attrValue": [{ question: "", answer: "" }],
+            "attrValue": '[{ question: "", answer: "" }]',
           }
         ],
         "fuseResourceList": [
@@ -172,11 +175,8 @@ export default {
         "provider": "",
         "providerMobile": "",
         "providerUser": "",
-        // "updateDate": "",
-        // "updater": 0,
-        // "createDate": "",
-        // "creator": 0,
         "deptUser": "",
+        type: '融合服务'
       },
       rules: {
         name: [
@@ -220,16 +220,7 @@ export default {
       areaList: [],
       fileNameList: [],
       addOrUpdateVisibleCopy: this.addOrUpdateVisible,
-      displayInfo: {
-        'name': '融合服务名称',
-        'description': '融合服务描述',
-        'applicationArea': '应用领域',
-        'deptUser': '部门联系人',
-        'mobile': '部门联系人电话',
-        'provider': '服务商',
-        'providerMobile': '服务商联系人',
-        'providerMobile': '服务商联系人电话',
-      },
+      displayInfo: tableColumns,
       displayListInfo: {
         '常见问题': [],
         '组合能力': []
@@ -257,9 +248,12 @@ export default {
     addOrUpdateVisible: {
       handler(newVal) {
         this.addOrUpdateVisibleCopy = newVal;
+        if (this.modalType == 'add' && newVal) {
+          this.getDetail(this.dataForm)
+        }
       },
       immediate: true,
-    }
+    },
   },
   mounted() {
     // 获取应用领域
@@ -365,21 +359,24 @@ export default {
     getDetail(data) {
       this.dataForm = data;
       this.$nextTick(() => {
+        this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data)
+        this.$refs.commonQuestion && this.$refs.commonQuestion.getDataInfo(data)
         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,
-          })
+          if (v.resource) {
+            arr.push({
+              name: v.resource.name,
+              type: v.resource.type,
+            })
+          }
         })
         this.displayListInfo['常见问题'] = JSON.parse(questionObj.attrValue || '[]')
         this.displayListInfo['组合能力'] = arr
diff --git a/back/src/views/modules/ability/IntegratedServices.vue b/back/src/views/modules/ability/IntegratedServices.vue
index 16972066..ae494b97 100644
--- a/back/src/views/modules/ability/IntegratedServices.vue
+++ b/back/src/views/modules/ability/IntegratedServices.vue
@@ -21,25 +21,8 @@
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
         style="width: 100%" :height="qp ? '810px' : '650px'">
-
-        <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 v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item" 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">
             <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
@@ -61,9 +44,7 @@
       <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>
@@ -71,20 +52,28 @@
 <script>
 import mixinViewModule from "@/mixins/view-module";
 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 const tableColumns = {
+  'name': '融合服务名称',
+  'description': '融合服务描述',
+  'provider': '服务商',
+  'providerUser': '服务商联系人',
+  'providerMobile': '服务商联系人电话',
+  'applicationArea': '应用领域',
+  'deptId': '所属部门',
+  'deptUser': '部门联系人',
+  'mobile': '部门联系人电话',
+}
 
 export default {
   mixins: [mixinViewModule],
   data() {
     return {
+      // 表格--列
+      tableColumns: tableColumns,
       tableData: [],
-      showData: false,
-      childName: '',
       mixinViewModuleOptions: {
         getDataListURL: "/fuse/page",
         exportURL: "/ability/bsabilityai/export",
@@ -92,27 +81,18 @@ export default {
         getDataListIsPage: true,
         deleteIsBatch: false,
       },
-      disabled: false,
-      sceneArr: dictionaries.sceneArr,
-      fieldArr: dictionaries.fieldArr,
-      shareFormArr: dictionaries.shareFormArr,
       dataForm: {
         name: "",
         order: 'desc',
         orderField: 'create_date',
+        type: '融合服务'
       },
       qp: false,
-      relateApplicationResourceVisible: false,
-      relationData: {}, //打开穿梭框时传递的参数
-      topNameArray: [], //
       modalType: 'add',
     };
   },
-  watch: {},
   components: {
     AddOrUpdate,
-    RelateApplication,
-    showChild,
   },
   mounted() {
     window.addEventListener("resize", this.a);
@@ -121,7 +101,7 @@ export default {
   methods: {
     deleteRow(id) {
       this.$http.delete('/fuse/delete', {
-         data: [id]
+        data: [id]
       }).then(res => {
         console.log('删除成功', res)
         if (res.data.code !== 0) {
@@ -154,7 +134,6 @@ export default {
       this.modalType = 'update';
       const cloneVal = JSON.parse(JSON.stringify(val))
       this.$nextTick(() => {
-        // this.$refs.addOrUpdate.dataForm = cloneVal;
         this.$refs.addOrUpdate.getDetail(cloneVal)
       })
     },
@@ -183,50 +162,26 @@ export default {
         "_blank"
       );
     },
-    // 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) {
           console.log(
             "全屏1",
-            window.outerHeight,
-            screen.availHeight,
-            window.outerWidth,
-            screen.availWidth
           );
           this.qp = false;
         } else {
           console.log(
             "不是全屏2",
-            window.outerHeight,
-            screen.availHeight,
-            window.outerWidth,
-            screen.availWidth
           );
           this.qp = true;
         }
       } else {
         console.log(
           "不是全屏3",
-          window.outerHeight,
-          screen.availHeight,
-          window.outerWidth,
-          screen.availWidth
         );
         this.qp = true;
       }
     },
-    // 是否展示关联应用弹窗
-    handleIsShowRelatePopupApply(type) {
-      this.relateApplicationResourceVisible = type;
-    },
   },
 };
 </script>
diff --git a/back/src/views/modules/ability/components/common-question.vue b/back/src/views/modules/ability/components/common-question.vue
index 5af00854..0ab78cb3 100644
--- a/back/src/views/modules/ability/components/common-question.vue
+++ b/back/src/views/modules/ability/components/common-question.vue
@@ -8,8 +8,10 @@
                 <el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
             </el-form-item>
             <el-form-item label="问题描述" prop="question">
-                <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-input type="textarea" :rows="2" v-model="item.answer" placeholder="请输入问题描述" style="width:90%">
+                </el-input>
+                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
+                    v-if="dataInfo.length > 1">删除
                 </el-button>
             </el-form-item>
             <el-button style="margin-left:120px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
@@ -43,33 +45,22 @@ export default {
             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() {
+        getDataInfo(dataForm) {
             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,
+            if (dataForm && (dataForm.id || dataForm.id === 0)) {
+                let fuseAttrList = dataForm.fuseAttrList || [];
+                let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
+                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({
@@ -95,8 +86,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .question-box {
-    margin-bottom: 20px;
-
     .title {
         text-align: center;
         font-weight: 600;
diff --git a/back/src/views/modules/ability/components/integrated-combine-ability.vue b/back/src/views/modules/ability/components/integrated-combine-ability.vue
index fd82c47c..60952228 100644
--- a/back/src/views/modules/ability/components/integrated-combine-ability.vue
+++ b/back/src/views/modules/ability/components/integrated-combine-ability.vue
@@ -2,25 +2,32 @@
 <template>
     <div class="content-box">
         <div class="title">
-            组合能力
+            {{ 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 class="no-data loading-box" v-loading="loading" v-if="loading">
+        </div>
+        <div v-if="!loading">
+            <div v-for="(item, index) in dataInfo" :key="index">
+                <el-form-item label="能力类别" prop="">
+                    <el-select v-model="item.type" placeholder="请选择能力类别"
+                        @change="(data) => filterSelect(data, item)" :disabled="disabledType">
+                        <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.resourceId" placeholder="请选择能力"
+                        :disabled="disabledType">
+                        <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"
+                        v-if="!disabledType && dataInfo.length > 1">删除
+                    </el-button>
+                    <el-button style="margin-left:10px" size="small"
+                        v-if="!disabledType && index == dataInfo.length - 1" @click="addItem(dataInfo, 0)"
+                        type="primary">添加
+                    </el-button>
+                </el-form-item>
+            </div>
         </div>
     </div>
 </template>
@@ -31,10 +38,22 @@ export default {
             type: Object,
             default: () => { }
         },
+        title: {
+            type: String,
+            default: '组合能力'
+        },
+        // 是否可编辑
+        disabledType: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
             typeOptions: [
+                {
+                    value: '',
+                },
                 {
                     value: '数据资源',
                 },
@@ -51,7 +70,10 @@ export default {
                     value: '知识库',
                 },
             ],
-            dataInfo: []
+            dataInfo: [],
+            abilityArray: [],
+            abilityArrayCopy: [],
+            loading: false,
         }
     },
     watch: {
@@ -61,56 +83,52 @@ export default {
                 let arr = newVal.map((v, index) => {
                     return {
                         sequence: index,
-                        resourceId: v.name
+                        resourceId: v.resourceId,
                     }
                 })
                 this.$emit('update', {
-                    title: '组合能力',
+                    title: this.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,
-        }
+    },
+    mounted() {
     },
     methods: {
-        getDataInfo() {
+        async getDataInfo(dataForm) {
+            await this.getAbility()
             let arr = []
-            let attrValue = this.dataForm.fuseResourceList || []
+            let attrValue = dataForm.fuseResourceList || []
             if (attrValue.length > 0) {
                 attrValue.map(v => {
-                    arr.push({
+                    let _obj = {
                         type: v.resource && v.resource.type,
-                        name: v.resourceId,
-                        abilityOptions: []
-                    })
+                        resourceId: v.resourceId,
+                    }
+                    this.filterSelect(v.resource && v.resource.type, _obj)
+                    arr.push(_obj)
                 })
             } else {
                 arr = []
                 arr.push({
                     type: "",
-                    name: "",
+                    resourceId: "",
                     abilityOptions: []
                 })
             }
             this.dataInfo = arr;
+            this.$nextTick(() => {
+                console.log(999, this.dataInfo)
+            })
         },
         // 新增
         addItem(list) {
             list.push({
                 type: "",
-                name: "",
+                resourceId: "",
                 abilityOptions: []
             })
         },
@@ -119,27 +137,30 @@ export default {
             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)
+        getAbility() {
+            return new Promise((resolve, reject) => {
+                this.loading = true;
+                this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
+                    this.loading = false;
+                    if (res.code !== 0) {
+                        return this.$message.error(res.msg)
+                    }
+                    this.abilityArray = res.data || []
+                    this.abilityArrayCopy = res.data || []
+                    resolve(res)
+                }).catch((err) => {
+                    this.loading = false;
+                    this.$message.error(err)
+                    reject(err)
+                })
             })
         },
-        changeType(data, item) {
-            this.getAbility(data, item)
+        filterSelect(type, item) {
+            let arr = this.abilityArrayCopy.filter(v => v.type == type)
+            let selectArray = this.dataInfo.map(v => v.resourceId) || [];
+            // 过滤掉已选的
+            item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
         },
-
     }
 }
 </script>
@@ -154,4 +175,9 @@ export default {
         margin-bottom: 10px;
     }
 }
+
+.loading-box {
+    width: 100%;
+    height: 100px;
+}
 </style>
\ No newline at end of file