|
|
@@ -1,26 +1,249 @@
|
|
|
<template>
|
|
|
- <div class="myMessage">
|
|
|
- 我的消息
|
|
|
- </div>
|
|
|
+ <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 {
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- }
|
|
|
- }
|
|
|
+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;
|
|
|
+}
|
|
|
|
|
|
-</style>
|
|
|
+.btns .el-button {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+</style>
|
