前端页面改造基本完成 待优化

web/src/view/example/upload/upload.vue

@@ -14,7 +14,7 @@
           <el-button size="mini" type="primary">普通上传</el-button>
         </el-upload>
         <upload-image
-          v-model="imageUrl"
+          v-model:imageUrl="imageUrl"
           :file-size="512"
           :max-w-h="1080"
           class="upload-btn"
@@ -46,7 +46,7 @@
         <el-table-column align="left" label="操作" width="160">
           <template #default="scope">
             <el-button size="small" icon="download" type="text" @click="downloadFile(scope.row)">下载</el-button>
-            <el-button size="small" icon="delete" type="text" @click="deleteFile(scope.row)">删除</el-button>
+            <el-button size="small" icon="delete" type="text" @click="deleteFileFunc(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -66,111 +66,133 @@
   </div>
 </template>
 
-<script>
-const path = import.meta.env.VITE_BASE_API
-import { mapGetters } from 'vuex'
-import infoList from '@/mixins/infoList'
+<script setup>
+import { useStore } from 'vuex'
 import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
 import { downloadImage } from '@/utils/downloadImg'
 import CustomPic from '@/components/customPic/index.vue'
 import UploadImage from '@/components/upload/image.vue'
-export default {
-  name: 'Upload',
-  components: {
-    CustomPic,
-    UploadImage
-  },
-  mixins: [infoList],
-  data() {
-    return {
-      fullscreenLoading: false,
-      listApi: getFileList,
-      path: path,
-      tableData: [],
-      imageUrl: ''
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token'])
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async deleteFile(row) {
-      this.$confirm('此操作将永久文件, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          const res = await deleteFile(row)
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
-            }
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
-    },
-    checkFile(file) {
-      this.fullscreenLoading = true
-      const isJPG = file.type === 'image/jpeg'
-      const isPng = file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 0.5
-      if (!isJPG && !isPng) {
-        this.$message.error('上传图片只能是 jpg或png 格式!')
-        this.fullscreenLoading = false
-      }
-      if (!isLt2M) {
-        this.$message.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
-        this.fullscreenLoading = false
-      }
-      return (isPng || isJPG) && isLt2M
-    },
-    uploadSuccess(res) {
-      this.fullscreenLoading = false
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '上传成功'
-        })
-        if (res.code === 0) {
-          this.getTableData()
-        }
-      } else {
-        this.$message({
-          type: 'warning',
-          message: res.msg
-        })
-      }
-    },
-    uploadError() {
-      this.$message({
-        type: 'error',
-        message: '上传失败'
-      })
-      this.fullscreenLoading = false
-    },
-    downloadFile(row) {
-      if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
-        downloadImage(row.url, row.name)
-      } else {
-        downloadImage(this.path + row.url, row.name)
-      }
-    }
+import { formatDate } from '@/utils/format'
+
+import { computed, ref } from 'vue-demi'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const store = useStore()
+
+const path = ref(import.meta.env.VITE_BASE_API)
+const token = computed(() => store.getters['user/token'])
+
+const fullscreenLoading = ref(false)
+const imageUrl = ref('')
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async() => {
+  const table = await getFileList({ page: page.value, pageSize: pageSize.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
   }
 }
+getTableData()
+
+const deleteFileFunc = async(row) => {
+  ElMessageBox.confirm('此操作将永久文件, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async() => {
+      const res = await deleteFile(row)
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        getTableData()
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除'
+      })
+    })
+}
+const checkFile = (file) => {
+  fullscreenLoading.value = true
+  const isJPG = file.type === 'image/jpeg'
+  const isPng = file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 0.5
+  if (!isJPG && !isPng) {
+    ElMessage.error('上传图片只能是 jpg或png 格式!')
+    fullscreenLoading.value = false
+  }
+  if (!isLt2M) {
+    ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
+    fullscreenLoading.value = false
+  }
+  return (isPng || isJPG) && isLt2M
+}
+const uploadSuccess = (res) => {
+  fullscreenLoading.value = false
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '上传成功'
+    })
+    if (res.code === 0) {
+      getTableData()
+    }
+  } else {
+    ElMessage({
+      type: 'warning',
+      message: res.msg
+    })
+  }
+}
+const uploadError = () => {
+  ElMessage({
+    type: 'error',
+    message: '上传失败'
+  })
+  fullscreenLoading.value = false
+}
+const downloadFile = (row) => {
+  if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
+    downloadImage(row.url, row.name)
+  } else {
+    downloadImage(path.value + row.url, row.name)
+  }
+}
+
+</script>
+
+<script>
+
+export default {
+  name: 'Upload'
+}
 </script>
 <style scoped>
 .upload-btn+.upload-btn {