easydo-mes-web/src/views/sales/order/desc.vue

<template>
    <el-dialog v-model="visible" title="销售订单详情" fullscreen :close-on-click-modal="false" @closed="$emit('closed')">
        <el-main>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="基本信息" name="basic">
                    <el-descriptions :column="3" label-width="140" border>
                        <el-descriptions-item v-if="$store.state.tenant.tenantId === '0'" label="所属租户" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ tenantName }}</el-descriptions-item>
                        <el-descriptions-item label="单据编号" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.code }}</el-descriptions-item>
                        <el-descriptions-item label="合同编号" :span="ismobile ? 3 : 1" label-align="right">{{ descData.contractNo }}</el-descriptions-item>
                        <el-descriptions-item label="单据日期" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.orderDate }}</el-descriptions-item>
                        <el-descriptions-item label="单据状态" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ XEUtils.get(salesDic.orderStatus, descData.status, descData.status) }}</el-descriptions-item>
                        <el-descriptions-item label="客户" :span="ismobile ? 3 : 1" label-align="right">{{ descData.customerName }}</el-descriptions-item>
                        <el-descriptions-item label="添加时间" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="预计交期" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.planReceiveDate }}</el-descriptions-item>
                        <el-descriptions-item label="实际交期" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.deliveryDate }}</el-descriptions-item>
                        <el-descriptions-item label="业务员" :span="ismobile ? 3 : 1" label-align="right">{{ descData.managerName }}</el-descriptions-item>
                        <el-descriptions-item label="收货日期" :span="ismobile ? 3 : 1" label-align="right" min-width="120">{{ descData.actualReceiveDate }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="1" label-width="140" border>
                        <el-descriptions-item label-class-name="no-border-top" class-name="no-border-top" label="客户收货地址" label-align="right">{{ descData.deliveryAddress }}</el-descriptions-item>
                        <el-descriptions-item label="概要" label-align="right">{{ descData.remark }}</el-descriptions-item>
                        <el-descriptions-item label="附件" label-align="right">
                            <sc-upload-file v-model="descData.fileList" hideAdd disabled></sc-upload-file>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-collapse-item>

                <el-collapse-item title="产品信息" name="material">
                    <sc-form-table v-model="descData.childrenList" v-bind="tableOptions" disabled></sc-form-table>
                </el-collapse-item>

                <el-collapse-item title="金额信息" name="amount">
                    <el-descriptions :column="2" label-width="140" border>
                        <el-descriptions-item label="整单折扣额" label-align="right" min-width="120">{{ descData.freePrice }}</el-descriptions-item>
                        <el-descriptions-item label="成交金额" label-align="right" min-width="120">{{ descData.actualPrice }}</el-descriptions-item>
                    </el-descriptions>
                </el-collapse-item>
            </el-collapse>
        </el-main>
    </el-dialog>
</template>

<script setup>
import XEUtils from "xe-utils";
import { salesDic } from "@/utils/basicDic";
import { tableOptions } from "./main";
import scUploadFile from "@/components/scUpload/file";

const $emit = defineEmits(["closed"]);
const visible = ref(false);

import store from "@/store";
const ismobile = computed(() => store.state.global.ismobile);
const tenantName = computed(() => XEUtils.get(XEUtils.find(store.state.tenant.tenants, item => item.id == descData.value.tenantId), "name"));

const activeNames = ref(["basic", "material", "amount"]);
const descData = ref({
    id: null,
    tenantId: store.state.tenant.tenantId,
    code: null,
    orderDate: null,
    customerName: null,
    contractNo: null,
    planReceiveDate: null,
    actualReceiveDate: null,
    deliveryDate: null,
    managerName: null,
    deliveryAddress: null,
    childrenList: [],
    freePrice: null,
    actualPrice: null,
    remark: null,
    fileList: [],
    status: "pending",
    createTime: null
});

const setData = data => {
    visible.value = true;
    XEUtils.objectEach(descData.value, (_, key) => {
        if (key == "fileList") XEUtils.set(descData.value, key, XEUtils.map(XEUtils.get(data, key), item => ({ ...item, name: item.fileName })));
        else if (key == "childrenList") XEUtils.set(descData.value, key, XEUtils.map(XEUtils.get(data, key), item => ({ ...item.material, quantity: item.materialQuantity, price: item.materialPrice  })));
        else XEUtils.set(descData.value, key, XEUtils.get(data, key));
    });
}

defineExpose({
    setData
})
</script>

<style scoped>
.el-main {padding-top: 0;}

.el-collapse {border: none;}
.el-collapse-item {margin-top: 15px;padding: 0 24px;background-color: var(--el-fill-color-blank);border: 1px solid var(--el-border-color-light);border-radius: 4px;color: var(--el-text-color-primary);box-shadow: var(--el-box-shadow-light);transition: var(--el-transition-duration);}
.el-collapse-item :deep(.el-collapse-item__header) {border-bottom-color: transparent;line-height: 55px;font-size: 16px;font-weight: bold;}
.el-collapse-item :deep(.el-collapse-item__header.is-active) {border-bottom: 1px solid var(--el-border-color-lighter);}
.el-collapse-item :deep(.el-collapse-item__wrap) {border: none;}
.el-collapse-item :deep(.el-collapse-item__content) {padding: 20px 0;}
</style>