refactor:【自动回复、图文】应用【公众号选择器】组件

(cherry picked from commit af18201ceb)
2023-04-10 01:07:04 +08:00 · 2023-04-10 01:07:04 +08:00 · 8df788b537
commit 8df788b537
parent eae9242a91
3 changed files with 35 additions and 134 deletions
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@ -3,28 +3,7 @@

  <!-- 搜索工作栏 -->
  <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>
-        <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>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
  </ContentWrap>

  <!-- tab 切换 -->
@ -181,20 +160,13 @@
  </ContentWrap>
 </template>
 <script setup name="MpAutoReply">
-import { ref, reactive, onMounted, nextTick } from 'vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxMusic from '@/views/mp/components/wx-music/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
-import { getSimpleAccountList } from '@/api/mp/account'
-import {
-  createAutoReply,
-  deleteAutoReply,
-  getAutoReply,
-  getAutoReplyPage,
-  updateAutoReply
-} from '@/api/mp/autoReply'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+import * as MpAutoReplyApi from '@/api/mp/autoReply'

 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
@ -202,7 +174,7 @@ import { ContentWrap } from '@/components/ContentWrap'

 const message = useMessage()

-const queryFormRef = ref()
+// const queryFormRef = ref()
 const formRef = ref()

 // tab 类型（1、关注时回复；2、消息回复；3、关键词回复）
@ -240,43 +212,27 @@ const rules = {
  requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
 }

-const hackResetWxReplySelect = ref(false) // 重置 WxReplySelect 组件，解决无法清除的问题
+// 重置 WxReplySelect 组件，解决无法清除的问题
+const hackResetWxReplySelect = ref(false)

-// 公众号账号列表
-const accountList = ref([])
-
-onMounted(() => {
-  getSimpleAccountList().then((data) => {
-    accountList.value = data
-    // 默认选中第一个
-    if (accountList.value.length > 0) {
-      queryParams.accountId = accountList.value[0].id
-    }
-    // 加载数据
-    getList()
-  })
-})
+const accountChanged = (accountId) => {
+  queryParams.accountId = accountId
+  getList()
+}

 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询自动回复')
-    return false
-  }
-
  loading.value = false
-  // 处理查询参数
-  let params = {
-    ...queryParams,
-    type: type.value
-  }
-  // 执行查询
-  getAutoReplyPage(params).then((data) => {
+  try {
+    const data = await MpAutoReplyApi.getAutoReplyPage({
+      ...queryParams,
+      type: type.value
+    })
    list.value = data.list
    total.value = data.total
+  } finally {
    loading.value = false
-  })
+  }
 }

 /** 搜索按钮操作 */
@ -285,16 +241,6 @@ const handleQuery = () => {
  getList()
 }

-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  handleQuery()
-}
-
 const handleTabChange = (tabName) => {
  type.value = tabName
  handleQuery()
@ -319,7 +265,7 @@ const handleUpdate = (row) => {
  resetEditor()
  console.log(row)

-  getAutoReply(row.id).then((data) => {
+  MpAutoReplyApi.getAutoReply(row.id).then((data) => {
    // 设置属性
    form.value = { ...data }
    delete form.value['responseMessageType']
@ -370,13 +316,13 @@ const handleSubmit = () => {
    form.responseHqMusicUrl = objData.value.hqMusicUrl

    if (form.value.id !== undefined) {
-      updateAutoReply(form).then(() => {
+      MpAutoReplyApi.updateAutoReply(form).then(() => {
        message.success('修改成功')
        open.value = false
        getList()
      })
    } else {
-      createAutoReply(form).then(() => {
+      MpAutoReplyApi.createAutoReply(form).then(() => {
        message.success('新增成功')
        open.value = false
        getList()
@ -414,7 +360,7 @@ const resetEditor = () => {

 const handleDelete = async (row) => {
  await message.confirm('是否确认删除此数据?')
-  await deleteAutoReply(row.id)
+  await MpAutoReplyApi.deleteAutoReply(row.id)
  await getList()
  message.success('删除成功')
 }
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@ -1,28 +1,9 @@
 <template>
+  <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+
  <!-- 搜索工作栏 -->
  <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>
-        <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>
+    <WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
  </ContentWrap>

  <!-- 列表 -->
@ -57,10 +38,11 @@
  </ContentWrap>
 </template>

-<script setup lang="ts" name="freePublish">
+<script setup lang="ts" name="MpFreePublish">
 import * as FreePublishApi from '@/api/mp/freePublish'
-import * as MpAccountApi from '@/api/mp/account'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化

@ -70,18 +52,17 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
-  accountId: undefined // 当前页数
+  accountId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 侦听公众号变化 **/
+const accountChanged = (accountId) => {
+  queryParams.accountId = accountId
+  getList()
+}

 /** 查询列表 */
 const getList = async () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询已发表图文')
-    return false
-  }
  try {
    loading.value = true
    const data = await FreePublishApi.getFreePublishPage(queryParams)
@ -92,22 +73,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 handleDelete = async (item) => {
  try {
@ -120,16 +85,8 @@ const handleDelete = async (item) => {
    await getList()
  } catch {}
 }
-
-onMounted(async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 选中第一个
-  if (accountList.value.length > 0) {
-    queryParams.accountId = accountList.value[0].id
-  }
-  await getList()
-})
 </script>
+
 <style lang="scss" scoped>
 .ope-row {
  margin-top: 5px;
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@ -240,7 +240,6 @@
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
-// import * as MpAccountApi from '@/api/mp/account'
 import * as MpMaterialApi from '@/api/mp/material'
 import * as authUtil from '@/utils/auth'
 import { dateFormatter } from '@/utils/formatTime'
@ -251,7 +250,6 @@ const BASE_URL = import.meta.env.VITE_BASE_URL
 const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
 const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }

-// const queryFormRef = ref()
 const uploadFormRef = ref()
 const uploadVideoRef = ref()