Skip to content

Commit 1d9664d

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!50 翻写公众号管理-标签管理
Merge pull request !50 from 矿泉水/dev
2 parents 4abe40d + e8dfe53 commit 1d9664d

File tree

2 files changed

+305
-0
lines changed

2 files changed

+305
-0
lines changed

‎src/views/mp/tag/form.vue

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="标签名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入标签名称" />
12+
</el-form-item>
13+
</el-form>
14+
<template #footer>
15+
<div class="dialog-footer">
16+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
17+
<el-button @click="modelVisible = false">取 消</el-button>
18+
</div>
19+
</template>
20+
</Dialog>
21+
</template>
22+
<script setup lang="ts">
23+
import * as MpTagApi from '@/api/mp/tag'
24+
25+
const { t } = useI18n() // 国际化
26+
const message = useMessage() // 消息弹窗
27+
28+
const modelVisible = ref(false) // 弹窗的是否展示
29+
const modelTitle = ref('') // 弹窗的标题
30+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
31+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
32+
const formData = ref({
33+
accountId: '',
34+
name: undefined
35+
})
36+
const formRules = reactive({
37+
name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
38+
})
39+
const formRef = ref() // 表单 Ref
40+
41+
/** 打开弹窗 */
42+
const openModal = async (type: string, id?: number) => {
43+
modelVisible.value = true
44+
modelTitle.value = t('action.' + type)
45+
formType.value = type
46+
resetForm()
47+
// 修改时，设置数据
48+
49+
if (id) {
50+
formLoading.value = true
51+
try {
52+
formData.value = await MpTagApi.getTag(id) //调用该接口无数据返回，导致提交修改时无法上送id编号
53+
} finally {
54+
formLoading.value = false
55+
}
56+
}
57+
}
58+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
59+
60+
/** 提交表单 */
61+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
62+
const submitForm = async () => {
63+
// 校验表单
64+
if (!formRef) return
65+
const valid = await formRef.value.validate()
66+
if (!valid) return
67+
// 提交请求
68+
formLoading.value = true
69+
try {
70+
const data = formData.value
71+
if (formType.value === 'create') {
72+
await MpTagApi.createTag(data)
73+
message.success(t('common.createSuccess'))
74+
} else {
75+
await MpTagApi.updateTag(data)
76+
message.success(t('common.updateSuccess'))
77+
}
78+
modelVisible.value = false
79+
// 发送操作成功的事件
80+
emit('success')
81+
} finally {
82+
formLoading.value = false
83+
}
84+
}
85+
86+
/** 重置表单 */
87+
const resetForm = () => {
88+
formData.value = {
89+
accountId: '',
90+
name: undefined
91+
}
92+
formRef.value?.resetFields()
93+
}
94+
</script>

