export docx file in tag filter

package.json

@@ -18,7 +18,9 @@
     "axios": "^0.21.1",
     "countup.js": "^2.0.8",
     "dayjs": "^1.10.6",
+    "docx": "^6.0.3",
     "echarts": "^5.1.2",
+    "file-saver": "^2.0.5",
     "normalize.css": "^8.0.1",
     "qs": "^6.10.1",
     "vite-plugin-svgicon": "^1.0.0",
@@ -26,6 +28,7 @@
     "vuex": "^4.0.0"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.3",
     "@types/node": "^16.3.2",
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^4.28.1",

src/hooks/useExportFile.ts

+import { saveAs } from 'file-saver'
+import { Packer, Document, Paragraph, HeadingLevel, TextRun } from 'docx'
+
+function createHeading(text: string): Paragraph {
+  return new Paragraph({
+    text: text,
+    heading: HeadingLevel.HEADING_1,
+    thematicBreak: true,
+  })
+}
+
+function createText(text: string): Paragraph {
+  return new Paragraph({
+    children: [
+      new TextRun({
+        text,
+      }),
+    ],
+  })
+}
+
+function createDocument(data: any[], labelKey: string) {
+  function arrayToString(e: unknown) {
+    if (Array.isArray(e)) return e.join(',')
+    return e
+  }
+  return new Document({
+    sections: data.map((item) => {
+      const keys = Object.keys(item)
+      return {
+        children: [
+          createHeading(item[labelKey]),
+          ...keys.map((key) =>
+            createText(`${key}：${arrayToString(item[key])}`),
+          ),
+        ],
+      }
+    }),
+  })
+}
+
+/**
+ * 导出文件为docx
+ * @param data 数组
+ * @param labelKey 每个section的title取值
+ * @param defaultFileName 默认导出名字（可选）
+ */
+export default function useExportFile(
+  data: any[],
+  labelKey: string,
+  defaultFileName: string = '导出',
+) {
+  const doc = createDocument(data, labelKey)
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `${defaultFileName}.docx`)
+  })
+}

src/view/components/basic-info.vue

