CITS/src/views/departure/waybillManage/mainInfo.vue

<template>
  <a-form :model="currentFrom" label-align="left" @submit="handleSubmit">
    <strong class="strong before-flag">运单信息</strong>
    <a-row :gutter="16">
      <template v-for="item in mainOrderInfo" :key="item.field">
        <a-col v-if="!item.hidden || mainFlag" :span="item.clo">
          <a-form-item
            :field="item.field"
            :label="item.label"
            :rules="item.rules"
            :hide-asterisk="isDetail"
            :label-col-flex="labelWidth"
          >
            <p v-if="isDetail || !item.type">{{
              currentFrom[item.field]
                ? currentFrom[item.field] + (item.unit || '')
                : '--'
            }}</p>
            <a-input
              v-else
              v-model="currentFrom[item.field]"
              :disabled="isDisabled"
              :max-length="item['max-length']"
              :placeholder="item.placeholder"
            />
          </a-form-item>
        </a-col>
      </template>
    </a-row>
    <a-row v-if="mainFlag" :gutter="16">
      <a-col :span="24">
        <a-form-item label="货物尺寸" :label-col-flex="labelWidth">
          <a-table
            class="w-full"
            :columns="dimSizeColumns"
            :data="currentFrom.dimSizeList"
            :pagination="false"
          >
          </a-table>
          <template #extra>
            <div class="flex items-center justify-between text-base mt-3 px-1">
              <div>总计件数：{{ currentFrom.pcsDec || '0' }}</div>
              <div>总计重量：{{ currentFrom.wtDec || '0' }}KG</div>
              <div>总计体积：{{ currentFrom.volumeSum || '0' }}m³</div>
              <div>总计体积重量：{{ currentFrom.volumeAvg || '0' }}KG</div>
            </div>
          </template>
        </a-form-item>
      </a-col>
    </a-row>
    <strong class="strong before-flag">航班信息</strong>
    <a-row :gutter="16">
      <template v-for="item in mainFlyInfo" :key="item.field">
        <a-col v-if="!item.hidden || mainFlag" :span="item.clo">
          <a-form-item
            :field="item.field"
            :label="item.label"
            :label-col-flex="labelWidth"
          >
            <p v-if="isDetail">{{ currentFrom[item.field] || '--' }}</p>
            <a-input
              v-else
              v-model="currentFrom[item.field]"
              :disabled="isDisabled"
            />
          </a-form-item>
        </a-col>
      </template>
    </a-row>
    <article class="w-full flex justify-center mt-5">
      <!-- <a-button @click="emit('cancel')">取消</a-button> -->
      <a-button v-if="!isDetail" class="ml-4" type="primary" html-type="submit"
        >下一步</a-button
      >
    </article>
  </a-form>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue';
import { MODEL_TYPE } from '@/constant/base';
import { WAYBILL_TYPE } from '@/constant/waybill';
import { useWaybillStore } from '@/store';
import { dimSizeColumns } from './functions/table';
import { mainFlyInfo, mainOrderInfo } from './functions/data';

let valueKey: 'mawbDetail' | 'hawbDetail' = 'mawbDetail';
const labelWidth = '100px';

const props = defineProps({
  modelType: {
    type: Number,
    default: MODEL_TYPE.ADD,
  },
  orderType: {
    type: Number,
    default: WAYBILL_TYPE.MAIN,
  },
  isDisabled: {
    type: Boolean,
    default: true,
  },
  fromData: {
    type: Object,
    default: () => ({}),
  },
});

const { fromData, orderType, modelType } = toRefs(props);
const emit = defineEmits(['nextTabs', 'cancel']);
const waybillStore = useWaybillStore();

const currentFrom = ref<Record<string, any>>({});
const isDetail = computed(() => modelType.value === MODEL_TYPE.DETAIL);
const mainFlag = computed(() => orderType.value === WAYBILL_TYPE.MAIN);

const handleSubmit = async (res: any) => {
  const { errors, values } = res;
  if (!errors) {
    waybillStore.setValueByKey(valueKey, values);
    emit('nextTabs');
  }
};

onMounted(() => {
  valueKey =
    orderType.value === WAYBILL_TYPE.MAIN ? 'mawbDetail' : 'hawbDetail';
  currentFrom.value = fromData.value[valueKey];
});
</script>

<style lang="less" scoped>
:deep(.arco-form-item-extra) {
  width: 100%;
}
</style>