REVIEW 公众号选择的下拉框

(cherry picked from commit fd447dc7a3)

.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

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 切换 -->

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 = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id

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 = await MpAccountApi.getSimpleAccountList()
-  accountList.value = data
   // 默认选中第一个
   if (accountList.value.length > 0) {
     accountId.value = accountList.value[0].id

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" />新增

src/views/mp/freePublish/index.vue

@@ -3,6 +3,7 @@
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
     <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
   </ContentWrap>
 

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)" />
+        <WxMpSelect @change="accountChange" />
-      </el-form-item>
-      <el-form-item>
-        <slot name="actions"></slot>
       </el-form-item>
     </el-form>
   </ContentWrap>

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>
 
   <!-- 列表 -->

src/views/mp/tag/index.vue

@@ -1,45 +1,19 @@
 <template>
+  <doc-alert title="公众号标签" url="https://doc.iocoder.cn/mp/tag/" />
+
   <!-- 搜索工作栏 -->
   <ContentWrap>
-    <el-form
+    <!-- TODO @芋艿：调整成 el-form 和 WxAccountSelect  -->
-      class="-mb-15px"
+    <WxAccountSelect @change="accountChanged">
-      :model="queryParams"
+      <template #actions>
-      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>
         <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>
+      </template>
-    </el-form>
+    </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,
+  accountId: undefined
-  name: null
 })
-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>

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']">