emms_web/src/views/erp/warehousearea/WarehouseAreaForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item :label="t('ErpStock.WarehouseArea.warehouseId')" prop="warehouseId">
        <el-select
          v-model="formData.warehouseId"
          :placeholder="t('ErpStock.WarehouseArea.placeholderWarehouseId')"
          class="!w-1/1"
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode">
        <el-row :gutter="10" class="!w-full">
          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
            <el-input v-model="formData.areaCode" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaCode')" :disabled="formData.isCode == true || formType === 'update'" />
          </el-col>
          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
            <div>
              <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName">
        <el-input v-model="formData.areaName" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaName')" />
      </el-form-item>
      <el-form-item :label="t('ErpStock.WarehouseArea.areaSize')" prop="areaSize">
        <el-input-number
          v-model="formData.areaSize"
          :placeholder="t('ErpStock.WarehouseArea.placeholderAreaSize')"
          :min="0"
          :precision="2"
          class="!w-1/1"
        />
      </el-form-item>
      <el-form-item :label="t('ErpStock.WarehouseArea.description')" prop="description">
        <el-input type="textarea" v-model="formData.description" :placeholder="t('ErpStock.WarehouseArea.placeholderDescription')" />
      </el-form-item>
      <el-form-item :label="t('ErpStock.WarehouseArea.status')" prop="status">
        <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/erp/stock/warehousearea'
import { WarehouseApi } from '@/api/erp/stock/warehouse'
import { CommonStatusEnum } from '@/utils/constants'

defineOptions({ name: 'WarehouseAreaForm' })

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
  id: undefined,
  warehouseId: undefined,
  areaCode: undefined,
  areaName: undefined,
  areaSize: undefined,
  description: undefined,
  status: undefined,
  isCode: true
})
const formRules = reactive({
  warehouseId: [{ required: true, message: t('ErpStock.WarehouseArea.validatorWarehouseIdRequired'), trigger: 'blur' }],
  areaName: [{ required: true, message: t('ErpStock.WarehouseArea.validatorAreaNameRequired'), trigger: 'blur' }],
  status: [{ required: true, message: t('ErpStock.WarehouseArea.validatorStatusRequired'), trigger: 'blur' }]
})
const formRef = ref()
const warehouseList = ref<any[]>([])

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await WarehouseAreaApi.getWarehouseArea(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open })

const emit = defineEmits(['success'])
const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = { ...formData.value } as unknown as WarehouseAreaVO
    if (data.isCode) {
      data.areaCode = undefined
    }
    if (formType.value === 'create') {
      await WarehouseAreaApi.createWarehouseArea(data)
      message.success(t('common.createSuccess'))
    } else {
      await WarehouseAreaApi.updateWarehouseArea(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetForm = () => {
  formData.value = {
    id: undefined,
    warehouseId: undefined,
    areaCode: undefined,
    areaName: undefined,
    areaSize: undefined,
    description: undefined,
    status: CommonStatusEnum.ENABLE,
    isCode: true
  }
  formRef.value?.resetFields()
}
</script>