Skip to content

周志凯 / auth-manage

Go to a project
Commit ae484371 by 周志凯
Options

feat: add system

1 parent f52e72ff
Inline Side-by-side
Showing 4 changed files with 86 additions and 20 deletions
src/api/request.ts
import axios from 'axios'; import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import { message as $message } from 'antd'; import { message as $message } from 'antd';
interface ResponseProp {
code: number
data?: any
message: string
success: boolean
}
const Service = axios.create({ const Service = axios.create({
baseURL: '/api', baseURL: '/api',
timeout: 20000, timeout: 20000,
}); });
Service.interceptors.request.use( Service.interceptors.request.use(
config => { (config: AxiosRequestConfig) => {
const aToken = sessionStorage.getItem('aToken') || 'bearer fff06119-e69f-4527-a4bc-d4ca613e09be'; const aToken = sessionStorage.getItem('aToken') || 'bearer fff06119-e69f-4527-a4bc-d4ca613e09be';
aToken && (config.headers.Authorization = aToken); aToken && (config.headers.Authorization = aToken);
return config; return config;
}, },
error => { (error: any) => {
Promise.reject(error); Promise.reject(error);
} }
); );
Service.interceptors.response.use( Service.interceptors.response.use(
(response: any) => { (response: AxiosResponse) => {
const res = response.data; const res = response.data;
if (res.code === 0 || res.success) { if (res.code === 0 || res.success) {
return Promise.resolve(res); return Promise.resolve(res);
...@@ -31,8 +38,8 @@ Service.interceptors.response.use( ...@@ -31,8 +38,8 @@ Service.interceptors.response.use(
// } // }
} }
}, },
error => { (error: any) => {
Promise.reject(error); return Promise.reject(error);
} }
); );
......
src/api/system.api.ts
...@@ -37,8 +37,8 @@ export const createSystem = (data: createData) => { ...@@ -37,8 +37,8 @@ export const createSystem = (data: createData) => {
*/ */
export const deleteSystem = (id: string) => { export const deleteSystem = (id: string) => {
return request({ return request({
url: SystemApiUrl, url: `${SystemApiUrl}${id}`,
method: 'delete' method: 'delete',
}) })
} }
src/pages/SystemSetting/SystemModal.tsx
import React, { FC } from 'react'; 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 const { Item } = Form
interface systemProp { interface systemProp {
modalVisible: boolean modalVisible: boolean
onCreate: (values: any) => void onCreate: (createRes: boolean) => void
onCancel: () => void onCancel: () => void
} }
const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => { const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
const [form] = Form.useForm() 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 () => { const onFinish = async () => {
try { try {
const validateRes = await form.validateFields() const validateRes = await form.validateFields()
console.log('onFinish::', validateRes)
if (validateRes.errorFields) return if (validateRes.errorFields) return
onCreate(validateRes) createCallBack(validateRes)
form.resetFields()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
...@@ -52,14 +69,14 @@ const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => { ...@@ -52,14 +69,14 @@ const SystemModal: FC<systemProp> = ({ modalVisible, onCreate, onCancel }) => {
<Item <Item
label="系统名称" label="系统名称"
name="name" name="name"
rules={[{ required: true, message: 'Please input system name' }]} rules={[{ required: true, message: '请输入系统名称' }]}
> >
<Input /> <Input />
</Item> </Item>
<Item <Item
label="系统描述" label="系统描述"
name="description" name="description"
rules={[{ required: true, message: 'Please input description' }]} rules={[{ required: true, message: '请输入系统描述' }]}
> >
<Input /> <Input />
</Item> </Item>
......
src/pages/SystemSetting/index.tsx
import React, { FC, useState, useEffect, useCallback } from 'react'; import React, { FC, useState, useEffect, useCallback } from 'react';
import { Table, Button } from "antd"; import { Table, Button, Space, Modal } from "antd";
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import { ColumnProps } from "antd/es/table"; import { ColumnProps } from "antd/es/table";
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import SystemModal from './SystemModal'; import SystemModal from './SystemModal';
import { getSystemList } from "../../api/system.api"; import { getSystemList, deleteSystem } from "../../api/system.api";
// const utc = require('dayjs/plugin/utc'); // const utc = require('dayjs/plugin/utc');
// dayjs.extend(utc); // dayjs.extend(utc);
const { Column } = Table; const { Column } = Table;
const { confirm } = Modal;
interface System { interface System {
createTime: string createTime: number
description: string description: string
id: number id: number
modifyTime: null modifyTime: null
...@@ -28,7 +29,6 @@ const SystemSetting: FC<SystemSettingProp> = () => { ...@@ -28,7 +29,6 @@ const SystemSetting: FC<SystemSettingProp> = () => {
const initData = useCallback(async () => { const initData = useCallback(async () => {
try { try {
const result = await getSystemList() const result = await getSystemList()
console.log('initData', result.data)
if (result.data) { if (result.data) {
setTableData(result.data) setTableData(result.data)
} }
...@@ -36,6 +36,28 @@ const SystemSetting: FC<SystemSettingProp> = () => { ...@@ -36,6 +36,28 @@ const SystemSetting: FC<SystemSettingProp> = () => {
console.error(error) 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(() => { useEffect(() => {
initData() initData()
}, [initData]) }, [initData])
...@@ -56,11 +78,31 @@ const SystemSetting: FC<SystemSettingProp> = () => { ...@@ -56,11 +78,31 @@ const SystemSetting: FC<SystemSettingProp> = () => {
align="center" align="center"
render={(text) => <span>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>} 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> </Table>
<SystemModal <SystemModal
modalVisible={modalShow} modalVisible={modalShow}
onCreate={ (value) => { onCreate={ (value) => {
console.log(value) console.log(value)
initData()
setModalShow(false) setModalShow(false)
} } } }
onCancel={ () => setModalShow(false) } onCancel={ () => setModalShow(false) }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!