Vue 3 的全局状态管理

1.思路梳理

工厂仓拣货信息：Factory Picking Info (FPI)
工厂仓调度信息：Factory Scheduling Info (FSI)
DC 收货信息：DC Receiving Info (DCRI)
上架信息：Shelving Info (SI)
盘点信息：Inventory Count Info (ICI)
移位信息：Shifting Info (SHI)
订单信息：Order Info (OI)
拣货信息：Picking Info (PI)

调度单信息：Dispatch Order Info (DOI)

<template><div><el-card><div v-if="stageAbbreviation === 'FPI'">工厂仓拣货信息内容</div><div v-else-if="stageAbbreviation === 'FSI'">工厂仓调度信息内容</div><div v-else-if="stageAbbreviation === 'DCRI'">DC 收货信息内容</div><div v-else-if="stageAbbreviation === 'SI'">上架信息内容</div><div v-else-if="stageAbbreviation === 'ICI'">盘点信息内容</div><div v-else-if="stageAbbreviation === 'SHI'">移位信息内容</div><div v-else-if="stageAbbreviation === 'OI'">订单信息内容</div><div v-else-if="stageAbbreviation === 'PI'">拣货信息内容</div><div v-else-if="stageAbbreviation === 'DOI'">调度单信息内容</div><div v-else>未知阶段信息</div></el-card></div>
</template><script>
export default {props: {stageAbbreviation: {type: String,required: true}}
};
</script>

<template><div><StageInfoDisplay stageAbbreviation="FPI" /><StageInfoDisplay stageAbbreviation="DCRI" /><StageInfoDisplay stageAbbreviation="OI" /></div>
</template><script>
import StageInfoDisplay from './StageInfoDisplay.vue';export default {components: {StageInfoDisplay}
};
</script>

