feat：模具组-产品型号多选

src/views/erp/mold/MoldBrandForm.vue

@@ -22,8 +22,8 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.productName')" prop="productId">
+          <el-form-item :label="t('MoldManagement.MoldBrandFormPage.productName')" prop="productIds">
-            <el-select v-model="formData.productId" filterable clearable :placeholder="t('MoldManagement.MoldBrandFormPage.placeholderProduct')" class="w-1/1" @change="handleProductChange">
+            <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>
@@ -153,7 +153,7 @@ 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' }],
-  productId: [{ required: true, message: t('MoldManagement.MoldBrandFormPage.validatorProductRequired'), trigger: 'change' }],
+  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' }]
 })
@@ -181,10 +181,11 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
-const handleProductChange = (value?: number) => {
+const handleProductChange = (value?: number[] | number) => {
-  const current = productList.value.find((item) => item.id === value)
+  const ids = Array.isArray(value) ? value : value ? [value] : []
-  formData.value.productName = current?.name || ''
+  formData.value.productIds = ids
-  formData.value.productIds = value ? [value] : []
+  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) => {
@@ -220,16 +221,12 @@ const emit = defineEmits(['success'])
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
-  try {
+    try {
-    handleProductChange(formData.value.productId)
+    handleProductChange(formData.value.productIds)
     const payload: MoldBrandVO = {
       ...formData.value,
       version: addVersionPrefix(formData.value.version),
-      productIds: Array.isArray(formData.value.productIds)
+      productIds: Array.isArray(formData.value.productIds) ? formData.value.productIds : [],
-        ? formData.value.productIds
-        : formData.value.productId
-          ? [formData.value.productId]
-          : [],
       isEnable: Boolean(formData.value.isEnable)
     }
     if (formType.value === 'create') {

src/views/erp/mold/index.vue

@@ -22,8 +22,8 @@
               :value="Number(dict.value)" />
           </el-select>
         </el-form-item>
-        <el-form-item prop="productId">
+        <el-form-item prop="productIds">
-          <el-select v-model="queryParams.productId" :placeholder="t('MoldManagement.MoldBrandPage.placeholderProduct')"
+          <el-select v-model="queryParams.productIds" multiple :placeholder="t('MoldManagement.MoldBrandPage.placeholderProduct')"
             clearable filterable class="!w-180px">
             <el-option v-for="product in productOptions" :key="product.id" :label="product.name" :value="product.id" />
           </el-select>
@@ -185,7 +185,7 @@ const queryParams = reactive({
   keyword: undefined as string | undefined,
   code: undefined as string | undefined,
   name: undefined as string | undefined,
-  productId: undefined as number | undefined,
+  productIds: [] as number[],
   productName: undefined as string | undefined,
   status: undefined as number | undefined,
   currentDevice: undefined as string | undefined,
@@ -244,8 +244,8 @@ const getList = async () => {
   loading.value = true
   try {
     parseKeyword()
-    const product = productOptions.value.find((item) => item.id === queryParams.productId)
+    const selected = productOptions.value.filter((item) => (queryParams.productIds || []).includes(item.id))
-    queryParams.productName = product?.name
+    queryParams.productName = selected.map((p) => p.name).join(',')
     const data = await MoldBrandApi.getMoldBrandPage({
       ...queryParams,
       currentDevice: queryParams.currentDevice
@@ -265,6 +265,8 @@ const resetQuery = () => {
   queryFormRef.value?.resetFields()
   currentStatusKey.value = 'all'
   queryParams.status = undefined
+  queryParams.productIds = []
+  queryParams.productName = undefined
   handleQuery()
 }