11<template >
22 <div v-loading.fullscreen.lock =" fullscreenLoading" >
33 <div class =" gva-table-box" >
4+ <warning-bar
5+ title =" 点击“文件名/备注”可以编辑文件名或者备注内容。"
6+ />
47 <div class =" gva-btn-list" >
58 <upload-common
6- v-model:imageCommon =" imageCommon"
7- class =" upload-btn"
8- @on-success =" getTableData"
9+ v-model:imageCommon =" imageCommon"
10+ class =" upload-btn"
11+ @on-success =" getTableData"
912 />
1013 <upload-image
11- v-model:imageUrl =" imageUrl"
12- :file-size =" 512"
13- :max-w-h =" 1080"
14- class =" upload-btn"
15- @on-success =" getTableData"
14+ v-model:imageUrl =" imageUrl"
15+ :file-size =" 512"
16+ :max-w-h =" 1080"
17+ class =" upload-btn"
18+ @on-success =" getTableData"
1619 />
1720
18-
1921 <el-form ref =" searchForm" :inline =" true" :model =" search" >
2022 <el-form-item label =" " >
21- <el-input v-model =" search.keyword" class =" keyword" placeholder =" 请输入文件名或备注" />
23+ <el-input v-model =" search.keyword" class =" keyword" placeholder =" 请输入文件名或备注" />
2224 </el-form-item >
2325
2426 <el-form-item >
3133 <el-table :data =" tableData" >
3234 <el-table-column align =" left" label =" 预览" width =" 100" >
3335 <template #default =" scope " >
34- <CustomPic pic-type =" file" :pic-src =" scope.row.url" />
36+ <CustomPic pic-type =" file" :pic-src =" scope.row.url" />
3537 </template >
3638 </el-table-column >
3739 <el-table-column align =" left" label =" 日期" prop =" UpdatedAt" width =" 180" >
4143 </el-table-column >
4244 <el-table-column align =" left" label =" 文件名/备注" prop =" name" width =" 180" >
4345 <template #default =" scope " >
44- <div class =" name" @click =" editFileNameFunc(scope.row)" >{{scope.row.name}}</div >
46+ <div class =" name" @click =" editFileNameFunc(scope.row)" >{{ scope.row.name }}</div >
4547 </template >
4648 </el-table-column >
47- <el-table-column align =" left" label =" 链接" prop =" url" min-width =" 300" />
49+ <el-table-column align =" left" label =" 链接" prop =" url" min-width =" 300" />
4850 <el-table-column align =" left" label =" 标签" prop =" tag" width =" 100" >
4951 <template #default =" scope " >
5052 <el-tag
51- :type =" scope.row.tag === 'jpg' ? 'primary' : 'success'"
52- disable-transitions
53+ :type =" scope.row.tag === 'jpg' ? 'primary' : 'success'"
54+ disable-transitions
5355 >{{ scope.row.tag }}
5456 </el-tag >
5557 </template >
6365 </el-table >
6466 <div class =" gva-pagination" >
6567 <el-pagination
66- :current-page =" page"
67- :page-size =" pageSize"
68- :page-sizes =" [10, 30, 50, 100]"
69- :style =" { float: 'right', padding: '20px' }"
70- :total =" total"
71- layout =" total, sizes, prev, pager, next, jumper"
72- @current-change =" handleCurrentChange"
73- @size-change =" handleSizeChange"
68+ :current-page =" page"
69+ :page-size =" pageSize"
70+ :page-sizes =" [10, 30, 50, 100]"
71+ :style =" { float: 'right', padding: '20px' }"
72+ :total =" total"
73+ layout =" total, sizes, prev, pager, next, jumper"
74+ @current-change =" handleCurrentChange"
75+ @size-change =" handleSizeChange"
7476 />
7577 </div >
7678 </div >
@@ -85,6 +87,7 @@ import CustomPic from '@/components/customPic/index.vue'
8587import UploadImage from ' @/components/upload/image.vue'
8688import UploadCommon from ' @/components/upload/common.vue'
8789import { formatDate } from ' @/utils/format'
90+ import warningBar from ' @/components/warningBar/warningBar.vue'
8891
8992import { ref } from ' vue'
9093import { ElMessage , ElMessageBox } from ' element-plus'
@@ -130,25 +133,25 @@ const deleteFileFunc = async(row) => {
130133 cancelButtonText: ' 取消' ,
131134 type: ' warning' ,
132135 })
133- .then (async () => {
134- const res = await deleteFile (row)
135- if (res .code === 0 ) {
136- ElMessage ({
137- type: ' success' ,
138- message: ' 删除成功!' ,
139- })
140- if (tableData .value .length === 1 && page .value > 1 ) {
141- page .value --
142- }
143- getTableData ()
144- }
145- })
146- .catch (() => {
136+ .then (async () => {
137+ const res = await deleteFile (row)
138+ if (res .code === 0 ) {
147139 ElMessage ({
148- type: ' info ' ,
149- message: ' 已取消删除 ' ,
140+ type: ' success ' ,
141+ message: ' 删除成功! ' ,
150142 })
143+ if (tableData .value .length === 1 && page .value > 1 ) {
144+ page .value --
145+ }
146+ getTableData ()
147+ }
148+ })
149+ .catch (() => {
150+ ElMessage ({
151+ type: ' info' ,
152+ message: ' 已取消删除' ,
151153 })
154+ })
152155}
153156
154157const downloadFile = (row ) => {
@@ -170,10 +173,10 @@ const editFileNameFunc = async(row) => {
170173 cancelButtonText: ' 取消' ,
171174 inputPattern: / \S / ,
172175 inputErrorMessage: ' 不能为空' ,
173- inputValue: row .name
176+ inputValue: row .name
174177 }).then (async ({ value }) => {
175- row .name = value;
176- // console.log(row)
178+ row .name = value
179+ // console.log(row)
177180 const res = await editFileName (row)
178181 if (res .code === 0 ) {
179182 ElMessage ({
@@ -186,8 +189,8 @@ const editFileNameFunc = async(row) => {
186189 ElMessage ({
187190 type: ' info' ,
188191 message: ' 取消修改'
189- });
190- });
192+ })
193+ })
191194}
192195< / script>
193196
@@ -198,9 +201,10 @@ export default {
198201}
199202< / script>
200203< style scoped>
201- .name {
204+ .name {
202205 cursor: pointer;
203206}
207+
204208.upload - btn + .upload - btn {
205209 margin- left: 12px ;
206210}
0 commit comments