|
|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <div class="tab7">
|
|
|
+ <div class="insideTop">留言管理</div>
|
|
|
+ <div class="obstruct"></div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="search">
|
|
|
+ <div class="action-group">
|
|
|
+ <!-- <el-button @click="keywordListModalVisible=true">关键词设置</el-button>-->
|
|
|
+ <el-button type="primary" @click="handleModelOpen">自动回复设置</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column label="编号" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="question" label="问题"></el-table-column>
|
|
|
+ <el-table-column prop="contactWay" label="联系方式"></el-table-column>
|
|
|
+ <el-table-column prop="updateTime" label="留言时间"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作">
|
|
|
+
|
|
|
+ <template #default="{ row }">
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="text"-->
|
|
|
+<!-- @click="handleEdit(row)"-->
|
|
|
+<!-- >编辑-->
|
|
|
+<!-- </el-button>-->
|
|
|
+ <el-popconfirm
|
|
|
+ title="确定删除吗？"
|
|
|
+ @confirm="handleDelete(row.id)"
|
|
|
+ >
|
|
|
+ <el-button slot="reference" type="text" style="padding: 0 5px">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div style="text-align:center;margin-top: 30px">
|
|
|
+ <el-pagination background layout="prev, pager, next,total" :total="total"
|
|
|
+ :page-size="pagesize" @current-change="currentChange"></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 自动回复设置 -->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="autoReplyModalVisible"
|
|
|
+ destroy-on-close
|
|
|
+ width="30%"
|
|
|
+ @close="handleAutoReplyReset"
|
|
|
+ center>
|
|
|
+ <div slot="title" class="lv1-modal-header">
|
|
|
+ <span>自动回复</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="replyModalForm" label-position="right" label-width="0px" :model="replyModalForm"
|
|
|
+ :rules="rules">
|
|
|
+ <el-form-item label="" prop="msg">
|
|
|
+ <el-input type="textarea" controls-position="right" placeholder="请输入"
|
|
|
+ v-model="replyModalForm.msg">
|
|
|
+
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="autoReplyModalVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">提 交</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+<!-- -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { getMessageList, deleteMessage, editReplyMessage, getReplyMessage } from '@/apis/tab7'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'tab7',
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ name: '',
|
|
|
+ tableData: [],
|
|
|
+ total: 0, // 总条数
|
|
|
+ pagesize: 10, // 指定展示多少条
|
|
|
+ currentPage: 1, // 当前页码,
|
|
|
+ autoReplyModalVisible: false,
|
|
|
+ autoReplyModal: {},
|
|
|
+ rules:
|
|
|
+ {
|
|
|
+ msg: [
|
|
|
+ { required: true, message: '请输入内容', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ replyModalForm: {}
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ async currentChange (currentPage) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ },
|
|
|
+ async handleRefreshList () {
|
|
|
+ const res = await getMessageList({
|
|
|
+ pageSize: this.pagesize,
|
|
|
+ pageNum: this.currentPage
|
|
|
+ })
|
|
|
+ // debugger
|
|
|
+ this.tableData = res.data.records
|
|
|
+ this.total = res.data.pages
|
|
|
+ this.currentPage = res.data.current
|
|
|
+ this.pagesize = res.data.size
|
|
|
+ },
|
|
|
+ async handleDelete (id) {
|
|
|
+ const res = await deleteMessage(id)
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ await this.handleRefreshList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleAutoReplyReset () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ async getAutoReplyContent () {
|
|
|
+ const res = await getReplyMessage()
|
|
|
+ this.replyModalForm = {
|
|
|
+ msg: res.data || ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleModelOpen () {
|
|
|
+ this.autoReplyModalVisible = true
|
|
|
+ await this.getAutoReplyContent()
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleSubmit () {
|
|
|
+ this.$refs.replyModalForm.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.replyModalForm.msg.length > 0
|
|
|
+ ) {
|
|
|
+ editReplyMessage({
|
|
|
+ msg: this.replyModalForm.msg
|
|
|
+ })
|
|
|
+ this.autoReplyModalVisible = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // async handle
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ async created () {
|
|
|
+ await this.handleRefreshList()
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.tab7 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ /deep/ .el-input-number {
|
|
|
+ width: 400px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ height: 70px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+
|
|
|
+ /deep/ .el-input {
|
|
|
+ width: 300px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ padding-right: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ /deep/ .el-table__row .el-table__cell {
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+ /deep/ .el-table .cell {
|
|
|
+ padding: 6px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-pager li.active {
|
|
|
+ background-color: #b9412e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .lv1-modal-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0 30px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung