TelpoUserManageAdmin/src/views/message-manage/main/mass-list/index.vue

<!--
 * @Date: 2022-08-08 10:09:50
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-09-09 15:03:34
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\mass-list\index.vue
 * @description: 群发列表
-->

<template>
    <div class="home-container">
        <!-- 顶部内容 -->
        <div class="top-container">
            <!-- 搜索 -->
            <el-input
                :placeholder="placeholder"
                v-model="searchParams.inputValue"
                class="search-input"
            />
            <el-button icon="el-icon-search" @click="onSearch" type="primary" class="search-btn">搜索</el-button>
        </div>
        <TTable :tableData="dataList" :columns="columns" @details="onDetails" @delete="onDelete" @update="onUpdate"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="total > 0"
            ref="pages"
            :total="total"
            :page.sync="searchParams.page"
            :limit.sync="searchParams.limit"
        />
        <el-dialog
          title="发送明细"
          :visible.sync="isDetailsShow"
          center
          top="5vh"
        >
        <TTable :tableData="detailsDataList" :columns="detailsColumns"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="detailsTotal > 0"
            ref="pages"
            :total="detailsTotal"
            :page.sync="detailsParams.page"
            :limit.sync="detailsParams.limit"
        />
        </el-dialog>
    </div>
</template>

<script>
import TTable from "@/components/TTable/TTable";
import Pagination from "@/components/Pagination";
export default {
    name: "mass-list",
    components: { TTable, Pagination },
    data() {
        return {
            buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
            searchParams: {
                inputValue: "",
                page: 1,
                limit: 10
            },
            placeholder: "可输入消息主题",
            dataList: [
              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
            ],
            detailsDataList: [
              { sendUser: '张三', sendStatus: '成功', sendTime: '2022.09.09 17:35' },
              { sendUser: '李四', sendStatus: '成功', sendTime: '2022.09.09 17:35' },
              { sendUser: '王五', sendStatus: '失败', sendTime: '2022.09.09 17:35' },
            ],
            detailsColumns: [
                { prop: "sendUser", title: "发送对象", fixed: "left" },
                { prop: "sendStatus", title: "发送状态" },
                { prop: "sendTime", title: "发送时间" },
            ],
            columns: [
                { prop: "messageThem", title: "消息主题", fixed: "left" },
                { prop: "messageContent", title: "内容摘要(链接详情)" },
                { prop: "massGroup", title: "发送分组" },
                { prop: "createTime", title: "创建时间" },
                {
                    action: true,
                    title: "操作",
                    fixed: "right",
                    actions: [
                        {
                            fnName: "update",
                            title: "修改",
                            type: "primary",
                            icon: "el-icon-edit",
                            size: "small"
                        },
                        {
                            fnName: "delete",
                            title: "删除",
                            type: "danger",
                            icon: "el-icon-delete",
                            size: "small"
                        },
                        {
                            fnName: "details",
                            title: "发送明细",
                            type: "success",
                            icon: "el-icon-tickets",
                            size: "small"
                        }
                        /* { fnName: "delete", title: "删除", type: "danger" , icon: 'el-icon-delete', size: 'small'}, */
                    ]
                }
            ],
            total: 1,
            isDetailsShow: false,
            detailsTotal: 1,
            detailsParams: {
              page: 1,
              limit: 10
            }

        };
    },
    mounted() {},
    created() {},
    methods: {
        onSearch() {},
        onUpdate() {

        },
        onDelete() {
          this.$confirm("是否删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          }).then(() => {
              // todo 删除
          }).catch(() => {})
        },
        onDetails() {
          //this.$router.push({name: 'send-details'});
          this.isDetailsShow = true;
        }
    }
};
</script>

<style scoped lang="scss">
.search-input {
    width: 350px;
    margin-left: 20px;
}
.search-btn {
    margin-left: 20px;
    width: 100px;
}
</style>