NN2022081301/public/agent/assets/module/Equencing/Equencing.js

/**
 * 图片滑动模块
 * action: 优化
 * date:2020-09-19   许祖兴 <uxing.xu@lettered.cn>
 * from:https://www.jq22.com/jquery-info19741
 */
;layui.define(['jquery', 'form', 'layer', 'admin'], function (e
) {
    "use strict";
    layui.link(layui.cache.base + 'Equencing/css/style.css');  // 默认风格
    var $ = layui.jquery, form = layui.form, layer = layui.layer, hint = (layui.util, layui.hint());
    var Eq = {
            config: {},
            cache: {},
            index: layui.table ? layui.table.index + 1e4 : 0,
            set: function (e) {
                var i = this;
                return i.config = $.extend({}, i.config, e), i
            },
            on: function (e, t) {
                return layui.onevent.call(this, y, e, t)
            }
        },
        // 外露接口
        c = function () {
            var e = this, t = e.config, v = e.vars, i = t.id || t.index;

            return i && (c.that[i] = e, c.config[i] = t, c.vars[i] = v), {
                config: t, vars: v, update: function (d) {
                    e.update.call(e, d)
                }, clearData: function () {
                    return e.clearData.call(e, t)
                }, getData: function () {
                    return e.getData.call(e, t)
                }, addItem: function (d) {
                    return e.addItem.call(e, d)
                }, delItem: function (d) {
                    return e.delItem.call(e, d)
                }
            }
        }, s = function (e) {
            var t = c.config[e];
            return t || hint.error("The ID option was not found in the table instance"), t || null
        }, F = function (e) {
            var i = this;
            // 配置合并
            i.index = ++Eq.index, i.config = $.extend({}, i.config, Eq.config, e), i.render()
        }, l = "drag-images";


    F.prototype.config = {
        // 页面图片列表ID
        elem: "img_ul",
        // 图片数据数组
        data: [],
        // 数量
        count: 1,
        // 预览/查看图片
        viewimg: true,
        // 预览切换
        view_toggle: true,
        // 预览缩放
        view_zoom: true,
        // 预览旋转
        view_rotate: true,
        // item
        IdClass: "__item__",
    }
        , F.prototype.dataArr = []
        , F.prototype.coverBox = null
        , F.prototype.itemBox = null
        , F.prototype.itemIdArr = []
        , F.prototype.chekObj = {}
        , F.prototype.imgNum = 0
        // 获取最新数据
        F.prototype.getData = function () {
            var that = this, opts = that.config;
            that.dataArr.length = 0;
            for (var i = 0; i < that.itemIdArr.length; i++) {
                that.dataArr.push(opts.data[that.itemIdArr[i]])
            }
            if (that.dataArr.length > 0){
                return opts.count > 1 ? JSON.stringify(that.dataArr) : that.dataArr[0] || "";
            }
            return "";
        },
        // 删除
        F.prototype.delItem = function (index) {
            var that = this, opts = that.config;
            // 框
            that.itemBox.find("#"+opts.elem +'_item' + index).remove();
            // 删除序号
            that.itemIdArr.splice(index, 1);

            that.redraw(0, that.itemIdArr.length,200);

            that.info(this);
        },
        // 清空item
        F.prototype.clear = function () {
            var that = this, opts = that.config;
            that.itemBox.find("." + opts.IdClass).remove();
            opts.data.length = 0;
            that.itemIdArr.length = 0;
            that.chekObj = {};
            that.box_h = "20";
            that.coverBox.height(that.box_h + "px");
        },
        F.prototype.update = function(e){
            var that = this;
            // 清空
            e = e || [], that.config.data = [],that.itemIdArr = [],that.chekObj ={},that.dataArr = [];
            that.itemBox.find("." + that.config.IdClass).remove();
            // 再添加
            $.each(e, (i,v) => {
                that.addItem(v);
            });
        },
        // 添加图片
        F.prototype.addItem = function (imgsrc) {
            var that = this, opts = that.config;
            // 追加数据
           if( opts.data.indexOf(imgsrc) == -1){
               opts.data.push(imgsrc);
               // html处理
               var imgnum = opts.data.length - 1;
               that.itemIdArr.push(imgnum);
               that.itemBox.append(
                   '<div class="item ' + opts.IdClass + '" el="' + opts.elem + '" id="' + opts.elem + '_item' + imgnum + '" item="' + imgnum + '">' + that.buildItemStr(imgsrc) + '</div>'
               );

               that.redraw(imgnum, 1, 0);
               that.info(this);
           }
        },
        // 以下都是渲染
        // 构建Item 内容
        F.prototype.buildItemStr = function (imgsrc) {
            return '<div class="picbox">'
                + '<a class="viewimg">'
                + '<img class="input-img-preview" src="' + imgsrc + '" ondragstart="return false;" />'
                + '</a>'
                + '<i class="del eq-item-del layui-icon layui-icon-close-fill"></i>'
                + '</div>'
        },
        F.prototype.info = function () {
            var that = this, opts = that.config;

            if (that.item_w === undefined || that.item_w === null) {
                // 每个item占的横向位置
                that.item_w = that.itemBox.find("." + opts.IdClass).outerWidth(true);
                // 每个item占的竖向位置
                that.item_h = that.itemBox.find("." + opts.IdClass).outerHeight(true);
                that.coverBox.find(".ident").css({height: that.item_h + "px"});
                that.coverBox.find(".morexy").css({width: that.item_w + "px", height: that.item_h + "px"});
            }
            // item数量
            that.imgNum = that.itemBox.find("." + opts.IdClass).length;
            // 共分多少列
            that.col_len = Math.floor(that.box_w / that.item_w);
            // 共分多少行
            that.few_len = Math.ceil(that.imgNum / that.col_len);
            that.box_h = that.item_h * that.few_len + 20;
            that.coverBox.height(that.box_h + "px");
            return true;
        },
        // 绘制/移动
        F.prototype.draw = function (dom, col, few, slidetime) {
            dom.css({
                "transition-duration": slidetime + "ms",
                "transform": "translate(" + col + "px," + few + "px)",
            });
        },
        // 通用绘制
        F.prototype.redraw = function (strati, ilen, slidetime) {
            var that = this, opts = that.config;
            for (var j = strati; j < strati + ilen; j++) {
                that.computat(j, opts.elem + "_item" + that.itemIdArr[j], slidetime);
            }
        },
        // 计算位置
        F.prototype.computat = function (index, domid, slidetime) {
            var that = this, item = $("#" + domid);
            item.attr({"item": index,});
            if (that.chekObj[domid] !== undefined) {
                that.chekObj[domid] = index;
            }
            var col_aliquot = index % that.col_len;
            var row_aliquot = Math.floor(index / that.col_len);
            var index_col = that.item_w * (col_aliquot);
            var index_few = that.item_h * row_aliquot;
            that.draw(item, index_col, index_few, slidetime);
            item.attr({
                "col": index_col,
                "few": index_few
            })
        },
        F.prototype.render = function () {
            var that = this, opts = that.config;

            //-//-//-//-开始-//-//-//-//
            that.coverBox = $("#" + opts.elem);
            that.coverBox.append("<div class='itemlist' style='height:100%'></div>" +
                "<div class='ident'></div>" +
                "<div class='morexy'></div>"
            );
            that.itemBox = that.coverBox.find(".itemlist");
            // 页面dom绘制
            var html = '';
            for (var j = 0; j < opts.data.length; j++) {
                html += '<div class="item ' + opts.IdClass + '" el="' + opts.elem + '" id="' + opts.elem + '_item' + j + '" item="' + j + '">'
                    + that.buildItemStr(opts.data[j]) + '</div>';
            }
            // 渲染
            that.itemBox.html(html);
            // render
            form.render();
            // 取总宽度
            that.box_w = that.coverBox.width();

            // 首次绘制
            if (that.info(this)) {
                that.chekObj = {};
                that.itemIdArr = [];
                // 新数组
                that.dataArr = [];
                for (var i = 0; i < that.imgNum; i++) {
                    that.itemIdArr.push(i)
                }

                that.redraw(0, that.itemIdArr.length, 0);
            }
            // 浏览器尺寸改变时
            $(window).resize(function () {
                // 取总宽度
                that.box_w = that.coverBox.width();
                if (that.info(this)) {
                    that.redraw(0, that.itemIdArr.length, 0);
                }
            }.bind(this));

            //-//-//-//-拖动排序-//-//-//-//
            // 鼠标初始位置
            var startX = null;
            var startY = null;
            // 选中元素item
            var moveDom = null;
            var checkItem = null;
            // 初始index/当前点击元素的item值
            var startIndex = null;
            // 是否多选框选中
            var isSelected = false;
            // 初始坐标位置
            var oldCol = null;
            var oldFew = null;
            // 标识
            var identDom = that.coverBox.find(".ident");
            // 多选
            var multipleBox = that.coverBox.find(".morexy");
            // 是否拖动
            var isDrag = false;
            // 标识初始位置
            var identMobieX = null;
            var identMobieY = null;

            // 初始化
            function mouseinit() {
                moveDom = null;
                isDrag = false;
                checkItem.css({"opacity": "1", "z-index": ""});
                multipleBox.hide();
                identDom.hide();
            }

            // 获取选中元素id
            function getchekobj() {
                var domidarr = [];
                for (var key in that.chekObj) {
                    domidarr.push("#" + key);
                }
                var chekDomObj = $(domidarr.join(','));
                if (domidarr.length == 0) {
                    chekDomObj = checkItem;
                }
                return chekDomObj;
            }

            // 松开手指返回原位
            $(document).on("mouseup", function () {
                if (moveDom != null) {
                    that.draw(moveDom, oldCol, oldFew, 0);
                    mouseinit();
                    if (isSelected) {
                        for (var arri in that.chekObj) {
                            var elem = $("#" + arri);
                            that.draw(elem, elem.attr("col"), elem.attr("few"), 300);
                        }
                    }
                }
            });

            // 拖动方法
            that.coverBox.on({
                mousedown: function (e) {
                    e.preventDefault();
                    if (e.target.localName == "input") {
                        return false;
                    }

                    var isIdclass = $(e.target).hasClass(opts.IdClass);
                    var pIdClass = $(e.target).parents("." + opts.IdClass)[0];

                    if (!isIdclass && pIdClass == undefined) {
                        return false;
                    }

                    if (isIdclass) {
                        checkItem = $(e.currentTarget);
                    } else {
                        checkItem = $(pIdClass);
                    }

                    if (checkItem.find("input.checkbox").prop("checked")) {
                        isSelected = true;
                        moveDom = multipleBox;
                    } else {
                        isSelected = false;
                        moveDom = checkItem;
                    }

                    startX = e.pageX;
                    startY = e.pageY;
                    startIndex = parseInt(checkItem.attr("item"));
                    oldCol = parseInt(checkItem.attr("col"));
                    oldFew = parseInt(checkItem.attr("few"));

                    checkItem = getchekobj();
                    checkItem.css({"opacity": "0.8", "z-index": "10"});

                    that.draw(identDom, oldCol, oldFew, 0);
                },
                mousemove: function (e) {
                    if (moveDom == null) {
                        return;
                    }
                    if (e.which != 1) {
                        return;
                    }
                    // 拖动距离
                    var gapX = e.pageX - startX;
                    var gapY = e.pageY - startY;
                    // 偏移距离
                    var mobiex = oldCol + gapX;
                    var mobiey = oldFew + gapY;
                    // 横向是否超出边界
                    if (mobiex > that.box_w - that.item_w) {
                        mobiex = that.box_w - that.item_w;
                    } else if (mobiex < 0) {
                        mobiex = 0;
                    }
                    // 竖向是否超出边界
                    if (mobiey > that.box_h - that.item_h) {
                        mobiey = that.box_h - that.item_h;
                    } else if (mobiey < 0) {
                        mobiey = 0;
                    }
                    if (Math.abs(gapX) > 10 || Math.abs(gapY) > 10) {
                        if (!isDrag) {
                            if (isSelected) {
                                that.draw(moveDom, oldCol, oldFew, 0);
                                for (var arri in that.chekObj) {
                                    $("#" + arri).css({"opacity": "0.25", "z-index": "10"});
                                    that.draw($("#" + arri), oldCol, oldFew, 300);
                                }
                                moveDom.show();
                            }
                        }

                        // item移动
                        that.draw(moveDom, mobiex, mobiey, 0);
                        // 标识移动
                        identMobieX = Math.abs(Math.ceil((mobiex - that.item_w / 2) / that.item_w));
                        identMobieY = Math.abs(Math.ceil((mobiey - that.item_h / 2) / that.item_h));
                        identDom.show();
                        that.draw(identDom, identMobieX * that.item_w, identMobieY * that.item_h, 0);
                        isDrag = true;
                    }
                },
                mouseup: function (e) {
                    if (moveDom == null) {
                        return;
                    } else if (isDrag) {
                        that.draw(moveDom, oldCol, oldFew, 0);
                        var toposion = identMobieY * that.col_len + identMobieX;

                        // 多选
                        if (isSelected) {
                            var min = that.itemIdArr.length;
                            var max = 0;
                            var transsh = [];
                            for (var indexi in that.chekObj) {
                                that.itemBox.find("#" + indexi).css({"opacity": "1", "z-index": ""});
                                for (var i = 0; i < that.itemIdArr.length; i++) {
                                    if (i == that.chekObj[indexi]) {
                                        min = i < min ? i : min;
                                        max = i + 1 > max ? i + 1 : max;
                                        transsh.push(that.itemIdArr[i]);
                                        that.itemIdArr[i] = null;
                                    }

                                }

                            }
                            for (var i = 0; i < transsh.length; i++) {
                                that.itemIdArr.splice(toposion + i, 0, transsh[i]);
                            }
                            // transsh.length=0;
                            for (var i = that.itemIdArr.length - 1; i >= 0; i--) {
                                if (that.itemIdArr[i] == null) {
                                    that.itemIdArr.splice(i, 1);
                                }

                            }
                            min = toposion < min ? toposion : min;
                            max = toposion > max ? toposion : max;
                            if (max - min != transsh.length) {
                                that.redraw(min, max - min, 200);
                            } else {
                                for (var arri in that.chekObj) {
                                    var elem = $("#" + arri);
                                    that.draw(elem, elem.attr("col"), elem.attr("few"), 300);
                                }
                            }
                        } else {
                            var difference = toposion - startIndex;
                            if (difference > 1) {
                                // 往后
                                var changesitem = that.itemIdArr.splice(startIndex, 1)[0];
                                that.itemIdArr.splice(toposion - 1, 0, changesitem);
                                that.redraw(startIndex, startIndex + difference, 200);
                            } else if (difference < 0) {
                                // 往前
                                var changesitem = that.itemIdArr.splice(startIndex, 1)[0];
                                that.itemIdArr.splice(toposion, 0, changesitem);
                                difference = Math.abs(difference) + 1;
                                that.redraw(toposion, toposion + difference, 200);
                            }
                        }
                        mouseinit();
                    }
                },
                mouseleave: function (e) {
                    if (moveDom == null) {
                        return;
                    }
                },
            });
        }, c.that = {}, c.config = {}
        , Eq.update = function (e, t) {
        var i = s(e);
        if (i) {
            var a = c.that[e];
            return a.update(t), c.call(a)
        }
    }, Eq.getData = function (e, t) {
        var i = s(e);
        if (i) {
            var a = c.that[e];
            return a.getData(t), c.call(a)
        }
    }, Eq.addItem = function (e, t) {
        var i = s(e);
        if (i) {
            var a = c.that[e];
            return a.addItem(t), c.call(a)
        }
    }, Eq.delItem = function (e, t) {
        var i = s(e);
        if (i) {
            var a = c.that[e];
            return a.delItem(t), c.call(a)
        }
    }, Eq.clearData = function (e, t) {
        var i = s(e);
        if (i) {
            var a = c.that[e];
            return a.clearData(t), c.call(a)
        }
    }, Eq.render = function (e) {
        var t = new F(e);
        return c.call(t)
    }, e('Equencing', Eq)
});