yyuap-template
Version:
template project which is based on tinper
682 lines (642 loc) • 34.4 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['module', 'exports', 'react', '../BaseFormItem/BaseFormItem', 'yyuap-ref', '../../../api'], factory);
} else if (typeof exports !== "undefined") {
factory(module, exports, require('react'), require('../BaseFormItem/BaseFormItem'), require('yyuap-ref'), require('../../../api'));
} else {
var mod = {
exports: {}
};
factory(mod, mod.exports, global.react, global.BaseFormItem, global.yyuapRef, global.api);
global.Reference = mod.exports;
}
})(this, function (module, exports, _react, _BaseFormItem, _yyuapRef, _api) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react2 = _interopRequireDefault(_react);
var _BaseFormItem2 = _interopRequireDefault(_BaseFormItem);
var _yyuapRef2 = _interopRequireDefault(_yyuapRef);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
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 _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;
};
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;
}
/*
{
"componentKey": "Reference",
"title": "证件类型",
"titleLayout": "field-hoz",
"itemListener": "",
"refParam": "",
"order": 1,
"index": 0,
"describe": "",
"required": false,
"fieldId": "20180329203401BVz6poJUiW",
"size": "large",
"isMutiSelect": false,
"borderColor": "",
"contMeta": {
"pk_ref": "SOCIAL00004",
"refname": "社会级证件类型",
"refcode": "socialcerttype_ref",
"refurl": "http:\/\/workbench.yyuap.com\/staff\/ref\/certtypes\/",
"md_entitypk": "29f6cc49-1715-46d8-af7a-65dbea1a2b76",
"productType": "ref"
},
"islist": true,
"pkMd": "",
"isDiwork": false,
"readOnly": false,
"leafSelect": false,
"isMainList": false,
"metaIndex": "mdm_certificatetypetb:info",
"codeInfo": "staff<ss_staff:info>.cert_type<mdm_certificatetypetb:info>",
"isDisplay": true,
"isLabelDisplay": true,
"isNeedSerialize": true,
"itemId": "cad08cb3-152b-4083-bf1d-3b37c295dd0e",
"itemKey": "29f6cc49-1715-46d8-af7a-65dbea1a2b76",
"itemCode": "staff.cert_type",
"entityId": "29f6cc49-1715-46d8-af7a-65dbea1a2b76"
}
*/
var enumRef = {
RefTree: 1,
CommonRef: 4,
RefGridTree: 3,
RefGrid: 2
};
var Reference = function (_Component) {
_inherits(Reference, _Component);
function Reference(props) {
_classCallCheck(this, Reference);
var _this = _possibleConstructorReturn(this, (Reference.__proto__ || Object.getPrototypeOf(Reference)).call(this, props));
_this.setCheckedArray = function () {
var pk = _this.props.dataModel[_this.props.viewModel.fieldId] && _this.props.dataModel[_this.props.viewModel.fieldId].pk && _this.props.dataModel[_this.props.viewModel.fieldId].pk.split(',');
var name = _this.props.dataModel[_this.props.viewModel.fieldId] && _this.props.dataModel[_this.props.viewModel.fieldId].name && _this.props.dataModel[_this.props.viewModel.fieldId].name.split(',');
var checkedArray = [];
if (pk && pk.length > 0) {
for (var i = 0; i < pk.length; i++) {
if (pk[i] !== "") {
checkedArray.push({ refpk: pk[i], refname: name[i], value: name[i] });
}
}
}
return checkedArray;
};
_this.onTextValueChange = function (value, fieldId) {
if (value.value && value.value.trim() == "") {
value.value = "";
}
var obj = {};
obj[_this.props.viewModel.itemCode] = value.value;
_this.props.form.setFieldsValue(obj);
_this.props.handleValue({ value: value, fieldId: fieldId });
_this.hideFilterRef();
};
_this.onTextValueChangeByRef = function (values, fieldId) {
var self = _this;
if (!_this.props.viewModel.isMutiSelect) {
var value = { pk: values[0] && values[0].refpk ? values[0].refpk : "",
name: values[0] && values[0].refname ? values[0].refname : "",
value: values[0] && values[0].refname ? values[0].refname : "" };
var param = {};
param[_this.props.viewModel.itemCode] = value;
var obj = {};
if (values[0] && values[0].refname) {
obj[_this.props.viewModel.itemCode] = values[0].refname;
} else {
obj[_this.props.viewModel.itemCode] = "";
}
if (_this.props.viewModel.itemCode === 'staff.mainjobinfo.org_id') {
obj['staff.mainjobinfo.dept_id'] = '';
}
if (_this.props.viewModel.itemCode === 'staff.ptjobinfo.org_id') {
obj['staff.ptjobinfo.dept_id'] = '';
}
_this.props.form.setFieldsValue(obj);
_this.props.handleValue({ value: value, fieldId: fieldId });
} else {
var refpk = values.map(function (ref, index) {
return ref.refpk;
});
var refname = values.map(function (ref, index) {
return ref.refname;
});
var obj = {};
obj[_this.props.viewModel.itemCode] = refname.join(',');
_this.props.form.setFieldsValue(obj);
_this.props.handleValue({ value: { pk: refpk.join(','), name: refname.join(','), value: refname.join(',') }, fieldId: fieldId });
}
};
_this.onMouseEnter = function (index) {
_this.setState({
currentIndex: index
});
};
_this.onMouseLeave = function () {
_this.setState({
currentIndex: -1
});
};
_this.hideFilterRef = function (e) {
_this.setState({
isShowRefFilter: false
});
};
_this.checkValidValue = function (rule, value, callback) {
var clientParam = {};
try {
var refParam = {};
if (_typeof(_this.props.viewModel.refParam) === 'object') {
refParam = _this.props.viewModel.refParam;
} else if (typeof _this.props.viewModel.refParam === 'string') {
refParam = JSON.parse(_this.props.viewModel.refParam || '{}');
}
for (var o in refParam) {
if (o !== "") {
clientParam[o] = refParam[o];
}
}
} catch (e) {
console.log(e);
}
var _this$props$viewModel = _this.props.viewModel,
mul_language = _this$props$viewModel.mul_language,
required = _this$props$viewModel.required,
title = _this$props$viewModel.title;
if (!value && !required) {
callback();
return;
}
// 必填的参照处理
if ((!value || value && value.trim() == "") && required) {
callback((mul_language && mul_language[uiTemplateMultilingual.uiTemplateLanguage] && mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "" ? mul_language[uiTemplateMultilingual.uiTemplateLanguage] : title) + ' ' + uiTemplateMultilingual.template('canNotBeEmpty'));
return;
}
// 如果值未填或为空不做参照值非法校验
if (_this.state.isEnd || value && value.trim() == "") {
callback();
return;
}
var self = _this;
(0, _api.getRefFilterJson)(value, _this.props.viewModel.contMeta.refcode, _this.props.viewModel.contMeta.refurl, _this.props.viewModel.contMeta.refname, clientParam).then(function (json) {
if (json === undefined) {
console.log("网络错误");
return;
}
if (json.data.length > 1 || json.data.length == 0) {
if (_this.state.isEnd) {
callback();
return;
}
//需要清空数据
self.onTextValueChange({ value: '', pk: '', name: '' }, self.props.viewModel.fieldId);
} else if (json.data.length == 1) {
//需要将nanme放到表单里
// self.onTextValueChange({pk:json.data[0].refpk,value:json.data[0].refname,name:json.data[0].refname},//self.props.viewModel.fieldId)
}
callback();
});
};
_this.state = {
isEnd: true, //the reference's end status, the reference has 2 status, end or not end
filterJson: [],
checkedArray: _this.setCheckedArray(),
isShowRefFilter: false,
currentIndex: -1
};
return _this;
}
_createClass(Reference, [{
key: 'doFilterJson',
value: function doFilterJson(content) {
var _this2 = this;
var clientParam = {};
try {
var refParam = {};
if (_typeof(this.props.viewModel.refParam) === 'object') {
refParam = this.props.viewModel.refParam;
} else if (typeof this.props.viewModel.refParam === 'string') {
refParam = JSON.parse(this.props.viewModel.refParam || '{}');
}
for (var o in refParam) {
if (o !== "") {
if (o != "treeloadData") {
clientParam[o] = refParam[o];
}
}
}
} catch (e) {
console.log(e);
}
try {
var thirdParam = this.props.config.thirdParams && this.props.config.thirdParams[this.props.viewModel.itemCode] ? this.props.config.thirdParams[this.props.viewModel.itemCode] : {};
if ((typeof thirdParam === 'undefined' ? 'undefined' : _typeof(thirdParam)) === "object" && thirdParam !== null) {
for (var o in thirdParam) {
if (o !== "") {
clientParam[o] = thirdParam[o];
}
}
}
} catch (e) {
console.log(e);
}
(0, _api.getRefFilterJson)(content, this.props.viewModel.contMeta.refcode, this.props.viewModel.contMeta.refurl, this.props.viewModel.contMeta.refname, clientParam).then(function (json) {
if (json === undefined) {
console.log("网络错误");
return;
}
_this2.setState({
filterJson: json.data,
isShowRefFilter: true
});
});
}
}, {
key: 'showFilterRef',
value: function showFilterRef() {
var _this3 = this;
var lis = [];
if (this.state.filterJson.length > 0) {
this.state.filterJson.map(function (data, index) {
if (index < 5) {
lis.push(_react2.default.createElement(
'li',
{
key: index,
className: '' + (index === _this3.state.currentIndex ? 'active-item' : ''),
onMouseEnter: function onMouseEnter() {
_this3.onMouseEnter(index);
},
onMouseLeave: function onMouseLeave() {
_this3.onMouseLeave();
},
onClick: function onClick() {
_this3.setState({
// checkedArray:[{refname:1}]
isEnd: true,
checkedArray: [_this3.state.filterJson[index]]
});
_this3.onTextValueChange({ pk: _this3.state.filterJson[index].refpk, name: _this3.state.filterJson[index].refname, value: _this3.state.filterJson[index].refname }, _this3.props.viewModel.fieldId);
}
},
data.refname
));
}
});
} else {
lis.push(_react2.default.createElement(
'li',
{
key: 0
// onMouseEnter = {() => {this.onMouseEnter(index)}}
// onMouseLeave = {() => {this.onMouseLeave()}}
},
'\u6CA1\u6709\u5339\u914D\u6570\u636E'
));
}
return lis;
}
}, {
key: 'returnVal',
value: function returnVal() {
return this.state.checkedArray[0] && this.state.checkedArray[0].refname || "";
}
}, {
key: 'getMultiRef',
value: function getMultiRef() {
var self = this;
var refs = [];
var selects = self.state.checkedArray.map(function (select, index) {
return { pk: select.refpk, name: select.refname, value: select.refname };
});
selects.forEach(function (item, index) {
refs.push(_react2.default.createElement(
'div',
{ key: index, className: 'ref-multi' },
item.name,
_react2.default.createElement('i', { className: 'cl cl-close-c-o', onClick: function onClick() {
self.removeRef(index);
} })
));
});
return refs;
}
}, {
key: 'removeRef',
value: function removeRef(index) {
var newArray = this.state.checkedArray;
newArray.splice(index, 1);
this.setState({
checkedArray: newArray
});
var refpk = newArray.map(function (ref, index) {
return ref.refpk;
});
var refname = newArray.map(function (ref, index) {
return ref.refname;
});
var value = { pk: refpk.join(','), name: refname.join(','), value: refname.join(',') };
this.props.handleValue({ value: value, fieldId: this.props.viewModel.fieldId });
}
}, {
key: 'searchRef',
value: function searchRef() {
var self = this;
var conifgUrl = self.props.config.url || 'http://workbench.yyuap.com';
var option = {
title: '弹窗标题',
refType: 2,
isRadio: !this.props.viewModel.isMutiSelect,
hasPage: false,
backdrop: false,
treeloadData: false,
// tabData:[// option中可增加defaultActiveKey作为默认tab标签
// {"title":"常用","key":"commonUse"},
// {"title":"全部","key":"total"},
// {"title":"推荐","key":"recommed"}
// ],
param: { //url请求参数
refCode: 'currency_ref',
refname: "租户级币种",
tenantId: 'xxx',
locale: uiTemplateMultilingual.uiTemplateLanguage,
sysId: 'xxx',
clientParam: {},
// clientParam:{"bank":"04b84c86-cd96-49e9-8c94-32d14b2d"},
refModelUrl: conifgUrl + "/staff/ref/socialcurrency/"
// refCode:'tenants_ref',//test_common||test_grid||test_tree||test_treeTable
// condition:'%7b"resCode"%3a"'+encodeURI("hr_cloud")+'"%7d'
},
refModelUrl: {
TreeUrl: conifgUrl + '/ref/diwork/iref_ctr/blobRefTree', //树请求
GridUrl: conifgUrl + '/ref/diwork/iref_ctr/commonRefsearch', //单选多选请求
TableBodyUrl: conifgUrl + '/ref/diwork/iref_ctr/blobRefTreeGrid', //表体请求
TableBarUrl: conifgUrl + '/ref/diwork/iref_ctr/refInfo', //表头请求
totalDataUrl: conifgUrl + '/ref/diwork/iref_ctr/matchPKRefJSON' //根据refcode请求完整数据
},
checkedArray: this.state.checkedArray,
onCancel: function onCancel(p) {
console.log(p);
},
onSave: function onSave(selects) {
// var checkedArray = selects.map((ref,index) => {
// return {pk:ref.refpk,name:ref.refname,value:ref.refname}
// });
// checkedArray = checkedArray.concat(self.state.checkedArray);
self.setState({
isEnd: true,
checkedArray: selects
});
self.onTextValueChangeByRef(selects, self.props.viewModel.fieldId);
},
className: ''
};
(0, _api.getRefInfo)(this.props.viewModel.contMeta.refcode).then(function (json) {
if (json && json.refUIType) {
option.refType = enumRef[json.refUIType];
}
if (self.props.viewModel.mul_language && self.props.viewModel.mul_language[uiTemplateMultilingual.uiTemplateLanguage] && self.props.viewModel.mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "") {
option.title = self.props.viewModel.mul_language[uiTemplateMultilingual.uiTemplateLanguage];
} else {
option.title = self.props.viewModel.title;
}
option.param.refCode = self.props.viewModel.contMeta.refcode;
option.param.refname = json.refName;
option.param.refModelUrl = json.refModelUrl;
if (self.props.viewModel.contMeta.clientParam) {
option.param.clientParam = self.props.viewModel.contMeta.clientParam;
}
// try {
// var refParam = JSON.parse(self.props.viewModel.refParam || '{}');
// if (typeof refParam === "object" && refParam !== null) {
// for (var o in refParam) {
// if(o !== ""){
// option.param.clientParam[o] = refParam[o]
// }
// }
// }
// } catch (e){
// console.log(e)
// }
try {
var refParam = {};
if (_typeof(self.props.viewModel.refParam) === 'object') {
refParam = self.props.viewModel.refParam;
} else if (typeof self.props.viewModel.refParam === 'string') {
refParam = JSON.parse(self.props.viewModel.refParam || '{}');
}
for (var o in refParam) {
if (o !== "") {
if (o == "treeloadData") {
option["treeloadData"] = refParam[o];
} else {
option.param.clientParam[o] = refParam[o];
}
}
}
} catch (e) {
console.log(e);
}
// json返回的treeloadData优先级高于用户模版设计态自定义设置的refparam
if (json && json.treeloadData) {
option["treeloadData"] = json.treeloadData;
}
try {
var thirdParam = self.props.config.thirdParams[self.props.viewModel.itemCode];
if ((typeof thirdParam === 'undefined' ? 'undefined' : _typeof(thirdParam)) === "object" && thirdParam !== null) {
for (var o in thirdParam) {
if (o !== "") {
option.param.clientParam[o] = thirdParam[o];
}
}
}
} catch (e) {
console.log(e);
}
setTimeout(function () {
(0, _yyuapRef2.default)(option);
}, 100);
});
}
}, {
key: 'render',
value: function render() {
var _this4 = this;
var _props$viewModel = this.props.viewModel,
componentKey = _props$viewModel.componentKey,
fieldId = _props$viewModel.fieldId,
titleLayout = _props$viewModel.titleLayout,
size = _props$viewModel.size,
length = _props$viewModel.length,
isbusinessObj = _props$viewModel.isbusinessObj,
borderColor = _props$viewModel.borderColor,
required = _props$viewModel.required,
describe = _props$viewModel.describe,
title = _props$viewModel.title,
mul_language = _props$viewModel.mul_language,
itemCode = _props$viewModel.itemCode,
isDisplay = _props$viewModel.isDisplay,
readOnly = _props$viewModel.readOnly,
isMutiSelect = _props$viewModel.isMutiSelect,
useMutiSelectStyle = _props$viewModel.useMutiSelectStyle;
var isEdit = this.props.isEdit;
var _props$form = this.props.form,
getFieldProps = _props$form.getFieldProps,
getFieldError = _props$form.getFieldError,
setFieldsValue = _props$form.setFieldsValue;
var self = this;
return _react2.default.createElement(
_BaseFormItem2.default,
null,
_react2.default.createElement(
'div',
{ style: { display: isDisplay ? "block" : "none", position: "relative" } },
_react2.default.createElement(
'div',
{ htmlFor: fieldId, style: { lineHeight: "36px" }, className: 'form-item-label ' + (titleLayout === 'field-hoz' ? 'item-horizontal' : 'item-vertical') },
required && isEdit ? _react2.default.createElement(
'span',
{ className: 'uit-mast' },
'* '
) : null,
_react2.default.createElement(
'span',
{ title: mul_language && mul_language[uiTemplateMultilingual.uiTemplateLanguage] && mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "" ? mul_language[uiTemplateMultilingual.uiTemplateLanguage] : title },
mul_language && mul_language[uiTemplateMultilingual.uiTemplateLanguage] && mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "" ? mul_language[uiTemplateMultilingual.uiTemplateLanguage] : title
),
_react2.default.createElement(
'span',
null,
':'
)
),
isEdit && !readOnly ? isMutiSelect && useMutiSelectStyle ? _react2.default.createElement(
'div',
_extends({ id: "edit_" + fieldId, className: (titleLayout === 'field-hoz' ? 'item-horizontal' : 'item-vertical') + ' form-item-edit', style: _extends({}, titleLayout != 'field-hoz' ? '' : '', { border: "1px solid #CCCCCC" })
}, getFieldProps(itemCode, {
initialValue: this.props.dataModel[this.props.viewModel.fieldId] && this.props.dataModel[this.props.viewModel.fieldId].value,
onChange: function onChange(e) {
_this4.doFilterJson(e.target.value);
},
rules: [{ required: required, message: mul_language && mul_language[uiTemplateMultilingual.uiTemplateLanguage] && mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "" ? mul_language[uiTemplateMultilingual.uiTemplateLanguage] : title + uiTemplateMultilingual.template('canNotBeEmpty') }]
})),
this.getMultiRef(),
_react2.default.createElement('i', { className: 'cl cl-add-c-o', style: { color: "#008BFA", paddingLeft: "10px" }, onClick: function onClick(event) {
event.preventDefault();_this4.searchRef();
} })
) : _react2.default.createElement(
'div',
{ id: "edit_" + fieldId, className: (titleLayout === 'field-hoz' ? 'item-horizontal' : 'item-vertical') + ' form-item-edit', style: _extends({}, titleLayout != 'field-hoz' ? '' : '') },
_react2.default.createElement(
'div',
{ className: size == 'large' ? " fr" : '' + "large" },
_react2.default.createElement('input', _extends({
className: 'uit-form-control',
style: { borderColor: borderColor, paddingRight: "20px" }
}, getFieldProps(itemCode, {
initialValue: this.props.dataModel[this.props.viewModel.fieldId] && this.props.dataModel[this.props.viewModel.fieldId].value,
onChange: function onChange(e) {
_this4.setState({ isEnd: false });_this4.doFilterJson(e.target.value);_this4.onTextValueChange({ value: e.target.value }, fieldId);
},
validateTrigger: 'onBlur',
rules: [{
required: required,
message: (mul_language && mul_language[uiTemplateMultilingual.uiTemplateLanguage] && mul_language[uiTemplateMultilingual.uiTemplateLanguage] !== "" ? mul_language[uiTemplateMultilingual.uiTemplateLanguage] : title) + ' ' + uiTemplateMultilingual.template('canNotBeEmpty'),
validator: this.checkValidValue.bind(this)
}]
}))),
_react2.default.createElement('span', { onClick: function onClick(event) {
event.preventDefault();_this4.searchRef();
}, className: 'cl cl-menu', style: { position: "absolute", right: "0px", top: "0px", width: "20px", height: "32px", lineHeight: "35px", display: "inline-block" } }),
_react2.default.createElement('div', { onClick: this.hideFilterRef, style: { zIndex: 1000, position: "fixed", top: 0, left: 0, width: "100%", height: "100%", display: this.state.isShowRefFilter ? "block" : "none" } }),
_react2.default.createElement(
'div',
{ className: 'ref_ac_results', style: { position: "absolute", width: "100%", display: this.state.isShowRefFilter ? "block" : "none" } },
_react2.default.createElement(
'ul',
null,
this.showFilterRef()
)
)
),
_react2.default.createElement(
'span',
{ className: 'uit-form-item-error' },
getFieldError(itemCode)
)
) : _react2.default.createElement(
'div',
{ id: "view_" + fieldId, className: (size === 'large' ? ' fr ' + size : size) + ' ' + (titleLayout === 'field-hoz' ? 'item-horizontal' : 'item-vertical') + ' form-item-view', style: { lineHeight: "36px" } },
this.props.dataModel[this.props.viewModel.fieldId] && this.props.dataModel[this.props.viewModel.fieldId].value
)
)
);
}
}]);
return Reference;
}(_react.Component);
exports.default = Reference;
module.exports = exports['default'];
});