refactor:【自动回复、图文】应用【公众号选择器】组件

(cherry picked from commit af18201ceb)
This commit is contained in:
dhb52 2023-04-10 01:07:04 +08:00 committed by shizhong
parent eae9242a91
commit 8df788b537
3 changed files with 35 additions and 134 deletions

View File

@ -3,28 +3,7 @@
<!-- 搜索工作栏 -->
<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>
<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
</el-form-item>
</el-form>
<WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
</ContentWrap>
<!-- tab 切换 -->
@ -181,20 +160,13 @@
</ContentWrap>
</template>
<script setup name="MpAutoReply">
import { ref, reactive, onMounted, nextTick } from 'vue'
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxMusic from '@/views/mp/components/wx-music/main.vue'
import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
import { getSimpleAccountList } from '@/api/mp/account'
import {
createAutoReply,
deleteAutoReply,
getAutoReply,
getAutoReplyPage,
updateAutoReply
} from '@/api/mp/autoReply'
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
import * as MpAutoReplyApi from '@/api/mp/autoReply'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
@ -202,7 +174,7 @@ import { ContentWrap } from '@/components/ContentWrap'
const message = useMessage()
const queryFormRef = ref()
// const queryFormRef = ref()
const formRef = ref()
// tab 123
@ -240,43 +212,27 @@ const rules = {
requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
}
const hackResetWxReplySelect = ref(false) // WxReplySelect
// WxReplySelect
const hackResetWxReplySelect = ref(false)
//
const accountList = ref([])
onMounted(() => {
getSimpleAccountList().then((data) => {
accountList.value = data
//
if (accountList.value.length > 0) {
queryParams.accountId = accountList.value[0].id
}
//
getList()
})
})
const accountChanged = (accountId) => {
queryParams.accountId = accountId
getList()
}
/** 查询列表 */
const getList = async () => {
//
if (!queryParams.accountId) {
message.error('未选中公众号,无法查询自动回复')
return false
}
loading.value = false
//
let params = {
...queryParams,
type: type.value
}
//
getAutoReplyPage(params).then((data) => {
try {
const data = await MpAutoReplyApi.getAutoReplyPage({
...queryParams,
type: type.value
})
list.value = data.list
total.value = data.total
} finally {
loading.value = false
})
}
}
/** 搜索按钮操作 */
@ -285,16 +241,6 @@ const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
//
if (accountList.value.length > 0) {
queryParams.accountId = accountList.value[0].id
}
handleQuery()
}
const handleTabChange = (tabName) => {
type.value = tabName
handleQuery()
@ -319,7 +265,7 @@ const handleUpdate = (row) => {
resetEditor()
console.log(row)
getAutoReply(row.id).then((data) => {
MpAutoReplyApi.getAutoReply(row.id).then((data) => {
//
form.value = { ...data }
delete form.value['responseMessageType']
@ -370,13 +316,13 @@ const handleSubmit = () => {
form.responseHqMusicUrl = objData.value.hqMusicUrl
if (form.value.id !== undefined) {
updateAutoReply(form).then(() => {
MpAutoReplyApi.updateAutoReply(form).then(() => {
message.success('修改成功')
open.value = false
getList()
})
} else {
createAutoReply(form).then(() => {
MpAutoReplyApi.createAutoReply(form).then(() => {
message.success('新增成功')
open.value = false
getList()
@ -414,7 +360,7 @@ const resetEditor = () => {
const handleDelete = async (row) => {
await message.confirm('是否确认删除此数据?')
await deleteAutoReply(row.id)
await MpAutoReplyApi.deleteAutoReply(row.id)
await getList()
message.success('删除成功')
}

View File

@ -1,28 +1,9 @@
<template>
<doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
<!-- 搜索工作栏 -->
<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>
<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-form>
<WxAccountSelect @change="(accountId) => accountChanged(accountId)" />
</ContentWrap>
<!-- 列表 -->
@ -57,10 +38,11 @@
</ContentWrap>
</template>
<script setup lang="ts" name="freePublish">
<script setup lang="ts" name="MpFreePublish">
import * as FreePublishApi from '@/api/mp/freePublish'
import * as MpAccountApi from '@/api/mp/account'
import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
const message = useMessage() //
const { t } = useI18n() //
@ -70,18 +52,17 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: undefined //
accountId: undefined
})
const queryFormRef = ref() //
const accountList = ref<MpAccountApi.AccountVO[]>([]) //
/** 侦听公众号变化 **/
const accountChanged = (accountId) => {
queryParams.accountId = accountId
getList()
}
/** 查询列表 */
const getList = async () => {
//
if (!queryParams.accountId) {
message.error('未选中公众号,无法查询已发表图文')
return false
}
try {
loading.value = true
const data = await FreePublishApi.getFreePublishPage(queryParams)
@ -92,22 +73,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 handleDelete = async (item) => {
try {
@ -120,16 +85,8 @@ const handleDelete = async (item) => {
await getList()
} catch {}
}
onMounted(async () => {
accountList.value = await MpAccountApi.getSimpleAccountList()
//
if (accountList.value.length > 0) {
queryParams.accountId = accountList.value[0].id
}
await getList()
})
</script>
<style lang="scss" scoped>
.ope-row {
margin-top: 5px;

View File

@ -240,7 +240,6 @@
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
// import * as MpAccountApi from '@/api/mp/account'
import * as MpMaterialApi from '@/api/mp/material'
import * as authUtil from '@/utils/auth'
import { dateFormatter } from '@/utils/formatTime'
@ -251,7 +250,6 @@ const BASE_URL = import.meta.env.VITE_BASE_URL
const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
// const queryFormRef = ref()
const uploadFormRef = ref()
const uploadVideoRef = ref()