133 lines
4.1 KiB
Vue
133 lines
4.1 KiB
Vue
<template>
|
|
<div class="question-box">
|
|
<div class="title">
|
|
{{ title }}
|
|
</div>
|
|
<div v-for="(item, index) in dataInfo" :key="index">
|
|
<el-form-item :label="keyTextObj.nameObj.text">
|
|
<el-input v-model="item[keyTextObj.nameObj.key]" :placeholder="`请输入${keyTextObj.nameObj.text}`"
|
|
style="width:90%">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="keyTextObj.descObj.text">
|
|
<el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
|
|
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
|
|
</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 class="add-btn" 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: () => { }
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '常见问题'
|
|
},
|
|
keyTextObj: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
nameObj: {
|
|
text: '问题名称',
|
|
key: 'question'
|
|
},
|
|
descObj: {
|
|
text: '问题描述',
|
|
key: 'answer'
|
|
},
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dataInfo: []
|
|
}
|
|
},
|
|
watch: {
|
|
dataInfo: {
|
|
handler(newVal) {
|
|
this.dataInfo = newVal;
|
|
this.$emit('update', {
|
|
title: this.title,
|
|
list: newVal
|
|
})
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
getDataInfo(dataForm) {
|
|
let arr = []
|
|
if (dataForm && (dataForm.id || dataForm.id === 0)) {
|
|
let fuseAttrList = dataForm.fuseAttrList || [];
|
|
let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
|
|
let attrValue = JSON.parse(obj.attrValue || "[]")
|
|
if (attrValue.length > 0) {
|
|
attrValue.map(v => {
|
|
arr.push({
|
|
[this.keyTextObj.nameObj.key]: v[this.keyTextObj.nameObj.key],
|
|
[this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
|
|
})
|
|
})
|
|
} else {
|
|
arr = []
|
|
arr.push({
|
|
[this.keyTextObj.nameObj.key]: '',
|
|
[this.keyTextObj.descObj.key]: '',
|
|
})
|
|
}
|
|
} else {
|
|
arr = []
|
|
arr.push({
|
|
[this.keyTextObj.nameObj.key]: '',
|
|
[this.keyTextObj.descObj.key]: '',
|
|
})
|
|
}
|
|
this.dataInfo = arr;
|
|
},
|
|
// 新增
|
|
addItem() {
|
|
let index = this.dataInfo.length - 1;
|
|
if (this.dataInfo[index][this.keyTextObj.nameObj.key] === '' || this.dataInfo[index][this.keyTextObj.descObj.key] === '') {
|
|
return this.$message.warning('请填写完整信息！')
|
|
}
|
|
this.dataInfo.push({
|
|
[this.keyTextObj.nameObj.key]: '',
|
|
[this.keyTextObj.descObj.key]: '',
|
|
})
|
|
},
|
|
// 删除
|
|
deleteItem(list, index) {
|
|
this.dataInfo.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.question-box {
|
|
.title {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.add-btn {
|
|
margin-top: -12px;
|
|
margin-left: 100px;
|
|
}
|
|
</style> |