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

Author: piexlmax

server/source/system/api.go

@@ -59,6 +59,10 @@ func (a *api) Initialize() error {
 		{ApiGroup: "菜单", Method: "POST", Path: "/menu/getMenuAuthority", Description: "获取指定角色menu"},
 		{ApiGroup: "菜单", Method: "POST", Path: "/menu/addMenuAuthority", Description: "增加menu和角色关联关系"},
 
+		{ApiGroup: "分片上传", Method: "POST", Path: "/fileUploadAndDownload/findFile", Description: "寻找目标文件（秒传）"},
+		{ApiGroup: "分片上传", Method: "POST", Path: "/fileUploadAndDownload/breakpointContinueFinish", Description: "断点续传"},
+		{ApiGroup: "分片上传", Method: "POST", Path: "/fileUploadAndDownload/removeChunk", Description: "上传完成"},
+
 		{ApiGroup: "文件上传与下载", Method: "POST", Path: "/fileUploadAndDownload/upload", Description: "文件上传示例"},
 		{ApiGroup: "文件上传与下载", Method: "POST", Path: "/fileUploadAndDownload/deleteFile", Description: "删除文件"},
 		{ApiGroup: "文件上传与下载", Method: "POST", Path: "/fileUploadAndDownload/getFileList", Description: "获取上传文件列表"},

server/source/system/casbin.go

@@ -54,6 +54,10 @@ func (c *casbin) Initialize() error {
 		{PType: "p", V0: "888", V1: "/user/setUserAuthority", V2: "POST"},
 		{PType: "p", V0: "888", V1: "/user/setUserAuthorities", V2: "POST"},
 
+		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/findFile", V2: "GET"},
+		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/breakpointContinueFinish", V2: "POST"},
+		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/removeChunk", V2: "POST"},
+
 		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/upload", V2: "POST"},
 		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/deleteFile", V2: "POST"},
 		{PType: "p", V0: "888", V1: "/fileUploadAndDownload/getFileList", V2: "POST"},

web/src/components/customPic/index.vue

@@ -15,52 +15,54 @@
 </template>
 
 <script>
-import noAvatar from '@/assets/noBody.png'
-import { mapGetters } from 'vuex'
-const path = import.meta.env.VITE_BASE_API
 export default {
-  name: 'CustomPic',
-  props: {
-    picType: {
-      type: String,
-      required: false,
-      default: 'avatar'
-    },
-    picSrc: {
-      type: String,
-      required: false,
-      default: ''
-    }
+  name: 'CustomPic'
+}
+</script>
+
+<script setup>
+import noAvatarPng from '@/assets/noBody.png'
+import { useStore } from 'vuex'
+import { computed, ref, defineProps } from 'vue-demi'
+const store = useStore()
+
+const props = defineProps({
+  picType: {
+    type: String,
+    required: false,
+    default: 'avatar'
   },
-  data() {
-    return {
-      noAvatar: noAvatar,
-      path: path + '/'
+  picSrc: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+const noAvatar = ref(noAvatarPng)
+const userInfo = computed(() => store.getters['user/userInfo'])
+
+const avatar = computed(() => {
+  if (props.picSrc === '') {
+    if (userInfo.value.headerImg !== '' && userInfo.value.headerImg.slice(0, 4) === 'http') {
+      return userInfo.value.headerImg
     }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo']),
-    avatar() {
-      if (this.picSrc === '') {
-        if (this.userInfo.headerImg !== '' && this.userInfo.headerImg.slice(0, 4) === 'http') {
-          return this.userInfo.headerImg
-        }
-        return this.path + this.userInfo.headerImg
-      } else {
-        if (this.picSrc !== '' && this.picSrc.slice(0, 4) === 'http') {
-          return this.picSrc
-        }
-        return this.path + this.picSrc
-      }
-    },
-    file() {
-      if (this.picSrc && this.picSrc.slice(0, 4) !== 'http') {
-        return this.path + this.picSrc
-      }
-      return this.picSrc
+    return path.value + userInfo.value.headerImg
+  } else {
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
     }
+    return path.value + props.picSrc
   }
-}
+})
+const file = computed(() => {
+  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
+    return path.value + props.picSrc
+  }
+  return props.picSrc
+})
+
 </script>
 
 <style scoped>

web/src/components/upload/image.vue

@@ -14,17 +14,15 @@
   </div>
 </template>
 
-<script>
-const path = import.meta.env.VITE_BASE_API
-import { mapGetters } from 'vuex'
+<script setup>
 import ImageCompress from '@/utils/image'
-export default {
-  name: 'UploadImage',
-  model: {
-    prop: 'imageUrl',
-    event: 'change'
-  },
-  props: {
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+const store = useStore()
+
+const emit = defineEmits(['on-success'])
+const props = defineProps({
     imageUrl: {
       type: String,
       default: ''
@@ -37,43 +35,45 @@ export default {
       type: Number,
       default: 1920 // 图片长宽上限
     }
-  },
-  data() {
-    return {
-      path: path
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token']),
-    showImageUrl() {
-      return (this.imageUrl && this.imageUrl.slice(0, 4) !== 'http') ? path + this.imageUrl : this.imageUrl
-    }
-  },
-  methods: {
-    beforeImageUpload(file) {
+  })
+
+
+const path = ref(import.meta.env.VITE_BASE_API)
+const token = computed(()=>store.getters['user/token'])
+const showImageUrl = computed(()=>(props.imageUrl && props.imageUrl.slice(0, 4) !== 'http') ? path.value + props.imageUrl : props.imageUrl)
+
+const beforeImageUpload = (file) => {
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
       if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 jpg或png 格式!')
+        ElMessage.error('上传头像图片只能是 jpg或png 格式!')
         return false
       }
 
-      const isRightSize = file.size / 1024 < this.fileSize
+      const isRightSize = file.size / 1024 < props.fileSize
       if (!isRightSize) {
         // 压缩
-        const compress = new ImageCompress(file, this.fileSize, this.maxWH)
+        const compress = new ImageCompress(file, props.fileSize, props.maxWH)
         return compress.compress()
       }
       return isRightSize
-    },
-    handleImageSuccess(res) {
-      // this.imageUrl = URL.createObjectURL(file.raw);
+    }
+
+    const handleImageSuccess = (res) => {
       const { data } = res
       if (data.file) {
-        this.$emit('change', data.file.url)
-        this.$emit('on-success')
+        emit('on-success',data.file.url)
       }
     }
+
+</script>
+
+<script>
+
+export default {
+  name: 'UploadImage',
+  methods: {
+    
   }
 }
 </script>

web/src/components/warningBar/warningBar.vue

@@ -10,20 +10,15 @@
     </span>
   </div>
 </template>
-<script>
+<script setup>
 import { WarningFilled } from '@element-plus/icons'
-
-export default {
-  components: {
-    [WarningFilled.name]: WarningFilled
+import { defineProps } from 'vue'
+defineProps({
+  title: {
+    type: String,
+    default: ''
   },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-  }
-}
+})
 </script>
 <style lang="scss" scoped>
 .warning-bar{

web/src/mixins/infoList.js

@@ -1,4 +1,5 @@
 import { formatTimeToStr } from '@/utils/date'
+import { getDict } from '@/utils/dictionary'
 
 export const formatBoolean = (bool) => {
   if (bool !== null) {
@@ -15,3 +16,13 @@ export const formatDate = (time) => {
     return ''
   }
 }
+
+export const filterDict = (value, options) => {
+  const rowLabel = options && options.filter(item => item.value === value)
+  return rowLabel && rowLabel[0] && rowLabel[0].label
+}
+
+export const getDictFunc = async(type) => {
+  const dicts = await getDict(type)
+  return dicts
+}