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

This commit is contained in:
dhb52 2023-04-10 01:07:04 +08:00
parent 7711ceb3f3
commit af18201ceb
3 changed files with 33 additions and 134 deletions

View File

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

View File

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

View File

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