FengqiOfficialAll/FengqiAdminVue/src/views/feedbackList/feedbackList.vue

<template>
    <div class="feedbackList flex-display">
        <div class="head">
            <div class="text">

                <div class="head-item">
                    <el-select v-model="params.gameId" placeholder="请选择游戏" filterable clearable>
                        <el-option
                                v-for="item in feedGameList"
                                :key="item.gameId"
                                :label="item.gameId + '_' +item.gameAlias"
                                :value="item.gameId"
                        ></el-option>
                    </el-select>
                </div>

                <div class="head-item" placeholder="请选择创建时间">
                    <el-date-picker
                            v-model="createTime"
                            @change="handelCreateTimeChange"
                            type="datetimerange"
                            :value-format="'yyyy-MM-dd HH:mm:ss'"
                            start-placeholder="反馈日期"
                            end-placeholder="反馈日期"
                            :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </div>

                <div class="head-item">
                    <el-select v-model="params.state" placeholder="请选择完成状态">
                        <el-option
                                v-for="item in stateList"
                                :key="item.text"
                                :label="item.text"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>

            <div class="action">
                <el-button plain type="primary" icon="el-icon-search" @click="getFeedbackList">搜索</el-button>
            </div>
        </div>
        <div class="list">
            <el-table :data="feedbackList" border stripe :fit="false" height="100%" @sort-change="handelSortChange">
                <el-table-column label="反馈编号" prop="id" width="150" show-overflow-tooltip/>
                <el-table-column label="游戏名称" prop="gameAlias" width="150" show-overflow-tooltip/>
                <el-table-column label="联系类型" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag>{{contactType(scope.row.userContactType)}}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="联系方式" prop="userContact" width="150" show-overflow-tooltip/>

                <el-table-column label="问题描述" prop="content" width="150" show-overflow-tooltip/>

                <el-table-column label="反馈时间" prop="createTime" width="150" show-overflow-tooltip sortable="custom"/>

                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button size="mini" @click="handelSelectFeedback(scope.row.id)">查看</el-button>
                            <!--<el-button size="mini" type="success">完成</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="page.size"
                    :pager-count="11"
                    :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" center>
            <div class="content">


            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">关闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

    import feedbackApi from '@/api/feedback'
    import {getLastDay, formatTime} from '@/utils/util'

    export default {
        name: "feedbackList",
        data() {
            return {
                createTime: '',
                params: {
                    state: 0
                },
                feedbackList: [],
                gameList: [],
                state: 0,
                feedGameList: [],
                contactOption: [
                    {text: '微信', value: 0, inputType: 'text'},
                    {text: 'QQ', value: 1, inputType: 'number'},
                    {text: '手机号', value: 2, inputType: 'tel'},
                    {text: '邮箱', value: 3, inputType: 'email'}
                ],
                stateList: [
                    {value: 0, text: '未完成'},
                    {value: 1, text: '已完成'},
                    {value: null, text: '全部'}
                ],
                dialog: {
                    title: '反馈详情',
                    visible: false
                },
                feedbackInfo: {},
                page: {},

            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                if (this.$route.params.params) {
                    this.params = this.$route.params.params;
                }

                if (this.$route.params.page) {
                    this.page = this.$route.params.page;
                }

                let lastDay = getLastDay(3);
                this.createTime = lastDay;
                this.params.createStartTime = lastDay ? formatTime(lastDay[0]) : null;
                this.params.createEndTime = lastDay ? formatTime(lastDay[1]) : null;
                feedbackApi.getFeedbackGameList().then(res => {
                    this.feedGameList = res;
                    this.getFeedbackList()
                })
            },

            getFeedbackList() {
                feedbackApi.getFeedbackList(this.params).then(res => {
                    this.feedbackList = res.rows;
                    this.page = res.page
                })
            },
            /**
             * 获取反馈游戏列表
             */
            getFeedbackGameList() {
                feedbackApi.getFeedbackGameList().then(res => {
                    this.feedGameList = res;
                })
            },
            contactType(type) {
                return this.contactOption.find(f => f.value == type).text
            },
            handelSelectFeedback(id) {
                this.$router.push({
                    name: 'feedbackDetail',
                    params: {
                        id: id,
                        params: this.params,
                        page:this.page
                    }
                })
            },
            handelCreateTimeChange(val) {
                this.params.createStartTime = val ? val[0] : null;
                this.params.createEndTime = val ? val[1] : null;
                this.$log.debug(this.params)
            },
            handelSortChange({order}) {
                console.log(order)
                if (order == 'descending') {
                    this.params.orderBy = 1
                } else if (order == 'ascending') {
                    this.params.orderBy = 0
                } else {
                    this.params.orderBy = null
                }
                this.getFeedbackList()
            },
            handleSizeChange(val) {
                this.$log.debug(val);
                this.params.size = val;
                this.getFeedbackList()
            },
            handleCurrentChange(val) {
                this.params.cur = val;
                this.getFeedbackList()
            },
        }
    }
</script>

<style lang="less" scoped>
    .feedbackList {
        .head {
            .el-input {
                width: 300px;
            }
        }
    }
</style>