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

<template>
    <ele-modal custom-class="ele-dialog-form long-dialog-form" :visible.sync="visibleDialog" title="报工"
        :close-on-click-modal="false" width="55%" append-to-body @close="handleClose" :maxable="true">
        <el-tabs type="border-card" v-model="tabsActiveName">
            <el-tab-pane label="工单信息" name="workInfo">
                <el-row class="repair_row">
                    <el-col :span="8" class="repair_column">
                        <span>工单编号：</span>
                        <span>{{ addForm.code || '' }}</span>
                    </el-col>
                    <el-col :span="8" class="repair_column">
                        <span>执行部门：</span>
                        <span>{{ addForm.executeGroupName || '' }}</span>
                    </el-col>
                    <el-col :span="8" class="repair_column">
                        <span>执行人：</span>
                        <span>{{ addForm.executeUserName || '' }}</span>
                    </el-col>
                </el-row>
                <el-row class="repair_row">
                    <el-col :span="8" class="repair_column">
                        <span>计划单号：</span>
                        <span>{{ addForm.planCode || '' }}</span>
                    </el-col>
                    <el-col :span="8" class="repair_column">
                        <span>计划名称：</span>
                        <span>{{ addForm.planName || '' }}</span>
                    </el-col>
                    <el-col :span="8" class="repair_column">
                        <span>计划完成时间：</span>
                        <span>{{ addForm.planFinishTime || '' }}</span>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="需求单信息" name="demandInfo">
                <div class="marginBto">
                    <div>
                        <span class="name">发货单编码：{{ contractInfo.orderCode }}</span>
                        <span>客户名称：{{ contractInfo?.name }}</span>
                        <span>客户编码：{{ contractInfo?.code }}</span>
                        <span>客户代号：{{ contractInfo?.serialNo }}</span>
                        <span>业务员：{{ contractInfo?.salesmanName }}</span>
                        <span>客户级别：{{ getDictValue('供应商级别', contractInfo.level + '') }}</span>
                    </div>
                </div>
                <ele-pro-table ref="tableRef" :columns="columnsDetail" :datasource="productDetailList" height="200"
                    :needPage="false" class="marginBto">
                    <template v-slot:attachmentsArray="{ row }">
                        <fileMain v-model="row.attachmentsArray" type='view'></fileMain>
                    </template>
                </ele-pro-table>
            </el-tab-pane>
            <el-tab-pane label="备品备件清单" name="sparePartsApply">
                <spareParts ref="refs" :detailList="detailList"></spareParts>
            </el-tab-pane>
        </el-tabs>
    </ele-modal>
</template>

<script>

import fileMain from '@/components/addDoc/index.vue';

import spareParts from '../../components/sparePartsList.vue';

import { getSalesWorkOrderById } from '@/api/salesServiceManagement/index'

import { contactDetail } from "@/api/saleManage/contact";

import { mapGetters } from 'vuex';
export default {
    props: {
    },
    components: {
        fileMain,
        spareParts
    },
    watch: {},
    computed: {
        ...mapGetters(['getDictValue']),
    },
    data() {
        return {
            title: '',
            visibleDialog: false,
            tabsActiveName: 'workInfo',
            addForm: {
                time: [],
                attachments: '',
                reason: '',
            },
            detailList: [],
            contractInfo: {},
            productDetailList: [],
            columnsDetail: [
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryCode',
                    label: '编码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'categoryName',
                    label: '名称',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'batchNo',
                    label: '批次号',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'barcodes',
                    label: '发货条码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'measureQuantity',
                    label: '计量数量',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'materielDesignation',
                    label: '物料代号',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'engrave',
                    label: '刻码',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    prop: 'type',
                    label: '问题类型',
                    align: 'center',
                    showOverflowTooltip: true,
                    width: 120,
                    formatter: (_row, _column, cellValue) => {
                        return cellValue == 1 ? '维修' : cellValue == 2 ? '保养' : cellValue == 3 ? '安装' : '';
                    }
                },
                {
                    prop: 'typeDescribe',
                    slot: 'typeDescribe',
                    label: '问题描述',
                    align: 'center',
                    showOverflowTooltip: true,
                    width: 300
                },
                {
                    prop: 'attachmentsArray',
                    slot: 'attachmentsArray',
                    label: '附件',
                    align: 'center',
                    width: 120
                }
            ],
        }
    },
    created() {
    },
    methods: {

        handleDetail(row) {
            this.$refs.edit.open(this.addForm, 'work');
        },
        async getDetail(row) {
            const res = await getSalesWorkOrderById(row.id)

            res?.sparePartsApplyVO.map((item) => {
                item.repairCode = res.code;
                item.repairName = res.name;

                return {
                    ...item
                }
            })
            this.detailList = res.sparePartsApplyVO || [];
            //需求单信息
            await this.getContactDetail(res?.afterSalesDemandVO.contactId);
            this.productDetailList = res?.afterSalesDemandVO.productDetail || [];
        },
        async getContactDetail(id) {
            const res = await contactDetail(id)
            this.contractInfo = res?.base;
        },
        open(row) {
            this.addForm = row;
            this.tabsActiveName = 'workInfo';
            this.visibleDialog = true;
            this.getDetail(row);
        },

        handleClose() {
            this.tabsActiveName = '';
            this.visibleDialog = false;
        },

    }
};
</script>

<style lang="scss" scoped>
.repair_row {
    margin-bottom: 15px;

    .repair_column {
        display: flex;

        >span {
            &:first-child {
                font-weight: 700;
                text-align: right;
                width: 120px;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.marginBto {
    margin-bottom: 10px;

    span {
        margin-left: 50px;
    }

    .name {
        font-weight: 800;
        color: #40a9ff;
    }
}
</style>