上传功能完成

src/App.vue

@@ -69,6 +69,10 @@ const themeOverrides: GlobalThemeOverrides = {
   Card: {
     borderRadius: '.06rem',
   },
+  Upload: {
+    itemTextColorSuccess: '#3D7FE9',
+    itemTextColorError: '#E59B00',
+  },
   Tag: {
     borderRadius: '.04rem',
     colorPrimary: '#FCF4F5',

src/ajax/api.ts

@@ -10,12 +10,13 @@ const getCookie = (name: string): string | null => {
 
 switch (process.env.NODE_ENV) {
   case 'production':
-    BASE_URL = 'https://survey.maicedata.com/api/data/'
+    BASE_URL = 'https://www.maicedata.com/collector/data/' // 生产环境
     TOKEN = LZString.decompressFromEncodedURIComponent(
       getCookie('__DM_TOKEN__') || window.localStorage.getItem('dm_token_'),
     )
     break
   default:
+    // vite.config 代理 https://survey.maicedata.com/api/data/
     BASE_URL = '/api'
     TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
 }
@@ -35,5 +36,7 @@ export default {
   ATTACHMENT: '988fc63e-fa55-4729-851d-24c4355213f2',
   TAG: '54344e11-c0d3-40d5-8f99-771066249328',
   GET_AUTH: '988fc63e-fa55-4729-851d-24c4355213f2/storage/grant',
-  GET_USER_ID: '/auth/user/bytoken',
+  GET_USER_ID: 'https://www.maicedata.com/auth/user/bytoken',
+  USER: '3625616b-7f2c-449a-8306-101aac7b8b97',
+  ORG: 'b47ddc9a-0aa7-45a8-b1b6-6064f888d537',
 }

src/hooks/useAliOss.ts

@@ -6,7 +6,7 @@ import { api } from '@/ajax'
 export default async function useAliOss(file: any) {
   const auth = (await useFetchAuth())?.token
   const client = new OSS({
-    region: auth.region,
+    region: 'oss-' + auth.region,
     accessKeyId: auth.access_key_id,
     accessKeySecret: auth.access_key_secret,
     bucket: auth.bucket,
@@ -19,7 +19,7 @@ export default async function useAliOss(file: any) {
     fr.readAsArrayBuffer(file)
     fr.onload = async (e) => {
       const buffer = new OSS.Buffer(e.target && e.target.result)
-      const key = `collector/${api.ACTIVITY}/huamu_${md5(buffer)}_${filename}`
+      const key = `collector/${api.ATTACHMENT}/huamu_${md5(buffer)}_${filename}`
       const res = await client.put(key, buffer)
       resolve(res.url)
     }

src/hooks/useExportFile.ts

@@ -6,6 +6,7 @@ import {
   HeadingLevel,
   TextRun,
   ImageRun,
+  ExternalHyperlink,
 } from 'docx'
 
 function createHeading(text: string): Paragraph {
@@ -26,9 +27,9 @@ function createText(text: string): Paragraph {
   })
 }
 
-async function createImage(key: string, urls: string[]) {
+async function createImage(key: string, items: any[]) {
   const blobs = await Promise.all(
-    urls.map(async (url) => await fetch(url).then((r: any) => r.blob())),
+    items.map(async (item) => await fetch(item.url).then((r: any) => r.blob())),
   )
   return new Paragraph({
     children: [
@@ -46,6 +47,22 @@ async function createImage(key: string, urls: string[]) {
     ],
   })
 }
+function createLink(key: string, items: any[]) {
+  return new Paragraph({
+    children: [
+      new TextRun({ text: `${key}：` }),
+      ...items.map(
+        (item: any) =>
+          new ExternalHyperlink({
+            link: item.url,
+            child: new TextRun({
+              text: decodeURIComponent(item.url.split('_').pop() || '未命名'),
+            }),
+          }),
+      ),
+    ],
+  })
+}
 
 async function createDocument(data: any[], labelKey: string) {
   function arrayToString(e: unknown) {
@@ -65,6 +82,7 @@ async function createDocument(data: any[], labelKey: string) {
                 if (key.startsWith('_')) return createText('')
                 if (key.includes('照片'))
                   return await createImage(key, item[key])
+                if (key.includes('文件')) return createLink(key, item[key])
                 return createText(`${key}：${arrayToString(item[key])}`)
               }),
             )),

src/view/components/building-drawer.vue

@@ -202,7 +202,6 @@ const getRooms = async (query: string) => {
   )
 }
 const getFloors = async (data: any) => {
-  console.log('123', data)
   return Promise.all(
     (
       await useFetchRoom({

src/view/components/member-info.vue

@@ -59,7 +59,6 @@ const props = defineProps({
 const trans = (val: string) => {
   return (val && val.replace(/(\w{3})\w*(\w{4})/, '$1******$2')) || '无'
 }
-console.log(dayjs().diff('1999-09-12', 'year'))
 const tags = computed(() => {
   const result: { type?: string; name?: string }[] = []
   const marker: string[] = props.data['标签'] || []

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

@@ -165,6 +165,7 @@
                 :span="24"
                 path="attachment"
                 class="no-label"
+                :style="mode === 'view' ? 'margin-top:-0.9rem' : null"
               >
                 <n-upload
                   :default-file-list="memberData.attachment || []"
@@ -173,7 +174,7 @@
                   :on-change="(e) => onChange(e, 'memberData.attachment')"
                   :show-remove-button="mode !== 'view'"
                 >
-                  <n-button> 上传附件 </n-button>
+                  <n-button v-if="mode !== 'view'"> 上传附件 </n-button>
                 </n-upload>
               </n-form-item-gi>
               <n-form-item-gi
@@ -370,7 +371,7 @@ watch(
       detailData.value = {}
       return
     }
-    getPersonNum(data['党组织名称'])
+    getOrgInfo(data['党组织名称'])
     basicData.value = {
       name: data['活动名称'],
       type: data['标签类别'],
@@ -385,11 +386,21 @@ watch(
       count: data['实际参与人数'],
       excludeCount: data['不计入参与活动党员人数'],
       fileType,
-      attachment: fileType === 'file' ? data['签到表文件'] : [],
+      attachment:
+        fileType === 'file'
+          ? data['签到表文件'].map((url: string, i: number) => ({
+              id: i,
+              url,
+              name: decodeURIComponent(url.split('_').pop() || '未命名'),
+              status: 'finished',
+            }))
+          : [],
       attachmentPhoto:
         fileType === 'photo'
-          ? (data['签到表照片'] || []).map((url: string) => ({
+          ? (data['签到表照片'] || []).map((url: string, i: number) => ({
+              id: i,
               url,
+              name: decodeURIComponent(url.split('_').pop() || '未命名'),
               status: 'finished',
             }))
           : [],
@@ -403,14 +414,18 @@ watch(
       attachment: describeType === 'text' ? data['活动内容描述'] : '',
       attachmentPhoto:
         describeType === 'photo'
-          ? (data['台账记录照片'] || []).map((url: string) => ({
+          ? (data['台账记录照片'] || []).map((url: string, i: number) => ({
+              id: i,
               url,
+              name: decodeURIComponent(url.split('_').pop() || '未命名'),
               status: 'finished',
             }))
           : [],
       photoList:
-        (data['活动照片'] || []).map((url: string) => ({
+        (data['活动照片'] || []).map((url: string, i: number) => ({
+          id: i,
           url,
+          name: decodeURIComponent(url.split('_').pop() || '未命名'),
           status: 'finished',
         })) || [],
     }
@@ -474,15 +489,75 @@ const rules: FormRules = {
       trigger: ['blur', 'input'],
     },
   ],
-  fileType: {
-    required: true,
-    trigger: ['blur', 'change'],
-    message: '请选择上传类型',
-  },
-  describeType: {
+  fileType: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+      message: '请选择上传类型',
+    },
+    {
+      validator: (_, val) => {
+        if (val !== 'file') return true
+        if (
+          !memberData.value.attachment ||
+          memberData.value.attachment.length === 0
+        ) {
+          return false
+        }
+        return true
+      },
+      trigger: ['blur', 'change'],
+      message: '请上传附件',
+    },
+    {
+      validator: (_, val) => {
+        if (val !== 'photo') return true
+        if (
+          !memberData.value.attachmentPhoto ||
+          memberData.value.attachmentPhoto.length === 0
+        ) {
+          return false
+        }
+        return true
+      },
+      trigger: ['blur', 'change'],
+      message: '请上传签到照片',
+    },
+  ],
+  describeType: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+      message: '请选择描述类型',
+    },
+    {
+      validator: (_, val) => {
+        if (val !== 'text') return true
+        if (!detailData.value.attachment) return false
+        return true
+      },
+      trigger: ['blur', 'change'],
+      message: '请输入活动内容描述',
+    },
+    {
+      validator: (_, val) => {
+        if (val !== 'photo') return true
+        if (
+          !detailData.value.attachmentPhoto ||
+          detailData.value.attachmentPhoto.length === 0
+        )
+          return false
+        return true
+      },
+      trigger: ['blur', 'change'],
+      message: '请上传描述照片',
+    },
+  ],
+  photoList: {
+    type: 'array',
     required: true,
     trigger: ['blur', 'change'],
-    message: '请选择描述类型',
+    message: '请上传活动照片',
   },
 }
 
@@ -511,6 +586,8 @@ const submit = () => {
           实际参与人数: count,
           不计入参与活动党员人数: excludeCount,
           活动照片: photoList?.map((item: any) => item.url) || [],
+          上海2000经度: location.value[0],
+          上海2000纬度: location.value[1],
           出席率:
             totalPerson.value === excludeCount
               ? 0
@@ -580,23 +657,79 @@ function getPercent(val: number) {
 
 async function onChange(options: any, type: string) {
   console.log('change', options, type)
-  if (!options || !options.fileList || options.fileList.length === 0) return
-  const urls = await Promise.all(
-    options.fileList.map(async (item: any) => await useAliOss(item.file)),
-  )
+  if (!options) return
+  if (!options.event) {
+    const { url } = options.file
+    switch (type) {
+      case 'memberData.attachment':
+        memberData.value.attachment.splice(
+          memberData.value.attachment.findIndex((e: any) => e?.url === url),
+          1,
+        )
+        break
+      case 'memberData.attachmentPhoto':
+        memberData.value.attachmentPhoto.splice(
+          memberData.value.attachmentPhoto.findIndex(
+            (e: any) => e?.url === url,
+          ),
+          1,
+        )
+        break
+      case 'detailData.attachmentPhoto':
+        detailData.value.attachmentPhoto.splice(
+          detailData.value.attachmentPhoto.findIndex(
+            (e: any) => e?.url === url,
+          ),
+          1,
+        )
+        break
+      case 'detailData.photoList':
+        detailData.value.photoList.splice(
+          detailData.value.photoList.findIndex((e: any) => e?.url === url),
+          1,
+        )
+        break
+      default:
+        break
+    }
+    return
+  }
+  if (!options.file) return
+
+  const url = { url: await useAliOss(options.file.file) }
 
   switch (type) {
     case 'memberData.attachment':
-      memberData.value.attachment = urls
+      if (!memberData.value.attachment) {
+        memberData.value.attachment = []
+        memberData.value.attachment.push(url)
+      } else {
+        memberData.value.attachment.push(url)
+      }
       break
     case 'memberData.attachmentPhoto':
-      memberData.value.attachmentPhoto = urls
+      if (!memberData.value.attachmentPhoto) {
+        memberData.value.attachmentPhoto = []
+        memberData.value.attachmentPhoto.push(url)
+      } else {
+        memberData.value.attachmentPhoto.push(url)
+      }
       break
     case 'detailData.attachmentPhoto':
-      detailData.value.attachmentPhoto = urls
+      if (!detailData.value.attachmentPhoto) {
+        detailData.value.attachmentPhoto = []
+        detailData.value.attachmentPhoto.push(url)
+      } else {
+        detailData.value.attachmentPhoto.push(url)
+      }
       break
     case 'detailData.photoList':
-      detailData.value.photoList = urls
+      if (!detailData.value.photoList) {
+        detailData.value.photoList = []
+        detailData.value.photoList.push(url)
+      } else {
+        detailData.value.photoList.push(url)
+      }
       break
     default:
       break
@@ -604,22 +737,24 @@ async function onChange(options: any, type: string) {
 }
 
 const totalPerson = ref(0)
-async function getPersonNum(name: string) {
-  if (!name) return 0
-  return (
-    (
-      await useFetchOrg({
-        keys: '党员数量',
-        q: `paths @ "党组织名称" && string == "${name}"`,
-      })
-    )?.[0]?.['党员数量'] || 0
-  )
+const location = ref<number[]>([])
+async function getOrgInfo(name: string) {
+  if (!name) return
+  const res = (
+    await useFetchOrg({
+      keys: '党员数量,上海2000经度,上海2000纬度',
+      q: `paths @ "党组织名称" && string == "${name}"`,
+    })
+  )?.[0]
+  totalPerson.value = res?.['党员数量'] || 0
+  location.value = [res?.['上海2000经度'] || 0, res?.['上海2000纬度'] || 0]
 }
 watch(
   () => basicData.value.orgName,
-  async (name) => {
-    totalPerson.value = await getPersonNum(name)
+  (name) => {
+    getOrgInfo(name)
   },
+  { immediate: true },
 )
 
 function checkMemberCount(val: number) {
@@ -627,8 +762,12 @@ function checkMemberCount(val: number) {
 }
 const handleExport = async () => {
   const { name, type, orgName, date, address } = basicData.value
-  const { count, excludeCount } = memberData.value
-  const { attachment } = detailData.value
+  const { count, excludeCount, attachment, attachmentPhoto } = memberData.value
+  const {
+    attachment: detailAttachment,
+    attachmentPhoto: detailAttachmentPhoto,
+    photoList,
+  } = detailData.value
   const data = [
     {
       活动名称: name,
@@ -648,14 +787,23 @@ const handleExport = async () => {
             ) + '%',
     },
     {
-      活动内容描述: attachment,
-      // TODO 测试图片
-      活动照片: [
-        'https://raw.githubusercontent.com/dolanmiu/docx/master/demo/images/cat.jpg',
-        'https://raw.githubusercontent.com/dolanmiu/docx/master/demo/images/cat.jpg',
-      ],
+      活动内容描述: detailAttachment,
+      活动照片: photoList,
     },
   ]
+  if (attachment && attachment.length > 0) {
+    data[1]['签到表文件'] = attachment
+  }
+  if (attachmentPhoto && attachmentPhoto.length > 0) {
+    data[1]['签到表照片'] = attachmentPhoto
+  }
+  if (detailAttachment) {
+    data[2]['活动内容描述'] = detailAttachment
+  }
+  if (detailAttachmentPhoto && detailAttachmentPhoto.length > 0) {
+    data[2]['台账记录照片'] = detailAttachmentPhoto
+  }
+
   await useExportFile(
     [
       {
@@ -742,5 +890,5 @@ const handleExport = async () => {
     .n-upload__trigger.n-upload__trigger--image-card
       display none !important
   .no-label
-    margin-top -0.3rem
+    margin-top -0.2rem
 </style>