enoad-component-web
Version:
针对web端的控件
176 lines • 9.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var styled_1 = require("./styled");
var antd_1 = require("antd");
var zh_CN_1 = (0, tslib_1.__importDefault)(require("antd/lib/locale/zh_CN"));
var icons_1 = require("@ant-design/icons");
var action_1 = require("./action");
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var util_1 = require("../../../core/util");
var components_1 = require("../../../components");
//搜索功能，包含文字搜索和筛选。
var SearchView = function (props) {
var handleSearch = props.handleSearch;
var _a = (0, react_1.useState)(""), searchKey = _a[0], setSearchKey = _a[1]; //输入的搜索名称。
var _b = (0, react_1.useState)([]), entitys = _b[0], setEntitys = _b[1]; //筛选对象，单选状态。
var _c = (0, react_1.useState)("all"), entity = _c[0], setEntity = _c[1]; //选中哪个对象。
(0, react_1.useEffect)(function () {
fetchConfig();
}, []);
var fetchConfig = function () {
(0, action_1.fetchEntityConfig)()
.then(function (res) {
if (res) {
setEntitys(res);
//拿到属性后，优先获取所有实体信息。
var params = {
entity: entity,
searchKey: searchKey,
};
handleSearch(params);
}
})
.catch(function (e) {
console.log("[getAllCount]", e);
});
};
var handleSearchValue = function (e) {
var value = e.target.value;
setSearchKey(value);
var params = {
entity: entity,
searchKey: value,
};
handleSearch(params);
};
var handleChange = function (e) {
var value = e.target.value;
setEntity(value);
var params = {
entity: value,
searchKey: searchKey,
};
handleSearch(params);
};
return (react_1.default.createElement(styled_1.SearchContainer, null,
react_1.default.createElement(styled_1.SearchStyled, null,
react_1.default.createElement(antd_1.Input, { placeholder: "\u641C\u7D22\u5B9E\u4F53", suffix: react_1.default.createElement(icons_1.SearchOutlined, { onClick: handleSearchValue, style: { color: "#3c72ff" } }), allowClear: true, onPressEnter: handleSearchValue, onChange: handleSearchValue })),
react_1.default.createElement(styled_1.SearchLabel, null,
react_1.default.createElement("label", null, "\u5B9E\u4F53\u540D\u79F0:"),
react_1.default.createElement(antd_1.Radio.Group, { options: entitys, value: entity, onChange: handleChange, optionType: "button", size: "small" }))));
};
//卡片展示样式及功能
var ItemCard = function (props) {
var item = props.item, checkList = props.checkList, openBoard = props.openBoard, onPreView = props.onPreView;
var id = item.id, icon = item.icon, label = item.label, name = item.name, createTime = item.createTime, tag = item.tag, declare = item.declare;
//标签和描述任意存在则上移15px。都存在上移30px。都不存在，不用上移。
var top = tag ? (declare ? "-8px" : "-4px") : declare ? "-4px" : "0px";
var _a = (0, react_1.useState)({ id: null }), current = _a[0], setCurrent = _a[1]; //鼠标是否移动到卡片上
return (react_1.default.createElement(styled_1.CardContainer, null,
react_1.default.createElement(styled_1.CardDiv, { onMouseOver: function () {
setCurrent(item);
}, onMouseOut: function () {
setCurrent({ id: null });
} },
react_1.default.createElement(styled_1.EnableStatusUn, null, "\u672A\u542F\u7528"),
react_1.default.createElement(styled_1.CardImg, null,
react_1.default.createElement("img", { style: { width: "100%", height: "100%" }, src: icon }),
react_1.default.createElement(styled_1.Mask, { style: { display: current && current["id"] === id ? "flex" : "none" } },
react_1.default.createElement(styled_1.Masker, { onClick: function () {
openBoard && openBoard(item);
} }, "\u6570\u636E"),
react_1.default.createElement(styled_1.Masker, { onClick: function () {
onPreView && onPreView(item);
} }, "\u9884\u89C8")),
react_1.default.createElement(styled_1.MaskCheck, { style: {
display: current["id"] === id || checkList.length > 0 ? "flex" : "none",
} },
react_1.default.createElement(antd_1.Checkbox, { value: id, key: id }))),
react_1.default.createElement(styled_1.CardInfo, null,
react_1.default.createElement(styled_1.Info, null,
react_1.default.createElement(antd_1.Tag, { color: "#FFADD2" }, label),
react_1.default.createElement(styled_1.Title, { title: name }, name)),
react_1.default.createElement(styled_1.Info, { style: { display: "flex", justifyContent: "space-between" } },
react_1.default.createElement(styled_1.Time, null, (0, moment_1.default)(createTime).format("YYYY-MM-DD")))),
react_1.default.createElement(styled_1.CardWrap, { style: { display: current["id"] === id ? "flex" : "none" } },
react_1.default.createElement(styled_1.LabelItem, null, tag)),
react_1.default.createElement(styled_1.MaterialDesc, { style: { display: current["id"] === id ? "flex" : "none" } },
react_1.default.createElement(styled_1.LabelItem, null, declare)))));
};
// 所有操作都在这个界面中进行处理，可以分模块，然后刷state时进行数据获取。使用一个回调方法即可。
var View = function (props) {
var openBoard = props.openBoard;
var _a = (0, react_1.useState)({}), pagination = _a[0], setPagination = _a[1]; //分页信息
var _b = (0, react_1.useState)([]), dataSource = _b[0], setDataSource = _b[1]; //查找回来的数据
var _c = (0, react_1.useState)([]), checkList = _c[0], setCheckList = _c[1]; //选中的列表
var _d = (0, react_1.useState)({
page: 1,
pageSize: 20,
}), currentPageInfo = _d[0], setCurrentPageInfo = _d[1]; // 展示的数量和页码
var _e = (0, react_1.useState)({
entity: "all",
searchKey: "",
}), currentPageSelect = _e[0], setCurrentPageSelect = _e[1]; // 展示的数量和页码
var _f = (0, react_1.useState)(false), preView = _f[0], setPreView = _f[1]; //选中的列表
var _g = (0, react_1.useState)({}), preViewItem = _g[0], setPreViewItem = _g[1]; //选中的列表
//通过设置的state各个属性，作为参数，获取当前数据信息。
var fetchAllData = function (info) {
var params = (0, tslib_1.__assign)({}, info);
(0, action_1.fetchMainCardsData)(params)
.then(function (res) {
if (res.status == 200) {
if (res.data.code == 200 && res.data.data) {
var data = res.data.data;
setPagination((0, util_1.createPagination)(data, null));
setDataSource(data.list);
}
}
})
.catch(function (e) {
console.log("[getAllCount]", e);
});
};
var handleCheckChange = function (list) {
setCheckList(list);
};
var handlePageChange = function (param) {
setCheckList([]);
var pageInfo = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, currentPageSelect), param);
setCurrentPageInfo(pageInfo);
//开始获取最新筛选的数据信息。
fetchAllData(pageInfo);
};
var handleSearch = function (params) {
params.page = currentPageInfo.page;
params.pageSize = currentPageInfo.pageSize;
setCurrentPageSelect(params);
fetchAllData(params);
};
var onPreView = function (item) {
setPreViewItem(item);
setPreView(true); //打开预览
};
//渲染每个item
var renderCardList = function () {
return dataSource.map(function (i, k) {
return (react_1.default.createElement(ItemCard, { key: k, item: i, openBoard: openBoard, onPreView: onPreView, checkList: checkList }));
});
};
var onSelect = function (selectedKeys, info) {
console.log("[selectedKeys]", selectedKeys);
console.log("[info]", info);
};
return (react_1.default.createElement(styled_1.Container, null,
react_1.default.createElement(SearchView, { handleSearch: handleSearch }),
dataSource.length === 0 ? (react_1.default.createElement(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : (react_1.default.createElement(antd_1.Checkbox.Group, { value: checkList, onChange: handleCheckChange, style: { width: "100%", display: "flex", flexWrap: "wrap" } }, renderCardList())),
react_1.default.createElement("div", { style: { padding: "30px", textAlign: "right" } },
react_1.default.createElement(antd_1.ConfigProvider, { locale: zh_CN_1.default },
react_1.default.createElement(antd_1.Pagination, (0, tslib_1.__assign)({ onChange: function (page, pageSize) {
handlePageChange({ page: page, pageSize: pageSize });
} }, pagination)))),
preView && (react_1.default.createElement(components_1.EnoadPreView, { item: preViewItem, preView: preView, setPreView: setPreView }))));
};
exports.default = View;
//# sourceMappingURL=view.js.map