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

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,12 +15,18 @@
 </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: {
+  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,
@@ -31,36 +37,32 @@ export default {
     required: false,
     default: ''
   }
-  },
-  data() {
-    return {
-      noAvatar: noAvatar,
-      path: path + '/'
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo']),
-    avatar() {
-      if (this.picSrc === '') {
-        if (this.userInfo.headerImg !== '' && this.userInfo.headerImg.slice(0, 4) === 'http') {
-          return this.userInfo.headerImg
+})
+
+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
     }
-        return this.path + this.userInfo.headerImg
+    return path.value + userInfo.value.headerImg
   } else {
-        if (this.picSrc !== '' && this.picSrc.slice(0, 4) === 'http') {
-          return this.picSrc
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
     }
-        return this.path + this.picSrc
-      }
-    },
-    file() {
-      if (this.picSrc && this.picSrc.slice(0, 4) !== 'http') {
-        return this.path + this.picSrc
+    return path.value + props.picSrc
   }
-      return this.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
-  },
-  props: {
+import { defineProps } from 'vue'
+defineProps({
   title: {
     type: String,
     default: ''
   },
-  }
-}
+})
 </script>
 <style lang="scss" scoped>
 .warning-bar{

web/src/mixins/infoList.js

@@ -1,61 +0,0 @@
-import { getDict } from '@/utils/dictionary'
-import { formatTimeToStr } from '@/utils/date'
-
-export default {
-  data() {
-    return {
-      page: 1,
-      total: 10,
-      pageSize: 10,
-      tableData: [],
-      searchInfo: {}
-    }
-  },
-  methods: {
-    formatBoolean: function(bool) {
-      if (bool !== null) {
-        return bool ? '是' : '否'
-      } else {
-        return ''
-      }
-    },
-    formatDate: function(time) {
-      if (time !== null && time !== '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
-      } else {
-        return ''
-      }
-    },
-    filterDict(value, type) {
-      const rowLabel = this[type + 'Options'] && this[type + 'Options'].filter(item => item.value === value)
-      return rowLabel && rowLabel[0] && rowLabel[0].label
-    },
-    async getDict(type) {
-      const dicts = await getDict(type)
-      this[type + 'Options'] = dicts
-      return dicts
-    },
-    handleSizeChange(val) {
-      this.pageSize = val
-      this.getTableData()
-    },
-    handleCurrentChange(val) {
-      this.page = val
-      this.getTableData()
-    },
-    // @params beforeFunc function 请求发起前执行的函数 默认为空函数
-    // @params afterFunc function 请求完成后执行的函数 默认为空函数
-    async getTableData(beforeFunc = () => {}, afterFunc = () => {}) {
-      beforeFunc()
-      const table = await this.listApi({ page: this.page, pageSize: this.pageSize, ...this.searchInfo })
-      if (table.code === 0) {
-        this.tableData = table.data.list
-        this.total = table.data.total
-        this.page = table.data.page
-        this.pageSize = table.data.pageSize
-      }
-      afterFunc()
-    }
-  }
-}

web/src/utils/format.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
+}

web/src/view/about/index.vue

@@ -108,31 +108,27 @@
 </template>
 
 <script>
