多选产品

src/components/ProductModal/MultipleProductModal.vue

+<template>
+  <vxe-modal
+    v-model="showEdit"
+    :z-index="1006"
+    @hide="onHide"
+    title="产品选择"
+    width="800"
+    esc-closable
+    mask-closable
+    show-footer
+  >
+    <template #default>
+      <el-form :model="formState" size="small" inline>
+        <el-form-item label="产品名称">
+          <el-input v-model="formState.productName" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="产品编码">
+          <el-input v-model="formState.productCode" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetForm">重置</el-button>
+          <el-button @click="queryCustomer" type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
+
+      <vxe-table ref="xTable" border :data="tableData" :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>
+        <vxe-column field="productCategoryId_dictText" title="产品类型" width="200"></vxe-column>
+      </vxe-table>
+
+      <vxe-pager
+        size="small"
+        background
+        v-model:current-page="formState.currentPage"
+        v-model:page-size="formState.pageSize"
+        :total="formState.total"
+        @page-change="queryCustomer"
+        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
+      >
+      </vxe-pager>
+    </template>
+
+    <template #footer>
+      <el-button type="primary" @click="confirmModal">确认</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, reactive, watch, unref } from 'vue'
+import { getProductList } from '@/api/product'
+import type { VxeTableInstance } from 'vxe-table'
+import { ElMessage } from 'element-plus'
+import { queryParamsFilter } from '@/utils/query'
+
+export default defineComponent({
+  name: 'ProductModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['confirm', 'update:visible'],
+  setup(props, { emit }) {
+    const loading = ref(false)
+    const showEdit = ref(false)
+    const xTable = ref<VxeTableInstance>()
+    const tableData = ref([])
+    const formState = reactive({
+      productName: '',
+      productCode: '',
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    })
+
+    watch(
+      () => props.visible,
+      (val) => {
+        showEdit.value = val
+      }
+    )
+
+    const resetForm = () => {
+      Object.assign(formState, {
+        productName: '',
+        productCode: ''
+      })
+    }
+    const queryCustomer = async () => {
+      loading.value = true
+      try {
+        const params = queryParamsFilter(unref(formState))
+        const { data } = await getProductList(params)
+        tableData.value = data.result.records
+        formState.total = +data.result.total
+      } catch {}
+      loading.value = false
+    }
+
+    const confirmModal = () => {
+      const list = xTable.value?.getCheckboxRecords()
+
+      if (!list?.length) {
+        return ElMessage.warning('请选择一条数据！')
+      }
+      emit('confirm', list)
+      emit('update:visible', false)
+    }
+
+    const onHide = () => {
+      emit('update:visible', false)
+    }
+
+    onMounted(() => {
+      queryCustomer()
+    })
+    return {
+      showEdit,
+      xTable,
+      formState,
+      loading,
+      tableData,
+      resetForm,
+      onHide,
+      confirmModal,
+      queryCustomer
+    }
+  }
+})
+</script>
+<style lang="scss" scoped></style>

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

 <template>
   <div class="container m-auto pt-10">
-
     <el-form ref="formRef" :model="formState" label-width="100px">
       <el-form-item label="客户：">
         <el-input v-model="formState.customerName" disabled>
@@ -10,11 +9,24 @@
         </el-input>
       </el-form-item>
       <el-form-item label="产品：">
-        <el-input v-model="formState.productName" disabled>
+        <!-- <el-input v-model="formState.productName" disabled>
           <template #append>
             <el-button :icon="MoreFilled" @click="prodVisible = true" />
           </template>
-        </el-input>
+        </el-input> -->
+        <el-tag
+          class="mr-1"
+          v-for="prod in selectProdList"
+          :key="prod.productCode"
+          closable
+          size="large"
+          :disable-transitions="false"
+          @close="handleCloseTag(prod)"
+        >
+          {{ prod.productName }}
+        </el-tag>
+
+        <el-button type="primary" @click="prodVisible = true">选择产品</el-button>
       </el-form-item>
 
       <el-form-item label="选择文件：">
@@ -45,8 +57,9 @@
             </template>
           </el-table-column>
         </el-table>
-        <p class='text-red-600 text-sm mt-2'>tip：必须通过产品编码进行过滤.如果没有，则需要手动添加一列编码;否则不会进行数据过滤</p>
-
+        <p class="text-red-600 text-sm mt-2">
+          tip：必须通过产品编码进行过滤.如果没有，则需要手动添加一列编码;否则不会进行数据过滤
+        </p>
       </el-form-item>
 
       <el-form-item>
@@ -57,7 +70,7 @@
   </div>
 
   <CustomerModal v-model:visible="visible" @confirm="confirmCustomer" />
-  <ProductModal v-model:visible="prodVisible" @confirm="confirmProduct" />
+  <MultipleProductModal v-model:visible="prodVisible" @confirm="confirmProduct" />
 </template>
 
 <script lang="ts" setup>
@@ -69,11 +82,10 @@ import { useCommentExcel } from '@/stores/commentExcel'
 
 import { MoreFilled } from '@element-plus/icons-vue'
 import CustomerModal from '@/components/CustomerModal/CustomerModal.vue'
-import ProductModal from '@/components/ProductModal/ProductModal.vue'
+import MultipleProductModal from '@/components/ProductModal/MultipleProductModal.vue'
 import { apiSaveUpload } from '@/api/varExcel'
 import { uploadFile } from '@/api/excel'
 
-
 const visible = ref(false)
 const prodVisible = ref(false)
 const formRef = ref()
@@ -82,9 +94,10 @@ const formState = reactive({
   customerName: '',
   customerId: '',
   productName: '',
-  productCode: '',
+  productCode: ''
 })
 const emit = defineEmits(['upload'])
+const selectProdList = ref([])
 
 const removeFile = (i: number) => tableData.value.splice(i, 1)
 
@@ -105,11 +118,12 @@ const changeUpload = (file: any) => {
   })
 }
 const confirmProduct = (list: any) => {
-  const [item] = list
-  if (!item) return
-
-  formState.productCode = item.productCode
-  formState.productName = item.productName
+  selectProdList.value = list
+}
+const handleCloseTag = (prod) => {
+  selectProdList.value = selectProdList.value.filter(
+    (item) => item.productCode !== prod.productCode
+  )
 }
 
 const confirmCustomer = (list: any) => {
@@ -129,8 +143,9 @@ const submitForm = async () => {
   const params = {
     filePaths: tableData.value.map((item) => item.url),
     customerId: formState.customerId,
-    productCode: formState.productCode
+    productCode: selectProdList.value.map((v) => v.productCode).join(',')
   }
+
   apiSaveUpload(params).then(({ data }) => {
     // const { setFileInfo } = useCommentExcel()
     // setFileInfo(data.result)