From a8b91e2788ff7fea80c72124aeebfc0e80df60f4 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Thu, 14 Jul 2022 15:49:34 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E8=B5=8B=E8=83=BD=E5=9C=BA=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assignedScene/add-update-scene.vue        | 427 ++++++++++++++++++
 .../modules/ability/assignedScene/index.vue   | 201 +++++++++
 .../ability/components/scene-use-step.vue     | 107 +++++
 3 files changed, 735 insertions(+)
 create mode 100644 back/src/views/modules/ability/assignedScene/add-update-scene.vue
 create mode 100644 back/src/views/modules/ability/assignedScene/index.vue
 create mode 100644 back/src/views/modules/ability/components/scene-use-step.vue

diff --git a/back/src/views/modules/ability/assignedScene/add-update-scene.vue b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
new file mode 100644
index 00000000..29aae680
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
@@ -0,0 +1,427 @@
+<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 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": "",
+        "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,
+        },
+      ],
+      checkList: ['基本信息', '关联能力', '使用步骤'],
+      areaList: [],
+      fileNameList: [],
+      addOrUpdateVisibleCopy: this.addOrUpdateVisible,
+      displayInfo: {
+        'name': '名称',
+        'description': '描述',
+      },
+      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,
+    }
+  },
+  methods: {
+    clearForm() {
+      this.$refs.dataForm && this.$refs.dataForm.resetFields();
+    },
+    closeModal() {
+      this.$emit('closeModal')
+    },
+    // 更新表单
+    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;
+    },
+
+    // 表单提交
+    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 = []
+          }
+          let _obj = Object.assign({}, this.dataForm, {
+            type: '赋能场景'
+          })
+          this.$http
+          [methodsObj[this.modalType]]("/fuse", _obj)
+            .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/assignedScene/index.vue b/back/src/views/modules/ability/assignedScene/index.vue
new file mode 100644
index 00000000..1dd65749
--- /dev/null
+++ b/back/src/views/modules/ability/assignedScene/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <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-form-item>
+        <el-form-item>
+          <el-button @click="searchData">{{
+              $t("query")
+          }}</el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <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 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 :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="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>
+
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-update-scene v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
+        :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
+      </add-update-scene>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from "@/mixins/view-module";
+import AddUpdateScene from "./add-update-scene";
+// import dictionaries from "@/utils/dictionaries";
+
+export default {
+  mixins: [mixinViewModule],
+  data() {
+    return {
+      tableData: [],
+      childName: '',
+      mixinViewModuleOptions: {
+        getDataListURL: "/fuse/page",
+        exportURL: "/ability/bsabilityai/export",
+        deleteURL: "/fuse",
+        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: {
+    AddUpdateScene,
+  },
+  mounted() {
+    window.addEventListener("resize", this.a);
+    this.fullScreen();
+  },
+  methods: {
+    deleteRow(id) {
+      this.$http.delete('/fuse/delete', {
+         data: [id]
+      }).then(res => {
+        console.log('删除成功', res)
+        if (res.data.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.modalType = 'display';
+      const cloneVal = JSON.parse(JSON.stringify(val))
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm = cloneVal;
+        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;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+</style>
diff --git a/back/src/views/modules/ability/components/scene-use-step.vue b/back/src/views/modules/ability/components/scene-use-step.vue
new file mode 100644
index 00000000..5af00854
--- /dev/null
+++ b/back/src/views/modules/ability/components/scene-use-step.vue
@@ -0,0 +1,107 @@
+<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>
+            <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-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