vue3版本初版上线 自测已可用

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

@@ -17,21 +17,25 @@
     >
       <el-table-column type="selection" width="55" />
       <el-table-column label="接入日期" width="180">
-        <template slot-scope="scope">{{ scope.row.CreatedAt|formatDate }}</template>
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.CreatedAt) }}</span>
+        </template>
       </el-table-column>
       <el-table-column label="姓名" prop="customerName" width="120" />
       <el-table-column label="电话" prop="customerPhoneData" width="120" />
       <el-table-column label="接入人ID" prop="sysUserId" width="120" />
       <el-table-column label="按钮组" min-width="160">
-        <template slot-scope="scope">
+        <template #default="scope">
           <el-button size="small" type="text" @click="updateCustomer(scope.row)">变更</el-button>
-          <el-popover v-model="scope.row.visible" placement="top" width="160">
+          <el-popover v-model:visible="scope.row.visible" placement="top" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
               <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
             </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
+            <template #reference>
+              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
+            </template>
           </el-popover>
         </template>
       </el-table-column>
@@ -48,7 +52,7 @@
       @size-change="handleSizeChange"
     />
 
-    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="客户">
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="客户">
       <el-form :inline="true" :model="form" label-width="80px">
         <el-form-item label="客户名">
           <el-input v-model="form.customerName" autocomplete="off" />
@@ -57,10 +61,12 @@
           <el-input v-model="form.customerPhoneData" autocomplete="off" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="closeDialog">取 消</el-button>
-        <el-button type="primary" @click="enterDialog">确 定</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
     </el-dialog>
     <div class="tips">在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示</div>
   </div>
@@ -74,21 +80,10 @@ import {
   getExaCustomer,
   getExaCustomerList
 } from '@/api/customer'
