emms_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-input
              v-model="formData.productName"
              readonly
              clearable
              :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderProduct')"
              @click="openProductSelectDialog"
              @clear="clearSelectedProduct"
            >
              <template #append>
                <el-button @click.stop="openProductSelectDialog">
                  <Icon icon="ep:search" />
                </el-button>
              </template>
            </el-input>
          </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>

  <Dialog :title="t('MoldManagement.MoldBrandFormPage.placeholderProduct')" v-model="productSelectVisible" width="960px">
    <el-form :model="productQueryParams" :inline="true" label-width="auto" @submit.prevent>
      <el-form-item :label="t('FactoryModeling.ProductInformation.searchCodeLabel')" prop="barCode">
        <el-input
          v-model="productQueryParams.barCode"
          :placeholder="t('FactoryModeling.ProductInformation.searchCodePlaceholder')"
          clearable
          class="!w-220px"
          @keyup.enter="handleProductQuery"
        />
      </el-form-item>
      <el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name">
        <el-input
          v-model="productQueryParams.name"
          :placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')"
          clearable
          class="!w-220px"
          @keyup.enter="handleProductQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleProductQuery">
          <Icon icon="ep:search" class="mr-5px" />
          {{ t('FactoryModeling.ProductInformation.searchButtonText') }}
        </el-button>
        <el-button @click="resetProductQuery">
          <Icon icon="ep:refresh" class="mr-5px" />
          {{ t('FactoryModeling.ProductInformation.resetButtonText') }}
        </el-button>
      </el-form-item>
    </el-form>
    <div class="product-select-dialog__body">
      <el-table
        v-loading="productLoading"
        :data="productList"
        :stripe="true"
        :show-overflow-tooltip="true"
        @row-click="handleProductRowClick"
      >
      <el-table-column width="52" align="center">
        <template #default="scope">
          <el-radio v-model="selectedProductId" :label="scope.row.id" @change="handleProductRowClick(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column
        :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')"
        align="center"
        prop="barCode"
        width="150"
        sortable
      />
      <el-table-column :label="t('FactoryModeling.ProductInformation.dialogCategoryTypeLabel')" align="center" prop="categoryType" sortable>
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE" :value="scope.row.categoryType" />
        </template>
      </el-table-column>
      <el-table-column :label="t('FactoryModeling.ProductInformation.tableNameColumn')" align="left" prop="name" width="220px" sortable />
      <el-table-column :label="t('FactoryModeling.ProductInformation.tableStandardColumn')" align="center" prop="standard" sortable />
      <el-table-column :label="t('FactoryModeling.ProductInformation.tableCategoryColumn')" align="center" prop="subCategoryName" sortable />
      <el-table-column :label="t('FactoryModeling.ProductInformation.tableUnitColumn')" align="center" prop="unitName" sortable />
      <el-table-column :label="t('FactoryModeling.ProductInformation.tableStatusColumn')" align="center" prop="status" sortable>
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('FactoryModeling.ProductInformation.tableCreateTimeColumn')"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
        sortable
      />
      </el-table>
      <div class="product-select-dialog__pagination">
        <Pagination
          :total="productTotal"
          v-model:page="productQueryParams.pageNo"
          v-model:limit="productQueryParams.pageSize"
          @pagination="getProductList"
        />
      </div>
    </div>
    <template #footer>
      <el-button @click="productSelectVisible = false">{{ t('common.cancel') }}</el-button>
      <el-button type="primary" @click="confirmProductSelect">{{ t('common.ok') }}</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 { dateFormatter } from '@/utils/formatTime'
import { useDictStoreWithOut } from '@/store/modules/dict'

defineOptions({ name: 'MoldBrandForm' })

const { t } = useI18n()
const message = useMessage()
const dictStore = useDictStoreWithOut()
const productList = ref<ProductVO[]>([])
const productLoading = ref(false)
const productSelectVisible = ref(false)
const productTotal = ref(0)
const selectedProductId = ref<number>()
const selectedProduct = ref<ProductVO | null>(null)
const productQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined as string | undefined,
  barCode: undefined as string | undefined,
  type: 1,
  categoryType: 1
})
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] : []).slice(0, 1)
  formData.value.productIds = ids
  formData.value.productId = ids[0]
  if (!ids.length) {
    formData.value.productName = ''
    return
  }
  const names = productList.value.filter((item) => ids.includes(item.id)).map((p) => p.name)
  if (names.length) {
    formData.value.productName = names.join(',')
  }
}

const getProductList = async () => {
  productLoading.value = true
  try {
    const data = await ProductApi.getProductPage(productQueryParams)
    productList.value = data?.list ?? []
    productTotal.value = data?.total ?? 0
  } finally {
    productLoading.value = false
  }
}

const openProductSelectDialog = async () => {
  productSelectVisible.value = true
  selectedProductId.value = Array.isArray(formData.value.productIds) ? formData.value.productIds[0] : undefined
  selectedProduct.value = null
  await getProductList()
}

const handleProductQuery = () => {
  productQueryParams.pageNo = 1
  getProductList()
}

const resetProductQuery = () => {
  productQueryParams.pageNo = 1
  productQueryParams.name = undefined
  productQueryParams.barCode = undefined
  getProductList()
}

const handleProductRowClick = (row: ProductVO) => {
  selectedProductId.value = row.id
  selectedProduct.value = row
}

const clearSelectedProduct = () => {
  formData.value.productId = undefined
  formData.value.productIds = []
  formData.value.productName = ''
  selectedProductId.value = undefined
  selectedProduct.value = null
  formRef.value?.validateField?.('productIds')
}

const confirmProductSelect = () => {
  const selected = selectedProduct.value?.id === selectedProductId.value
    ? selectedProduct.value
    : productList.value.find((item) => item.id === selectedProductId.value)
  if (!selected) {
    message.warning(t('MoldManagement.MoldBrandFormPage.validatorProductRequired'))
    return
  }
  formData.value.productId = selected.id
  formData.value.productIds = [selected.id]
  formData.value.productName = selected.name
  productSelectVisible.value = false
  formRef.value?.validateField?.('productIds')
}

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()
  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.slice(0, 1)
        : data?.productId
          ? [data.productId]
          : []
    }
    formData.value.productId = formData.value.productIds?.[0]
  } 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>

<style scoped>
.product-select-dialog__body {
  padding-bottom: 8px;
}

.product-select-dialog__pagination {
  display: flex;
  justify-content: flex-end;
  min-height: 48px;
  padding-top: 12px;
}
</style>