<template> <div class="app-seaStepDetail"> <el-scrollbar :vertical="true" viewClass="shipping-step"> <template v-for="(step, index) in flatSeaStep"> <div :key="index" v-if="shipmentObj[step.voName] && columnsMapping[step.voName] && checkPermi(['boxAir:'+step.type+':show'])" class="step-table"> <div class="step-title">{{step.title}}</div> <div v-for="(data, index) in columnsMapping[step.voName]" :key="index" class="step-content"> <p>{{data.title}}</p> <p>{{getObjInfo(step.voName, data)}}</p> </div> </div> </template> </el-scrollbar> </div> </template> <script> import dayjs from "dayjs"; import * as _C from "./utils"; import {checkPermi} from '@/utils/permission' export default { name: "seaStepDetail", inheritAttrs: false, props: { shipmentObj: Object, seaBaseData: Array, }, data() { return { flatSeaStep: this.seaBaseData.flat(), columnsMapping: _C.getColmnMapping(), }; }, methods: { checkPermi, // 检查权限 getObjInfo(voName, data) { const { key, type } = data; let val = this.shipmentObj[voName]?.[key] ?? ""; if (val) { switch (type) { case "date": case "datetime": val = dayjs(val).format("YYYY-MM-DD HH:mm:ss"); break; case "supplier": val = this.getSupplier(Number(val)); break; case "dock": val = this.getDock(Number(val)); break; case "warehouse": val = this.getWarehouse(Number(val)); break; case "shipping_dcCustoms_status": case "shipping_customs_type": val = this.getDict(type, String(val)); break; case "saExmtStatus": case "bgExmtStatus": case "isFile": case "billingMethod": val = this.getConstant(type, String(val)); break; case "user": val = this.getUser(val); break; } } return val === 0 ? "" : val; }, getSupplier(id) { return ( this.$l(this.$attrs.allSupplier.find((item) => item.id === id), 'company') // ?? id ); }, getDock(id) { return this.$l(this.$attrs.allDocks.find((item) => item.id === id), 'title') ?? id; }, getWarehouse(id) { return ( this.$l(this.$attrs.warehouseList.find((item) => item.id === id), 'title') ?? id ); }, getUser(id) { return ( this.$attrs.allUsers.find((item) => item.id === id)?.nickname ?? id ); }, getDict(code, id) { return ( this.$l(this.getDictDatas(code).find((item) => item.value === id), 'label') ?? id ); }, getConstant(code, id) { return ( _C.constantDict[code].find((item) => item.value === id)?.label ?? id ); }, }, }; </script> <style lang="scss"> .app-seaStepDetail { .shipping-step { margin-top: 15px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; height: 550px; min-width: 1300px; padding: 10px 10px; overflow-x: auto; p { margin: 0; } .step-table { width: 200px; border: 1px solid gray; margin-bottom: 15px; margin-right: 15px; .step-title { font-size: 16px; font-weight: bolder; background-color: #c6c8ce; line-height: 30px; text-align: center; } .step-content { display: grid; border-top: 1px solid gray; font-size: 14px; line-height: 25px; grid-template-columns: repeat(2, 1fr); > p:first-child { border-right: 1px solid gray; } > p { padding: 0 5px; } } } } } </style>