优化产品选择

src/components/ProductModal/MultipleProductModal.vue

@@ -23,7 +23,16 @@
         </el-form-item>
       </el-form>
 
-      <vxe-table ref="xTable" border :data="tableData" :loading="loading" size="mini" height="400">
+      <vxe-table
+        ref="xTable"
+        border
+        :data="tableData"
+        :row-config="{ keyField: 'productCode' }"
+        :checkbox-config="{ reserve: true }"
+        :loading="loading"
+        size="mini"
+        height="400"
+      >
         <vxe-column type="checkbox" width="40"></vxe-column>
         <vxe-column field="productCode" title="产品编码" width="200"></vxe-column>
         <vxe-column field="productName" title="产品名称"></vxe-column>
@@ -49,7 +58,69 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
+// const dataSource = [
+//   {
+//     productCode: '123456',
+//     productName: '测试产品1',
+//     productCategoryId_dictText: '类型1'
+//   },
+//   {
+//     productCode: '789012',
+//     productName: '测试产品2',
+//     productCategoryId_dictText: '类型2'
+//   },
+//   {
+//     productCode: '789013',
+//     productName: '测试产品3',
+//     productCategoryId_dictText: '类型3'
+//   },
+//   {
+//     productCode: '789014',
+//     productName: '测试产品4',
+//     productCategoryId_dictText: '类型4'
+//   },
+//   {
+//     productCode: '789015',
+//     productName: '测试产品5',
+//     productCategoryId_dictText: '类型5'
+//   },
+//   {
+//     productCode: '789016',
+//     productName: '测试产品6',
+//     productCategoryId_dictText: '类型6'
+//   },
+//   {
+//     productCode: '789017',
+//     productName: '测试产品7',
+//     productCategoryId_dictText: '类型7'
+//   },
+//   {
+//     productCode: '789018',
+//     productName: '测试产品8',
+//     productCategoryId_dictText: '类型8'
+//   },
+//   {
+//     productCode: '789019',
+//     productName: '测试产品9',
+//     productCategoryId_dictText: '类型9'
+//   },
+//   {
+//     productCode: '7890141',
+//     productName: '测试产品41',
+//     productCategoryId_dictText: '类型41'
+//   },
+//   {
+//     productCode: '7890142',
+//     productName: '测试产品42',
+//     productCategoryId_dictText: '类型42'
+//   },
+//   {
+//     productCode: '7890143',
+//     productName: '测试产品43',
+//     productCategoryId_dictText: '类型43'
+//   }
+// ]
+import { defineComponent, ref, onMounted, reactive, watch, unref, nextTick } from 'vue'
 import { getProductList } from '@/api/product'
 import type { VxeTableInstance } from 'vxe-table'
 import { ElMessage } from 'element-plus'
@@ -61,6 +132,10 @@ export default defineComponent({
     visible: {
       type: Boolean,
       default: false
+    },
+    selectProd: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['confirm', 'update:visible'],
@@ -73,14 +148,18 @@ export default defineComponent({
       productName: '',
       productCode: '',
       currentPage: 1,
-      pageSize: 10,
-      total: 0
+      pageSize: 5,
+      total: 12
     })
 
     watch(
       () => props.visible,
       (val) => {
         showEdit.value = val
+        val &&
+          nextTick(() => {
+            xTable.value?.setCheckboxRow(props.selectProd, true)
+          })
       }
     )
 
@@ -93,6 +172,10 @@ export default defineComponent({
     const queryCustomer = async () => {
       loading.value = true
       try {
+        // tableData.value = dataSource.slice(
+        //   (formState.currentPage - 1) * 5,
+        //   formState.pageSize * formState.currentPage
+        // )
         const params = queryParamsFilter(unref(formState))
         const { data } = await getProductList(params)
         tableData.value = data.result.records
@@ -102,16 +185,20 @@ export default defineComponent({
     }
 
     const confirmModal = () => {
-      const list = xTable.value?.getCheckboxRecords()
+      const list = xTable.value?.getCheckboxRecords() || []
+      const reserveList = xTable.value?.getCheckboxReserveRecords() || []
+      const res = [...list, ...reserveList]
 
-      if (!list?.length) {
+      if (!res?.length) {
         return ElMessage.warning('请选择一条数据！')
       }
-      emit('confirm', list)
+      emit('confirm', res)
       emit('update:visible', false)
     }
 
     const onHide = () => {
+      xTable.value?.clearCheckboxReserve()
+      xTable.value?.clearCheckboxRow()
       emit('update:visible', false)
     }
 

src/views/var/varExcel/components/ChooseFile/ChooseFile.vue

@@ -70,7 +70,7 @@
   </div>
 
   <CustomerModal v-model:visible="visible" @confirm="confirmCustomer" />
-  <MultipleProductModal v-model:visible="prodVisible" @confirm="confirmProduct" />
+  <MultipleProductModal v-model:visible="prodVisible" :select-prod="selectProdList" @confirm="confirmProduct" />
 </template>
 
 <script lang="ts" setup>