sync code

config/theme.config.ts

+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

+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

+@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

+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

+@import "~@/themes/vars.less";
+
+.root {
+}

src/pages/system/parameter/components/business/search/index.js

+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

+@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

+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

+@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

+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

+@import "~@/themes/vars.less";
+
+.root {
+}

src/pages/system/parameter/components/operation/search/index.js

+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

+@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

+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

+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

+@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

+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

+@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

+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

+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

+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

+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,
+  });