Vue3 重构：REVIEW 公众号标签

Author: YunaiV

src/api/mp/account/index.ts

@@ -1,5 +1,10 @@
 import request from '@/config/axios'
 
+export interface AccountVO {
+  id?: number
+  name: string
+}
+
 // 创建公众号账号
 export const createAccount = async (data) => {
   return await request.post({ url: '/mp/account/create', data })
@@ -26,7 +31,7 @@ export const getAccountPage = async (query) => {
 }
 
 // 获取公众号账号精简信息列表
-export const getSimpleAccounts = async () => {
+export const getSimpleAccountList = async () => {
   return request.get({ url: '/mp/account/list-all-simple' })
 }
 

src/api/mp/tag/index.ts

@@ -1,52 +1,59 @@
 import request from '@/config/axios'
 
+export interface TagVO {
+  id?: number
+  name: string
+  accountId: number
+  createTime: Date
+}
+
 // 创建公众号标签
-export const createTag = (data) => {
+export const createTag = (data: TagVO) => {
   return request.post({
     url: '/mp/tag/create',
     data: data
   })
 }
 
 // 更新公众号标签
-export const updateTag = (data) => {
+export const updateTag = (data: TagVO) => {
   return request.put({
     url: '/mp/tag/update',
     data: data
   })
 }
 
 // 删除公众号标签
-export const deleteTag = (id) => {
+export const deleteTag = (id: number) => {
   return request.delete({
     url: '/mp/tag/delete?id=' + id
   })
 }
 
 // 获得公众号标签
-export const getTag = (id) => {
+export const getTag = (id: number) => {
   return request.get({
     url: '/mp/tag/get?id=' + id
   })
 }
 
 // 获得公众号标签分页
-export const getTagPage = (query) => {
+export const getTagPage = (query: PageParam) => {
   return request.get({
     url: '/mp/tag/page',
     params: query
   })
 }
 
 // 获取公众号标签精简信息列表
-export const getSimpleTags = () => {
+export const getSimpleTagList = () => {
   return request.get({
     url: '/mp/tag/list-all-simple'
   })
 }
 
 // 同步公众号标签
-export const syncTag = (accountId) => {
+export const syncTag = (accountId: number) => {
   return request.post({
     url: '/mp/tag/sync?accountId=' + accountId
   })

src/views/mp/tag/form.vue renamed to src/views/mp/tag/TagForm.vue

@@ -19,7 +19,6 @@
 </template>
 <script setup lang="ts">
 import * as MpTagApi from '@/api/mp/tag'
-
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -28,32 +27,32 @@ const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  accountId: '',
-  name: undefined
+  accountId: -1,
+  name: ''
 })
 const formRules = reactive({
   name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const openModal = async (type: string, id?: number) => {
+const open = async (type: string, accountId: number, id?: number) => {
   modelVisible.value = true
   modelTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  formData.value.accountId = accountId
   // 修改时，设置数据
-
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await MpTagApi.getTag(id) //调用该接口无数据返回，导致提交修改时无法上送id编号
+      formData.value = await MpTagApi.getTag(id)
     } finally {
       formLoading.value = false
     }
   }
 }
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -65,7 +64,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value
+    const data = formData.value as MpTagApi.TagVO
     if (formType.value === 'create') {
       await MpTagApi.createTag(data)
       message.success(t('common.createSuccess'))
@@ -84,8 +83,8 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    accountId: '',
-    name: undefined
+    accountId: -1,
+    name: ''
   }
   formRef.value?.resetFields()
 }

src/views/mp/tag/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- 搜索 -->
-  <content-wrap>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -9,9 +9,9 @@
       label-width="68px"
     >
       <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
+        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
           <el-option
-            v-for="item in accounts"
+            v-for="item in accountList"
             :key="parseInt(item.id)"
             :label="item.name"
             :value="parseInt(item.id)"
@@ -24,32 +24,24 @@
           placeholder="请输入标签名称"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </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-button type="primary" @click="openModal('create')" v-hasPermi="['mp:tag:create']">
+        <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="info" @click="handleSync" v-hasPermi="['mp:tag:sync']">
+        <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
           <Icon icon="ep:refresh" class="mr-5px" /> 同步
         </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['mp:tag:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 列表 -->
-  <content-wrap>
+  <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="标签名称" align="center" prop="name" />
@@ -66,19 +58,18 @@
           <el-button
             link
             type="primary"
-            size="small"
-            @click="openModal('update', scope.row.id)"
+            @click="openForm('update', scope.row.id)"
             v-hasPermi="['mp:tag:update']"
-            ><Icon icon="ep:edit" class="mr-5px" />修改
+          >
+            修改
           </el-button>
           <el-button
             link
-            size="small"
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['mp:tag:delete']"
           >
-            <Icon icon="ep:delete" class="mr-5px" />删除
+            删除
           </el-button>
         </template>
       </el-table-column>
@@ -90,17 +81,16 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <mpTagForm ref="modalRef" @success="getList" />
+  <TagForm ref="formRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MpTag">
 import { dateFormatter } from '@/utils/formatTime'
-// import download from '@/utils/download'
 import * as MpTagApi from '@/api/mp/tag'
-import * as MpAccountAPI from '@/api/mp/account'
-import mpTagForm from './form.vue'
+import * as MpAccountApi from '@/api/mp/account'
+import TagForm from './TagForm.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -110,44 +100,29 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  accountId: '',
+  accountId: undefined,
   name: null
 })
-
-interface accountsType {
-  id?: string | number | any
-  name?: string | any
-}
-let accounts = [] as accountsType // 公众号账号列表
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
 /** 查询参数列表 */
 const getList = async () => {
   // 如果没有选中公众号账号，则进行提示。
+  if (!queryParams.accountId) {
+    await message.error('未选中公众号，无法查询标签')
+    return
+  }
   try {
-    if (!queryParams.accountId) {
-      await message.error('未选中公众号，无法查询标签')
-      return false
-    }
     loading.value = true
-
     const data = await MpTagApi.getTagPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
     loading.value = false
   }
 }
-/**同步 */
-const handleSync = async () => {
-  try {
-    await message.confirm('是否确认同步标签？') //未做国际化处理
-    await MpTagApi.syncTag(queryParams.accountId)
-    message.success('同步标签成功') //未做国际化处理
-    getList()
-  } catch {}
-}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -158,53 +133,50 @@ const handleQuery = () => {
 const resetQuery = () => {
   queryFormRef.value.resetFields()
   // 默认选中第一个
-  if (accounts.length > 0) {
-    queryParams.accountId = accounts[0].id
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
   }
   handleQuery()
 }
 
 /** 添加/修改操作 */
-const modalRef = ref()
-const openModal = (type: string, id?: number) => {
-  modalRef.value.openModal(type, id)
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, queryParams.accountId, id)
 }
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
-    await message.delConfirm('是否确认删除公众号标签编号为"' + id + '"的数据项?') //未做国际化处理
+    await message.delConfirm()
     // 发起删除
     await MpTagApi.deleteTag(id)
-
+    message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-    message.success(t('common.delSuccess'))
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
+/** 同步操作 */
+const handleSync = async () => {
   try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    message.info('功能不支持')
-    // const data = await MpTagApi.exportConfigApi(queryParams)
-    // download.excel(data, '参数配置.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
+    await message.confirm('是否确认同步标签？')
+    // @ts-ignore
+    await MpTagApi.syncTag(queryParams.accountId)
+    message.success('同步标签成功')
+    await getList()
+  } catch {}
 }
 
 /** 初始化 **/
 onMounted(async () => {
-  accounts = await MpAccountAPI.getSimpleAccounts()
-  if (accounts.length > 0) {
-    queryParams.accountId = accounts[0].id
+  accountList.value = await MpAccountApi.getSimpleAccountList()
+  // 选中第一个
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
   }
   await getList()
 })