lift-web/src/apps/mobile/views/monitoring-center-bank/index.vue

<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <!-- 搜索栏与表格区域 -->
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入发起人" v-model="searchForm.originator"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入品牌" v-model="searchForm.brandName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入专家" v-model="searchForm.chargeName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-cascader placeholder="请选择诊单状态" :options="statuzData" v-model="statuz"></el-cascader>                         
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" round @click="querySearch">查询</el-button>
                                <el-button type="info" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{tableSelection.length}}</span> 项
            </div>

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectColumn"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="name" label="发起人"></el-table-column>
                    <el-table-column prop="dataTable" label="诊单类型">
                        <template slot-scope="scope">
                            <span>{{scope.row.dataTable | diagnosisPipe}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="statuz" label="诊单状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.colorGrade == 1 && scope.row.acceptStatus == 0" style="color:#ff9999">{{scope.row.statuz | caseStatusPipe(scope.row.dataTable)}}</span>
                            <span v-else-if="scope.row.colorGrade == 2 && scope.row.acceptStatus == 0" style="color:#ff6666">{{scope.row.statuz | caseStatusPipe(scope.row.dataTable)}}</span>
                            <span v-else-if="scope.row.colorGrade == 3 && scope.row.acceptStatus == 0" style="color:#ff1a1a">{{scope.row.statuz | caseStatusPipe(scope.row.dataTable)}}</span>
                            <span v-else-if="scope.row.colorGrade >= 4 && scope.row.acceptStatus == 0" style="color:#e60000">{{scope.row.statuz | caseStatusPipe(scope.row.dataTable)}}</span>
                            <span v-else >{{scope.row.statuz | caseStatusPipe(scope.row.dataTable)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="customerName" label="接单客服"></el-table-column>
                    <el-table-column prop="totalCost" label="总金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.totalCost | pricePipe(2, '￥', true)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="payCost" label="实付金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.payCost | pricePipe(2, '￥', true)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="chargeName" label="专家" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="brandName" label="品牌" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="expression" label="问题描述" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="updateTime" label="发起时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.updateTime | formatTimePipe}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="140px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="enterChatRoom(scope.row)"
                            >聊天室</el-button>
                            <el-button
                                size="mini"
                                type="success"
                                plain
                                round
                                @click="showDetailDialog(scope.row)"
                            >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 详情弹层 -->
        <DetailsDialog ref="detailsDialog"></DetailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import DetailsDialog from './components/detailsDialog';
import { queryLiftCasesList, updateCustomerServiceId } from '@/apps/mobile/api/monitoring-center/index';
export default {
    components: {
        TitleBar,
        DetailsDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 10,
            listLoading: false,
            tableSelection: [],
            detailsDialogVisible: false,
            detailsDialogForm: {},
            userId: null,
            statuz: null,
            statuzData: [{
                value: '1',
                label: '问诊',
                children: [{
                    value: '0',
                    label: '待付款'
                },{
                    value: '1',
                    label: '已付款'
                },{
                    value: '2',
                    label: '已接单'
                },{
                    value: '3',
                    label: '专家确认完成'
                },{
                    value: '4',
                    label: '用户确认完成'
                },{
                    value: '5',
                    label: '待归档'
                },{
                    value: '6',
                    label: '已完成'
                },{
                    value: '7',
                    label: '申诉中'
                },{
                    value: '8',
                    label: '拒绝接单'
                }]
                }, {
                value: '2',
                label: '出诊',
                children: [{
                    value: '0',
                    label: '待接单'
                },{
                    value: '1',
                    label: '已接单'
                },{
                    value: '2',
                    label: '待付款'
                },{
                    value: '3',
                    label: '已付款'
                },{
                    value: '4',
                    label: '专家确认完成'
                },{
                    value: '5',
                    label: '用户确认完成'
                },{
                    value: '6',
                    label: '已完成'
                },{
                    value: '7',
                    label: '申诉中'
                },{
                    value: '8',
                    label: '拒绝接单'
                }]
            }],
            timer: ''
        };
    },
    created() {
        this.queryListData();
        this.userId = this.$userId();
    },
    mounted() {
      this.timer = setInterval(this.queryListData, 60000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                type: 'BACKQUERY',
                sort: {
                    order: 'desc',
                    // orderBy: 'create_time',
                    orderBy: 'update_time',
                },
                userType: 2
            };
            if(this.statuz){
                if(this.statuz[0] == "1"){
                    obj.statuz1 = this.statuz[1];
                }
                else{
                    obj.statuz2 = this.statuz[1];
                }
            }
            queryLiftCasesList(obj)
                .then(res => {
                    console.log(res);
                    this.tableData = res.data.records || [];
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        querySearch() {
            this.queryListData();
        },
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.statuz = null;
            this.queryListData();
        },
        selectColumn(selection) {
            this.tableSelection = selection;
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        showDetailDialog(data) {
            let _data = Object.assign({}, data);
            this.$refs.detailsDialog.open(_data);
        },
        enterChatRoom(data) {
            if (data.customerServiceId) {
                if (data.customerServiceId === this.userId) {
                    this.chatRoomRouter(data);
                } else {
                    this.$message.warning('非专属客服无法进入！');
                    return false;
                }
            } else {
                let obj = {
                    id: data.id,
                    chargerId: data.chargerId ? data.chargerId : null,
                    customerServiceId: this.userId,
                };
                updateCustomerServiceId(obj)
                    .then(res => {
                        console.log(res);
                        this.chatRoomRouter(data);
                    })
                    .catch();
            }
        },
        chatRoomRouter(data) {
            this.$router.push({
                path: '/chat-room',
                query: {
                    id: data.id,
                    customerServiceId: this.userId,
                    sessionId: data.sessionId,
                    name: data.name,
                    dataTable: data.dataTable
                },
            });
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>