唐简：提交新分支

src/view/system/notice/inform/index.scss

@@ -0,0 +1,60 @@
+#content {
+  display: flex;
+  border-top: 1px solid black;
+  .dept-content {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+  }
+
+  .left-dept {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+    border: 1px solid red;
+    border-top: 1px solid black;
+  }
+  .right {
+    flex: 80%;
+    height: 190px;
+    display: flex;
+    flex-direction: column;
+
+    .search-content {
+      display: flex;
+      width: 500px;
+      justify-content: space-around;
+      padding: 35px 12px 0 0;
+      margin-left: 20px;
+    }
+  }
+  .table-content {
+    margin: 12px 0 0 12px;
+
+    .ant-table-thead > tr > th {
+      color: #909399;
+      text-align: center;
+    }
+    .ant-table-tbody > tr > td {
+      text-align: center;
+    }
+  }
+  .add-content {
+    display: flex;
+    margin-left: 12px;
+    margin-top: 20px;
+    button:focus,
+    button:focus-visible {
+      outline: none;
+    }
+  }
+  .user-mid-button {
+    display: flex;
+    margin-left: 12px;
+    margin-top: 20px;
+    button:focus,
+    button:focus-visible {
+      outline: none;
+    }
+  }
+}

src/view/system/notice/inform/index.tsx

