zmdms-webui 3.1.8 → 3.2.0

package/dist/es/dynamicsetting/useTemplate.js

@@ -0,0 +1,428 @@
+import { __awaiter, __generator, __assign } from '../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useImperativeHandle, useRef, useEffect } from 'react';
+import '../config/ZtxkContext.js';
+import useBaseContext from '../config/useBaseContext.js';
+import MyStorage from '../config/MyStorage.js';
+import classNames from '../node_modules/classnames/index.js';
+import Input from '../input/input.js';
+import ModalComponent from '../modal/modal.js';
+import ButtonCom from '../button/button.js';
+import myMessage from '../message/index.js';
+import { Popconfirm } from 'antd';
+
+/** 模板设置库的名称 */
+var TemplateDatasetName = "ztxk-webui-template-setting";
+/**
+ * @description 从数据库结果中获取数据列表
+ * @param res 存储结果
+ * @returns 数据列表
+ */
+var getDataByTemplate = function (res) {
+    var list = (res === null || res === void 0 ? void 0 : res.list) || [];
+    if (!Array.isArray(list)) {
+        list = [];
+    }
+    return list;
+};
+/**
+ * @description 生成唯一的模板 key
+ * @returns 唯一的 key 值
+ */
+var generateUniqueKey = function () {
+    return "".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 11));
+};
+/**
+ * @description 模板设置的hooks
+ * @param templateKey 模板key, 用于存储模板配置的唯一标识
+ * @param options 模板选项
+ */
+function useTemplate(templateKey, options) {
+    var _this = this;
+    var _a = options || {}, isTemplateSetting = _a.isTemplateSetting, storeName = _a.storeName, currentTemplateData = _a.currentTemplateData, onChange = _a.onChange;
+    var customConfigFetch = useBaseContext().customConfigFetch;
+    // 模板弹框的Ref对象
+    var templateModalRef = useRef(null);
+    // 模板数据存储实例
+    var storageRef = useRef(new MyStorage({ name: TemplateDatasetName, storeName: storeName }));
+    // 模板列表
+    var _b = useState([]), templateList = _b[0], setTemplateList = _b[1];
+    // 当前选中的模板key值
+    var _c = useState(""), currentTemplateKey = _c[0], setCurrentTemplateKey = _c[1];
+    // 初始化设置数据
+    useEffect(function () {
+        if (!isTemplateSetting) {
+            return;
+        }
+        // 防止内存泄漏，组件卸载后不再更新状态
+        var isMounted = true;
+        // 初始化设置数据
+        storageRef.current.getItem(templateKey).then(function (res) {
+            var _a;
+            if (!isMounted)
+                return;
+            if ((res === null || res === void 0 ? void 0 : res.list) && res.list.length > 0) {
+                setTemplateList(res.list);
+                setCurrentTemplateKey(res.currentKey || ((_a = res.list[0]) === null || _a === void 0 ? void 0 : _a.key) || "");
+            }
+            else {
+                setTemplateList([]);
+            }
+        });
+        return function () {
+            isMounted = false;
+        };
+    }, [isTemplateSetting, templateKey]);
+    /**
+     * @description 统一获取模板数据的方法
+     * @param key 存储的 key
+     * @returns 包含 list 和 currentKey 的数据对象
+     */
+    var getTemplateData = function (key) { return __awaiter(_this, void 0, void 0, function () {
+        var res, list;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, storageRef.current.getItem(key)];
+                case 1:
+                    res = _a.sent();
+                    list = getDataByTemplate(res);
+                    return [2 /*return*/, {
+                            list: list,
+                            currentKey: (res === null || res === void 0 ? void 0 : res.currentKey) || "",
+                        }];
+            }
+        });
+    }); };
+    /**
+     * @description 统一保存模板数据的方法
+     * @param key 存储的 key
+     * @param data 要保存的数据
+     * @param shouldUpdateServer 是否需要同步到服务器
+     */
+    var saveTemplateData = function (key, data, shouldUpdateServer) {
+        if (shouldUpdateServer === void 0) { shouldUpdateServer = true; }
+        return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setTemplateList(data.list);
+                        return [4 /*yield*/, storageRef.current.setItem(key, data)];
+                    case 1:
+                        _a.sent();
+                        if (!shouldUpdateServer) return [3 /*break*/, 3];
+                        return [4 /*yield*/, updateServerData()];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * @description: 存储数据（保存当前选中模板）
+     */
+    var saveCurrentTemplate = function () { return __awaiter(_this, void 0, void 0, function () {
+        var list, index, newData;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, getTemplateData(templateKey)];
+                case 1:
+                    list = (_b.sent()).list;
+                    index = list.findIndex(function (item) { return item.key === currentTemplateKey; });
+                    if (index !== -1) {
+                        list[index].value = currentTemplateData;
+                    }
+                    else if (list.length > 0) {
+                        // 如果当前选中的模板不存在，更新第一个模板
+                        list[0].value = currentTemplateData;
+                    }
+                    newData = {
+                        list: list,
+                        currentKey: currentTemplateKey || ((_a = list[0]) === null || _a === void 0 ? void 0 : _a.key) || "",
+                    };
+                    return [2 /*return*/, saveTemplateData(templateKey, newData)];
+            }
+        });
+    }); };
+    /**
+     * @description: 设置模板数据（新增/修改模板）
+     * @param {object} data 模板数据
+     * @param {boolean} isSaveServer 是否需要保存到服务器，默认为true
+     */
+    var setCurrentTemplateData = function (data, isSaveServer) {
+        if (isSaveServer === void 0) { isSaveServer = true; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var list, index, newData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getTemplateData(templateKey)];
+                    case 1:
+                        list = (_a.sent()).list;
+                        index = list.findIndex(function (item) { return item.key === data.key; });
+                        if (index !== -1) {
+                            list[index] = data;
+                        }
+                        else {
+                            list.unshift(data);
+                        }
+                        newData = {
+                            list: list,
+                            currentKey: data.key,
+                        };
+                        setCurrentTemplateKey(data.key);
+                        return [2 /*return*/, saveTemplateData(templateKey, newData, isSaveServer)];
+                }
+            });
+        });
+    };
+    /**
+     * @description: 设置当前存储选中的key值
+     */
+    var setStorageCurrentKey = function (key) { return __awaiter(_this, void 0, void 0, function () {
+        var list, newData;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getTemplateData(templateKey)];
+                case 1:
+                    list = (_a.sent()).list;
+                    newData = { list: list, currentKey: key };
+                    return [4 /*yield*/, storageRef.current.setItem(templateKey, newData)];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * @description: 删除模板
+     * @param index 模板索引
+     */
+    var deleteTemplateByIndex = function (index) { return __awaiter(_this, void 0, void 0, function () {
+        var _a, list, oldCurrentKey, deletedKey, newCurrentKey, newData;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, getTemplateData(templateKey)];
+                case 1:
+                    _a = _d.sent(), list = _a.list, oldCurrentKey = _a.currentKey;
+                    deletedKey = (_b = list[index]) === null || _b === void 0 ? void 0 : _b.key;
+                    list.splice(index, 1);
+                    newCurrentKey = oldCurrentKey;
+                    if (deletedKey === newCurrentKey) {
+                        newCurrentKey = ((_c = list[0]) === null || _c === void 0 ? void 0 : _c.key) || "";
+                    }
+                    newData = {
+                        list: list,
+                        currentKey: newCurrentKey,
+                    };
+                    return [2 /*return*/, saveTemplateData(templateKey, newData)];
+            }
+        });
+    }); };
+    /**
+     * @description: 直接替换原有数据
+     */
+    // const replaceTemplateData = async (data: any) => {
+    //   const localKey = templateKey;
+    //   if (setTemplateList) {
+    //     setTemplateList(data.list || data);
+    //   }
+    //   return storageRef?.current?.setItem(localKey, data);
+    // };
+    /**
+     * @description: 更新服务器数据
+     */
+    var updateServerData = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            return [2 /*return*/, (_b = (_a = storageRef.current) === null || _a === void 0 ? void 0 : _a.getAllItems()) === null || _b === void 0 ? void 0 : _b.then(function (res) { return __awaiter(_this, void 0, void 0, function () {
+                    var error_1;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                _a.trys.push([0, 2, , 3]);
+                                return [4 /*yield*/, (customConfigFetch === null || customConfigFetch === void 0 ? void 0 : customConfigFetch({
+                                        customKey: storeName,
+                                        customValue: JSON.stringify(res),
+                                        mark: "模板设置",
+                                    }))];
+                            case 1:
+                                _a.sent();
+                                return [3 /*break*/, 3];
+                            case 2:
+                                error_1 = _a.sent();
+                                console.error("更新服务器数据失败!", error_1);
+                                return [3 /*break*/, 3];
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                }); })];
+        });
+    }); };
+    /**
+     * 打开模板弹框
+     */
+    var openTemplateModal = function () {
+        var _a, _b;
+        (_b = (_a = templateModalRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    /**
+     * 渲染模板弹框组件
+     */
+    var renderTemplateModal = function () {
+        return (jsx(TemplateModal, { currentTemplateData: currentTemplateData, templateList: templateList, setCurrentTemplateData: setCurrentTemplateData, deleteTemplateByIndex: deleteTemplateByIndex, currentTemplateKey: currentTemplateKey, setCurrentTemplateKey: setCurrentTemplateKey, setStorageCurrentKey: setStorageCurrentKey, updateServerData: updateServerData, onChange: onChange, templateModalRef: templateModalRef }));
+    };
+    var getCurrentTemplateData = function () {
+        return templateList.find(function (item) { return item.key === currentTemplateKey; });
+    };
+    return {
+        /** 模板列表数据 */
+        templateList: templateList,
+        /** 设置模板列表数据 */
+        setTemplateList: setTemplateList,
+        /** 当前选中的模板key值 */
+        currentTemplateKey: currentTemplateKey,
+        /** 设置当前选中的模板key值 */
+        setCurrentTemplateKey: setCurrentTemplateKey,
+        /** 存储数据（保存当前选中模板） */
+        saveCurrentTemplate: saveCurrentTemplate,
+        /** 获取当前选中的模板数据 */
+        getCurrentTemplateData: getCurrentTemplateData,
+        /** 渲染模板弹框组件 */
+        renderTemplateModal: renderTemplateModal,
+        /** 打开弹框组件 */
+        openTemplateModal: openTemplateModal,
+    };
+}
+var TemplateModal = function (props) {
+    var currentTemplateData = props.currentTemplateData, templateList = props.templateList, setCurrentTemplateData = props.setCurrentTemplateData, deleteTemplateByIndex = props.deleteTemplateByIndex, currentTemplateKey = props.currentTemplateKey, setCurrentTemplateKey = props.setCurrentTemplateKey, setStorageCurrentKey = props.setStorageCurrentKey, updateServerData = props.updateServerData, onChange = props.onChange, templateModalRef = props.templateModalRef;
+    var iptRef = useRef(null);
+    /**
+     * @description 验证模板名称
+     */
+    var validateTemplateName = function () {
+        var _a;
+        var currentCommonName = (_a = iptRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
+        if (!currentCommonName) {
+            myMessage.warning("请输入模板名称");
+            updateServerData === null || updateServerData === void 0 ? void 0 : updateServerData();
+            return null;
+        }
+        return currentCommonName;
+    };
+    /**
+     * @description 创建模板数据对象
+     */
+    var createTemplateData = function (title) { return ({
+        title: title,
+        value: currentTemplateData,
+        key: generateUniqueKey(),
+    }); };
+    /**
+     * @description 保存模板
+     */
+    var saveTemplate = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _d.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, setCurrentTemplateData(data)];
+                case 1:
+                    _d.sent();
+                    myMessage.success("保存成功！");
+                    (_a = iptRef.current) === null || _a === void 0 ? void 0 : _a.setValue("");
+                    (_c = (_b = templateModalRef.current) === null || _b === void 0 ? void 0 : _b.close) === null || _c === void 0 ? void 0 : _c.call(_b);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _d.sent();
+                    myMessage.error("保存模板失败！");
+                    throw err_1;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * @description 处理确认按钮点击
+     */
+    var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var templateName, data;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    templateName = validateTemplateName();
+                    if (!templateName) {
+                        (_b = (_a = templateModalRef.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        return [2 /*return*/, Promise.reject("请输入模板名称")];
+                    }
+                    data = createTemplateData(templateName);
+                    return [4 /*yield*/, saveTemplate(data)];
+                case 1:
+                    _c.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (jsxs(ModalComponent, __assign({ title: "\u6A21\u677F\u8BBE\u7F6E", ref: templateModalRef, onOk: handleOk, width: "60%" }, { children: [jsx(MyInput, { ref: iptRef }), jsx("div", __assign({ className: "dynamic-template--list" }, { children: templateList.map(function (item, index) { return (jsxs("div", __assign({ className: classNames("dynamic-template--item", {
+                        "dynamic-template--item-active": item.key === currentTemplateKey,
+                    }), onClick: function () {
+                        setCurrentTemplateKey(item.key);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(item.value);
+                        // 设置当前存储选中的key
+                        setStorageCurrentKey === null || setStorageCurrentKey === void 0 ? void 0 : setStorageCurrentKey(item.key);
+                    } }, { children: [jsx("div", __assign({ className: "dynamic-template--item-title" }, { children: item.title })), jsx(Popconfirm, __assign({ title: "\u786E\u8BA4\u5220\u9664\u5417\uFF1F", onConfirm: function (e) {
+                                var _a, _b;
+                                (_a = e === null || e === void 0 ? void 0 : e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+                                (_b = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
+                                deleteTemplateByIndex(index);
+                            }, onCancel: function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e); } }, { children: jsx(ButtonCom, __assign({ type: "default" }, { children: "\u5220\u9664" })) }))] }), item.key)); }) }))] })));
+};
+var MyInput = forwardRef(function (_props, ref) {
+    var _a = useState(""), value = _a[0], setValue = _a[1];
+    var onChange = function (e) {
+        setValue(e.target.value);
+    };
+    useImperativeHandle(ref, function () { return ({
+        getValue: function () { return value; },
+        setValue: setValue,
+    }); });
+    return (jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u6A21\u677F\u540D\u79F0", value: value, onChange: onChange }));
+});
+/** 保存模板二次确认框 */
+var TemplateModalConfirm = function (props) {
+    var currentTemplateTitle = props.currentTemplateTitle, confirmModalRef = props.confirmModalRef, openTemplateModal = props.openTemplateModal, saveCurrentTemplate = props.saveCurrentTemplate;
+    return (jsx(ModalComponent, __assign({ ref: confirmModalRef, title: "\u6A21\u677F\u4FDD\u5B58\u786E\u8BA4", width: "60%", footer: jsxs(Fragment, { children: [jsx(ButtonCom, __assign({ type: "primary", onClick: function () {
+                        var _a, _b;
+                        (_b = (_a = confirmModalRef.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        openTemplateModal === null || openTemplateModal === void 0 ? void 0 : openTemplateModal();
+                    } }, { children: "\u6A21\u677F\u8BBE\u7F6E" })), jsx(ButtonCom, __assign({ type: "primary", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    _c.trys.push([0, 2, , 3]);
+                                    return [4 /*yield*/, saveCurrentTemplate()];
+                                case 1:
+                                    _c.sent();
+                                    myMessage.success("保存成功");
+                                    (_b = (_a = confirmModalRef.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    return [3 /*break*/, 3];
+                                case 2:
+                                    _c.sent();
+                                    myMessage.error("保存失败");
+                                    return [3 /*break*/, 3];
+                                case 3: return [2 /*return*/];
+                            }
+                        });
+                    }); } }, { children: "\u786E\u5B9A" })), jsx(ButtonCom, __assign({ type: "default", onClick: function () {
+                        var _a, _b;
+                        (_b = (_a = confirmModalRef.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    } }, { children: "\u53D6\u6D88" }))] }) }, { children: jsxs("div", __assign({ className: "dynamic-template-confirm--item-title" }, { children: ["\u5F53\u524D\u6B63\u5728\u4FEE\u6539", jsx("b", { children: currentTemplateTitle }), "\uFF0C\u662F\u5426\u786E\u8BA4\u4FDD\u5B58\uFF1F \u82E5\u4E3A\u65B0\u589E\u6A21\u677F\u8BF7\u70B9\u51FB\u2018\u6A21\u677F\u8BBE\u7F6E\u2019\u7EF4\u62A4\u540D\u79F0\u3002"] })) })));
+};
+
+export { TemplateDatasetName, TemplateModalConfirm, useTemplate as default };