refactor:【MP标签】应用【公众号选择器】组件
This commit is contained in:
parent
af18201ceb
commit
b84298641c
@ -3,45 +3,16 @@
|
|||||||
|
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-form
|
<WxAccountSelect @change="(accountId) => accountChanged(accountId)">
|
||||||
class="-mb-15px"
|
<template #actions>
|
||||||
: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>
|
|
||||||
<el-button type="primary" plain @click="openForm('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" /> 新增
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="success" plain @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" /> 同步
|
<Icon icon="ep:refresh" class="mr-5px" /> 同步
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</template>
|
||||||
</el-form>
|
</WxAccountSelect>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
@ -92,8 +63,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup lang="ts" name="MpTag">
|
<script setup lang="ts" name="MpTag">
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
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 MpTagApi from '@/api/mp/tag'
|
||||||
import * as MpAccountApi from '@/api/mp/account'
|
|
||||||
import TagForm from './TagForm.vue'
|
import TagForm from './TagForm.vue'
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
@ -104,19 +75,18 @@ const list = ref([]) // 列表的数据
|
|||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
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 () => {
|
const getList = async () => {
|
||||||
// 如果没有选中公众号账号,则进行提示。
|
|
||||||
if (!queryParams.accountId) {
|
|
||||||
await message.error('未选中公众号,无法查询标签')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
const data = await MpTagApi.getTagPage(queryParams)
|
const data = await MpTagApi.getTagPage(queryParams)
|
||||||
@ -127,22 +97,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 formRef = ref()
|
||||||
const openForm = (type: string, id?: number) => {
|
const openForm = (type: string, id?: number) => {
|
||||||
@ -172,14 +126,4 @@ const handleSync = async () => {
|
|||||||
await getList()
|
await getList()
|
||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(async () => {
|
|
||||||
accountList.value = await MpAccountApi.getSimpleAccountList()
|
|
||||||
// 选中第一个
|
|
||||||
if (accountList.value.length > 0) {
|
|
||||||
queryParams.accountId = accountList.value[0].id
|
|
||||||
}
|
|
||||||
await getList()
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user