hi-ucs/back/src/views/modules/ability/components/common-question.vue

133 lines
4.1 KiB
Vue
Raw Normal View History

2022-07-08 16:10:08 +08:00
<template>
<div class="question-box">
<div class="title">
2022-07-18 13:53:01 +08:00
{{ title }}
2022-07-08 16:10:08 +08:00
</div>
2022-07-08 16:16:23 +08:00
<div v-for="(item, index) in dataInfo" :key="index">
2022-07-18 13:53:01 +08:00
<el-form-item :label="keyTextObj.nameObj.text">
<el-input v-model="item[keyTextObj.nameObj.key]" :placeholder="`请输入${keyTextObj.nameObj.text}`"
style="width:90%">
</el-input>
2022-07-08 16:10:08 +08:00
</el-form-item>
2022-07-18 13:53:01 +08:00
<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%">
2022-07-15 16:43:29 +08:00
</el-input>
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
v-if="dataInfo.length > 1">删除
2022-07-08 16:10:08 +08:00
</el-button>
</el-form-item>
<el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
添加
2022-07-08 16:10:08 +08:00
</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
dataForm: {
type: Object,
default: () => { }
2022-07-18 13:53:01 +08:00
},
title: {
type: String,
default: '常见问题'
},
keyTextObj: {
type: Object,
default: () => {
return {
nameObj: {
text: '问题名称',
key: 'question'
},
descObj: {
text: '问题描述',
key: 'answer'
},
}
}
2022-07-08 16:10:08 +08:00
}
},
data() {
return {
dataInfo: []
}
},
watch: {
dataInfo: {
handler(newVal) {
this.dataInfo = newVal;
this.$emit('update', {
2022-07-18 13:53:01 +08:00
title: this.title,
2022-07-08 16:10:08 +08:00
list: newVal
})
},
deep: true,
immediate: true,
},
},
methods: {
2022-07-15 16:43:29 +08:00
getDataInfo(dataForm) {
2022-07-08 16:10:08 +08:00
let arr = []
2022-07-15 16:43:29 +08:00
if (dataForm && (dataForm.id || dataForm.id === 0)) {
let fuseAttrList = dataForm.fuseAttrList || [];
2022-07-18 13:53:01 +08:00
let obj = fuseAttrList.find(v => v.attrType === this.title) || {}
2022-07-15 16:43:29 +08:00
let attrValue = JSON.parse(obj.attrValue || "[]")
if (attrValue.length > 0) {
attrValue.map(v => {
arr.push({
2022-07-18 13:53:01 +08:00
[this.keyTextObj.nameObj.key]: v[this.keyTextObj.nameObj.key],
[this.keyTextObj.descObj.key]: v[this.keyTextObj.descObj.key],
2022-07-15 16:43:29 +08:00
})
2022-07-08 16:10:08 +08:00
})
2022-07-18 13:53:01 +08:00
} else {
arr = []
arr.push({
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
})
2022-07-15 16:43:29 +08:00
}
2022-07-08 16:10:08 +08:00
} else {
arr = []
arr.push({
2022-07-18 13:53:01 +08:00
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
2022-07-08 16:10:08 +08:00
})
}
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('请填写完整信息!')
}
2022-07-08 16:10:08 +08:00
this.dataInfo.push({
2022-07-18 13:53:01 +08:00
[this.keyTextObj.nameObj.key]: '',
[this.keyTextObj.descObj.key]: '',
2022-07-08 16:10:08 +08:00
})
},
// 删除
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;
}
2022-07-08 16:10:08 +08:00
</style>