@@ -1,5 +1,242 @@
+import "./index.scss";
+import { Select, Button, Table, Space, Tag, message, Modal } from "antd";
+
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+
+import {
+  getNoticeListApi,
+  deleteNoticeInfoApi,
+} from "../../../../api/system/notice";
+
+import { useEffect, useState } from "react";
+import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
+
 export default function Inform() {
-  return(
-    <div>公告1</div>
-  )
-}
+  const [noticeInfo, setNoticeInfo] = useState<string>("");
+  const [isNoticeOpen, setIsNoticeOpen] = useState<boolean>(false);
+  const [listData, setListData] = useState([]);
+  const [messageApi, contextHolder] = message.useMessage();
+  const [queryParams, setQueryParams] = useState<QueryParamsType>({
+    state: undefined,
+    pageSize: undefined,
+    pageNum: undefined,
+  });
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "noticeId",
+      key: "noticeId",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "公告标题",
+      dataIndex: "noticeTitle",
+      key: "noticeTitle",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "阅读状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text: string) => (
+        <>
+          {text === "1" ? (
+            <Tag color="warning">已读</Tag>
+          ) : (
+            <Tag color="error">未读</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "操作",
+      key: "operate",
+      dataIndex: "operate",
+      render: (_: string, record: object) => (
+        <div style={{ color: "#58aaff" }}>
+          <Space>
+            <EditOutlined />
+            <a
+              href="#"
+              onClick={() => handleInfo(record)}
+              style={{ color: " #58aaff" }}
+            >
+              详情
+            </a>
+            <DeleteOutlined />
+            <a
+              href="#"
+              onClick={() => handleDel(record)}
+              style={{ color: " #58aaff" }}
+            >
+              删除
+            </a>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+
+  interface QueryParamsType {
+    state?: string;
+    pageSize?: number;
+    pageNum?: number;
+  }
+
+  const getList = async (newQueryParams: object) => {
+    try {
+      const { code, data } = await getNoticeListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleReset = async () => {
+    setQueryParams({});
+    getList({});
+  };
+
+  const handleSearch = () => {
+    getList(queryParams);
+  };
+
+  const handleInfo = (record: any) => {
+    setIsNoticeOpen(true);
+    setNoticeInfo(record.noticeTitle);
+  };
+
+  const handleInfoOk = () => {
+    setIsNoticeOpen(false);
+  };
+
+  const handleInfoCancel = () => {
+    setIsNoticeOpen(false);
+  };
+
+  const handleDel = async (record: any) => {
+    Modal.confirm({
+      title: `确定删除Id为-${record.noticeId}-, 名称为-${record.noticeTitle}-的岗位吗?`,
+      icon: <ExclamationCircleFilled />,
+      async onOk() {
+        const { code } = await deleteNoticeInfoApi(record.noticeId);
+        try {
+          if (code === 1000) {
+            messageApi.open({
+              type: "success",
+              content: "删除成功",
+            });
+            getList({});
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
+  const handlePageChange = (page: number) => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  useEffect(() => {
+    getList(queryParams);
+  }, []);
+
+  return (
+    <div id="content">
+      <>
+        <div className="right">
+          <div className="search-content">
+            <>
+              <Space>
+                <div>状态</div>
+                <Select
+                  style={{ width: 220 }}
+                  placeholder="请选择状态"
+                  allowClear
+                  options={[
+                    { value: "1", label: "已读" },
+                    { value: "0", label: "未读" },
+                  ]}
+                  value={queryParams.state}
+                  onChange={(value: any) =>
+                    setQueryParams({
+                      ...queryParams,
+                      state: value,
+                    })
+                  }
+                />
+              </Space>
+              <Space>
+                <div className="search-button">
+                  <Button type="primary" onClick={handleSearch}>
+                    <SearchOutlined />
+                    搜索
+                  </Button>
+                </div>
+              </Space>
+              <Space>
+                <div className="reset-button" onClick={handleReset}>
+                  <Button>
+                    <RedoOutlined />
+                    重置
+                  </Button>
+                </div>
+              </Space>
+            </>
+          </div>
+          <Modal
+            title="通知弹框"
+            open={isNoticeOpen}
+            onOk={handleInfoOk}
+            onCancel={handleInfoCancel}
+            footer={null}
+          >
+            <h1>{noticeInfo}</h1>
+          </Modal>
+          <div className="table-content">
+            <>
+              {contextHolder}
+              <Table
+                columns={columns}
+                dataSource={listData}
+                className="article-table"
+                pagination={{
+                  onChange: handlePageChange,
+                  locale: {
+                    jump_to: "跳至",
+                    page: "页",
+                  },
+                  showQuickJumper: true,
+                  showTotal: (total, range) =>
+                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+                }}
+              />
+            </>
+          </div>
+        </div>
+      </>
+    </div>
+  );
+}

src/view/system/notice/publish/index.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   Input,
   Select,
-  DatePicker,
   message,
   Table,
   Tag,
@@ -86,7 +85,7 @@ export default function Inform() {
     endTime: undefined,
   });
 
-  const [thisNotice,setThisNotice]=useState<any>({})
+  const [thisNotice, setThisNotice] = useState<any>({});
   //Modal
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
@@ -204,8 +203,8 @@ export default function Inform() {
     }
   };
   //   let thisrole: any = {roleId:'s'};
-  const handleDetail = (text:any) => {
-    getData(text.noticeId)
+  const handleDetail = (text: any) => {
+    getData(text.noticeId);
     setIsDetailModalOpen(true);
   };
   const handleDelete = (text: any) => {
@@ -240,14 +239,14 @@ export default function Inform() {
   };
   const handleSerach = () => {
     searchValue = formSearch.getFieldsValue();
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     count = 1;
     setQueryTableDataParams({ ...searchValue });
   };
   const handleReset = () => {
     formSearch.resetFields();
     searchValue = formSearch.getFieldsValue();
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     setQueryTableDataParams({ ...searchValue });
   };
   //Modal区域
@@ -328,17 +327,16 @@ export default function Inform() {
       }
     } catch (error) {}
   };
-  const getData =async(noticeId:number)=>{
+  const getData = async (noticeId: number) => {
     try {
-      const {data,code}=await getDataAPI(noticeId);
-      if(code===1000){
-        setThisNotice({...data})
+      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;
@@ -704,57 +702,67 @@ export default function Inform() {
           >
             <Row>
               <Col span={8}>
-                <Form.Item 
-                name='noticeTitle'
-                label='公告标题'
-                // initialValue={'ssss'}
+                <Form.Item
+                  name="noticeTitle"
+                  label="公告标题"
+                  // initialValue={'ssss'}
                 >
                   <span> {thisNotice.noticeTitle}</span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-              <Form.Item 
-                name='sendType'
-                label='发送类型'
-                // initialValue={'ssss'}
+                <Form.Item
+                  name="sendType"
+                  label="发送类型"
+                  // initialValue={'ssss'}
                 >
-                  <span> {thisNotice.sendType==='user'?'用户':thisNotice.sendType==='role'?'角色':
-                  thisNotice.sendType==='dept'?'部门':'全发'}</span>
+                  <span>
+                    {" "}
+                    {thisNotice.sendType === "user"
+                      ? "用户"
+                      : thisNotice.sendType === "role"
+                      ? "角色"
+                      : thisNotice.sendType === "dept"
+                      ? "部门"
+                      : "全发"}
+                  </span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-                <Form.Item
-                  name='sendIds'
-                  label='发送对象'
-                >
+                <Form.Item name="sendIds" label="发送对象">
                   <span></span>
                 </Form.Item>
               </Col>
             </Row>
             <Row>
               <Col span={8}>
-                <Form.Item 
-                  name='noticeType'
-                  label='公告类型'
-                >
-                  <span>{thisNotice.noticeType==='1'?<Tag color="processing">通知</Tag>:<Tag color="processing">公告</Tag>}</span>
+                <Form.Item name="noticeType" label="公告类型">
+                  <span>
+                    {thisNotice.noticeType === "1" ? (
+                      <Tag color="processing">通知</Tag>
+                    ) : (
+                      <Tag color="processing">公告</Tag>
+                    )}
+                  </span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-                <Form.Item
-                  name='contentType'
-                  label='内容类型'
-                >
-                  <span>{thisNotice.contentType==='html'?<Tag color="success">富文本</Tag>:<Tag>文本</Tag>}</span>
+                <Form.Item name="contentType" label="内容类型">
+                  <span>
+                    {thisNotice.contentType === "html" ? (
+                      <Tag color="success">富文本</Tag>
+                    ) : (
+                      <Tag>文本</Tag>
+                    )}
+                  </span>
                 </Form.Item>
               </Col>
             </Row>
             <Row>
-              <Form.Item
-                name='noticeContent'
-                label='公告内容'
-              >
-                <span dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}></span>
+              <Form.Item name="noticeContent" label="公告内容">
+                <span
+                  dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}
+                ></span>
               </Form.Item>
             </Row>
           </Form>