-import { formatTimeToStr } from '@/utils/date'
 import infoList from '@/mixins/infoList'
 
 export default {
   name: 'Customer',
-  filters: {
-    formatDate: function(time) {
-      if (time !== null && time !== '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
-      } else {
-        return ''
-      }
-    }
-  },
   mixins: [infoList],
   data() {
     return {

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

@@ -18,7 +18,8 @@
       <el-table-column label="路由Name" min-width="160" prop="name" />
       <el-table-column label="路由Path" min-width="160" prop="path" />
       <el-table-column label="是否隐藏" min-width="100" prop="hidden">
-        <template slot-scope="scope">
+
+        <template #default="scope">
           <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
         </template>
       </el-table-column>

web/src/view/example/index.vue

@@ -1,9 +1,17 @@
 <template>
   <div>
-    <keep-alive>
-      <router-view v-if="$route.meta.keepAlive" />
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive" />
+    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <component :is="Component" />
+      </transition>
+    </router-view>
   </div>
 </template>
 

web/src/view/example/simpleUploader/simpleUploader.vue

@@ -1,161 +0,0 @@
-<template>
-  <uploader
-    :options="options"
-    :file-status-text="statusText"
-    :auto-start="false"
-    class="uploader-example"
-    @file-added="fileAdded"
-    @file-progress="onFileProgress"
-    @file-success="onFileSuccess"
-    @file-error="onFileError"
-  >
-    <uploader-unsupport />
-    <uploader-drop>
-      <p>拖拽文件至此或点击</p>
-      <uploader-btn>选择文件</uploader-btn>
-    </uploader-drop>
-    <uploader-list />
-  </uploader>
-</template>
-
-<script>
-var notUploadedChunks = [] // 已经上传过的文件chunkNumber数组
-var isUploaded = false // 文件已经上传成功了
-import { mapGetters } from 'vuex'
-import { checkFileMd5, mergeFileMd5 } from '@/api/simpleUploader'
-import SparkMD5 from 'spark-md5'
-const path = process.env.VUE_APP_BASE_API
-export default {
-  name: 'SimpleUploader',
-  data() {
-    return {
-      md5: ''
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token']),
-    statusText() {
-      return {
-        success: '成功了',
-        error: '出错了',
-        uploading: '上传中',
-        paused: '暂停中',
-        waiting: '等待中'
-      }
-    },
-    options() {
-      return {
-        target: path + '/simpleUploader/upload',
-        testChunks: false,
-        simultaneousUploads: 5,
-        chunkSize: 2 * 1024 * 1024,
-        headers: {
-          'x-token': this.token,
-          'x-user-id': this.userInfo.ID
-        },
-        checkChunkUploadedByResponse(chunk) {
-          if (isUploaded) {
-            return true // return true 会忽略当前文件，不会再发送给后台
-          } else {
-            // 根据已经上传过的切片来进行忽略
-            return (
-              notUploadedChunks &&
-                notUploadedChunks.some(
-                  item => item.chunkNumber === chunk.offset + 1
-                )
-            )
-          }
-        }
-      }
-    }
-  },
-  methods: {
-
-    // 上传单个文件
-    fileAdded(file) {
-      this.computeMD5(file) // 生成MD5
-    },
-    // 计算MD5值
-    computeMD5(file) {
-      var that = this
-      isUploaded = false // 这个文件是否已经上传成功过
-      notUploadedChunks = [] // 未成功的chunkNumber
-      var fileReader = new FileReader()
-      var md5 = ''
-
-      file.pause()
-
-      fileReader.readAsArrayBuffer(file.file)
-      fileReader.onload = async function(e) {
-        if (file.size !== e.target.result.byteLength) {
-          this.error(
-            'Browser reported success but could not read the file until the end.'
-          )
-          return false
-        }
-        md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false)
-
-        file.uniqueIdentifier = md5
-        if (md5 !== '') {
-          const res = await checkFileMd5({ md5: md5 })
-          if (res.code === 0) {
-            if (res.data.isDone) {
-              // 上传成功过
-              isUploaded = true
-              that.$message({
-                message: '该文件已经上传成功过了，秒传成功。',
-                type: 'success'
-              })
-
-              file.cancel()
-            } else {
-              isUploaded = false
-              notUploadedChunks = res.data.chunks
-              if (notUploadedChunks.length) {
-                file.resume()
-              }
-            }
-          }
-        }
-      }
-      fileReader.onerror = function() {
-        this.error(
-          'generater md5 时FileReader异步读取文件出错了，FileReader onerror was triggered, maybe the browser aborted due to high memory usage.'
-        )
-        return false
-      }
-    },
-    // 上传进度
-    onFileProgress() {},
-    // 上传成功
-    async onFileSuccess(rootFile, file) {
-      await mergeFileMd5({ md5: file.uniqueIdentifier, fileName: file.name })
-    },
-    onFileError(rootFile, file, response) {
-      this.$message({
-        message: response,
-        type: 'error'
-      })
-    }
-  }
-}
-</script>
-
-<style>
-.uploader-example {
-  width: 880px;
-  padding: 15px;
-  margin: 15px 15px 20px;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-</style>

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

@@ -12,7 +12,9 @@
             :show-file-list="false"
           >
             <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            <template #tip>
+              <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </template>
           </el-upload>
         </el-col>
         <el-col :span="12">
@@ -24,19 +26,19 @@
 
       <el-table :data="tableData" border stripe>
         <el-table-column label="预览" width="100">
-          <template slot-scope="scope">
+          <template #default="scope">
             <CustomPic pic-type="file" :pic-src="scope.row.url" />
           </template>
         </el-table-column>
         <el-table-column label="日期" prop="UpdatedAt" width="180">
-          <template slot-scope="scope">
-            <div>{{ scope.row.UpdatedAt | formatDate }}</div>
+          <template #default="scope">
+            <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
           </template>
         </el-table-column>
         <el-table-column label="文件名" prop="name" width="180" />
         <el-table-column label="链接" prop="url" min-width="300" />
         <el-table-column label="标签" prop="tag" width="100">
-          <template slot-scope="scope">
+          <template #default="scope">
             <el-tag
               :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
               disable-transitions
@@ -44,7 +46,7 @@
           </template>
         </el-table-column>
         <el-table-column label="操作" width="160">
-          <template slot-scope="scope">
+          <template #default="scope">
             <el-button size="small" type="text" @click="downloadFile(scope.row)">下载</el-button>
             <el-button size="small" type="text" @click="deleteFile(scope.row)">删除</el-button>
           </template>
@@ -70,7 +72,6 @@ import { mapGetters } from 'vuex'
 import infoList from '@/mixins/infoList'
 import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
 import { downloadImage } from '@/utils/downloadImg'
-import { formatTimeToStr } from '@/utils/date'
 import CustomPic from '@/components/customPic'
 import UploadImage from '@/components/upload/image.vue'
 export default {
@@ -79,16 +80,6 @@ export default {
     CustomPic,
     UploadImage
   },
-  filters: {
-    formatDate: function(time) {
-      if (time !== null && time !== '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
-      } else {
-        return ''
-      }
-    }
-  },
   mixins: [infoList],
   data() {
     return {