besure_web/src/views/erp/mold/MoldBrandForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="720px">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.code')" prop="code">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="18">
                <el-input v-model="formData.code" :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderCode')" :disabled="Boolean(formData.isCode) || formType === 'update'" />
              </el-col>
              <el-col :span="6">
                <div>
                  <el-switch v-model="formData.isCode" :disabled="formType === 'update'" @change="handleCodeAutoChange" />
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.name')" prop="name">
            <el-input v-model="formData.name" :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.productName')" prop="productIds">
            <el-select v-model="formData.productIds" multiple filterable clearable :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderProduct')" class="w-1/1" @change="handleProductChange">
              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.status')" prop="status">
            <el-select v-model="formData.status" :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderStatus')" class="w-1/1">
              <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.moldSize')" prop="moldSize">
            <el-input-number v-model="formData.moldSize" :min="1" :precision="0" class="w-1/1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.useTime')" prop="useTime">
            <el-input-number v-model="formData.useTime" :min="0" class="w-1/1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.images')" prop="images">
            <UploadImg v-model="formData.images" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.remark')" prop="remark">
            <el-input v-model="formData.remark" type="textarea" :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderRemark')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.isEnable')" prop="isEnable">
            <el-radio-group v-model="formData.isEnable">
              <el-radio :label="true">{{ t('MoldManagement.MoldBrandFormPage.enable') }}</el-radio>
              <el-radio :label="false">{{ t('MoldManagement.MoldBrandFormPage.disable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :disabled="formLoading" @click="submitForm">{{ t('MoldManagement.MoldBrandFormPage.save') }}</el-button>
      <el-button @click="dialogVisible = false">{{ t('MoldManagement.MoldBrandFormPage.close') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { MoldBrandApi, type MoldBrandVO } from '@/api/erp/mold'
import { ProductApi, type ProductVO } from '@/api/erp/product/product'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useDictStoreWithOut } from '@/store/modules/dict'

defineOptions({ name: 'MoldBrandForm' })

const { t } = useI18n()
const message = useMessage()
const dictStore = useDictStoreWithOut()
const productList = ref<ProductVO[]>([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formRef = ref()
const statusOptions = computed(() => getIntDictOptions(DICT_TYPE.ERP_MOLD_STATUS))
const formData = ref<MoldBrandVO>({
  id: undefined as unknown as number,
  code: '',
  name: '',
  moldType: '',
  productId: undefined,
  productName: '',
  productIds: [],
  images: '',
  status: 0,
  useTime: 0,
  maintainType: undefined,
  maintainTime: undefined,
  moldSize: 1,
  remark: '',
  isEnable: true,
  isCode: true
})

const validateCode = (_rule: any, value: any, callback: any) => {
  if (Boolean(formData.value.isCode)) {
    callback()
    return
  }
  if (value === undefined || value === null || String(value).trim() === '') {
    callback(new Error(t('MoldManagement.MoldBrandFormPage.validatorCodeRequired')))
    return
  }
  callback()
}

const handleCodeAutoChange = (value: boolean) => {
  if (value) {
    formData.value.code = ''
  }
  formRef.value?.clearValidate('code')
}

const formRules = reactive({
  code: [{ validator: validateCode, trigger: 'blur' }],
  name: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorNameRequired'), trigger: 'blur' }],
  moldType: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorNameRequired'), trigger: 'blur' }],
  productIds: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorProductRequired'), trigger: 'change' }],
  moldSize: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorMoldSizeRequired'), trigger: 'blur' }],
  isEnable: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorIsEnableRequired'), trigger: 'change' }]
})

const resetForm = () => {
  formData.value = {
    id: undefined as unknown as number,
    code: '',
    name: '',
    moldType: '',
    productId: undefined,
    productName: '',
    productIds: [],
    images: '',
    status: 1,
    useTime: 0,
    maintainType: undefined,
    maintainTime: undefined,
    moldSize: 1,
    remark: '',
    isEnable: true,
    isCode: true
  }
  formRef.value?.resetFields()
}

const handleProductChange = (value?: number[] | number) => {
  const ids = Array.isArray(value) ? value : value ? [value] : []
  formData.value.productIds = ids
  const names = productList.value.filter((item) => ids.includes(item.id)).map((p) => p.name)
  formData.value.productName = names.join(',')
}

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? t('MoldManagement.MoldBrandFormPage.createTitle') : t('MoldManagement.MoldBrandFormPage.updateTitle')
  formType.value = type
  resetForm()
  await dictStore.setDictMap()
  productList.value = await ProductApi.getMesProductSimpleList({ categoryType: 1 })
  if (!id) return
  formLoading.value = true
  try {
    const data = await MoldBrandApi.getMoldBrand(id)
    formData.value = {
      ...formData.value,
      ...data,
      isCode: (data as any)?.isCode ?? false,
      productIds: Array.isArray(data?.productIds)
        ? data.productIds
        : data?.productId
          ? [data.productId]
          : []
    }
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open })

const emit = defineEmits(['success'])

const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
    try {
    handleProductChange(formData.value.productIds)
    const payload: MoldBrandVO = {
      ...formData.value,
      productIds: Array.isArray(formData.value.productIds) ? formData.value.productIds : [],
      isEnable: Boolean(formData.value.isEnable)
    }
    if (formType.value === 'create') {
      await MoldBrandApi.createMoldBrand(payload)
      message.success(t('MoldManagement.MoldBrandFormPage.createSuccess'))
    } else {
      await MoldBrandApi.updateMoldBrand(payload)
      message.success(t('MoldManagement.MoldBrandFormPage.updateSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>