Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

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('组合能力')">
+          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
-            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
+            <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('常见问题')">
+          <div v-show="checkList.includes('常见问题')">
-            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+            <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: {
+      displayInfo: tableColumns,
-        'name': '融合服务名称',
-        'description': '融合服务描述',
-        'applicationArea': '应用领域',
-        'deptUser': '部门联系人',
-        'mobile': '部门联系人电话',
-        'provider': '服务商',
-        'providerMobile': '服务商联系人',
-        'providerMobile': '服务商联系人电话',
-      },
       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 => {
+          if (v.resource) {
             arr.push({
               name: v.resource.name,
               type: v.resource.type,
             })
+          }
         })
         this.displayListInfo['常见问题'] = JSON.parse(questionObj.attrValue || '[]')
         this.displayListInfo['组合能力'] = arr

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 v-for="(item) in Object.keys(tableColumns)" :key="item" :prop="item" label="融合服务名称"
-        <el-table-column prop="name" label="融合服务名称" header-align="center" align="center"></el-table-column>
+          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">
             <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);
@@ -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>

back/src/views/modules/ability/assignedScene/add-update-scene.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
+    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
-      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+      :close-on-click-modal="false" :close-on-press-escape="false">
       <div v-if="modalType !== 'display'" style="
             text-align: center;
             font-weight: 600;
@@ -17,11 +17,11 @@
       </el-checkbox-group>
 
       <!-- 挂载和修改   -->
-      <div key="1" v-if="modalType !== 'display'">
+      <div key="1">
-        <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
+        <el-form v-if="modalType !== 'display'" :model="dataForm" :rules="rules" ref="dataForm"
-          :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+          @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:40px" v-show="checkList.includes('基本信息')">
             <div style="
                 text-align: center;
                 font-weight: 600;
@@ -30,62 +30,46 @@
               ">
               基本信息
             </div>
-            <el-form-item label="融合服务名称" prop="name">
+            <el-form-item label="名称" prop="name">
-              <el-input v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
+              <el-input v-model="dataForm.name" placeholder="请输入名称" :disabled="modalType === 'display'"></el-input>
             </el-form-item>
-            <el-form-item label="融合服务描述" prop="description">
+            <el-form-item label="描述" prop="description">
-              <el-input v-model="dataForm.description" placeholder="请输入融合服务描述"></el-input>
+              <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
-            </el-form-item>
+                :disabled="modalType === 'display'"></el-input>
-            <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('关联能力')">
+          <div class="" style="marigin-bottom:40px" v-show="checkList.includes('关联能力')">
-            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
+            <integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" title="关联能力"
+              ref="combineAbility" :disabledType="modalType === 'display'">
             </integrated-combine-ability>
           </div>
 
           <!-- 使用步骤 -->
-          <div v-if="checkList.includes('使用步骤')">
+          <div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
-            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+            <scene-use-step :dataForm="dataForm" @update="updateDataForm" :disabledType="modalType === 'display'"
+              ref="sceneUseUp">
+            </scene-use-step>
           </div>
         </el-form>
       </div>
 
       <!-- 展示 -->
