eduerpos_ui_manage/src/components/page/admin/feedback/RiderFeedback.vue

<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                ><i class="el-icon-lx-cascades"></i>骑手意见反馈</el-breadcrumb-item
                >
            </el-breadcrumb>
        </div>
        
        <div class="container" style="margin-top:10px; line-height: 24px;">
            <div class="media-body" v-for="(item, index) in tableData" :key="index">
                <a href="javascript:0;" class="media-left" style="float: left; margin-right: 10px;">
                    <img src="http://img.weizhi.so/head2.jpg" height="46px" width="46px">
                </a>
                <div class="pad-btm">
                    <p class="fontColor">
                        <a href="javascript:0;">{{item.userName}}</a>
                    </p>
                    <p class="min-font">
                        <span style="visibility: visible;">
                            <a href="javascript:0;">{{item.createDate}}</a>
                        </span>
                    </p>
                </div>
                <p class="message-text">{{item.rmk}}</p>
                <hr>
                <el-button type="primary" round @click="handleClick">回复</el-button>
            </div>
            <div>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>

            <el-dialog title="请输入回复内容" :visible.sync="dialogVisible" :before-close="closeDialog" width="300px">
                <el-input type="textarea" :rows="4" v-model="text"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="closeDialog">保存</el-button>
                    <el-button @click="closeDialog">关闭</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import dptable from "../../../common/Dptable";

export default {
    components: {
        dptable,
    },
    data() {
        return {
            text: '',
            dialogVisible: false,
            currentPage: 4,
            storeList: [
                {
                    storeId: 1,
                    storeName: '门店一'
                },
                {
                    storeId: 2,
                    storeName: '门店二'
                }
            ], // 门店下拉列表
            // 检索条件
            form: {
                userCode: "",
                userName: "",
                charactorId: "",
                dptId: ""
            },

            tableData: [
                {
                    evaluateId: '1',
                    headUrl: '',
                    userName: '孙娜',
                    storeName: '大叔麻辣拌',
                    createDate: '2023-04-23 11:23:54',
                    rate: 3,
                    taste: 1,
                    package: 3,
                    rateUrl: [
                        {
                            rateId: '1',
                            rateUrl: ''
                        },
                        {
                            rateId: '2',
                            rateUrl: ''
                        }
                    ],
                    rmk: '太少了，我寻思点了哥汤底呢，东西都是一个吗，面就几根，有这样做生意的？',
                    peiSong: '超赞'
                },
                {
                    evaluateId: '2',
                    headUrl: '',
                    userName: '刘长林',
                    createDate: '2023-04-21 10:56:37',
                    rate: 5,
                    taste: 5,
                    storeName: '金柱鸡架',
                    package: 5,
                    rateUrl: [
                        {
                            rateId: '1',
                            rateUrl: ''
                        },
                        {
                            rateId: '2',
                            rateUrl: ''
                        }
                    ],
                    rmk: '阔以阔以',
                    peiSong: '超赞'
                }
            ],
            pagination: {
                resultCount: 0,
                currentPage: 1,
                pageSize: 20
            },
            options: {
                singleSelect: false, // 是否有前部的单选框
                mutiSelect: false, // 是否有前部的多选框
                index: false, // 显示序号， 多选则 mutiSelect
                initTable: true, // 是否一挂载就加载数据
                height: "550"
            },
            charList: [], // 角色下拉框
            dptList: [], // 部门下拉框
            isShow: false,
            currentView: "",
            dialogOptions: {}
        };
    },
    methods: {
        handleClick(){
            this.dialogVisible = true;
        },
        closeDialog(){
            this.dialogVisible = false;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        changeStatus(e, row) {
            //transform-vue-jsx 的nativeOnClick 失效 , 所以采用 event.cancelBubble 控制点击事件的冒泡... 如果点击事件不影响你的点击行事件，可以不传
            e.cancelBubble = true; // 停止冒泡，否则会触发 row-click
            this.options.loading = true;
            let status = row.status == "1" ? "0" : "1";
            const querystring = require("querystring");
            this.$axios
                .post(
                    this.changeStatusUrl,
                    querystring.stringify({
                        id: row.userId,
                        status: status
                    })
                )
                .then(res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.$message.success(res.data.rtnBean.rtnMsg);
                    } else {
                        this.$message.error(res.data.rtnBean.rtnMsg);
                    }
                    this.options.loading = false;
                    this.getDataList();
                })
                .catch(error => {
                    console.log(error);
                    this.options.loading = false;
                });
        },

        dialogCallback() {
            console.log(111);
            this.$refs.updateUser.clearForm();
            this.isShow = false;
            this.getDataList();
        },
        dialogClose() {
            this.$refs.updateUser.clearForm();
            this.dialogOptions = {}
            this.isShow = false;
        },
        getDataList() {
            this.options.loading = true;
            const querystring = require("querystring");
            this.$axios
                .post(
                    this.getUserVListUrl,
                    querystring.stringify({
                        userCode: this.form.userCode,
                        userName: this.form.userName,
                        charactorId: this.form.charactorId,
                        pageSize: this.pagination.pageSize,
                        currentPage: this.pagination.currentPage,
                        dptId: this.form.dptId
                    })
                )
                .then(res => {
                    if (res.data.list.length == 0) {
                        this.$message("数据不存在，请更换查询条件重新再试");
                    }
                    this.tableData = res.data.list;
                    this.pagination.resultCount = res.data.page.resultCount;
                    this.pagination.currentPage = res.data.page.currentPage;
                })
                .catch(error => {
                    console.log(error);
                });
            this.options.loading = false;
        },
        addRow() {
            this.currentView = "update-user";
            this.isShow = true;
            // this.$nextTick(() => {
            //   this.$refs.updateUser.getData();
            // });
            setTimeout(() => {
                this.$refs.updateUser.getData();
            }, 250);
            // this.$router.push({
            //     path: '/admin/updateuser'
            // })
        },
        // 编辑行
        enditRow(key) {
            this.currentView = "update-user";
            this.isShow = true;
            this.dialogOptions = {
                rowId: key
            };
            // this.$nextTick(() => {
            setTimeout(() => {
                this.$refs.updateUser.getData();
            }, 250);

            // });
        },
        // 重置密码
        resetPwd(key) {
            const querystring = require("querystring");
            this.$axios
                .post(
                    this.resetPwdUrl,
                    querystring.stringify({
                        id: key
                    })
                )
                .then(res => {
                    console.log(res);
                    if (res.data.rtnBean.rtnCode == 0) {
                        this.$message.success("重置密码成功！");
                    } else {
                        this.$message.error(res.data.rtnBean.rtnMsg);
                    }
                    this.getDataList();
                })
                .catch(error => {
                    console.log(error);
                    this.$message.error("数据处理异常，请与管理员联系！");
                });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}

.media-body {
    margin-bottom: 60px;
    width: auto;
    display: block;
    overflow: hidden;
}
.pad-btm {
    padding-bottom: 0;
}
.pad-btm p:first-child {
    padding-bottom: 5px;
}
.layadmin-homepage-list-imgtxt .media-body .min-font {
    margin-bottom: 10px;
}
.message-text {
    padding-top: 10px;
}
a {
    color: #333;
    text-decoration: none;
}
.media-body .pad-btm .fontColor a {
    font-weight: 600;
    color: #337ab7;
}
hr{
    height: 1px;
    margin: 10px 0;
    border: 0;
    clear: both;
    background-color: #e6e6e6;
}
</style>