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-form
          ref="dataFormRef"
          :model="form"
          formDialogRef
          label-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-input
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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-picker
                          v-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 store
  store.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,
    };
  },
};