|
|
@@ -1,24 +1,109 @@
|
|
|
+<template>
|
|
|
+ <ContentWrap>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <XButton
|
|
|
+ type="primary"
|
|
|
+ preIcon="ep:upload"
|
|
|
+ title="上传文件"
|
|
|
+ @click="uploadDialogVisible = true"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <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="detailData">
|
|
|
+ <template #url="{ row }">
|
|
|
+ <el-image
|
|
|
+ v-if="row.type === 'jpg' || 'png' || 'gif'"
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="row.url"
|
|
|
+ :key="row.url"
|
|
|
+ lazy
|
|
|
+ />
|
|
|
+ <span>{{ row.url }}</span>
|
|
|
+ </template>
|
|
|
+ </Descriptions>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
|
|
+ </template>
|
|
|
+ </XModal>
|
|
|
+ <XModal v-model="uploadDialogVisible" :title="uploadDialogTitle">
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef"
|
|
|
+ :action="updateUrl + '?updateSupport=' + updateSupport"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :drag="true"
|
|
|
+ :limit="1"
|
|
|
+ :multiple="true"
|
|
|
+ :show-file-list="true"
|
|
|
+ :disabled="uploadDisabled"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleFileSuccess"
|
|
|
+ :on-error="excelUploadError"
|
|
|
+ :auto-upload="false"
|
|
|
+ accept=".jpg, .png, .gif"
|
|
|
+ >
|
|
|
+ <Icon icon="ep:upload-filled" />
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" @click="submitFileForm">
|
|
|
+ <Icon icon="ep:upload-filled" />
|
|
|
+ {{ t('action.save') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="uploadDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
|
|
+ </template>
|
|
|
+ </XModal>
|
|
|
+</template>
|
|
|
<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 { 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 { register, tableObject, methods } = useTable<FileVO>({
|
|
|
+// 列表相关的变量
|
|
|
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
|
|
|
+const { gridOptions, getList, deleteData } = useVxeGrid<FileApi.FileVO>({
|
|
|
+ allSchemas: allSchemas,
|
|
|
getListApi: FileApi.getFilePageApi,
|
|
|
- delListApi: FileApi.deleteFileApi
|
|
|
+ deleteApi: FileApi.deleteFileApi
|
|
|
})
|
|
|
-const { getList, setSearchParams, delList } = methods
|
|
|
-// ========== 上传相关 ==========
|
|
|
+
|
|
|
+const detailData = ref() // 详情 Ref
|
|
|
+const dialogVisible = ref(false) // 是否显示弹出层
|
|
|
+const dialogTitle = ref('') // 弹出层标题
|
|
|
const uploadDialogVisible = ref(false)
|
|
|
const uploadDialogTitle = ref('上传')
|
|
|
const updateSupport = ref(0)
|
|
|
@@ -30,8 +115,8 @@ 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!')
|
|
|
+ if (!isImg) message.error('上传文件只能是 jpeg / gif / png 格式!')
|
|
|
+ if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
|
|
|
return isImg && isLt5M
|
|
|
}
|
|
|
// 处理上传的文件发生变化
|
|
|
@@ -48,154 +133,48 @@ const submitFileForm = () => {
|
|
|
uploadRef.value!.submit()
|
|
|
}
|
|
|
// 文件上传成功
|
|
|
-const handleFileSuccess = (response: any): void => {
|
|
|
+const handleFileSuccess = async (response: any): Promise<void> => {
|
|
|
if (response.code !== 0) {
|
|
|
- ElMessage.error(response.msg)
|
|
|
+ message.error(response.msg)
|
|
|
return
|
|
|
}
|
|
|
- ElMessage.success('上传成功')
|
|
|
- getList()
|
|
|
+ message.success('上传成功')
|
|
|
uploadDialogVisible.value = false
|
|
|
uploadDisabled.value = false
|
|
|
+ await getList(xGrid)
|
|
|
}
|
|
|
// 文件数超出提示
|
|
|
const handleExceed = (): void => {
|
|
|
- ElMessage.error('最多只能上传一个文件！')
|
|
|
+ message.error('最多只能上传一个文件！')
|
|
|
}
|
|
|
// 上传错误提示
|
|
|
const excelUploadError = (): void => {
|
|
|
- ElMessage.error('导入数据失败，请您重新上传！')
|
|
|
+ message.error('导入数据失败，请您重新上传！')
|
|
|
}
|
|
|
-// ========== 详情相关 ==========
|
|
|
-const detailRef = ref() // 详情 Ref
|
|
|
-const dialogVisible = ref(false) // 是否显示弹出层
|
|
|
-const dialogTitle = ref('') // 弹出层标题
|
|
|
+
|
|
|
// 详情操作
|
|
|
-const handleDetail = (row: FileVO) => {
|
|
|
+const handleDetail = (row: FileApi.FileVO) => {
|
|
|
// 设置数据
|
|
|
- detailRef.value = row
|
|
|
+ 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) {
|
|
|
- ElMessage.error(t('common.copyError'))
|
|
|
+ message.error(t('common.copyError'))
|
|
|
} else {
|
|
|
await copy()
|
|
|
if (unref(copied)) {
|
|
|
- ElMessage.success(t('common.copySuccess'))
|
|
|
+ message.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
|
|
|
- type="primary"
|
|
|
- v-hasPermi="['infra:file:delete']"
|
|
|
- @click="delList(row.id, false)"
|
|
|
- >
|
|
|
- <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </Table>
|
|
|
- </ContentWrap>
|
|
|
-
|
|
|
- <XModal v-model="dialogVisible" :title="dialogTitle">
|
|
|
- <!-- 对话框(详情) -->
|
|
|
- <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
|
|
|
- <template #url="{ row }">
|
|
|
- <el-image
|
|
|
- v-if="row.type === 'jpg' || 'png' || 'gif'"
|
|
|
- style="width: 100px; height: 100px"
|
|
|
- :src="row.url"
|
|
|
- :key="row.url"
|
|
|
- lazy
|
|
|
- />
|
|
|
- <span>{{ row.url }}</span>
|
|
|
- </template>
|
|
|
- </Descriptions>
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <template #footer>
|
|
|
- <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
|
|
- </template>
|
|
|
- </XModal>
|
|
|
- <XModal v-model="uploadDialogVisible" :title="uploadDialogTitle">
|
|
|
- <el-upload
|
|
|
- ref="uploadRef"
|
|
|
- :action="updateUrl + '?updateSupport=' + updateSupport"
|
|
|
- :headers="uploadHeaders"
|
|
|
- :drag="true"
|
|
|
- :limit="1"
|
|
|
- :multiple="true"
|
|
|
- :show-file-list="true"
|
|
|
- :disabled="uploadDisabled"
|
|
|
- :before-upload="beforeUpload"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :on-success="handleFileSuccess"
|
|
|
- :on-error="excelUploadError"
|
|
|
- :auto-upload="false"
|
|
|
- accept=".jpg, .png, .gif"
|
|
|
- >
|
|
|
- <Icon icon="ep:upload-filled" />
|
|
|
- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- <template #footer>
|
|
|
- <el-button type="primary" @click="submitFileForm">
|
|
|
- <Icon icon="ep:upload-filled" />
|
|
|
- {{ t('action.save') }}
|
|
|
- </el-button>
|
|
|
- <el-button @click="uploadDialogVisible = false">{{ t('dialog.close') }}</el-button>
|
|
|
- </template>
|
|
|
- </XModal>
|
|
|
-</template>
|
xingyu4j