hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-02-01 19:24:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!1 merge: upload和城市选择的重构

Browse Source 
Merge pull request !1 from Zweihander/yx-dev-from-feature-project
This commit is contained in:
Zweihander 2024-07-09 08:56:52 +00:00 committed by Gitee
commit 5b7487eb4f
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 98 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/UploadFile/src/UploadFile.vue
View File

@ -58,7 +58,7 @@
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'
defineOptions({ name: 'UploadFile' })
@ -67,7 +67,7 @@ const message = useMessage() // 消息弹窗
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
modelValue: propTypes.oneOfType<ResponseFile[]>([]).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 +121,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 +152,23 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
// 监听模型绑定值变动
watch(
() => props.modelValue,
(val: string | string[]) => {
(val: ResponseFile[]) => {
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)
}
</script>

2
src/components/UploadFile/src/UploadImg.vue
View File

@ -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)
}
// 图片上传错误提示

22
src/components/UploadFile/src/UploadImgs.vue
View File

@ -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 | string[]>([String, Array<String>]).isRequired,
modelValue: propTypes.oneOfType<ResponseFile[]>([]).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<UploadEmits>()
@ -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! }))
)
}

7
src/components/UploadFile/src/useUpload.ts
View File

@ -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
@ -31,7 +36,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)

38
src/views/pms/project/ProjectForm.vue
View File

@ -49,31 +49,39 @@
</el-col>
<el-col :span="12">
<el-form-item label="省份" prop="provinceId">
<el-cascader
v-model="formData.provinceId"
:options="areaList"
:props="props1"
class="w-1/1"
<el-select
clearable
filterable
placeholder="请选择省份"
v-model="formData.provinceId"
@change="onProvinceChange"
:disabled="formType !== 'create'"
>
<el-option
v-for="item in areaList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="城市" prop="cityId">
<el-cascader
v-model="formData.cityId"
:options="areaList"
:props="props1"
:show-all-levels="false"
class="w-1/1"
<el-select
clearable
filterable
placeholder="请选择城市"
v-model="formData.cityId"
:disabled="formType !== 'create'"
>
<el-option
v-for="item in cityList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
@ -271,6 +279,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' })
@ -282,6 +291,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<UserApi.UserVO[]>([]) // 用户列表
const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
@ -427,4 +437,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 ?? [];
}
</script>

37
src/views/pms/project/bpm/ProjectBpmCreate.vue
View File

@ -36,29 +36,37 @@
</el-col>
<el-col :span="12">
<el-form-item label="省份" prop="provinceId">
<el-cascader
v-model="formData.provinceId"
:options="areaList"
:props="props"
class="w-1/1"
<el-select
clearable
filterable
placeholder="请选择省份"
v-model="formData.provinceId"
@change="onProvinceChange"
>
<el-option
v-for="item in areaList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="城市" prop="cityId">
<el-cascader
v-model="formData.cityId"
:options="areaList"
:props="props"
:show-all-levels="false"
class="w-1/1"
<el-select
clearable
filterable
placeholder="请选择城市"
v-model="formData.cityId"
>
<el-option
v-for="item in cityList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
@ -309,6 +317,7 @@ const formRef = ref() // 表单 Ref
const processDefineKey = 'pms_project_init' // 流程定义 Key
const userList = ref<any[]>([]) // 用户列表
const areaList = ref([]) // 地区列表
const cityList = ref([]); // 城市options
const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
const deptOptions = ref<any[]>([]) // 部门树形结构
@ -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 ?? [];
}
</script>