Skip to content

H
huamu
Commit de7e2f04 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

上传功能完成

parent 7ef6e681
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 50 deletions
src/App.vue
View file @ de7e2f04
......@@ -69,6 +69,10 @@ const themeOverrides: GlobalThemeOverrides = {
Card: {
borderRadius: '.06rem',
},
Upload: {
itemTextColorSuccess: '#3D7FE9',
itemTextColorError: '#E59B00',
},
Tag: {
borderRadius: '.04rem',
colorPrimary: '#FCF4F5',
......
src/ajax/api.ts
View file @ de7e2f04
......@@ -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
View file @ de7e2f04
......@@ -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
View file @ de7e2f04
......@@ -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
View file @ de7e2f04
......@@ -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
View file @ de7e2f04
......@@ -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
View file @ de7e2f04
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment