qimall/backend/modules/mall/views/optimize/list.php

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api="'mall/optimize/list'"
        @selection-change="handleSelectionChange"
        :search-list="searchList"
        @search="handleSearch"
    >
        <el-table-column
            type="selection"
        >
        </el-table-column>
        <el-table-column prop="id" min-width="30" label="序号" align="center"></el-table-column>
        <el-table-column prop="member_name" min-width="80" label="类型" align="center">
            <template slot-scope="scope">
                <el-tag effect="dark">{{ categorys[scope.row.category] }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column min-width="80" label="操作人" align="center">
            <template slot-scope="scope">
                {{ scope.row.detail.member_name }}
            </template>
        </el-table-column>
        <el-table-column prop="title" min-width="200" label="优化建议描述"></el-table-column>
        <el-table-column label="时间" align="center">
            <template slot-scope="scope">
                <div>{{ scope.row.created_at | dateTimeFormat('Y-m-d H:i:s') }}</div>
            </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.send_status == 0" type="danger">待回复</el-tag>
                <el-tag v-if="scope.row.send_status == 1 && scope.row.examine_status == 1">待回复</el-tag>
                <el-tag v-if="scope.row.send_status == 1 && scope.row.examine_status == 2" type="success">已回复</el-tag>
                <el-tag v-if="scope.row.send_status == 1 && scope.row.examine_status == 3" type="success">工单结束</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作" min-width="50" align="center">
            <template slot-scope="scope">
                <el-button type="text" @click="handle('detail', scope.row)">查看</el-button>
                <el-button 
                    v-if="scope.row.send_status == 0" 
                    type="text" 
                    @click="send(scope.row.id)"
                    :loading="btnLoad"
                >推送</el-button>
            </template>
        </el-table-column>

        <template slot="header-left">
            <el-button 
                type="primary"
                size="mini"
                @click="$navigate({r: 'mall/optimize/edit'})"
                icon="el-icon-plus"
            >添加建议</el-button>
        </template>
        <template slot="footer-button">
            <el-button @click="$navigate({r: 'mall/optimize/edit'})">批量删除</el-button>
            <el-button @click="$navigate({r: 'mall/optimize/edit'})">批量禁用</el-button>
        </template>
    </com-list-table>
</com-list-page>

<script>
    let id = 0;
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '首页',
                    router: 'mall/overview/index',
                },
                {
                    title: '优化建议',
                }
            ],
            categorys: {
                'optimize': '功能优化',
                'bug': 'BUG修复',
                'others': '其他建议',
            },
            // searchList: [
            //     {
            //         key: 'nickname',
            //         title: '昵称',
            //         type: 'text',
            //     },
            //     {
            //         key: 'time',
            //         title: '手机',
            //         type: 'select',
            //         options: [
            //             {
            //                 label: '开启',
            //                 value: 1
            //             },
            //             {
            //                 label: '关闭',
            //                 value: 0
            //             }
            //         ],
            //         valueKey: {
            //             label: 'label',
            //             value: 'value',
            //         },
            //     },
            //     {
            //         key: 'realname',
            //         title: '时间',
            //         type: 'time-picker',
            //     },
            //     {
            //         key: 'order_no',
            //         title: '订单号',
            //     },
            //     {
            //         key: 'date',
            //         title: '日期',
            //         type: 'date-picker',
            //         valueFormat: 'yyyy-MM-dd',
            //     },
            //     {
            //         key: 'date_time',
            //         title: '日期',
            //         type: 'date-time-range',
            //     },
            //     {
            //         /**
            //          * @see https://element.eleme.io/#/zh-CN/component/cascader
            //          */
            //         key: 'type',
            //         title: '类型',
            //         type: 'cascader',
            //         // options: [],
            //         props: {
            //             multiple: true,
            //             checkStrictly: true,
            //             lazy: true,
            //             lazyLoad (node, resolve) {
            //                 const { level } = node;
            //                 setTimeout(() => {
            //                 const nodes = Array.from({ length: level + 1 })
            //                     .map(item => ({
            //                         value: ++id,
            //                         label: `选项${id}`,
            //                         leaf: level >= 2
            //                     }));
            //                     // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            //                     resolve(nodes);
            //                 }, 50);
            //             }
            //         }
            //     }
            // ],
            btnLoad: false,
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSearch(keyword) {
                /* this.$refs.table.getList({
                    'examine_status': keyword
                }, 1) */
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'detail':
                        params = {
                            r: 'mall/optimize/reply'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                }
            },
            send(id) {
                if (this.btnLoad) return 
                this.btnLoad = true
                request({
                    params: {
                        r: 'mall/optimize/send',
                        id: id
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg);
                        setTimeout(() => {
                            this.getList()
                            this.btnLoad = false
                        }, 1500)
                    } else {
                        this.$message.error(e.data.msg);
                        this.btnLoad = false
                    }
                })
            },
        }
    })
</script>