From d9b9a0581eec45e4b1d9b56093387ce3ec41d5da Mon Sep 17 00:00:00 2001 From: SADYX Date: Mon, 8 Jul 2024 17:41:28 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E9=87=8D=E5=86=99uploadFile?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UploadFile/src/UploadFile.vue | 37 +++++++++----------- src/components/UploadFile/src/useUpload.ts | 2 +- 2 files changed, 17 insertions(+), 22 deletions(-) diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 4459e69e..4532d45c 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -61,13 +61,18 @@ import { isString } from '@/utils/is' import { useUpload } from '@/components/UploadFile/src/useUpload' import { UploadFile } from 'element-plus/es/components/upload/src/upload' +type ResponseFile = { + name: string + url: string +} + defineOptions({ name: 'UploadFile' }) const message = useMessage() // 消息弹窗 const emit = defineEmits(['update:modelValue']) const props = defineProps({ - modelValue: propTypes.oneOfType([String, Array]).isRequired, + modelValue: propTypes.oneOfType([Array]).isRequired, fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileSize: propTypes.number.def(5), // 大小限制(MB) limit: propTypes.number.def(5), // 数量限制 @@ -121,7 +126,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => { // 删除自身 const index = fileList.value.findIndex((item) => item.response?.data === res.data) fileList.value.splice(index, 1) - uploadList.value.push({ name: res.data, url: res.data }) + uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url }) if (uploadList.value.length == uploadNumber.value) { fileList.value.push(...uploadList.value) uploadList.value = [] @@ -152,35 +157,25 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => { // 监听模型绑定值变动 watch( () => props.modelValue, - (val: string | string[]) => { + (val: ResponseFile[]) => { + console.log(val) + if (!val) { fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置 return } - fileList.value = [] // 保障数据为空 - // 情况1：字符串 - if (isString(val)) { - fileList.value.push( - ...val.split(',').map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) - ) - return - } - // 情况2：数组 - fileList.value.push( - ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) - ) + fileList.value = val.map(({ name, url }) => ({ + name: name ?? url.substring(url.lastIndexOf('/') + 1), + url + })) }, { immediate: true, deep: true } ) // 发送文件链接列表更新 const emitUpdateModelValue = () => { - // 情况1：数组结果 - let result: string | string[] = fileList.value.map((file) => file.url!) - // 情况2：逗号分隔的字符串 - if (props.limit === 1 || isString(props.modelValue)) { - result = result.join(',') - } + const result = fileList.value.map(({ name, url }) => ({ name, url })) + emit('update:modelValue', result) } diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index c0465a28..d2023ccc 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -31,7 +31,7 @@ export const useUpload = () => { // 模式二：后端上传 // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子 return new Promise((resolve, reject) => { - FileApi.updateFile({ file: options.file }) + FileApi.updateFileEx({ file: options.file }) .then((res) => { if (res.code === 0) { resolve(res) From 7a6c93d7e7862a19f7739f82353c9f4f7acee89c Mon Sep 17 00:00:00 2001 From: SADYX Date: Tue, 9 Jul 2024 15:40:51 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9upload?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UploadFile/src/UploadFile.vue | 11 ++-------- src/components/UploadFile/src/UploadImg.vue | 2 +- src/components/UploadFile/src/UploadImgs.vue | 22 ++++++++++---------- src/components/UploadFile/src/useUpload.ts | 5 +++++ 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 4532d45c..2cf2023d 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -58,21 +58,16 @@ import { propTypes } from '@/utils/propTypes' import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus' import { isString } from '@/utils/is' -import { useUpload } from '@/components/UploadFile/src/useUpload' +import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload' import { UploadFile } from 'element-plus/es/components/upload/src/upload' -type ResponseFile = { - name: string - url: string -} - defineOptions({ name: 'UploadFile' }) const message = useMessage() // 消息弹窗 const emit = defineEmits(['update:modelValue']) const props = defineProps({ - modelValue: propTypes.oneOfType([Array]).isRequired, + modelValue: propTypes.oneOfType([]).isRequired, fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileSize: propTypes.number.def(5), // 大小限制(MB) limit: propTypes.number.def(5), // 数量限制 @@ -158,8 +153,6 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => { watch( () => props.modelValue, (val: ResponseFile[]) => { - console.log(val) - if (!val) { fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置 return diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue index ac0c162d..4769f259 100644 --- a/src/components/UploadFile/src/UploadImg.vue +++ b/src/components/UploadFile/src/UploadImg.vue @@ -118,7 +118,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { // 图片上传成功提示 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { message.success('上传成功') - emit('update:modelValue', res.data) + emit('update:modelValue', res.data.url) } // 图片上传错误提示 diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue index 85da64c0..b959dcff 100644 --- a/src/components/UploadFile/src/UploadImgs.vue +++ b/src/components/UploadFile/src/UploadImgs.vue @@ -51,7 +51,7 @@ import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus' import { ElNotification } from 'element-plus' import { propTypes } from '@/utils/propTypes' -import { useUpload } from '@/components/UploadFile/src/useUpload' +import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload' defineOptions({ name: 'UploadImgs' }) @@ -70,7 +70,7 @@ type FileTypes = | 'image/x-icon' const props = defineProps({ - modelValue: propTypes.oneOfType([String, Array]).isRequired, + modelValue: propTypes.oneOfType([]).isRequired, drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true） disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false） limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传（默认为 5张） @@ -111,7 +111,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { // 图片上传成功 interface UploadEmits { - (e: 'update:modelValue', value: string[]): void + (e: 'update:modelValue', value: ResponseFile[]): void } const emit = defineEmits() @@ -120,7 +120,7 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { // 删除自身 const index = fileList.value.findIndex((item) => item.response?.data === res.data) fileList.value.splice(index, 1) - uploadList.value.push({ name: res.data, url: res.data }) + uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url }) if (uploadList.value.length == uploadNumber.value) { fileList.value.push(...uploadList.value) uploadList.value = [] @@ -132,22 +132,22 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { // 监听模型绑定值变动 watch( () => props.modelValue, - (val: string | string[]) => { + (val: ResponseFile[]) => { if (!val) { fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置 return } - fileList.value = [] // 保障数据为空 - fileList.value.push( - ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) - ) + fileList.value = val.map(({ name, url }) => ({ + name: name ?? url.substring(url.lastIndexOf('/') + 1), + url + })) }, { immediate: true, deep: true } ) // 发送图片链接列表更新 const emitUpdateModelValue = () => { - let result: string[] = fileList.value.map((file) => file.url!) + let result: ResponseFile[] = fileList.value.map(({ name, url }) => ({ name, url: url! })) emit('update:modelValue', result) } // 删除图片 @@ -157,7 +157,7 @@ const handleRemove = (uploadFile: UploadFile) => { ) emit( 'update:modelValue', - fileList.value.map((file) => file.url!) + fileList.value.map(({ name, url }) => ({ name, url: url! })) ) } diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index d2023ccc..d22240a3 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -3,6 +3,11 @@ import CryptoJS from 'crypto-js' import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload' import axios from 'axios' +export type ResponseFile = { + name: string + url: string +} + export const useUpload = () => { // 后端上传地址 const uploadUrl = import.meta.env.VITE_UPLOAD_URL From 7a68dccf9b448f33d88556f34c79defb65984012 Mon Sep 17 00:00:00 2001 From: SADYX Date: Tue, 9 Jul 2024 16:42:48 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E5=B0=86=E7=9C=81=E4=BB=BD?= =?UTF-8?q?=E5=92=8C=E5=9F=8E=E5=B8=82=E7=BA=A7=E8=81=94=E6=94=B9=E4=B8=BA?= =?UTF-8?q?select=E6=A1=86=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/pms/project/ProjectForm.vue | 42 ++++++++---- .../pms/project/bpm/ProjectBpmCreate.vue | 67 ++++++++++++------- 2 files changed, 70 insertions(+), 39 deletions(-) diff --git a/src/views/pms/project/ProjectForm.vue b/src/views/pms/project/ProjectForm.vue index ba858205..b57c97d7 100644 --- a/src/views/pms/project/ProjectForm.vue +++ b/src/views/pms/project/ProjectForm.vue @@ -37,29 +37,37 @@ - + v-model="formData.provinceId" + @change="onProvinceChange" + > + + - + v-model="formData.cityId" + > + + @@ -245,6 +253,7 @@ import { useUserStore } from '@/store/modules/user' import { CustomerCompanyApi, CustomerCompanyVO } from '@/api/cms/customerCompany' import * as DeptApi from '@/api/system/dept' import {defaultProps, handleTree} from "@/utils/tree"; +import { log } from 'console' /** 项目基本信息 表单 */ defineOptions({ name: 'ProjectForm' }) @@ -256,6 +265,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const areaList = ref([]) // 地区列表 +const cityList = ref([]); // 城市options const formType = ref('') // 表单的类型：create - 新增；update - 修改 const userOptions = ref([]) // 用户列表 const customerCompanyOptions = ref([]) //客户公司列表 @@ -401,4 +411,10 @@ const resetForm = () => { } formRef.value?.resetFields() } + +// 省份更新时，刷新城市选项 +const onProvinceChange = (value: number)=>{ + formData.value.cityId = undefined; + cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? []; +} diff --git a/src/views/pms/project/bpm/ProjectBpmCreate.vue b/src/views/pms/project/bpm/ProjectBpmCreate.vue index 5f89074d..adef2e9e 100644 --- a/src/views/pms/project/bpm/ProjectBpmCreate.vue +++ b/src/views/pms/project/bpm/ProjectBpmCreate.vue @@ -35,32 +35,40 @@ - - - - - - - - - + + + + + + + + + + + + + @@ -309,6 +317,7 @@ const formRef = ref() // 表单 Ref const processDefineKey = 'pms_project_init' // 流程定义 Key const userList = ref([]) // 用户列表 const areaList = ref([]) // 地区列表 +const cityList = ref([]); // 城市options const customerCompanyOptions = ref([]) //客户公司列表 const deptOptions = ref([]) // 部门树形结构 @@ -354,4 +363,10 @@ onMounted(async () => { // 客户公司列表 customerCompanyOptions.value = await CustomerCompanyApi.getCustomerCompanyList() }) + +// 省份更新时，刷新城市选项 +const onProvinceChange = (value: number)=>{ + formData.value.cityId = undefined; + cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? []; +}