【后台管理】-- 渠道-公众号回复管理

This commit is contained in:
linjinyuan 2022-09-15 09:38:04 +08:00
parent 208e942e09
commit a5d34a3dc5
9 changed files with 710 additions and 3 deletions

View File

@ -45,4 +45,67 @@ export interface Menu {
*/
export function setOaMenuPublish(params: Menu | any) {
return request.post({ url: '/channel/oaMenu/publish', params })
}
/**
* @return { Promise }
* @param { string } type
* @description
*/
export function getOaReplyList(params: { type: string } ) {
return request.get({ url: '/channel/oaReply/list', params })
}
/**
* @return { Promise }
* @param { number } id
* @description
*/
export function oaReplyDel(params: { id: number }) {
return request.post({ url: '/channel/oaReply/del', params })
}
/**
* @return { Promise }
* @param { number } id
* @description
*/
export function changeOaReplyStatus(params: { id: number } ) {
return request.post({ url: '/channel/oaReply/status', params })
}
export interface Reply {
content: string; // 内容
contentType: number; // 内容类型: 1=文本
keyword?: string; // 关键词
matchingType?: number; // 匹配方式: [1=全匹配, 2=模糊匹配]
name: string; // 规则名称
status: number; // 状态: 1=开启, 0=关闭
type: string; // 类型: follow=关注, keyword=关键词, default=默认
sort: number // 排序
}
/**
* @return { Promise }
* @description
*/
export function oaReplyAdd(params: Reply ) {
return request.post({ url: '/channel/oaReply/add', params })
}
/**
* @return { Promise }
* @description
*/
export function oaReplyEdit(params: Reply ) {
return request.post({ url: '/channel/oaReply/edit', params })
}
/**
* @return { Promise }
* @param { string } type
* @description
*/
export function getOaReplyDetail(params: { id: number } ) {
return request.get({ url: '/channel/oaReply/detail', params })
}

View File

@ -28,9 +28,19 @@ getOaMenuFunc();
</div>
</el-card>
<footer-btns v-perms="['channel:h5:save']">
<el-button type="primary" @click="handleSave">保存</el-button>
<el-button type="primary" @click="handlePublish">发布</el-button>
<footer-btns>
<el-button
type="primary"
@click="handleSave"
v-perms="['channel:oaMenu:save']"
>保存</el-button
>
<el-button
type="primary"
@click="handlePublish"
v-perms="['channel:oaMenu:publish']"
>发布</el-button
>
</footer-btns>
</div>
</template>

View File

@ -0,0 +1,135 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-alert
type="warning"
title="温馨提示1.粉丝在公众号发送内容时系统无法匹配情况下发送启用的默认文本回复2.同时只能启用一个默认回复。"
:closable="false"
show-icon
/>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div>
<el-button
class="mb-4"
v-perms="['article:cate:add']"
type="primary"
@click="handleAdd()"
>
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增默认回复
</el-button>
</div>
<el-table size="large" :data="lists">
<el-table-column label="规则名称" prop="name" min-width="120" />
<el-table-column label="回复类型" min-width="120">
<template #default="{ row }">
{{ getContentType(1) }}
</template>
</el-table-column>
<el-table-column
label="回复内容"
prop="content"
min-width="120"
/>
<el-table-column label="状态" min-width="120">
<template #default="{ row }">
<el-switch
v-perms="['article:cate:change']"
v-model="row.status"
:active-value="1"
:inactive-value="0"
@change="changeStatus(row.id)"
/>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" min-width="120" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['article:cate:edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['article:cate:del']"
type="danger"
link
@click="handleDelete(row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup>
import {
oaReplyDel,
getOaReplyList,
changeOaReplyStatus,
} from "@/api/channel/wx_oa";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showEdit = ref(false);
const lists = ref();
const getContentType = computed(() => {
return (val: number) => {
switch (val) {
case 1:
return "文本";
}
};
});
const getLists = async () => {
lists.value = await getOaReplyList({ type: "default" });
};
const handleAdd = async () => {
showEdit.value = true;
await nextTick();
editRef.value?.open("add", "default");
};
const handleEdit = async (data: any) => {
showEdit.value = true;
await nextTick();
editRef.value?.open("edit", "default");
editRef.value?.getDetail(data);
};
const handleDelete = async (id: number) => {
await feedback.confirm("确定要删除?");
await oaReplyDel({ id });
feedback.msgSuccess("删除成功");
getLists();
};
const changeStatus = async (id: number) => {
try {
await changeOaReplyStatus({ id });
feedback.msgSuccess("修改成功");
getLists();
} catch (error) {
getLists();
}
};
getLists();
</script>

View File

@ -0,0 +1,212 @@
<template>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="500px"
:clickModalClose="true"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form
ref="formRef"
:model="formData"
label-width="84px"
:rules="formRules"
class="pr-10"
>
<el-form-item label="规则名称" prop="name">
<div class="flex-1">
<el-input
v-model="formData.name"
placeholder="请输入规则名称"
/>
<div class="form-tips">
方便通过名称管理关注回复内容
</div>
</div>
</el-form-item>
<el-form-item
label="关键词"
prop="keyword"
v-if="formData.type == 'keyword'"
>
<div class="flex-1">
<el-input
v-model="formData.keyword"
placeholder="请输入关键词"
/>
<div class="form-tips">
方便通过名称管理关注回复内容
</div>
</div>
</el-form-item>
<el-form-item
label="匹配方式"
prop="matchingType"
:min="0"
v-if="formData.type == 'keyword'"
>
<div class="flex-1">
<el-radio-group v-model="formData.matchingType">
<el-radio :label="1">全匹配</el-radio>
<el-radio :label="2">模糊匹配</el-radio>
</el-radio-group>
<div class="form-tips">
模糊匹配时关键词部分匹配用户输入的内容即可
</div>
</div>
</el-form-item>
<el-form-item label="回复类型" prop="contentType" :min="0">
<div class="flex-1">
<el-radio-group v-model="formData.contentType">
<el-radio :label="1">文本</el-radio>
</el-radio-group>
<div class="form-tips">暂时只支持文本类型</div>
</div>
</el-form-item>
<el-form-item label="回复内容" prop="content">
<div class="flex-1">
<el-input
v-model="formData.content"
:autosize="{ minRows: 4, maxRows: 4 }"
type="textarea"
placeholder="请输入回复内容"
/>
</div>
</el-form-item>
<!-- <el-form-item label="回复数量" prop="sort" :min="0">
<div>
<el-radio-group v-model="formData.replyType">
<el-radio :label="1">回复匹配首词条</el-radio>
</el-radio-group>
<div class="form-tips">设置关键词匹配多条时回复的数量暂时支持回复一条内容</div>
</div>
</el-form-item> -->
<el-form-item label="排序">
<div class="flex-1">
<el-input
v-model="formData.sort"
placeholder="请输入"
/>
</div>
</el-form-item>
<el-form-item label="启用状态">
<el-switch
v-model="formData.status"
:active-value="1"
:inactive-value="0"
/>
</el-form-item>
</el-form>
</popup>
</div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { oaReplyEdit, oaReplyAdd, getOaReplyDetail } from "@/api/channel/wx_oa";
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import type { FormRules } from "element-plus";
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
return mode.value == "edit" ? "编辑栏目" : "新增栏目";
});
const formData = reactive({
id: "",
name: "",
type: "",
contentType: 1,
keyword: "",
content: "",
matchingType: 1,
status: 1,
sort: 0,
});
const formRules: FormRules = {
name: [
{
required: true,
message: "请输入规则名称",
trigger: ["blur"],
},
],
keyword: [
{
required: true,
message: "请输入关键词",
trigger: ["blur"],
},
],
matchingType: [
{
required: true,
message: "请选择匹配方式",
trigger: ["blur"],
},
],
contentType: [
{
required: true,
message: "请选择回复类型",
trigger: ["blur"],
},
],
content: [
{
required: true,
message: "请输入回复内容",
trigger: ["blur"],
},
],
};
const handleSubmit = async () => {
await formRef.value?.validate();
mode.value == "edit"
? await oaReplyEdit(formData)
: await oaReplyAdd(formData);
feedback.msgSuccess("操作成功");
popupRef.value?.close();
emit("success");
};
const open = (modes = "add", type = "") => {
mode.value = modes;
formData.type = type;
popupRef.value?.open();
};
const setFormData = (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
const getDetail = async (row: Record<string, any>) => {
const data = await getOaReplyDetail({
id: row.id,
});
setFormData(data);
};
const handleClose = () => {
emit("close");
};
defineExpose({
open,
setFormData,
getDetail,
});
</script>

View File

@ -0,0 +1,135 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-alert
type="warning"
title="温馨提示1.粉丝关注公众号时会自动发送启用的关注回复2.同时只能启用一个关注回复。"
:closable="false"
show-icon
/>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div>
<el-button
class="mb-4"
v-perms="['article:cate:add']"
type="primary"
@click="handleAdd()"
>
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增关注回复
</el-button>
</div>
<el-table size="large" :data="lists">
<el-table-column label="规则名称" prop="name" min-width="120" />
<el-table-column label="回复类型" min-width="120">
<template #default="{ row }">
{{ getContentType(row.contentType) }}
</template>
</el-table-column>
<el-table-column
label="回复内容"
prop="content"
min-width="120"
/>
<el-table-column label="状态" min-width="120">
<template #default="{ row }">
<el-switch
v-perms="['article:cate:change']"
v-model="row.status"
:active-value="1"
:inactive-value="0"
@change="changeStatus(row.id)"
/>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" min-width="120" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['article:cate:edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['article:cate:del']"
type="danger"
link
@click="handleDelete(row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup>
import {
oaReplyDel,
getOaReplyList,
changeOaReplyStatus,
} from "@/api/channel/wx_oa";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showEdit = ref(false);
const lists = ref();
const getContentType = computed(() => {
return (val: number) => {
switch (val) {
case 1:
return "文本";
}
};
});
const getLists = async () => {
lists.value = await getOaReplyList({ type: "follow" });
};
const handleAdd = async () => {
showEdit.value = true;
await nextTick();
editRef.value?.open("add", "follow");
};
const handleEdit = async (data: any) => {
showEdit.value = true;
await nextTick();
editRef.value?.open("edit", "follow");
editRef.value?.getDetail(data);
};
const handleDelete = async (id: number) => {
await feedback.confirm("确定要删除?");
await oaReplyDel({ id });
feedback.msgSuccess("删除成功");
getLists();
};
const changeStatus = async (id: number) => {
try {
await changeOaReplyStatus({ id });
feedback.msgSuccess("修改成功");
getLists();
} catch (error) {
getLists();
}
};
getLists();
</script>

View File

@ -0,0 +1,152 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-alert
type="warning"
title="温馨提示1.粉丝在公众号发送内容时通过关键词可触发关键词回复2.同时可启用多个关键词回复,有多条关键词匹配时优选选择排序靠前的一条"
:closable="false"
show-icon
/>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div>
<el-button
class="mb-4"
v-perms="['article:cate:add']"
type="primary"
@click="handleAdd()"
>
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增关键字回复
</el-button>
</div>
<el-table size="large" :data="lists">
<el-table-column label="规则名称" prop="name" min-width="120" />
<el-table-column
label="关键词"
prop="keyword"
min-width="120"
/>
<el-table-column label="匹配方式" min-width="120">
<template #default="{ row }">
{{ getMatchingType(row.matchingType) }}
</template>
</el-table-column>
<el-table-column label="回复类型" min-width="120">
<template #default="{ row }">
{{ getContentType(row.contentType) }}
</template>
</el-table-column>
<el-table-column label="状态" min-width="120">
<template #default="{ row }">
<el-switch
v-perms="['article:cate:change']"
v-model="row.status"
:active-value="1"
:inactive-value="0"
@change="changeStatus(row.id)"
/>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" min-width="120" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['article:cate:edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['article:cate:del']"
type="danger"
link
@click="handleDelete(row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup>
import {
oaReplyDel,
getOaReplyList,
changeOaReplyStatus,
} from "@/api/channel/wx_oa";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showEdit = ref(false);
const lists = ref();
const getMatchingType = computed(() => {
return (val: number) => {
switch (val) {
case 1:
return "全匹配";
case 2:
return "模糊匹配";
}
};
});
const getContentType = computed(() => {
return (val: number) => {
switch (val) {
case 1:
return "文本";
}
};
});
const getLists = async () => {
lists.value = await getOaReplyList({ type: "keyword" });
};
const handleAdd = async () => {
showEdit.value = true;
await nextTick();
editRef.value?.open("add", "keyword");
};
const handleEdit = async (data: any) => {
showEdit.value = true;
await nextTick();
editRef.value?.open("edit", "keyword");
editRef.value?.getDetail(data);
};
const handleDelete = async (id: number) => {
await feedback.confirm("确定要删除?");
await oaReplyDel({ id });
feedback.msgSuccess("删除成功");
getLists();
};
const changeStatus = async (id: number) => {
try {
await changeOaReplyStatus({ id });
feedback.msgSuccess("修改成功");
getLists();
} catch (error) {
getLists();
}
};
getLists();
</script>