feat: 初始化
This commit is contained in:
commit
3563c1c7b1
3
.eslintrc.js
Normal file
3
.eslintrc.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: require.resolve('@umijs/max/eslint'),
|
||||||
|
};
|
14
.gitignore
vendored
Normal file
14
.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/node_modules
|
||||||
|
/.env.local
|
||||||
|
/.umirc.local.ts
|
||||||
|
/config/config.local.ts
|
||||||
|
/src/.umi
|
||||||
|
/src/.umi-production
|
||||||
|
/src/.umi-test
|
||||||
|
/.umi
|
||||||
|
/.umi-production
|
||||||
|
/.umi-test
|
||||||
|
/dist
|
||||||
|
/.mfsu
|
||||||
|
.swc
|
||||||
|
aircraft-carrier-fleet
|
4
.husky/commit-msg
Normal file
4
.husky/commit-msg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx --no-install max verify-commit $1
|
4
.husky/pre-commit
Normal file
4
.husky/pre-commit
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx --no-install lint-staged --quiet
|
17
.lintstagedrc
Normal file
17
.lintstagedrc
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"*.{md,json}": [
|
||||||
|
"prettier --cache --write"
|
||||||
|
],
|
||||||
|
"*.{js,jsx}": [
|
||||||
|
"max lint --fix --eslint-only",
|
||||||
|
"prettier --cache --write"
|
||||||
|
],
|
||||||
|
"*.{css,less}": [
|
||||||
|
"max lint --fix --stylelint-only",
|
||||||
|
"prettier --cache --write"
|
||||||
|
],
|
||||||
|
"*.ts?(x)": [
|
||||||
|
"max lint --fix --eslint-only",
|
||||||
|
"prettier --cache --parser=typescript --write"
|
||||||
|
]
|
||||||
|
}
|
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
.umi
|
||||||
|
.umi-production
|
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"printWidth": 80,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"proseWrap": "never",
|
||||||
|
"overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
|
||||||
|
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
|
||||||
|
}
|
3
.stylelintrc.js
Normal file
3
.stylelintrc.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: require.resolve('@umijs/max/stylelint'),
|
||||||
|
};
|
24
.umirc.ts
Normal file
24
.umirc.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { defineConfig } from '@umijs/max';
|
||||||
|
import pkg from './package.json'
|
||||||
|
import Password from 'antd/es/input/Password';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
favicons: ['/assets/logo.jpg'],
|
||||||
|
access: {},
|
||||||
|
model: {},
|
||||||
|
outputPath: pkg.name,
|
||||||
|
initialState: {},
|
||||||
|
layout: false,
|
||||||
|
qiankun: {
|
||||||
|
master: {},
|
||||||
|
},
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
name: 'AI 算法仓平台',
|
||||||
|
path: '/smart-cabinet/*',
|
||||||
|
microApp: 'smart-cabinet'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
npmClient: 'pnpm',
|
||||||
|
});
|
||||||
|
|
5
.vscode/settings.json
vendored
Normal file
5
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"cSpell.words": [
|
||||||
|
"qiankun"
|
||||||
|
]
|
||||||
|
}
|
3
README.md
Normal file
3
README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# README
|
||||||
|
|
||||||
|
`@umijs/max` 模板项目,更多功能参考 [Umi Max 简介](https://umijs.org/docs/max/introduce)
|
24
config/routes/index.ts
Normal file
24
config/routes/index.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
export default {
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: '@/layouts/index.tsx',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/app1',
|
||||||
|
component: '@/layouts/app-layout.tsx',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/project/*',
|
||||||
|
microApp: 'app1',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/app2/*',
|
||||||
|
microApp: 'app2',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
20
mock/userAPI.ts
Normal file
20
mock/userAPI.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
const users = [
|
||||||
|
{ id: 0, name: 'Umi', nickName: 'U', gender: 'MALE' },
|
||||||
|
{ id: 1, name: 'Fish', nickName: 'B', gender: 'FEMALE' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
'GET /api/v1/queryUserList': (req: any, res: any) => {
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: { list: users },
|
||||||
|
errorCode: 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
'PUT /api/v1/user/': (req: any, res: any) => {
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
errorCode: 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
33
package.json
Normal file
33
package.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "aircraft-carrier-fleet",
|
||||||
|
"private": true,
|
||||||
|
"author": "dev <710328466@qq.com>",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "max dev",
|
||||||
|
"build": "max build",
|
||||||
|
"format": "prettier --cache --write .",
|
||||||
|
"prepare": "husky install",
|
||||||
|
"postinstall": "max setup",
|
||||||
|
"page": "cross-env max g page",
|
||||||
|
"comp": "cross-env max g component",
|
||||||
|
"setup": "max setup",
|
||||||
|
"start": "npm run dev"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.3.0",
|
||||||
|
"@ant-design/pro-components": "^2.6.49",
|
||||||
|
"@umijs/max": "^4.1.1",
|
||||||
|
"antd": "^5.14.1",
|
||||||
|
"cross-env": "^7.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.57",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"husky": "^9.0.11",
|
||||||
|
"lint-staged": "^15.2.2",
|
||||||
|
"prettier": "^3.2.5",
|
||||||
|
"prettier-plugin-organize-imports": "^3.2.4",
|
||||||
|
"prettier-plugin-packagejson": "^2.4.11",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
11046
pnpm-lock.yaml
Normal file
11046
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
10
src/access.ts
Normal file
10
src/access.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export default (initialState: API.UserInfo) => {
|
||||||
|
// 在这里按照初始化数据定义项目中的权限,统一管理
|
||||||
|
// 参考文档 https://umijs.org/docs/max/access
|
||||||
|
const canSeeAdmin = !!(
|
||||||
|
initialState && initialState.name !== 'dontHaveAccess'
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
canSeeAdmin,
|
||||||
|
};
|
||||||
|
};
|
44
src/app.ts
Normal file
44
src/app.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
// 运行时配置
|
||||||
|
export async function getInitialState(): Promise<{ name: string }> {
|
||||||
|
return { name: '@umijs/max' };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useQiankunStateForSlave() {
|
||||||
|
const [globalState, setGlobalState] = useState<any>({
|
||||||
|
slogan: 'qiankun',
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
globalState,
|
||||||
|
setGlobalState,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const qiankun = {
|
||||||
|
apps: [
|
||||||
|
{
|
||||||
|
name: 'smart-cabinet', // 盒子管理
|
||||||
|
entry: '//localhost:8668',
|
||||||
|
props: {
|
||||||
|
accountInfo: {
|
||||||
|
username: 'admin',
|
||||||
|
password: 'test123',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'smart-video-analysis', // AI 智能分析仓
|
||||||
|
entry: '//localhost:8678'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'algorithm-warehouse', // AI 算法分析
|
||||||
|
entry: '//localhost:8688'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'communal-facilities-pages', // 物料库
|
||||||
|
entry: '//localhost:8698'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
0
src/assets/.gitkeep
Normal file
0
src/assets/.gitkeep
Normal file
BIN
src/assets/logo.jpg
Normal file
BIN
src/assets/logo.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
4
src/components/Guide/Guide.less
Normal file
4
src/components/Guide/Guide.less
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.title {
|
||||||
|
margin: 0 auto;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
23
src/components/Guide/Guide.tsx
Normal file
23
src/components/Guide/Guide.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Layout, Row, Typography } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import styles from './Guide.less';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚手架示例组件
|
||||||
|
const Guide: React.FC<Props> = (props) => {
|
||||||
|
const { name } = props;
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<Row>
|
||||||
|
<Typography.Title level={3} className={styles.title}>
|
||||||
|
欢迎使用 <strong>{name}</strong> !
|
||||||
|
</Typography.Title>
|
||||||
|
</Row>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Guide;
|
2
src/components/Guide/index.ts
Normal file
2
src/components/Guide/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import Guide from './Guide';
|
||||||
|
export default Guide;
|
0
src/constants/index.ts
Normal file
0
src/constants/index.ts
Normal file
5
src/layouts/index.less
Normal file
5
src/layouts/index.less
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.layout {
|
||||||
|
&_tag {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
13
src/layouts/index.tsx
Normal file
13
src/layouts/index.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Outlet } from '@umijs/max';
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
export default function Layout() {
|
||||||
|
return (
|
||||||
|
<div className={styles.layout}>
|
||||||
|
<div className={styles.layout_tag} style={{ position: 'fixed', zIndex: 9999999999999999 }} >
|
||||||
|
测试项目
|
||||||
|
</div>
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
13
src/models/global.ts
Normal file
13
src/models/global.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// 全局共享数据示例
|
||||||
|
import { DEFAULT_NAME } from '@/constants';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const useUser = () => {
|
||||||
|
const [name, setName] = useState<string>(DEFAULT_NAME);
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
setName,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useUser;
|
21
src/pages/Access/index.tsx
Normal file
21
src/pages/Access/index.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { PageContainer } from '@ant-design/pro-components';
|
||||||
|
import { Access, useAccess } from '@umijs/max';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
const AccessPage: React.FC = () => {
|
||||||
|
const access = useAccess();
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
ghost
|
||||||
|
header={{
|
||||||
|
title: '权限示例',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Access accessible={access.canSeeAdmin}>
|
||||||
|
<Button>只有 Admin 可以看到这个按钮</Button>
|
||||||
|
</Access>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AccessPage;
|
26
src/pages/Table/components/CreateForm.tsx
Normal file
26
src/pages/Table/components/CreateForm.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
138
src/pages/Table/components/UpdateForm.tsx
Normal file
138
src/pages/Table/components/UpdateForm.tsx
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
import {
|
||||||
|
ProFormDateTimePicker,
|
||||||
|
ProFormRadio,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormText,
|
||||||
|
ProFormTextArea,
|
||||||
|
StepsForm,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Modal } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export interface FormValueType extends Partial<API.UserInfo> {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateFormProps {
|
||||||
|
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||||
|
onSubmit: (values: FormValueType) => Promise<void>;
|
||||||
|
updateModalVisible: boolean;
|
||||||
|
values: Partial<API.UserInfo>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||||
|
<StepsForm
|
||||||
|
stepsProps={{
|
||||||
|
size: 'small',
|
||||||
|
}}
|
||||||
|
stepsFormRender={(dom, submitter) => {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={640}
|
||||||
|
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||||
|
destroyOnClose
|
||||||
|
title="规则配置"
|
||||||
|
open={props.updateModalVisible}
|
||||||
|
footer={submitter}
|
||||||
|
onCancel={() => props.onCancel()}
|
||||||
|
>
|
||||||
|
{dom}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onFinish={props.onSubmit}
|
||||||
|
>
|
||||||
|
<StepsForm.StepForm
|
||||||
|
initialValues={{
|
||||||
|
name: props.values.name,
|
||||||
|
nickName: props.values.nickName,
|
||||||
|
}}
|
||||||
|
title="基本信息"
|
||||||
|
>
|
||||||
|
<ProFormText
|
||||||
|
width="md"
|
||||||
|
name="name"
|
||||||
|
label="规则名称"
|
||||||
|
rules={[{ required: true, message: '请输入规则名称!' }]}
|
||||||
|
/>
|
||||||
|
<ProFormTextArea
|
||||||
|
name="desc"
|
||||||
|
width="md"
|
||||||
|
label="规则描述"
|
||||||
|
placeholder="请输入至少五个字符"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入至少五个字符的规则描述!', min: 5 },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
<StepsForm.StepForm
|
||||||
|
initialValues={{
|
||||||
|
target: '0',
|
||||||
|
template: '0',
|
||||||
|
}}
|
||||||
|
title="配置规则属性"
|
||||||
|
>
|
||||||
|
<ProFormSelect
|
||||||
|
width="md"
|
||||||
|
name="target"
|
||||||
|
label="监控对象"
|
||||||
|
valueEnum={{
|
||||||
|
0: '表一',
|
||||||
|
1: '表二',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ProFormSelect
|
||||||
|
width="md"
|
||||||
|
name="template"
|
||||||
|
label="规则模板"
|
||||||
|
valueEnum={{
|
||||||
|
0: '规则模板一',
|
||||||
|
1: '规则模板二',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ProFormRadio.Group
|
||||||
|
name="type"
|
||||||
|
width="md"
|
||||||
|
label="规则类型"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
value: '0',
|
||||||
|
label: '强',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '弱',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
<StepsForm.StepForm
|
||||||
|
initialValues={{
|
||||||
|
type: '1',
|
||||||
|
frequency: 'month',
|
||||||
|
}}
|
||||||
|
title="设定调度周期"
|
||||||
|
>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
name="time"
|
||||||
|
label="开始时间"
|
||||||
|
rules={[{ required: true, message: '请选择开始时间!' }]}
|
||||||
|
/>
|
||||||
|
<ProFormSelect
|
||||||
|
name="frequency"
|
||||||
|
label="监控对象"
|
||||||
|
width="xs"
|
||||||
|
valueEnum={{
|
||||||
|
month: '月',
|
||||||
|
week: '周',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
</StepsForm>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default UpdateForm;
|
270
src/pages/Table/index.tsx
Normal file
270
src/pages/Table/index.tsx
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('配置成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('配置失败请重试!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功,即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败,请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const TableList: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
tip: '名称是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '名称为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '昵称',
|
||||||
|
dataIndex: 'nickName',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '性别',
|
||||||
|
dataIndex: 'gender',
|
||||||
|
hideInForm: true,
|
||||||
|
valueEnum: {
|
||||||
|
0: { text: '男', status: 'MALE' },
|
||||||
|
1: { text: '女', status: 'FEMALE' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
配置
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">订阅警报</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: 'CRUD 示例',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="查询表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
<Button type="primary">批量审批</Button>
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableList;
|
9
src/pages/docs.tsx
Normal file
9
src/pages/docs.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
const DocsPage = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>This is umi docs.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DocsPage;
|
8
src/pages/error/index.tsx
Normal file
8
src/pages/error/index.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>error</h2>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
8
src/pages/index.tsx
Normal file
8
src/pages/index.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Yay! Welcome to umi!</h2>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
96
src/services/demo/UserController.ts
Normal file
96
src/services/demo/UserController.ts
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
// 该文件由 OneAPI 自动生成,请勿手动修改!
|
||||||
|
import { request } from '@umijs/max';
|
||||||
|
|
||||||
|
/** 此处后端没有提供注释 GET /api/v1/queryUserList */
|
||||||
|
export async function queryUserList(
|
||||||
|
params: {
|
||||||
|
// query
|
||||||
|
/** keyword */
|
||||||
|
keyword?: string;
|
||||||
|
/** current */
|
||||||
|
current?: number;
|
||||||
|
/** pageSize */
|
||||||
|
pageSize?: number;
|
||||||
|
},
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
return request<API.Result_PageInfo_UserInfo__>('/api/v1/queryUserList', {
|
||||||
|
method: 'GET',
|
||||||
|
params: {
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
...(options || {}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 此处后端没有提供注释 POST /api/v1/user */
|
||||||
|
export async function addUser(
|
||||||
|
body?: API.UserInfoVO,
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
return request<API.Result_UserInfo_>('/api/v1/user', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
data: body,
|
||||||
|
...(options || {}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 此处后端没有提供注释 GET /api/v1/user/${param0} */
|
||||||
|
export async function getUserDetail(
|
||||||
|
params: {
|
||||||
|
// path
|
||||||
|
/** userId */
|
||||||
|
userId?: string;
|
||||||
|
},
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
const { userId: param0 } = params;
|
||||||
|
return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
|
||||||
|
method: 'GET',
|
||||||
|
params: { ...params },
|
||||||
|
...(options || {}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 此处后端没有提供注释 PUT /api/v1/user/${param0} */
|
||||||
|
export async function modifyUser(
|
||||||
|
params: {
|
||||||
|
// path
|
||||||
|
/** userId */
|
||||||
|
userId?: string;
|
||||||
|
},
|
||||||
|
body?: API.UserInfoVO,
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
const { userId: param0 } = params;
|
||||||
|
return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
params: { ...params },
|
||||||
|
data: body,
|
||||||
|
...(options || {}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 此处后端没有提供注释 DELETE /api/v1/user/${param0} */
|
||||||
|
export async function deleteUser(
|
||||||
|
params: {
|
||||||
|
// path
|
||||||
|
/** userId */
|
||||||
|
userId?: string;
|
||||||
|
},
|
||||||
|
options?: { [key: string]: any },
|
||||||
|
) {
|
||||||
|
const { userId: param0 } = params;
|
||||||
|
return request<API.Result_string_>(`/api/v1/user/${param0}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
params: { ...params },
|
||||||
|
...(options || {}),
|
||||||
|
});
|
||||||
|
}
|
7
src/services/demo/index.ts
Normal file
7
src/services/demo/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
// 该文件由 OneAPI 自动生成,请勿手动修改!
|
||||||
|
|
||||||
|
import * as UserController from './UserController';
|
||||||
|
export default {
|
||||||
|
UserController,
|
||||||
|
};
|
68
src/services/demo/typings.d.ts
vendored
Normal file
68
src/services/demo/typings.d.ts
vendored
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
// 该文件由 OneAPI 自动生成,请勿手动修改!
|
||||||
|
|
||||||
|
declare namespace API {
|
||||||
|
interface PageInfo {
|
||||||
|
/**
|
||||||
|
1 */
|
||||||
|
current?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
total?: number;
|
||||||
|
list?: Array<Record<string, any>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PageInfo_UserInfo_ {
|
||||||
|
/**
|
||||||
|
1 */
|
||||||
|
current?: number;
|
||||||
|
pageSize?: number;
|
||||||
|
total?: number;
|
||||||
|
list?: Array<UserInfo>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Result {
|
||||||
|
success?: boolean;
|
||||||
|
errorMessage?: string;
|
||||||
|
data?: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Result_PageInfo_UserInfo__ {
|
||||||
|
success?: boolean;
|
||||||
|
errorMessage?: string;
|
||||||
|
data?: PageInfo_UserInfo_;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Result_UserInfo_ {
|
||||||
|
success?: boolean;
|
||||||
|
errorMessage?: string;
|
||||||
|
data?: UserInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Result_string_ {
|
||||||
|
success?: boolean;
|
||||||
|
errorMessage?: string;
|
||||||
|
data?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type UserGenderEnum = 'MALE' | 'FEMALE';
|
||||||
|
|
||||||
|
interface UserInfo {
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
/** nick */
|
||||||
|
nickName?: string;
|
||||||
|
/** email */
|
||||||
|
email?: string;
|
||||||
|
gender?: UserGenderEnum;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserInfoVO {
|
||||||
|
name?: string;
|
||||||
|
/** nick */
|
||||||
|
nickName?: string;
|
||||||
|
/** email */
|
||||||
|
email?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type definitions_0 = null;
|
||||||
|
}
|
4
src/utils/format.ts
Normal file
4
src/utils/format.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// 示例方法,没有实际意义
|
||||||
|
export function trim(str: string) {
|
||||||
|
return str.trim();
|
||||||
|
}
|
3
tsconfig.json
Normal file
3
tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "./src/.umi/tsconfig.json"
|
||||||
|
}
|
1
typings.d.ts
vendored
Normal file
1
typings.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
import '@umijs/max/typings';
|
Loading…
Reference in New Issue
Block a user