Vue3 重构：REVIEW 公众号消息，先不报错

src/api/mp/message/index.ts

@@ -1,7 +1,7 @@
 import request from '@/config/axios'
 
 // 获得公众号消息分页
-export const getMessagePage = (query) => {
+export const getMessagePage = (query: PageParam) => {
   return request.get({
     url: '/mp/message/page',
     params: query

src/types/auto-components.d.ts

@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']

src/views/mp/message/index.vue

@@ -1,20 +1,17 @@
 <template>
   <ContentWrap>
-    <doc-alert title="公众号消息" url="https://doc.iocoder.cn/mp/message/" />
-
     <!-- 搜索工作栏 -->
     <el-form
+      class="-mb-15px"
       :model="queryParams"
       ref="queryFormRef"
-      size="small"
       :inline="true"
-      v-show="showSearch"
       label-width="68px"
     >
       <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
+        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
           <el-option
-            v-for="item in accounts"
+            v-for="item in accountList"
             :key="parseInt(item.id)"
             :label="item.name"
             :value="parseInt(item.id)"
@@ -22,9 +19,9 @@
         </el-select>
       </el-form-item>
       <el-form-item label="消息类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择消息类型" clearable size="small">
+        <el-select v-model="queryParams.type" placeholder="请选择消息类型" class="!w-240px">
           <el-option
-            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+            v-for="dict in getStrDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -37,6 +34,7 @@
           placeholder="请输入用户标识"
           clearable
           :v-on="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -49,20 +47,18 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="['00:00:00', '23:59:59']"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
       </el-form-item>
     </el-form>
+  </ContentWrap>
 
-    <!--todo 操作工具栏 -->
-    <!--    <el-row :gutter="10" class="mb8">-->
-    <!--      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />-->
-    <!--    </el-row>-->
-
-    <!-- 列表 -->
+  <!-- 列表 -->
+  <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column label="发送时间" align="center" prop="createTime" width="180">
         <template #default="scope">
@@ -81,37 +77,37 @@
         <template #default="scope">
           <!-- 【事件】区域 -->
           <div v-if="scope.row.type === 'event' && scope.row.event === 'subscribe'">
-            <el-tag type="success" size="mini">关注</el-tag>
+            <el-tag type="success">关注</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'unsubscribe'">
-            <el-tag type="danger" size="mini">取消关注</el-tag>
+            <el-tag type="danger">取消关注</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'CLICK'">
-            <el-tag size="mini">点击菜单</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>点击菜单</el-tag>【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'VIEW'">
-            <el-tag size="mini">点击菜单链接</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>点击菜单链接</el-tag>【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_waitmsg'">
-            <el-tag size="mini">扫码结果</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>扫码结果</el-tag>【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_push'">
-            <el-tag size="mini">扫码结果</el-tag>【{{ scope.row.eventKey }}】
+            <el-tag>扫码结果</el-tag>【{{ scope.row.eventKey }}】
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_sysphoto'">
-            <el-tag size="mini">系统拍照发图</el-tag>
+            <el-tag>系统拍照发图</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_photo_or_album'">
-            <el-tag size="mini">拍照或者相册</el-tag>
+            <el-tag>拍照或者相册</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_weixin'">
-            <el-tag size="mini">微信相册</el-tag>
+            <el-tag>微信相册</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event' && scope.row.event === 'location_select'">
-            <el-tag size="mini">选择地理位置</el-tag>
+            <el-tag>选择地理位置</el-tag>
           </div>
           <div v-else-if="scope.row.type === 'event'">
-            <el-tag type="danger" size="mini">未知事件类型</el-tag>
+            <el-tag type="danger">未知事件类型</el-tag>
           </div>
           <!-- 【消息】区域 -->
           <div v-else-if="scope.row.type === 'text'">{{ scope.row.content }}</div>
@@ -127,7 +123,7 @@
             <wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
           </div>
           <div v-else-if="scope.row.type === 'link'">
-            <el-tag size="mini">链接</el-tag>：
+            <el-tag>链接</el-tag>：
             <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
           </div>
           <div v-else-if="scope.row.type === 'location'">
@@ -150,19 +146,19 @@
             <wx-news :articles="scope.row.articles" />
           </div>
           <div v-else>
-            <el-tag type="danger" size="mini">未知消息类型</el-tag>
+            <el-tag type="danger">未知消息类型</el-tag>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
+            link
+            type="primary"
             @click="handleSend(scope.row)"
             v-hasPermi="['mp:message:send']"
-            >消息
+          >
+            消息
           </el-button>
         </template>
       </el-table-column>
@@ -182,30 +178,22 @@
     </el-dialog>
   </ContentWrap>
 </template>
-
 <script setup lang="ts" name="MpMessage">
-import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+// import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+// import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 // import WxMsg from '@/views/mp/components/wx-msg/main.vue'
-import WxLocation from '@/views/mp/components/wx-location/main.vue'
-import WxMusic from '@/views/mp/components/wx-music/main.vue'
-import WxNews from '@/views/mp/components/wx-news/main.vue'
-import { getMessagePage } from '@/api/mp/message'
-import { getSimpleAccounts } from '@/api/mp/account'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+// import WxLocation from '@/views/mp/components/wx-location/main.vue'
+// import WxMusic from '@/views/mp/components/wx-music/main.vue'
+// import WxNews from '@/views/mp/components/wx-news/main.vue'
 import { parseTime } from '@/utils/formatTime'
-
-// ========== CRUD 相关 ==========
-const loading = ref(false) // 遮罩层
-const showSearch = ref(true) // 显示搜索条件
-const total = ref(0) // 总条数
-const list = ref([]) // 粉丝消息列表
-const accounts = ref([]) // 公众号账号列表
-const open = ref(false) // 是否显示弹出层
-const userId = ref(0) // 操作的用户编号
+import * as MpAccountApi from '@/api/mp/account'
+import * as MpMessageApi from '@/api/mp/message'
 const message = useMessage() // 消息弹窗
-const queryFormRef = ref() // 搜索的表单
 
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -213,34 +201,43 @@ const queryParams = reactive({
   accountId: null,
   type: null,
   createTime: []
-}) // 是否显示弹出层
+})
+const queryFormRef = ref() // 搜索的表单
+// TODO 芋艿：下面应该移除
+const open = ref(false) // 是否显示弹出层
+const userId = ref(0) // 操作的用户编号
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
+/** 查询参数列表 */
 const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
   if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询消息')
-    return false
+    await message.error('未选中公众号，无法查询消息')
+    return
   }
-
-  loading.value = true
-  // 执行查询
-  getMessagePage(queryParams).then((data) => {
-    console.log(data)
+  try {
+    loading.value = true
+    const data = await MpMessageApi.getMessagePage(queryParams)
     list.value = data.list
     total.value = data.total
+  } finally {
     loading.value = false
-  })
+  }
 }
 
-const handleQuery = async () => {
+/** 搜索按钮操作 */
+const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
+
+/** 重置按钮操作 */
 const resetQuery = async () => {
   queryFormRef.value.resetFields()
   // 默认选中第一个
-  if (accounts.value.length > 0) {
-    queryParams.accountId = accounts[0].id
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
   }
   handleQuery()
 }
@@ -248,15 +245,15 @@ const handleSend = async (row) => {
   userId.value = row.userId
   open.value = true
 }
-onMounted(() => {
-  getSimpleAccounts().then((response) => {
-    accounts.value = response
-    // 默认选中第一个
-    if (accounts.value.length > 0) {
-      queryParams.accountId = accounts.value[0]['id']
-    }
-    // 加载数据
-    getList()
-  })
+
+/** 初始化 **/
+onMounted(async () => {
+  accountList.value = await MpAccountApi.getSimpleAccountList()
+  // 选中第一个
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
+  }
+  await getList()
 })
 </script>