添加订单项次列表 文件导出

package.json

@@ -26,7 +26,8 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vxe-table": "^4.5.13",
-    "xe-utils": "^3.5.14"
+    "xe-utils": "^3.5.14",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/utils/export-excel.ts

+import * as XLSX from 'xlsx'
+import { saveAs } from 'file-saver'
+
+export function exportExcel(data: any[], filename?: string) {
+  const worksheet = XLSX.utils.json_to_sheet(data)
+
+  const workbook = XLSX.utils.book_new()
+
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
+
+  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
+
+  saveAs(blob, filename || '数据导出.xlsx')
+}

src/views/var/variables/Variables.vue

@@ -106,7 +106,7 @@
       </template>
     </vxe-modal>
 
-    <TemplateVariable v-model:visible="tempVisible" v-bind="detailVariable" />
+    <TemplateVariable v-model:visible="tempVisible" v-bind="detailVariable" @download="download" />
   </div>
 </template>
 
@@ -124,6 +124,7 @@ import TemplateVariable from './components/TemplateVariable.vue'
 import { filterRunData2 } from '@/utils/excel'
 import { uploadFile } from '@/api/excel'
 import { ElMessage } from 'element-plus'
+import { exportExcel } from '@/utils/export-excel'
 
 const loading = ref(false)
 const formState = reactive({
@@ -148,7 +149,9 @@ const detailVariable = ref({
   titles: [],
   data: []
 })
+const currentRow = ref()
 const handleShowVarRun = async (row: any) => {
+  currentRow.value = row
   const { data } = await apiOrderVarGetNewVars(row.orderItemId)
   const { res, titles } = filterRunData2(data.result || [], false)
 
@@ -212,6 +215,10 @@ const submitImport = async () => {
   }
 }
 
+const download = () => {
+  exportExcel(detailVariable.value.data, `${new Date().getTime()}_${currentRow.value.orderNo}.xlsx`)
+}
+
 const onReset = () => {
   formState.currentPage = 1
   formState.productCode = ''

src/views/var/variables/components/TemplateVariable.vue

@@ -11,6 +11,7 @@
     >
       <template #default>
         
+        <el-button type="primary" @click="download">导出</el-button>
   
         <vxe-table ref="xTable" border :data="data" size="small" height="400">
           <vxe-column v-for="column in titles" :key="item" :field="column" :title="column"></vxe-column>
@@ -47,7 +48,7 @@
         default: () => []
       }
     },
-    emits: ['update:visible'],
+    emits: ['update:visible', 'download'],
     setup(props, { emit }) {
       const showEdit = ref(false)
       const xTable = ref<VxeTableInstance>()
@@ -65,12 +66,17 @@
       const onHide = () => {
         emit('update:visible', false)
       }
+
+      const download = () => {
+        emit('download')
+      }
   
       return {
         showEdit,
         xTable,
         tableData,
         onHide,
+        download
       }
     }
   })