micro-ui-y
Version:
603 lines (547 loc) • 34.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _page = require('../../page/page');
var _page2 = _interopRequireDefault(_page);
var _scrollBox = require('../../scroll/scrollBox2.0');
var _scrollBox2 = _interopRequireDefault(_scrollBox);
var _index = require('../../svg/index');
var _index2 = _interopRequireDefault(_index);
var _button = require('../../button/button');
var _button2 = _interopRequireDefault(_button);
var _styles = require('./styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// import ScrollBox from '../scroll/scroll';//生产
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function (e) {
var r = new RegExp(this.S + e + this.S);
return r.test(this.S + this.join(this.S) + this.S);
};
var TableField = function (_Component) {
_inherits(TableField, _Component);
function TableField(props) {
_classCallCheck(this, TableField);
var _this = _possibleConstructorReturn(this, (TableField.__proto__ || Object.getPrototypeOf(TableField)).call(this, props));
_this.mouseOver = function (index, data) {
data[index].show = true;
_this.setState({
tableObj: data
});
};
_this.mouseOut = function (index, data) {
data[index].show = false;
_this.setState({
tableObj: data
});
};
_this.overColor = function () {
_this.setState({
bgColor: "#ccc",
textColor: "white"
});
};
_this.outColor = function () {
_this.setState({
bgColor: "#f9f9f9",
textColor: "#888"
});
};
_this._overColor = function () {
_this.setState({
_bgColor: "#ccc",
_textColor: "white"
});
};
_this._outColor = function () {
_this.setState({
_bgColor: "#f9f9f9",
_textColor: "#888"
});
};
_this.setSelectItem = function (index, value) {
var itemArr = _this.state.itemArr;
var itemData = _this.state.itemData;
var num = itemArr.indexOf(index);
// itemArr.push({'index':index,'value':value})
if (num > -1) {
itemArr.splice(num, 1);
itemData.splice(num, 1);
} else {
itemArr.push(index);
itemData.push(value);
}
_this.setState({
itemArr: itemArr,
itemData: itemData
});
};
_this.setSelectItemAll = function () {
var selectAll = _this.state.selectAll;
var itemArr = [];
var itemData = [];
if (!selectAll) {
for (var i = 0; i < _this.state.tableData.length; i++) {
itemArr.push(i);
itemData.push(_this.state.tableData[i]);
}
}
_this.setState({
selectAll: !selectAll,
itemArr: itemArr,
itemData: itemData
});
};
_this.handleSequence = function (type, property, data, index, array) {
var sortObj = data.sort(function (prev, next) {
var a = prev[property];
var b = next[property];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = array[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var i = _step.value;
i.as = false;
i.de = false;
}
//升序 ascending
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
if (type == "ascending") {
array[index].as = true;
array[index].de = false;
_this.setState({
tableObj: array
});
return a.toString().localeCompare(b);
}
//降序descending
if (type == "descending") {
array[index].as = false;
array[index].de = true;
_this.setState({
tableObj: array
});
return b.toString().localeCompare(a);
}
// return function (obj1, obj2) {
// let a = obj1[property];
// let b = obj2[property];
// return type == "ascending" ? a.toString().localeCompare(b) :
// type == "descending" ? b.toString().localeCompare(a) : 0
// }
});
_this.setState({
tableData: sortObj
});
};
_this.state = {
styles: _styles.styleObj,
tableData: [],
tableObj: [],
// shouldUpdate: true,
bgColor: '',
textColor: '',
_bgColor: '',
_textColor: '',
as: false, //是否点击升序
de: false, //是否点击降序
itemArr: [],
itemData: [],
selectAll: false
};
return _this;
}
_createClass(TableField, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
tableData: nextProps.tableData,
tableObj: nextProps.tableObj
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this.props.tableObj[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var i = _step2.value;
i.show = false;
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
this.setState({
tableData: this.props.tableData,
tableObj: this.props.tableObj
});
}
// initScroll = () => {
// this.setState({ shouldUpdate: false });
// };
}, {
key: 'render',
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []),
state = _objectWithoutProperties(this.state, []);
var styles = state.styles,
tabWidth = 0;
for (var i = 0; i < state.tableObj.length; i++) {
tabWidth += parseInt(state.tableObj[i].fieldWidth);
}
var itemData = this.state.itemData;
return _react2.default.createElement(
'div',
{ style: Object.assign({}, styles.table, { width: props.width }) },
_react2.default.createElement(
'div',
{ style: styles.mdAction },
props.actions.map(function (item) {
return _react2.default.createElement(
'div',
{ style: styles.spanBtn },
_react2.default.createElement(_button2.default, { scenesType: 'submit', btnText: item.name,
handleBtn: _this2.props.handleBtn.bind(_this2, itemData, item.type) })
);
})
),
_react2.default.createElement(
'div',
{ style: styles.tableBox },
_react2.default.createElement(
_scrollBox2.default
// width={props.width ? props.width : '70rem'}
,
{ maxHeight: props.maxHeight ? props.maxHeight : '25.5rem' },
_react2.default.createElement(
'div',
{ style: styles.tableCont },
_react2.default.createElement(
'table',
{ style: styles.lockingBox },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: styles.lockTheadTr },
this.props.checkBox ? _react2.default.createElement(
'div',
{ onClick: this.setSelectItemAll, style: styles.checkBox },
this.state.selectAll ? _react2.default.createElement(_index2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: 'CheckboxOff', width: '1rem', height: '1rem', fill: '#4aa5fe' })
) : null,
props.tableObj.map(function (value, index, array) {
return value.isLock ? _react2.default.createElement(
'td',
{ onMouseOver: value.isSequence ? _this2.mouseOver.bind(_this2, index, array) : null,
onMouseOut: value.isSequence ? _this2.mouseOut.bind(_this2, index, array) : null,
style: {
cursor: value.isSequence ? "pointer" : null,
width: value.fieldWidth
}, key: index },
_react2.default.createElement(
'div',
{ style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
} },
value.fieldText,
value.isSequence ? _react2.default.createElement(
'div',
{ style: styles.sequenceSvg },
_react2.default.createElement(_index2.default, { type: 'Up', width: '1rem', height: '1rem',
fill: value.as ? "#4aa5ff" : "#ccc" }),
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem',
fill: value.de ? "#4aa5ff" : "#ccc" })
) : null
),
_react2.default.createElement(
'div',
{ style: {
cursor: "pointer",
width: value.fieldWidth,
position: "absolute",
display: value.show ? "block" : "none",
background: "#f9f9f9",
boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)"
} },
_react2.default.createElement(
'div',
{ onMouseOver: _this2.overColor,
onMouseOut: _this2.outColor,
style: Object.assign({}, styles.sequenceItem, {
background: state.bgColor,
color: state.textColor
}),
onClick: _this2.handleSequence.bind(_this2, "ascending", value.fieldName, state.tableData, index, array) },
'\u5347\u5E8F ',
_react2.default.createElement(_index2.default, { type: 'Up', width: '1rem', height: '1rem', fill: '#4aa5ff' })
),
_react2.default.createElement(
'div',
{ onMouseOver: _this2._overColor,
onMouseOut: _this2._outColor,
style: Object.assign({}, styles.sequenceItem, {
background: state._bgColor,
color: state._textColor
}),
onClick: _this2.handleSequence.bind(_this2, "descending", value.fieldName, state.tableData, index, array) },
'\u964D\u5E8F ',
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem', fill: '#4aa5ff' })
)
)
) : null;
})
)
),
_react2.default.createElement(
'tbody',
{ style: styles.locktbody },
state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index, style: (index + 1) % 2 ? styles.tbodyTr1 : styles.tbodyTr2 },
_this2.props.checkBox ? _react2.default.createElement(
'div',
{ onClick: _this2.setSelectItem.bind(_this2, index, value),
style: styles.checkBox },
_this2.state.itemArr.includes(index) ? _react2.default.createElement(_index2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: 'CheckboxOff', width: '1rem', height: '1rem', fill: '#4aa5fe' })
) : null,
props.tableObj.map(function (objname, index) {
return objname.isLock ? _react2.default.createElement(
'td',
{ title: value[objname.fieldName], style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
},
key: index + 'gfy' },
value[objname.fieldName]
) : null;
})
);
})
)
),
_react2.default.createElement(
'table',
{ style: { width: tabWidth + "rem" } },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: styles.theadTr },
this.props.checkBox ? _react2.default.createElement(
'div',
{ onClick: this.setSelectItemAll, style: styles.checkBox },
this.state.selectAll ? _react2.default.createElement(_index2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: 'CheckboxOff', width: '1rem', height: '1rem', fill: '#4aa5fe' })
) : null,
props.tableObj.map(function (value, index, array) {
return _react2.default.createElement(
'td',
{ onMouseOver: value.isSequence ? _this2.mouseOver.bind(_this2, index, array) : null,
onMouseOut: value.isSequence ? _this2.mouseOut.bind(_this2, index, array) : null,
style: {
cursor: value.isSequence ? "pointer" : null,
width: value.fieldWidth,
position: "relative"
}, key: index },
_react2.default.createElement(
'div',
{ style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
} },
value.fieldText,
value.isSequence ? _react2.default.createElement(
'div',
{ style: styles.sequenceSvg },
_react2.default.createElement(_index2.default, { type: 'Up', width: '1rem', height: '1rem',
fill: value.as ? "#4aa5ff" : "#ccc" }),
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem',
fill: value.de ? "#4aa5ff" : "#ccc" })
) : null
),
_react2.default.createElement(
'div',
{ style: {
cursor: "pointer",
width: value.fieldWidth,
position: "absolute",
display: value.show ? "block" : "none",
background: "#f9f9f9",
boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)"
} },
_react2.default.createElement(
'div',
{
onMouseOver: _this2.overColor,
onMouseOut: _this2.outColor,
style: Object.assign({}, styles.sequenceItem, {
background: state.bgColor,
color: state.textColor
}),
onClick: _this2.handleSequence.bind(_this2, "ascending", value.fieldName, state.tableData, index, array) },
'\u5347\u5E8F ',
_react2.default.createElement(_index2.default, { type: 'Up', width: '1rem', height: '1rem', fill: '#4aa5ff' })
),
_react2.default.createElement(
'div',
{
onMouseOver: _this2._overColor,
onMouseOut: _this2._outColor,
style: Object.assign({}, styles.sequenceItem, {
background: state._bgColor,
color: state._textColor
}),
onClick: _this2.handleSequence.bind(_this2, "descending", value.fieldName, state.tableData, index, array) },
'\u964D\u5E8F ',
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem', fill: '#4aa5ff' })
)
)
);
})
)
),
_react2.default.createElement(
'tbody',
{ style: styles.tbody },
state.tableData.length ? state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index, style: (index + 1) % 2 ? styles.tbodyTr1 : styles.tbodyTr2 },
_this2.props.checkBox ? _react2.default.createElement(
'div',
{
style: styles.checkBox },
_this2.state.itemArr.includes(index) ? _react2.default.createElement(_index2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: 'CheckboxOff', width: '1rem', height: '1rem', fill: '#4aa5fe' })
) : null,
props.tableObj.map(function (objname, index) {
{
_this2.props.checkBox ? _react2.default.createElement(
'div',
{ onClick: _this2.setSelectItem.bind(_this2, index, value),
style: styles.checkBox },
_this2.state.itemArr.includes(index) ? _react2.default.createElement(_index2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem',
fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: 'CheckboxOff', width: '1rem', height: '1rem',
fill: '#4aa5fe' })
) : null;
}
var dom = [];
if (index == props.tableObj.length - 1 && objname.fieldName == "operating") {
dom.push(_react2.default.createElement(
'td',
{ title: value[objname.fieldName], key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
},
onClick: props.operatingFn ? props.operatingFn.bind(_this2, value) : function () {
return null;
}
},
_react2.default.createElement(
'div',
null,
'\u67E5\u770B'
)
));
} else {
dom.push(_react2.default.createElement(
'td',
{ title: value[objname.fieldName], key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
} },
value[objname.fieldName]
));
}
return dom;
})
);
}) : _react2.default.createElement(
'tr',
{ style: styles.emptyBox },
_react2.default.createElement(
'td',
{ style: styles.loadBox },
this.props.loading ? _react2.default.createElement(
'div',
{ style: styles.loading },
'\u6B63\u5728\u62FC\u547D\u52A0\u8F7D\u6570\u636E\u4E2D'
) : _react2.default.createElement(
'label',
{ style: styles.emptyText },
'\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u6570\u636E'
)
)
)
)
)
)
),
props.hidePage ? null : _react2.default.createElement(
'div',
{ style: Object.assign({}, styles.pageBox, { width: props.width }) },
_react2.default.createElement(_page2.default, { handlePage: props.handlePage,
totalNum: props.totalNum,
pageNumber: props.pageNumber,
pageSize: props.pageSize || 10,
showPageSize: false
})
)
)
);
}
}]);
return TableField;
}(_react.Component);
exports.default = TableField;
//# sourceMappingURL=table.js.map