ming-demo3
Version:
mdf metaui web
583 lines (517 loc) • 21.3 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _env = _interopRequireDefault(require("../../../helpers/env"));
var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));
var _baseui = require("@mdf/baseui");
var _reactRedux = require("react-redux");
var _redux = require("redux");
var _uuid = _interopRequireDefault(require("uuid"));
var portalactions = _interopRequireWildcard(require("../../../redux/portal"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var G6 = process.env.__CLIENT__ && require('@antv/g6');
var dagre = require("dagre");
var ShowFlow = function (_Component) {
(0, _inherits2["default"])(ShowFlow, _Component);
function ShowFlow(props) {
var _this;
(0, _classCallCheck2["default"])(this, ShowFlow);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ShowFlow).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDblClick", function (i) {
var gridModel = _this.props.parentViewModel.getGridModel();
gridModel.execute('dblClick', {});
});
_this.state = {
billNumber: _this.props.data.billNum || "pu_arrivalorder",
billId: _this.props.data.billId || 1220905394262272,
childIds: _this.props.data.childIds || null,
childKey: _this.props.data.childKey || null,
jsonData: {},
viewModel: _this.props.data.parentViewModel,
flowWidth: 1280
};
return _this;
}
(0, _createClass2["default"])(ShowFlow, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
this.setState({
viewModel: nextProps.data.parentViewModel,
flowWidth: nextProps.width
});
if (!nextProps.callback || nextProps.callback === this.props.callback) return;
cb.utils.confirm("\u786E\u5B9A\u8981".concat(nextProps.caption, "\u4E48"), function () {
nextProps.callback();
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var that = this;
var thisdata = {};
thisdata.billNumber = this.state.billNumber;
thisdata.billId = this.state.billId;
if (this.state.childKey !== null) {
thisdata.childIds = this.state.childIds;
thisdata.childKey = this.state.childKey;
}
var proxy = cb.rest.DynamicProxy.create({
map: {
url: 'billrelation/map',
method: 'POST'
}
});
function thisCallBack(err, res) {
if (err) {
console.log(err);
return;
}
console.log(res);
function getMaxFloor(treeData) {
var floor = 0;
var v = this;
var max = 0;
function each(data, floor) {
data.forEach(function (e) {
e.floor = floor;
if (floor > max) {
max = floor;
}
if (e.nodes && e.nodes.length > 0) {
each(e.nodes, floor + 1);
}
});
}
each(treeData, 1);
return max;
}
var resu = getMaxFloor(res.upperNodes);
var downresu = getMaxFloor(res.downNodes);
var currentWidth = window.innerWidth / 2 - 115;
var startX = currentWidth - 280 * resu - 115;
G6.registerEdge('hvh', {
draw: function draw(cfg, group) {
var offset = 0;
var MinOffset = 0;
var startPoint = cfg.startPoint;
var endPoint = cfg.endPoint;
if ((startX + 280 < 0 || startX < 0) && endPoint.x - startPoint.x > 50) {
offset = -230;
} else if ((280 - startX < 115 || startX > 0) && endPoint.x - startPoint.x > 50) {
MinOffset = 230;
}
var shape = group.addShape('path', {
attrs: {
stroke: '#D9D9D9',
path: [['M', startPoint.x + MinOffset, startPoint.y], ['L', (endPoint.x + offset) / 3 + 2 / 3 * (startPoint.x + MinOffset), startPoint.y], ['L', (endPoint.x + offset) / 3 + 2 / 3 * (startPoint.x + MinOffset), endPoint.y], ['L', endPoint.x + offset - 4, endPoint.y]],
endArrow: {
path: [['M', -6, 6], ['L', 6, 0], ['L', -6, -6], ['A', 11, 11, 0, 0, 1, -6, 6], ['Z']],
d: 6
}
}
});
return shape;
}
});
var data = {
nodes: [],
edges: []
};
var thisCount = 0;
if (res) {
data.nodes.push({
label: "".concat(res.billName),
date: "".concat(res.vouchdate.substring(0, 10)),
code: "".concat(res.billCode),
number: "".concat(res.billNumber),
menuCode: "".concat(res.menuCode),
srvUrl: res.isCrossDomain && res.srvUrl,
id: "".concat(thisCount),
billId: "".concat(res.billId),
name: "".concat(res.billName),
type: 'center'
});
if (res.downNodes) {
handleDownNodes(res.downNodes, thisCount);
}
if (res.upperNodes) {
handleUpperNodes(res.upperNodes, 0);
}
}
function handleDownNodes(nodesData, count) {
nodesData.forEach(function (item) {
thisCount += 1;
data.nodes.push({
label: "".concat(item.billName),
date: "".concat(item.vouchdate.substring(0, 10)),
code: "".concat(item.billCode),
number: "".concat(item.billNumber),
menuCode: "".concat(item.menuCode),
srvUrl: item.isCrossDomain && item.srvUrl,
id: "".concat(thisCount),
billId: "".concat(item.billId),
name: "".concat(item.billName)
});
data.edges.push({
source: "".concat(count),
target: "".concat(thisCount),
shape: 'hvh'
});
if (item.nodes) {
handleDownNodes(item.nodes, thisCount);
}
});
}
function handleUpperNodes(nodesData, parent) {
nodesData.forEach(function (item) {
thisCount += 1;
data.nodes.push({
label: "".concat(item.billName),
date: "".concat(item.vouchdate.substring(0, 10)),
code: "".concat(item.billCode),
number: "".concat(item.billNumber),
menuCode: "".concat(item.menuCode),
srvUrl: item.isCrossDomain && item.srvUrl,
id: "".concat(thisCount),
billId: "".concat(item.billId),
name: "".concat(item.billName)
});
data.edges.push({
source: "".concat(thisCount),
target: "".concat(parent),
shape: 'hvh'
});
if (item.nodes) {
handleUpperNodes(item.nodes, thisCount);
}
});
}
var g = new dagre.graphlib.Graph();
g.setDefaultEdgeLabel(function () {
return {};
});
g.setGraph({
rankdir: 'LR'
});
data.nodes.forEach(function (node) {
node.label = "";
g.setNode(node.id, {
width: 230,
height: 90
});
});
data.edges.forEach(function (edge) {
g.setEdge(edge.source, edge.target);
});
dagre.layout(g);
var coord = void 0;
g.nodes().forEach(function (node, i) {
coord = g.node(node);
data.nodes[i].x = coord.x;
data.nodes[i].y = coord.y;
});
g.edges().forEach(function (edge, i) {
coord = g.edge(edge);
data.edges[i].startPoint = coord.points[0];
data.edges[i].endPoint = coord.points[coord.points.length - 1];
data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1);
});
G6.registerNode('vocherrect', {
drawShape: function drawShape(cfg, group) {
var fillColor = '#FD9839';
var strokeColor = '#CDCDCD';
var centerNameColor = null;
var centerCodeColor = null;
var centerDateColor = null;
if (cfg.type == 'center') {
fillColor = '#9ECAFF';
strokeColor = '#9ECAFF';
centerNameColor = '#0072FF';
centerCodeColor = '#0072FF';
centerDateColor = '#5DA0FF';
}
var rect = group.addShape('rect', {
attrs: {
x: startX,
y: -20,
width: 230,
height: 90,
radius: 3,
stroke: strokeColor,
fill: "l (0) 0:".concat(fillColor, " ") + 0.01 + ":".concat(fillColor, " ") + 0.01 + ':#fff',
fillOpacity: 1,
lineWidth: 1
}
});
group.addShape('text', {
attrs: {
x: startX + 16,
y: 10,
fill: centerNameColor || '#333',
text: "".concat(cfg.name),
fontSize: 14,
fontWeight: 510
}
});
group.addShape('text', {
attrs: {
x: startX + 16,
y: 18,
fill: centerCodeColor || '#666666',
text: "".concat(cfg.code),
textBaseline: 'top',
fontSize: 12
}
});
group.addShape('text', {
attrs: {
x: startX + 16,
y: 40,
fill: centerDateColor || '#BAC0C7',
text: "".concat(cfg.date),
textBaseline: 'top',
fontSize: 12
}
});
if (cfg.type == 'center') {
group.addShape('image', {
attrs: {
x: startX + 200.8,
y: -26,
width: 32,
height: 30,
img: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDI0IDEwMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDA3MkZGO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHRpdGxlPuWOn+WNleaNrjwvdGl0bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgo8cGF0aCBpZD0i55+p5b2iIiBjbGFzcz0ic3QwIiBkPSJNOTcsMjE2aDcxMS40YzY1LjUsMCwxMTguNiw1My4xLDExOC42LDExOC42djQ3NC4zbC0zMDMuNCwwYy0xNzMuMiwwLTMyMC44LTEyNS41LTM0OC43LTI5Ni40bDAsMAoJQzI1Mi4zLDM3NC4xLDE5MywyNzUuMyw5NywyMTZ6Ii8+CjxwYXRoIGlkPSLljp8iIGNsYXNzPSJzdDEiIGQ9Ik01NDMsNDEwLjhoNTIuNGMzLjctOS4zLDcuMS0xOC44LDEwLjQtMjguN2gtOTQuOXY3OC43YzAsNDQuOC0yLjYsNzcuOC03LjgsOTkKCWMtNS4yLDIyLjgtMTUuOSw0NS45LTMyLjEsNjkuNWMtNC44LTYuNi0xMC4yLTEzLjItMTYuMi0yMGMxMy4zLTE5LjksMjIuMS0zOS41LDI2LjMtNTguOGM0LjQtMTguMyw2LjctNDYuNSw2LjctODQuNVYzNjFoMjUzdjIxLjEKCUg2MzEuM2MtNC4zLDEwLjQtOC41LDIwLTEyLjYsMjguN2g5OC45djExOC43aC0yMS43di01LjhoLTUzLjZ2NjQuOGMwLDI0LjMtMTEsMzYuNC0zMywzNi4yYy02LjgsMC0xOC45LTAuMi0zNi41LTAuNgoJYy0wLjgtNy4zLTItMTUuNy0zLjgtMjUuMmMxNS4xLDEuOSwyNi45LDIuOSwzNS42LDIuOWM5LjYsMCwxNC41LTUuNiwxNC41LTE2Ljh2LTYxLjRoLTU0LjR2NS44SDU0M1Y0MTAuOHogTTU2NC43LDUwNC4zaDEzMS4xCgl2LTI3LjhINTY0LjdWNTA0LjN6IE02OTUuOSw0MzAuMkg1NjQuN3YyNy41aDEzMS4xVjQzMC4yeiBNNTY3LjksNTM1bDIwLDEzYy0xOC43LDI3LjgtMzguOSw1Mi40LTYwLjUsNzMuOAoJYy01LTQuMi0xMS4zLTktMTguOC0xNC4yQzUyOC4xLDU4OS43LDU0Ny45LDU2NS41LDU2Ny45LDUzNXogTTY4MC44LDUzNS42YzI1LjEsMjMuNyw0Ni41LDQ1LjcsNjQuMyw2Nkw3MjUuNyw2MTkKCWMtMTguNS0yMy41LTM5LjItNDYuNy02MS45LTY5LjVMNjgwLjgsNTM1LjZ6Ii8+Cjwvc3ZnPgo='
}
});
}
return rect;
}
}, 'single-shape');
G6.registerBehavior('center-active', {
getEvents: function getEvents() {
return {
'node:mouseenter': 'onMouseenter',
'node:mouseleave': 'onMouseleave'
};
},
onMouseenter: function onMouseenter(ev) {
if (ev.item.getModel().type == 'center') {
var item = graph.findById('0');
graph.update(item, {
style: {
stroke: '#0072FF',
fill: 'l (0) 0:#0072FF ' + 0.01 + ':#0072FF ' + 0.01 + ':#fff',
cursor: 'pointer'
}
});
} else {
var _item = ev.item;
graph.update(_item, {
style: {
stroke: '#FD9839',
fill: 'l (0) 0:#FD9839 ' + 0.01 + ':#FD9839 ' + 0.01 + ':#fff',
cursor: 'pointer'
}
});
}
},
onMouseleave: function onMouseleave(ev) {
if (ev.item.getModel().type == 'center') {
var item = graph.findById('0');
graph.update(item, {
style: {
stroke: '#9ECAFF',
fill: 'l (0) 0:#9ECAFF ' + 0.01 + ':#9ECAFF ' + 0.01 + ':#fff',
cursor: 'default'
}
});
} else {
var _item2 = ev.item;
graph.update(_item2, {
style: {
stroke: '#CDCDCD',
fill: 'l (0) 0:#FD9839 ' + 0.01 + ':#FD9839 ' + 0.01 + ':#fff',
cursor: 'default'
}
});
}
}
});
var DELTA = 0.05;
G6.registerBehavior('zoom-canvas', {
getDefaultCfg: function getDefaultCfg() {
return {
sensitivity: 0.5,
minZoom: 0.2,
maxZoom: 1
};
},
getEvents: function getEvents() {
return {
wheel: 'onWheel'
};
},
onWheel: function onWheel(e) {
e.preventDefault();
if (!this.shouldUpdate.call(this, e)) {
return;
}
var graph = this.graph;
var canvas = graph.get('canvas');
var point = canvas.getPointByClient(e.clientX, e.clientY);
var pixelRatio = canvas.get('pixelRatio');
var sensitivity = this.get('sensitivity');
var ratio = graph.getZoom();
if (e.wheelDelta < 0) {
ratio = 1 - DELTA * sensitivity;
} else {
ratio = 1 + DELTA * sensitivity;
}
var zoom = ratio * graph.getZoom();
if (zoom < this.get('minZoom') || zoom > this.get('maxZoom')) {
return;
}
graph.zoom(ratio, {
x: point.x / pixelRatio,
y: point.y / pixelRatio
});
graph.paint();
graph.emit('wheelzoom', e);
}
});
var graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight - 65,
pixelRatio: 2,
modes: {
"default": ['drag-canvas', 'center-active', 'zoom-canvas']
},
defaultNode: {
shape: 'vocherrect',
anchorPoints: [[0, 0.5], [1, 0.5]]
},
nodeStyle: {
"default": {},
selected: {
lineWidth: 2,
fillOpacity: 0.8,
stroke: '#000'
},
active: {
lineWidth: 1.5,
stroke: '#505766',
cursor: 'pointer'
}
},
defaultEdge: {
shape: 'hvh'
},
edgeStyle: {
"default": {
endArrow: true,
lineWidth: 2,
stroke: '#ccc'
}
}
});
graph.data(data);
graph.on('node:click', function (i) {
var parent = that.state.viewModel;
var params = {
mode: _env["default"].VOUCHER_STATE_EDIT,
id: i.item._cfg.model.billId,
readOnly: true
};
var dt = {
billtype: 'voucher',
billno: i.item._cfg.model.number,
billid: i.item._cfg.model.billId
};
var tempCustomCode = (0, _uuid["default"])();
if (window.parent !== window && window.jDiwork) {
window.jDiwork.openService(i.item._cfg.model.menuCode, dt, {
code: tempCustomCode
});
} else {
if (i.item._cfg.model.srvUrl) {
cb.utils.getWebUrl(i.item._cfg.model.srvUrl, "/meta/voucher/".concat(dt.billno, "/").concat(dt.billid), function (menuUrl) {
var random = (0, _uuid["default"])();
menuUrl += "&random=".concat(random);
cb.loader.runCommandLine('menu', {
menuId: random,
userClick: true,
viewType: 'external',
menuUrl: menuUrl
}, parent);
});
} else {
dt.params = params;
cb.loader.runCommandLine('bill', dt, parent);
}
}
});
graph.render();
if (startX < -115 || downresu > 1) {
graph.fitView();
if (graph.getZoom() > 1) {
graph.zoomTo(1);
}
}
}
proxy.map(thisdata, thisCallBack);
}
}, {
key: "handleClick",
value: function handleClick(index) {
this.props.delItem(index);
this.state.viewModel.execute('back');
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var index = this.props.index;
return _react["default"].createElement("div", null, _react["default"].createElement("div", {
className: "voucher-back-button-wrapper"
}, _react["default"].createElement(_baseui.Button, {
onClick: function onClick() {
return _this2.handleClick(index);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "rollback"
}), _react["default"].createElement("span", {
className: "voucher-rollback"
}, "\u8FD4\u56DE"))), _react["default"].createElement("div", {
className: "voucher-showflow-content-wrapper"
}, _react["default"].createElement("div", {
id: "mountNode"
})));
}
}]);
return ShowFlow;
}(_react.Component);
var mapStateToProps = function mapStateToProps(state) {
return {
portal: state.portal.toJS()
};
};
function mapDispatchToProps(dispatch) {
return _objectSpread({}, (0, _redux.bindActionCreators)(portalactions, dispatch));
}
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ShowFlow);
exports["default"] = _default;
//# sourceMappingURL=showflow.js.map