‎src/views/mp/tag/index.vue

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<template>
2+
<!-- 搜索 -->
3+
<content-wrap>
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="公众号" prop="accountId">
12+
<el-select v-model="queryParams.accountId" placeholder="请选择公众号">
13+
<el-option
14+
v-for="item in accounts"
15+
:key="parseInt(item.id)"
16+
:label="item.name"
17+
:value="parseInt(item.id)"
18+
/>
19+
</el-select>
20+
</el-form-item>
21+
<el-form-item label="标签名称" prop="name">
22+
<el-input
23+
v-model="queryParams.name"
24+
placeholder="请输入标签名称"
25+
clearable
26+
@keyup.enter="handleQuery"
27+
/>
28+
</el-form-item>
29+
<el-form-item>
30+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
31+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
32+
<el-button type="primary" @click="openModal('create')" v-hasPermi="['mp:tag:create']">
33+
<Icon icon="ep:plus" class="mr-5px" /> 新增
34+
</el-button>
35+
<el-button type="info" @click="handleSync" v-hasPermi="['mp:tag:sync']">
36+
<Icon icon="ep:refresh" class="mr-5px" /> 同步
37+
</el-button>
38+
<el-button
39+
type="success"
40+
plain
41+
@click="handleExport"
42+
:loading="exportLoading"
43+
v-hasPermi="['mp:tag:export']"
44+
>
45+
<Icon icon="ep:download" class="mr-5px" /> 导出
46+
</el-button>
47+
</el-form-item>
48+
</el-form>
49+
</content-wrap>
50+
51+
<!-- 列表 -->
52+
<content-wrap>
53+
<el-table v-loading="loading" :data="list">
54+
<el-table-column label="编号" align="center" prop="id" />
55+
<el-table-column label="标签名称" align="center" prop="name" />
56+
<el-table-column label="粉丝数" align="center" prop="count" />
57+
<el-table-column
58+
label="创建时间"
59+
align="center"
60+
prop="createTime"
61+
width="180"
62+
:formatter="dateFormatter"
63+
/>
64+
<el-table-column label="操作" align="center">
65+
<template #default="scope">
66+
<el-button
67+
link
68+
type="primary"
69+
size="small"
70+
@click="openModal('update', scope.row.id)"
71+
v-hasPermi="['mp:tag:update']"
72+
><Icon icon="ep:edit" class="mr-5px" />修改
73+
</el-button>
74+
<el-button
75+
link
76+
size="small"
77+
type="danger"
78+
@click="handleDelete(scope.row.id)"
79+
v-hasPermi="['mp:tag:delete']"
80+
>
81+
<Icon icon="ep:delete" class="mr-5px" />删除
82+
</el-button>
83+
</template>
84+
</el-table-column>
85+
</el-table>
86+
<!-- 分页 -->
87+
<Pagination
88+
:total="total"
89+
v-model:page="queryParams.pageNo"
90+
v-model:limit="queryParams.pageSize"
91+
@pagination="getList"
92+
/>
93+
</content-wrap>
94+
95+
<!-- 表单弹窗：添加/修改 -->
96+
<mpTagForm ref="modalRef" @success="getList" />
97+
</template>
98+
<script setup lang="ts" name="MpTag">
99+
import { dateFormatter } from '@/utils/formatTime'
100+
// import download from '@/utils/download'
101+
import * as MpTagApi from '@/api/mp/tag'
102+
import * as MpAccountAPI from '@/api/mp/account'
103+
import mpTagForm from './form.vue'
104+
const message = useMessage() // 消息弹窗
105+
const { t } = useI18n() // 国际化
106+
107+
const loading = ref(true) // 列表的加载中
108+
const total = ref(0) // 列表的总页数
109+
const list = ref([]) // 列表的数据
110+
const queryParams = reactive({
111+
pageNo: 1,
112+
pageSize: 10,
113+
accountId: '',
114+
name: null
115+
})
116+
117+
interface accountsType {
118+
id?: string | number | any
119+
name?: string | any
120+
}
121+
let accounts = [] as accountsType // 公众号账号列表
122+
const queryFormRef = ref() // 搜索的表单
123+
const exportLoading = ref(false) // 导出的加载中
124+
125+
/** 查询参数列表 */
126+
const getList = async () => {
127+
// 如果没有选中公众号账号，则进行提示。
128+
try {
129+
if (!queryParams.accountId) {
130+
await message.error('未选中公众号，无法查询标签')
131+
return false
132+
}
133+
loading.value = true
134+
135+
const data = await MpTagApi.getTagPage(queryParams)
136+
list.value = data.list
137+
total.value = data.total
138+
} finally {
139+
loading.value = false
140+
}
141+
}
142+
/**同步 */
143+
const handleSync = async () => {
144+
try {
145+
await message.confirm('是否确认同步标签？') //未做国际化处理
146+
await MpTagApi.syncTag(queryParams.accountId)
147+
message.success('同步标签成功') //未做国际化处理
148+
getList()
149+
} catch {}
150+
}
151+
/** 搜索按钮操作 */
152+
const handleQuery = () => {
153+
queryParams.pageNo = 1
154+
getList()
155+
}
156+
157+
/** 重置按钮操作 */
158+
const resetQuery = () => {
159+
queryFormRef.value.resetFields()
160+
// 默认选中第一个
161+
if (accounts.length > 0) {
162+
queryParams.accountId = accounts[0].id
163+
}
164+
handleQuery()
165+
}
166+
167+
/** 添加/修改操作 */
168+
const modalRef = ref()
169+
const openModal = (type: string, id?: number) => {
170+
modalRef.value.openModal(type, id)
171+
}
172+
173+
/** 删除按钮操作 */
174+
const handleDelete = async (id: number) => {
175+
try {
176+
// 删除的二次确认
177+
await message.delConfirm('是否确认删除公众号标签编号为"' + id + '"的数据项?') //未做国际化处理
178+
// 发起删除
179+
await MpTagApi.deleteTag(id)
180+
181+
// 刷新列表
182+
await getList()
183+
message.success(t('common.delSuccess'))
184+
} catch {}
185+
}
186+
187+
/** 导出按钮操作 */
188+
const handleExport = async () => {
189+
try {
190+
// 导出的二次确认
191+
await message.exportConfirm()
192+
// 发起导出
193+
exportLoading.value = true
194+
message.info('功能不支持')
195+
// const data = await MpTagApi.exportConfigApi(queryParams)
196+
// download.excel(data, '参数配置.xls')
197+
} catch {
198+
} finally {
199+
exportLoading.value = false
200+
}
201+
}
202+
203+
/** 初始化 **/
204+
onMounted(async () => {
205+
accounts = await MpAccountAPI.getSimpleAccounts()
206+
if (accounts.length > 0) {
207+
queryParams.accountId = accounts[0].id
208+
}
209+
await getList()
210+
})
211+
</script>

0 commit comments

Comments
 (0)