Skip to content

Commit ba90932

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!28 Vue3 重构：基础设施 -> 文件管理功能
Merge pull request !28 from xiaowuye/dev
2 parents a1292fb + 1a7f89a commit ba90932

File tree

11 files changed

+622
-587
lines changed

11 files changed

+622
-587
lines changed

‎src/api/infra/fileList/index.ts renamed to ‎src/api/infra/file/index.ts

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import request from '@/config/axios'
22

3-
export interface FileVO {
4-
id: number
5-
configId: number
6-
path: string
7-
name: string
8-
url: string
9-
size: string
10-
type: string
11-
createTime: Date
12-
}
13-
143
export interface FilePageReqVO extends PageParam {
154
path?: string
165
type?: string
176
createTime?: Date[]
187
}
198

209
// 查询文件列表
21-
export const getFilePageApi = (params: FilePageReqVO) => {
10+
export const getFilePage = (params: FilePageReqVO) => {
2211
return request.get({ url: '/infra/file/page', params })
2312
}
2413

2514
// 删除文件
26-
export const deleteFileApi = (id: number) => {
15+
export const deleteFile = (id: number) => {
2716
return request.delete({ url: '/infra/file/delete?id=' + id })
2817
}

‎src/api/infra/fileConfig/index.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,36 @@ export interface FileConfigPageReqVO extends PageParam {
3131
}
3232

3333
// 查询文件配置列表
34-
export const getFileConfigPageApi = (params: FileConfigPageReqVO) => {
34+
export const getFileConfigPage = (params: FileConfigPageReqVO) => {
3535
return request.get({ url: '/infra/file-config/page', params })
3636
}
3737

3838
// 查询文件配置详情
39-
export const getFileConfigApi = (id: number) => {
39+
export const getFileConfig = (id: number) => {
4040
return request.get({ url: '/infra/file-config/get?id=' + id })
4141
}
4242

4343
// 更新文件配置为主配置
44-
export const updateFileConfigMasterApi = (id: number) => {
44+
export const updateFileConfigMaster = (id: number) => {
4545
return request.put({ url: '/infra/file-config/update-master?id=' + id })
4646
}
4747

4848
// 新增文件配置
49-
export const createFileConfigApi = (data: FileConfigVO) => {
49+
export const createFileConfig = (data: FileConfigVO) => {
5050
return request.post({ url: '/infra/file-config/create', data })
5151
}
5252

5353
// 修改文件配置
54-
export const updateFileConfigApi = (data: FileConfigVO) => {
54+
export const updateFileConfig = (data: FileConfigVO) => {
5555
return request.put({ url: '/infra/file-config/update', data })
5656
}
5757

5858
// 删除文件配置
59-
export const deleteFileConfigApi = (id: number) => {
59+
export const deleteFileConfig = (id: number) => {
6060
return request.delete({ url: '/infra/file-config/delete?id=' + id })
6161
}
6262

6363
// 测试文件配置
64-
export const testFileConfigApi = (id: number) => {
64+
export const testFileConfig = (id: number) => {
6565
return request.get({ url: '/infra/file-config/test?id=' + id })
6666
}

‎src/locales/en.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,8 @@ export default {
297297
typeCreate: 'Dict Type Create',
298298
typeUpdate: 'Dict Type Eidt',
299299
dataCreate: 'Dict Data Create',
300-
dataUpdate: 'Dict Data Eidt'
300+
dataUpdate: 'Dict Data Eidt',
301+
fileUpload: 'File Upload'
301302
},
302303
dialog: {
303304
dialog: 'Dialog',

‎src/locales/zh-CN.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,8 @@ export default {
297297
typeCreate: '字典类型新增',
298298
typeUpdate: '字典类型编辑',
299299
dataCreate: '字典数据新增',
300-
dataUpdate: '字典数据编辑'
300+
dataUpdate: '字典数据编辑',
301+
fileUpload: '上传文件'
301302
},
302303
dialog: {
303304
dialog: '弹窗',

‎src/views/infra/file/form.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-upload
4+
ref="uploadRef"
5+
:limit="1"
6+
accept=".jpg, .png, .gif"
7+
:auto-upload="false"
8+
drag
9+
:headers="headers"
10+
:action="url"
11+
:data="data"
12+
:disabled="formLoading"
13+
:on-change="handleFileChange"
14+
:on-progress="handleFileUploadProgress"
15+
:on-success="handleFileSuccess"
16+
>
17+
<i class="el-icon-upload"></i>
18+
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
19+
<template #tip>
20+
<div class="el-upload__tip" style="color: red">
21+
提示：仅允许导入 jpg、png、gif 格式文件！
22+
</div>
23+
</template>
24+
</el-upload>
25+
<template #footer>
26+
<div class="dialog-footer">
27+
<el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
28+
<el-button @click="modelVisible = false">取 消</el-button>
29+
</div>
30+
</template>
31+
</Dialog>
32+
</template>
33+
34+
<script setup lang="ts">
35+
import { Dialog } from '@/components/Dialog'
36+
import { getAccessToken } from '@/utils/auth'
37+
38+
const { t } = useI18n() // 国际化
39+
const message = useMessage() // 消息弹窗
40+
41+
const modelVisible = ref(false) // 弹窗的是否展示
42+
const modelTitle = ref('') // 弹窗的标题
43+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
44+
const url = import.meta.env.VITE_UPLOAD_URL
45+
const headers = { Authorization: 'Bearer ' + getAccessToken() }
46+
const data = ref({ path: '' })
47+
const uploadRef = ref()
48+
49+
/** 打开弹窗 */
50+
const openModal = async () => {
51+
modelVisible.value = true
52+
modelTitle.value = t('action.fileUpload')
53+
}
54+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
55+
56+
/** 提交表单 */
57+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
58+
/** 处理上传的文件发生变化 */
59+
const handleFileChange = (file) => {
60+
data.value.path = file.name
61+
}
62+
/** 处理文件上传中 */
63+
const handleFileUploadProgress = () => {
64+
formLoading.value = true // 禁止修改
65+
}
66+
/** 发起文件上传 */
67+
const submitFileForm = () => {
68+
unref(uploadRef)?.submit()
69+
}
70+
/** 文件上传成功处理 */
71+
const handleFileSuccess = () => {
72+
// 清理
73+
modelVisible.value = false
74+
formLoading.value = false
75+
unref(uploadRef)?.clearFiles()
76+
// 提示成功，并刷新
77+
message.success(t('common.createSuccess'))
78+
emit('success')
79+
}
80+
</script>
81+
82+
<style scoped></style>

‎src/views/infra/file/index.vue

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<template>
2+
<!-- 搜索 -->
3+
<content-wrap>
4+
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
5+
<el-form-item label="文件路径" prop="path">
6+
<el-input
7+
v-model="queryParams.path"
8+
placeholder="请输入文件路径"
9+
clearable
10+
@keyup.enter="handleQuery"
11+
/>
12+
</el-form-item>
13+
<el-form-item label="文件类型" prop="type" width="80">
14+
<el-input
15+
v-model="queryParams.type"
16+
placeholder="请输入文件类型"
17+
clearable
18+
@keyup.enter="handleQuery"
19+
/>
20+
</el-form-item>
21+
<el-form-item label="创建时间" prop="createTime">
22+
<el-date-picker
23+
v-model="queryParams.createTime"
24+
value-format="YYYY-MM-DD HH:mm:ss"
25+
type="daterange"
26+
range-separator="-"
27+
start-placeholder="开始日期"
28+
end-placeholder="结束日期"
29+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
30+
/>
31+
</el-form-item>
32+
<el-form-item>
33+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
34+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
35+
<el-button type="primary" @click="openModal">
36+
<Icon icon="ep:upload" class="mr-5px" /> 上传文件
37+
</el-button>
38+
</el-form-item>
39+
</el-form>
40+
</content-wrap>
41+
42+
<!-- 列表 -->
43+
<content-wrap>
44+
<el-table v-loading="loading" :data="list" align="center">
45+
<el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
46+
<el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
47+
<el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
48+
<el-table-column
49+
label="文件大小"
50+
align="center"
51+
prop="size"
52+
width="120"
53+
:formatter="sizeFormat"
54+
/>
55+
<el-table-column label="文件类型" align="center" prop="type" width="180px" />
56+
<el-table-column
57+
label="上传时间"
58+
align="center"
59+
prop="createTime"
60+
width="180"
61+
:formatter="dateFormatter"
62+
/>
63+
<el-table-column label="操作" align="center">
64+
<template #default="scope">
65+
<el-button
66+
link
67+
type="danger"
68+
@click="handleDelete(scope.row.id)"
69+
v-hasPermi="['infra:config:delete']"
70+
>
71+
删除
72+
</el-button>
73+
</template>
74+
</el-table-column>
75+
</el-table>
76+
<!-- 分页 -->
77+
<Pagination
78+
:total="total"
79+
v-model:page="queryParams.pageNo"
80+
v-model:limit="queryParams.pageSize"
81+
@pagination="getList"
82+
/>
83+
</content-wrap>
84+
85+
<!-- 表单弹窗：添加/修改 -->
86+
<file-upload-form ref="modalRef" @success="getList" />
87+
</template>
88+
<script setup lang="ts" name="Config">
89+
import { dateFormatter } from '@/utils/formatTime'
90+
import * as FileApi from '@/api/infra/file'
91+
import FileUploadForm from './form.vue'
92+
const message = useMessage() // 消息弹窗
93+
const { t } = useI18n() // 国际化
94+
95+
const loading = ref(true) // 列表的加载中
96+
const total = ref(0) // 列表的总页数
97+
const list = ref([]) // 列表的数据
98+
const queryParams = reactive({
99+
pageNo: 1,
100+
pageSize: 10,
101+
name: undefined,
102+
type: undefined,
103+
createTime: []
104+
})
105+
const queryFormRef = ref() // 搜索的表单
106+
107+
/** 查询参数列表 */
108+
const getList = async () => {
109+
loading.value = true
110+
try {
111+
const data = await FileApi.getFilePage(queryParams)
112+
list.value = data.list
113+
total.value = data.total
114+
} finally {
115+
loading.value = false
116+
}
117+
}
118+
119+
/** 搜索按钮操作 */
120+
const handleQuery = () => {
121+
queryParams.pageNo = 1
122+
getList()
123+
}
124+
125+
/** 重置按钮操作 */
126+
const resetQuery = () => {
127+
queryFormRef.value.resetFields()
128+
handleQuery()
129+
}
130+
131+
/** 添加/修改操作 */
132+
const modalRef = ref()
133+
const openModal = () => {
134+
modalRef.value.openModal()
135+
}
136+
137+
/** 删除按钮操作 */
138+
const handleDelete = async (id: number) => {
139+
try {
140+
// 删除的二次确认
141+
await message.delConfirm()
142+
// 发起删除
143+
await FileApi.deleteFile(id)
144+
message.success(t('common.delSuccess'))
145+
// 刷新列表
146+
await getList()
147+
} catch {}
148+
}
149+
150+
const sizeFormat = (row) => {
151+
const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
152+
const srcSize = parseFloat(row.size)
153+
const index = Math.floor(Math.log(srcSize) / Math.log(1024))
154+
const size = srcSize / Math.pow(1024, index)
155+
const sizeStr = size.toFixed(2) //保留的小数位数
156+
return sizeStr + ' ' + unitArr[index]
157+
}
158+
/** 初始化 **/
159+
onMounted(() => {
160+
getList()
161+
})
162+
</script>

0 commit comments

Comments
 (0)