manHourHousekeeper/fhKeeper/formulahousekeeper/course-pc/src/views/userAndMessageManagement/myMessage.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model.trim="messageContent" placeholder="请输入消息内容" clearable size="small" style="width: 80vw"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sendMessage" size="small" :disabled="!messageContent.length">发送消息</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="content" label="历史消息" min-width="300" align="center"></el-table-column>
            <el-table-column prop="createTime" label="时间" width="180" align="center"></el-table-column>
            <el-table-column label="操作" width="240" class-name="btns" header-align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 1" size="small">已发送</el-button>
                    <el-button v-if="scope.row.status == 0" size="small" type="success" @click="resendMessage(scope.row)">发送</el-button>
                    <el-button v-if="scope.row.status == 0" size="small" type="primary" @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteMessage(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchDelete" :disabled="selectedIds.length===0" size="small">批量删除</el-button>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
        <!--编辑弹窗-->
        <el-dialog title="编辑消息" :visible.sync="editDialogVisible" width="50%">
            <el-form :model="editForm" label-width="80px">
                <el-form-item label="消息内容">
                    <el-input type="textarea" v-model="editForm.content" :rows="5"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
export default {
    data() {
        return {
            // 消息内容
            messageContent: '',

            // 表格相关
            tableHeight: 0,
            listLoading: false,
            total: 0,
            page: 1,
            size: 20,
            list: [],
            selectedIds: [],

            // 编辑相关
            editDialogVisible: false,
            editForm: {
                id: '',
                content: ''
            },
        }
    },
    methods: {
        // 显示编辑弹窗
        showEditDialog(row) {
            this.editForm = {
                id: row.id,
                content: row.content
            };
            this.editDialogVisible = true;
        },

        // 发送/更新消息
        sendMessage() {
            if (!this.messageContent) {
                this.$message.warning('请输入消息内容');
                return;
            }

            this.listLoading = true;
            this.http.post('/information-manage/saveOrUpdate', {
                content: this.messageContent
            }, res => {
                if (res.code === 'ok') {
                    this.$message.success('发送成功');
                    this.messageContent = '';
                    this.getList();
                } else {
                    this.$message.error(res.msg || '发送失败');
                }
                this.listLoading = false;
            }, () => {
                this.listLoading = false;
            })
        },

        // 保存编辑
        saveEdit() {
            this.listLoading = true;
            this.http.post('/information-manage/saveOrUpdate', this.editForm, res => {
                if (res.code === 'ok') {
                    this.$message.success('修改成功');
                    this.editDialogVisible = false;
                    this.getList();
                } else {
                    this.$message.error(res.msg || '修改失败');
                }
                this.listLoading = false;
            }, () => {
                this.listLoading = false;
            })
        },

        // 重新发送消息
        resendMessage(row) {
            this.$confirm('确认发送该消息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http.post('/information-manage/sendMsgByManager', { id: row.id }, res => {
                    if (res.code === 'ok') {
                        this.$message.success('发送成功');
                        this.getList()
                    } else {
                        this.$message.error(res.msg || '发送失败');
                    }
                })
            })
        },

        // 获取消息列表
        getList() {
            this.listLoading = true;
            this.http.post('/information-manage/pageList', {
                page: this.page,
                size: this.size
            }, res => {
                this.list = res.data.records;
                this.total = res.data.total;
                this.listLoading = false;
            }, () => {
                this.listLoading = false;
            })
        },

        // 分页相关
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.page = 1;
            this.size = val;
            this.getList();
        },

        // 选择变化
        handleSelectionChange(val) {
            this.selectedIds = val.map(item => item.id);
        },

        // 删除消息
        deleteMessage(row) {
            this.$confirm('确认删除该消息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http.post('/information-manage/delete', { ids: row.id }, res => {
                    if (res.code === 'ok') {
                        this.$message.success('删除成功');
                        this.getList();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                })
            })
        },

        // 批量删除
        batchDelete() {
            if (this.selectedIds.length === 0) {
                this.$message.warning('请选择要删除的消息');
                return;
            }

            this.$confirm(`确认删除选中的${this.selectedIds.length}条消息?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http.post('/information-manage/delete', { ids: this.selectedIds.join(',') }, res => {
                    if (res.code === 'ok') {
                        this.$message.success('批量删除成功');
                        this.getList();
                        this.selectedIds = [];
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                })
            })
        }
    },

    created() {
        let height = window.innerHeight;
        this.tableHeight = height - 195;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 195;
        };
    },

    mounted() {
        this.getList();
    }
}
</script>

<style lang="scss" scoped>
.toolbar {
    padding-bottom: 10px;
}

.btns .el-button {
    margin-left: 10px;
    margin-bottom: 5px;
}
</style>