dosb-vue/src/views/billet/shippingBill/components/editForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <!-- 主表单区域 -->
    <a-form class="antd-modal-form" ref="formRef" :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="铸机">
            <JSearchSelect placeholder="请选择" disabled v-model:value="model.ccmNo" dict="lg_zj" defaultValue="5" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="班组">
            <JSearchSelect type="list" v-model:value="model.shiftGroup" dict="lg_bz" placeholder="请选择" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="班别">
            <JSearchSelect type="list" v-model:value="model.shift" dict="lg_bb" placeholder="请选择" allowClear />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="到站时间">
            <a-date-picker style="width: 100%" show-time v-model:value="model.arrivalTime" placeholder="到站时间" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="发车时间">
            <a-date-picker style="width: 100%" show-time v-model:value="model.outTime" placeholder="发车时间" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="钢种">
            <a-input v-model:value="model.steel" placeholder="请输入" allowClear />
            <!-- <JSearchSelect type="list" v-model:value="model.steel" dict="billet_spec" placeholder="请选择" /> -->
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="规格">
            <a-input v-model:value="model.spec" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="定尺">
            <!-- <a-input v-model:value="model.size" placeholder="请输入" allowClear @input="(val) => formatFloatData(val, 'size')" /> -->
            <JSearchSelect type="list" v-model:value="model.size" dict="lg_dcgg" placeholder="请选择" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类型">
            <JSearchSelect placeholder="请选择" v-model:value="model.btype" dict="lg_btype" allowClear />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="目的地">
            <JSearchSelect
              type="list"
              v-model:value="model.destination"
              :disabled="Number(model.typeConfigId) !== 1024"
              :dictOptions="machineConfig[model.ccmNo]"
              placeholder="请选择"
              allowClear
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="车牌号">
            <JSearchSelect type="list" v-model:value="model.licensePlate" dict="lg_car" placeholder="请选择" allowClear />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="牌号">
            <JSearchSelect type="list" v-model:value="model.brandNum" dict="billet_spec" placeholder="请选择" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="新/旧站台">
            <a-select allowClear v-model:value="model.newOldPlatform" :options="platformOptions"></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="车位号">
            <a-select style="width: 100%" disabled v-model:value="model.positionNum" placeholder="请选择" :options="carPosition" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="总支数">
            <a-input-number
              :disabled="!model.outTime"
              style="width: 100%"
              v-model:value="model.amountTotal"
              placeholder="请输入"
              allowClear
              :min="0"
              :max="100"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }">
            <a-textarea v-model:value="model.remarks" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
  // import { dictOptions } from '../shippingBill.data';
  import { queryBilletNameList } from '../../hotDelivery/hotDelivery.api';
  import { carPosition } from '../shippingBill.data';
  import { getDictItemsByCode } from '/@/utils/dict/index';
  import dayjs from 'dayjs';
  import { platformOptions } from '../../ShiftConfiguration/ShiftConfiguration.data';

  const props = defineProps({
    rowData: {
      type: Object,
      default: () => ({}),
      required: true,
    },
  });

  const labelCol = ref<any>({ xs: { span: 5 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 17 }, sm: { span: 17 } });
  const formRef = ref();
  const model = ref<Record<string, any>>({});
  const confirmLoading = ref<boolean>(false);

  const edit = () => {
    //值回显
    model.value = {
      ...props.rowData,
      arrivalTime: props.rowData.arrivalTime ? dayjs(props.rowData.arrivalTime) : null,
      outTime: props.rowData.outTime ? dayjs(props.rowData.outTime) : null,
      positionNum: props.rowData.ccmNo == 6 ? props.rowData.positionNum || 3 : 1,
    };

    console.log(props.rowData);
    getMachineConfig(props.rowData.ccmNo);
  };

  // 根据铸机号获取配置信息
  const machineConfig = ref({
    '5': [],
    '6': [],
  });
  const getMachineConfig = async (machineNum) => {
    if (!machineNum) {
      return;
    }
    try {
      const res = await queryBilletNameList({ ccmNo: machineNum });
      if (!machineConfig.value[machineNum]) {
        machineConfig.value[machineNum] = {};
      }
      if (res.length) {
        machineConfig.value[machineNum] = res
          .filter((v) => v.isTrucking)
          .map((item) => {
            return {
              id: item.id,
              value: item.typeName,
              text: item.typeName,
              label: item.typeName,
            };
          });
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  /**
   * 提交数据
   */
  async function submitForm() {
    const {
      id,
      dateTime,
      ccmNo,
      shiftGroup,
      shift,
      steel,
      spec,
      size,
      licensePlate,
      amountTotal,
      btype,
      arrivalTime,
      outTime,
      carNum,
      destination,
      typeConfigId,
      licensePlateStatus,
      brandNum,
      newOldPlatform,
      remarks,
    } = model.value;
    let objParams = {
      id,
      dateTime,
      ccmNo,
      shiftGroup,
      shift,
      steel,
      spec,
      size,
      licensePlate,
      amountTotal,
      btype,
      arrivalTime,
      outTime,
      carNum,
      destination,
      typeConfigId,
      remarks,
      brandNum,
      newOldPlatform,
    };
    confirmLoading.value = true;
    const newTypeConfigId = destination ? machineConfig.value[ccmNo].find((item) => item.label == destination).id : null;

    // 获取车辆字典
    const hasCar = (getDictItemsByCode('lg_car') || []).find((item) => item.value == licensePlate);

    defHttp
      .put(
        {
          url: '/storageBill/edit',
          params: { ...objParams, id: props.rowData.id, typeConfigId: newTypeConfigId, licensePlateStatus: !hasCar ? 1 : 0 },
        },
        { isTransformResponse: false }
      )
      .finally(() => {
        confirmLoading.value = false;
      });
  }
  defineExpose({
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 24px 24px 24px 24px;
  }
</style>