hi-ucs/back/src/views/modules/ability/components/common-question.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>