+
+ {/* 新增 */}
+
+
+
+
+ {/* 弹出 */}
+
+
+
+ {/* 表格 */}
+
+ {contextHolder}
+
{
+ // console.log(expanded, record);
+
+ if (expanded) {
+ setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
+ } else {
+ const newEx = expandedRowKeys.filter((element) => {
+ return element != record.deptId;
+ });
+ // console.log(expandedRowKeys);
+
+ setExpandedRowKeys(newEx);
+ }
+ console.log(expandedRowKeys);
+ }}
+ columns={columns}
+ rowKey={"deptId"}
+ dataSource={tableData}
+ pagination={false}
+ />
+
+
+
+ );
}
\ No newline at end of file
diff --git a/src/view/system/notice/publish/index.scss b/src/view/system/notice/publish/index.scss
new file mode 100644
index 0000000..6b4f8f6
--- /dev/null
+++ b/src/view/system/notice/publish/index.scss
@@ -0,0 +1,61 @@
+.Box{
+ width: 100%;
+ height: 100%;
+ background-color: white;
+ padding: 15px;
+ .tablebox{
+ table{
+ thead{
+ th::before{
+
+ }
+ tr{
+ .ant-table-cell{
+ background: white;
+ color:#909399
+ }
+
+ }
+ }
+ tbody{
+ tr{
+ .ant-table-cell{
+ background: white;
+ color:#606266
+ }
+
+ }
+ }
+ }
+ .ant-table-cell{
+ button:focus
+ {
+ outline: none;
+ }
+ button:hover
+ {
+ border: 0px rgb(250, 250, 250);
+ }
+ }
+ }
+ .newadd{
+ width: 60px;
+ height: 40px;
+ margin-top: 15px;
+ }
+
+}
+.myTree{
+ margin-top: 10px;
+ border: 1px solid rgb(173, 131, 131);
+ width: 250px;
+}
+.checkBox{
+ margin-top: 5px;
+ width: 250px;
+ display: flex;
+ label{
+ height: 20px;
+ margin-right: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/view/system/notice/publish/index.tsx b/src/view/system/notice/publish/index.tsx
index 7ff0463..4f10d93 100644
--- a/src/view/system/notice/publish/index.tsx
+++ b/src/view/system/notice/publish/index.tsx
@@ -1,5 +1,830 @@
+import { useState, useEffect } from "react";
+import {
+ Button,
+ Input,
+ Select,
+ DatePicker,
+ message,
+ Table,
+ Tag,
+ Modal,
+ Pagination,
+ Form,
+ Radio,
+ ConfigProvider,
+ Row,
+ Col,
+ TreeSelect,
+} from "antd";
+import type { ColumnsType } from "antd/es/table";
+import {
+ SyncOutlined,
+ SearchOutlined,
+ ExclamationCircleFilled,
+} from "@ant-design/icons";
+import zh_CN from "antd/es/locale/zh_CN";
+import "dayjs/locale/zh-cn";
+import "./index.scss";
+import {
+ getDataListAPI,
+ getUserListAPI,
+ getRolesListAPI,
+ getDeptsListAPI,
+ addDataAPI,
+ deleteDataAPI,
+ getDataAPI,
+} from "../../../../api/system/publish";
+
+interface searchValueType {
+ dateTime: string[] | undefined;
+ roleName: string | undefined;
+ roleKey: string | undefined;
+ state: string | undefined;
+ startTime: string | undefined;
+ endTime: string | undefined;
+}
+
+//表格单项数据类型
+interface TableDataType {
+ createTime: string;
+ dataScope: string;
+ deptIds: any[];
+ menuIds: any[];
+ roleId: number;
+ roleKey: string;
+ roleName: string;
+ roleSort: string;
+ state: string;
+ updateTime: string;
+ key?: number;
+ total?: number;
+}
+
+//当前选择的角色信息
+interface queryParamsType {
+ cluster?: string;
+ contentType?: string;
+ noticeTitle?: string;
+ noticeType?: string;
+ publishId?: number;
+ sendType?: string;
+ pageNum?: number;
+ pageSize?: number;
+}
+let thisrole: any = {};
export default function Inform() {
- return(
- 公告2
- )
-}
\ No newline at end of file
+ const { confirm } = Modal;
+ const { RangePicker } = DatePicker;
+ //提示组件
+ const [messageApi, contextHolder] = message.useMessage();
+ //搜索框内所有内容
+ let [searchValue, setSearchValue] = useState({
+ dateTime: undefined,
+ roleName: undefined,
+ roleKey: undefined,
+ startTime: undefined,
+ state: undefined,
+ endTime: undefined,
+ });
+
+ const [thisNotice,setThisNotice]=useState({})
+ //Modal
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+ const [modalTitle, setModalTitle] = useState("");
+ //表单区域
+ const [addForm] = Form.useForm();
+ const [detailForm] = Form.useForm();
+ //serach
+ const [formSearch] = Form.useForm();
+ //当前页面页数
+ let [count, setCount] = useState(1);
+ //表格内数据
+ let [tableData, setTableData] = useState([]);
+ //发送对象数据
+ const [senderIds, setSenderIds] = useState(undefined);
+
+ //表格数据总条数
+ let [total, setTotal] = useState(0);
+ //表格格式
+ const columns: ColumnsType = [
+ {
+ title: "序号",
+ dataIndex: "key",
+ key: "key",
+ },
+ {
+ title: "公告标题",
+ dataIndex: "noticeTitle",
+ key: "noticeTitle",
+ },
+ {
+ title: "公告类型",
+ dataIndex: "noticeType",
+ key: "noticeType",
+ render: (text) => {
+ switch (text) {
+ case "1":
+ return 通知;
+ case "2":
+ return 公告;
+ }
+ },
+ },
+ {
+ title: "内容类型",
+ key: "contentType",
+ dataIndex: "contentType",
+ render: (text) => {
+ switch (text) {
+ case "text":
+ return 文本;
+ case "html":
+ return 富文本;
+ }
+ },
+ },
+ {
+ title: "发送类型",
+ key: "sendType",
+ dataIndex: "sendType",
+ render: (text) => {
+ switch (text) {
+ case "user":
+ return <>用户;
+ case "role":
+ return <>角色;
+ case "dept":
+ return <>部门;
+ case "all":
+ return <>全发;
+ }
+ },
+ },
+ {
+ title: "创建时间",
+ key: "createTime",
+ dataIndex: "createTime",
+ },
+ {
+ title: "操作",
+ key: "",
+ dataIndex: "",
+ render: (text) => (
+ <>
+
+
+
+ ),
+ },
+ ];
+ //请求表格内容参数
+ let [queryTableDataParams, setQueryTableDataParams] = useState({
+ cluster: undefined,
+ contentType: undefined,
+ noticeTitle: undefined,
+ noticeType: undefined,
+ publishId: undefined,
+ sendType: undefined,
+ pageSize: undefined,
+ pageNum: undefined,
+ });
+
+ const onSendTypeChange = (value: string) => {
+ console.log(value);
+ if (value === "user") {
+ getUserList();
+ } else if (value === "role") {
+ getRolesList();
+ } else if (value === "dept") {
+ getDeptsList();
+ }
+ };
+ // let thisrole: any = {roleId:'s'};
+ const handleDetail = (text:any) => {
+ getData(text.noticeId)
+ setIsDetailModalOpen(true);
+ };
+ const handleDelete = (text: any) => {
+ console.log(text);
+ confirm({
+ title: "系统提示",
+ icon: ,
+ content: `确定删除部门名称为${text.noticeTitle}的数据吗`,
+ okText: "确定",
+ okType: "danger",
+ cancelText: "取消",
+ onOk() {
+ (async () => {
+ try {
+ let { code } = await deleteDataAPI(text.noticeId);
+ if (code === 1000) {
+ messageApi.open({
+ type: "success",
+ content: "操作成功",
+ });
+ getDataList({});
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ })();
+ },
+ onCancel() {
+ console.log("Cancel");
+ },
+ });
+ };
+ const handleSerach = () => {
+ searchValue = formSearch.getFieldsValue();
+ if (typeof searchValue.dateTime !== "undefined") {
+ searchValue.startTime = (searchValue.dateTime as string[])[0];
+ searchValue.endTime = (searchValue.dateTime as string[])[1];
+ }
+ console.log(searchValue);
+ count = 1;
+ setQueryTableDataParams({ ...searchValue });
+ };
+ const handleReset = () => {
+ formSearch.resetFields();
+ searchValue = formSearch.getFieldsValue();
+ setQueryTableDataParams({ ...searchValue });
+ };
+ //Modal区域
+ const handleModalOk = () => {
+ addForm
+ .validateFields()
+ .then((values) => {
+ // form.resetFields();
+ console.log("add", values);
+ if (modalTitle == "新增公告") {
+ postAdd({ ...values, cluster: "notice", action: "SEND" });
+ }
+ })
+ .catch((info) => {
+ console.log("Validate Failed:", info);
+ });
+
+ console.log("modal thisrole", thisrole);
+ };
+ const handleModalCanle = () => {
+ setIsModalOpen(false);
+ };
+ const handleDetailCanle = () => {
+ setIsDetailModalOpen(false);
+ };
+ //新增
+ const handleNewAdd = () => {
+ setModalTitle("新增公告");
+ addForm.setFieldsValue({
+ noticeTitle: undefined,
+ noticeType: "1",
+ sendType: undefined,
+ senderIds: undefined,
+ contentType: "html",
+ });
+ setIsModalOpen(true);
+ };
+ const filterOption = (
+ input: string,
+ option?: { label: string; value: string }
+ ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+ //表格函数
+ //从服务器获取数据
+
+ //页码改变
+ const pageChange = (page: number, pageSize: number) => {
+ console.log(page, pageSize);
+ queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
+ // setQueryParams({...queryParams,pageNum:page,pageSize})
+ console.log(queryTableDataParams);
+ getDataList(queryTableDataParams);
+ setCount(page);
+ };
+ //新增请求
+ const postAdd = async (value: any) => {
+ try {
+ let { code } = await addDataAPI(value);
+ if (code === 1000) {
+ console.log("success");
+ messageApi.open({
+ type: "success",
+ content: "操作成功",
+ });
+ addForm.setFieldsValue({
+ noticeTitle: undefined,
+ noticeType: "1",
+ sendType: undefined,
+ senderIds: undefined,
+ contentType: "html",
+ });
+ getDataList({ ...queryTableDataParams, pageNum: count });
+ setIsModalOpen(false);
+ } else {
+ messageApi.open({
+ type: "error",
+ content: "角色名称已存在",
+ });
+ }
+ } catch (error) {}
+ };
+ const getData =async(noticeId:number)=>{
+ try {
+ const {data,code}=await getDataAPI(noticeId);
+ if(code===1000){
+ setThisNotice({...data})
+ }
+ } catch (error) {
+ console.log(error);
+
+ }
+ }
+ const getTree = function (tree: any) {
+ tree.title = tree.deptName;
+ tree.value = tree.deptId;
+ if (tree.children) {
+ for (let child of tree.children) {
+ getTree(child);
+ }
+ }
+ };
+ const getUserList = async () => {
+ try {
+ const { code, data } = await getUserListAPI();
+ if (code === 1000) {
+ let userIds: any = [];
+ console.log(data.rows);
+ data.rows.forEach((item: any) => {
+ userIds.push({ value: item.userId, label: item.userName });
+ });
+
+ setSenderIds([...userIds]);
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ };
+ const getRolesList = async () => {
+ try {
+ const { code, data } = await getRolesListAPI();
+ if (code === 1000) {
+ let RolesIds: any = [];
+ console.log(data.rows);
+
+ data.rows.forEach((item: any) => {
+ RolesIds.push({ value: item.roleId, label: item.roleName });
+ });
+
+ setSenderIds([...RolesIds]);
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ };
+ const getDeptsList = async () => {
+ try {
+ const { code, data } = await getDeptsListAPI();
+ if (code === 1000) {
+ for (let child of data) {
+ getTree(child);
+ }
+ console.log(data);
+ setSenderIds([...data]);
+ // setTotal(data.total);
+ }
+ } catch (err: any) {
+ console.log("555", err);
+ }
+ };
+ const getDataList = async (queryTableDataParams: queryParamsType) => {
+ console.log("参数:", queryTableDataParams);
+ try {
+ const { code, data } = await getDataListAPI(queryTableDataParams);
+ if (code === 1000) {
+ const sortData = data.rows.sort(
+ (a: TableDataType, b: TableDataType) =>
+ parseInt(a.roleSort) - parseInt(b.roleSort)
+ );
+ sortData.forEach((element: TableDataType, i: number) => {
+ element.key = i + 1;
+ });
+ setTableData(sortData);
+ setTotal(data.total);
+ }
+ } catch (err: any) {
+ console.log("555", err);
+ }
+ };
+ useEffect(() => {
+ // setQueryParams({...queryParams,...valueSch})
+ queryTableDataParams = {
+ ...queryTableDataParams,
+ // ...searchValue,
+ pageNum: count,
+ };
+ getDataList(queryTableDataParams);
+ // console.log(queryParams);
+ }, [queryTableDataParams]);
+ const SendIds = function () {
+ if (senderIds === undefined)
+ return (
+
+ );
+ else if (senderIds[0].children === undefined) {
+ return (
+
+ );
+ } else
+ return (
+
+ );
+ };
+ return (
+
+
+
+ {/* 新增 */}
+
+
+
+ {/* 弹出 */}
+
+
+
+
+
+
+ {/* 表格 */}
+
+ {contextHolder}
+
+
pageChange(page, pageSize)}
+ showTotal={(total) => `共 ${total} 条`}
+ />
+
+
+
+
+ {/* 新增 */}
+
+
+
+ {/* 弹出 */}
+
+
+
+ {/* 表格 */}
+
+ {contextHolder}
+
+
pageChange(page, pageSize)}
+ showTotal={(total) => `共 ${total} 条`}
+ />
+
+