-      <el-form key="2" class="detial-form" v-else :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
+      <el-form key="2" v-if="modalType === 'display'" class="detial-form"
+        :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)}`">
+        <div class="group-box" v-for="(data, i) in displayListInfo['使用步骤']" :key="`${i}${JSON.stringify(data)}`">
-          <el-form-item :label="`使用步骤${i + 1}`">
+          <el-form-item :label="`使用步骤标题${i + 1}`">
             {{ `${data['question']}` }}
           </el-form-item>
-          <el-form-item :label="`问题描述${i + 1}`">
+          <el-form-item :label="`描述${i + 1}`">
             {{ `${data['answer']} ` }}
           </el-form-item>
         </div>
-        <div v-for="(data, i) in displayListInfo['关联能力']" :key="`${i}${JSON.stringify(data)}`">
+        <div class="group-box" v-for="(data, i) in displayListInfo['关联能力']" :key="`${i}${JSON.stringify(data)}`">
           <el-form-item :label="`能力类别${i + 1}`">
             {{ `${data['type']}` }}
           </el-form-item>
@@ -109,13 +93,13 @@
 <script>
 import debounce from "lodash/debounce";
 import qs from "qs";
-import CommonQuestion from '../components/common-question.vue';
+import SceneUseStep from '../components/scene-use-step.vue';
 import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
 import Cookies from 'js-cookie'
 
 export default {
   components: {
-    CommonQuestion,
+    SceneUseStep,
     IntegratedCombineAbility,
   },
   data() {
@@ -126,10 +110,6 @@ export default {
         "applicationArea": "",
         "description": "",
         "fuseAttrList": [
-          // {
-          //   "attrType": "技术文档",
-          //   "attrValue": "",
-          // },
           {
             "attrType": "使用步骤",
             "attrValue": [{ question: "", answer: "" }],
@@ -137,7 +117,7 @@ export default {
         ],
         "fuseResourceList": [
           {
-            "resourceId": 0,
+            "resourceId": '',
             "sequence": ""
           }
         ],
@@ -183,7 +163,6 @@ export default {
       ],
       checkList: ['基本信息', '关联能力', '使用步骤'],
       areaList: [],
-      fileNameList: [],
       addOrUpdateVisibleCopy: this.addOrUpdateVisible,
       displayInfo: {
         'name': '名称',
@@ -193,6 +172,11 @@ export default {
         '使用步骤': [],
         '关联能力': []
       },
+      modalTypeText: {
+        add: '挂接',
+        display: '能力展示',
+        update: '修改'
+      }
     };
   },
   props: {
@@ -216,6 +200,9 @@ export default {
     addOrUpdateVisible: {
       handler(newVal) {
         this.addOrUpdateVisibleCopy = newVal;
+        if (this.modalType == 'add' && newVal) {
+          this.getDetail(this.dataForm)
+        }
       },
       immediate: true,
     }
@@ -244,7 +231,6 @@ export default {
     changeBtn(data) {
       this.checkList = data;
     },
-
     // 表单提交
     dataFormSubmitHandle: debounce(
       function () {
@@ -293,21 +279,24 @@ export default {
     getDetail(data) {
       this.dataForm = data;
       this.$nextTick(() => {
+        this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data)
+        this.$refs.sceneUseUp && this.$refs.sceneUseUp.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 => {
+          if (v.resource) {
             arr.push({
               name: v.resource.name,
               type: v.resource.type,
             })
+          }
         })
         this.displayListInfo['使用步骤'] = JSON.parse(questionObj.attrValue || '[]')
         this.displayListInfo['关联能力'] = arr
@@ -424,4 +413,8 @@ export default {
   color: #606266;
   line-height: 32px;
 }
+
+.group-box {
+  // margin-bottom: 10px;
+}
 </style>

back/src/views/modules/ability/assignedScene/index.vue

@@ -26,18 +26,16 @@
 
         <el-table-column prop="description" 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">
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300" right="0">
           <template slot-scope="scope">
             <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">
@@ -54,7 +52,6 @@
 <script>
 import mixinViewModule from "@/mixins/view-module";
 import AddUpdateScene from "./add-update-scene";
-// import dictionaries from "@/utils/dictionaries";
 
 export default {
   mixins: [mixinViewModule],
@@ -70,9 +67,6 @@ export default {
         deleteIsBatch: false,
       },
       disabled: false,
-      // sceneArr: dictionaries.sceneArr,
-      // fieldArr: dictionaries.fieldArr,
-      // shareFormArr: dictionaries.shareFormArr,
       dataForm: {
         name: "",
         order: 'desc',
@@ -80,13 +74,9 @@ export default {
         type: '赋能场景'
       },
       qp: false,
-      // relateApplicationResourceVisible: false,
-      // relationData: {}, //打开穿梭框时传递的参数
-      // topNameArray: [], //
       modalType: 'add',
     };
   },
-  watch: {},
   components: {
     AddUpdateScene,
   },
@@ -130,7 +120,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)
       })
     },
@@ -152,41 +141,22 @@ export default {
         this.$refs.addOrUpdate.getDisPlayData()
       })
     },
-    showDocument(val) {
-      console.log(val);
-      window.open(
-        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
-        "_blank"
-      );
-    },
     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;
       }

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-input type="textarea" :rows="2" v-model="item.answer" placeholder="请输入问题描述" style="width:90%">
-                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small">删除
+                </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,26 +45,14 @@ 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 || [];
+            if (dataForm && (dataForm.id || dataForm.id === 0)) {
+                let fuseAttrList = dataForm.fuseAttrList || [];
                 let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
-            console.log('obj-------常见问题----->', obj);
+                let attrValue = JSON.parse(obj.attrValue || "[]")
-            let attrValue = JSON.parse(obj.attrValue)
-
                 if (attrValue.length > 0) {
                     attrValue.map(v => {
                         arr.push({
@@ -70,6 +60,7 @@ export default {
                             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;

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 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) => changeType(data, item, index)">
+                    <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.name" placeholder="请选择能力" filterable>
+                    <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">删除
+                    <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="index == dataInfo.length - 1"
+                    <el-button style="margin-left:10px" size="small"
-                    @click="addItem(dataInfo, 0)" type="primary">添加
+                        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,
+    mounted() {
-            immediate: true,
-        }
     },
     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,
+                        resourceId: v.resourceId,
-                        abilityOptions: []
+                    }
-                    })
+                    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) {
+        getAbility() {
-            this.$http.get(`/resource/list`, {
+            return new Promise((resolve, reject) => {
-                params: {
+                this.loading = true;
-                    type: type
+                this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
-                }
+                    this.loading = false;
-            }).then(({ data: res }) => {
                     if (res.code !== 0) {
                         return this.$message.error(res.msg)
                     }
-                let arr = res.data || []
+                    this.abilityArray = res.data || []
-                let selectArray = this.dataInfo.map(v => v.name) || [];
+                    this.abilityArrayCopy = res.data || []
-                // 过滤掉已选的
+                    resolve(res)
-                item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
                 }).catch((err) => {
+                    this.loading = false;
                     this.$message.error(err)
+                    reject(err)
+                })
             })
         },
-        changeType(data, item) {
+        filterSelect(type, item) {
-            this.getAbility(data, 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>

back/src/views/modules/ability/components/scene-use-step.vue

@@ -1,21 +1,34 @@
 <template>
     <div class="question-box">
         <div class="title">
-            常见问题
+            能力使用步骤
         </div>
         <div v-for="(item, index) in dataInfo" :key="index">
-            <el-form-item label="问题名称" prop="question">
+            <el-form-item label="标题" prop="question">
-                <el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
+                <el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
+                </el-input>
             </el-form-item>
-            <el-form-item label="问题描述" prop="question">
+            <el-form-item label="解释说明" prop="question">
-                <el-input v-model="item.answer" placeholder="请输入问题描述" style="width:90%"></el-input>
+                <el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
-                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small">删除
+                    :disabled="disabledType">
+                </el-input>
+                <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
+                    v-if="!disabledType && dataInfo.length > 1">删除
                 </el-button>
             </el-form-item>
-            <el-button style="margin-left:120px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
+            <el-button style="margin-left:120px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
-                type="primary">添加
+                @click="addItem" type="primary">添加
             </el-button>
         </div>
+
+        <div class="step-box">
+            <el-steps :active="2">
+                <el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
+                    :key="index">
+                </el-step>
+            </el-steps>
+        </div>
+
     </div>
 </template>
 <script>
@@ -24,7 +37,12 @@ export default {
         dataForm: {
             type: Object,
             default: () => { }
-        }
+        },
+        // 是否可编辑
+        disabledType: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -36,32 +54,20 @@ export default {
             handler(newVal) {
                 this.dataInfo = newVal;
                 this.$emit('update', {
-                    title: '常见问题',
+                    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() {
+        getDataInfo(dataForm) {
             let arr = []
-            let fuseAttrList = this.dataForm.fuseAttrList || [];
+            let fuseAttrList = dataForm.fuseAttrList || [];
-            let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
+            let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
-            console.log('obj-------常见问题----->', obj);
+            let attrValue = JSON.parse(obj.attrValue || "[]")
-            let attrValue = JSON.parse(obj.attrValue)
 
             if (attrValue.length > 0) {
                 attrValue.map(v => {
@@ -96,6 +102,7 @@ export default {
 <style lang="scss" scoped>
 .question-box {
     margin-bottom: 20px;
+    margin-top: 40px;
 
     .title {
         text-align: center;
@@ -104,4 +111,8 @@ export default {
         margin-bottom: 10px;
     }
 }
+
+.step-box {
+    padding: 20px 10px 10px 10px;
+}
 </style>