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

admin/src/api/channel/wx_oa.ts

@@ -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 })
 }

admin/src/views/channel/wx_oa/menu.vue

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

admin/src/views/channel/wx_oa/reply/default_reply.vue

@@ -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>

admin/src/views/channel/wx_oa/reply/edit.vue

@@ -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>

admin/src/views/channel/wx_oa/reply/follow_reply.vue

@@ -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>

admin/src/views/channel/wx_oa/reply/keyword_reply.vue

@@ -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>