@@ -320,16 +320,21 @@ onMounted(() => {
 
 const curTagKey = ref<string | null>(null)
 const tagList = [
-  { name: '机关事业单位党组织', key: '机关事业单位党组织' },
-  { name: '居民区党组织', key: '居民区党组织' },
-  { name: '“两新”党组织', key: '“两新”党组织' },
+  { name: '机关事业单位党组织', key: '机关事业单位' },
+  { name: '居民区党组织', key: '居民区' },
+  { name: '“两新”党组织', key: '两新' },
 ]
-const clickTag = (key: string) => {
+const clickTag = async (key: string) => {
   if (key === curTagKey.value) {
     curTagKey.value = null
+    // TODO 删除地图撒点
     return
   }
   curTagKey.value = key
+  const res = await useFetchOrg({
+    q: `paths @ "类别" && string == "${key}"`,
+  })
+  console.log(`类别-${key}-撒点：`, res)
   // TODO 地图撒点
 }
 </script>

src/view/components/filter-drawer.vue

@@ -36,7 +36,11 @@
                 <n-checkbox v-model:checked="item.checked" size="small">{{
                   item.name
                 }}</n-checkbox>
-                <div v-show="item.checked" class="export">
+                <div
+                  v-show="item.checked"
+                  class="export"
+                  @click.prevent="handleExport('organization', item.name)"
+                >
                   导出详表
                   <n-icon size=".1rem">
                     <svg-icon :data="exportIcon" original />
@@ -51,7 +55,11 @@
                 <n-checkbox v-model:checked="item.checked" size="small">{{
                   item.name
                 }}</n-checkbox>
-                <div v-show="item.checked" class="export">
+                <div
+                  v-show="item.checked"
+                  class="export"
+                  @click.prevent="handleExport('member', item.name)"
+                >
                   导出详表
                   <n-icon size=".1rem">
                     <svg-icon :data="exportIcon" original />
@@ -151,41 +159,49 @@
 
 <script lang="ts" setup>
 import store from '@/store'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
+import useExportFile from '@/hooks/useExportFile'
 import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
+
 const show = computed(() => store.state.showFilterDrawer)
 const close = () => store.commit('SET_FILTER_DRAWER', false)
 
 const curTab = ref('tag')
 
-const organization = ref([
-  { name: '荣获区级奖项党组织', key: '荣获区级奖项党组织', checked: false },
-  {
-    name: '荣获市级及以上奖项党组织',
-    key: '荣获市级及以上奖项党组织',
+const organization = ref<{ name: string; checked: boolean }[]>([])
+const getOrgTags = async () => {
+  const res = (
+    await useFetchOrg({
+      a: 'id,count',
+      keys: '标签',
+    })
+  )?.filter((e: any) => !!e['标签'])
+  organization.value = res.map((item: any) => ({
+    name: item['标签'],
     checked: false,
-  },
-  { name: '某党组织标签', key: '某党组织标签', checked: false },
-  { name: '某党组织标签', key: '某党组织标签', checked: false },
-  { name: '某党组织标签', key: '某党组织标签', checked: false },
-])
-const member = ref([
-  { name: '荣获区级奖项党员', key: '荣获区级奖项党员', checked: false },
-  {
-    name: '荣获市级及以上奖项党员',
-    key: '荣获市级及以上奖项党员',
-    checked: false,
-  },
-  {
-    name: '光荣在党50年',
-    key: '光荣在党50年',
+  }))
+}
+
+const member = ref<{ name: string; checked: boolean }[]>([])
+const getMemberTags = async () => {
+  const res = (
+    await useFetchMember({
+      a: 'id,count',
+      keys: '标签',
+    })
+  )?.filter((e: any) => !!e['标签'])
+  const tags: string[] = []
+  res.forEach((item: any) => {
+    tags.push(...item['标签'])
+  })
+  member.value = Array.from(new Set(tags)).map((tag: string) => ({
+    name: tag,
     checked: false,
-  },
-  { name: '党心暖我心', key: '党心暖我心', checked: false },
-  { name: '某党员标签', key: '某党员标签', checked: false },
-])
+  }))
+}
 
 const list1 = [
   '牡丹社区',
@@ -212,6 +228,65 @@ const list3 = [
   '某某小区6',
 ]
 
+onMounted(() => {
+  getOrgTags()
+  getMemberTags()
+})
+
+const getDetail = async (type: string, name: string) => {
+  let res = null
+  switch (type) {
+    case 'organization':
+      res = await useFetchOrg({
+        q: `paths @ "标签" && string == "${name}"`,
+      })
+      break
+    case 'member':
+      res = await useFetchMember({
+        q: `paths @ "标签" && string == "${name}"`,
+      })
+      break
+    default:
+      break
+  }
+  return res
+}
+
+const handleExport = async (type: string, name: string) => {
+  const res = await getDetail(type, name)
+  const data = res.map((item: any) => item.extra)
+  useExportFile(data, type === 'organization' ? '党组织名称' : '姓名', name)
+}
+
+watch(
+  () => organization.value,
+  async (data) => {
+    const names = data.filter((e) => e.checked).map((e) => e.name)
+    const pointData: any[] = []
+    const result = await Promise.all(
+      names.map((name) => getDetail('organization', name)),
+    )
+    result.forEach((item: any[]) => pointData.push(...item))
+    console.log('organization撒点数据：', pointData)
+    // TODO 撒点
+  },
+  { deep: true },
+)
+watch(
+  () => member.value,
+  async (data) => {
+    const names = data.filter((e) => e.checked).map((e) => e.name)
+    const pointData: any[] = []
+    const result = await Promise.all(
+      names.map((name) => getDetail('member', name)),
+    )
+    result.forEach((item: any[]) => pointData.push(...item))
+    console.log('member撒点数据：', pointData)
+    // TODO 撒点
+  },
+  { deep: true },
+)
+
 const curGeo = ref('社区')
 const curArea = ref<string | null>(null)
 const curCommittee = ref<string | null>(null)