Vue3 重构：REVIEW 公众号标签

2abc7eca · YunaiV · c0d5a566 · 2abc7eca · 2abc7eca · 2abc7eca
Commit 2abc7eca authored Mar 25, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 72 additions and 112 deletions

src/api/mp/account/index.ts
+6 -1

src/api/mp/tag/index.ts
+14 -7

src/views/mp/tag/TagForm.vue
+9 -10

src/views/mp/tag/index.vue
+43 -71

src/views/system/area/area.data.ts
+0 -23

No files found.
--- a/src/api/mp/account/index.ts
+++ b/src/api/mp/account/index.ts
 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' })
 }

--- a/src/api/mp/tag/index.ts
+++ b/src/api/mp/tag/index.ts
 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
@@ -9,7 +16,7 @@ export const createTag = (data) => {
 }
 // 更新公众号标签
-export const updateTag = (data) => {
+export const updateTag = (data: TagVO) => {
  return request.put({
    url: '/mp/tag/update',
    data: data
@@ -17,21 +24,21 @@ export const updateTag = (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
@@ -39,14 +46,14 @@ export const getTagPage = (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
  })

--- a/src/views/mp/tag/form.vue
+++ b/src/views/mp/tag/form.vue
@@ -19,7 +19,6 @@
 </template>
 <script setup lang="ts">
 import * as MpTagApi from '@/api/mp/tag'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -28,8 +27,8 @@ const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  accountId: '',
+  accountId: -1,
-  name: undefined
+  name: ''
 })
 const formRules = reactive({
  name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
@@ -37,23 +36,23 @@ const formRules = reactive({
 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: '',
+    accountId: -1,
-    name: undefined
+    name: ''
  }
  formRef.value?.resetFields()
 }

--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
 <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="openForm('update', scope.row.id)"
-            @click="openModal('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 * as MpAccountApi from '@/api/mp/account'
-import mpTagForm from './form.vue'
+import TagForm from './TagForm.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -110,28 +100,21 @@ 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 () => {
  // 如果没有选中公众号账号，则进行提示。
-  try {
  if (!queryParams.accountId) {
    await message.error('未选中公众号，无法查询标签')
-      return false
+    return
  }
+  try {
    loading.value = true
    const data = await MpTagApi.getTagPage(queryParams)
    list.value = data.list
    total.value = data.total
@@ -139,15 +122,7 @@ const getList = async () => {
    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) {
+  if (accountList.value.length > 0) {
-    queryParams.accountId = accounts[0].id
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
  }
  handleQuery()
 }
 /** 添加/修改操作 */
-const modalRef = ref()
+const formRef = ref()
-const openModal = (type: string, id?: number) => {
+const openForm = (type: string, id?: number) => {
-  modalRef.value.openModal(type, id)
+  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.confirm('是否确认同步标签？')
-    await message.exportConfirm()
+    // @ts-ignore
-    // 发起导出
+    await MpTagApi.syncTag(queryParams.accountId)
-    exportLoading.value = true
+    message.success('同步标签成功')
-    message.info('功能不支持')
+    await getList()
-    // const data = await MpTagApi.exportConfigApi(queryParams)
+  } catch {}
-    // download.excel(data, '参数配置.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
 }
 /** 初始化 **/
 onMounted(async () => {
-  accounts = await MpAccountAPI.getSimpleAccounts()
+  accountList.value = await MpAccountApi.getSimpleAccountList()
-  if (accounts.length > 0) {
+  // 选中第一个
-    queryParams.accountId = accounts[0].id
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
  }
  await getList()
 })

--- a/src/views/system/area/area.data.ts
+++ b/src/views/system/area/area.data.ts
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryType: null,
-  action: false,
-  columns: [
-    {
-      title: '编号',
-      field: 'id',
-      table: {
-        treeNode: true,
-        align: 'left'
-      }
-    },
-    {
-      title: '名字',
-      field: 'name'
-    }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)