wiz-frameworks
Version:
wizlong react framework
1,326 lines (1,194 loc) • 44.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _utils = require("../../utils");
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils2 = require("./utils");
var _handleTabelHeaderUtils = require("./handleTabelHeaderUtils");
var _tool = require("../../tool");
var _wizAudienceGroupItem = require("../wizAudienceGroupItem");
var _wizAudienceGroupItem2 = _interopRequireDefault(_wizAudienceGroupItem);
require("./index.less");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; } /**
*
* @overview 表格列表
* @author mll
* @date 2019-11-2
*/
// import { withRouter } from 'dva/router';
var WizCard = _tool.component_tool.WizCard,
WizAlert = _tool.component_tool.WizAlert,
WizSearchBar = _tool.component_tool.WizSearchBar,
WizDataTable = _tool.component_tool.WizDataTable,
WizComponent = _tool.component_tool.WizComponent,
WizModalForm = _tool.component_tool.WizModalForm,
WizButton = _tool.component_tool.WizButton,
WizModal = _tool.component_tool.WizModal,
WizIcon = _tool.component_tool.WizIcon,
WizTree = _tool.component_tool.WizTree,
WizLayout = _tool.component_tool.WizLayout,
WizModalDescriptions = _tool.component_tool.WizModalDescriptions,
WizDropdown = _tool.component_tool.WizDropdown,
WizMenu = _tool.component_tool.WizMenu,
WizRow = _tool.component_tool.WizRow,
WizCol = _tool.component_tool.WizCol;
var isType = _tool.utils_tool.isType,
$$ = _tool.utils_tool.$$,
Session = _tool.utils_tool.Session,
deepReplaceKey = _tool.utils_tool.deepReplaceKey,
isEqual = _tool.utils_tool.isEqual;
var Pagination = WizDataTable.Pagination,
Oper = WizDataTable.Oper;
var Sider = WizLayout.Sider,
Content = WizLayout.Content;
var WizTableList = function (_WizComponent) {
_inherits(WizTableList, _WizComponent);
function WizTableList(props) {
_classCallCheck(this, WizTableList);
var _this = _possibleConstructorReturn(this, (WizTableList.__proto__ || Object.getPrototypeOf(WizTableList)).call(this, props));
_this._searchBar = function (searchBarProps, columns) {
var buttons = searchBarProps.buttons,
buttonSort = searchBarProps.buttonSort,
otherProps = _objectWithoutProperties(searchBarProps, ["buttons", "buttonSort"]);
var _this$props = _this.props,
paging = _this$props.paging,
pageFormat = _this$props.pageFormat,
openPullDown = _this$props.openPullDown,
commonOperate = _this$props.commonOperate;
var _this$state = _this.state,
searchBarKey = _this$state.searchBarKey,
params = _this$state.params;
var normal = _this.state.normal;
var search = _extends({
key: searchBarKey,
columns: columns,
onSearch: function onSearch(values) {
if (!normal) {
if (paging) {
_this.filters = (0, _utils2.reverseFormatPage)(_this.dataItems.filter(_extends({}, _this.treeSearch, values)).jumpPage(1, _this.pageSize || 10), pageFormat);
_this._removeSelected(function () {
_this.doOperate("list", _this.filters);
});
} else {
_this.filters = values["filters"] ? values["filters"] : {};
_this.doOperate("list", _extends({}, values, _this.filters));
}
}
},
cache: true,
record: params
}, otherProps);
var modal = [];
for (var key in _this.modal) {
modal.push(_this.modal[key] && _this.modal[key]());
}
return _react2["default"].createElement(
_react2["default"].Fragment,
null,
_react2["default"].createElement(
WizCard,
null,
_react2["default"].createElement(WizSearchBar, _extends({
type: "grid"
}, search, {
ref: function ref(e) {
return _this.search_ref = e;
}
}))
),
modal
);
};
_this._buildButtons = function (btns, record) {
if (isType(btns, "Array")) {
var r = [];
btns && btns.forEach(function (btn) {
r.push(_utils.templateUtils.getComponentByConfig(_this._buildButton(btn, record)));
});
return r;
} else {
return [_utils.templateUtils.getComponentByConfig(_this._buildButton(btns, record))];
}
};
_this._buildButton = function (btn, record) {
var rows = _this.state.rows;
var _this$props2 = _this.props,
loading = _this$props2.loading,
doAction = _this$props2.doAction,
_datas = _this$props2._datas;
//custom按钮格式
// { custom:true
// key: 'test',
// params : { ... },
// customOnClick : {
// key: 'action' | 'modal' | 'jumpPage',
// params : {}
// },
// needSelect : bool
// }
var custom = btn.custom,
key = btn.key,
params = btn.params,
customOnClick = btn.customOnClick,
needSelect = btn.needSelect,
textFormat = btn.textFormat;
if (!custom) {
var onPress = btn["onClick"];
if (onPress && isType(onPress, "Function")) {
params["onClick"] = function () {
onPress && onPress({ loading: loading, doAction: doAction, _datas: _datas, rows: rows, record: record, filter: _this.filters });
};
}
return btn;
} else {
if (!key) {
log.error("WizTableList: 自定义搜索栏按钮必须传入[key]! ");
return null;
}
if (!params || !customOnClick) {
return btn;
} else {
var disabled = false;
if (needSelect) {
disabled = !rows.length;
}
var onClick = function onClick() {
log.info(" btn [" + key + "] clicked, you need to pass in [onClick] method! ");
};
if (customOnClick && customOnClick["key"]) {
if (customOnClick["key"] === "modal") {
_this._buildModal(customOnClick, key, record);
}
onClick = function onClick() {
return _this._btnCustomClick(customOnClick, key, record);
};
}
var btnTextParams = {};
if (textFormat && textFormat["recordKey"] && textFormat["dirt"]) {
var t = textFormat["dirt"][record[textFormat["recordKey"]]];
btnTextParams = { children: t };
}
var otherParams = btn["recordChangeParams"] && btn["recordChangeParams"]({ record: record, rows: rows }) || {};
return _react2["default"].createElement(WizButton, _extends({
key: key,
onClick: onClick,
disabled: disabled
}, params, btnTextParams, otherParams));
}
}
};
_this._btnCustomClick = function (_ref, btnKey) {
var key = _ref.key,
params = _ref.params,
formatParams = _ref.formatParams;
var record = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (key === "action") {
// let params = {
// apiKey : 'demo',
// apiParams,
// formatParams:(rows,record,filters)=>{}
// }
_this.commonState[params["apiKey"]] = {};
var p = formatParams ? formatParams(_this.state.rows, record, _this.filters, function (e) {
_this._btnCustomClickCallBack(params["apiKey"], params["apiParams"], e);
}) : _extends({}, _this.state.rows, record, _this.filters);
if (p) {
_this.doOperate(params["apiKey"], _extends({}, params["apiParams"], p, { _CACHE: false }));
}
} else if (key === "modal") {
// let params = {
// modalKey : 'demo',
// modalParams:{},
// }
var modalKey = params["modalKey"] || btnKey;
if (record && record["id"]) {
modalKey = modalKey + "@" + record["id"];
}
_this.setState(_defineProperty({}, modalKey, true));
} else if (key === "jumpPage") {
var _key = params.key,
pathname = params.pathname;
_this.props.jumpPage && _this.props.jumpPage(_key, pathname, _extends({
rows: _this.state.rows
}, params["record"], record));
}
};
_this._buildModal = function (_ref2, btnKey, record) {
var key = _ref2.key,
params = _ref2.params;
var modalKey = params["modalKey"] || btnKey;
if (record && record["id"]) {
modalKey = modalKey + "@" + record["id"];
}
var modalParams = params["modalParams"];
var _onOk = params["modalParams"] && params["modalParams"]["onOk"];
var _onCancel = params["modalParams"] && params["modalParams"]["onCancel"];
if (modalParams && modalParams["diy"] && isType(modalParams["diy"], "Function")) {
var diyFun = modalParams["diy"];
var e = {
changeModal: function changeModal(modalFlag, onRef, needClearSelect) {
_this.setState(_defineProperty({}, modalKey, modalFlag));
if (onRef) {
if (needClearSelect) {
_this._removeSelected(function () {
_this.doOperate("list", _extends({}, _this.filters, { _CACHE: false }));
});
} else {
_this.doOperate("list", _extends({}, _this.filters, { _CACHE: false }));
}
}
},
parentProps: _this.props,
record: record,
rows: _this.state.rows
};
//delete modalParams['diy']
_this.modal[modalKey] = function () {
return _react2["default"].createElement(
WizModal,
_extends({}, modalParams, {
visible: _this.state[modalKey],
onCancel: function onCancel() {
e.changeModal(false);
_onCancel && _onCancel();
},
onOk: function onOk() {
_onOk();
}
}),
diyFun && diyFun(e)
);
};
} else {
_this.modal[modalKey] = function () {
return _react2["default"].createElement(WizModal, _extends({}, modalParams, {
visible: _this.state[modalKey],
onOk: function onOk() {
_this.setState(_defineProperty({}, modalKey, false), function () {
_onOk && _onOk();
});
},
onCancel: function onCancel() {
_this.setState(_defineProperty({}, modalKey, false), function () {
_onCancel && _onCancel();
});
}
}));
};
}
};
_this._buildAddBtn = function () {
return _react2["default"].createElement(
WizButton,
{
type: "primary",
icon: "plus",
onClick: function onClick() {
_this._onAdd();
}
},
"\u65B0\u589E"
);
};
_this._buildDeleteBtn = function (rows) {
return _react2["default"].createElement(
WizButton,
{
disabled: !rows.length,
onClick: function onClick() {
return _this._onDelete(rows);
},
icon: "delete",
type: "danger"
},
"\u5220\u9664"
);
};
_this._buildBtnGroup = function (group) {
//格式
// {
// type: 'group',
// key: 'group',
// params: {
// key: "_group_btn",
// icon: 'plus', children: '创建', type: 'primary', tooltip: '创建',
// },
// options: [
// {
// key: 'addByTemp',
// name: "WizButton",
// params: {
// children: '从模版中创建'
// },
// onClick: e => _btnFun && _btnFun(e)
// },
// {
// key: 'add',
// params: { children: '创建空白问卷' },
// customOnClick: {
// key: 'jumpPage',
// params: {
// key: 'push',
// pathname: '/biz/survey/surveyDetailAdd'
// }
// }
// }
// ]
// }
var r = [];
var ops = group["options"];
if (ops && ops.length) {
var _ops = [];
ops.forEach(function (o) {
if (_this.checkAccessBtn(o["key"])) {
_ops.push(o);
}
});
if (_ops.length > 1) {
var menuItem = [];
_ops.forEach(function (ops) {
var customOnClick = ops.customOnClick,
onClick = ops.onClick,
params = ops.params;
var _onClick = onClick;
if (customOnClick && customOnClick["key"]) {
if (customOnClick["key"] === "modal") {
_this._buildModal(customOnClick, ops["key"]);
}
_onClick = function _onClick() {
return _this._btnCustomClick(customOnClick, ops["key"]);
};
}
menuItem.push(_react2["default"].createElement(WizMenu.Item, _extends({ key: ops["key"] }, params, { onClick: _onClick })));
});
r.push(_react2["default"].createElement(
WizDropdown,
{ overlay: _react2["default"].createElement(
WizMenu,
null,
menuItem
) },
_react2["default"].createElement(WizButton, group["params"])
));
} else if (_ops.length === 1) {
r.push.apply(r, _toConsumableArray(_this._buildButtons(_ops)));
}
}
return r;
};
_this._buildOperationButton = function () {
var buttons = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var sort = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var rows = _this.state.rows;
var btns = [];
if (sort.length > 0 && buttons.length > 0) {
sort.forEach(function (key) {
var flag = false;
if (key === "add" || key === "delete") {
flag = true;
}
buttons.forEach(function (btn) {
if (btn["type"] === "group" && key === btn["key"]) {
btns.push.apply(btns, _toConsumableArray(_this._buildBtnGroup(btn)));
} else if (_this.checkAccessBtn(key) && key === btn["key"]) {
if (key === "add" || key === "delete") {
flag = false;
}
btns.push.apply(btns, _toConsumableArray(_this._buildButtons([btn])));
}
});
if (flag) {
if (_this.checkAccessBtn(key) && key === "add") {
btns.push(_this._buildAddBtn());
} else if (_this.checkAccessBtn(key) && key === "delete") {
btns.push(_this._buildDeleteBtn(rows));
}
}
});
} else if (sort.length > 0) {
sort.forEach(function (key) {
if (_this.checkAccessBtn(key) && key === "add") {
btns.push(_this._buildAddBtn());
} else if (_this.checkAccessBtn(key) && key === "delete") {
btns.push(_this._buildDeleteBtn(rows));
}
});
}
return _react2["default"].createElement(
"div",
{ className: "btns-toolbar-group" },
btns
);
};
_this.checkAccessBtn = function (key) {
var flag = false;
var _this$props3 = _this.props,
accessBtns = _this$props3.accessBtns,
btnAccessCheck = _this$props3.btnAccessCheck;
if (!btnAccessCheck) {
flag = true;
} else if (accessBtns && accessBtns.length > 0) {
accessBtns.forEach(function (btn) {
if (btn["code"] === key) {
flag = true;
}
});
}
return flag;
};
_this.showAuthModal = function (e) {
var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
e.stopPropagation();
_this.setState({ showAuthVisible: true, scope: text });
};
_this._handleShowAuth = function (columns, showAuth) {
var _columns = [];
if (typeof showAuth === 'boolean') {
_columns.push({
title: "受众",
tableItem: {
width: 85,
render: function render(text, record) {
return _react2["default"].createElement(
"a",
{ onClick: function onClick(e) {
return _this.showAuthModal(e, text.authData);
} },
"\u67E5\u770B\u53D7\u4F17"
);
}
}
});
} else if (Object.prototype.toString.call(showAuth) === '[object Object]') {
_columns.push({
title: showAuth.title || "受众",
tableItem: _extends({
width: 85,
render: function render(text, record) {
return _react2["default"].createElement(
"a",
{ onClick: function onClick(e) {
return _this.showAuthModal(e, text);
} },
showAuth.text || '查看受众'
);
}
}, showAuth)
});
} else if (Array.isArray(showAuth)) {
try {
var items = showAuth.map(function (val) {
return {
title: val.title,
tableItem: _extends({
width: 85,
render: function render(text, record) {
return _react2["default"].createElement(
"a",
{ onClick: function onClick(e) {
return _this.showAuthModal(e, text);
} },
val.text || '查看受众'
);
}
}, val)
};
});
_columns.push.apply(_columns, _toConsumableArray(items));
} catch (error) {
console.warn('showAuth is an illegal array of objects');
}
} else {
console.warn('showAuth is an illegal parameter');
}
return columns.concat(_columns);
};
_this._handleOper = function (columns, rowOperateView, dataTableProps) {
var rowOperateProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var rowOperateSort = _this.props.rowOperateSort;
var _rowOperateProps = _extends({ witdh: 200, fixed: 'right' }, rowOperateProps);
var _columns = columns;
if (rowOperateSort && rowOperateSort.length > 0 || rowOperateView && rowOperateView.length > 0) {
_columns.push({
title: "操作",
tableItem: _extends({
width: 220
}, _rowOperateProps, {
render: function render(text, record) {
return _react2["default"].createElement(
Oper,
{ maxNum: dataTableProps["maxNum"] || 3 },
_this._buildOperBtns(text, record, rowOperateView)
);
}
})
});
}
return _columns;
};
_this._buildLookBtn = function (record) {
return _react2["default"].createElement(
WizButton
//tooltip="查看"
,
{ key: "look",
onClick: function onClick(e) {
_this.setState({
record: record,
visible: true,
look: true
});
}
},
"\u67E5\u770B"
);
};
_this._buildUpdateBtn = function (record) {
return _react2["default"].createElement(
WizButton
//tooltip="编辑"
,
{ key: "update",
onClick: function onClick(e) {
return _this.setState({
record: record,
visible: true,
look: false
});
}
},
"\u7F16\u8F91"
);
};
_this._buildOperBtns = function (text, record) {
var rowOperateView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var rowOperateSort = _this.props.rowOperateSort;
var operList = [];
if (rowOperateSort.length > 0 && rowOperateView.length > 0) {
rowOperateSort.forEach(function (key) {
var flag = false;
if (key === "look" || key === "update") {
flag = true;
}
rowOperateView.forEach(function (btn) {
if (_this.checkAccessBtn(key) && key === btn["key"]) {
if (key === "look" || key === "update") {
flag = false;
}
operList.push.apply(operList, _toConsumableArray(_this._buildButtons([btn], record)));
}
});
if (flag) {
if (_this.checkAccessBtn(key) && key === "look") {
operList.push(_this._buildLookBtn(record));
} else if (_this.checkAccessBtn(key) && key === "update") {
operList.push(_this._buildUpdateBtn(record));
}
}
});
} else if (rowOperateSort.length > 0) {
rowOperateSort.forEach(function (key) {
if (_this.checkAccessBtn(key) && key === "look") {
operList.push(_this._buildLookBtn(record));
} else if (_this.checkAccessBtn(key) && key === "update") {
operList.push(_this._buildUpdateBtn(record));
}
});
}
return operList;
};
_this.doOperate = function (key, values, callback) {
var _this$props4 = _this.props,
operate = _this$props4.operate,
doAction = _this$props4.doAction;
if (operate && operate[key]) {
operate[key](values, callback);
} else if (doAction) {
doAction(key, values);
} else {
log.error("WizTableList: 未找到 " + key + " 方法,请通过operate传入 或 传入doAction ");
}
};
_this.state = {
record: null,
visible: false,
rows: [],
normal: _this.props.dataItems ? true : false, //模式：普通模式/动态数据模式,
dataItems: _this.props.dataItems ? _this.props.dataItems : undefined,
selectedRows: 0,
look: false,
showAlert: false,
showAuthVisible: false,
scope: {},
params: {}
};
_this.modal = {};
_this.filters = {};
_this.treeSearch = {};
_this.propsAndStateOnChange = props.needMonitor || {};
return _this;
}
/**
* 1\监控是否需要刷新列表
* 2\由于获取数据与tablelist分离了，导致新增、修改完无法关闭modal，故在此监控是否要关闭modal,属于临时方法，不是好的解决方案
* mll 2019-12-27
*/
_createClass(WizTableList, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this2 = this;
var _datas = nextProps._datas,
params = nextProps.params;
var commonOperate = {
add: true,
update: true,
"delete": true,
look: true
};
var refFlag = false;
if (!this.commonState) {
this.commonState = {};
if (commonOperate) {
Object.keys(commonOperate).forEach(function (key) {
if (_datas[key]) {
_this2.commonState[key] = _datas[key];
}
});
}
} else {
var flag = false;
var o = {};
Object.keys(this.commonState).forEach(function (key) {
if (_datas[key] && _datas[key]["success"] === true) {
if (_datas[key]["actionCompleteTime"] && _this2.commonState[key]["actionCompleteTime"] !== _datas[key]["actionCompleteTime"]) {
flag = true;
o[key] = _datas[key];
}
}
});
if (flag) {
this.commonState = _extends({}, this.commonState, o);
this.setState({ visible: false });
refFlag = true;
}
if (refFlag) {
this._removeSelected(function () {
_this2.doOperate("list", _this2.filters);
_this2.doOperate("treeData", { _CACHE: false });
});
}
}
}
/**
* 搜索栏
*/
}, {
key: "_onAdd",
/**
* 新增 / 修改
*/
value: function _onAdd() {
var record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
this.setState({
record: record,
visible: true,
look: false
});
}
/**
* 删除
* @param {object | array} 表单记录, 批量删除时为数组
*/
}, {
key: "_onDelete",
value: function _onDelete(record) {
var _this3 = this;
if (!record) return;
if ($$.isArray(record) && !record.length) return;
// const content = `您是否要删除这${
// $$.isArray(record) ? record.length : ""
// }项？`;
var content = "删除后数据不可恢复，您确定要删除选中的数据吗？";
var ids = (0, _utils2._formatDeleteRecord)(record);
WizModal.confirm({
title: "注意",
content: content,
onOk: function onOk() {
_this3.doOperate("delete", _extends({}, ids, { _CACHE: false }));
},
onCancel: function onCancel() {}
});
}
/**
* 构建按钮数据
*/
/**
* 构建单按钮
*/
}, {
key: "_btnCustomClickCallBack",
value: function _btnCustomClickCallBack(apiKey, apiParams, p) {
this.doOperate(apiKey, _extends({}, apiParams, p, { _CACHE: false }));
}
/**
* 自定义按钮触发事件，
* key为modal为modal模式，action为action模式，
* action会从调用api中的接口，
* formatParams的是按钮被点击时回传的参数格式化方法
* formatParams:(rows,record,filters,callback)=>{return p}}
* apiKey是调用api接口的kay,apiParams是默认参数，formatParams的参数会覆盖默认参数
*/
/**
* 构建按钮组
*/
/**
* 搜索操作按钮
*/
/**
* 校验按钮权限
*/
/**
* 受众列是否显示
*/
/**
* 处理数据行操作区域
*/
/**
* 构建行操作按钮
*/
}, {
key: "_removeSelected",
/**
* 清空
*/
value: function _removeSelected(callback) {
this.setState({ rows: [], selectedRows: 0 }, function () {
callback && callback();
});
}
}, {
key: "_getDataItems",
value: function _getDataItems() {
var _props = this.props,
dataItems = _props.dataItems,
_datas = _props._datas,
paging = _props.paging,
pageFormat = _props.pageFormat;
var _dataItems = this.state.dataItems || dataItems;
if (!this.state.normal) {
//动态数据模式
_dataItems = _datas && _datas["list"] && _datas["list"]["data"];
}
if (!_dataItems) {
_dataItems = {};
} else {
// _dataItems = _datas["list"]["data"]
}
if (paging) {
_dataItems = (0, _utils2.formatPage)(_dataItems, pageFormat);
}
return _dataItems;
}
}, {
key: "_dataTable",
value: function _dataTable(dataTableProps, columns) {
var _this4 = this;
var _props2 = this.props,
loading = _props2.loading,
paging = _props2.paging,
pageFormat = _props2.pageFormat,
rowOperateView = _props2.rowOperateView,
searchBarProps = _props2.searchBarProps,
rowOperateProps = _props2.rowOperateProps,
rowOperateRight = _props2.rowOperateRight,
showAuth = _props2.showAuth;
if (!this.pageSize && dataTableProps && dataTableProps['pageSize']) {
this.pageSize = dataTableProps['pageSize'];
}
var buttons = searchBarProps.buttons,
buttonSort = searchBarProps.buttonSort;
var _state = this.state,
rows = _state.rows,
normal = _state.normal,
selectedRows = _state.selectedRows,
showAlert = _state.showAlert;
var _columns = columns;
var dataItems = this.dataItems || "";
if (dataItems && dataItems["headList"]) {
_columns = (0, _handleTabelHeaderUtils.handleTabelHeader)(dataItems["headList"]);
}
if (showAuth && _columns.length > 0) {
_columns = this._handleShowAuth(_columns, showAuth);
}
if (rowOperateView && _columns.length > 0) {
_columns = this._handleOper(_columns, rowOperateView, dataTableProps, rowOperateProps);
}
if (dataTableProps.selectType === "checkbox") {
this.setState({
showAlert: true
});
}
var _onSelect = function _onSelect(keys, rows) {
_this4.setState({
rows: rows,
data: new Date().getTime(),
selectedRows: rows.length
}, function () {
dataTableProps["onSelect"] && dataTableProps["onSelect"](keys, rows);
});
};
var dataTable = _extends({
loading: loading,
columns: _columns,
dataItems: dataItems,
bordered: false,
size: "middle",
selectedRowKeys: rows.map(function (item) {
return item.rowKey;
}),
onChange: function onChange(_ref3) {
var pageNum = _ref3.pageNum,
pageSize = _ref3.pageSize;
if (paging) {
_this4.pageSize = pageSize;
if (normal) {
// this.setState({
// dataItems: dataItems.jumpPage(pageNum, pageSize)
// })
} else {
_this4.filters = _extends({}, _this4.filters, (0, _utils2.reverseFormatPage)(dataItems.jumpPage(pageNum, pageSize), pageFormat));
_this4._removeSelected(function () {
_this4.doOperate("list", _this4.filters);
});
}
}
}
}, dataTableProps, {
onSelect: _onSelect
});
var message = _react2["default"].createElement(
_react2["default"].Fragment,
null,
"\u5DF2\u9009\u62E9 ",
selectedRows,
" \u9879",
_react2["default"].createElement(
WizButton,
{
style: { height: 20 },
type: "link"
//tooltip="清空"
, onClick: function onClick() {
return _this4._removeSelected();
}
},
" ",
"\u6E05\u7A7A"
)
);
var r = [_react2["default"].createElement(
WizCard,
{ style: { minHeight: 570 } },
_react2["default"].createElement(
WizRow,
{ align: 'middle' },
_react2["default"].createElement(
WizCol,
{ span: rowOperateRight ? 16 : 24 },
this._buildOperationButton(buttons, buttonSort)
),
rowOperateRight ? _react2["default"].createElement(
WizCol,
{ span: 8 },
rowOperateRight()
) : null
),
showAlert ? _react2["default"].createElement(WizAlert, {
type: "info",
message: message,
showIcon: true,
style: { marginBottom: 15 }
}) : null,
_react2["default"].createElement(WizDataTable, dataTable),
paging ? _react2["default"].createElement(
"div",
{ style: { marginTop: 35, textAlign: "center" } },
_react2["default"].createElement(Pagination, dataTable)
) : null
)];
return r;
}
/**
* 操作
*/
}, {
key: "_modalForm",
/**
* modalForm
* @param {*} modalFormProps
*/
value: function _modalForm(modalFormProps, columns) {
var _this5 = this;
var loading = this.props.loading;
var _state2 = this.state,
record = _state2.record,
visible = _state2.visible,
look = _state2.look;
var modalFrom = _extends({
loading: loading,
record: record,
visible: visible,
columns: columns,
modalOpts: {
width: 700
},
onCancel: function onCancel() {
_this5.setState({
record: null,
visible: false
});
},
onSubmit: function onSubmit(values) {
var key = record ? "update" : "add";
var dataFormat = modalFormProps["dataFormat"];
var _values = dataFormat ? dataFormat(values) : values;
_this5.doOperate(key, _values, function () {
_this5.setState({
record: null,
visible: false
});
});
}
}, modalFormProps);
//查看数据构建
if (look) {
modalFrom = (0, _utils2._buildLookModalProps)(modalFrom, this);
modalFrom.title = "查看";
// return <WizModalDescriptions title="详情" {...modalFrom} />;
}
return _react2["default"].createElement(WizModalForm, modalFrom);
}
}, {
key: "_siderBar",
value: function _siderBar(siderBarProps) {
var _this6 = this;
var _props3 = this.props,
_datas = _props3._datas,
loading = _props3.loading,
pageFormat = _props3.pageFormat;
var key = siderBarProps.key,
_onSelect2 = siderBarProps.onSelect,
searchKey = siderBarProps.searchKey,
otherProps = siderBarProps.otherProps;
var treeData = deepReplaceKey(_datas["treeData"]["data"], [{ key: "key", value: "key" }]);
var treeProps = _extends({
key: key,
treeData: treeData,
onSelect: function onSelect(selectedKeys, _ref4) {
var selected = _ref4.selected,
selectedNodes = _ref4.selectedNodes,
node = _ref4.node,
event = _ref4.event;
if (_onSelect2) {
_onSelect2(selectedKeys, { selected: selected, selectedNodes: selectedNodes, node: node, event: event });
} else if (searchKey) {
if (_this6.treeSearch[searchKey] && _this6.treeSearch[searchKey] === node.props.value && !selected) {
_this6.treeSearch = {};
} else {
_this6.treeSearch = _defineProperty({}, searchKey, node.props.value);
}
_this6.filters = (0, _utils2.reverseFormatPage)(_this6.dataItems.filter(_this6.treeSearch).jumpPage(1, _this6.pageSize || 10), pageFormat);
//重置表单 哈哈
_this6.search_ref.resetFields && _this6.search_ref.resetFields();
_this6._removeSelected(function () {
_this6.doOperate("list", _extends({}, _this6.filters, { _CACHECLEAR: true }));
});
}
}
}, otherProps);
return _react2["default"].createElement(
WizCard,
{ className: "tablelist-sidebar-wrp" },
_react2["default"].createElement(WizTree, treeProps)
);
}
}, {
key: "render",
value: function render() {
var _this7 = this;
this.dataItems = this._getDataItems();
var _props4 = this.props,
searchBarProps = _props4.searchBarProps,
dataTableProps = _props4.dataTableProps,
modalFormProps = _props4.modalFormProps,
siderBarProps = _props4.siderBarProps,
columns = _props4.columns,
_datas = _props4._datas,
showAuth = _props4.showAuth;
var _columns = (0, _utils2._buildColumns)(columns, _datas);
var _state3 = this.state,
scope = _state3.scope,
showAuthVisible = _state3.showAuthVisible;
var modalProps = {
title: '查看受众',
visible: showAuthVisible,
footer: null,
onCancel: function onCancel() {
_this7.setState({ showAuthVisible: false });
}
};
return _react2["default"].createElement(
WizLayout,
null,
isType(siderBarProps, "Object") ? _react2["default"].createElement(
Sider,
{
theme: "light",
style: {
marginRight: 15,
minHeight: "calc(100vh - 132px)",
overflow: "auto",
width: 280
}
},
this._siderBar(siderBarProps, _columns)
) : null,
_react2["default"].createElement(
Content,
null,
isType(searchBarProps, "Object") ? this._searchBar(searchBarProps, _columns) : null,
isType(dataTableProps, "Object") ? this._dataTable(dataTableProps, _columns) : null,
isType(modalFormProps, "Object") ? this._modalForm(modalFormProps, _columns) : null,
showAuth ? _react2["default"].createElement(
WizModal,
modalProps,
_react2["default"].createElement(_wizAudienceGroupItem2["default"], scope)
) : null
)
);
}
}]);
return WizTableList;
}(WizComponent);
exports["default"] = WizTableList;
WizTableList.propTypes = {
/**
* 分页，默认true
*/
paging: _propTypes2["default"].bool,
/**
* 分页格式化工具
*/
pageFormat: _propTypes2["default"].object,
/**
* 数据格式 配置
*/
columns: _propTypes2["default"].array.isRequired,
/**
* 表格的数据
*/
dataItems: _propTypes2["default"].array,
/**
* 搜索属性
*/
searchBarProps: _propTypes2["default"].object,
/**
* 数据列表属性
*/
dataTableProps: _propTypes2["default"].object, //.isRequired,
/**
* modal属性
*/
modalFormProps: _propTypes2["default"].object,
/**
* 侧边栏属性
*/
siderBarProps: _propTypes2["default"].object,
/**
* 操作方法
* 需要基础的方法 新增 add，修改update，删除delete,搜索list
* 需要配套在 doAction中 有key为 'add','deletet'的方法
*/
operate: _propTypes2["default"].object,
/**
* 列表行的操作按钮
*/
rowOperateView: _propTypes2["default"].array,
/***
* 列表行操作的属性
*/
rowOperateProps: _propTypes2["default"].object,
/**
* 列表操作右边区域的自定义方法
*/
rowOperateRight: _propTypes2["default"].any,
/**
* 列表行的操作按钮的顺序 ['look','update', ... ]
*/
rowOperateSort: _propTypes2["default"].array,
/**
* 搜索框是否打开，默认true
*/
openPullDown: _propTypes2["default"].bool,
//联合wizTemplate使用的属性
/**
* 请求方法
*/
doAction: _propTypes2["default"].any,
/**
* 从接口获取的数据集
*/
_datas: _propTypes2["default"].object,
/**
* loading状态
*/
loading: _propTypes2["default"].bool, //.isRequired,
/**
* 是否需要过滤按钮权限
*/
btnAccessCheck: _propTypes2["default"].bool,
/**
* 监控props和state的方法，等同于propsAndStateOnChange
*/
needMonitor: _propTypes2["default"].object,
/**
* 是否需要查看受众的按钮
*/
showAuth: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object, _propTypes2["default"].array]),
/**
* 搜索表单默认值
*/
params: _propTypes2["default"].object
};
/**
* 默认值
*/
WizTableList.defaultProps = {
paging: true,
pageFormat: {
pageNum: "current", //页码
pageSize: "size", //每页数量
total: "total", //总数
totalPages: "pages", //总页数
//headList: 'headList',//表头数据
sorts: "orders", //排序
list: "records" //数据
},
openPullDown: true,
rowOperateSort: [],
btnAccessCheck: true,
showAuth: false
};
module.exports = exports['default'];