Commit 4599367f authored by wangkai's avatar wangkai 🤒
Browse files

first commit

parent ff21cb9d
/yarn.lock
/package-lock.json
/dist
/node_modules
/pages
.umi
.umi-production
**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
export default {
plugins: [
[
'umi-plugin-block-dev',
{
layout: 'ant-design-pro',
},
],
[
'umi-plugin-react',
{
antd: true,
dva: true,
locale: true,
},
],
],
};
The MIT License (MIT)
Copyright (c) 2019-present wangkai ()
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
# @umi-blocks/tree-table
# @umi-blocks/tree-form
左侧为树结构,右侧为树节点详情,左右联动。
可对树节点执行:编辑、删除、添加子级、添加同级操作。
## Usage
```sh
umi block add https://gitlab.rd.virsical.cn/wangkai/tree-table.git --path=/[The directory you placed]
umi block add https://gitlab.rd.virsical.cn/wangkai/tree-form.git --path=/[The directory you placed]
```
## SNAPSHOT
\ No newline at end of file
## SNAPSHOT
![avatar](/snapshot.png)
## LICENSE
MIT
{
"name": "@umi-block/tree-form",
"version": "0.0.1",
"description": "left tree.right form.",
"main": "src/index.js",
"authors": {
"name": "wangkai",
"email": ""
},
"repository": "umijs/umi-blocks/tree-form",
"scripts": {
"dev": "umi dev"
},
"dependencies": {
"antd": "^3.24.0",
"dva": "^2.4.1",
"moment-timezone": "^0.5.27",
"react": ">=16.0.0",
"umi-plugin-react": "^1.12.6",
"umi-request": "^1.2.8"
},
"devDependencies": {
"@ant-design/pro-layout": "^4.5.16",
"umi": "^2.9.0",
"umi-plugin-block-dev": "^2.0.0"
},
"license": "MIT"
}
export default {
// 树
'GET /api/BLOCK_NAME_CAMEL_CASE/fetchTreeData': {
code: 0,
msg: 'success',
data: [
{
id: 1,
parentId: 0,
children: [
{
id: 3,
parentId: 1,
children: [
{
id: 4,
parentId: 3,
children: [
{
id: 5,
parentId: 4,
children: [],
name: '院校农信',
},
],
name: '高新农信',
},
],
name: '潍坊农信',
},
],
name: '山东农信',
},
],
},
// 表格数据
'GET /api/BLOCK_NAME_CAMEL_CASE/fetchAllTableData': (req, res) => {
if (req.query.current == 0) {
res.send({
code: 0,
msg: null,
data: {
records: [
{
userId: 60,
username: 'ddd',
delFlag: "0",
phone: '13700000001',
deptName: '威发威发威威发威发威威发',
realName: 'ddd',
realNameEn: 'ddd',
},
{
userId: 59,
username: 'ccc',
delFlag: "1",
phone: '13700000000',
deptName: '产品技术组',
realName: 'ccc',
realNameEn: 'ccc',
},
{
userId: 58,
username: 'huoliang3',
delFlag: "9",
phone: '17629018932',
deptName: '威发威发威威发威发威威发',
realName: '谦腾',
realNameEn: 'huoliang3',
},
{
userId: 57,
username: 'wangziru',
phone: '15591871688',
deptName: '人事行政部',
realName: 'aaa',
realNameEn: '',
},
{
userId: 56,
username: 'zhangyongxin1',
phone: '15591870689',
delFlag: "0",
deptName: '人事行政部',
realName: '啊啊啊',
realNameEn: '',
},
{
userId: 53,
username: 'zhangyongxin2',
phone: '13333333332',
delFlag: "0",
deptName: '产品技术组',
realName: '张永欣',
},
{
userId: 52,
username: 'wangcong',
phone: '18513029927',
deptName: '产品技术组',
realName: '王聪',
delFlag: "0",
},
{
userId: 51,
username: 'wangziru',
phone: '13891457852',
deptName: '协作应用研发部',
realName: '王自如',
realNameEn: '',
delFlag: "9",
},
{
userId: 50,
username: 'dengqi',
phone: '15353959184',
deptName: '协作应用研发部',
realName: 'dengqi',
realNameEn: 'dengqi',
delFlag: "9",
},
{
userId: 49,
username: 'wangsongsong',
delFlag: '0',
lockFlag: '0',
phone: '13999999999',
deptName: '威发威发威威发威发威威发',
realName: '王松松',
realNameEn: '王松松',
delFlag: "9",
},
],
total: 13,
size: 10,
current: 0,
searchCount: true,
pages: 2,
},
});
} else if (req.query.current == 1) {
res.send({
code: 0,
msg: null,
data: {
records: [
{
userId: 47,
username: 'az',
phone: '13022222222',
deptName: '新城',
realName: 'az1',
realNameEn: 'az12',
delFlag: "1",
},
{
userId: 46,
username: 'guojh',
phone: '17629018989',
deptName: '前端开发组',
realName: 'guojh',
realNameEn: 'guojh',
delFlag: "1",
},
{
userId: 44,
username: 'guojh',
phone: '17629018979',
deptName: '北京北京北京',
realName: 'guojh',
realNameEn: 'guojh@wafertest.com',
delFlag: "0",
},
],
total: 13,
size: 10,
current: 1,
searchCount: true,
pages: 3,
},
});
}
},
// 保存
'POST /api/BLOCK_NAME_CAMEL_CASE/saveNodeData': {
code: 0,
msg: 'success',
data: null,
},
// 更新
'POST /api/BLOCK_NAME_CAMEL_CASE/updateNodeData': {
code: 0,
msg: 'success',
data: null,
},
'POST /api/BLOCK_NAME_CAMEL_CASE/deleteNode': {
code: 0,
msg: 'success',
data: null,
},
};
import React, { PureComponent } from 'react';
import { Dropdown } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
export default class HeaderDropdown extends PureComponent {
render() {
const { overlayClassName, ...props } = this.props;
return (
<Dropdown overlayClassName={classNames(styles.container, overlayClassName)} {...props} />
);
}
}
@import '~antd/lib/style/themes/default.less';
.container > *:global(:not(.ant-dropdown-menu)) {
background-color: #fff;
box-shadow: @shadow-1-down;
border-radius: 4px;
}
@media screen and (max-width: @screen-xs) {
.container {
width: 100% !important;
}
.container > * {
border-radius: 0 !important;
}
}
import React, { PureComponent } from 'react';
import { Form, Input, Select, Button } from 'antd';
import moment from 'moment-timezone';
import { formatMessage } from 'umi-plugin-react/locale';
import { MIN_MENU_TITLE_LENGTH, MAX_MENU_TITLE_LENGTH } from '../../utils/contant';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 10, offset: 7 },
},
};
const initTimeZone = () => {
const timeZones = moment.tz.names();
const offsetTmz = [];
timeZones.forEach((element, i) => {
offsetTmz.push({
key: `GMT${moment.tz(timeZones[i]).format('Z')}`,
title: `(GMT${moment.tz(timeZones[i]).format('Z')}) ${element}`,
});
});
return offsetTmz;
};
const timeZone = initTimeZone();
@Form.create()
class SaveOrUpdate extends PureComponent {
okHandle = e => {
e.preventDefault();
const { form, disableForm, parentId, details } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
const { dispatch } = this.props;
let type;
let data;
if (details) {
data = { ...details, ...fieldsValue };
type = 'BLOCK_NAME_CAMEL_CASE/updateNode';
} else {
data = { ...fieldsValue, parentId };
type = 'BLOCK_NAME_CAMEL_CASE/saveNode';
}
dispatch({
type,
payload: {
data,
success: () => {
form.resetFields();
disableForm();
},
},
});
});
};
cancelHandle = () => {
const { form, disableForm } = this.props;
form.resetFields();
disableForm();
};
onIconChange = v => {
const { form } = this.props;
form.setFieldsValue({ icon: v });
};
initialParentValue = (node, edit) => {
if (node) {
return node.parentId;
}
if (edit) {
return -1;
}
return '';
};
render() {
const { form, details, edit, holidayList } = this.props;
return (
<Form onSubmit={this.okHandle}>
<FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name' })}
>
{form.getFieldDecorator('name', {
initialValue: (details && details.name) || '',
rules: [
{
message: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name.placeholder' }),
required: true,
min: MIN_MENU_TITLE_LENGTH,
max: MAX_MENU_TITLE_LENGTH,
},
],
})(
<Input
maxLength={MAX_MENU_TITLE_LENGTH + 1}
disabled={!edit}
placeholder={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name.placeholder' })}
/>,
)}
</FormItem>
<FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name' })}
>
{form.getFieldDecorator('nameEn', {
initialValue: (details && details.nameEn) || '',
rules: [
{
message: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name.placeholder' }),
min: MIN_MENU_TITLE_LENGTH,
max: MAX_MENU_TITLE_LENGTH,
},
],
})(
<Input
maxLength={MAX_MENU_TITLE_LENGTH + 1}
disabled={!edit}
placeholder={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name.placeholder' })}
/>,
)}
</FormItem>
<FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.time.zone' })}
>
{form.getFieldDecorator('timeZone', {
initialValue: (details && details.timeZone) || '(GMT+08:00) Asia/Shanghai',
})(
<Select
disabled={!edit}
onChange={this.onIconChange}
placeholder={formatMessage({
id: 'BLOCK_NAME_CAMEL_CASE.form.time.zone.placeholder',
})}
optionLabelProp="title"
>
{timeZone &&
timeZone.map(v => (
<Option key={v.title} title={v.title} value={v.title}>
{v.title}
</Option>
))}
</Select>,
)}
</FormItem>
<FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.longitude.and.latitude' })}
>
{form.getFieldDecorator('location', {
initialValue: (details && details.location) || null,
})(
<Input
disabled={!edit}
placeholder={formatMessage({
id: 'BLOCK_NAME_CAMEL_CASE.form.longitude.and.latitude.placeholder',
})}
/>,
)}
</FormItem>
{/* <FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.holidays.name' })}
>
{form.getFieldDecorator('holidayCode', {
initialValue: (details && details.holidayCode) || undefined,
})(
<Select
disabled={!edit}
placeholder={formatMessage({
id: 'BLOCK_NAME_CAMEL_CASE.form.holidays.name.placeholder',
})}
style={{ width: '100%' }}
>
{holidayList &&
holidayList.map(v => (
<Option key={v.id} value={v.id.toString()}>
{v.name}
</Option>
))}
</Select>,
)}
</FormItem> */}
<FormItem
{...formItemLayout}
label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.desc' })}
>
{form.getFieldDecorator('remark', {
initialValue: (details && details.remark) || null,
})(<Input disabled={!edit} />)}
</FormItem>
{edit && (
<FormItem {...submitFormLayout}>
<Button htmlType="button" onClick={this.cancelHandle}>
{formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.cancel.button' })}
</Button>
{!details && (
<Button htmlType="submit" style={{ marginLeft: 16 }} type="primary">
{formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.save.button' })}
</Button>
)}
{details && (
<Button htmlType="submit" style={{ marginLeft: 16 }} type="primary">
{formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.update.button' })}
</Button>
)}
</FormItem>
)}
</Form>
);
}
}
SaveOrUpdate.propTypes = {};
export default SaveOrUpdate;
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
Row,
Col,
Card,
Form,
Input,
Button,
Divider,
Tag,
Table,
Tree,
Modal,
Badge,
Spin,
} from 'antd';
import { f