Compare commits
No commits in common. 'c62c2103be07d1a5082d56d5cce2f4715f0a803e' and '15d094d934224085248c2d5e5db6bc361fa02771' have entirely different histories.
c62c2103be
...
15d094d934
11 changed files with 366 additions and 548 deletions
@ -1,52 +1,52 @@ |
|||||||
import request from '@/config/axios' |
import request from '@/config/axios' |
||||||
|
|
||||||
// 空气质量采集 VO
|
// 空气质量采集 VO
|
||||||
export interface QualityCollectionVO { |
export interface QualityCollectionVO { |
||||||
id: number // 主键
|
id: number // 主键
|
||||||
siteName: string // 站点名称
|
siteName: string // 站点名称
|
||||||
city: string // 城市
|
city: string // 城市
|
||||||
type: number // 数据类型
|
type: number // 数据类型
|
||||||
pm25: number // PM2.s(ugim3)
|
pm25: number // PM2.s(ugim3)
|
||||||
pm10: number // PMo(ug/m3
|
pm10: number // PMo(ug/m3
|
||||||
so2: number // sOz(ug/m3)
|
so2: number // sOz(ug/m3)
|
||||||
no2: number // NOz(ug/m3)
|
no2: number // NOz(ug/m3)
|
||||||
no: number // NO(Hg/m3)
|
no: number // NO(Hg/m3)
|
||||||
nOx: number // NOx(Hg/m3)
|
nOx: number // NOx(Hg/m3)
|
||||||
co: number // CO(mg/m3)
|
co: number // CO(mg/m3)
|
||||||
o3: number // 0з(ug/m3)
|
o3: number // 0з(ug/m3)
|
||||||
remark: string // 备用1
|
remark: string // 备用1
|
||||||
remark2: string // 备用2
|
remark2: string // 备用2
|
||||||
} |
} |
||||||
|
|
||||||
// 空气质量采集 API
|
// 空气质量采集 API
|
||||||
export const QualityCollectionApi = { |
export const QualityCollectionApi = { |
||||||
// 查询空气质量采集分页
|
// 查询空气质量采集分页
|
||||||
getQualityCollectionPage: async (params: any) => { |
getQualityCollectionPage: async (params: any) => { |
||||||
return await request.get({ url: `/system/quality-collection/page`, params }) |
return await request.get({ url: `/system/quality-collection/page`, params }) |
||||||
}, |
}, |
||||||
|
|
||||||
// 查询空气质量采集详情
|
// 查询空气质量采集详情
|
||||||
getQualityCollection: async (id: number) => { |
getQualityCollection: async (id: number) => { |
||||||
return await request.get({ url: `/system/quality-collection/get?id=` + id }) |
return await request.get({ url: `/system/quality-collection/get?id=` + id }) |
||||||
}, |
}, |
||||||
|
|
||||||
// 新增空气质量采集
|
// 新增空气质量采集
|
||||||
createQualityCollection: async (data: QualityCollectionVO) => { |
createQualityCollection: async (data: QualityCollectionVO) => { |
||||||
return await request.post({ url: `/system/quality-collection/create`, data }) |
return await request.post({ url: `/system/quality-collection/create`, data }) |
||||||
}, |
}, |
||||||
|
|
||||||
// 修改空气质量采集
|
// 修改空气质量采集
|
||||||
updateQualityCollection: async (data: QualityCollectionVO) => { |
updateQualityCollection: async (data: QualityCollectionVO) => { |
||||||
return await request.put({ url: `/system/quality-collection/update`, data }) |
return await request.put({ url: `/system/quality-collection/update`, data }) |
||||||
}, |
}, |
||||||
|
|
||||||
// 删除空气质量采集
|
// 删除空气质量采集
|
||||||
deleteQualityCollection: async (id: number) => { |
deleteQualityCollection: async (id: number) => { |
||||||
return await request.delete({ url: `/system/quality-collection/delete?id=` + id }) |
return await request.delete({ url: `/system/quality-collection/delete?id=` + id }) |
||||||
}, |
}, |
||||||
|
|
||||||
// 导出空气质量采集 Excel
|
// 导出空气质量采集 Excel
|
||||||
exportQualityCollection: async (data:any) => { |
exportQualityCollection: async (params) => { |
||||||
return await request.upload({ url: `/system/quality-collection/upload-excel`, data }) |
return await request.download({ url: `/system/quality-collection/export-excel`, params }) |
||||||
} |
}, |
||||||
} |
} |
||||||
@ -1,8 +1,6 @@ |
|||||||
import UploadImg from './src/UploadImg.vue' |
import UploadImg from './src/UploadImg.vue' |
||||||
import UploadImgs from './src/UploadImgs.vue' |
import UploadImgs from './src/UploadImgs.vue' |
||||||
import UploadFile from './src/UploadFile.vue' |
import UploadFile from './src/UploadFile.vue' |
||||||
import UploadExcel from './src/UploadExcel.vue' |
export { UploadImg, UploadImgs, UploadFile} |
||||||
|
|
||||||
export { UploadImg, UploadImgs, UploadFile, UploadExcel} |
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,227 +0,0 @@ |
|||||||
<template> |
|
||||||
<div v-if="!disabled" class="upload-file" > |
|
||||||
<el-upload |
|
||||||
ref="uploadRef" |
|
||||||
|
|
||||||
v-model:file-list="fileList" |
|
||||||
:action="uploadUrl" |
|
||||||
:auto-upload="autoUpload" |
|
||||||
:before-upload="beforeUpload" |
|
||||||
:disabled="disabled" |
|
||||||
:drag="drag" |
|
||||||
:http-request="httpRequest" |
|
||||||
:limit="props.limit" |
|
||||||
:multiple="props.limit > 1" |
|
||||||
:on-error="excelUploadError" |
|
||||||
:on-exceed="handleExceed" |
|
||||||
:on-preview="handlePreview" |
|
||||||
:on-remove="handleRemove" |
|
||||||
:on-success="handleFileSuccess" |
|
||||||
:show-file-list="true" |
|
||||||
class="upload-file-uploader" |
|
||||||
name="file" |
|
||||||
> |
|
||||||
<el-button type="primary"> |
|
||||||
<Icon icon="ep:upload" /> |
|
||||||
上传Excel |
|
||||||
</el-button> |
|
||||||
<template #file="row"> |
|
||||||
<div class="flex items-center"> |
|
||||||
<span>{{ row.file.name }}</span> |
|
||||||
<div class="ml-10px"> |
|
||||||
<el-link |
|
||||||
:href="row.file.url" |
|
||||||
:underline="false" |
|
||||||
download |
|
||||||
target="_blank" |
|
||||||
type="primary" |
|
||||||
> |
|
||||||
下载 |
|
||||||
</el-link> |
|
||||||
</div> |
|
||||||
<div class="ml-10px"> |
|
||||||
<el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-upload> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 上传操作禁用时 --> |
|
||||||
<div v-if="disabled" class="upload-file"> |
|
||||||
<div v-for="(file, index) in fileList" :key="index" class="flex items-center file-list-item"> |
|
||||||
<span>{{ file.name }}</span> |
|
||||||
<div class="ml-10px"> |
|
||||||
<el-link :href="file.url" :underline="false" download target="_blank" type="primary"> |
|
||||||
下载 |
|
||||||
</el-link> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { propTypes } from '@/utils/propTypes' |
|
||||||
import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus' |
|
||||||
import { isString } from '@/utils/is' |
|
||||||
import { useExcelUpload } from '@/components/UploadFile/src/useUpload' |
|
||||||
import { UploadFile } from 'element-plus/es/components/upload/src/upload' |
|
||||||
|
|
||||||
defineOptions({ name: 'UploadFile' }) |
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗 |
|
||||||
const emit = defineEmits(['update:modelValue']) |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired, |
|
||||||
fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] |
|
||||||
fileSize: propTypes.number.def(5), // 大小限制(MB) |
|
||||||
limit: propTypes.number.def(5), // 数量限制 |
|
||||||
autoUpload: propTypes.bool.def(true), // 自动上传 |
|
||||||
drag: propTypes.bool.def(false), // 拖拽上传 |
|
||||||
isShowTip: propTypes.bool.def(true), // 是否显示提示 |
|
||||||
disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false） |
|
||||||
type: Number |
|
||||||
}) |
|
||||||
|
|
||||||
// ========== 上传相关 ========== |
|
||||||
const uploadRef = ref<UploadInstance>() |
|
||||||
const uploadList = ref<UploadUserFile[]>([]) |
|
||||||
const fileList = ref<UploadUserFile[]>([]) |
|
||||||
const uploadNumber = ref<number>(0) |
|
||||||
|
|
||||||
console.log('props.type', props.type) |
|
||||||
|
|
||||||
const { uploadUrl, httpRequest } = useExcelUpload(props.type) |
|
||||||
|
|
||||||
// 文件上传之前判断 |
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => { |
|
||||||
if (fileList.value.length >= props.limit) { |
|
||||||
message.error(`上传文件数量不能超过${props.limit}个!`) |
|
||||||
return false |
|
||||||
} |
|
||||||
let fileExtension = '' |
|
||||||
if (file.name.lastIndexOf('.') > -1) { |
|
||||||
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1) |
|
||||||
} |
|
||||||
const isImg = props.fileType.some((type: string) => { |
|
||||||
if (file.type.indexOf(type) > -1) return true |
|
||||||
return !!(fileExtension && fileExtension.indexOf(type) > -1) |
|
||||||
}) |
|
||||||
const isLimit = file.size < props.fileSize * 1024 * 1024 |
|
||||||
if (!isImg) { |
|
||||||
message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`) |
|
||||||
return false |
|
||||||
} |
|
||||||
if (!isLimit) { |
|
||||||
message.error(`上传文件大小不能超过${props.fileSize}MB!`) |
|
||||||
return false |
|
||||||
} |
|
||||||
message.success('正在上传文件，请稍候...') |
|
||||||
uploadNumber.value++ |
|
||||||
} |
|
||||||
// 处理上传的文件发生变化 |
|
||||||
// const handleFileChange = (uploadFile: UploadFile): void => { |
|
||||||
// uploadRef.value.data.path = uploadFile.name |
|
||||||
// } |
|
||||||
// 文件上传成功 |
|
||||||
const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => { |
|
||||||
message.success('上传成功') |
|
||||||
// 删除自身 |
|
||||||
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 }) |
|
||||||
if (uploadList.value.length == uploadNumber.value) { |
|
||||||
fileList.value.push(...uploadList.value) |
|
||||||
uploadList.value = [] |
|
||||||
uploadNumber.value = 0 |
|
||||||
emitUpdateModelValue() |
|
||||||
} |
|
||||||
} |
|
||||||
// 文件数超出提示 |
|
||||||
const handleExceed: UploadProps['onExceed'] = (): void => { |
|
||||||
message.error(`上传文件数量不能超过${props.limit}个!`) |
|
||||||
} |
|
||||||
// 上传错误提示 |
|
||||||
const excelUploadError: UploadProps['onError'] = (): void => { |
|
||||||
message.error('导入数据失败，请您重新上传！') |
|
||||||
} |
|
||||||
// 删除上传文件 |
|
||||||
const handleRemove = (file: UploadFile) => { |
|
||||||
const index = fileList.value.map((f) => f.name).indexOf(file.name) |
|
||||||
if (index > -1) { |
|
||||||
fileList.value.splice(index, 1) |
|
||||||
emitUpdateModelValue() |
|
||||||
} |
|
||||||
} |
|
||||||
const handlePreview: UploadProps['onPreview'] = (uploadFile) => { |
|
||||||
console.log(uploadFile) |
|
||||||
} |
|
||||||
|
|
||||||
// 监听模型绑定值变动 |
|
||||||
watch( |
|
||||||
() => props.modelValue, |
|
||||||
(val: string | string[]) => { |
|
||||||
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 })) |
|
||||||
) |
|
||||||
}, |
|
||||||
{ 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(',') |
|
||||||
} |
|
||||||
emit('update:modelValue', result) |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.upload-file-uploader { |
|
||||||
margin-bottom: -8px; |
|
||||||
margin-left: 10px |
|
||||||
} |
|
||||||
|
|
||||||
:deep(.upload-file-list .el-upload-list__item) { |
|
||||||
position: relative; |
|
||||||
// margin-bottom: 10px; |
|
||||||
line-height: 2; |
|
||||||
border: 1px solid #e4e7ed; |
|
||||||
} |
|
||||||
|
|
||||||
:deep(.el-upload-list__item-file-name) { |
|
||||||
max-width: 250px; |
|
||||||
} |
|
||||||
|
|
||||||
:deep(.upload-file-list .ele-upload-list__item-content) { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
:deep(.ele-upload-list__item-content-action .el-link) { |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.file-list-item { |
|
||||||
border: 1px dashed var(--el-border-color-darker); |
|
||||||
border-radius: 8px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue