feat: add system

src/api/request.ts

-import axios from 'axios';
+import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
 import { message as $message } from 'antd';
 
+interface ResponseProp {
+  code: number
+  data?: any
+  message: string
+  success: boolean
+}
+
 const Service = axios.create({
   baseURL: '/api',
   timeout: 20000,
 });
 
 Service.interceptors.request.use(
-  config => {
+  (config: AxiosRequestConfig) => {
     const aToken = sessionStorage.getItem('aToken') || 'bearer fff06119-e69f-4527-a4bc-d4ca613e09be';
     aToken && (config.headers.Authorization = aToken);
     return config;
   },
-  error => {
+  (error: any) => {
     Promise.reject(error);
   }
 );
 
 Service.interceptors.response.use(
-  (response: any) => {
+  (response: AxiosResponse) => {
     const res = response.data;
     if (res.code === 0 || res.success) {
       return Promise.resolve(res);
@@ -31,8 +38,8 @@ Service.interceptors.response.use(
       // }
     }
   },
-  error => {
-    Promise.reject(error);
+  (error: any) => {
+    return Promise.reject(error);
   }
 );
 

src/api/system.api.ts

@@ -37,8 +37,8 @@ export const createSystem = (data: createData) => {
  */
 export const deleteSystem = (id: string) => {
   return request({
-    url: SystemApiUrl,
-    method: 'delete'
+    url: `${SystemApiUrl}${id}`,
+    method: 'delete',
   })
 }
 

src/pages/SystemSetting/SystemModal.tsx

 import React, { FC } from 'react';
-import { Modal, Form, Input, Button } from 'antd';
+import { Modal, Form, Input, Button, message as $message } from 'antd';
+import { createSystem } from "../../api/system.api";
 
 const { Item } = Form
 
 interface systemProp {
   modalVisible: boolean
-  onCreate: (values: any) => void
+  onCreate: (createRes: boolean) => void
   onCancel: () => void
 }
 
 const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
   const [form] = Form.useForm()
+
+  const createCallBack = async (formInfo: any) => {
+    try {
+      const createResult = await createSystem(formInfo) as any
+      const { code, message } = createResult
+      if (code === 200) {
+        $message.success('创建成功!')
+        onCreate(true)
+        form.resetFields()
+      } else {
+        $message.error('创建失败!' + message)
+      }
+    } catch (error) {
+      $message.error(error)
+      console.log(error)
+    }
+  }
+
   const onFinish = async () => {
     try {
       const validateRes = await form.validateFields()
-      console.log('onFinish::', validateRes)
       if (validateRes.errorFields) return
-      onCreate(validateRes)
-      form.resetFields()
+      createCallBack(validateRes)
     } catch (error) {
       console.log(error)
     }
@@ -52,14 +69,14 @@ const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
         <Item
           label="系统名称"
           name="name"
-          rules={[{ required: true, message: 'Please input system name' }]}
+          rules={[{ required: true, message: '请输入系统名称' }]}
         >
           <Input />
         </Item>
         <Item
           label="系统描述"
           name="description"
-          rules={[{ required: true, message: 'Please input description' }]}
+          rules={[{ required: true, message: '请输入系统描述' }]}
         >
           <Input />
         </Item>

src/pages/SystemSetting/index.tsx

 import React, { FC, useState, useEffect, useCallback } from 'react';
-import { Table, Button } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import { Table, Button, Space, Modal } from "antd";
+import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
 import { ColumnProps } from "antd/es/table";
 import dayjs from 'dayjs';
 import SystemModal from './SystemModal';
-import { getSystemList } from "../../api/system.api";
+import { getSystemList, deleteSystem } from "../../api/system.api";
 
 // const utc = require('dayjs/plugin/utc');
 // dayjs.extend(utc);
 
 const { Column } = Table;
+const { confirm } = Modal;
 
 interface System {
-  createTime: string
+  createTime: number
   description: string
   id: number
   modifyTime: null
@@ -28,7 +29,6 @@ const SystemSetting: FC<SystemSettingProp> = () => {
   const initData = useCallback(async () => {
     try {
       const result = await getSystemList()
-      console.log('initData', result.data)
       if (result.data) {
         setTableData(result.data)
       }
@@ -36,6 +36,28 @@ const SystemSetting: FC<SystemSettingProp> = () => {
       console.error(error)
     }
   }, [])
+
+  /**
+   * 删除节点
+   */
+  const onRemoveRow = (selectedRow: any) => {
+    console.log('onRemoveRow::', selectedRow)
+    confirm({
+      title: '你确定要删除吗?',
+      icon: <ExclamationCircleOutlined />,
+      okText: '确认',
+      okType: 'danger',
+      cancelText: '取消',
+      async onOk() {
+        console.log('OK');
+        const deleteRes = await deleteSystem(selectedRow.id) as any
+        console.log('deleteRes', deleteRes)
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  }
   useEffect(() => {
     initData()
   }, [initData])
@@ -56,11 +78,31 @@ const SystemSetting: FC<SystemSettingProp> = () => {
           align="center"
           render={(text) => <span>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>}
         />
+        <Column<ColumnProps<System>>
+          title="操作"
+          align="center"
+          render={(_, record) => (
+            <Space>
+              <Button
+                type="link"
+                size="small"
+              >编辑</Button>
+              <Button
+                type="link"
+                size="small"
+                onClick={ () => {
+                  onRemoveRow(record)
+                }}
+              >删除</Button>
+            </Space>
+          )}
+        />
       </Table>
       <SystemModal
         modalVisible={modalShow}
         onCreate={ (value) => {
           console.log(value)
+          initData()
           setModalShow(false)
         } }
         onCancel={ () => setModalShow(false) }