feat：模具组-新增/编辑-产品型号改成弹框形式

src/views/erp/mold/MoldBrandForm.vue

@@ -23,9 +23,20 @@
         </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-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">
@@ -70,12 +81,102 @@
       <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' })
@@ -84,6 +185,19 @@ 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)
@@ -160,10 +274,76 @@ const resetForm = () => {
 }
 
 const handleProductChange = (value?: number[] | number) => {
-  const ids = Array.isArray(value) ? value : value ? [value] : []
+  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)
-  formData.value.productName = names.join(',')
+  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) => {
@@ -172,7 +352,6 @@ const open = async (type: string, id?: number) => {
   formType.value = type
   resetForm()
   await dictStore.setDictMap()
-  productList.value = await ProductApi.getMesProductSimpleList({ categoryType: 1 })
   if (!id) return
   formLoading.value = true
   try {
@@ -182,11 +361,12 @@ const open = async (type: string, id?: number) => {
       ...data,
       isCode: (data as any)?.isCode ?? false,
       productIds: Array.isArray(data?.productIds)
-        ? data.productIds
+        ? data.productIds.slice(0, 1)
         : data?.productId
           ? [data.productId]
           : []
     }
+    formData.value.productId = formData.value.productIds?.[0]
   } finally {
     formLoading.value = false
   }
@@ -219,3 +399,16 @@ const submitForm = async () => {
   }
 }
 </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>