dlt-for-react 1.0.1

package/lib/components/NHDynamicFormShow/customModule/ybgl/ybbx/Editable.js

@@ -0,0 +1,652 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _table = require('antd/lib/table');
+
+var _table2 = _interopRequireDefault(_table);
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _input = require('antd/lib/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _radio = require('antd/lib/radio');
+
+var _radio2 = _interopRequireDefault(_radio);
+
+var _inputNumber = require('antd/lib/input-number');
+
+var _inputNumber2 = _interopRequireDefault(_inputNumber);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _form = require('antd/lib/form');
+
+var _form2 = _interopRequireDefault(_form);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+require('antd/lib/button/style');
+
+require('antd/lib/table/style');
+
+require('antd/lib/input/style');
+
+require('antd/lib/radio/style');
+
+require('antd/lib/input-number/style');
+
+require('antd/lib/form/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../../../NHFormItem/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _getLoginUser = require('../../../../../utils/getLoginUser');
+
+var _getLoginUser2 = _interopRequireDefault(_getLoginUser);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//编辑内容
+var EditableContext = _react2.default.createContext();
+
+var EditableRow = function EditableRow(_ref) {
+    var form = _ref.form,
+        index = _ref.index,
+        props = (0, _objectWithoutProperties3.default)(_ref, ['form', 'index']);
+    return _react2.default.createElement(
+        EditableContext.Provider,
+        { value: form },
+        _react2.default.createElement('tr', props)
+    );
+};
+//编辑行
+var EditableFormRow = _form2.default.create()(EditableRow);
+
+var EditableCell = function (_React$Component) {
+    (0, _inherits3.default)(EditableCell, _React$Component);
+
+    function EditableCell() {
+        var _ref2;
+
+        var _temp, _this, _ret;
+
+        (0, _classCallCheck3.default)(this, EditableCell);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref2 = EditableCell.__proto__ || (0, _getPrototypeOf2.default)(EditableCell)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
+            // editing: true,
+        }, _this.save = function (e) {
+            var _this$props = _this.props,
+                record = _this$props.record,
+                handleSave = _this$props.handleSave;
+
+            _this.form.validateFields(function (error, values) {
+                if (error && error[e.currentTarget.id]) {
+                    return;
+                }
+                // this.toggleEdit();
+                handleSave((0, _extends3.default)({}, record, values));
+            });
+        }, _this.handleSfkbx = function (record, e) {
+            if (record && e) {
+                var val = e.target.value;
+                var _this$props2 = _this.props,
+                    dataSource = _this$props2.dataSource,
+                    BxzfyData = _this$props2.BxzfyData;
+
+                var newArr = [];
+                dataSource.map(function (item) {
+                    if (item.key === record.key) {
+                        item.sfkbx = val;
+                    }
+                    newArr.push(item);
+                });
+                BxzfyData(newArr);
+            }
+        }, _this.renderCell = function (form) {
+            _this.form = form;
+            var _this$props3 = _this.props,
+                children = _this$props3.children,
+                dataIndex = _this$props3.dataIndex,
+                record = _this$props3.record,
+                title = _this$props3.title,
+                sfbj = _this$props3.sfbj;
+
+            if (title === '项目费用') {
+                return sfbj ? _react2.default.createElement(
+                    _index2.default,
+                    {
+                        id: 'fy',
+                        initialValue: record.fy,
+                        required: true,
+                        form: _this.form
+                    },
+                    _react2.default.createElement(_inputNumber2.default, {
+                        style: { width: '180%' },
+                        min: 0,
+                        step: '0.01',
+                        formatter: function formatter(value) {
+                            return value + '\u5143';
+                        },
+                        parser: function parser(value) {
+                            return value.replace('元', '');
+                        },
+                        value: record.fy,
+                        ref: function ref(node) {
+                            return _this.input = node;
+                        },
+                        onPressEnter: _this.save,
+                        onBlur: _this.save
+                    })
+                ) : _react2.default.createElement(
+                    'div',
+                    {
+                        className: 'editable-cell-value-wrap',
+                        style: { paddingRight: 24 }
+                    },
+                    children
+                );
+            } else if (title === '是否可报销') {
+                return sfbj ? _react2.default.createElement(
+                    _index2.default,
+                    {
+                        id: 'sfkbx',
+                        initialValue: record.sfkbx,
+                        required: true,
+                        form: _this.form
+                    },
+                    _react2.default.createElement(
+                        _radio2.default.Group,
+                        { name: 'sfkbx', value: record.sfkbx, onChange: _this.handleSfkbx.bind(_this, record) },
+                        _react2.default.createElement(
+                            _radio2.default,
+                            { value: "1" },
+                            '\u662F'
+                        ),
+                        _react2.default.createElement(
+                            _radio2.default,
+                            { value: "0" },
+                            '\u5426'
+                        )
+                    )
+                ) : _react2.default.createElement(
+                    'div',
+                    {
+                        className: 'editable-cell-value-wrap',
+                        style: { paddingRight: 24 }
+                    },
+                    children
+                );
+            } else {
+                return sfbj ? _react2.default.createElement(
+                    _form2.default.Item,
+                    { style: { margin: 0 } },
+                    form.getFieldDecorator(dataIndex, {
+                        rules: [{
+                            required: true,
+                            message: title + ' \u4E0D\u80FD\u4E3A\u7A7A.'
+                        }],
+                        initialValue: record[dataIndex]
+                    })(_react2.default.createElement(_input2.default, { maxLength: "40", ref: function ref(node) {
+                            return _this.input = node;
+                        }, onPressEnter: _this.save, onBlur: _this.save }))
+                ) : _react2.default.createElement(
+                    'div',
+                    {
+                        className: 'editable-cell-value-wrap',
+                        style: { paddingRight: 24 }
+                    },
+                    children
+                );
+            }
+        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    }
+    //改变编辑状态
+    // toggleEdit = () => {
+    //     const editing = !this.state.editing;
+    //     this.setState({ editing }, () => {
+    //         if (editing) {
+    //             this.input.focus();
+    //         }
+    //     });
+    // };
+    //保存编辑
+
+
+    //重新渲染
+
+
+    (0, _createClass3.default)(EditableCell, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                editable = _props.editable,
+                dataIndex = _props.dataIndex,
+                title = _props.title,
+                record = _props.record,
+                index = _props.index,
+                handleSave = _props.handleSave,
+                children = _props.children,
+                restProps = (0, _objectWithoutProperties3.default)(_props, ['editable', 'dataIndex', 'title', 'record', 'index', 'handleSave', 'children']);
+
+            return _react2.default.createElement(
+                'td',
+                restProps,
+                editable ? _react2.default.createElement(
+                    EditableContext.Consumer,
+                    null,
+                    this.renderCell
+                ) : children
+            );
+        }
+    }]);
+    return EditableCell;
+}(_react2.default.Component);
+
+var Expenses = function (_React$Component2) {
+    (0, _inherits3.default)(Expenses, _React$Component2);
+
+    function Expenses(props) {
+        (0, _classCallCheck3.default)(this, Expenses);
+
+        var _this2 = (0, _possibleConstructorReturn3.default)(this, (Expenses.__proto__ || (0, _getPrototypeOf2.default)(Expenses)).call(this, props));
+
+        _this2.check = function (shjd, shzt) {
+            if (shjd === 'xysh' || shjd === 'xssq' && shzt === '0' || shjd === 'xscsh' && shzt === '0') {
+                _this2.setState({
+                    sfbj: false,
+                    fxscjdbs: true,
+                    xscjdbs: undefined
+                });
+            } else if (shjd === 'xscsh' && shzt === '1') {
+                _this2.setState({
+                    sfbj: true,
+                    xscjdbs: true,
+                    fxscjdbs: undefined
+                });
+            }
+        };
+
+        _this2.handleAdd = function () {
+            var _this2$state = _this2.state,
+                count = _this2$state.count,
+                dataSource = _this2$state.dataSource;
+
+            var newData = {
+                key: count,
+                bxxm: '',
+                fy: '',
+                sfkbx: '1' //默认都是可以报销的
+            };
+            if (count < 100) {
+                _this2.setState({
+                    dataSource: [].concat((0, _toConsumableArray3.default)(dataSource), [newData]),
+                    count: count + 1
+                });
+            }
+        };
+
+        _this2.handleSave = function (row) {
+            var newData = [].concat((0, _toConsumableArray3.default)(_this2.state.dataSource));
+            var index = newData.findIndex(function (item) {
+                return row.key === item.key;
+            });
+            var item = newData[index];
+            newData.splice(index, 1, (0, _extends3.default)({}, item, row));
+            _this2.setState({ dataSource: newData }, function () {
+                _this2.BxzfyData(_this2.state.dataSource);
+            });
+        };
+
+        _this2.BxzfyData = function (dataSource) {
+            // let { dataSource } = this.state;
+            var zfy = 0;
+            dataSource.map(function (item) {
+                if (item.fy && item.sfkbx === '1') {
+                    zfy += parseFloat(item.fy);
+                }
+            });
+            var bxxmData = {};
+            bxxmData.bxxm = dataSource;
+            bxxmData.zfy = zfy;
+            if (_this2.props.Callback) {
+                _this2.props.Callback(bxxmData); // 将data传递到父页面
+            }
+        };
+
+        _this2.handleDelete = function (key) {
+            var dataSource = [].concat((0, _toConsumableArray3.default)(_this2.state.dataSource));
+            _this2.setState({
+                dataSource: dataSource.filter(function (item) {
+                    return item.key !== key;
+                })
+            }, function () {
+                //计算重新序号
+                var count = _this2.state.count;
+                var dataSource = [].concat((0, _toConsumableArray3.default)(_this2.state.dataSource));
+                //存放新的数据源
+                var list = [];
+                //将数据源遍历修改
+                dataSource.forEach(function (item) {
+                    if (item.key > key) {
+                        item.key--;
+                    }
+                    list.push(item);
+                });
+                _this2.setState({
+                    dataSource: list,
+                    count: count - 1
+                }, function () {
+                    _this2.BxzfyData(_this2.state.dataSource);
+                });
+            });
+        };
+
+        _this2.state = {
+            //表头
+            columns1: [{
+                title: '序号',
+                dataIndex: 'key',
+                width: '7%'
+            }, {
+                title: '报销项目',
+                dataIndex: 'bxxm',
+                // width: '29%',
+                editable: true
+            }, {
+                title: '项目费用',
+                dataIndex: 'fy',
+                width: '29%',
+                editable: true,
+                render: function render(text) {
+                    return text > 0 ? parseFloat(text).toFixed(2) + "元" : null;
+                }
+            }, {
+                title: '操作',
+                dataIndex: 'operation',
+                width: '7%',
+                render: function render(text, record) {
+                    return _this2.state.dataSource.length >= 1 ? _react2.default.createElement(
+                        'a',
+                        { onClick: function onClick() {
+                                return _this2.handleDelete(record.key);
+                            } },
+                        _react2.default.createElement(
+                            'i',
+                            {
+                                'aria-label': '\u56FE\u6807: delete',
+                                className: "anticon anticon-delete",
+                                style: { color: 'red' } },
+                            _react2.default.createElement(
+                                'svg',
+                                {
+                                    viewBox: '64 64 896 896',
+                                    focusable: 'false',
+                                    'data-icon': 'delete',
+                                    width: '1em',
+                                    height: '1em',
+                                    fill: 'currentColor',
+                                    'aria-hidden': 'true' },
+                                _react2.default.createElement('path', { d: 'M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z' })
+                            )
+                        )
+                    ) : null;
+                }
+            }],
+            // 学生处的审核表头
+            columns2: [{
+                title: '序号',
+                dataIndex: 'key',
+                width: '7%'
+            }, {
+                title: '报销项目',
+                dataIndex: 'bxxm',
+                editable: true
+            }, {
+                title: '项目费用',
+                dataIndex: 'fy',
+                width: '29%',
+                editable: true,
+                render: function render(text) {
+                    return text > 0 ? parseFloat(text).toFixed(2) + "元" : null;
+                }
+            }, {
+                title: '是否可报销',
+                dataIndex: 'sfkbx',
+                width: '28%',
+                editable: true
+            }, {
+                title: '操作',
+                dataIndex: 'operation',
+                width: '7%',
+                render: function render(text, record) {
+                    return _this2.state.dataSource.length >= 1 ? _react2.default.createElement(
+                        'a',
+                        { onClick: function onClick() {
+                                return _this2.handleDelete(record.key);
+                            } },
+                        _react2.default.createElement(
+                            'i',
+                            {
+                                'aria-label': '\u56FE\u6807: delete',
+                                className: "anticon anticon-delete",
+                                style: { color: 'red' } },
+                            _react2.default.createElement(
+                                'svg',
+                                {
+                                    viewBox: '64 64 896 896',
+                                    focusable: 'false',
+                                    'data-icon': 'delete',
+                                    width: '1em',
+                                    height: '1em',
+                                    fill: 'currentColor',
+                                    'aria-hidden': 'true' },
+                                _react2.default.createElement('path', { d: 'M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z' })
+                            )
+                        )
+                    ) : null;
+                }
+            }],
+            // 非学生处的审核表头
+            columns3: [{
+                title: '序号',
+                dataIndex: 'key',
+                width: '7%'
+            }, {
+                title: '报销项目',
+                dataIndex: 'bxxm',
+                editable: true
+            }, {
+                title: '项目费用',
+                dataIndex: 'fy',
+                width: '29%',
+                editable: true,
+                render: function render(text) {
+                    return text > 0 ? parseFloat(text).toFixed(2) + "元" : null;
+                }
+            }, {
+                title: '是否可报销',
+                dataIndex: 'sfkbx',
+                width: '28%',
+                render: function render(text) {
+                    if (text) {
+                        return text === "1" ? "是" : "否";
+                    }
+                }
+            }],
+            //数据源
+            dataSource: [],
+            //序号
+            count: 1,
+            sfbj: true, // 是否编辑
+            xscjdbs: undefined, // 学生处节点标识
+            fxscjdbs: undefined // 非学生处节点标识
+        };
+        return _this2;
+    }
+
+    (0, _createClass3.default)(Expenses, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if ("bxxm" in nextProps && nextProps.bxxm !== this.props.bxxm) {
+                this.setState({
+                    dataSource: nextProps.bxxm,
+                    count: nextProps.bxxm.length + 1
+                });
+            }
+            if ("shjd" in nextProps && nextProps.shjd !== this.props.shjd) {
+                this.check(nextProps.shjd, nextProps.shzt);
+            }
+        }
+
+        // 如果审核阶段处于学院的审核，将只做显示处理
+
+
+        //增加函数
+
+        // 保存
+
+
+        // 发布报销总费用信息
+
+
+        // 删除
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _state = this.state,
+                dataSource = _state.dataSource,
+                sfbj = _state.sfbj,
+                xscjdbs = _state.xscjdbs,
+                fxscjdbs = _state.fxscjdbs,
+                columns1 = _state.columns1,
+                columns2 = _state.columns2,
+                columns3 = _state.columns3;
+
+            var components = {
+                body: {
+                    row: EditableFormRow,
+                    cell: EditableCell
+                }
+            };
+            // 用于判断表头
+            var newColumns = [];
+            if (xscjdbs) {
+                newColumns = columns2;
+            } else if (fxscjdbs) {
+                newColumns = columns3;
+            } else {
+                newColumns = columns1;
+            }
+            var columns = newColumns.map(function (col) {
+                if (!col.editable) {
+                    return col;
+                }
+                return (0, _extends3.default)({}, col, {
+                    onCell: function onCell(record) {
+                        return {
+                            record: record,
+                            editable: col.editable,
+                            dataIndex: col.dataIndex,
+                            title: col.title,
+                            dataSource: dataSource,
+                            handleSave: _this3.handleSave,
+                            BxzfyData: _this3.BxzfyData,
+                            sfbj: sfbj
+                        };
+                    }
+                });
+            });
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(_table2.default, {
+                    components: components,
+                    rowClassName: function rowClassName() {
+                        return 'editable-row';
+                    },
+                    bordered: true,
+                    dataSource: dataSource,
+                    columns: columns,
+                    pagination: false
+                }),
+                _react2.default.createElement(
+                    _button2.default,
+                    { onClick: this.handleAdd,
+                        className: 'ant-btn ant-btn-primary ant-btn-background-ghost',
+                        style: {
+                            width: "100%",
+                            borderStyle: "dashed",
+                            marginTop: "16px",
+                            display: sfbj ? "block" : "none"
+                        }
+                    },
+                    _react2.default.createElement(
+                        'i',
+                        { 'aria-label': '\u56FE\u6807: plus', 'class': 'anticon anticon-plus' },
+                        _react2.default.createElement(
+                            'svg',
+                            { viewBox: '64 64 896 896', focusable: 'false', 'class': '', 'data-icon': 'plus', width: '1em', height: '1em', fill: 'currentColor', 'aria-hidden': 'true' },
+                            _react2.default.createElement('path', { d: 'M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z' }),
+                            _react2.default.createElement('path', { d: 'M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z' })
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        '\u65B0\u589E'
+                    )
+                )
+            );
+        }
+    }]);
+    return Expenses;
+}(_react2.default.Component);
+
+exports.default = Expenses;