yyuap-template
Version:
template project which is based on tinper
382 lines (347 loc) • 16.2 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['module', 'exports', 'react', 'react-dom', './view/TextWithLabel/TextWithLabel', './layout/TableLayout/TableLayout', './layout/Table/Table', './layout/HeadForm/HeadForm', './layout/ColumnPanel/ColumnPanel', './layout/GroupTable/GroupTable', './view/Label/Label', '../style/iconfont.css', '../style/Form.css', '../style/Datecomponent.css', '../style/layout.css', '../datastore/connect'], factory);
} else if (typeof exports !== "undefined") {
factory(module, exports, require('react'), require('react-dom'), require('./view/TextWithLabel/TextWithLabel'), require('./layout/TableLayout/TableLayout'), require('./layout/Table/Table'), require('./layout/HeadForm/HeadForm'), require('./layout/ColumnPanel/ColumnPanel'), require('./layout/GroupTable/GroupTable'), require('./view/Label/Label'), require('../style/iconfont.css'), require('../style/Form.css'), require('../style/Datecomponent.css'), require('../style/layout.css'), require('../datastore/connect'));
} else {
var mod = {
exports: {}
};
factory(mod, mod.exports, global.react, global.reactDom, global.TextWithLabel, global.TableLayout, global.Table, global.HeadForm, global.ColumnPanel, global.GroupTable, global.Label, global.iconfont, global.Form, global.Datecomponent, global.layout, global.connect);
global.createTemplate = mod.exports;
}
})(this, function (module, exports, _react, _reactDom, _TextWithLabel, _TableLayout, _Table, _HeadForm, _ColumnPanel, _GroupTable, _Label, _iconfont, _Form, _Datecomponent, _layout, _connect) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react2 = _interopRequireDefault(_react);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _TextWithLabel2 = _interopRequireDefault(_TextWithLabel);
var _TableLayout2 = _interopRequireDefault(_TableLayout);
var _Table2 = _interopRequireDefault(_Table);
var _HeadForm2 = _interopRequireDefault(_HeadForm);
var _ColumnPanel2 = _interopRequireDefault(_ColumnPanel);
var _GroupTable2 = _interopRequireDefault(_GroupTable);
var _Label2 = _interopRequireDefault(_Label);
var _iconfont2 = _interopRequireDefault(_iconfont);
var _Form2 = _interopRequireDefault(_Form);
var _Datecomponent2 = _interopRequireDefault(_Datecomponent);
var _layout2 = _interopRequireDefault(_layout);
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");
}
}
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;
};
}();
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;
}
var layoutType = {
Label: _Label2.default,
Table: _Table2.default,
DataTable: _Table2.default,
HeadForm: _HeadForm2.default,
ColumnPanel: _ColumnPanel2.default,
GroupTable: _GroupTable2.default,
TableLayout: _TableLayout2.default
// Form:Form,
// Grid:Grid
};
var CreateTemplate = function (_Component) {
_inherits(CreateTemplate, _Component);
function CreateTemplate(props) {
_classCallCheck(this, CreateTemplate);
var _this = _possibleConstructorReturn(this, (CreateTemplate.__proto__ || Object.getPrototypeOf(CreateTemplate)).call(this, props));
_this.state = {
editStatus: false, //整个表单的编辑状态
allExpand: true,
headFormExpand: true,
headFormIsEdit: false,
dataModel: {},
values: {
value: ""
}
};
return _this;
}
_createClass(CreateTemplate, [{
key: 'handleValue',
value: function handleValue(params) {
this.setState({
values: { value: params.value }
});
}
}, {
key: 'generateViewmodel',
value: function generateViewmodel() {
var self = this;
var layouts = this.props.viewModel.formLayout.layoutDetail.layoutDetail;
var afterGenerateViewmodel = {};
afterGenerateViewmodel.head = [];
afterGenerateViewmodel.bodys = [];
for (var i = 0; i < layouts.length; i++) {
var layout = layouts[i];
if (layoutType[layout.componentKey]) {
if (layout.componentKey === 'GroupTable') {
if (!self.isSubTable(layout.layoutDetail[0].layoutDetail[0].componentKey)) {
afterGenerateViewmodel.head.push(layout);
} else {
afterGenerateViewmodel.bodys.push(layout);
}
continue;
}
if (!self.isSubTable(layout.componentKey)) {
afterGenerateViewmodel.head.push(layout);
} else {
afterGenerateViewmodel.bodys.push(layout);
}
}
}
console.log(afterGenerateViewmodel);
return afterGenerateViewmodel;
}
}, {
key: 'isSubTable',
value: function isSubTable(componentKey) {
if ("DataTable" === componentKey || "Table" === componentKey || "Form" === componentKey || "Grid" === componentKey || "GroupTable" === componentKey) {
return true;
}
return false;
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
// window.onbeforeunload = function(){
// return 'hello'
// }
if (this.props.dataModel) {
this.updateDataModel(this.props.dataModel);
} else {
this.createDataModel(this.props.viewModel);
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {}
}, {
key: 'ceshi',
value: function ceshi() {
this.setState({
headFormIsEdit: true
});
}
}, {
key: 'createView',
value: function createView() {
var self = this;
var viewContent = [];
if (!this.props.config.defaultTemplate.head.length) {
return _react2.default.createElement(
'div',
null,
uiTemplateMultilingual.template('模板为空或不符合规范')
);
} else {
viewContent.push(_react2.default.createElement(layoutType['HeadForm'], {
viewModel: this.props.config.defaultTemplate.head,
dataModel: this.state.dataModel.head,
key: 'headform',
config: this.props.config,
headFormIsEdit: this.state.headFormIsEdit,
headFormExpand: this.state.headFormExpand,
editStatus: this.state.editStatus,
allExpand: this.state.allExpand,
handleHeadFormExpand: this.handleHeadFormExpand.bind(this),
handleIsEdit: this.handleHeadFormIsEdit.bind(this),
handleAllExpand: this.handleAllExpand.bind(this)
}));
this.props.config.defaultTemplate.bodys.map(function (layout, index) {
if (layout.isDisplay) {
viewContent.push(_react2.default.createElement(layoutType[layout.componentKey], {
viewModel: layout,
dataModel: self.state.dataModel.bodys,
key: index,
config: self.props.config,
headFormIsEdit: self.state.headFormIsEdit,
headFormExpand: self.state.headFormExpand,
editStatus: self.state.editStatus,
allExpand: self.state.allExpand,
titleListTotal: 5,
handleHeadFormExpand: self.handleHeadFormExpand.bind(self),
handleIsEdit: self.handleBodyFormIsEdit.bind(self),
handleAllExpand: self.handleAllExpand.bind(self)
}));
}
});
return viewContent;
}
}
}, {
key: 'createDataModel',
value: function createDataModel(viewModel) {
var dataTable = {};
dataTable['head'] = {};
dataTable['bodys'] = {};
for (var key in viewModel.componentInfo) {
// 如果有主表head则直接复制保存。
if (key === "headform") {
var combos;
(function () {
var head = viewModel.componentInfo[key];
var _loop = function _loop(_key) {
if (head[_key].itemCode) {
if (head[_key].default) {
combos = viewModel.dataSource["combodata_" + _key];
combos.map(function (combo, index) {
if (combo.pk == head[_key].default) {
dataTable['head'][_key] = { pk: combo.pk, name: combo.name, value: combo.pk };
}
if (combo.value == head[_key].default) {
dataTable['head'][_key] = { pk: combo.value, name: combo.name, value: combo.value };
}
});
} else {
dataTable['head'][_key] = { pk: "", name: "", value: "" };
}
}
};
for (var _key in head) {
_loop(_key);
}
})();
}
if (key === "bodyform") {
for (var o in viewModel.componentInfo[key]) {
dataTable['bodys'][o] = [];
}
}
}
this.setState({
dataModel: dataTable
});
this.props.config.dataModel = dataTable;
}
}, {
key: 'updateDataModel',
value: function updateDataModel(data) {
var dataTable = {};
// 如果有主表head则直接复制保存。
if (data.head) {
dataTable['head'] = data.head;
}
if (data.body) {
dataTable['bodys'] = {};
if (data.body.bodys.length > 0) {
data.body.bodys.map(function (row, index) {
if (row && row.pk !== "" && row.pk.subFormId) {
if (!dataTable['bodys'][row.pk.subFormId]) {
dataTable['bodys'][row.pk.subFormId] = [];
dataTable['bodys'][row.pk.subFormId].push(row);
} else {
dataTable['bodys'][row.pk.subFormId].push(row);
}
}
});
}
}
this.setState({
dataModel: dataTable
});
}
}, {
key: 'handleHeadFormData',
value: function handleHeadFormData() {}
}, {
key: 'handleBodyFormData',
value: function handleBodyFormData(newRowData) {
if (newRowData) {
var tempDataModel = this.state.dataModel;
tempDataModel.bodys[newRowData.pk.subFormId].push(newRowData);
this.setState({
dataModel: tempDataModel
});
}
// this.props.onDataModelChange(this.state.dataModel);
}
}, {
key: 'handleHeadFormExpand',
value: function handleHeadFormExpand(expand) {
this.setState({
headFormExpand: expand
});
}
}, {
key: 'handleHeadFormIsEdit',
value: function handleHeadFormIsEdit(isEdit) {
this.setState({
headFormIsEdit: isEdit,
editStatus: isEdit
});
}
}, {
key: 'handleBodyFormIsEdit',
value: function handleBodyFormIsEdit(isEdit) {
this.setState({
editStatus: isEdit
});
}
}, {
key: 'handleAllExpand',
value: function handleAllExpand(expand) {
this.setState({
allExpand: expand
});
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ id: 'uitemplate-main' },
this.createView()
);
}
}]);
return CreateTemplate;
}(_react.Component);
exports.default = CreateTemplate;
module.exports = exports['default'];
});