REVIEW 公众号的菜单

Author: YunaiV

src/views/mp/draft/index.vue

@@ -261,9 +261,9 @@ import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import { createDraft, deleteDraft, getDraftPage, updateDraft } from '@/api/mp/draft'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { submitFreePublish } from '@/api/mp/freePublish'
+import * as MpAccountApi from '@/api/mp/account'
+import * as MpDraftApi from '@/api/mp/draft'
+import * as MpFreePublishApi from '@/api/mp/freePublish'
 const message = useMessage() // 消息
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
@@ -302,7 +302,7 @@ const hackResetEditor = ref(false)
 
 /** 初始化 **/
 onMounted(async () => {
-  accountList.value = await getSimpleAccountList()
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 选中第一个
   if (accountList.value.length > 0) {
     // @ts-ignore
@@ -328,7 +328,7 @@ const getList = async () => {
 
   loading.value = true
   try {
-    const drafts = await getDraftPage(queryParams)
+    const drafts = await MpDraftApi.getDraftPage(queryParams)
     drafts.list.forEach((item) => {
       const newsItem = item.content.newsItem
       // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
@@ -389,7 +389,7 @@ const submitForm = () => {
   // TODO @Dhb52: 参考别的模块写法，改成 await 方式
   addMaterialLoading.value = true
   if (operateMaterial.value === 'add') {
-    createDraft(queryParams.accountId, articlesAdd.value)
+    MpDraftApi.createDraft(queryParams.accountId, articlesAdd.value)
       .then(() => {
         message.notifySuccess('新增成功')
         dialogNewsVisible.value = false
@@ -399,7 +399,7 @@ const submitForm = () => {
         addMaterialLoading.value = false
       })
   } else {
-    updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
+    MpDraftApi.updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
       .then(() => {
         message.notifySuccess('更新成功')
         dialogNewsVisible.value = false
@@ -553,7 +553,7 @@ const handlePublish = async (item) => {
     '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
   try {
     await message.confirm(content)
-    await submitFreePublish(accountId, mediaId)
+    await MpFreePublishApi.submitFreePublish(accountId, mediaId)
     message.notifySuccess('发布成功')
     await getList()
   } catch {}
@@ -565,7 +565,7 @@ const handleDelete = async (item) => {
   const mediaId = item.mediaId
   try {
     await message.confirm('此操作将永久删除该草稿, 是否继续?')
-    await deleteDraft(accountId, mediaId)
+    await MpDraftApi.deleteDraft(accountId, mediaId)
     message.notifySuccess('删除成功')
     await getList()
   } catch {}

src/views/mp/menu/index.vue

@@ -1,25 +1,33 @@
 <template>
-  <div class="app-container">
-    <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
-
-    <!-- 搜索工作栏 -->
-    <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+  <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="公众号" prop="accountId">
         <el-select v-model="accountId" placeholder="请选择公众号">
           <el-option
             v-for="item in accountList"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.name"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </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" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
       </el-form-item>
     </el-form>
+  </ContentWrap>
 
+  <!-- 列表 -->
+  <ContentWrap>
     <div class="public-account-management clearfix" v-loading="loading">
       <!--左边配置菜单-->
       <div class="left">
@@ -63,15 +71,13 @@
           <el-button
             class="save_btn"
             type="success"
-            size="small"
             @click="handleSave"
             v-hasPermi="['mp:menu:save']"
             >保存并发布菜单</el-button
           >
           <el-button
             class="save_btn"
             type="danger"
-            size="small"
             @click="handleDelete"
             v-hasPermi="['mp:menu:delete']"
             >清空菜单</el-button
@@ -82,9 +88,9 @@
       <div v-if="showRightFlag" class="right">
         <div class="configure_page">
           <div class="delete_btn">
-            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)"
-              >删除当前菜单<Icon icon="ep:delete"
-            /></el-button>
+            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)">
+              删除当前菜单<Icon icon="ep:delete" />
+            </el-button>
           </div>
           <div>
             <span>菜单名称：</span>
@@ -161,9 +167,9 @@
                 <div class="select-item" v-if="tempObj && tempObj.replyArticles">
                   <WxNews :articles="tempObj.replyArticles" />
                   <el-row class="ope-row" justify="center" align="middle">
-                    <el-button type="danger" circle @click="deleteMaterial"
-                      ><icon icon="ep:delete"
-                    /></el-button>
+                    <el-button type="danger" circle @click="deleteMaterial">
+                      <icon icon="ep:delete" />
+                    </el-button>
                   </el-row>
                 </div>
                 <div v-else>
@@ -197,33 +203,25 @@
         <p>请选择菜单配置</p>
       </div>
     </div>
-  </div>
+  </ContentWrap>
 </template>
-
-<script setup>
-import { ref, nextTick } from 'vue'
+<script setup name="MpMenu">
+import { handleTree } from '@/utils/tree'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { deleteMenu, getMenuList, saveMenu } from '@/api/mp/menu'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { handleTree } from '@/utils/tree'
+import * as MpAccountApi from '@/api/mp/account'
 import menuOptions from './menuOptions'
-
-const message = useMessage()
+const message = useMessage() // 消息
 
 // ======================== 列表查询 ========================
-// 遮罩层
-const loading = ref(true)
-// 显示搜索条件
-const showSearch = ref(true)
-// 公众号Id
-const accountId = ref(undefined)
-// 公众号名
-const name = ref('')
+const loading = ref(true) // 遮罩层
+const accountId = ref(undefined) // 公众号Id
+const name = ref('') // 公众号名
 const menuList = ref({ children: [] })
+const accountList = ref([]) // 公众号账号列表
 
-// const menuList = ref(menuListData)
 // ======================== 菜单操作 ========================
 const isActive = ref(-1) // 一级菜单点中样式
 const isSubMenuActive = ref(-1) // 一级菜单点中样式
@@ -241,11 +239,8 @@ const tempSelfObj = ref({
 })
 const dialogNewsVisible = ref(false) // 跳转图文时的素材选择弹窗
 
-// 公众号账号列表
-const accountList = ref([])
-
 onMounted(async () => {
-  accountList.value = await getSimpleAccountList()
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 选中第一个
   if (accountList.value.length > 0) {
     // @ts-ignore