refactor: mp模块，一个大大的重构+fix

src/views/mp/material/components/UploadFile.vue

@@ -6,14 +6,11 @@
     :limit="1"
     :file-list="fileList"
     :data="uploadData"
-    :on-progress="(isUploading = true)"
     :on-error="onUploadError"
     :before-upload="onBeforeUpload"
     :on-success="onUploadSuccess"
   >
-    <el-button type="primary" plain :loading="isUploading" :disabled="isUploading">
-      {{ isUploading ? '正在上传' : '点击上传' }}
-    </el-button>
+    <el-button type="primary" plain> 点击上传 </el-button>
     <template #tip>
       <span class="el-upload__tip" style="margin-left: 5px">
         <slot></slot>
@@ -27,14 +24,14 @@ import {
   HEADERS,
   UPLOAD_URL,
   UploadData,
-  MaterialType,
+  UploadType,
   beforeImageUpload,
   beforeVoiceUpload
 } from './upload'
 
 const message = useMessage()
 
-const props = defineProps<{ type: MaterialType }>()
+const props = defineProps<{ type: UploadType }>()
 
 const fileList = ref<UploadUserFile[]>([])
 const emit = defineEmits<{
@@ -42,14 +39,13 @@ const emit = defineEmits<{
 }>()
 
 const uploadData: UploadData = reactive({
-  type: MaterialType.Image,
+  type: UploadType.Image,
   title: '',
   introduction: ''
 })
-const isUploading = ref(false)
 
 /** 上传前检查 */
-const onBeforeUpload = props.type === MaterialType.Image ? beforeImageUpload : beforeVoiceUpload
+const onBeforeUpload = props.type === UploadType.Image ? beforeImageUpload : beforeVoiceUpload
 
 /** 上传成功处理 */
 const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
@@ -64,7 +60,6 @@ const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
   uploadData.introduction = ''
 
   message.notifySuccess('上传成功')
-  isUploading.value = false
   emit('uploaded')
 }
 

src/views/mp/material/components/UploadVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="新建视频" v-model="showDialog" width="600px" destroy-on-close>
+  <el-dialog title="新建视频" v-model="showDialog" width="600px">
     <el-upload
       :action="UPLOAD_URL"
       :headers="HEADERS"
@@ -8,7 +8,6 @@
       :file-list="fileList"
       :data="uploadData"
       :before-upload="beforeVideoUpload"
-      :on-progress="(isUploading = true)"
       :on-error="onUploadError"
       :on-success="onUploadSuccess"
       ref="uploadVideoRef"
@@ -18,12 +17,14 @@
       <template #trigger>
         <el-button type="primary" plain>选择视频</el-button>
       </template>
-      <span class="el-upload__tip" style="margin-left: 10px"
-        >格式支持 MP4，文件大小不超过 10MB</span
-      >
+      <template #tip>
+        <span class="el-upload__tip" style="margin-left: 10px"
+          >格式支持 MP4，文件大小不超过 10MB</span
+        >
+      </template>
     </el-upload>
     <el-divider />
-    <el-form :model="uploadData" :rules="uploadRules" ref="uploadFormRef" v-loading="isUploading">
+    <el-form :model="uploadData" :rules="uploadRules" ref="uploadFormRef">
       <el-form-item label="标题" prop="title">
         <el-input
           v-model="uploadData.title"
@@ -41,9 +42,7 @@
     </el-form>
     <template #footer>
       <el-button @click="showDialog = false">取 消</el-button>
-      <el-button type="primary" @click="submitVideo" :loading="isUploading" :disabled="isUploading"
-        >提 交</el-button
-      >
+      <el-button type="primary" @click="submitVideo">提 交</el-button>
     </template>
   </el-dialog>
 </template>
@@ -56,7 +55,7 @@ import type {
   UploadProps,
   UploadUserFile
 } from 'element-plus'
-import { HEADERS, UploadData, UPLOAD_URL, beforeVideoUpload, MaterialType } from './upload'
+import { HEADERS, UploadData, UPLOAD_URL, UploadType, beforeVideoUpload } from './upload'
 
 const message = useMessage()
 
@@ -85,18 +84,16 @@ const showDialog = computed<boolean>({
   }
 })
 
-const isUploading = ref(false)
-
 const fileList = ref<UploadUserFile[]>([])
 
 const uploadData: UploadData = reactive({
-  type: MaterialType.Video,
+  type: UploadType.Video,
   title: '',
   introduction: ''
 })
 
