diff --git a/src/pages/AutoAnwser/index.jsx b/src/pages/AutoAnwser/index.jsx new file mode 100644 index 0000000..94dfe04 --- /dev/null +++ b/src/pages/AutoAnwser/index.jsx @@ -0,0 +1,447 @@ +import React, { useState, useRef, useEffect } from "react"; +import { + Form, + Input, + Button, + Space, + Table, + Modal, + message, + Select, +} from "antd"; +import baseRequest from "../../utils/baseRequest"; +import PagesManage from "../../components/PagesManage"; +import { useMemo } from "react"; +import dayjs from "dayjs"; +import { ConfigProvider } from "antd"; +import zhCN from "antd/es/locale/zh_CN"; +const AutoAnwserContent = (props) => { + const [messageApi, contextHolder] = message.useMessage(); + //控制创建动态modal是否出现 + const [isModalOpen, setIsModalOpen] = useState(false); + const [isPagesModalOpen, setIsPagesModalOpen] = useState(false); + //提交创建动态 + const [form] = Form.useForm(); + const [pagesOptions, setPagesOptions] = useState([]); + const { TextArea } = Input; + //表头 + const columns = [ + { + title: "关键字", + dataIndex: "keyword", + key: "keyword", + width: 200, + render: (_, record) => { + console.log(record); + return ( +
+ {record.keyword} +
+ ); + }, + }, + { + title: "自动回复内容", + dataIndex: "message", + key: "message", + }, + { + title: "优先级", + dataIndex: "priority", + key: "priority", + width: 120, + sorter: (a, b) => a.priority - b.priority, + defaultSortOrder: "ascend", + sortDirections: ["ascend", "descend"], + render: (value, record) => { + return ( +
+ + {value} + {value > 6 ? "（不展示）" : ""} + +
+ ); + }, + }, + { + title: "状态", + dataIndex: "status", + key: "status", + render: (value, record) => ( + + {value === 1 ? "启用中" : "已关闭"} + + ), + }, + { + title: "操作", + dataIndex: "opeartion", + key: "opeartion", + width: 200, + render: (_, record) => { + return ( +
+ + + + + + +
+ ); + }, + }, + ]; + useEffect(() => { + getPages(); + }, []); + //创建页面路由 + const getPages = async () => { + try { + const base = baseRequest(); + const response = await fetch("/op/frontend_route/list", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + offset: 0, + limit: 10, + ...base, + }), + }); + const _data = await response.json(); + if (_data.ret === -1) { + alert(_data.msg); + return; + } + setPagesOptions(_data.data.list); + } catch (error) { + console.error(error); + } + }; + const handleEditItem = async (id, value) => { + try { + const base = baseRequest(); + const response = await fetch("/op/auto_response/update", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id, + ...value, + ...base, + }), + }); + const temData = await response.json(); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + message.success("更新成功"); + getData(); + } catch (error) { + console.error(error); + } + }; + const handleDeleteItem = async (id) => { + try { + const base = baseRequest(); + const response = await fetch("/op/auto_response/delete", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id, + ...base, + }), + }); + const temData = await response.json(); + if (temData.ret === -1) { + alert(temData.msg); + return; + } + message.success("更新成功"); + getData(); + } catch (error) { + console.error(error); + } + }; + //获取数据 + const [data, setData] = useState([]); + const [offset, setOffset] = useState(0); + const [more, setMore] = useState(1); + const [total, setTotal] = useState(0); + const [formData, setFormData] = useState({ + title: "", + message: "", + n_type: 0, + obj_user_ids: [], + push_time: dayjs(new Date()), + params: "", + pageName: null, + link: null, + action: null, + link_text: null, + thumbnail: null, + obj_type: "0", + }); + const [currentPageName, setCurrentPageName] = useState(""); + const [buttonAble, setButtonAble] = useState(false); + + const currentPagesOptions = useMemo(() => { + if (!pagesOptions.length) return []; + const pages = pagesOptions + .filter((it) => it.desc === "达人空间") + .map((it) => { + return { + label: it.desc, + value: JSON.stringify(it), + }; + }); + return pages; + }, [pagesOptions, formData.action]); + + const getData = async (offset) => { + if (!more && offset) return; + try { + const base = baseRequest(); + const response = await fetch("/op/auto_response/list", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + offset: 0, + limit: 20 + offset, + ...base, + }), + }); + const temData = await response.json(); + console.log("response", temData); + + if (temData.ret === -1) { + alert(temData.msg); + return; + } + const data = temData.data.list.map((it) => ({ + keyword: it.keyword, + message: it.message, + priority: it.priority, + id: it.id, + status: it.status, + })); + setShowData(data); + if (temData.data.offset > total) { + setTotal(temData.data.offset); + } + setOffset(temData.data.offset); + setMore(temData.data.more); + } catch (error) { + console.error(error); + } + }; + useEffect(() => { + getData(0); + }, []); + + //展示的数据 + const [showData, setShowData] = useState(data); + + //表单提交失败 + const onFinishFailed = (errorInfo) => { + console.log("Failed:", errorInfo); + }; + //关闭弹窗 + const handleCancelModal = () => { + form.setFieldsValue(formData); + setIsModalOpen(false); + }; + const handleSubmit = async (value) => { + try { + const base = baseRequest(); + const baseBody = { + ...value, + }; + if (value.id) { + baseBody.id = value.id; + baseBody.status = value.status; + } + const response = await fetch( + `/op/auto_response/${value.id ? "update" : "create"}`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + ...baseBody, + ...base, + }), + } + ); + const data = await response.json(); + if (data.ret === -1) { + alert(data.msg); + return; + } + handleCancelModal(); + message.success(`${value.id ? "更新" : "发布"}成功`); + getData(0); + } catch (error) { + console.error(error); + } + + form.resetFields(); + }; + return ( +
+
+ +
+ {contextHolder} + + ( +
获得总数：{showData.length}
+ )} + onScroll={(e) => { + const { scrollHeight, scrollTop, clientHeight } = e.currentTarget; + console.log(scrollHeight, scrollTop + clientHeight); + + if (scrollTop + clientHeight + 5 >= scrollHeight) { + getData(offset); + } + }} + /> + + + {/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */} + +
{ + handleSubmit(value, form.getFieldValue("id")); + }} + layout="vertical" + initialValues={formData} + onChange={setFormData} + > + + + + +