赋能场景相关
This commit is contained in:
parent
4132ea0589
commit
0c3948e544
|
|
@ -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 => {
|
||||
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
|
||||
|
|
@ -424,4 +413,8 @@ export default {
|
|||
color: #606266;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.group-box {
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
@ -97,7 +87,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) {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue