fastlion-amis
Version:
一种MIS页面生成工具
270 lines (269 loc) • 15.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var antd_1 = require("antd");
var helper_1 = require("../../../utils/helper");
var icons_1 = require("../../../components/icons");
var lodash_1 = require("lodash");
var message_1 = (0, tslib_1.__importDefault)(require("antd/lib/message"));
var FlowFields_1 = (0, tslib_1.__importDefault)(require("./components/FlowFields"));
var ActionSheet_1 = (0, tslib_1.__importDefault)(require("../../../components/Lion/ActionSheet"));
require("./index.scss");
var MobileProcess = function (props) {
var env = props.env, val = props.val, render = props.render, title = props.title, handleStatistics = props.handleStatistics, handleOnChange = props.handleOnChange, onImageEnlarge = props.onImageEnlarge, returnNodeApi = props.returnNodeApi, attachmentApi = props.attachmentApi;
// 每一条数据，上拉拼接
var _a = (0, react_1.useState)(), flowDetail = _a[0], setFlowDetail = _a[1];
// 加载中
var _b = (0, react_1.useState)(true), spinDetail = _b[0], setSpinDetail = _b[1];
// 是否触底
var _c = (0, react_1.useState)(false), throttle = _c[0], setThrottle = _c[1];
// 请求初始
var _d = (0, react_1.useState)(1), pageNo = _d[0], setPageNo = _d[1];
var _e = (0, react_1.useState)(10), pageSize = _e[0], setPageSize = _e[1];
// 触底加载动画开关
var _f = (0, react_1.useState)(false), spinTotal = _f[0], setSpinTotal = _f[1];
// 判断是否还要触底加载
var _g = (0, react_1.useState)(false), total = _g[0], setTotal = _g[1];
// 批量处理开关
var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
// 模板......
var _j = (0, react_1.useState)(false), moreIsOpened = _j[0], setMoreIsOpened = _j[1];
var messages = (0, react_1.useRef)(null);
var dropDown = (0, react_1.useRef)(null);
// 批量操作数据
var _k = (0, react_1.useState)([]), batch = _k[0], setBatch = _k[1];
// 搜索框
var inputRef = (0, react_1.useRef)(null);
var timeout = null; //懒加载
var touch = pageNo;
var transitionHeight = 0; // 移动的距离
var startPos = 0; // 初始的值
// 触发申请
(0, react_1.useEffect)(function () {
handleChange();
}, []);
// 监听是否触底加载
(0, react_1.useEffect)(function () {
if (throttle) {
handleChange();
}
}, [pageNo]);
// 监听滚动，监听上拉加载，下拉刷新
(0, react_1.useEffect)(function () {
scrollTopBottom();
}, []);
var scrollTopBottom = function () {
if (messages.current) {
messages.current.parentElement.onscroll = function () { handleScroll(); };
// 下拉刷新
messages.current.parentElement.addEventListener('touchstart', handletouchstart);
messages.current.parentElement.addEventListener('touchmove', handletouchmove);
}
};
var handleChange = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var data, res;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
data = { page: pageNo, perPage: pageSize };
return [4 /*yield*/, env.fetcher(val.api, data)];
case 1:
res = _a.sent();
if (res.status === 0) {
// 判断是否有值拼接
!flowDetail ? setFlowDetail(res.data.items) :
// 判断pageNo为1时重新熏染
pageNo == 1 ? setFlowDetail(res.data.items) :
setFlowDetail((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], flowDetail, true), res.data.items, true));
setSpinDetail(false);
handleStatistics === null || handleStatistics === void 0 ? void 0 : handleStatistics(res.data.total);
// 判断传输过来的数据是否大于总数居
if (res.data.total > pageNo * pageSize) {
// 最底层的加载动画
setSpinTotal(true);
setTotal(false);
if (messages.current) {
messages.current.parentElement.onscroll = function () { handleScroll(); };
}
}
else {
setSpinTotal(false);
if (messages.current) {
messages.current.parentElement.onscroll = function () { };
setTotal(true);
}
}
if (pageNo === 1) {
if (dropDown.current && messages.current) {
dropDown.current.innerText = "更新完成";
dropDown.current.style.transition = 'all 0.5s ease 1s';
dropDown.current.style.height = '0px';
messages.current.parentElement.ontouchend = function () { };
}
}
}
else {
message_1.default.error(res.msg);
}
return [2 /*return*/];
}
});
}); };
var handletouchstart = function (e) {
startPos = e.touches[0].pageY;
if (dropDown.current) {
dropDown.current.style.transition = 'transform 0s';
}
};
var handletouchmove = function (e) {
var _a, _b;
if (((_b = (_a = messages.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollTop) !== 0)
return;
transitionHeight = e.touches[0].pageY - startPos;
if (transitionHeight > 0 && transitionHeight < 60) {
messages.current.parentElement.ontouchend = function (e) { handletouchend(e); };
if (dropDown.current && messages.current) {
dropDown.current.innerText = '下拉刷新';
dropDown.current.style.height = transitionHeight + 'px';
if (transitionHeight > 55) {
dropDown.current.innerText = '释放更新';
}
}
}
};
var handletouchend = function (e) {
if (dropDown.current && messages.current) {
if (transitionHeight > 55) {
dropDown.current.innerText = "更新中";
refresh();
}
else {
dropDown.current.style.transition = 'all 0.5s ease 1s';
dropDown.current.style.height = '0px';
dropDown.current.style.overflow = 'hidden';
}
}
};
var handleScroll = function () {
var _a, _b;
if (!messages.current)
return;
var domcurrent = messages.current;
// 内容高度
var domcurrentHeight = domcurrent.offsetHeight;
// 容器滚动
var scrolltop = (_a = domcurrent === null || domcurrent === void 0 ? void 0 : domcurrent.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop;
// 容器高度
var scrollHeight = (_b = domcurrent === null || domcurrent === void 0 ? void 0 : domcurrent.parentElement) === null || _b === void 0 ? void 0 : _b.offsetHeight;
if (scrollHeight && scrolltop && (scrollHeight + scrolltop > domcurrentHeight - 50)) {
setThrottle(true);
if (timeout) {
clearTimeout(timeout);
run();
}
else
run();
}
};
var run = function () {
timeout = setTimeout(function () {
//上拉刷新的值
++touch;
setPageNo(touch);
}, 1000);
};
// 刷新
var refresh = function () {
setSpinDetail(true);
if (touch == 1)
handleChange();
touch = 1;
setPageNo(1);
setPageSize(10);
};
// 防抖
var handleSearch = (0, lodash_1.debounce)(function (value) {
getContactsSeek(value);
}, 1000);
var getContactsSeek = function (val, env) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
return [2 /*return*/];
});
}); };
var handleBatch = function (val, checked) {
if (checked) {
setBatch((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], batch, true), [val], false));
}
else {
setBatch(batch.filter(function (item) { return item !== val; }));
}
};
var handleDetail = function (value) {
setSpinDetail(value);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
!(0, helper_1.isMobile)() && react_1.default.createElement("div", { className: 'contacts-title-input', style: { textAlign: 'center', backgroundColor: "#fff" } },
react_1.default.createElement(antd_1.Input, { style: { maxWidth: "450px" }, ref: inputRef, placeholder: '\u641C\u7D22\u4EBA\u540D\u3001\u6807\u9898\u3001\u5185\u5BB9', onChange: function (e) { return handleSearch(e.target.value); } }),
react_1.default.createElement("span", { title: '\u5237\u65B0', className: 'contacts-title-button' },
react_1.default.createElement(antd_1.Button, { onClick: refresh },
react_1.default.createElement("i", { className: "antd-Button-icon fa fa-sync" })))),
react_1.default.createElement("div", { className: 'dressing_by_screening ' },
react_1.default.createElement("div", { className: 'dressing_type' },
react_1.default.createElement(ActionSheet_1.default, { isOpened: moreIsOpened, container: env.getModalContainer, round: true, className: 'aaa', onHide: function (e) {
e.stopPropagation();
setMoreIsOpened(false);
} },
react_1.default.createElement("div", { className: 'dressing_type_icon' },
react_1.default.createElement("div", { key: 1, onClick: function () {
// setMoreIsOpened(true)
} },
react_1.default.createElement("span", null, "\u6A21\u677F\u7C7B\u578B"),
react_1.default.createElement("span", { className: 'dressing_icon' },
react_1.default.createElement(icons_1.Icon, { icon: "downArrow", className: 'icon' }))),
react_1.default.createElement("div", { key: 2, onClick: function () {
// setMoreIsOpened(true)
} },
react_1.default.createElement("span", null, "\u7533\u8BF7\u4EBA"),
react_1.default.createElement("span", { className: 'dressing_icon' },
react_1.default.createElement(icons_1.Icon, { icon: "downArrow", className: 'icon' }))),
react_1.default.createElement("div", { key: 3, onClick: function () {
// setMoreIsOpened(true)
} },
react_1.default.createElement("span", null, "\u63D0\u4EA4\u65F6\u95F4"),
react_1.default.createElement("span", { className: 'dressing_icon' },
react_1.default.createElement(icons_1.Icon, { icon: "downArrow", className: 'icon' })))))),
react_1.default.createElement("div", { className: "dressing_batch " + (open ? "dressing_highlight" : ""), onClick: function () { title == 'todoItem' && setOpen(!open), setBatch([]); } },
react_1.default.createElement("span", { className: 'dressing_icon' },
react_1.default.createElement(icons_1.Icon, { icon: "handle", className: 'icon' })),
react_1.default.createElement("span", { className: '' }, open ? "取消操作" : '批量处理'))),
react_1.default.createElement("div", { ref: dropDown, className: 'dropDown' }),
react_1.default.createElement("div", { ref: messages },
react_1.default.createElement(antd_1.Spin, { tip: "Loading...", spinning: spinDetail, className: "spinning_loading" },
flowDetail && flowDetail.map(function (item) {
return react_1.default.createElement(FlowFields_1.default, { currentProcess: item, env: env, val: val, key: item.processInstanceId + (item.taskCreatedTime || item.startTime), render: render, onChange: handleChange, title: title, refresh: refresh, isPick: open, batch: batch, handleBatch: handleBatch, handleDetail: handleDetail, handleOnChange: handleOnChange, onImageEnlarge: onImageEnlarge, returnNodeApi: returnNodeApi, attachmentApi: attachmentApi });
}),
(flowDetail && !(flowDetail.length > 0) &&
react_1.default.createElement(antd_1.Empty, { className: 'Empty', description: react_1.default.createElement("span", null, "\u6682\u65E0\u5F85\u5BA1\u6279") }))
||
(flowDetail == null &&
react_1.default.createElement(antd_1.Empty, { className: 'Empty', description: react_1.default.createElement("span", null, "\u6682\u65E0\u5F85\u5BA1\u6279") })))),
flowDetail && flowDetail.length > 0 &&
(!total ?
// <Spin tip="Loading..." spinning={spinTotal} style={{ width: '100%' }}></Spin>
react_1.default.createElement("div", { style: { textAlign: 'center' } },
" ",
react_1.default.createElement(antd_1.Button, { onClick: function () { run(), setThrottle(true); } }, "\u70B9\u51FB\u52A0\u8F7D\u66F4\u591A"))
:
react_1.default.createElement("div", { style: { textAlign: 'center' } },
react_1.default.createElement("span", null, "\u6CA1\u6709\u66F4\u591A\u4E86"))),
open && react_1.default.createElement("div", { className: 'affirm' },
react_1.default.createElement("div", { className: 'affirm-dev', onClick: function () { } }, batch.length > 0 ?
react_1.default.createElement("div", { className: 'batch_highlight' },
"\u5168\u90E8\u540C\u610F(",
batch.length,
")") :
react_1.default.createElement("div", { className: 'batch_unchecked' }, "\u540C\u610F(0)")))));
};
exports.default = MobileProcess;
//# sourceMappingURL=./renderers/Lion/Mobileprocess/index.js.map