feat：检验模板-添加关联产品

src/locales/en.ts

@@ -2737,6 +2737,7 @@ export default {
       sampleMethod: 'Sampling Method',
       val: 'Value',
       item: 'Related Items',
+      product: 'Related Products',
       remark: 'Remark',
       createTime: 'Create Time',
       operate: 'Operate',
@@ -2750,6 +2751,8 @@ export default {
       placeholderSampleMethod: 'Please select sampling method',
       placeholderVal: 'Please input value',
       placeholderItem: 'Please select inspection items',
+      placeholderProduct: 'Please select related products',
+      selectProductDialogTitle: 'Select Related Products',
       placeholderRemark: 'Please input remark',
       placeholderCreateTimeStart: 'Start Date',
       placeholderCreateTimeEnd: 'End Date',

src/locales/zh-CN.ts

@@ -2245,6 +2245,7 @@ export default {
       sampleMethod: '抽检方式',
       val: '值',
       item: '关联项目',
+      product: '关联产品',
       remark: '备注',
       createTime: '创建时间',
       operate: '操作',
@@ -2258,6 +2259,8 @@ export default {
       placeholderSampleMethod: '请选择抽检方式',
       placeholderVal: '请输入值',
       placeholderItem: '请选择检验项目',
+      placeholderProduct: '请选择关联产品',
+      selectProductDialogTitle: '选择关联产品',
       placeholderRemark: '请输入备注',
       placeholderCreateTimeStart: '开始日期',
       placeholderCreateTimeEnd: '结束日期',

src/views/mes/zjschema/ZjSchemaForm.vue

@@ -49,20 +49,11 @@
         <el-input :model-value="displayItemNames" readonly clearable class="device-ledger-selection-input"
                   :placeholder="t('QualityManagement.ZjSchema.placeholderItem')"
                   @click="openCriticalComponentDialog"  @clear="clearBeijian" />
-        <!--   <el-row :gutter="8" class="w-full">
+      </el-form-item>
-         <el-col :span="22">
+      <el-form-item :label="t('QualityManagement.ZjSchema.product')" prop="product">
-             <el-input
+        <el-input :model-value="displayProductNames" readonly clearable class="device-ledger-selection-input"
-               :model-value="displayItemNames"
+                  :placeholder="t('QualityManagement.ZjSchema.placeholderProduct')"
-               :placeholder="t('QualityManagement.ZjSchema.placeholderItem')"
+                  @click="openProductDialog" @clear="clearProduct" />
-               readonly
-             />
-           </el-col>
-           <el-col :span="2" class="text-right">
-             <el-button type="primary" @click="openItemDialog">
-               {{ t('action.select') }}
-             </el-button>
-           </el-col>
-         </el-row>-->
       </el-form-item>
       <el-form-item :label="t('QualityManagement.ZjSchema.remark')" prop="remark">
         <el-input
@@ -230,11 +221,69 @@
       </el-button>
     </template>
   </el-dialog>
+  <el-dialog
+    v-model="productDialogVisible"
+    :title="t('QualityManagement.ZjSchema.selectProductDialogTitle')"
+    width="1300px"
+    draggable
+  >
+    <el-form class="-mb-15px" :model="productQueryParams" ref="productQueryFormRef" :inline="true" min-label-width="68px"
+             style="margin-bottom: 10px">
+      <el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name">
+        <el-input
+          v-model="productQueryParams.name"
+          :placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')"
+          clearable
+          @keyup.enter="handleProductQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleProductQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          {{ t('common.query') }}
+        </el-button>
+        <el-button @click="resetProductQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          {{ t('common.reset') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <ContentWrap>
+      <el-table ref="productTableRef" v-loading="productLoading" :data="productList" :stripe="true"
+                @selection-change="handleProductSelectionChange" @select="handleProductSelect" @select-all="handleProductSelectAll"
+                :show-overflow-tooltip="true" row-key="id">
+        <el-table-column type="selection" width="55" :reserve-selection="true" />
+        <el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode" sortable />
+        <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>
+      <Pagination :total="productTotal" v-model:page="productQueryParams.pageNo" v-model:limit="productQueryParams.pageSize"
+                  @pagination="getProductList" />
+    </ContentWrap>
+    <template #footer>
+      <el-button @click="productDialogVisible = false">
+        {{ t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="confirmSelectProducts">
+        {{ t('common.ok') }}
+      </el-button>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { getDictOptions } from '@/utils/dict'
+import { DICT_TYPE } from '@/utils/dict'
 import { ZjSchemaApi, ZjSchemaVO } from '@/api/mes/zjschema'
 import { ZjItemApi, ZjItemVO } from '@/api/mes/zjitem'
+import { ProductApi } from '@/api/erp/product/product'
 import {ref} from "vue";
 import {ElTable} from "element-plus";
 import {ZjTypeApi, ZjTypeVO} from "@/api/mes/zjtype";
@@ -266,6 +315,7 @@ const formData = ref({
   sampleMethod: undefined as string | undefined,
   val: undefined as string | undefined,
   item: undefined as string | undefined,
+  product: undefined as string | undefined,
 })
 const rateVal = ref<number | undefined>(undefined)
 const gapInterval = ref<number | undefined>(undefined)
@@ -534,6 +584,7 @@ const resetForm = () => {
     sampleMethod: undefined,
     val: undefined,
     item: undefined,
+    product: undefined,
   }
   rateVal.value = undefined
   gapInterval.value = undefined
@@ -543,6 +594,8 @@ const resetForm = () => {
    targetKeyword.value = ''
    sourceCheckedKeys.value = []
    targetCheckedKeys.value = []
+  productIds.value = []
+  productSelectedRows.value = []
   formRef.value?.resetFields()
 }
 
@@ -584,6 +637,118 @@ const initSelectedItems = async () => {
 
 
 const ids = ref([])
+
+const productDialogVisible = ref(false)
+const productLoading = ref(false)
+const productList = ref<any[]>([])
+const productTotal = ref(0)
+const productQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined as string | undefined,
+  categoryId: 2
+})
+const productQueryFormRef = ref()
+const productTableRef = ref<InstanceType<typeof ElTable>>()
+const productIds = ref<number[]>([])
+const productSelectedRows = ref<any[]>([])
+
+const displayProductNames = computed(() => {
+  if (!productIds.value.length) return ''
+  if (!productSelectedRows.value.length) {
+    return formData.value.product ? String(formData.value.product) : ''
+  }
+  const map = new Map(productSelectedRows.value.map((item) => [item.id, item.name]))
+  return productIds.value.map((id) => map.get(id)).filter(Boolean).join(',')
+})
+
+const openProductDialog = async () => {
+  productDialogVisible.value = true
+  const initIds = formData.value.product != undefined ? formData.value.product.toString().split(',') : []
+  productIds.value = initIds.map((id: string) => Number(id))
+  await getProductList()
+  nextTick(() => {
+    setProductDefaultSelections()
+  })
+}
+
+const getProductList = async () => {
+  productLoading.value = true
+  try {
+    const data = await ProductApi.getProductPage(productQueryParams)
+    productList.value = data.list
+    productTotal.value = data.total
+    nextTick(() => {
+      setProductDefaultSelections()
+    })
+  } finally {
+    productLoading.value = false
+  }
+}
+
+const setProductDefaultSelections = () => {
+  nextTick(() => {
+    if (!productTableRef.value) return
+    productTableRef.value.clearSelection()
+    productList.value.forEach((row) => {
+      if (productIds.value.includes(row.id)) {
+        productTableRef.value!.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+
+const handleProductSelectionChange = (rows: any[]) => {
+  const currentPageIds = rows.map((item) => item.id)
+  productSelectedRows.value = productSelectedRows.value.filter(
+    (item) => !currentPageIds.includes(item.id)
+  )
+  productSelectedRows.value.push(...rows)
+}
+
+const handleProductSelect = (selection: any[], row: any) => {
+  const isSelected = selection.includes(row)
+  if (isSelected) {
+    productIds.value.push(row.id)
+  } else {
+    productIds.value = productIds.value.filter((id) => id !== row.id)
+  }
+}
+
+const handleProductSelectAll = (selection: any[]) => {
+  const currentPageIds = productList.value.map((row) => row.id)
+  if (selection.length > 0) {
+    selection.forEach((row) => {
+      if (!productIds.value.includes(row.id)) {
+        productIds.value.push(row.id)
+      }
+    })
+  } else {
+    productIds.value = productIds.value.filter((id) => !currentPageIds.includes(id))
+  }
+}
+
+const confirmSelectProducts = () => {
+  formData.value.product = productIds.value.join(',')
+  productDialogVisible.value = false
+}
+
+const clearProduct = () => {
+  formData.value.product = ''
+  productIds.value = []
+  productSelectedRows.value = []
+}
+
+const handleProductQuery = () => {
+  productQueryParams.pageNo = 1
+  getProductList()
+}
+
+const resetProductQuery = () => {
+  productQueryFormRef.value.resetFields()
+  handleProductQuery()
+}
+
 const handleSelectionChange = (rows: ZjItemVO[]) => {
   selectedIds.value = rows.map((r) => r.id).filter((id): id is number => typeof id === 'number')
   // 获取当前页所有行的 id