Skip to content

GitLab

A
ant-design-pro
Commit 76f0bed7 authored by duanledexianxianxian's avatar duanledexianxianxian 😁
Browse files
Options

sync code

parent 86bc1d6e
Show whitespace changes
Inline Side-by-side
Showing with 1705 additions and 0 deletions
config/theme.config.ts 0 → 100644
View file @ 76f0bed7
import defaultSettings from './defaultSettings';
const { primaryColor } = defaultSettings;
export default {
'primary-color': primaryColor,
'layout-header-height': '40px',
};
src/pages/system/parameter/components/business/action/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Row, Col, Button, message, Upload } from 'antd';
import styles from './index.less';
import { uploadParams } from '@/pages/system/parameter/services/business';
const beforeUpload = file => {
// 检查文件类型
const reg = /\.(xlsx|xls)$/;
const isXls = reg.test(file.name);
if (!isXls) {
message.error('只能上传Excel文件');
return false;
}
// 进行文件大小检查
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isLt100M) {
message.error('文件大小不能超过100M');
}
return isXls && isLt100M;
};
const customRequest = ({ file, onSuccess }) => {
uploadParams({
file,
onSuccess: ({ code, data }) => {
if (code === 'sys.success') {
message.success('导入成功');
onSuccess(data);
}
},
});
};
const props = {
name: 'file',
headers: {
authorization: 'authorization-text',
},
accept: '.xlsx, .xls',
beforeUpload,
customRequest,
};
const Action = ({
onClickQuery,
onClickReset,
onSuccessUpload,
onClickExport,
onClickAdd,
loading,
}) => (
<Row className={styles.root}>
<Col span={12} className={styles.left}>
<Button type="primary" onClick={onClickQuery}>
查询
</Button>
<Button type="primary" onClick={onClickReset}>
重置
</Button>
<div className={styles.uploadBtn}>
<Upload {...props} fileList={[]} onSuccess={onSuccessUpload}>
<Button type="primary">导入</Button>
</Upload>
</div>
<Button type="primary" onClick={onClickExport}>
导出
</Button>
</Col>
<Col span={12} className={styles.right}>
<Button type="primary" onClick={onClickAdd} disabled={loading}>
新建
</Button>
</Col>
</Row>
);
export default Action;
src/pages/system/parameter/components/business/action/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
margin-left: -@space-lg;
margin-right: -@space-lg;
margin-bottom: @space-lg;
// padding: 0 @space-lg;
.left {
padding: 0 @space-lg;
.uploadBtn {
float: left;
}
:global {
.ant-btn {
margin-right: @space-lg / 2;
}
}
}
.right {
padding: 0 @space-lg;
display: flex;
justify-content: flex-end;
}
}
src/pages/system/parameter/components/business/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { connect } from 'dva';
import { message, Form, Select, InputNumber } from 'antd';
import Search from './search';
import Action from './action';
import Table from '../table';
import { generateUUID } from '@/utils';
import Ellipsis from '@/components/Ellipsis';
import styles from './index.less';
const FormItem = Form.Item;
@connect(({ paramBusiness, loading: { effects } }) => {
const { list, pageData } = paramBusiness;
return {
list,
pageData,
loading:
effects['paramBusiness/getList'] ||
effects['paramBusiness/add'] ||
effects['paramBusiness/update'] ||
effects['paramBusiness/remove'],
};
})
class Index extends React.Component {
constructor(props) {
super(props);
this.search = null;
this.table = null;
this.queryParm = { pageNum: 1, pageSize: 10 };
this.columns = [
{
title: '语言',
dataIndex: 'paramLocale',
width: '9%',
editable: true,
rules: [
{
required: true,
message: '请输入参数模块',
},
{
max: 50,
message: '最大长度50',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '参数模块',
dataIndex: 'paramModule',
width: '14%',
editable: true,
sorter: true,
rules: [
{
required: true,
message: '请输入值',
},
{
max: 100,
message: '最大长度100',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '参数编码',
dataIndex: 'paramCode',
width: '12%',
editable: true,
sorter: true,
rules: [
{
required: true,
message: '请输入参数编码',
},
{
max: 200,
message: '最大长度200',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '参数值',
dataIndex: 'paramValue',
width: '10%',
editable: true,
rules: [
{
required: true,
message: '请输入参数值',
},
{
max: 500,
message: '最大长度500',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '显示名称',
dataIndex: 'paramName',
width: '10%',
editable: true,
rules: [
{
required: true,
message: '请输入显示名称',
},
{
max: 200,
message: '最大长度200',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '说明',
dataIndex: 'remark',
// width: 100,
editable: true,
rules: [
{
max: 200,
message: '最大长度200',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '显示顺序',
dataIndex: 'paramIndex',
width: '9%',
editable: true,
renderEditing: ({ form, record, dataIndex }) => {
const { getFieldDecorator } = form;
return (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator('paramIndex', {
rules: [
{
required: true,
message: '请输入值',
},
{
type: 'number',
min: 1,
max: 1000,
message: '长度为1-1000',
},
],
initialValue: record[dataIndex],
})(<InputNumber min={1} max={1000} />)}
</FormItem>
);
},
},
{
title: '状态',
dataIndex: 'paramState',
width: '8%',
editable: true,
render: (text, record) => (String(record.paramState) === '1' ? '有效' : '无效'),
renderEditing: ({ form, record }) => {
const { getFieldDecorator } = form;
return (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator('paramState', {
rules: [
{
required: true,
message: '请输入参数值',
},
],
initialValue: String(record.paramState) || '1',
})(
<Select placeholder="请选择">
<Select.Option value="1">有效</Select.Option>
<Select.Option value="0">无效</Select.Option>
</Select>,
)}
</FormItem>
);
},
},
];
}
componentDidMount() {
this.refreshList();
}
/**
* 表格改变
*/
onChangeTable = (pagination, filters, sorter) => {
this.queryParm = {
...this.queryParm,
pageNum: pagination.current,
pageSize: pagination.pageSize,
sortOrder: sorter.order,
sortField: sorter.field,
};
this.refreshList();
};
/**
* 查询
*/
onClickQuery = () => {
this.search.onSubmitForm(values => {
this.queryParm = { ...this.queryParm, ...values, pageNum: 1 };
this.refreshList();
});
};
/**
* 重置
*/
onClickReset = () => {
this.search.onResetForm();
const { dispatch } = this.props;
this.queryParm = { pageNum: 1 };
dispatch({
type: 'paramBusiness/getList',
payload: this.queryParm,
});
};
onSuccessUpload = () => {
this.refreshList();
};
onClickExport = () => {
const { dispatch } = this.props;
this.search.onSubmitForm(values => {
const params = { ...this.queryParm, ...values };
dispatch({ type: 'paramBusiness/exportParam', params });
});
};
// 添加行
onClickAdd = () => {
const row = {
action: 'add',
key: generateUUID(),
paramSeq: '',
paramModule: '',
paramCode: '',
paramValue: '',
paramIndex: 1,
remark: '',
paramState: '1',
};
this.table.addRow(row);
};
handleSearch = n => {
this.search = n;
};
handleTable = n => {
this.table = n;
};
// 刷新列表
refreshList = () => {
const { dispatch } = this.props;
dispatch({
type: 'paramBusiness/getList',
payload: this.queryParm,
});
};
// 添加
onAdd = async record => {
const { dispatch } = this.props;
const result = await dispatch({
type: 'paramBusiness/add',
payload: { ...record },
});
if (result) {
message.success('添加成功');
this.refreshList();
}
return result;
};
// 编辑
onEdit = async record => {
const { dispatch } = this.props;
const result = await dispatch({
type: 'paramBusiness/update',
payload: { ...record },
});
if (result) {
message.success('修改成功');
}
return result;
};
// 删除
onDelete = async ({ paramId, goPrePage }) => {
const { dispatch } = this.props;
if (goPrePage) {
this.queryParm.pageNum = this.queryParm.pageNum - 1;
}
const result = await dispatch({
type: 'paramBusiness/remove',
payload: { paramId },
});
if (result) {
message.success('删除成功');
this.refreshList();
}
return result;
};
render() {
const { list, pageData, loading } = this.props;
const tableProps = {
dataSource: list,
pageData,
loading,
onAdd: this.onAdd,
onEdit: this.onEdit,
onDelete: this.onDelete,
onChangeTable: this.onChangeTable,
columns: this.columns,
};
const actionProps = {
onClickQuery: this.onClickQuery,
onClickReset: this.onClickReset,
onClickExport: this.onClickExport,
onSuccessUpload: this.onSuccessUpload,
onClickAdd: this.onClickAdd,
};
return (
<div className={styles.root}>
<Search wrappedComponentRef={this.handleSearch} />
<Action {...actionProps} />
<Table {...tableProps} wrappedComponentRef={this.handleTable} />
</div>
);
}
}
export default Index;
src/pages/system/parameter/components/business/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
}
src/pages/system/parameter/components/business/search/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Form, Input, Row, Col, Select } from 'antd';
import styles from './index.less';
const FormItem = Form.Item;
@Form.create()
class Search extends React.Component {
componentDidMount() {}
/**
* 提交表单
*/
onSubmitForm = onCallback => {
const { form } = this.props;
form.validateFields((err, values) => {
if (!err && onCallback instanceof Function) {
onCallback(values);
}
});
};
/**
* 重置表单
*/
onResetForm = () => {
const { form } = this.props;
form.resetFields();
};
render() {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Form layout="inline">
<Row className={styles.root}>
<Col span={8}>
<FormItem label="语言">
{getFieldDecorator('paramLocale')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数模块">
{getFieldDecorator('paramModule')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数编码">
{getFieldDecorator('paramCode')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="显示名称">
{getFieldDecorator('paramName')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数状态">
{getFieldDecorator('paramState', { initialValue: '' })(
<Select placeholder="请选择">
<Select.Option value="">全部</Select.Option>
<Select.Option value="1">有效</Select.Option>
<Select.Option value="0">无效</Select.Option>
</Select>,
)}
</FormItem>
</Col>
</Row>
</Form>
);
}
}
export default Search;
src/pages/system/parameter/components/business/search/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
margin-left: -@space-lg;
margin-right: -@space-lg;
:global {
.ant-form-item {
display: flex;
padding: 0 @space-lg;
margin: 0 0 @space-lg / 3 0;
.ant-form-item-label {
width: auto;
min-width: 80px;
padding-right: @space-sm / 2;
}
.ant-form-item-control-wrapper {
flex: 1 1;
}
.ant-calendar-picker {
width: 100%;
}
}
}
}
src/pages/system/parameter/components/operation/action/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Row, Col, Button, message, Upload } from 'antd';
import styles from './index.less';
import { uploadParams } from '@/pages//system/parameter/services/operation';
const beforeUpload = file => {
// 检查文件类型
const reg = /\.(xlsx|xls)$/;
const isXls = reg.test(file.name);
if (!isXls) {
message.error('只能上传Excel文件');
return false;
}
// 进行文件大小检查
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isLt100M) {
message.error('文件大小不能超过100M');
}
return isXls && isLt100M;
};
const customRequest = ({ file, onSuccess }) => {
uploadParams({
file,
onSuccess: ({ code, data }) => {
if (code === 'sys.success') {
message.success('导入成功');
onSuccess(data);
}
},
});
};
const props = {
name: 'file',
headers: {
authorization: 'authorization-text',
},
accept: '.xlsx, .xls',
beforeUpload,
customRequest,
};
const Action = ({
onClickQuery,
onClickReset,
onClickExport,
onClickAdd,
onSuccessUpload,
loading,
}) => (
<Row className={styles.root}>
<Col span={12} className={styles.left}>
<Button type="primary" onClick={onClickQuery}>
查询
</Button>
<Button type="primary" onClick={onClickReset}>
重置
</Button>
<div className={styles.uploadBtn}>
<Upload {...props} fileList={[]} onSuccess={onSuccessUpload}>
<Button type="primary">导入</Button>
</Upload>
</div>
<Button type="primary" onClick={onClickExport}>
导出
</Button>
</Col>
<Col span={12} className={styles.right}>
<Button type="primary" onClick={onClickAdd} disabled={loading}>
新建
</Button>
</Col>
</Row>
);
export default Action;
src/pages/system/parameter/components/operation/action/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
margin-left: -@space-lg;
margin-right: -@space-lg;
margin-bottom: @space-lg;
// padding: 0 @space-lg;
.left {
padding: 0 @space-lg;
.uploadBtn {
float: left;
}
:global {
.ant-btn {
margin-right: @space-lg / 2;
}
}
}
.right {
padding: 0 @space-lg;
display: flex;
justify-content: flex-end;
}
}
src/pages/system/parameter/components/operation/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { connect } from 'dva';
import { message, Select, Form } from 'antd';
import Search from './search';
import Action from './action';
import Table from '../table';
import { generateUUID } from '@/utils';
import Ellipsis from '@/components/Ellipsis';
import styles from './index.less';
const FormItem = Form.Item;
@connect(({ paramOperation, loading: { effects } }) => {
const { list, pageData } = paramOperation;
return {
list,
pageData,
loading:
effects['paramOperation/getList'] ||
effects['paramOperation/add'] ||
effects['paramOperation/update'] ||
effects['paramOperation/remove'],
};
})
class Index extends React.Component {
constructor(props) {
super(props);
this.search = null;
this.table = null;
this.queryParm = { pageNum: 1, pageSize: 10 };
this.columns = [
{
title: '参数模块',
dataIndex: 'paramModule',
width: '15%',
editable: true,
sorter: true,
rules: [
{
required: true,
message: '请输入参数模块',
},
{
max: 100,
message: '最大长度100',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '参数编码',
dataIndex: 'paramCode',
width: '20%',
editable: true,
sorter: true,
rules: [
{
required: true,
message: '请输入参数编码',
},
{
max: 200,
message: '最大长度200',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '参数值',
dataIndex: 'paramValue',
width: '20%',
editable: true,
rules: [
{
required: true,
message: '请输入参数值',
},
{
max: 500,
message: '最大长度500',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '说明',
dataIndex: 'remark',
width: '20%',
editable: true,
rules: [
{
max: 200,
message: '最大长度200',
},
],
render: text => (
<Ellipsis lines={1} tooltip>
{text}
</Ellipsis>
),
},
{
title: '状态',
dataIndex: 'paramState',
width: '15%',
editable: true,
render: (text, record) => (String(record.paramState) === '1' ? '有效' : '无效'),
renderEditing: ({ form, record }) => {
const { getFieldDecorator } = form;
return (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator('paramState', {
rules: [
{
required: true,
message: '请输入参数值',
},
],
initialValue: String(record.paramState) || '1',
})(
<Select placeholder="请选择">
<Select.Option value="1">有效</Select.Option>
<Select.Option value="0">无效</Select.Option>
</Select>,
)}
</FormItem>
);
},
},
];
}
componentDidMount() {
this.refreshList();
}
/**
* 表格改变
*/
onChangeTable = (pagination, filters, sorter) => {
this.queryParm = {
...this.queryParm,
pageNum: pagination.current,
pageSize: pagination.pageSize,
sortOrder: sorter.order,
sortField: sorter.field,
};
this.refreshList();
};
/**
* 查询
*/
onClickQuery = () => {
this.search.onSubmitForm(values => {
this.queryParm = { ...this.queryParm, ...values, pageNum: 1 };
this.refreshList();
});
};
/**
* 重置
*/
onClickReset = () => {
this.search.onResetForm();
const { dispatch } = this.props;
this.queryParm = { pageNum: 1 };
dispatch({
type: 'paramOperation/getList',
payload: this.queryParm,
});
};
onSuccessUpload = () => {
this.refreshList();
};
onClickExport = () => {
const { dispatch } = this.props;
this.search.onSubmitForm(values => {
const params = { ...this.queryParm, ...values };
dispatch({ type: 'paramOperation/exportParam', params });
});
};
// 添加行
onClickAdd = () => {
const row = {
action: 'add',
key: generateUUID(),
paramSeq: '',
paramModule: '',
paramCode: '',
paramValue: '',
remark: '',
paramState: '1',
};
this.table.addRow(row);
};
handleSearch = n => {
this.search = n;
};
handleTable = n => {
this.table = n;
};
// 刷新列表
refreshList = () => {
const { dispatch } = this.props;
dispatch({
type: 'paramOperation/getList',
payload: { ...this.queryParm },
});
};
onAdd = async record => {
const { dispatch } = this.props;
const result = await dispatch({
type: 'paramOperation/add',
payload: { ...record },
});
if (result) {
message.success('添加成功');
this.refreshList();
}
return result;
};
onEdit = async record => {
const { dispatch } = this.props;
const result = await dispatch({
type: 'paramOperation/update',
payload: { ...record },
});
if (result) {
message.success('修改成功');
}
return result;
};
onDelete = async ({ paramId, goPrePage }) => {
if (goPrePage) {
this.queryParm.pageNum = this.queryParm.pageNum - 1;
}
const { dispatch } = this.props;
const result = await dispatch({
type: 'paramOperation/remove',
payload: { paramId },
});
if (result) {
message.success('删除成功');
this.refreshList();
}
return result;
};
render() {
const { list, pageData, loading } = this.props;
const tableProps = {
dataSource: list,
pageData,
loading,
onAdd: this.onAdd,
onEdit: this.onEdit,
onDelete: this.onDelete,
onChangeTable: this.onChangeTable,
columns: this.columns,
};
const actionProps = {
onClickQuery: this.onClickQuery,
onClickReset: this.onClickReset,
onClickExport: this.onClickExport,
onSuccessUpload: this.onSuccessUpload,
onClickAdd: this.onClickAdd,
};
return (
<div className={styles.root}>
<Search wrappedComponentRef={this.handleSearch} />
<Action {...actionProps} />
<Table {...tableProps} wrappedComponentRef={this.handleTable} />
</div>
);
}
}
export default Index;
src/pages/system/parameter/components/operation/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
}
src/pages/system/parameter/components/operation/search/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Form, Input, Row, Col, Select } from 'antd';
import styles from './index.less';
const FormItem = Form.Item;
@Form.create()
class Search extends React.Component {
componentDidMount() {}
/**
* 提交表单
*/
onSubmitForm = onCallback => {
const { form } = this.props;
form.validateFields((err, values) => {
if (!err && onCallback instanceof Function) {
onCallback(values);
}
});
};
/**
* 重置表单
*/
onResetForm = () => {
const { form } = this.props;
form.resetFields();
};
render() {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Form layout="inline">
<Row className={styles.root}>
<Col span={8}>
<FormItem label="参数模块">
{getFieldDecorator('paramModule')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数编码">
{getFieldDecorator('paramCode')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数值">
{getFieldDecorator('paramValue')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col span={8}>
<FormItem label="参数状态">
{getFieldDecorator('paramState', { initialValue: '' })(
<Select placeholder="请选择">
<Select.Option value="">全部</Select.Option>
<Select.Option value="1">有效</Select.Option>
<Select.Option value="0">无效</Select.Option>
</Select>,
)}
</FormItem>
</Col>
</Row>
</Form>
);
}
}
export default Search;
src/pages/system/parameter/components/operation/search/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
margin-left: -@space-lg;
margin-right: -@space-lg;
:global {
.ant-form-item {
display: flex;
padding: 0 @space-lg;
margin: 0 0 @space-lg / 3 0;
.ant-form-item-label {
width: auto;
min-width: 80px;
padding-right: @space-sm / 2;
}
.ant-form-item-control-wrapper {
flex: 1 1;
}
.ant-calendar-picker {
width: 100%;
}
}
}
}
src/pages/system/parameter/components/table/EditableCell.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Input, Form } from 'antd';
const FormItem = Form.Item;
export const EditableContext = React.createContext();
export class EditableCell extends React.Component {
render() {
const {
editing,
dataIndex,
title,
renderEditing,
record,
rules,
index,
...restProps
} = this.props;
return (
<EditableContext.Consumer>
{form => {
const { getFieldDecorator } = form;
let formItem = null;
if (editing) {
if (renderEditing instanceof Function) {
formItem = renderEditing({ form, dataIndex, record, rules });
} else {
formItem = (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules,
initialValue: record[dataIndex],
})(<Input />)}
</FormItem>
);
}
}
return <td {...restProps}>{editing ? formItem : restProps.children}</td>;
}}
</EditableContext.Consumer>
);
}
}
src/pages/system/parameter/components/table/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Table, Popconfirm, Form, Icon } from 'antd';
import { EditableContext, EditableCell } from './EditableCell';
import styles from './index.less';
class EditableTable extends React.Component {
static defaultProps = {
pageSize: 10,
};
constructor(props) {
super(props);
const { dataSource } = props;
this.state = {
data: dataSource,
editingKey: '',
};
this.actionColumns = [
{
title: '操作',
width: 80,
dataIndex: 'operation',
render: (text, record) => {
const { editingKey } = this.state;
const editable = this.isEditing(record);
const showDelete = this.showDelete(record, editable);
return (
<div>
{editable ? (
<span>
<EditableContext.Consumer>
{form => (
<a onClick={e => this.save(e, form, record)} style={{ marginRight: 8 }}>
<Icon type="save" theme="filled" />
</a>
)}
</EditableContext.Consumer>
<Popconfirm title="确定取消?" onConfirm={() => this.cancel(record)}>
<a>
<Icon type="stop" theme="filled" />
</a>
</Popconfirm>
</span>
) : (
<a
disabled={editingKey !== ''}
// 进入可编辑
onClick={() => this.edit(record.key)}
>
<Icon
type="edit"
theme="filled"
twoToneColor={editingKey !== '' && '#bec5d4'}
className={styles.disable}
/>
</a>
)}
{showDelete && (
<Popconfirm title="确定删除?" onConfirm={() => this.delete(record)}>
<a style={{ marginLeft: 8 }}>
<Icon type="delete" theme="filled" />
</a>
</Popconfirm>
)}
</div>
);
},
},
];
}
// componentWillReceiveProps
componentWillReceiveProps(nextProps) {
const { dataSource } = this.props;
if (dataSource !== nextProps.dataSource) {
this.setState({ data: nextProps.dataSource });
}
}
// 是否显示删除按钮
showDelete = (record, editable) => {
if (record.action === 'add' || editable) {
return false;
}
return true;
};
// eslint-disable-next-line react/destructuring-assignment
isEditing = record => record.key === this.state.editingKey;
// change
onChangeTable = (pagination, filters, sorter) => {
const { onChangeTable } = this.props;
if (onChangeTable && onChangeTable instanceof Function) {
onChangeTable(pagination, filters, sorter);
}
this.cancel();
};
// 删除
delete = async record => {
const { onDelete, total, pageNum, pageSize } = this.props;
if (onDelete instanceof Function) {
// do someting
const goPrePage = total === (pageNum - 1) * pageSize + 1;
onDelete({ ...record, goPrePage }).then(() => {
this.cancel();
});
}
};
// 增加行
addRow = row => {
const { dataSource } = this.props;
const newData = [...dataSource];
newData.splice(0, 0, row);
this.setState({
editingKey: row.key,
data: newData,
});
setTimeout(() => {
document
.querySelectorAll('tr[data-row-key]:first-child')[0]
.getElementsByTagName('input')[0]
.focus();
}, 800);
};
// 取消
cancel = record => {
const { data } = this.state;
if (record && record.action === 'add') {
// 去掉第一条记录
const newData = [...data];
newData.splice(0, 1);
this.setState({
data: newData,
});
}
this.setState({
editingKey: '',
});
};
/**
* 编辑
* @param {*} key
*/
edit(key) {
this.setState({
editingKey: key,
});
}
/**
* 保存
* @param {*} form
* @param {*} key
*/
save(e, form, record) {
e.preventDefault();
form.validateFields((error, row) => {
if (error) {
return;
}
// 新增需要刷新页面 编辑可不刷新页面
const { onAdd, onEdit } = this.props;
if (record.action === 'add') {
if (onAdd instanceof Function) {
onAdd({ ...record, ...row }).then(result => {
if (result) {
this.setState({
editingKey: '',
});
}
});
}
} else if (onEdit instanceof Function) {
onEdit({ ...record, ...row }).then(result => {
if (result) {
this.setState({
editingKey: '',
});
}
});
}
});
}
render() {
const { data } = this.state;
const { form, pageData, loading, columns = [] } = this.props;
const components = {
body: {
cell: EditableCell,
},
};
const cols = columns.concat(this.actionColumns).map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
renderEditing: col.renderEditing,
record,
rules: col.rules,
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});
return (
<div className={styles.root}>
<EditableContext.Provider value={form}>
<Table
className="fixedWidthTable"
// scroll={{ x: 1300 }}
components={components}
dataSource={data}
columns={cols}
loading={loading}
onChange={this.onChangeTable}
rowClassName="editable-row"
pagination={{
...pageData,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</EditableContext.Provider>
</div>
);
}
}
const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;
src/pages/system/parameter/components/table/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
:global {
.anticon {
// font-size: 18px;
}
.editable-row .ant-form-explain {
position: absolute;
font-size: 12px;
margin-top: -4px;
}
.fixedWidthTable {
table {
table-layout: fixed;
}
.ant-table-tbody {
tr {
td {
word-wrap: break-word;
word-break: break-all;
}
}
}
}
}
}
src/pages/system/parameter/index.js 0 → 100644
View file @ 76f0bed7
import React from 'react';
import { Tabs } from 'antd';
import router from 'umi/router';
import Operation from './components/operation';
import Business from './components/business';
import styles from './index.less';
const { TabPane } = Tabs;
const index = props => {
// console.log(props);
/**
* 切换tab页签
* @param {*} key
*/
function onChangeTab(key) {
router.push(key);
}
const {
location: { hash },
} = props;
return (
<div className={styles.root}>
<Tabs defaultActiveKey={hash || '#operation'} onChange={onChangeTab}>
<TabPane tab="运维参数管理" key="#operation">
<Operation />
</TabPane>
<TabPane tab="业务参数管理" key="#business">
<Business />
</TabPane>
</Tabs>
</div>
);
};
export default index;
src/pages/system/parameter/index.less 0 → 100644
View file @ 76f0bed7
@import "~@/themes/vars.less";
.root {
background-color: #fff;
padding: 16px 24px;
border-radius: 4px;
min-height: calc(100vh - 100px);
}
src/pages/system/parameter/models/business.js 0 → 100644
View file @ 76f0bed7
import * as service from '../services/business';
export default {
namespace: 'paramBusiness',
state: {
list: [],
pageData: {
pageSize: 10,
pageNum: 1,
total: 0,
current: 1,
},
},
reducers: {
save(
state,
{
payload: { records: list, pageSize, pageNum, total, current },
},
) {
list.forEach(element => {
element.key = element.paramId;
});
return {
...state,
list: [...list],
pageData: { pageSize, pageNum, total, current },
};
},
changeList(
state,
{
payload: { list },
},
) {
return { ...state, list: [...list] };
},
},
effects: {
// 获取列表数据
*getList({ payload }, { call, put }) {
const { data } = yield call(service.getList, payload);
yield put({
type: 'save',
payload: { ...data },
});
},
// 增加
*add({ payload }, { call }) {
const { code } = yield call(service.add, payload);
return code === 'sys.success';
},
// 更改
*update({ payload }, { call, put, select }) {
const { code } = yield call(service.update, payload);
const result = code === 'sys.success';
if (result) {
const list = yield select(({ paramBusiness }) => paramBusiness.list);
const index = list.findIndex(element => payload.key === element.key);
if (index > -1) {
list[index] = { ...list[index], ...payload };
}
yield put({
type: 'changeList',
payload: { list },
});
}
return result;
},
// 删除
*remove({ payload }, { call }) {
const { code } = yield call(service.remove, payload);
return code === 'sys.success';
},
*exportParam({ params }, { call }) {
yield call(service.exportParam, { ...params });
},
},
subscriptions: {
// setup({ dispatch, history }) {
// return history.listen(({ pathname, query, hash }) => {
// // 初始化数据加载 也可以在componentDidMount中
// if (pathname === "/parameter" && (hash === "#business" || !hash)) {
// dispatch({ type: "getList", payload: query });
// }
// });
// },
},
};
src/pages/system/parameter/models/operation.js 0 → 100644
View file @ 76f0bed7
import * as service from '../services/operation';
export default {
namespace: 'paramOperation',
state: {
list: [],
pageData: {
pageSize: 10,
pageNum: 1,
total: 0,
current: 1,
},
},
reducers: {
save(
state,
{
payload: { records: list, pageSize, pageNum, total, current },
},
) {
list.forEach(item => {
item.key = item.paramId;
});
return {
...state,
list: [...list],
pageData: { pageSize, pageNum, total, current },
};
},
setList(
state,
{
payload: { list },
},
) {
return { ...state, list: [...list] };
},
},
effects: {
// 获取列表数据
*getList({ payload }, { call, put }) {
const { data } = yield call(service.getList, payload);
yield put({
type: 'save',
payload: { ...data },
});
},
// 增加
*add({ payload }, { call }) {
const { code } = yield call(service.add, payload);
return code === 'sys.success';
},
// 更改
*update({ payload }, { call, put, select }) {
const { code } = yield call(service.update, payload);
const result = code === 'sys.success';
if (result) {
const list = yield select(({ paramOperation }) => paramOperation.list);
const index = list.findIndex(element => payload.key === element.key);
if (index > -1) {
list[index] = { ...list[index], ...payload };
}
yield put({
type: 'changeList',
payload: { list },
});
}
return result;
},
// 删除
*remove({ payload }, { call }) {
const { code } = yield call(service.remove, payload);
return code === 'sys.success';
},
*exportParam({ params }, { call }) {
yield call(service.exportParam, { ...params });
},
},
subscriptions: {
// setup({ dispatch, history }) {
// return history.listen(({ pathname, query, hash }) => {
// // 初始化数据加载 也可以在componentDidMount中
// if (pathname === "/parameter" && (hash === "#operation" || !hash)) {
// dispatch({ type: "getList", payload: query });
// }
// });
// },
},
};
src/pages/system/parameter/services/business.js 0 → 100644
View file @ 76f0bed7
import { get, put, post, del, uploadFile } from '@/utils/request';
import { downloadFile } from '@/utils';
/**
* 获得列表数据
*
* @param {*} data
*/
export const getList = data => get('/api/v1/params/businesses', data);
/**
* 添加
* @param {*} data
*/
export const add = data => post('/api/v1/params/businesses', data);
/**
* 更新
* @param {*} data
*/
export const update = data => put('/api/v1/params/businesses', data);
/**
* 删除
* @param {*} data
*/
export const remove = data => del(`/api/v1/params/businesses/${data.paramId}`, data);
/**
* 导出
* @param {*} params
*/
export const exportParam = params =>
downloadFile('/api/v1/params/businessparameter_export_excel', params);
/**
* 参数导入
* @param {*} param0
*/
export const uploadParams = ({ file, onSuccess }) =>
uploadFile({
action: '/api/v1/params/bp_import',
file,
onSuccess,
});
src/pages/system/parameter/services/operation.js 0 → 100644
View file @ 76f0bed7
import { get, put, post, del, uploadFile } from '@/utils/request';
import { downloadFile } from '@/utils';
/**
* 获得列表数据
*
* @param {*} data
*/
export const getList = data => get('/api/v1/params/operations', data);
/**
* 添加
* @param {*} data
*/
export const add = data => post('/api/v1/params/operations', data);
/**
* 更新
* @param {*} data
*/
export const update = data => put('/api/v1/params/operations', data);
/**
* 删除
* @param {*} data
*/
export const remove = data => del(`/api/v1/params/operations/${data.paramId}`, data);
/**
* 导出
* @param {*} params
*/
export const exportParam = params =>
downloadFile('/api/v1/params/operationparameter_export_excel', params);
/**
* 参数导入
* @param {*} param0
*/
export const uploadParams = ({ file, onSuccess }) =>
uploadFile({
action: '/api/v1/params/opp_import',
file,
onSuccess,
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment