From 02b5447e1289c9ed6a027c236cc925a7cd1f2289 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 23:28:59 +0800
Subject: [PATCH] =?UTF-8?q?REVIEW=20=E5=85=AC=E4=BC=97=E5=8F=B7=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=9A=84=E4=B8=8B=E6=8B=89=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit fd447dc7a3c3ce4b582cd254d563ef2d2acef984)
---
 .env.front                                    |  2 +-
 src/views/mp/autoReply/index.vue              |  3 +-
 src/views/mp/components/WxMpSelect.vue        |  5 +-
 .../mp/components/wx-account-select/main.vue  |  6 +-
 src/views/mp/draft/index.vue                  |  3 +-
 src/views/mp/freePublish/index.vue            |  1 +
 src/views/mp/material/index.vue               |  5 +-
 src/views/mp/menu/index.vue                   |  3 +-
 src/views/mp/tag/index.vue                    | 85 ++++---------------
 src/views/mp/user/index.vue                   |  1 +
 10 files changed, 31 insertions(+), 83 deletions(-)

diff --git a/.env.front b/.env.front
index a63b6379..1629ff9f 100644
--- a/.env.front
+++ b/.env.front
@@ -19,7 +19,7 @@ VITE_API_URL=/admin-api
 VITE_BASE_PATH=/
 
 # 项目本地运行端口号, 与.vscode/launch.json配合
-VITE_PORT=5173
+VITE_PORT=80
 
 # 是否删除debugger
 VITE_DROP_DEBUGGER=false
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 4877ec76..9208d1e7 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -3,7 +3,8 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged" />
   </ContentWrap>
 
   <!-- tab 切换 -->
diff --git a/src/views/mp/components/WxMpSelect.vue b/src/views/mp/components/WxMpSelect.vue
index 6dc6809b..e39bbf96 100644
--- a/src/views/mp/components/WxMpSelect.vue
+++ b/src/views/mp/components/WxMpSelect.vue
@@ -19,13 +19,12 @@ const emit = defineEmits<{
   (e: 'change', id: number | undefined): void
 }>()
 
-onMounted(async () => {
+onMounted(() => {
   handleQuery()
 })
 
 const handleQuery = async () => {
-  const data = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id
diff --git a/src/views/mp/components/wx-account-select/main.vue b/src/views/mp/components/wx-account-select/main.vue
index f75bc7d6..4eb99615 100644
--- a/src/views/mp/components/wx-account-select/main.vue
+++ b/src/views/mp/components/wx-account-select/main.vue
@@ -1,6 +1,7 @@
 <template>
   <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
     <el-form-item label="公众号" prop="accountId">
+      <!-- TODO 芋艿：需要将 el-form 和 el-select 解耦 -->
       <el-select
         v-model="accountId"
         placeholder="请选择公众号"
@@ -24,13 +25,12 @@ const queryFormRef = ref()
 
 const emit = defineEmits(['change'])
 
-onMounted(async () => {
+onMounted(() => {
   handleQuery()
 })
 
 const handleQuery = async () => {
-  const data = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 0f2aa254..299ec68a 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -3,7 +3,8 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged">
       <template #actions>
         <el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
           <Icon icon="ep:plus" />新增
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 80589c37..301873ac 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -3,6 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
     <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index ada9da31..5042f92d 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -3,10 +3,7 @@
   <ContentWrap>
     <el-form class="-mb-15px" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <WxMpSelect @change="(accountId) => accountChange(accountId)" />
-      </el-form-item>
-      <el-form-item>
-        <slot name="actions"></slot>
+        <WxMpSelect @change="accountChange" />
       </el-form-item>
     </el-form>
   </ContentWrap>
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 249f3a7c..a6a08c97 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -2,7 +2,8 @@
   <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged" />
   </ContentWrap>
 
   <!-- 列表 -->
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 8a4b731d..44578519 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -1,45 +1,19 @@
 <template>
+  <doc-alert title="公众号标签" url="https://doc.iocoder.cn/mp/tag/" />
+
   <!-- 搜索工作栏 -->
   <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="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="标签名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入标签名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-form-item>
-          <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>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
+    <WxAccountSelect @change="accountChanged">
+      <template #actions>
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
           <Icon icon="ep:refresh" class="mr-5px" /> 同步
         </el-button>
-      </el-form-item>
-    </el-form>
+      </template>
+    </WxAccountSelect>
   </ContentWrap>
 
   <!-- 列表 -->
@@ -90,8 +64,8 @@
 </template>
 <script setup lang="ts" name="MpTag">
 import { dateFormatter } from '@/utils/formatTime'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
 import * as MpTagApi from '@/api/mp/tag'
-import * as MpAccountApi from '@/api/mp/account'
 import TagForm from './TagForm.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -102,19 +76,18 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: undefined,
-  name: null
+  accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  queryParams.pageNo = 1
+  queryParams.accountId = accountId
+  getList()
+}
 
 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    await message.error('未选中公众号，无法查询标签')
-    return
-  }
   try {
     loading.value = true
     const data = await MpTagApi.getTagPage(queryParams)
@@ -125,22 +98,6 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -170,14 +127,4 @@ const handleSync = async () => {
     await getList()
   } catch {}
 }
-
-/** 初始化 **/
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
 </script>
diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
index d5d2e4dc..91fd7dff 100644
--- a/src/views/mp/user/index.vue
+++ b/src/views/mp/user/index.vue
@@ -3,6 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
     <WxAccountSelect @change="(accountId) => accountChanged(accountId)">
       <template #actions>
         <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:user:sync']">