mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-18 21:15:06 +08:00
refactor: file vxe
This commit is contained in:
xingyu4j
@ -1,156 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { ElMessage, ElUpload, UploadInstance, UploadRawFile, ElImage } from 'element-plus'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import type { FileVO } from '@/api/infra/fileList/types'
|
||||
import { allSchemas } from './fileList.data'
|
||||
import * as FileApi from '@/api/infra/fileList'
|
||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// ========== 列表相关 ==========
|
||||
const { register, tableObject, methods } = useTable<FileVO>({
|
||||
getListApi: FileApi.getFilePageApi,
|
||||
delListApi: FileApi.deleteFileApi
|
||||
})
|
||||
const { getList, setSearchParams, delList } = methods
|
||||
// ========== 上传相关 ==========
|
||||
const uploadDialogVisible = ref(false)
|
||||
const uploadDialogTitle = ref('上传')
|
||||
const updateSupport = ref(0)
|
||||
const uploadDisabled = ref(false)
|
||||
const uploadRef = ref<UploadInstance>()
|
||||
let updateUrl = import.meta.env.VITE_UPLOAD_URL
|
||||
const uploadHeaders = ref()
|
||||
// 文件上传之前判断
|
||||
const beforeUpload = (file: UploadRawFile) => {
|
||||
const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isImg) ElMessage.error('上传文件只能是 jpeg / gif / png 格式!')
|
||||
if (!isLt5M) ElMessage.error('上传文件大小不能超过 5MB!')
|
||||
return isImg && isLt5M
|
||||
}
|
||||
// 处理上传的文件发生变化
|
||||
// const handleFileChange = (uploadFile: UploadFile): void => {
|
||||
// uploadRef.value.data.path = uploadFile.name
|
||||
// }
|
||||
// 文件上传
|
||||
const submitFileForm = () => {
|
||||
uploadHeaders.value = {
|
||||
Authorization: 'Bearer ' + getAccessToken(),
|
||||
'tenant-id': getTenantId()
|
||||
}
|
||||
uploadDisabled.value = true
|
||||
uploadRef.value!.submit()
|
||||
}
|
||||
// 文件上传成功
|
||||
const handleFileSuccess = (response: any): void => {
|
||||
if (response.code !== 0) {
|
||||
ElMessage.error(response.msg)
|
||||
return
|
||||
}
|
||||
ElMessage.success('上传成功')
|
||||
getList()
|
||||
uploadDialogVisible.value = false
|
||||
uploadDisabled.value = false
|
||||
}
|
||||
// 文件数超出提示
|
||||
const handleExceed = (): void => {
|
||||
ElMessage.error('最多只能上传一个文件！')
|
||||
}
|
||||
// 上传错误提示
|
||||
const excelUploadError = (): void => {
|
||||
ElMessage.error('导入数据失败，请您重新上传！')
|
||||
}
|
||||
// ========== 详情相关 ==========
|
||||
const detailRef = ref() // 详情 Ref
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('') // 弹出层标题
|
||||
// 详情操作
|
||||
const handleDetail = (row: FileVO) => {
|
||||
// 设置数据
|
||||
detailRef.value = row
|
||||
dialogTitle.value = t('action.detail')
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// ========== 复制相关 ==========
|
||||
const handleCopy = async (text: string) => {
|
||||
const { copy, copied, isSupported } = useClipboard({ source: text })
|
||||
if (!isSupported) {
|
||||
ElMessage.error(t('common.copyError'))
|
||||
} else {
|
||||
await copy()
|
||||
if (unref(copied)) {
|
||||
ElMessage.success(t('common.copySuccess'))
|
||||
}
|
||||
}
|
||||
}
|
||||
// ========== 初始化 ==========
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<el-button type="primary" @click="uploadDialogVisible = true">
|
||||
<Icon icon="ep:upload" class="mr-5px" /> 上传文件
|
||||
</el-button>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #url="{ row }">
|
||||
<el-image
|
||||
v-if="row.type === 'jpg' || 'png' || 'gif'"
|
||||
style="width: 80px; height: 50px"
|
||||
:src="row.url"
|
||||
:key="row.url"
|
||||
fit="contain"
|
||||
lazy
|
||||
/>
|
||||
<span v-else>{{ row.url }}</span>
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button link type="primary" @click="handleCopy(row.url)">
|
||||
<Icon icon="ep:copy-document" class="mr-1px" /> {{ t('common.copy') }}
|
||||
</el-button>
|
||||
<el-button link type="primary" @click="handleDetail(row)">
|
||||
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
v-hasPermi="['infra:file:delete']"
|
||||
@click="delList(row.id, false)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
preIcon="ep:upload"
|
||||
title="上传文件"
|
||||
@click="uploadDialogVisible = true"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XTextButton
|
||||
preIcon="ep:copy-document"
|
||||
:title="t('common.copy')"
|
||||
@click="handleCopy(row.url)"
|
||||
/>
|
||||
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['infra:file:delete']"
|
||||
@click="handleDelete(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</ContentWrap>
|
||||
|
||||
<XModal v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
|
||||
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
|
||||
<template #url="{ row }">
|
||||
<el-image
|
||||
v-if="row.type === 'jpg' || 'png' || 'gif'"
|
||||
@ -199,3 +78,103 @@ getList()
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
|
||||
import { VxeGridInstance } from 'vxe-table'
|
||||
import { ElUpload, ElImage, UploadInstance, UploadRawFile } from 'element-plus'
|
||||
import { allSchemas } from './fileList.data'
|
||||
import * as FileApi from '@/api/infra/fileList'
|
||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
// 列表相关的变量
|
||||
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
|
||||
const { gridOptions, getList, deleteData } = useVxeGrid<FileApi.FileVO>({
|
||||
allSchemas: allSchemas,
|
||||
getListApi: FileApi.getFilePageApi,
|
||||
deleteApi: FileApi.deleteFileApi
|
||||
})
|
||||
|
||||
const detailData = ref() // 详情 Ref
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('') // 弹出层标题
|
||||
const uploadDialogVisible = ref(false)
|
||||
const uploadDialogTitle = ref('上传')
|
||||
const updateSupport = ref(0)
|
||||
const uploadDisabled = ref(false)
|
||||
const uploadRef = ref<UploadInstance>()
|
||||
let updateUrl = import.meta.env.VITE_UPLOAD_URL
|
||||
const uploadHeaders = ref()
|
||||
// 文件上传之前判断
|
||||
const beforeUpload = (file: UploadRawFile) => {
|
||||
const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isImg) message.error('上传文件只能是 jpeg / gif / png 格式!')
|
||||
if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
|
||||
return isImg && isLt5M
|
||||
}
|
||||
// 处理上传的文件发生变化
|
||||
// const handleFileChange = (uploadFile: UploadFile): void => {
|
||||
// uploadRef.value.data.path = uploadFile.name
|
||||
// }
|
||||
// 文件上传
|
||||
const submitFileForm = () => {
|
||||
uploadHeaders.value = {
|
||||
Authorization: 'Bearer ' + getAccessToken(),
|
||||
'tenant-id': getTenantId()
|
||||
}
|
||||
uploadDisabled.value = true
|
||||
uploadRef.value!.submit()
|
||||
}
|
||||
// 文件上传成功
|
||||
const handleFileSuccess = async (response: any): Promise<void> => {
|
||||
if (response.code !== 0) {
|
||||
message.error(response.msg)
|
||||
return
|
||||
}
|
||||
message.success('上传成功')
|
||||
uploadDialogVisible.value = false
|
||||
uploadDisabled.value = false
|
||||
await getList(xGrid)
|
||||
}
|
||||
// 文件数超出提示
|
||||
const handleExceed = (): void => {
|
||||
message.error('最多只能上传一个文件！')
|
||||
}
|
||||
// 上传错误提示
|
||||
const excelUploadError = (): void => {
|
||||
message.error('导入数据失败，请您重新上传！')
|
||||
}
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = (row: FileApi.FileVO) => {
|
||||
// 设置数据
|
||||
detailData.value = row
|
||||
dialogTitle.value = t('action.detail')
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (rowId: number) => {
|
||||
await deleteData(xGrid, rowId)
|
||||
}
|
||||
|
||||
// ========== 复制相关 ==========
|
||||
const handleCopy = async (text: string) => {
|
||||
const { copy, copied, isSupported } = useClipboard({ source: text })
|
||||
if (!isSupported) {
|
||||
message.error(t('common.copyError'))
|
||||
} else {
|
||||
await copy()
|
||||
if (unref(copied)) {
|
||||
message.success(t('common.copySuccess'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user