-import { Commits, Members } from '@/api/github'
 export default {
   name: 'About',
-  data() {
-    return {
-      messageWhenNoItems: 'There arent commits',
-      members: [],
-      dataTimeline: [],
-      page: 0,
-    }
-  },
-  created() {
-    this.loadCommits()
-    this.loadMembers()
-  },
-  methods: {
-    loadMore() {
-      this.page++
-      this.loadCommits()
-    },
-    loadCommits() {
-      Commits(this.page).then(({ data }) => {
+}
+</script>
+
+<script setup>
+import { ref } from 'vue'
+import { Commits, Members } from '@/api/github'
+const members = ref([])
+const dataTimeline = ref([])
+const page = ref(0)
+
+const loadMore = () => {
+  page.value++
+  loadCommits()
+}
+const loadCommits = () => {
+  Commits(page.value).then(({ data }) => {
     data.forEach((element) => {
       if (element.commit.message) {
-            this.dataTimeline.push({
+        dataTimeline.value.push({
           from: new Date(element.commit.author.date),
           title: element.commit.author.name,
           showDayAndMonth: true,
@@ -141,15 +137,17 @@ export default {
       }
     })
   })
-    },
-    loadMembers() {
+}
+const loadMembers = () => {
   Members().then(({ data }) => {
-        this.members = data
-        this.members.sort()
+    members.value = data
+    members.value.sort()
   })
-    },
-  },
 }
+
+loadCommits()
+loadMembers()
+
 </script>
 
 <style scoped>

web/src/view/dashboard/dashboardCharts/echartsLine.vue

@@ -9,9 +9,9 @@
     />
   </div>
 </template>
-<script>
+<script setup>
 import * as echarts from 'echarts'
-import { toRaw } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import 'echarts/theme/macarons'
 
 var dataAxis = []
@@ -40,32 +40,14 @@ for (var i = 0; i < data.length; i++) {
   dataShadow.push(yMax)
 }
 
-export default {
-  name: 'Line',
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeUnmount() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.echart, 'macarons')
-      this.setOptions()
-    },
-    setOptions() {
-      toRaw(this.chart).setOption({
+const chart = ref(null)
+const echart = ref(null)
+const initChart = () => {
+  chart.value = echarts.init(echart.value, 'macarons')
+  setOptions()
+}
+const setOptions = () => {
+  chart.value.setOption({
     grid: {
       left: '40',
       right: '20',
@@ -117,9 +99,20 @@ export default {
       },
     ],
   })
-    },
-  },
 }
+
+onMounted(async() => {
+  await nextTick()
+  initChart()
+})
+
+onUnmounted(() => {
+  if (!chart.value) {
+    return
+  }
+  chart.value.dispose()
+  chart.value = null
+})
 </script>
 <style lang="scss" scoped>
 .dashboard-line-box {

web/src/view/dashboard/dashboardTable/dashboardTable.vue

@@ -14,25 +14,24 @@
 </template>
 
 <script>
+export default {
+  name: 'DashboardTable',
+}
+</script>
+<script setup>
 import { Commits } from '@/api/github'
 import { formatTimeToStr } from '@/utils/date.js'
-export default {
-  data() {
-    return {
-      loading: true,
-      dataTimeline: [],
-    }
-  },
-  created() {
-    this.loadCommits()
-  },
-  methods: {
-    loadCommits() {
+import { ref } from 'vue-demi'
+
+const loading = ref(true)
+const dataTimeline = ref([])
+
+const loadCommits = () => {
   Commits(0).then(({ data }) => {
-        this.loading = false
+    loading.value = false
     data.forEach((element, index) => {
       if (element.commit.message && index < 10) {
-            this.dataTimeline.push({
+        dataTimeline.value.push({
           from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
           title: element.commit.author.name,
           showDayAndMonth: true,
@@ -41,10 +40,11 @@ export default {
       }
     })
   })
-    },
-  }
 }
+
+loadCommits()
 </script>
+
 <style lang="scss" scoped>
 .commit-table{
     background-color: #fff;

web/src/view/dashboard/index.vue

@@ -103,18 +103,14 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
 import echartsLine from '@/view/dashboard/dashboardCharts/echartsLine.vue'
 import dashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
-export default {
-  name: 'Dashboard',
-  components: {
-    echartsLine,
-    dashboardTable
-  },
-  data() {
-    return {
-      toolCards: [
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const toolCards = ref([
   {
     label: '用户管理',
     icon: 'monitor',
@@ -157,14 +153,18 @@ export default {
     color: '#5cdbd3',
     bg: 'rgba(92, 219, 211,.3)'
   }
-      ]
-    }
-  },
-  methods: {
-    toTarget(name) {
-      this.$router.push({ name })
-    }
-  }
+])
+
+const router = useRouter()
+
+const toTarget = (name) => {
+  router.push({ name })
+}
+
+</script>
+<script>
+export default {
+  name: 'Dashboard'
 }
 </script>
 

web/src/view/example/breakpoint/breakpoint.vue

@@ -5,7 +5,7 @@
       <form id="fromCont" method="post">
         <div class="fileUpload" @click="inputChange">
           选择文件
-          <input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile">
+          <input v-show="false" id="file" ref="FileInput" multiple="multiple" type="file" @change="choseFile">
         </div>
       </form>
       <el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button>
@@ -28,7 +28,7 @@
 
 </template>
 
-<script>
+<script setup>
 import SparkMD5 from 'spark-md5'
 import axios from 'axios'
 import {
@@ -36,59 +36,55 @@ import {
   breakpointContinueFinish,
   removeChunk
 } from '@/api/breakpoint'
-export default {
-  name: 'BreakPoint',
-  data() {
-    return {
-      file: null,
-      fileMd5: '',
-      formDataList: [],
-      waitUpLoad: [],
-      waitNum: 0,
-      limitFileSize: false,
-      percentage: 0,
-      percentageFlage: true,
-      customColor: '#409eff'
-    }
-  },
-  methods: {
-    // 选中文件的函数
-    async choseFile(e) {
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const file = ref(null)
+const fileMd5 = ref('')
+const formDataList = ref([])
+const waitUpLoad = ref([])
+const waitNum = ref(0)
+const limitFileSize = ref(false)
+const percentage = ref(0)
+const percentageFlage = ref(true)
+
+// 选中文件的函数
+const choseFile = async(e) => {
   const fileR = new FileReader() // 创建一个reader用来读取文件流
-      const file = e.target.files[0] // 获取当前文件
+  const fileInput = e.target.files[0] // 获取当前文件
   const maxSize = 5 * 1024 * 1024
-      this.file = file // file 丢全局方便后面用 可以改进为func传参形式
-      this.percentage = 0
-      if (file.size < maxSize) {
-        fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer  主要为了保持跟后端的流一致
+  file.value = fileInput // file 丢全局方便后面用 可以改进为func传参形式
+  percentage.value = 0
+  if (file.value.size < maxSize) {
+    fileR.readAsArrayBuffer(file.value) // 把文件读成ArrayBuffer  主要为了保持跟后端的流一致
     fileR.onload = async e => {
       // 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
       const blob = e.target.result
       const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我）
       spark.append(blob) // 文件流丢进工具
-          this.fileMd5 = spark.end() // 工具结束 产生一个a 总文件的md5
+      fileMd5.value = spark.end() // 工具结束 产生一个a 总文件的md5
       const FileSliceCap = 1 * 1024 * 1024 // 分片字节数
       let start = 0 // 定义分片开始切的地方
       let end = 0 // 每片结束切的地方a
       let i = 0 // 第几片
-          this.formDataList = [] // 分片存储的一个池子 丢全局
-          while (end < file.size) {
+      formDataList.value = [] // 分片存储的一个池子 丢全局
+      while (end < file.value.size) {
         // 当结尾数字大于文件总size的时候 结束切片
         start = i * FileSliceCap // 计算每片开始位置
         end = (i + 1) * FileSliceCap // 计算每片结束位置
-            var fileSlice = this.file.slice(start, end) // 开始切  file.slice 为 h5方法 对文件切片 参数为 起止字节数
+        var fileSlice = file.value.slice(start, end) // 开始切  file.slice 为 h5方法 对文件切片 参数为 起止字节数
         const formData = new window.FormData() // 创建FormData用于存储传给后端的信息
-            formData.append('fileMd5', this.fileMd5) // 存储总文件的Md5 让后端知道自己是谁的切片
+        formData.append('fileMd5', fileMd5.value) // 存储总文件的Md5 让后端知道自己是谁的切片
         formData.append('file', fileSlice) // 当前的切片
         formData.append('chunkNumber', i) // 当前是第几片
-            formData.append('fileName', this.file.name) // 当前文件的文件名 用于后端文件切片的命名  formData.appen 为 formData对象添加参数的方法
-            this.formDataList.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
+        formData.append('fileName', file.value.name) // 当前文件的文件名 用于后端文件切片的命名  formData.appen 为 formData对象添加参数的方法
+        formDataList.value.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
         i++
       }
       const params = {
-            fileName: this.file.name,
-            fileMd5: this.fileMd5,
-            chunkTotal: this.formDataList.length
+        fileName: file.value.name,
+        fileMd5: fileMd5.value,
+        chunkTotal: formDataList.value.length
       }
       const res = await findFile(params)
       // 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片
@@ -96,75 +92,93 @@ export default {
       const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能）
       if (!IsFinish) {
         // 当是断点续传时候
-            this.waitUpLoad = this.formDataList.filter(all => {
+        waitUpLoad.value = formDataList.value.filter(all => {
           return !(
             finishList &&
               finishList.some(fi => fi.FileChunkNumber === all.key)
           ) // 找出需要上传的切片
         })
       } else {
-            this.waitUpLoad = [] // 秒传则没有需要上传的切片
+        waitUpLoad.value = [] // 秒传则没有需要上传的切片
       }
-          this.waitNum = this.waitUpLoad.length // 记录长度用于百分比展示
+      waitNum.value = waitUpLoad.value.length // 记录长度用于百分比展示
     }
   } else {
-        this.limitFileSize = true
-        this.$message('请上传小于5M文件')
+    limitFileSize.value = true
+    ElMessage('请上传小于5M文件')
   }
-    },
-    getFile() {
+}
+
+const getFile = () => {
   // 确定按钮
-      if (this.file === null) {
-        this.$message('请先上传文件')
+  if (file.value === null) {
+    ElMessage('请先上传文件')
     return
   }
-      this.percentage = Math.floor(((this.formDataList.length - this.waitNum) / this.formDataList.length) * 100)
-      if (this.percentage === 100) {
-        this.percentageFlage = false
+  percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100)
+  if (percentage.value === 100) {
+    percentageFlage.value = false
   }
-      this.sliceFile() // 上传切片
-    },
-    sliceFile() {
-      this.waitUpLoad &&
-        this.waitUpLoad.forEach(item => {
+  sliceFile() // 上传切片
+}
+
+const sliceFile = () => {
+  waitUpLoad.value &&
+        waitUpLoad.value.forEach(item => {
           // 需要上传的切片
-          item.formData.append('chunkTotal', this.formDataList.length) // 切片总数携带给后台 总有用的
+          item.formData.append('chunkTotal', formDataList.value.length) // 切片总数携带给后台 总有用的
           const fileR = new FileReader() // 功能同上
-          const file = item.formData.get('file')
-          fileR.readAsArrayBuffer(file)
+          const fileF = item.formData.get('file')
+          fileR.readAsArrayBuffer(fileF)
           fileR.onload = e => {
             const spark = new SparkMD5.ArrayBuffer()
             spark.append(e.target.result)
             item.formData.append('chunkMd5', spark.end()) // 获取当前切片md5 后端用于验证切片完整性
-            this.upLoadFileSlice(item)
+            upLoadFileSlice(item)
           }
         })
-    },
-    async upLoadFileSlice(item) {
+}
+
+const upLoadFileSlice = async(item) => {
   // 切片上传
   await axios.post(import.meta.env.VITE_BASE_API + '/fileUploadAndDownload/breakpointContinue', item.formData)
-      this.waitNum-- // 百分数增加
-      if (this.waitNum === 0) {
+  waitNum.value-- // 百分数增加
+  if (waitNum.value === 0) {
     // 切片传完以后 合成文件
     const params = {
-          fileName: this.file.name,
-          fileMd5: this.fileMd5
+      fileName: file.value.name,
+      fileMd5: fileMd5.value
     }
     const res = await breakpointContinueFinish(params)
     if (res.success) {
       // 合成文件过后 删除缓存切片
       const params = {
-            fileName: this.file.name,
-            fileMd5: this.fileMd5,
+        fileName: file.value.name,
+        fileMd5: fileMd5.value,
         filePath: res.data.filePath
       }
       await removeChunk(params)
     }
   }
-    },
-    inputChange() {
-      this.$refs.Input.dispatchEvent(new MouseEvent('click'))
+}
+
+const FileInput = ref(null)
+const inputChange = () => {
+  FileInput.value.dispatchEvent(new MouseEvent('click'))
+}
+</script>
+
+<script>
+
+export default {
+  name: 'BreakPoint',
+  data() {
+    return {
+
     }
+  },
+  methods: {
+
   }
 }
 </script>

web/src/view/example/customer/customer.vue

@@ -68,7 +68,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {
   createExaCustomer,
   updateExaCustomer,
@@ -76,82 +76,107 @@ import {
   getExaCustomer,
   getExaCustomerList
 } from '@/api/customer'
-import infoList from '@/mixins/infoList'
 import warningBar from '@/components/warningBar/warningBar.vue'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { formatDate } from '@/utils/format'
 
-export default {
-  name: 'Customer',
-  components: { warningBar },
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getExaCustomerList,
-      dialogFormVisible: false,
-      type: '',
-      form: {
+const dialogFormVisible = ref(false)
+const type = ref('')
+const form = ref({
   customerName: '',
   customerPhoneData: ''
+})
+
+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 getExaCustomerList({ 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
   }
-    }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async updateCustomer(row) {
+}
+
+getTableData()
+
+const updateCustomer = async(row) => {
   const res = await getExaCustomer({ ID: row.ID })
-      this.type = 'update'
+  type.value = 'update'
   if (res.code === 0) {
-        this.form = res.data.customer
-        this.dialogFormVisible = true
+    form.value = res.data.customer
+    dialogFormVisible.value = true
   }
-    },
-    closeDialog() {
-      this.dialogFormVisible = false
-      this.form = {
+}
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  form.value = {
     customerName: '',
     customerPhoneData: ''
   }
-    },
-    async deleteCustomer(row) {
+}
+const deleteCustomer = async(row) => {
   row.visible = false
   const res = await deleteExaCustomer({ ID: row.ID })
   if (res.code === 0) {
-        this.$message({
+    ElMessage({
       type: 'success',
       message: '删除成功'
     })
-        if (this.tableData.length === 1 && this.page > 1) {
-          this.page--
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
     }
-        this.getTableData()
+    getTableData()
   }
-    },
-    async enterDialog() {
+}
+const enterDialog = async() => {
   let res
-      switch (this.type) {
+  switch (type.value) {
     case 'create':
-          res = await createExaCustomer(this.form)
+      res = await createExaCustomer(form.value)
       break
     case 'update':
-          res = await updateExaCustomer(this.form)
+      res = await updateExaCustomer(form.value)
       break
     default:
-          res = await createExaCustomer(this.form)
+      res = await createExaCustomer(form.value)
       break
   }
 
   if (res.code === 0) {
-        this.closeDialog()
-        this.getTableData()
-      }
-    },
-    openDialog() {
-      this.type = 'create'
-      this.dialogFormVisible = true
-    }
+    closeDialog()
+    getTableData()
   }
 }
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
+
+</script>
+
+<script>
+
+export default {
+  name: 'Customer'
+}
 </script>
 
 <style></style>

web/src/view/example/excel/excel.vue

@@ -34,43 +34,51 @@
 </template>
 
 <script>
-const path = import.meta.env.VITE_BASE_API
-import { mapGetters } from 'vuex'
-import infoList from '@/mixins/infoList'
-import { exportExcel, loadExcelData, downloadTemplate } from '@/api/excel'
-import { getMenuList } from '@/api/menu'
 export default {
   name: 'Excel',
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getMenuList,
-      path: path
+}
+</script>
+
+<script setup>
+import { useStore } from 'vuex'
+import { exportExcel, loadExcelData, downloadTemplate } from '@/api/excel'
+import { getMenuList } from '@/api/menu'
+import { computed, ref } from 'vue'
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(999)
+const tableData = ref([])
+
+// 查询
+const getTableData = async(f = () => {}) => {
+  const table = await f({ 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
   }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token'])
-  },
-  created() {
-    this.pageSize = 999
-    this.getTableData()
-  },
-  methods: {
-    handleExcelExport(fileName) {
+}
+getTableData(getMenuList)
+
+const store = useStore()
+const token = computed(() => store.getters['user/token'])
+
+const handleExcelExport = (fileName) => {
   if (!fileName || typeof fileName !== 'string') {
     fileName = 'ExcelExport.xlsx'
   }
-      exportExcel(this.tableData, fileName)
-    },
-    loadExcel() {
-      this.listApi = loadExcelData
-      this.getTableData()
-    },
-    downloadExcelTemplate() {
+  exportExcel(tableData.value, fileName)
+}
+const loadExcel = () => {
+  getTableData(loadExcelData)
+}
+const downloadExcelTemplate = () => {
   downloadTemplate('ExcelTemplate.xlsx')
-    }
-  }
 }
+
 </script>
 
 <style lang="scss" scoped>

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,39 +66,55 @@
   </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: ''
+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
   }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token'])
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async deleteFile(row) {
-      this.$confirm('此操作将永久文件, 是否继续?', '提示', {
+}
+getTableData()
+
+const deleteFileFunc = async(row) => {
+  ElMessageBox.confirm('此操作将永久文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
@@ -106,71 +122,77 @@ export default {
     .then(async() => {
       const res = await deleteFile(row)
       if (res.code === 0) {
-            this.$message({
+        ElMessage({
           type: 'success',
           message: '删除成功!'
         })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
         }
-            this.getTableData()
+        getTableData()
       }
     })
     .catch(() => {
-          this.$message({
+      ElMessage({
         type: 'info',
         message: '已取消删除'
       })
     })
-    },
-    checkFile(file) {
-      this.fullscreenLoading = true
+}
+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) {
-        this.$message.error('上传图片只能是 jpg或png 格式!')
-        this.fullscreenLoading = false
+    ElMessage.error('上传图片只能是 jpg或png 格式!')
+    fullscreenLoading.value = false
   }
   if (!isLt2M) {
-        this.$message.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
-        this.fullscreenLoading = false
+    ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
+    fullscreenLoading.value = false
   }
   return (isPng || isJPG) && isLt2M
-    },
-    uploadSuccess(res) {
-      this.fullscreenLoading = false
+}
+const uploadSuccess = (res) => {
+  fullscreenLoading.value = false
   if (res.code === 0) {
-        this.$message({
+    ElMessage({
       type: 'success',
       message: '上传成功'
     })
     if (res.code === 0) {
-          this.getTableData()
+      getTableData()
     }
   } else {
-        this.$message({
+    ElMessage({
       type: 'warning',
       message: res.msg
     })
   }
-    },
-    uploadError() {
-      this.$message({
+}
+const uploadError = () => {
+  ElMessage({
     type: 'error',
     message: '上传失败'
   })
-      this.fullscreenLoading = false
-    },
-    downloadFile(row) {
+  fullscreenLoading.value = false
+}
+const 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)
-      }
-    }
+    downloadImage(path.value + row.url, row.name)
   }
 }
+
+</script>
+
+<script>
+
+export default {
+  name: 'Upload'
+}
 </script>
 <style scoped>
 .upload-btn+.upload-btn {

web/src/view/superAdmin/menu/menu.vue

@@ -412,13 +412,8 @@ const editMenu = async(id) => {
 </script>
 
 <script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
-
 export default {
   name: 'Menus',
-  methods: {
-
-  }
 }
 </script>
 

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -209,9 +209,9 @@ const deleteSysOperationRecordFunc = async(row) => {
       message: '删除成功'
     })
     if (tableData.value.length === 1 && page.value > 1) {
-      this.page--
+      page.value--
     }
-    this.getTableData()
+    getTableData()
   }
 }
 const fmtBody = (value) => {

web/src/view/system/state.vue

@@ -138,37 +138,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { getSystemState } from '@/api/system'
-export default {
-  name: 'State',
-  data() {
-    return {
-      timer: null,
-      state: {},
-      colors: [
+import { onUnmounted, ref } from 'vue'
+const timer = ref(null)
+const state = ref({})
+const colors = ref([
   { color: '#5cb87a', percentage: 20 },
   { color: '#e6a23c', percentage: 40 },
   { color: '#f56c6c', percentage: 80 }
-      ]
-    }
-  },
-  created() {
-    this.reload()
-    this.timer = setInterval(() => {
-      this.reload()
-    }, 1000 * 10)
-  },
-  beforeUnmount() {
-    clearInterval(this.timer)
-    this.timer = null
-  },
-  methods: {
-    async reload() {
+])
+
+const reload = async() => {
   const { data } = await getSystemState()
-      this.state = data.server
-    }
-  }
+  state.value = data.server
+}
+
+reload()
+timer.value = setInterval(() => {
+  reload()
+}, 1000 * 10)
+
+onUnmounted(() => {
+  clearInterval(timer.value)
+  timer.value = null
+})
+
+</script>
+
+<script>
+export default {
+  name: 'State',
 }
 </script>
 

web/src/view/systemTools/autoCode/component/previewCodeDialg.vue

@@ -25,6 +25,7 @@ const props = defineProps({
   }
 })
 
+const activeName = ref('')
 onMounted(() => {
   marked.setOptions({
     renderer: new marked.Renderer(),
@@ -41,15 +42,13 @@ onMounted(() => {
     xhtml: false
   })
   for (const key in props.previewCode) {
-    if (this.activeName === '') {
-      this.activeName = key
+    if (activeName.value === '') {
+      activeName.value = key
     }
     document.getElementById(key).innerHTML = marked(props.previewCode[key])
   }
 })
 
-const activeName = ref('')
-
 const selectText = () => {
   const element = document.getElementById(activeName.value)
   if (document.body.createTextRange) {

web/src/view/systemTools/system/system.vue

@@ -2,7 +2,7 @@
   <div class="system">
     <el-form ref="form" :model="config" label-width="240px">
       <!--  System start  -->
-      <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse v-model="activeNames">
         <el-collapse-item title="系统配置" name="1">
           <el-form-item label="环境值">
             <el-input v-model="config.system.env" />