micro-ui-y
Version:
751 lines (686 loc) • 41.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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 clickCount = 0;
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.handleClick = function (value) {
clickCount++;
setTimeout(function () {
if (clickCount == 1) {
_this.setSelectItem(value);
} else if (_this.props.checkType == "radio" && clickCount == 2) {
_this.setState({
itemArr: [value.tableId],
itemData: [value]
});
_this.props.handleDoubleClick && _this.props.handleDoubleClick(value);
}
clickCount = 0;
}, 200);
};
_this.setSelectItem = function (value) {
if (_this.props.checkType == "radio") {
_this.setState({
itemArr: [value.tableId],
itemData: [value]
});
_this.props.handleItem && _this.props.handleItem(value, "radio");
} else {
var itemArr = _this.state.itemArr;
var itemData = _this.state.itemData;
var num = itemArr.indexOf(value.tableId);
if (num > -1) {
itemArr.splice(num, 1);
itemData.splice(num, 1);
} else {
itemArr.push(value.tableId);
itemData.push(value);
}
_this.setState({
itemArr: itemArr,
itemData: itemData
});
_this.props.handleItem && _this.props.handleItem(itemData, "checkbox");
}
};
_this.setSelectItemAll = function () {
var selectAll = _this.state.selectAll;
var itemArr = [];
var itemData = [];
var tableData = _this.state.tableData;
if (!selectAll) {
for (var i = 0; i < tableData.length; i++) {
if (tableData[i].isChoose) {
itemArr.push(tableData[i].tableId);
itemData.push(tableData[i]);
}
}
}
_this.setState({
selectAll: !selectAll,
itemArr: itemArr,
itemData: itemData
});
_this.props.handleItem && _this.props.handleItem(itemData, _this.props.checkType == "radio" ? "radio" : "checkbox", "all");
};
_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
});
array[index].show = false;
_this.setState({
tableObj: data
});
};
_this.handleScroll = function (e) {
document.getElementById('table').scrollTop = e.currentTarget.scrollTop;
};
_this.handleBtn = function (item) {
var itemData = _this.state.itemData;
var tableData = _this.state.tableData;
itemData = itemData.filter(function (item, index) {
return tableData.some(function (tItem, index) {
return item.tableId == tItem.tableId;
});
});
_this.props.handleBtn(itemData, item.type);
};
_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) {
if (JSON.stringify(nextProps.tableData) !== JSON.stringify(this.props.tableData)) {
var itemArr = [];
var itemData = [];
var tableData = nextProps.tableData;
tableData.forEach(function (item) {
if (item.defaultChecked === true) {
itemArr.push(item.tableId);
itemData.push(item);
}
});
this.setState({
tableData: nextProps.tableData,
itemArr: itemArr,
itemData: itemData
});
if (nextProps.checkType === "radio") {
nextProps.handleItem && nextProps.handleItem({}, "radio");
} else {
nextProps.handleItem && nextProps.handleItem([], "checkbox");
}
}
if (JSON.stringify(nextProps.tableObj) !== JSON.stringify(this.props.tableObj)) {
this.setState({
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;
}
}
}
var itemArr = [];
var itemData = [];
var tableData = this.props.tableData;
tableData.forEach(function (item) {
if (item.defaultChecked === true) {
itemArr.push(item.tableId);
itemData.push(item);
}
});
this.setState({
tableData: tableData,
tableObj: this.props.tableObj,
itemArr: itemArr,
itemData: itemData
});
}
// 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,
lockTabWidth = this.props.checkBox ? 5 : 2,
tabBoxWidth = parseInt(props.width);
for (var i = 0; i < state.tableObj.length; i++) {
if (state.tableObj[i].isLock) {
lockTabWidth += parseInt(state.tableObj[i].fieldWidth);
} else {
tabWidth += parseInt(state.tableObj[i].fieldWidth);
}
}
var minHeight = props.minHeight ? parseInt(props.minHeight) + 2.5 : 2.5;
tabBoxWidth = tabBoxWidth - lockTabWidth;
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, index) {
return _react2.default.createElement(
'div',
{ style: Object.assign({}, styles.spanBtn, { background: item.color || "#059a05" }),
key: index + '-btn', onClick: _this2.handleBtn.bind(_this2, item) },
item.name
);
})
),
_react2.default.createElement(
'div',
{ style: { position: "relative" } },
_react2.default.createElement(
'div',
{ style: { minHeight: minHeight + 'rem' } },
_react2.default.createElement(
'table',
{ style: Object.assign({}, styles.tb1, {
width: lockTabWidth + "rem",
position: "relative"
}) },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: Object.assign({}, styles.lockTheadTr) },
this.props.checkBox && this.props.checkType != "radio" ? _react2.default.createElement(
'td',
{ onClick: this.setSelectItemAll, style: styles.checkBox },
this.state.selectAll ? _react2.default.createElement(_index2.default, { type: this.props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, { type: this.props.checkType == 'radio' ? "RadioOff" : "CheckboxOff",
width: '1rem', height: '1rem', fill: '#ccc' })
) : 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 \xA0 ',
_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 \xA0 ',
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem',
fill: '#4aa5ff' })
)
)
) : null;
})
)
)
),
_react2.default.createElement(
_scrollBox2.default,
{ autohide: false,
style: styles.tableBox,
maxHeight: props.maxHeight ? props.maxHeight : '30rem',
updateScrollBar: props.updateScrollBar
},
_react2.default.createElement(
'table',
{ style: Object.assign({}, styles.tb2, {
width: tabBoxWidth + "rem",
position: 'sticky',
zIndex: 8,
top: "0rem",
marginLeft: lockTabWidth + "rem"
}) },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: Object.assign({}, styles.theadTr) },
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,
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 \xA0 ',
_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 \xA0 ',
_react2.default.createElement(_index2.default, { type: 'Down', width: '1rem', height: '1rem',
fill: '#4aa5ff' })
)
)
) : null;
})
)
)
),
state.tableData.length ? [_react2.default.createElement(
'table',
{ key: '1', style: Object.assign({}, styles.tb3, {
width: lockTabWidth + "rem"
}) },
_react2.default.createElement(
'tbody',
{ style: styles.locktbody },
state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index,
onClick: _this2.handleClick.bind(_this2, value),
style: Object.assign({}, _this2.props.rowBgColor == "none" ? styles['tbodyTr' + 2] : styles['tbodyTr' + index % 2], { height: props.lineHeight || "2.5rem" })
},
props.checkBox ? value.isChoose ? _react2.default.createElement(
'td',
{ style: styles.checkBox },
_this2.state.itemArr.includes(value.tableId) ? _react2.default.createElement(_index2.default, {
type: _this2.props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem',
fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, {
type: _this2.props.checkType == 'radio' ? "RadioOff" : "CheckboxOff",
width: '1rem', height: '1rem',
fill: '#ccc' })
) : _react2.default.createElement('td', { style: styles.checkBox }) : null,
props.tableObj.map(function (objname, index) {
return objname.isLock ? _react2.default.createElement(
'td',
{ title: _typeof(value[objname.fieldName]) == "object" ? "" : 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',
{ key: '2', style: Object.assign({}, styles.tb4, {
width: tabBoxWidth + "rem",
left: lockTabWidth + "rem"
}) },
_react2.default.createElement(
'tbody',
{ style: styles.tbody },
state.tableData.length ? state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index,
style: Object.assign({}, _this2.props.rowBgColor == "none" ? styles['tbodyTr' + 2] : styles['tbodyTr' + index % 2], { height: props.lineHeight || "2.5rem" }),
onClick: _this2.handleClick.bind(_this2, value)
},
props.tableObj.map(function (objname, index) {
{
_this2.props.checkBox && value.isChoose && !objname.isLock ? _react2.default.createElement(
'td',
{
style: styles.checkBox },
_this2.state.itemArr.includes(value.tableId) ? _react2.default.createElement(_index2.default, {
type: _this2.props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem',
fill: '#4aa5fe' }) : _react2.default.createElement(_index2.default, {
type: _this2.props.checkType == 'radio' ? "RadioOff" : "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: _typeof(value[objname.fieldName]) == "object" ? "" : value[objname.fieldName],
key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block",
boxSizing: "border-box",
padding: "0 0.4rem"
},
onClick: props.operatingFn ? props.operatingFn.bind(_this2, value) : function () {
return null;
}
},
_react2.default.createElement(
'div',
null,
'\u67E5\u770B'
)
));
} else {
dom.push(!objname.isLock ? _react2.default.createElement(
'td',
{ title: _typeof(value[objname.fieldName]) == "object" ? "" : value[objname.fieldName],
key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block",
boxSizing: "border-box",
padding: "0 0.4rem"
} },
value[objname.fieldName]
) : null);
}
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'
)
)
)
)
)] : [_react2.default.createElement('div', { style: { height: "4rem" } })]
)
),
!state.tableData.length ? _react2.default.createElement(
'div',
{ style: {
position: "absolute",
top: "4em",
zIndex: "1",
width: "100%",
textAlign: "center"
} },
'\u7A7A\u7A7A\u5982\u4E5F'
) : null,
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: true,
selectData: props.selectData,
selectId: props.selectId
})
)
)
);
}
}]);
return TableField;
}(_react.Component);
exports.default = TableField;
//# sourceMappingURL=table.js.map