|
|
@@ -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>
|
YunaiV