-const uploadFormRef = ref<FormInstance>()
-const uploadVideoRef = ref<UploadInstance>()
+const uploadFormRef = ref<FormInstance | null>(null)
+const uploadVideoRef = ref<UploadInstance | null>(null)
 
 const submitVideo = () => {
   uploadFormRef.value?.validate((valid) => {
@@ -109,7 +106,6 @@ const submitVideo = () => {
 
 /** 上传成功处理 */
 const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
-  isUploading.value = false
   if (res.code !== 0) {
     message.error('上传出错：' + res.msg)
     return false

src/views/mp/material/components/VideoTable.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play'
 import { dateFormatter } from '@/utils/formatTime'
 
 const props = defineProps<{

src/views/mp/material/components/VoiceTable.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
 import { dateFormatter } from '@/utils/formatTime'
 
 const props = defineProps<{

src/views/mp/material/components/upload.ts

@@ -1,29 +1,29 @@
 import type { UploadProps, UploadRawFile } from 'element-plus'
 import { getAccessToken } from '@/utils/auth'
-import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
+import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
 
 const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 请求头
 const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传地址
 
 interface UploadData {
-  type: MaterialType
+  type: UploadType
   title: string
   introduction: string
 }
 
 const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
-  useBeforeUpload(MaterialType.Image, 2)(rawFile)
+  useBeforeUpload(UploadType.Image, 2)(rawFile)
 
 const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
-  useBeforeUpload(MaterialType.Voice, 2)(rawFile)
+  useBeforeUpload(UploadType.Voice, 2)(rawFile)
 
 const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
-  useBeforeUpload(MaterialType.Video, 10)(rawFile)
+  useBeforeUpload(UploadType.Video, 10)(rawFile)
 
 export {
   HEADERS,
   UPLOAD_URL,
-  MaterialType,
+  UploadType,
   UploadData,
   beforeImageUpload,
   beforeVoiceUpload,

src/views/mp/material/index.vue

@@ -12,13 +12,13 @@
   <ContentWrap>
     <el-tabs v-model="type" @tab-change="onTabChange">
       <!-- tab 1：图片  -->
-      <el-tab-pane :name="MaterialType.Image">
+      <el-tab-pane :name="UploadType.Image">
         <template #label>
-          <span> <Icon icon="ep:picture" />图片 </span>
+          <el-row align="middle"> <Icon icon="ep:picture" />图片 </el-row>
         </template>
         <UploadFile
           v-hasPermi="['mp:material:upload-permanent']"
-          :type="MaterialType.Image"
+          :type="UploadType.Image"
           @uploaded="getList"
         >
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
@@ -35,13 +35,13 @@
       </el-tab-pane>
 
       <!-- tab 2：语音  -->
-      <el-tab-pane :name="MaterialType.Voice">
+      <el-tab-pane :name="UploadType.Voice">
         <template #label>
-          <span> <Icon icon="ep:microphone" />语音 </span>
+          <el-row align="middle"> <Icon icon="ep:microphone" />语音 </el-row>
         </template>
         <UploadFile
           v-hasPermi="['mp:material:upload-permanent']"
-          :type="MaterialType.Voice"
+          :type="UploadType.Voice"
           @uploaded="getList"
         >
           格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
@@ -58,9 +58,9 @@
       </el-tab-pane>
 
       <!-- tab 3：视频 -->
-      <el-tab-pane :name="MaterialType.Video">
+      <el-tab-pane :name="UploadType.Video">
         <template #label>
-          <span> <Icon icon="ep:video-play" /> 视频 </span>
+          <el-row align="middle"> <Icon icon="ep:video-play" /> 视频 </el-row>
         </template>
         <el-button
           v-hasPermi="['mp:material:upload-permanent']"
@@ -85,17 +85,17 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup name="MpMaterial">
-import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+import WxAccountSelect from '@/views/mp/components/wx-account-select'
 import ImageTable from './components/ImageTable.vue'
 import VoiceTable from './components/VoiceTable.vue'
 import VideoTable from './components/VideoTable.vue'
 import UploadFile from './components/UploadFile.vue'
 import UploadVideo from './components/UploadVideo.vue'
-import { MaterialType } from './components/upload'
+import { UploadType } from './components/upload'
 import * as MpMaterialApi from '@/api/mp/material'
 const message = useMessage() // 消息
 
-const type = ref<MaterialType>(MaterialType.Image) // 素材类型
+const type = ref<UploadType>(UploadType.Image) // 素材类型
 const loading = ref(false) // 遮罩层
 const list = ref<any[]>([]) // 总条数
 const total = ref(0) // 数据列表
@@ -103,19 +103,19 @@ const total = ref(0) // 数据列表
 interface QueryParams {
   pageNo: number
   pageSize: number
-  accountId?: number
+  accountId: number
   permanent: boolean
 }
 const queryParams: QueryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: undefined,
+  accountId: 0,
   permanent: true
 })
 const showCreateVideo = ref(false) // 是否新建视频的弹窗
 
 /** 侦听公众号变化 **/
-const onAccountChanged = (id?: number) => {
+const onAccountChanged = (id: number) => {
   queryParams.accountId = id
   getList()
 }