加loading

董国庆

2026-03-13 7ebe5bab6228e750afae0939e1ff600d5da49067

加loading

 src/views/assetManagement/vehicleManagement/inventoryVehicle/components/EditVehicleModal.vue

@@ -27,6 +27,7 @@
const emit = defineEmits<Emits>()

const formRef = ref<FormInst | null>(null)
const submitting = ref(false)

// 表单数据
const formModel = ref({
@@ -174,6 +175,7 @@
  await formRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        submitting.value = true
        const params: any = {
          vehicleCode: formModel.value.vehicleCode,
          vehicleVin: formModel.value.vin,
@@ -214,6 +216,9 @@
      }
      catch (error) {
        // 错误已经在 request 拦截器中处理
      }
      finally {
        submitting.value = false
      }
    }
    else {
@@ -286,88 +291,90 @@
    }"
    @update:show="(val) => emit('update:show', val)"
  >
    <n-form
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      label-placement="top"
      require-mark-placement="left"
      class="edit-vehicle-form"
    >
      <n-grid :cols="2" :x-gap="16">
        <!-- 左侧列 -->
        <n-gi>
          <n-form-item label="车辆编码" path="vehicleCode">
            <n-input v-model:value="formModel.vehicleCode" placeholder="请输入" clearable disabled />
          </n-form-item>
    <n-spin :show="submitting" size="large" description="保存中...">
      <n-form
        ref="formRef"
        :model="formModel"
        :rules="formRules"
        label-placement="top"
        require-mark-placement="left"
        class="edit-vehicle-form"
      >
        <n-grid :cols="2" :x-gap="16">
          <!-- 左侧列 -->
          <n-gi>
            <n-form-item label="车辆编码" path="vehicleCode">
              <n-input v-model:value="formModel.vehicleCode" placeholder="请输入" clearable disabled />
            </n-form-item>

          <n-form-item label="车牌号" path="plateNumber">
            <n-input v-model:value="formModel.plateNumber" placeholder="请输入" clearable disabled />
          </n-form-item>
            <n-form-item label="车牌号" path="plateNumber">
              <n-input v-model:value="formModel.plateNumber" placeholder="请输入" clearable disabled />
            </n-form-item>

          <n-form-item label="车辆颜色" path="vehicleColor">
            <n-input v-model:value="formModel.vehicleColor" placeholder="请输入" clearable />
          </n-form-item>
            <n-form-item label="车辆颜色" path="vehicleColor">
              <n-input v-model:value="formModel.vehicleColor" placeholder="请输入" clearable />
            </n-form-item>

          <n-form-item label="采购来源" path="purchaseSource">
            <n-input v-model:value="formModel.purchaseSource" placeholder="请输入" clearable />
          </n-form-item>
            <n-form-item label="采购来源" path="purchaseSource">
              <n-input v-model:value="formModel.purchaseSource" placeholder="请输入" clearable />
            </n-form-item>

          <n-form-item label="运营区域" path="operationArea">
            <n-select
              v-model:value="formModel.operationArea"
              :options="operationAreaOptions"
              placeholder="请选择"
              filterable
              clearable
              style="width: 100%;"
            />
          </n-form-item>
        </n-gi>
            <n-form-item label="运营区域" path="operationArea">
              <n-select
                v-model:value="formModel.operationArea"
                :options="operationAreaOptions"
                placeholder="请选择"
                filterable
                clearable
                style="width: 100%;"
              />
            </n-form-item>
          </n-gi>

        <!-- 右侧列 -->
        <n-gi>
          <n-form-item label="车辆VIN码" path="vin">
            <n-input v-model:value="formModel.vin" placeholder="请输入" clearable maxlength="17" show-count disabled />
          </n-form-item>
          <!-- 右侧列 -->
          <n-gi>
            <n-form-item label="车辆VIN码" path="vin">
              <n-input v-model:value="formModel.vin" placeholder="请输入" clearable maxlength="17" show-count disabled />
            </n-form-item>

          <n-form-item label="型号" path="model">
            <n-input v-model:value="formModel.model" placeholder="请输入" clearable />
          </n-form-item>
            <n-form-item label="型号" path="model">
              <n-input v-model:value="formModel.model" placeholder="请输入" clearable />
            </n-form-item>

          <n-form-item label="车辆照片" path="vehiclePhotos">
            <n-upload
              v-model:file-list="formModel.vehiclePhotos"
              :max="5"
              accept=".jpg,.jpeg,.png"
              :custom-request="customRequest"
              :on-before-upload="beforeImageUpload"
              list-type="image-card"
              @remove="(data) => handleRemove(data, 'vehiclePhotos')"
            >
              点击上传
            </n-upload>
          </n-form-item>
            <n-form-item label="车辆照片" path="vehiclePhotos">
              <n-upload
                v-model:file-list="formModel.vehiclePhotos"
                :max="5"
                accept=".jpg,.jpeg,.png"
                :custom-request="customRequest"
                :on-before-upload="beforeImageUpload"
                list-type="image-card"
                @remove="(data) => handleRemove(data, 'vehiclePhotos')"
              >
                点击上传
              </n-upload>
            </n-form-item>

          <n-form-item label="备注" path="remark">
            <n-input
              v-model:value="formModel.remark"
              type="textarea"
              placeholder="请输入"
              :autosize="{ minRows: 2, maxRows: 4 }"
              clearable
            />
          </n-form-item>
        </n-gi>
      </n-grid>
    </n-form>
            <n-form-item label="备注" path="remark">
              <n-input
                v-model:value="formModel.remark"
                type="textarea"
                placeholder="请输入"
                :autosize="{ minRows: 2, maxRows: 4 }"
                clearable
              />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-spin>

    <template #action>
      <n-space justify="end" :size="8">
        <n-button style="padding: 7px 29px; border-radius: 4px;" @click="handleCancel">
        <n-button style="padding: 7px 29px; border-radius: 4px;" :disabled="submitting" @click="handleCancel">
          取消
        </n-button>
        <n-button type="primary" style="padding: 7px 29px; border-radius: 4px;" @click="handleConfirm">
        <n-button type="primary" style="padding: 7px 29px; border-radius: 4px;" :loading="submitting" :disabled="submitting" @click="handleConfirm">
          确定
        </n-button>
      </n-space>