<template><div><el-card><div v-if="stageInfo">{{ stageInfo }}</div><div v-else>加载中...</div></el-card></div>
</template><script>
export default {data() {return {stageInfo: null};},props: {stageAbbreviation: {type: String,required: true}},mounted() {this.loadData();},methods: {loadData() {// 模拟异步加载数据，实际情况下可以使用异步请求获取数据setTimeout(() => {// 根据 stageAbbreviation 加载相应的数据switch (this.stageAbbreviation) {case 'FPI':this.stageInfo = "工厂仓拣货信息内容";break;case 'DCRI':this.stageInfo = "DC 收货信息内容";break;case 'OI':this.stageInfo = "订单信息内容";break;default:this.stageInfo = "未知阶段信息";}}, 1000); // 模拟1秒后加载完成}}
};
</script>

<template><div><StageInfoDisplay :stageAbbreviations="['FPI', 'DCRI', 'OI']" :snData="SNdata" /></div>
</template><script>
import StageInfoDisplay from './StageInfoDisplay.vue';export default {components: {StageInfoDisplay},data() {return {SNdata: {// SNdata 数据}};}
};
</script>

<template><div><template v-for="abbreviation in stageAbbreviations"><el-card v-if="shouldDisplay(abbreviation)" :key="abbreviation"><h2>{{ abbreviation }}</h2><p>{{ getStageInfo(abbreviation) }}</p></el-card></template></div>
</template><script>
export default {props: {stageAbbreviations: {type: Array,required: true},snData: {type: Object,required: true}},methods: {shouldDisplay(abbreviation) {// 根据传入的阶段缩写数组判断是否应该展示该阶段信息return this.stageAbbreviations.includes(abbreviation);},getStageInfo(abbreviation) {// 根据缩写获取对应的阶段信息switch (abbreviation) {case 'FPI':return 'First Production Inspection';case 'DCRI':return 'Delivery Confirmation and Receipt Inspection';case 'OI':return 'Outbound Inspection';default:return 'Unknown Stage';}}}
};
</script>

2.路由初步实现

封装组件

<template><div class="layout-padding"><div class="layout-padding-view" style="overflow: auto;height: inherit ;padding:10px"><el-formref="dataFormRef":model="form"formDialogReflabel-width="auto":inline="true"><el-card shadow="never" ><el-collapse v-model="goodsCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.goodsInfo') }}</span><div style="width: 50%;text-align: right;margin-right: 25px"><el-button @click.stop="onBack()">{{ $t('translate.return') }}</el-button></div></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsSnNo')" prop="form"><el-input v-model="form.id" name="form" :placeholder="$t('translate.inputgoodsSnNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.cargoOwner')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputCargoOwnerTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsName')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputGoodsNameTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.GoodsStatus')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectGoodsStatus')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.historicalState')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectHistoricalState')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.warehouseStatus')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectWarehouseStatus')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.currentStorageLocation')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectCurrentWarehouse')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.currentStorageLocation')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectCurrentStorageLocation')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.currentStorageArea')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectCurrentStorageArea')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsSource')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputGoodsBatchNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.productModel')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputProductModelTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsBatchNo')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputGoodsBatchNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.package')" prop="form"><el-input v-model="form.id" name="form" :placeholder="$t('translate.inputPackageTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.packQty')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputExpectedPackageQty')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.PackingQty')" prop="form"><el-input v-model="form.id" name="form" :placeholder="$t('translate.PackingQty')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsWeight')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputgoodsWeight')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsColor')" prop="form"><el-input v-model="form.id" name="form" :placeholder="$t('translate.inputGoodsColor')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.goodsVolume')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputgoodsVolume')"></el-input></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('FWR')" :key="'FWR'"><el-collapse v-model="factoryReceiveCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('工厂仓收货信息') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksReceiptNo')" prop="receiptNo"><el-input v-model="form.receiptNo" :placeholder="$t('translate.inputWerksReceiptNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.Consignor')" prop="documentType"><el-input v-model="form.documentType" :placeholder="$t('translate.selectShipper')">></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.shipperTel')" prop="responsible"><el-input v-model="form.responsible" :placeholder="$t('translate.inputshipperTel')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.carNo')" prop="operator"><el-input v-model="form.operator" :placeholder="$t('translate.inputCarNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.DeliveryTime')" prop="receiptCompleteTime"><el-date-pickerv-model="form.receiptCompleteTime"type="datetime":placeholder="$t('translate.DeliveryTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('FWPI')" :key="'FWPI'"><el-collapse v-model="factoryPickingCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.werksPickInfo') }}</span></template><!-- 表单项内容 --><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksPickNo')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.inputWerksPickNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.pickingCondition')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectPickingCondition')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksPicker')" prop="form"><el-input v-model="form.id" name="form":placeholder="$t('translate.selectWerksPicker')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksPickDate')" prop="form"><el-date-pickerv-model="form.auditTime"type="datetime":placeholder="$t('translate.selectWerksPicker')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('FWDI')" :key="'FWDI'"><el-collapse v-model="factorySchedulingCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.werksDispatchInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksDispatchNo')" prop="warehouseNo"><el-input v-model="form.warehouseNo":placeholder="$t('translate.inputWerksDispatchNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksDispatcStatus')" prop="status"><el-select v-model="form.status" :placeholder="$t('translate.selectWerksDispatcStatus')"><el-option label="完成" value="complete"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.auditor')" prop="reviewer"><el-input v-model="form.reviewer" :placeholder="$t('translate.selectauditor')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.AuditDate')" prop="applyTime"><el-date-pickerv-model="form.applyTime"type="datetime":placeholder="$t('translate.selectauditTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.RESV1')" prop="transportLine"><el-input v-model="form.transportLine" :placeholder="$t('translate.destinationTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.isLoad')" prop="startStation"><el-input v-model="form.startStation" :placeholder="$t('translate.isLoad')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.transportMethod')" prop="transportMode"><el-input v-model="form.transportMode":placeholder="$t('translate.inputTransportationMethodName')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.truck')" prop="vehicleNo"><el-input v-model="form.vehicleNo" :placeholder="$t('translate.selectTruckType')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.Driver')" prop="driver"><el-input v-model="form.driver" :placeholder="$t('translate.inputDriver')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ALCT')" prop="requiredShipTime"><el-date-pickerv-model="form.requiredShipTime"type="datetime":placeholder="$t('translate.ALCT')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.TruckEDD')" prop="estimatedShipTime"><el-date-pickerv-model="form.estimatedShipTime"type="datetime":placeholder="$t('translate.TruckEDD')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.TruckADD')" prop="actualShipTime"><el-date-pickerv-model="form.actualShipTime"type="datetime":placeholder="$t('translate.TruckADD')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('DCRI')" :key="'DCRI'"><el-collapse v-model="receiveCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">DC {{ $t('translate.ReceivptGoodsInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ReceivptGoodsFormNo')" prop="receiptNo"><el-input v-model="form.receiptNo":placeholder="$t('translate.inputReceivptGoodsFormNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.DocumentType')" prop="documentType"><el-input v-model="form.documentType" :placeholder="$t('translate.DocumentType')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.author')" prop="responsible"><el-input v-model="form.responsible" :placeholder="$t('translate.inputauthor')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.operateName')" prop="operator"><el-input v-model="form.operator" :placeholder="$t('translate.inputOperators')"></el-input></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ReceivingWarehouse')" prop="receiptWarehouse"><el-input v-model="form.receiptWarehouse":placeholder="$t('translate.selectReceivingWarehouse')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.recvStatus')" prop="receiptStatus"><el-input v-model="form.receiptStatus" :placeholder="$t('translate.recvStatus')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ReceivingWarehouseLocation')" prop="goodsLocation"><el-input v-model="form.goodsLocation":placeholder="$t('translate.selectDefaultReceivingGoodsLocation')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.palletNo')" prop="palletNo"><el-input v-model="form.palletNo" :placeholder="$t('translate.inputPalletNumberTip')"></el-input></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ReceivptGoodsPlatForm')" prop="receiptPlatform"><el-input v-model="form.receiptPlatform":placeholder="$t('translate.selectPlanRecvPlat')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ETA')" prop="estimatedArrivalTime"><el-date-pickerv-model="form.estimatedArrivalTime"type="datetime":placeholder="$t('translate.selctETA')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ReservationDate')" prop="appointmentDate"><el-date-pickerv-model="form.appointmentDate"type="datetime":placeholder="$t('translate.ReservationDate')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.startReceivingTime')" prop="startReceiptTime"><el-date-pickerv-model="form.startReceiptTime"type="datetime":placeholder="$t('translate.startReceivingTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.endReceivingTime')" prop="receiptCompleteTime"><el-date-pickerv-model="form.receiptCompleteTime"type="datetime":placeholder="$t('translate.endReceivingTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('SI')" :key="'SI'"><el-collapse v-model="putawayCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.putAwayInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayNo')" prop="shelvingTaskNo"><el-input v-model="form.shelvingTaskNo" :placeholder="$t('translate.putAwayNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayStatus')" prop="operationStatus"><el-select v-model="form.operationStatus" :placeholder="$t('translate.selectPutAwayStatus')"><el-option label="已完成" value="completed"></el-option><el-option label="进行中" value="inProgress"></el-option><el-option label="未开始" value="notStarted"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayOrganization')" prop="organization"><el-input v-model="form.organization":placeholder="$t('translate.selectPutAwayOrganization')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayLocation')" prop="shelvingLocation"><el-input v-model="form.shelvingLocation":placeholder="$t('translate.selectPutAwayLocation')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayStartTime')" prop="shelvingStartTime"><el-date-pickerv-model="form.shelvingStartTime"type="datetime":placeholder="$t('translate.selectPutAwayStartTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayEndTime')" prop="shelvingEndTime"><el-date-pickerv-model="form.shelvingEndTime"type="datetime":placeholder="$t('translate.selectPutAwayEndTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.putAwayPicker')" prop="operator"><el-input v-model="form.operator" :placeholder="$t('translate.selectPutAwayPicker')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.author')" prop="responsible"><el-input v-model="form.responsible" :placeholder="$t('translate.selectAuthor')"></el-input></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('ICI')" :key="'ICI'"><el-collapse v-model="checkCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.inventoryInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.InventoryNumber')" prop="qualityPointNo"><el-input v-model="form.qualityPointNo":placeholder="$t('translate.inputInventoryNumberTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.recountNo')" prop="manufacturingNo"><el-input v-model="form.manufacturingNo" :placeholder="$t('translate.inputRecountNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.inventoryType')" prop="qualityPointType"><el-select v-model="form.qualityPointType" :placeholder="$t('translate.inputInventoryTypeTip')"><el-option label="破损" value="damaged"></el-option><el-option label="缺失" value="missing"></el-option><el-option label="正常" value="normal"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.countBy')" prop="qualityInspector"><el-input v-model="form.qualityInspector":placeholder="$t('translate.inputInventoryName')"></el-input></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.author')" prop="responsible"><el-input v-model="form.responsible" :placeholder="$t('translate.selectAuthor')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.inventoryDate')" prop="qualityCheckTime"><el-date-pickerv-model="form.qualityCheckTime"type="datetime":placeholder="$t('translate.selectInventoryDate')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.InventoryStatus')" prop="qualityResult"><el-select v-model="form.qualityResult" :placeholder="$t('translate.selectInventoryStatus')"><el-option label="合格" value="qualified"></el-option><el-option label="不合格" value="unqualified"></el-option><el-option label="待处理" value="pending"></el-option></el-select></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('SHI')" :key="'SHI'"><el-collapse v-model="shiftingCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.moveInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ShiftOrderNumber')" prop="moveNo"><el-input v-model="form.moveNo":placeholder="$t('translate.inputShiftOrderNumberTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveType')" prop="moveNo"><el-select v-model="form.status" :placeholder="$t('translate.selectMoveType')"><el-option :label="$t('translate.MoveInStorage')" value="complete"></el-option><el-option :label="$t('translate.MoveOutStorage')" value="complete"></el-option><el-option label="正常" value="complete"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveInZone')" prop="inArea"><el-input v-model="form.inArea":placeholder="$t('translate.inputShiftOrderNumberTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveInLocation')" prop="inLocation"><el-input v-model="form.inLocation":placeholder="$t('translate.selectMoveInLocation')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveIn')" prop="inOperator"><el-input v-model="form.inOperator" :placeholder="$t('translate.selectMoveIn')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveInTime')" prop="inTime"><el-date-pickerv-model="form.inTime"type="datetime":placeholder="$t('translate.moveInTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveOutZone')" prop="outArea"><el-input v-model="form.outArea" :placeholder="$t('translate.selectinRegionZone')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveOutLocation')" prop="outLocation"><el-input v-model="form.outLocation":placeholder="$t('translate.selectMoveOutLocation')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveOut')" prop="outOperator"><el-input v-model="form.outOperator" :placeholder="$t('translate.selectMoveOut')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveOutTime')" prop="outTime"><el-date-pickerv-model="form.outTime"type="datetime":placeholder="$t('translate.moveOutTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.moveStatus')" prop="moveStatus"><el-select v-model="form.moveStatus" :placeholder="$t('translate.selectMoveStatus')"><el-option label="已完成" value="completed"></el-option><el-option label="进行中" value="inProgress"></el-option><el-option label="待处理" value="pending"></el-option></el-select></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('OI')" :key="'OI'"><el-collapse v-model="orderCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.orderInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.orderNo')" prop="orderNo"><el-input v-model="form.orderNo" :placeholder="$t('translate.inputOrderNumberTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.clientName')" prop="customer"><el-input v-model="form.customer":placeholder="$t('translate.inputCustomerSelectTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.Origin')" prop="originPlace"><el-input v-model="form.originPlace" :placeholder="$t('translate.selectOrigin')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.DeliveryTime')" prop="pickupTime"><el-date-pickerv-model="form.pickupTime"type="datetime":placeholder="$t('translate.endReceivingTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.Consignor')" prop="sender"><el-input v-model="form.sender" :placeholder="$t('translate.selectShipper')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.shipperAddrs')" prop="senderAddress"><el-input v-model="form.senderAddress":placeholder="$t('translate.inputshipperAddrs')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.shipToName')" prop="receiverName"><el-input v-model="form.receiverName" :placeholder="$t('translate.SelectShipToName')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.shipToAddress1')" prop="receiverAddress"><el-input v-model="form.receiverAddress":placeholder="$t('translate.inputShipToAddress1')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.soldToName')" prop="pickupPartyName"><el-input v-model="form.pickupPartyName":placeholder="$t('translate.inputSoldToPartyName')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.soldToAddress1')" prop="pickupAddress"><el-input v-model="form.pickupAddress" :placeholder="$t('translate.soldToAddress1')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.orderStatus')" prop="orderStatus"><el-select v-model="form.orderStatus" :placeholder="$t('translate.selectOrderStatus')"><el-option label="待处理" value="pending"></el-option><el-option label="处理中" value="processing"></el-option><el-option label="已完成" value="completed"></el-option><el-option label="已取消" value="cancelled"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.SAPOrderRemarks')" prop="orderRemarks"><el-inputv-model="form.orderRemarks"type="textarea":placeholder="$t('translate.inputRemarkTip')":rows="1"></el-input></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('PI')" :key="'PI'"><el-collapse v-model="orderPickingCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.PickingInfo')}}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.pickerListNo')" prop="pickingNo"><el-input v-model="form.pickingNo" :placeholder="$t('translate.inputpickOrderNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.pickingCondition')" prop="pickingStatus"><el-select v-model="form.pickingStatus" :placeholder="$t('translate.selectPickingCondition')"><el-option label="待拣货" value="pending"></el-option><el-option label="拣货中" value="processing"></el-option><el-option label="已完成" value="completed"></el-option><el-option label="已取消" value="cancelled"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.isReturn')" prop="picker"><el-input v-model="form.picker"  :placeholder="$t('translate.selectisReturn')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.pickBy')" prop="picker"><el-input v-model="form.picker" :placeholder="$t('translate.inputpickBy')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.RESV1')" prop="destination"><el-input v-model="form.destination":placeholder="$t('translate.selectDestinationCityName')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.inputStartPlaceholderTip')" prop="pickingStartTime"><el-date-pickerv-model="form.pickingStartTime"type="datetime":placeholder="$t('translate.selectStartPlaceholderTip')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.ActualCompleteTiem')" prop="pickingEndTime"><el-date-pickerv-model="form.pickingEndTime"type="datetime":placeholder="$t('translate.ActualCompleteTiem')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.PickingArea')" prop="pickingArea"><el-input v-model="form.pickingArea" :placeholder="$t('translate.PickingArea')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.pickingMethod')" prop="pickingMethod"><el-select v-model="form.pickingMethod" :placeholder="$t('translate.selectPickingMethod')"><el-option label="人工拣货" value="manual"></el-option><el-option label="自动拣货" value="automatic"></el-option><el-option label="混合拣货" value="mixed"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.priority')" prop="priority"><el-select v-model="form.priority" :placeholder="$t('translate.inputPriority')"><el-option label="高" value="high"></el-option><el-option label="中" value="medium"></el-option><el-option label="低" value="low"></el-option></el-select></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card><el-card shadow="never"  v-if="shouldDisplay('DOI')" :key="'DOI'"><el-collapse v-model="dispatchCollapse"><el-collapse-item name="1"><template #title><span class="titleStyle" style="width: 50%">{{ $t('translate.dispatchInfo') }}</span></template><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.CARBLCDE')" prop="dispatchNo"><el-input v-model="form.dispatchNo" :placeholder="$t('translate.inputDispatchNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.werksDispatcStatus')" prop="dispatchStatus"><el-select v-model="form.dispatchStatus" :placeholder="$t('translate.selectWerksDispatcStatus')"><el-option label="签收" value="signed"></el-option><el-option label="待签收" value="pending"></el-option><el-option label="运输中" value="transporting"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.carrier')" prop="carrier"><el-input v-model="form.carrier" :placeholder="$t('translate.inputCarrierName')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item  :label="$t('translate.auditByName')" prop="auditor"><el-input v-model="form.auditor" :placeholder="$t('translate.inputauditByName')"></el-input></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.auditTime')"  prop="auditTime"><el-date-pickerv-model="form.auditTime"type="datetime":placeholder="$t('translate.selectauditTimeTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.routeLink')" prop="route"><el-input v-model="form.route" :placeholder="$t('translate.routeLinkTip')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.isTransfer')" prop="isTransfer"><el-select v-model="form.isTransfer"    :placeholder="$t('translate.selectisTransfer')"><el-option label="是" value="yes"></el-option><el-option label="否" value="no"></el-option></el-select></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.transportMethod')"  prop="transportMethod"><el-select v-model="form.transportMethod"   :placeholder="$t('translate.inputTranspModeTip')"><el-option label="汽运" value="truck"></el-option><el-option label="铁路" value="railway"></el-option><el-option label="空运" value="air"></el-option></el-select></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.carNumber')" prop="vehicleNo"><el-input v-model="form.vehicleNo" :placeholder="$t('translate.inputCarNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.Driver')"  prop="driver"><el-input v-model="form.driver" :placeholder="$t('translate.inputDriver')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.LoadSheet')"  prop="loadingVehicle"><el-input v-model="form.loadingVehicle" :placeholder="$t('translate.TruckLoadingBillNo')"></el-input></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.TruckLoadingCompletionTime')"  prop="loadingCompleteTime"><el-date-pickerv-model="form.loadingCompleteTime"type="datetime":placeholder="$t('translate.TruckLoadingCompletionTime')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row><el-row class="mb1"><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.TruckEDD')" prop="expectedDepartureTime"><el-date-pickerv-model="form.expectedDepartureTime"type="datetime":placeholder="$t('translate.TruckEDD')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col><el-col :xs="8" :sm="8" :md="6"><el-form-item :label="$t('translate.TruckADD')"  prop="actualDepartureTime"><el-date-pickerv-model="form.actualDepartureTime"type="datetime":placeholder="$t('translate.TruckADD')"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"/></el-form-item></el-col></el-row></el-collapse-item></el-collapse></el-card></el-form></div></div>
</template><script setup lang="ts">
import { ref , onMounted } from 'vue';
import {useRoute} from "vue-router";
const route = useRoute()
const form = ref({})
const goodsCollapse = ref('1')
const factoryReceiveCollapse = ref('1')
const factoryPickingCollapse = ref('1')
const factorySchedulingCollapse = ref('1')
const receiveCollapse = ref('1')
const putawayCollapse = ref('1')
const checkCollapse = ref('1')
const shiftingCollapse = ref('1')
const orderCollapse = ref('1')
const orderPickingCollapse = ref('1')
const dispatchCollapse = ref('1')const stageAbbreviations = ref([])
// 判断是否显示
const shouldDisplay = (abbreviation: string) => {return stageAbbreviations.value.includes(abbreviation);
};onMounted(() => {if (route.query) {stageAbbreviations.value = route.query.stageAbbreviations}
});/** 返回列表 */
const onBack = () => {window.history.back();
};</script><style>.titleStyle {font-size: 20px;height: 48px;line-height: 48px;text-indent: 1em;position: relative;border-bottom: 3px solid #fcfdfd;
}.titleStyle::before {content: "";display: block;position: absolute;/*left: 20px;*/top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);height: 20px;border: 4px solid #1f5b91;width: 2px;border-radius: 5px;background: #1f5b91;
}
</style>

