导出excel功能

package.json

@@ -31,7 +31,8 @@
     "qs": "^6.10.1",
     "vite-plugin-svgicon": "^1.0.0",
     "vue": "^3.2.6",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "xlsx": "^0.17.2"
   },
   "devDependencies": {
     "@types/exceljs": "^1.3.0",

src/hooks/useExportFile.ts → src/hooks/useExportDocx.ts

@@ -64,11 +64,12 @@ function createLink(key: string, items: any[]) {
   })
 }
 
+function arrayToString(e: unknown) {
+  if (Array.isArray(e)) return e.join(',')
+  return e
+}
+
 async function createDocument(data: any[], labelKey: string) {
-  function arrayToString(e: unknown) {
-    if (Array.isArray(e)) return e.join(',')
-    return e
-  }
   return new Document({
     sections: await Promise.all(
       data.map(async (item) => {

src/hooks/useExportXlsx.ts

+import XLSX from 'xlsx'
+/**
+ * 导出文件为excel
+ * @param data 数组
+ * @param defaultFileName 默认导出名字（可选）
+ */
+export default async function useExportXlsx(
+  data: any[],
+  defaultFileName: string = '导出',
+) {
+  const head = Object.keys(data[0])
+  const content = data.map((e: any) => Object.values(e))
+  content.unshift(head)
+
+  const wb = XLSX.utils.book_new()
+  const ws = XLSX.utils.aoa_to_sheet(content)
+  XLSX.utils.book_append_sheet(wb, ws, 'sheet1')
+  XLSX.writeFile(wb, `${defaultFileName}.xlsx`)
+}

src/view/components/filter-drawer.vue

@@ -178,7 +178,7 @@ import {
   useFetchCommunity,
   useFetchBuilding,
 } from '@/hooks/useFetch'
-import useExportFile from '@/hooks/useExportFile'
+import useExportXlsx from '@/hooks/useExportXlsx'
 import BuildingDrawer from './building-drawer.vue'
 import dayjs from '@/util/dayjs'
 import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
@@ -321,8 +321,31 @@ const getDetail = async (type: string, name: string) => {
 }
 
 const handleExport = async (type: string, key: string, name: string) => {
-  const data = (await getDetail(type, key))?.map((item: any) => item.extra)
-  useExportFile(data, type === 'organization' ? '党组织名称' : '姓名', name)
+  let data = (await getDetail(type, key))?.map((item: any) => item.extra)
+  if (type === 'member') {
+    data = data.map((item: any) => ({
+      姓名: item['姓名'] || '无',
+      性别: item['性别'] || '无',
+      学历: item['学历'] || '无',
+      民族: item['民族'] || '无',
+      人户情况: item['人户情况'] || '无',
+      党员类型: item['党员类型'] || '无',
+      党员身份: item['党员身份'] || '无',
+      出生日期: item['出生日期'] || '无',
+      所属社区: item['所属社区'] || '无',
+      所属居委: item['所属居委'] || '无',
+      所属小区: item['所属小区'] || '无',
+      所属楼宇: item['所属楼宇'] || '无',
+      所属房间: item['所属房间'] || '无',
+      身份证号码: item['身份证号码'] || '无',
+      党组织编号: item['党组织编号'] || '无',
+      所属党组织名称: item['所属党组织名称'] || '无',
+      加入中共党组织日期: item['加入中共党组织日期'] || '无',
+      是否居住在花木街道: item['是否居住在花木街道'] ? '是' : '否',
+    }))
+  }
+
+  useExportXlsx(data, name)
 }
 
 watch(

src/view/components/nav-bar.vue

@@ -379,6 +379,7 @@ const toPage = (id?: string) => {
             &:hover
               color $red
         &.child
+          margin-top .1rem
           p
             margin .05rem 0
 </style>

src/view/components/new-activity-drawer.vue

@@ -311,7 +311,7 @@ import { activity } from '@/util/tags'
 import { useFetchOrg, usePostActivity, usePutActivity } from '@/hooks/useFetch'
 import dayjs from '@/util/dayjs'
 import useAliOss from '@/hooks/useAliOss'
-import useExportFile from '@/hooks/useExportFile'
+import useExportDocx from '@/hooks/useExportDocx'
 
 const message = useMessage()
 const props = defineProps({
@@ -824,7 +824,7 @@ const handleExport = async () => {
     data[2]['台账记录照片'] = detailAttachmentPhoto
   }
 
-  await useExportFile(
+  await useExportDocx(
     [
       {
         _title: '基本信息',

src/view/components/struct-modal.vue

@@ -386,7 +386,7 @@ import exportIcon from '@images/export.svg'
 import { CloseOutline } from '@vicons/ionicons5'
 import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import { organization } from '@/util/tags'
-import useExportFile from '@/hooks/useExportFile'
+import useExportXlsx from '@/hooks/useExportXlsx'
 
 const code = computed(() => store.state.auth.code)
 
@@ -695,7 +695,27 @@ const pagination = {
 }
 
 const exportList = () => {
-  useExportFile(tableList.value, '姓名', `${curMenu.value.label}党员详表`)
+  const data = tableList.value.map((item: any) => ({
+    姓名: item['姓名'] || '无',
+    性别: item['性别'] || '无',
+    学历: item['学历'] || '无',
+    民族: item['民族'] || '无',
+    人户情况: item['人户情况'] || '无',
+    党员类型: item['党员类型'] || '无',
+    党员身份: item['党员身份'] || '无',
+    出生日期: item['出生日期'] || '无',
+    所属社区: item['所属社区'] || '无',
+    所属居委: item['所属居委'] || '无',
+    所属小区: item['所属小区'] || '无',
+    所属楼宇: item['所属楼宇'] || '无',
+    所属房间: item['所属房间'] || '无',
+    身份证号码: item['身份证号码'] || '无',
+    党组织编号: item['党组织编号'] || '无',
+    所属党组织名称: item['所属党组织名称'] || '无',
+    加入中共党组织日期: item['加入中共党组织日期'] || '无',
+    是否居住在花木街道: item['是否居住在花木街道'] ? '是' : '否',
+  }))
+  useExportXlsx(data, `${curMenu.value.label}党员详表`)
 }
 
 async function setInstitution() {