REVIEW 公众号的菜单

40e23bd8 · YunaiV · f7fe7949 · 40e23bd8 · 40e23bd8 · 40e23bd8
Commit 40e23bd8 authored Apr 08, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 40 additions and 45 deletions

src/views/mp/draft/index.vue
+9 -9

src/views/mp/menu/index.vue
+31 -36

src/views/mp/menu/menuOptions.ts
+0 -0

No files found.
--- a/src/views/mp/draft/index.vue
+++ b/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 * as MpAccountApi from '@/api/mp/account'
-import { getSimpleAccountList } from '@/api/mp/account'
+import * as MpDraftApi from '@/api/mp/draft'
-import { submitFreePublish } from '@/api/mp/freePublish'
+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 {}

--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
 <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">
+  <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 @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</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,7 +71,6 @@
          <el-button
            class="save_btn"
            type="success"
-            size="small"
            @click="handleSave"
            v-hasPermi="['mp:menu:save']"
            >保存并发布菜单</el-button
@@ -71,7 +78,6 @@
          <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)"
+            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)">
-              >删除当前菜单<Icon icon="ep:delete"
+              删除当前菜单<Icon icon="ep:delete" />
-            /></el-button>
+            </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"
+                    <el-button type="danger" circle @click="deleteMaterial">
-                      ><icon icon="ep:delete"
+                      <icon icon="ep:delete" />
-                    /></el-button>
+                    </el-button>
                  </el-row>
                </div>
                <div v-else>
@@ -197,33 +203,25 @@
        <p>请选择菜单配置</p>
      </div>
    </div>
-  </div>
+  </ContentWrap>
 </template>
+<script setup name="MpMenu">
-<script setup>
+import { handleTree } from '@/utils/tree'
-import { ref, nextTick } from 'vue'
 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 * as MpAccountApi from '@/api/mp/account'
-import { handleTree } from '@/utils/tree'
 import menuOptions from './menuOptions'
+const message = useMessage() // 消息
-const message = useMessage()
 // ======================== 列表查询 ========================
-// 遮罩层
+const loading = ref(true) // 遮罩层
-const loading = ref(true)
+const accountId = ref(undefined) // 公众号Id
-// 显示搜索条件
+const name = ref('') // 公众号名
-const showSearch = ref(true)
-// 公众号Id
-const accountId = ref(undefined)
-// 公众号名
-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

--- a/src/views/mp/menu/menuOptions.js
+++ b/src/views/mp/menu/menuOptions.js