import {useRoute} from "vue-router";
const route = useRoute()// 判断是否显示
const shouldDisplay = (abbreviation: string) => {return stageAbbreviations.value.includes(abbreviation);
};onMounted(() => {if (route.query) {stageAbbreviations.value = route.query.stageAbbreviations}
});

引用组件

3.使用 Pinia 来管理全局状态

1在 Pinia store 中定义一个状态来存储 snData 和 stageAbbreviations

import { defineStore } from 'pinia';export const useStore = defineStore({id: 'global',state: () => ({snData: {} as Record<string, any>,stageAbbreviations: [] as string[],}),actions: {setSNData(data: Record<string, any>) {this.snData = data;},setStageAbbreviations(abbreviations: string[]) {this.stageAbbreviations = abbreviations;},},
});

在你的路由跳转函数中，你可以使用 Pinia store 来存储 snData 和 stageAbbreviations 的值，并在跳转时不传递参数：

import { useStore } from './store';
import { router } from 'your-router-file-path'; // 导入你的 router 实例const onSNTrace = () => {const store = useStore();const snData = {id: '这个货品的数据',};const stageAbbreviations = ['ICI', 'SI', 'DCRI', 'FWDI', 'FWPI', 'FWR'];// 存储到 Pinia storestore.setSNData(snData);store.setStageAbbreviations(stageAbbreviations);// 跳转路由router.push('/warehouseManage/snNoManage/components/snTrace');
};

在你的目标路由组件中，你可以通过 Pinia store 来获取存储的 snData 和 stageAbbreviations 的值

import { useStore } from './store';export default {setup() {const store = useStore();// 获取存储的值const snData = store.snData;const stageAbbreviations = store.stageAbbreviations;// 在组件销毁前清除存储的值onBeforeUnmount(() => {store.setSNData({});store.setStageAbbreviations([]);});return {snData,stageAbbreviations,};},
};