easydo-mes-web/src/views/outsourcing/plan/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 v-if="$store.state.tenant.tenantId === '0'" :column="1" label-width="140" border>
                        <el-descriptions-item label="所属租户" label-align="right">{{ tenantName }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="3" label-width="140" border>
                        <el-descriptions-item :label-class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" :class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" label="计划主题" :span="ismobile ? 3 : 1" label-align="right">{{ descData.name }}</el-descriptions-item>
                        <el-descriptions-item :label-class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" :class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" label="计划编号" :span="ismobile ? 3 : 1" label-align="right">{{ descData.code }}</el-descriptions-item>
                        <el-descriptions-item :label-class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" :class-name="$store.state.tenant.tenantId === '0' && 'no-border-top'" label="添加时间" :span="ismobile ? 3 : 1" label-align="right">{{ descData.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="计划状态" :span="ismobile ? 3 : 1" label-align="right">{{ XEUtils.get(productionDic.planStatus, descData.status, descData.status) }}</el-descriptions-item>
                        <el-descriptions-item label="计划开工日期" :span="ismobile ? 3 : 1" label-align="right">{{ descData.beginDate }}</el-descriptions-item>
                        <el-descriptions-item label="计划完工日期" :span="ismobile ? 3 : 1" label-align="right">{{ descData.endDate }}</el-descriptions-item>
                        <el-descriptions-item label="计划类型" :span="ismobile ? 3 : 1" label-align="right">{{ XEUtils.get(outsourcingDic.type, descData.type, descData.type) }}</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.remark }}</el-descriptions-item>
                        <el-descriptions-item v-if="descData.saleOrderId" label="来源单据" label-align="right">{{ descData.saleOrder.code }}</el-descriptions-item>
                    </el-descriptions>
                </el-collapse-item>

                <el-collapse-item v-if="descData.type == 'process'" title="委外工序" name="process">
                    <sc-form-table v-model="descData.childrenList[descData.type]" v-bind="tableOptions[descData.type]" disabled></sc-form-table>
                </el-collapse-item>

                <el-collapse-item v-if="descData.type == 'whole'" title="产品信息" name="material">
                    <sc-form-table v-model="descData.childrenList[descData.type]" v-bind="tableOptions[descData.type]" disabled></sc-form-table>
                </el-collapse-item>
            </el-collapse>
        </el-main>
    </el-dialog>
</template>

<script setup>
import XEUtils from "xe-utils";
import { productionDic, outsourcingDic } from "@/utils/basicDic";
import { tableOptions } from "./main";

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", "process"]);
const descData = ref({
    id: null,
    tenantId: store.state.tenant.tenantId,
    saleOrderId: null,
    saleOrder: null,
    name: null,
    code: null,
    type: "whole",
    beginDate: null,
    endDate: null,
    childrenList: {
        process: [],
        whole: []
    },
    remark: null,
    status: "pending",
    createTime: null
});

const setData = data => {
    visible.value = true;
    XEUtils.objectEach(descData.value, (_, key) => {
        if (key == "priority") XEUtils.set(descData.value, key, XEUtils.get(data, key) || "medium");
        else if (key == "childrenList") {
            data.type == "whole" && XEUtils.set(descData.value.childrenList, data.type, XEUtils.map(XEUtils.get(data, key), item => ({ ...item.material, number: item.number })));
            if (data.type == "process") {}
        } 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;}
.el-collapse-item :deep(.el-collapse-item__content) .el-descriptions__content {min-width: 120px;}
</style>