ylrz_his_scrm_adminUI/src/views/app/userChatLogs/index.vue

<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="120px"
        >
            <el-form-item label="会员ID" prop="userId">
                <el-input
                    v-model="queryParams.userId"
                    placeholder="请输入会员ID"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    @input="queryParams.userId = queryParams.userId.replace(/[^0-9]/g, '')"
                />
            </el-form-item>
            <el-form-item label="发送日期" prop="userAskDate">
                <el-date-picker
                    clearable
                    size="small"
                    v-model="queryParams.userAskDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择发送日期"
                    @change="handleQuery"
                />
            </el-form-item>
            <el-form-item label="客服ID" prop="appCustomerId">
                <el-input
                    v-model="queryParams.appCustomerId"
                    placeholder="请输入客服ID"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    @input="queryParams.appCustomerId = queryParams.appCustomerId.replace(/[^0-9]/g, '')"
                />
            </el-form-item>
            <el-form-item label="回复日期" prop="customerReplyDate">
                <el-date-picker
                    clearable
                    size="small"
                    v-model="queryParams.customerReplyDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择回复日期"
                    @change="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getFindList"/>
        </el-row>

        <el-table v-loading="loading" :data="userChatLogs" border>
            <el-table-column type="index" label="序号" align="center" width="80"/>
            <el-table-column label="会员ID" align="center" prop="userId" min-width="130"/>
            <el-table-column label="会员名称" align="left" prop="userName" min-width="100"/>
            <el-table-column label="客服ID" align="left" prop="appCustomerId" min-width="100"/>
            <el-table-column label="客服名称" align="center" prop="appCustomerName" min-width="150">
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.appCustomerName"
                        v-text="scope.row.appCustomerName"
                    />
                </template>
            </el-table-column>
            <el-table-column label="会员对话" align="left" prop="userAskShortContent" min-width="250"/>
            <el-table-column label="对话时间" align="center" prop="userAskTime" min-width="120"/>
            <el-table-column label="客服回复" align="left" prop="customerReplyShortContent" min-width="250">
                <template slot-scope="scope">
                    {{ scope.row.customerReplyShortContent || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="回复时间" align="center" prop="customerReplyTime" min-width="120"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="180"
                fixed="right">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="openChatPage(scope.row)"
                    >
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getFindList" />

        <!-- 查看详情 -->
        <el-dialog 
            title="对话详情"
            :visible.sync="dialog.visible"
            v-loading="dialog.loading"
            width="1000px"
            append-to-body
            :close-on-click-modal="false"
        >
            <div style="height: 600px; overflow: auto;">
                <el-timeline>
                    <el-timeline-item 
                        :timestamp="dialog.chatInfo.userAskTime"
                        placement="top"
                        type="success"
                    >
                        <el-card shadow="hover" :body-style="{'padding': '8px', 'background': '#9df29f', 'color': '#161616'}">
                            <div
                                class="no-copy1"
                                v-html="dialog.chatInfo.userAskFullContentFmt || '--'"
                            >
                            </div>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item
                        :timestamp="dialog.chatInfo.customerReplyTime"
                        placement="top"
                        type="primary"
                    >
                        <el-card shadow="hover" :body-style="{'padding': '8px', 'background': '#eeeef0', 'color': '#161616'}">
                            <div
                                class="no-copy1"
                                v-html="dialog.chatInfo.customerReplyFullContentFmt || '--'"
                                oncontextmenu="return false"
                                @selectstart.prevent
                                @contextmenu.prevent
                            >
                            </div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>

            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>

<script>
import { findList, } from "@/api/app/userChatLogs";

export default {
    name: "UserChatLogs",
    data() {
        return {
            loading: true,
            showSearch: true,
            userChatLogs: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userId: null,
                userAskDate: null,
                appCustomerId: null,
                customerReplyDate: null,
            },
            dialog: {
                visible: false,
                loading: false,
                chatInfo: {},
            },
        };
    },
    created() {
        this.getFindList();
    },
    methods: {
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getFindList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.getFindList();
        },
        async getFindList() {
            this.loading = true;
            let tableInfo = await findList(this.queryParams);
            this.userChatLogs = tableInfo.rows;
            this.total = tableInfo.total;
            this.loading = false;
        },
        /**
         * 打开详情页面
         */
        openChatPage(row) {
            this.dialog.visible = true;
            this.dialog.loading = true;
            this.dialog.chatInfo = row;
            let userAskFullContentFmt = !this.isEmpty(this.dialog.chatInfo.userAskFullContent) ? this.dialog.chatInfo.userAskFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--';
            this.dialog.chatInfo['userAskFullContentFmt'] = userAskFullContentFmt;
            let customerReplyFullContentFmt = !this.isEmpty(this.dialog.chatInfo.customerReplyFullContent) ? this.dialog.chatInfo.customerReplyFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--';
            this.dialog.chatInfo['customerReplyFullContentFmt'] = customerReplyFullContentFmt;
            this.dialog.loading = false;
        },
        cancel() {
            this.dialog.visible = false;
        },
        isEmpty(value) {
            return value === null || value === undefined || value.length === 0;
        },
        /**
         * 删除
         * @param row 
         */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除欢迎语：编号为"' + ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return deleteByIds(ids);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch(() => { });
        },
    }
};
</script>

<style scoped>
::v-deep .el-card .is-always-shadow {
    padding: 8px;
}

.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>