refactor: mp模块ts重构

src/views/mp/material/index.vue

@@ -4,13 +4,13 @@
   <ContentWrap>
     <el-form class="-mb-15px" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <WxMpSelect @change="accountChange" />
+        <WxMpSelect @change="onAccountChanged" />
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <ContentWrap>
-    <el-tabs v-model="type" @tab-change="handleTabChange">
+    <el-tabs v-model="type" @tab-change="onTabChange">
       <!-- tab 1：图片  -->
       <el-tab-pane name="image">
         <template #label>
@@ -93,7 +93,7 @@
           <el-table-column label="文件名" align="center" prop="name" />
           <el-table-column label="语音" align="center">
             <template #default="scope">
-              <WxVoicePlayer :url="scope.row.url" />
+              <WxVoicePlayer v-if="scope.row.url" :url="scope.row.url" />
             </template>
           </el-table-column>
           <el-table-column
@@ -188,10 +188,8 @@
             </el-row>
           </el-form>
           <template #footer>
-            <!-- <span class="dialog-footer"> -->
             <el-button @click="cancelVideo">取 消</el-button>
             <el-button type="primary" @click="submitVideo">提 交</el-button>
-            <!-- </span> -->
           </template>
         </el-dialog>
 
@@ -203,7 +201,7 @@
           <el-table-column label="介绍" align="center" prop="introduction" />
           <el-table-column label="视频" align="center">
             <template #default="scope">
-              <WxVideoPlayer :url="scope.row.url" />
+              <WxVideoPlayer v-if="scope.row.url" :url="scope.row.url" />
             </template>
           </el-table-column>
           <el-table-column
@@ -284,9 +282,9 @@ const type = ref<MatertialType>('image')
 // 遮罩层
 const loading = ref(false)
 // 总条数
-const total = ref(0)
 // 数据列表
-const list = ref([])
+const list = ref<any[]>([])
+const total = ref(0)
 // 查询参数
 interface QueryParams {
   pageNo: number
@@ -319,8 +317,8 @@ const dialogVideoVisible = ref(false)
 const addMaterialLoading = ref(false)
 
 /** 侦听公众号变化 **/
-const accountChange = (accountId: number | undefined) => {
-  queryParams.accountId = accountId
+const onAccountChanged = (id?: number) => {
+  queryParams.accountId = id
   getList()
 }
 
@@ -346,7 +344,7 @@ const handleQuery = () => {
   getList()
 }
 
-const handleTabChange = (tabName: TabPaneName) => {
+const onTabChange = (tabName: TabPaneName) => {
   // 设置 type
   uploadData.type = tabName as MatertialType
 
@@ -359,54 +357,49 @@ const handleTabChange = (tabName: TabPaneName) => {
 }
 
 // ======================== 文件上传 ========================
-const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
-    rawFile.type
-  )
-  if (!isType) {
-    message.error('上传图片格式不对!')
+const beforeUpload = (rawFile: UploadRawFile, category: 'image' | 'audio' | 'video'): boolean => {
+  let allowTypes: string[] = []
+  let maxSizeMB = 0
+  let name = ''
+
+  switch (category) {
+    case 'image':
+      allowTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg']
+      maxSizeMB = 2
+      name = '图片'
+      break
+    case 'audio':
+      allowTypes = ['audio/mp3', 'audio/mpeg', 'audio/wma', 'audio/wav', 'audio/amr']
+      maxSizeMB = 2
+      name = '图片'
+      break
+    case 'video':
+      allowTypes = ['video/mp4']
+      maxSizeMB = 10
+      name = '视频'
+  }
+
+  if (!allowTypes.includes(rawFile.type)) {
+    message.error(`上传${name}格式不对!`)
     return false
   }
-  const isLt = rawFile.size / 1024 / 1024 < 2
-  if (!isLt) {
-    message.error('上传图片大小不能超过 2M!')
+  // 校验大小
+  if (rawFile.size / 1024 / 1024 > maxSizeMB) {
+    message.error(`上传${name}大小不能超过${maxSizeMB}M!`)
     return false
   }
   loading.value = true
   return true
 }
 
-const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
-  const isLt = rawFile.size / 1024 / 1024 < 2
-  if (!isType) {
-    message.error('上传语音格式不对!')
-    return false
-  }
-  if (!isLt) {
-    message.error('上传语音大小不能超过 2M!')
-    return false
-  }
-  loading.value = true
-  return true
-}
+const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  beforeUpload(rawFile, 'image')
 
-const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  const isType = rawFile.type === 'video/mp4'
-  if (!isType) {
-    message.error('上传视频格式不对!')
-    return false
-  }
+const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  beforeUpload(rawFile, 'audio')
 
-  const isLt = rawFile.size / 1024 / 1024 < 10
-  if (!isLt) {
-    message.error('上传视频大小不能超过 10M!')
-    return false
-  }
-
-  addMaterialLoading.value = true
-  return true
-}
+const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  beforeUpload(rawFile, 'video')
 
 const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
   loading.value = false
@@ -441,6 +434,7 @@ const submitVideo = () => {
   })
 }
 
+// 弹出 video 新建的表单
 const handleAddVideo = () => {
   resetVideo()
   dialogVideoVisible.value = true