赋能场景相关

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
-      @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
+      :close-on-click-modal="false" :close-on-press-escape="false">
       <div v-if="modalType !== 'display'" style="
             text-align: center;
             font-weight: 600;
@@ -16,12 +16,12 @@
         </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 key="1">
+        <el-form v-if="modalType !== 'display'" :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: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-input v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="dataForm.name" placeholder="请输入名称" :disabled="modalType === 'display'"></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 label="描述" prop="description">
+              <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
+                :disabled="modalType === 'display'"></el-input>
             </el-form-item>
           </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 v-if="checkList.includes('使用步骤')">
-            <common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
+          <div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
+            <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)}`">
-          <el-form-item :label="`使用步骤${i + 1}`">
+        <div class="group-box" 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}`">
+          <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/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-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
+            <el-form-item label="标题" prop="question">
+                <el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
+                </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-form-item label="解释说明" prop="question">
+                <el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
+                    :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"
-                type="primary">添加
+            <el-button style="margin-left:120px" size="small" v-if="!disabledType && index == dataInfo.length - 1"
+                @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 obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
-            console.log('obj-------常见问题----->', obj);
-            let attrValue = JSON.parse(obj.attrValue)
+            let fuseAttrList = dataForm.fuseAttrList || [];
+            let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
+            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>