kd-aiot-frontend-eom/src/views/salesServiceManagement/workOrder/index.vue

<template>
    <div class="ele-body">
        <el-card shadow="never" v-loading="loading">
            <work-search @search="reload"> </work-search>
            <!-- 数据表格 -->
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" cache-key="systemRoleTable"
                :pageSize="20">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                </template>
                <template v-slot:code="{ row }">
                    <el-link type="primary" :underline="false" @click="goDetail(row)">
                        {{ row.code }}
                    </el-link>
                </template>
                <!-- 操作列 -->
                <template v-slot:action="{ row }">
                    <el-link type="primary" :underline="false" @click="declarationForm(row)">
                        报工
                    </el-link>
                    <el-popconfirm class="ele-action" title="确认删除这条记录吗？" @confirm="cancel(row)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false" icon="el-icon-delete">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                    <el-dropdown @command="(command) => handleCommand(command, row)">
                        <span class="el-dropdown-link">
                            操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleReceive">接收
                            </el-dropdown-item>
                            <el-dropdown-item command="toRedeploy">转派
                            </el-dropdown-item>
                            <el-dropdown-item command="addSpareItems">申请备品备件
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </ele-pro-table>
        </el-card>
        <!-- 详情 -->
        <detailDialog ref="detailDialogRef"></detailDialog>
        <!-- 备品备件 -->
        <applyForSpare @reload="reload" ref="edit" />
        <!-- 报工 -->
        <declarationDialog ref="declarationDialogRef" @reload="reload"></declarationDialog>
        <!-- 转派 -->
        <redeployOther ref="redeployOtherRef" @reload="reload" />
    </div>
</template>

<script>
import workSearch from './components/work-search.vue';

import detailDialog from './components/detailDialog.vue'
import applyForSpare from '../components/applyForSpare.vue';
import declarationDialog from './components/declarationDialog.vue';
import redeployOther from './components/redeployOther2.vue';


import { getSalesWorkOrder, deleteSalesWorkOrder, receiveSalesWorkOrder } from '@/api/salesServiceManagement/index';

import dictMixins from '@/mixins/dictMixins';
export default {
    mixins: [dictMixins],
    components: {
        workSearch,
        detailDialog,
        applyForSpare,
        declarationDialog,
        redeployOther
    },
    data() {
        return {
            workOrderStatus: [
                { code: 0, label: '待接收' },
                { code: 1, label: '执行中' },
                { code: 2, label: '已完成' },
                { code: 3, label: '已验收' },
            ],
            resultStatus: [
                { code: 5, label: '未修复' },
                { code: 4, label: '已修复' }
            ],
            // 表格列配置
            columns: [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    slot: 'code',
                    label: '工单编号',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 150
                },
                {
                    prop: 'planCode',
                    label: '计划单号',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'planName',
                    label: '计划名称',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'executeUserName',
                    label: '执行人',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                // {
                //     prop: 'assistsName',
                //     label: '辅助人',
                //     align: 'center',
                //     showOverflowTooltip: true,
                //     minWidth: 110
                // },

                {
                    prop: 'acceptTime',
                    label: '开始时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'finishTime',
                    label: '结束时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'planFinishTime',
                    label: '计划完成时间',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    columnKey: 'inFactDuration',
                    label: '实际售后时长(分钟)',
                    align: 'center',
                    resizable: false,
                    showOverflowTooltip: true,
                    minWidth: 120,
                    formatter: (row) => {
                        if (row.finishTime && row.acceptTime) {
                            return parseInt(
                                (new Date(row.finishTime).getTime() -
                                    new Date(row.acceptTime).getTime()) /
                                60000
                            );
                        }
                    }
                },
                {
                    prop: 'orderStatus',
                    label: '状态',
                    align: 'center',
                    showOverflowTooltip: true,
                    formatter: (row) => {
                        return this.workOrderStatus.filter(
                            (item) => item.code == row.orderStatus
                        )[0].label;
                    }
                },
                // {
                //     prop: 'acceptanceStatus',
                //     label: '执行结果',
                //     align: 'center',
                //     showOverflowTooltip: true,
                //     formatter: (row) => {
                //         return row.acceptanceStatus
                //             ? resultStatus.filter(
                //                 (item) => item.code == row.acceptanceStatus
                //             )[0].label
                //             : '';
                //     }
                // },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 240,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
            ],
            // 加载状态
            loading: false,
        };
    },
    computed: {},
    created() {
    },
    methods: {
        /* 表格数据源 */
        datasource({ page, limit, where, order }) {
            return getSalesWorkOrder({ pageNum: page, size: limit, ...where });
        },
        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where });
        },
        async cancel(row) {
            const res = await deleteSalesWorkOrder([row.id]);
            if (res) {
                this.$message.success('删除成功');
                this.reload();
            }
        },
        addSpareItems(row) {
            let data = JSON.parse(JSON.stringify(row));
            this.$refs.edit.open(data, 'work');
        },
        //接收
        async handleReceive(row) {
            const res = await receiveSalesWorkOrder(row)
            if (!res) return
            this.$message.success('操作成功')
            this.reload()
        },
        // 转派
        toRedeploy(row) {
            this.$refs.redeployOtherRef.open(row, 'transfer');
        },
        //报工
        declarationForm(row) {
            this.$refs.declarationDialogRef.open(row)
        },
        goDetail(row) {
            this.$refs.declarationDialogRef.open(row,'view');
        },
        handleCommand(command, row) {
            if (command === 'addSpareItems') {
                this.addSpareItems(row);
            }
            if (command === 'handleReceive') {
                this.handleReceive(row);
            }
            if (command === 'toRedeploy') {
                this.toRedeploy(row);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.el-dropdown-link {
    cursor: pointer;
    color: var(--color-primary-5);
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>