代码功能更新

2025-05-18 07:42:27 +00:00
parent 7fc1d422a1
commit 4a90c41da2
2083 changed files with 695218 additions and 3 deletions
@@ -0,0 +1,567 @@
+/**
+ * laytp极速后台框架layUI的js扩展，后台界面使用
+ * @version: 2.0
+ * @Author:  JunStar
+ * @Date:    2018年09月20日11:47:00
+ * @Last Modified by:   JunStar
+ * @Last Modified time: 2021-09-22 17:19:40
+ */
+layui.define([
+    "facade",           // 助手函数
+    "laytpForm",        // 表单元素组件
+    "laytpDropdown",    // 数据表格顶部批量操作下拉组件
+    "laytpTable",       // 数据表格处理完成后需要执行的操作组件
+    "button",           // 按钮点击过渡效果组件
+    "drawer",           // 抽屉组件
+    "react",            // 模拟react的响应式组件，允许注册一些数据，方法，钩子并提供简单的响应式
+], function (exports) {
+    const MOD_NAME = "laytp";
+
+    let $ = layui.jquery
+        , facade = layui.facade
+        , laytp = {}
+        ;
+
+    window.$ = $;
+
+    //数据表格，格式化展示数据
+    laytp.tableFormatter = {
+        custom: ["#FF5722", "#009688", "#FFB800", "#2F4056", "#1E9FFF", "#393D49", "#999999", "#0b1bf8", "#7a0bf8", "#f00bf8", "#5FB878", "#1E9FFF", "#2F4056"],
+        status: function (field, value, json, isTreeTable) {
+            let customIndex = 0, key;
+            if (value) {
+                for (key in json['value']) {
+                    if (value.toString() === json['value'][key].toString()) {
+                        if (isTreeTable) {
+                            return '<span class="layui-icon layui-icon-circle-dot" style="color:' + laytp.tableFormatter.custom[customIndex] + ';font-size:14px;">' + json['text'][key] + '</span>';
+                        } else {
+                            return '<a href="javascript:void(0);" class="laytpClickSearch layerTips layui-icon layui-icon-circle-dot" data-field="' + field + '" data-val="' + value + '" data-text="点击搜索 ' + json['text'][key] + '" data-tipsColor="#393D49" style="color:' + laytp.tableFormatter.custom[customIndex] + ';font-size:14px;">' + json['text'][key] + '</a>';
+                        }
+                    }
+                    customIndex++;
+                }
+            }
+            return '';
+        },
+        colorPicker: function (value) {
+            return "<span class='layui-badge' style='background-color:" + value + ";font-size:14px;'>&nbsp;&nbsp;</span>\n\t\t\t";
+        },
+        //form_type=checkbox
+        flag: function (value, dataList) {
+            let html = '';
+            let customIndex = 0, key, v;
+            let valueArr = value.toString().split(',');
+            for (key in dataList.value) {
+                for (v in valueArr) {
+                    if (valueArr[v].toString() === dataList.value[key].toString()) {
+                        customIndex = key % laytp.tableFormatter.custom.length;
+                        html += '<span class="layui-btn layui-btn-xs" style="background-color: ' + laytp.tableFormatter.custom[customIndex] + '">' + dataList.text[key] + '</span>';
+                    }
+                }
+            }
+            return html;
+        },
+        images: function (value) {
+            let html = "";
+            if (value) {
+                let valueArr = value.split(", "), key;
+                for (key in valueArr) {
+                    html += '<a href="javascript:void(0);" onclick="layui.laytp.tableFormatter.showImage(\'' + valueArr[key] + '\')"><img src="' + valueArr[key] + '" class="layerImgTips" style="width:30px;height:30px;" /></a> ';
+                }
+            }
+            return html;
+        },
+        showImage: function (url) {
+            layui.facade.popupDiv({
+                title: '查看图片',
+                path: "/admin/showImage.html?img_url=" + window.btoa(url)
+            });
+        },
+        video: function (value) {
+            let html = '';
+            if (value) {
+                let i = 1;
+                let valueArr = value.split(','), key;
+                for (key in valueArr) {
+                    html += '<a href="javascript:void(0);" onclick="layui.laytp.tableFormatter.showVideo(\'' + valueArr[key] + '\')" class=\"layui-link\">视频' + i + '</a> ';
+                    i++;
+                }
+            }
+            return html;
+        },
+        showVideo: function (url) {
+            layui.facade.popupDiv({
+                title: '查看视频',
+                path: "/admin/showVideo.html?video_url=" + window.btoa(url)
+            });
+        },
+        audio: function (value) {
+            let html = '';
+            if (value) {
+                let i = 1;
+                let valueArr = value.split(','), key;
+                for (key in valueArr) {
+                    html += '<a href="javascript:void(0);" onclick="layui.laytp.tableFormatter.showAudio(\'' + valueArr[key] + '\')" class=\"layui-link\">音频' + i + '</a> ';
+                    i++;
+                }
+            }
+            return html;
+        },
+        showAudio: function (url) {
+            layui.facade.popupDiv({
+                title: '查看音频',
+                path: "/admin/showAudio.html?audio_url=" + window.btoa(url)
+            });
+        },
+        file: function (value) {
+            let html = '';
+            if (value) {
+                let i = 1;
+                let valueArr = value.split(','), key;
+                for (key in valueArr) {
+                    html += '<a target="_blank" href="' + valueArr[key] + '" title="点击下载" class="layui-link">文件' + i + '</a> ';
+                    i++;
+                }
+            }
+            return html;
+        },
+    };
+
+    /**
+     * 监听数据表格顶部左侧默认按钮点击事件
+     */
+    laytp.tableToolbar = function (obj, isTreeTable) {
+        // 窗口句柄
+        let indexes = [];
+        if (obj.event === "add") {
+            let options = {};
+            options.title = "添 加";
+            options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "add.html";
+            indexes.push(facade.popupDiv(options));
+        } else if (obj.event === "edit") {
+            let checkData, checkStatus;
+            if (isTreeTable) {
+                checkStatus = layui.treeTable.checkStatus(obj.config.id);
+            } else {
+                checkStatus = layui.table.checkStatus(obj.config.id);
+            }
+            checkData = checkStatus.data;
+            if (checkData.length === 0) {
+                facade.error("请选择数据");
+                return false;
+            }
+            if (checkData.length >= 30) {
+                facade.error("选择数据量过多，最多选择30条数据，总共选择了" + checkData.length + "条数据");
+                return false;
+            }
+            let key;
+            for (key in checkData) {
+                indexes.push(facade.popupDiv({
+                    title: "编辑",
+                    path: facade.compatibleHtmlPath(window.htmlPrefix) + "edit.html?id=" + checkData[key].id
+                }));
+            }
+        } else if (obj.event === "del") {
+            let checkData, checkStatus;
+            if (isTreeTable) {
+                checkStatus = layui.treeTable.checkStatus(obj.config.id);
+            } else {
+                checkStatus = layui.table.checkStatus(obj.config.id);
+            }
+            checkData = checkStatus.data;
+            if (checkData.length === 0) {
+                facade.error("请选择数据");
+                return false;
+            }
+            let ids = [];
+            let key;
+            for (key in checkData) {
+                ids.push(checkData[key].id);
+            }
+            if (isTreeTable) {
+                facade.popupConfirm({ text: "确定删除么?", route: window.apiPrefix + "del", data: { ids: ids } }, function (res) {
+                    if (res.code === 0) {
+                        if (typeof obj.del === "function") {
+                            obj.del();
+                        } else {
+                            funController.tableRender();
+                        }
+                    }
+                });
+            } else {
+                facade.popupConfirm({ text: "确定删除么?", route: window.apiPrefix + "del", data: { ids: ids } });
+            }
+        } else if (obj.event === "search") {
+            layui.drawer.open({
+                direction: "right",
+                dom: "#search-form",
+                distance: "70%",
+                success: function (d) {
+                    var windowHeight = d.height;
+                    var height = parseInt(windowHeight) - 115;
+                    $(".search-form-body").css("height", height + 'px');
+                    $(".search-form-body").css("max-height", height + 'px');
+                    $(".search-form-body").css("overflow-y", "auto");
+                }
+            });
+        } else if (obj.event === "recycle-search") {
+            layui.drawer.open({
+                direction: "right",
+                dom: "#recycle-search-form",
+                distance: "70%",
+                success: function (d) {
+                    var windowHeight = d.height;
+                    var height = parseInt(windowHeight) - 115;
+                    $(".search-form-body").css("height", height + 'px');
+                    $(".search-form-body").css("max-height", height + 'px');
+                    $(".search-form-body").css("overflow-y", "auto");
+                }
+            });
+        } else if (obj.event === "recycle") {
+            let options = {};
+            options.title = "回收站";
+            options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "recycle.html";
+            options.offset = "auto";
+            options.width = facade.isMobile() ? '100%' : '90%';
+            options.height = facade.isMobile() ? '100%' : '90%';
+            options.anim = 2;
+            indexes.push(facade.popupDiv(options));
+        } else if (obj.event === "restore") {
+            let checkData, checkStatus;
+            if (isTreeTable) {
+                checkStatus = layui.treeTable.checkStatus(obj.config.id);
+            } else {
+                checkStatus = layui.table.checkStatus(obj.config.id);
+            }
+            checkData = checkStatus.data;
+            if (checkData.length === 0) {
+                facade.error("请选择数据");
+                return false;
+            }
+            let key;
+            let ids = [];
+            for (key in checkData) {
+                ids.push(checkData[key].id);
+            }
+            facade.ajax({
+                route: window.apiPrefix + "restore",
+                data: { ids: ids },
+                showLoading: true
+            }).done(function (res) {
+                if (res.code === 0) {
+                    parent.funController.tableRender();
+                    funRecycleController.tableRender();
+                }
+            });
+        } else if (obj.event === "true-del") {
+            let checkData, checkStatus;
+            if (isTreeTable) {
+                checkStatus = layui.treeTable.checkStatus(obj.config.id);
+            } else {
+                checkStatus = layui.table.checkStatus(obj.config.id);
+            }
+            checkData = checkStatus.data;
+            if (checkData.length === 0) {
+                facade.error("请选择数据");
+                return false;
+            }
+
+            let key;
+            let ids = [];
+            for (key in checkData) {
+                ids.push(checkData[key].id);
+            }
+            facade.popupConfirm({
+                text: "真的在回收站删除么？此次删除将不能还原",
+                route: window.apiPrefix + "trueDel",
+                data: { ids: ids }
+            });
+        } else if (obj.event === "refresh") {
+            if (typeof funController !== "undefined") {
+                funController.tableRender(layui.form.val("layui-form"), $(".layui-laypage-em").next().html());
+            }
+        } else if (obj.event === "recycle-refresh") {
+            if (typeof funRecycleController !== "undefined") {
+                funRecycleController.tableRender(layui.form.val("layui-form"), $(".layui-laypage-em").next().html());
+            }
+        }
+
+        // 返回窗口句柄
+        if (indexes.length === 1) return indexes.pop();
+        else return [...indexes];
+    };
+
+    /**
+     * 监听数据表格操作列，默认按钮点击事件
+     */
+    laytp.tableTool = function (obj, isTreeTable) {
+        let indexes = [];
+        if (obj.event === "del") {
+            if (isTreeTable) {
+                facade.popupConfirm({ text: "真的删除么?", route: window.apiPrefix + "del", data: { ids: [obj.data.id] } }, function (res) {
+                    if (res.code === 0) {
+                        obj.del();
+                    }
+                });
+            } else {
+                facade.popupConfirm({ text: "真的删除么?", route: window.apiPrefix + "del", data: { ids: [obj.data.id] } });
+            }
+        } else if (obj.event === "edit") {
+            let options = {};
+            options.title = "编 辑";
+            options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "edit.html?id=" + obj.data.id;
+            indexes.push(facade.popupDiv(options));
+        } else if (obj.event === "restore") {
+            facade.ajax({ route: window.apiPrefix + "restore", data: { ids: [obj.data.id] } }).done(function (res) {
+                if (res.code === 0) {
+                    parent.funController.tableRender();
+                    funRecycleController.tableRender();
+                }
+            });
+        } else if (obj.event === "true-del") {
+            facade.popupConfirm({
+                text: "真的在回收站删除么？此次删除将不能还原",
+                route: window.apiPrefix + "trueDel",
+                data: { ids: [obj.data.id] }
+            });
+        }
+        if (indexes.length === 1) return indexes.pop();
+        else return indexes;
+    };
+
+    //初始化
+    laytp.init = {
+        /**
+         * 全局ajax设置
+         * - 设置默认的headers
+         * - ajax过度效果设置
+         */
+        ajaxSet: function () {
+            let commonHeaders = {
+                "LayTp-Admin-Token": facade.getCookie("laytpAdminToken"),
+                "Cache-Control": "no-cache"
+            };
+            $.ajaxSetup({
+                timeout: 30000,
+                headers: commonHeaders,
+            });
+        },
+
+        /**
+         * 点击按钮弹出表单层
+         * 所有拥有popupDiv类名的节点，点击后都会弹出层
+         *  data-name 弹窗标题，默认为当前节点的html()
+         *  data-url 必填,弹窗展示的静态文件url
+         *  data-btn 弹出层底部按钮，只有两种设置方式，1.不设置，表示弹出一个表单，底部展示['确定','取消']两个按钮，点击确定按钮可以提交表单。2.设置为空字符串，表示弹出一个非表单层，仅展示页面，底部没有按钮，其他复杂的弹出层，比如有三个或者三个以上按钮，请自行编写JS实现
+         *  data-width 属性为弹窗的宽度百分比，非必填，默认值在/a/index.html中设置
+         *  data-height 属性为弹窗的高度百分比，非必填，默认值在/a/index.html中设置
+         *  data-shade 属性为弹窗背景阴影，非必填，默认值在/a/index.html中设置
+         */
+        popupDiv: function () {
+            $(document).off("click", ".popupDiv").on("click", ".popupDiv", function () {
+                let options = {};
+                options.title = $(this).data("title") ? $(this).data("title") : $(this).html();
+                options.shade = $(this).data("shade");
+                if (!options.shade) options.shade = 0.01;
+                options.width = $(this).data("width");
+                options.height = $(this).data("height");
+                options.path = $(this).data("url");
+                facade.popupDiv(options);
+            });
+        },
+
+        /**
+         * 点击按钮打开新的tab menu
+         * 所有拥有tabMenu类名的节点，点击后都会打开新的tab menu
+         *  data-id 菜单ID，用于菜单自动选中
+         *  data-url 必填,弹窗展示的静态文件url
+         *  data-title tab菜单的名称
+         */
+        openTabMenu: function () {
+            $(document).off("click", ".openTabMenu").on("click", ".openTabMenu", function () {
+                if (parent.config.tab.muiltTab) {
+                    parent.bodyTab.addTabOnly({
+                        id: $(this).data("id"),
+                        title: $(this).data("title"),
+                        url: $(this).data("url"),
+                        icon: "",
+                        close: true
+                    }, 300);
+                } else {
+                    parent.bodyFrame.changePage($(this).data("url"), "", true);
+                }
+            });
+        },
+
+        /**
+         * 监听拥有laytpClickSearch样式的节点，点击进行表单搜索
+         */
+        laytpClickSearch: function () {
+            $(document).off("click", ".laytpClickSearch").on("click", ".laytpClickSearch", function () {
+                let field = $(this).data('field');
+                if (!field) facade.error("tab的字段名未定义");
+                let value = $(this).data('val');
+                $("#" + field).val(value);
+                layui.form.render('select');
+                $("button[lay-filter=laytp-search-form]").click();
+                $("button[lay-filter=laytp-recycle-search-form]").click();
+            });
+        },
+
+        /**
+         * 监听.delArrayItem节点，删除表格中的一行
+         *  .delArrayItem节点存在的位置举例：系统配置，数组类型配置，删除某一个数组元素
+         */
+        delArrayItem: function () {
+            $(document).off("click", ".delArrayItem").on('click', '.delArrayItem', function () {
+                let clickObj = $(this);
+                let childrenLength = clickObj.parent().parent().parent().children().length;
+                if (childrenLength > 2) {
+                    clickObj.parent().parent().remove();
+                } else {
+                    facade.error('请留下这唯一的一行数据');
+                }
+            });
+        },
+
+        /**
+         * 监听.addArrayItem节点，追加表格中的一行
+         *  .addArrayItem节点存在的位置举例：系统配置，数组类型配置，追加一个数组元素
+         */
+        addArrayItem: function () {
+            $(document).off("click", ".addArrayItem").on('click', '.addArrayItem', function () {
+                let clickObj = $(this);
+                var itemHtml = clickObj.parent().parent().prev().prop("outerHTML");
+                clickObj.parent().parent().before(itemHtml);
+                layui.form.render();
+                layui.laytp.init.tableDnd();
+            });
+        },
+
+        /**
+         * 监听.tableDnd节点，允许拖动排序
+         *  .tableDnd节点存在的位置举例：系统配置，数组类型配置，拖动排序数组元素
+         *
+         *  要求
+         *      - 页面上要加载jquery_3.3.1.js和jquery.tablednd.js两个js库
+         *      - table的class要加上tableDnd
+         *
+         *  注意
+         *      - 使用任意layui.js不存在的第三方jQuery库都需要加载
+         *      ```
+         *      /static/component/jquery_3.3.1.js
+         *      ```
+         *      - 然后再加载第三方jQuery库，比如当前是表格排序库
+         *      ```
+         *      /static/component/jquery.tablednd.js
+         *      ```
+         *      - 且一定要注意加载顺序，layui.js要优先加载，否则layui可能会报错
+         *          - 先加载layui.js
+         *          - 然后加载layuiConfig.js
+         *          - 再加载jquery_3.3.1.js
+         *          - 最后加载第三方jQuery库jquery.tablednd.js
+         */
+        tableDnd: function () {
+            layui.each($(".tableDnd"), function (key, item) {
+                $(item).tableDnD({});
+            });
+        },
+
+        /**
+         * 监听拥有layerTips样式的节点，渲染layerTips组件
+         * data-color 弹窗背景颜色
+         * data-time 弹窗展示时间，单位秒
+         * data-text 弹窗内文本
+         */
+        layerTips: function () {
+            var tipsIndex;
+            // 鼠标进入层就展示Tips
+            $(document).off('mouseover', '.layerTips').on('mouseover', '.layerTips', function () {
+                let obj = $(this);
+                let color = (typeof obj.data('color') != 'undefined') ? obj.data('color') : '#3595CC';
+                let time = (typeof obj.data('time') != 'undefined') ? obj.data('time') : 5000;
+                let text = $(this).data('text');
+                tipsIndex = layui.layer.tips(text, this, {
+                    tips: [4, color]
+                    , time: time
+                });
+            });
+
+            // 鼠标离开层就关闭Tips
+            $(document).off('mouseout', '.layerTips').on('mouseout', '.layerTips', function () {
+                layui.layer.close(tipsIndex);
+            });
+        },
+
+        /**
+         * 监听拥有layerImgTips样式的节点，渲染layerImgTips组件
+         * data-time 弹窗展示时间，单位秒
+         * data-text 弹窗内文本
+         */
+        layerImgTips: function () {
+            var tipsIndex;
+            // 鼠标进入层就展示Tips
+            $(document).off('mouseover', '.layerImgTips').on('mouseover', '.layerImgTips', function (e) {
+                let position = 2;
+                if (e.screenY > (window.screen.height) / 2) {
+                    position = 1
+                }
+                let obj = $(this);
+                let time = (typeof obj.data('time') != 'undefined') ? obj.data('time') : 5000;
+                var img = "<img src='" + $(this).attr('src') + "' style='width:300px; max-height:400px;' />";
+                tipsIndex = layui.layer.tips(img, this, {
+                    tips: [position]
+                    , time: time
+                    , area: ['300px']
+                    , skin: "laytpLayerImgTips"
+                });
+            });
+
+            // 鼠标离开层就关闭Tips
+            $(document).off('mouseout', '.layerImgTips').on('mouseout', '.layerImgTips', function () {
+                layui.layer.close(tipsIndex);
+            });
+        },
+
+        //锁屏
+        lockScreen: function () {
+            let lockScreenStatus = localStorage.getItem("laytpLockScreen");
+            $(document).ready(function () {
+                if (lockScreenStatus === "locked") {
+                    layui.facade.popupDiv({
+                        title: '锁屏',
+                        path: '/admin/lockScreen.html',
+                        shade: 0.5
+                    });
+                }
+            });
+
+            $(document).on('click', '#lockScreen', function () {
+                layui.layer.confirm('锁屏后，需要使用登录密码解锁，确定锁屏么?', { title: "锁屏确认继续", skin: "laytp" }, function (index) {
+                    layui.layer.close(index);
+                    localStorage.setItem("laytpLockScreen", "locked");
+                    layui.facade.popupDiv({
+                        title: '锁屏',
+                        path: '/admin/lockScreen.html',
+                        shade: 0.5
+                    });
+                });
+            });
+        },
+    };
+
+    layui.each(laytp.init, function (key, item) {
+        if (typeof item === "function") {
+            item();
+        }
+    });
+
+    layui.laytpForm.render();
+
+    //输出模块
+    exports(MOD_NAME, laytp);
+
+    layui.laytp = laytp;
+    window.laytp = laytp;
+    window.$ = $;
+});