<template> <div> <el-row type="flex" class="add-btn" justify="end"> <el-col :span="6" style="text-align: right;"> <el-button type="success" plain @click="add" v-if="!$store.state.readonly">添加回复</el-button> </el-col> </el-row> <el-table :data="list" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" class="demo-table-expand"> <el-form-item label="关键词"> <span>{{ props.row.value }}</span> </el-form-item> <el-form-item label="回复内容"> <div v-for="(item, index) in JSON.parse(props.row.desc)">{{ item.content }}</div> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="ID" prop="id"> </el-table-column> <el-table-column label="关键词" prop="value"> </el-table-column> <el-table-column label="回复内容"> <template slot-scope="scope"> {{ JSON.parse(scope.row.desc).length }} 条回复 </template> </el-table-column> <el-table-column prop="created_at" label="创建时间"> </el-table-column> <el-table-column width="250" v-if="!$store.state.readonly" label="操作"> <template slot-scope="scope"> <el-button size="mini" plain type="warning" @click="edit(scope.row)"> 编辑 </el-button> <el-button size="mini" plain type="danger" @click="del(scope.row)"> 删除 </el-button> </template> </el-table-column> </el-table> <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/> </div> </template> <script> import dialogCom from './autoReplyDialog' import {getConfigListApi,deleteConfigApi,getConfigDetailApi} from "../../service/api"; export default { name: "autoReply", data() { return { dialogObj:{ value:'', desc:'', show:false, id:'' }, list: [] } }, components:{ dialogCom }, mounted(){ this.getList() }, methods: { changeShow(data){ this.dialogObj.show=data }, getList(){ getConfigListApi({key: 'keywords_reply'}).then(res => { this.list = res.list }) }, add(){ this.dialogObj.id = ''; this.dialogObj.value = ''; this.dialogObj.desc = ''; this.dialogObj.show = true }, edit(data){ getConfigDetailApi(data.id).then((res) => { this.dialogObj.id = res.id; this.dialogObj.value = res.value; this.dialogObj.desc = res.desc; this.dialogObj.show = true; }); }, del(data){ this.$confirm('此操作将删除该记录?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteConfigApi(data.id).then(res=>{ this.getList() this.$message({ type: 'success', message: '删除成功!' }); }); }); } } } </script> <style scoped lang="less"> @import "../../util/public"; .add-btn { margin: 10px 0; } </style>