micro-ui-y
Version:
709 lines (642 loc) • 37 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 _index = require('../../index');
var _subpage = require('./subpage');
var _styles = require('./styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
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.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.onMouseDownFn = function (item, e) {
if (_this.state.showColResize) {
var oldElemW = e.target.offsetWidth;
var oldElemX = e.target.getBoundingClientRect().x;
var oldElemR = oldElemX + e.target.offsetWidth;
var oldMouseX = e.clientX;
_this.setState({
mouseDown: true,
oldElemW: oldElemW,
oldElemX: oldElemX,
oldElemR: oldElemR,
oldMouseX: oldMouseX,
oldItem: item
});
}
};
_this.onMouseMoveFn = function (item, type, e) {
var elemX = e.target.getBoundingClientRect().x;
var elemR = elemX + e.target.offsetWidth;
var mouseX = e.clientX;
_this.setState({
moveElement: item,
showColResize: elemR > mouseX - 20 && elemR < mouseX + 20
});
if (_this.state.mouseDown && mouseX > elemX) {
var fontsize = parseFloat(getComputedStyle(window.document.documentElement)['font-size']);
var newW = mouseX - _this.state.oldElemX;
if (newW > 0) {
var tableObj = [].concat(_this.state.tableObj);
tableObj.forEach(function (item1) {
if (item1.fieldName == _this.state.oldItem.fieldName) {
item1.fieldWidth = (newW / fontsize * (16 - fontsize) + newW) / 16 + "rem";
}
});
_this.setState({
tableObj: tableObj
});
}
}
};
_this.onMouseUpFn = function (item, e) {
_this.setState({
moveElement: {},
mouseDown: false,
showColResize: false
});
};
_this.state = {
styles: _styles.styleObj,
tableData: [],
tableObj: [],
// shouldUpdate: true,
bgColor: '',
textColor: '',
_bgColor: '',
_textColor: '',
as: false, //是否点击升序
de: false, //是否点击降序
itemArr: [],
itemData: [],
selectAll: false,
moveElement: {},
showColResize: false,
mouseDown: false,
oldElemX: "",
oldMouseX: ""
};
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
});
// const _this = this;
// window.addEventListener('mouseup', function (e) {
// if (!_this.state.mouseDown) return;
// _this.setState({
// moveElement: {},
// mouseDown: false,
// showColResize: false,
// })
// });
}
// initScroll = () => {
// this.setState({ shouldUpdate: false });
// };
}, {
key: 'render',
value: function render() {
var _this2 = this;
var props = this.props,
state = this.state;
var styles = state.styles,
tabWidth = 0,
lockTabWidth = props.checkBox ? 5 : 2,
tabBoxWidth = parseInt(props.width);
state.tableObj.forEach(function (item) {
var width = parseInt(item.fieldWidth);
item.isLock ? lockTabWidth += width : tabWidth += width;
});
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 }) },
(0, _subpage.OperatBtn)(this, props, styles),
_react2.default.createElement(
'div',
{ style: { position: "relative" } },
_react2.default.createElement(
'div',
{ style: { minHeight: minHeight + 'rem' } },
_react2.default.createElement(
'table',
{ className: 'tb-thead-1', style: Object.assign({}, styles["tb-thead-1"], {
width: lockTabWidth + "rem"
}) },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: Object.assign({}, styles.lockTheadTr) },
props.checkBox && props.checkType != "radio" ? _react2.default.createElement(
'td',
{ onClick: this.setSelectItemAll, style: styles.checkBox },
this.state.selectAll ? _react2.default.createElement(_index.Svg, { type: props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem', fill: '#4aa5fe' }) : _react2.default.createElement(_index.Svg, { type: props.checkType == 'radio' ? "RadioOff" : "CheckboxOff",
width: '1rem', height: '1rem', fill: '#ccc' })
) : null,
state.tableObj.map(function (value, index, array) {
return value.isLock ? _react2.default.createElement(
'td',
{ id: '',
onMouseDown: _this2.onMouseDownFn.bind(_this2, value),
onMouseUp: _this2.onMouseUpFn.bind(_this2, value),
onMouseMove: _this2.onMouseMoveFn.bind(_this2, value, "thead1"),
style: _this2.state.moveElement.fieldName == value.fieldName && _this2.state.showColResize ? {
width: value.fieldWidth,
cursor: "col-resize",
background: "pink",
borderRight: "red solid 0.0625rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
} : {
width: value.fieldWidth,
background: "pink",
borderRight: "red solid 0.0625rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
}
//onMouseOver={value.isSequence ? this.mouseOver.bind(this, index, array) : null}
//onMouseOut={value.isSequence ? this.mouseOut.bind(this, index, array) : null}
//style={{
/// cursor: value.isSequence ? "pointer" : null,
// width: value.fieldWidth
// }}
, key: index },
value.fieldText,
value.isSequence ? _react2.default.createElement(
'div',
{ style: styles.sequenceSvg },
_react2.default.createElement(_index.Svg, { type: 'Up', width: '1rem', height: '1rem',
fill: value.as ? "#4aa5ff" : "#ccc" }),
_react2.default.createElement(_index.Svg, { type: 'Down', width: '1rem', height: '1rem',
fill: value.de ? "#4aa5ff" : "#ccc" })
) : null
) : null;
})
)
)
),
_react2.default.createElement(
_index.ScrollBox,
{ autohide: false,
style: styles.tableBox,
maxHeight: props.maxHeight ? props.maxHeight : '30rem',
updateScrollBar: props.updateScrollBar
},
_react2.default.createElement(
'table',
{ id: 'tb-thead-2', className: 'tb-thead-2',
style: Object.assign({}, styles["tb-thead-2"], {
width: tabBoxWidth + "rem",
marginLeft: lockTabWidth + "rem"
}) },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: Object.assign({}, styles.theadTr) },
state.tableObj.map(function (value, index, array) {
return !value.isLock ? _react2.default.createElement(
'td',
{
onMouseDown: _this2.onMouseDownFn.bind(_this2, value),
onMouseUp: _this2.onMouseUpFn.bind(_this2, value),
onMouseMove: _this2.onMouseMoveFn.bind(_this2, value, "thead2"),
style: _this2.state.moveElement.fieldName == value.fieldName && _this2.state.showColResize ? {
width: value.fieldWidth,
cursor: "col-resize",
background: "pink",
borderRight: "red solid 0.0625rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
} : {
width: value.fieldWidth,
background: "pink",
borderRight: "red solid 0.0625rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
}
//onMouseOver={value.isSequence ? this.mouseOver.bind(this, index, array) : null}
//onMouseOut={value.isSequence ? this.mouseOut.bind(this, index, array) : null}
//style={{
// cursor: value.isSequence ? "pointer" : null,
// width: value.fieldWidth,
// position: "relative"
// }}
, key: index },
value.fieldText,
value.isSequence ? _react2.default.createElement(
'div',
{ style: styles.sequenceSvg },
_react2.default.createElement(_index.Svg, { type: 'Up', width: '1rem', height: '1rem',
fill: value.as ? "#4aa5ff" : "#ccc" }),
_react2.default.createElement(_index.Svg, { type: 'Down', width: '1rem', height: '1rem',
fill: value.de ? "#4aa5ff" : "#ccc" })
) : null
) : null;
})
)
)
),
state.tableData.length ? [_react2.default.createElement(
'table',
{ key: '1', className: 'tb-body-1', style: Object.assign({}, styles["tb-body-1"], {
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({}, 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(_index.Svg, {
type: props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem',
fill: '#4aa5fe' }) : _react2.default.createElement(_index.Svg, {
type: props.checkType == 'radio' ? "RadioOff" : "CheckboxOff",
width: '1rem', height: '1rem',
fill: '#ccc' })
) : _react2.default.createElement('td', { style: styles.checkBox }) : null,
state.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', className: 'tb-body-2', style: Object.assign({}, styles[["tb-body-2"]], {
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({}, props.rowBgColor == "none" ? styles['tbodyTr' + 2] : styles['tbodyTr' + index % 2], { height: props.lineHeight || "2.5rem" }),
onClick: _this2.handleClick.bind(_this2, value)
},
state.tableObj.map(function (objname, index) {
{
props.checkBox && value.isChoose && !objname.isLock ? _react2.default.createElement(
'td',
{
style: styles.checkBox },
_this2.state.itemArr.includes(value.tableId) ? _react2.default.createElement(_index.Svg, {
type: props.checkType == 'radio' ? "RadioOn" : "CheckboxOn",
width: '1rem', height: '1rem',
fill: '#4aa5fe' }) : _react2.default.createElement(_index.Svg, {
type: props.checkType == 'radio' ? "RadioOff" : "CheckboxOff",
width: '1rem', height: '1rem',
fill: '#4aa5fe' })
) : null;
}
var dom = [];
if (index == state.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 },
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(_index.Page, { handlePage: props.handlePage,
totalNum: props.totalNum,
pageNumber: props.pageNumber,
pageSize: props.pageSize || 10,
showPageSize: true,
selectData: props.selectData
})
)
)
);
}
}]);
return TableField;
}(_react.Component);
exports.default = TableField;
//# sourceMappingURL=table.js.map