赋能场景挂接增加能力输入

This commit is contained in:
guoyue 2022-07-18 13:53:01 +08:00
parent 2d12bf76d4
commit ddd3d89a14
3 changed files with 112 additions and 42 deletions

View File

@ -483,7 +483,6 @@ export default {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
line-height: 32px; line-height: 32px;
background: pink;
width: 120px; width: 120px;
} }

View File

@ -31,7 +31,8 @@
基本信息 基本信息
</div> </div>
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="dataForm.name" placeholder="请输入名称" :disabled="modalType === 'display'" style="width:90%"></el-input> <el-input v-model="dataForm.name" placeholder="请输入名称" :disabled="modalType === 'display'"
style="width:90%"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="描述" prop="description"> <el-form-item label="描述" prop="description">
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%" <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%"
@ -46,6 +47,13 @@
</integrated-combine-ability> </integrated-combine-ability>
</div> </div>
<!-- 更多能力 -->
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('更多能力')">
<common-question :dataForm="dataForm" @update="updateDataForm" ref="commonQuestion" title="更多能力"
:keyTextObj="moreKeyTextObj">
</common-question>
</div>
<!-- 使用步骤 --> <!-- 使用步骤 -->
<div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')"> <div style="marigin-bottom:20px" v-show="checkList.includes('使用步骤')">
<scene-use-step :dataForm="dataForm" @update="updateDataForm" :disabledType="modalType === 'display'" <scene-use-step :dataForm="dataForm" @update="updateDataForm" :disabledType="modalType === 'display'"
@ -96,16 +104,28 @@ import qs from "qs";
import SceneUseStep from '../components/scene-use-step.vue'; import SceneUseStep from '../components/scene-use-step.vue';
import IntegratedCombineAbility from '../components/integrated-combine-ability.vue'; import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import CommonQuestion from '../components/common-question.vue';
export default { export default {
components: { components: {
SceneUseStep, SceneUseStep,
IntegratedCombineAbility, IntegratedCombineAbility,
CommonQuestion,
}, },
data() { data() {
return { return {
fileList: [], fileList: [],
fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`, fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
moreKeyTextObj: {
nameObj: {
text: '能力名称',
key: 'name'
},
descObj: {
text: '能力描述',
key: 'description'
},
},
dataForm: { dataForm: {
"applicationArea": "", "applicationArea": "",
"description": "", "description": "",
@ -113,7 +133,11 @@ export default {
{ {
"attrType": "使用步骤", "attrType": "使用步骤",
"attrValue": [{ question: "", answer: "" }], "attrValue": [{ question: "", answer: "" }],
} },
{
"attrType": "更多能力",
"attrValue": [{ name: "", description: "" }],
},
], ],
"fuseResourceList": [ "fuseResourceList": [
{ {
@ -155,13 +179,18 @@ export default {
key: 'combine', key: 'combine',
show: true, show: true,
}, },
{
name: '更多能力',
key: 'more',
show: true,
},
{ {
name: '使用步骤', name: '使用步骤',
key: 'basic', key: 'basic',
show: true, show: true,
}, },
], ],
checkList: ['基本信息', '关联能力', '使用步骤'], checkList: ['基本信息', '关联能力', '更多能力', '使用步骤'],
areaList: [], areaList: [],
addOrUpdateVisibleCopy: this.addOrUpdateVisible, addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: { displayInfo: {
@ -170,7 +199,8 @@ export default {
}, },
displayListInfo: { displayListInfo: {
'使用步骤': [], '使用步骤': [],
'关联能力': [] '关联能力': [],
'更多能力': [],
}, },
modalTypeText: { modalTypeText: {
add: '挂接', add: '挂接',
@ -216,16 +246,26 @@ export default {
}, },
// //
updateDataForm(data) { updateDataForm(data) {
if (data.title == '使用步骤') { if (data.title == '关联能力') {
this.dataForm.fuseResourceList = data.list
} else {
// 使
this.operateFuseAttrList(data.title, data)
}
},
operateFuseAttrList(title, data) {
if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
this.dataForm.fuseAttrList.push({
'attrType': title,
'attrValue': JSON.stringify(data.list)
})
} else {
this.dataForm.fuseAttrList.map(v => { this.dataForm.fuseAttrList.map(v => {
if (v.attrType === '使用步骤') { if (v.attrType === title) {
v.attrValue = JSON.stringify(data.list) v.attrValue = JSON.stringify(data.list)
} }
}) })
} }
if (data.title == '关联能力') {
this.dataForm.fuseResourceList = data.list
}
}, },
// //
changeBtn(data) { changeBtn(data) {
@ -281,28 +321,30 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data) this.$refs.combineAbility && this.$refs.combineAbility.getDataInfo(data)
this.$refs.sceneUseUp && this.$refs.sceneUseUp.getDataInfo(data) this.$refs.sceneUseUp && this.$refs.sceneUseUp.getDataInfo(data)
this.$refs.commonQuestion && this.$refs.commonQuestion.getDataInfo(data)
console.log('this.dataForm----详情-------->', this.dataForm); console.log('this.dataForm----详情-------->', this.dataForm);
}) })
}, },
// //
getDisPlayData() { // getDisPlayData() {
this.$nextTick(() => { // this.$nextTick(() => {
const questionObj = this.dataForm.fuseAttrList.find(v => v.attrType == '使用步骤') || {}; // const stepObj = this.dataForm.fuseAttrList.find(v => v.attrType == '使') || {};
let fuseResourceList = this.dataForm.fuseResourceList || []; // const moreObj = this.dataForm.fuseAttrList.find(v => v.attrType == '') || {};
let arr = [] // let fuseResourceList = this.dataForm.fuseResourceList || [];
fuseResourceList.map(v => { // let arr = []
if (v.resource) { // fuseResourceList.map(v => {
arr.push({ // if (v.resource) {
name: v.resource.name, // arr.push({
type: v.resource.type, // name: v.resource.name,
}) // type: v.resource.type,
} // })
}) // }
this.displayListInfo['使用步骤'] = JSON.parse(questionObj.attrValue || '[]') // })
this.displayListInfo['关联能力'] = arr // this.displayListInfo['使'] = JSON.parse(stepObj.attrValue || '[]')
}) // this.displayListInfo[''] = JSON.parse(moreObj.attrValue || '[]')
// this.displayListInfo[''] = arr
}, // })
// },
}, },
beforeDestroy() { beforeDestroy() {
this.clearForm() this.clearForm()
@ -403,7 +445,6 @@ export default {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
line-height: 32px; line-height: 32px;
background: pink;
width: 120px; width: 120px;
} }

View File

@ -1,14 +1,17 @@
<template> <template>
<div class="question-box"> <div class="question-box">
<div class="title"> <div class="title">
常见问题 {{ title }}
</div> </div>
<div v-for="(item, index) in dataInfo" :key="index"> <div v-for="(item, index) in dataInfo" :key="index">
<el-form-item label="问题名称" prop="question"> <el-form-item :label="keyTextObj.nameObj.text">
<el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input> <el-input v-model="item[keyTextObj.nameObj.key]" :placeholder="`请输入${keyTextObj.nameObj.text}`"
style="width:90%">
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="问题描述" prop="question"> <el-form-item :label="keyTextObj.descObj.text">
<el-input type="textarea" :rows="2" v-model="item.answer" placeholder="请输入问题描述" style="width:90%"> <el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
</el-input> </el-input>
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small" <el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
v-if="dataInfo.length > 1">删除 v-if="dataInfo.length > 1">删除
@ -26,6 +29,25 @@ export default {
dataForm: { dataForm: {
type: Object, type: Object,
default: () => { } default: () => { }
},
title: {
type: String,
default: '常见问题'
},
keyTextObj: {
type: Object,
default: () => {
return {
nameObj: {
text: '问题名称',
key: 'question'
},
descObj: {
text: '问题描述',
key: 'answer'
},
}
}
} }
}, },
data() { data() {
@ -38,7 +60,7 @@ export default {
handler(newVal) { handler(newVal) {
this.dataInfo = newVal; this.dataInfo = newVal;
this.$emit('update', { this.$emit('update', {
title: '常见问题', title: this.title,
list: newVal list: newVal
}) })
}, },
@ -51,21 +73,29 @@ export default {
let arr = [] let arr = []
if (dataForm && (dataForm.id || dataForm.id === 0)) { if (dataForm && (dataForm.id || dataForm.id === 0)) {
let fuseAttrList = dataForm.fuseAttrList || []; let fuseAttrList = dataForm.fuseAttrList || [];
let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {} let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
let attrValue = JSON.parse(obj.attrValue || "[]") let attrValue = JSON.parse(obj.attrValue || "[]")
if (attrValue.length > 0) { if (attrValue.length > 0) {
attrValue.map(v => { attrValue.map(v => {
arr.push({ arr.push({
question: v.question, [this.keyTextObj.nameObj.key]: v[this.keyTextObj.nameObj.key],
answer: v.answer, [this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
}) })
}) })
} else {
arr = []
console.log('this.keyTextObj.nameObj.key------------>', this.keyTextObj.nameObj.key);
arr.push({
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
})
} }
} else { } else {
arr = [] arr = []
console.log('this.keyTextObj.nameObj.key------------>', this.keyTextObj.nameObj.key);
arr.push({ arr.push({
question: "", [this.keyTextObj.nameObj.key]: '',
answer: "", [this.keyTextObj.descObj.key]: '',
}) })
} }
this.dataInfo = arr; this.dataInfo = arr;
@ -73,8 +103,8 @@ export default {
// //
addItem() { addItem() {
this.dataInfo.push({ this.dataInfo.push({
question: "", [this.keyTextObj.nameObj.key]: '',
answer: "", [this.keyTextObj.descObj.key]: '',
}) })
}, },
// //