|
|
@@ -0,0 +1,342 @@
|
|
|
+layui.define(['form'], function (exports) {
|
|
|
+
|
|
|
+ var form = layui.form,
|
|
|
+ $ = layui.jquery,
|
|
|
+ index = 0,
|
|
|
+ oldId,
|
|
|
+ MOD_NAME = 'labelGeneration',
|
|
|
+ formField = {
|
|
|
+ label: {
|
|
|
+ id: '-1',
|
|
|
+ tag: "label",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelGeneration = {
|
|
|
+ set: function (options) {
|
|
|
+ var that = this;
|
|
|
+ that.config = $.extend({}
|
|
|
+ , that.config
|
|
|
+ , options);
|
|
|
+ return that;
|
|
|
+ }
|
|
|
+ //事件监听
|
|
|
+ , on: function (events
|
|
|
+ , callback) {
|
|
|
+ return layui.onevent.call(this
|
|
|
+ , MOD_NAME
|
|
|
+ , events
|
|
|
+ , callback);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Class = function (options) {
|
|
|
+ var that = this;
|
|
|
+ that.config = $.extend({}
|
|
|
+ , that.config
|
|
|
+ , labelGeneration.config
|
|
|
+ , options);
|
|
|
+ that.render();
|
|
|
+ },
|
|
|
+ thisIns = function () {
|
|
|
+ var that = this
|
|
|
+ , options = that.config;
|
|
|
+ return {
|
|
|
+ reload: function (options) {
|
|
|
+ that.reload.call(that
|
|
|
+ , options);
|
|
|
+ }, getOptions: function () {
|
|
|
+ return options || null;
|
|
|
+ }, getData: function () {
|
|
|
+ return options.data || null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Class.prototype.config = {
|
|
|
+ version: "1.0.0"
|
|
|
+ , Author: "谁家没一个小强"
|
|
|
+ , generateId: 0
|
|
|
+ , data: []
|
|
|
+ , isEnter: false
|
|
|
+ };
|
|
|
+
|
|
|
+ /* 自动生成ID 当前页面自动排序*/
|
|
|
+ Class.prototype.autoId = function (tag) {
|
|
|
+ var that = this,
|
|
|
+ options = that.config;
|
|
|
+ options.generateId = options.generateId + 1;
|
|
|
+ return tag + '_' + options.generateId;
|
|
|
+ }
|
|
|
+
|
|
|
+ Class.prototype.components = {
|
|
|
+ label: {
|
|
|
+ render: function (json,options) {
|
|
|
+ // var _html = '<blockquote class="layui-elem-quote">';
|
|
|
+ var _html = ''
|
|
|
+ _html += '<div class="layui-form layui-form-pane layui-form-item" style="clear:none">';
|
|
|
+ // _html += '<label class="layui-form-label">输入手机号</label>';
|
|
|
+ _html += '<div class="layui-input-inline" >';
|
|
|
+ if (options.isEnter) {
|
|
|
+ _html += '<input type="text" id="{0}" lay-verify="required" placeholder="请输入手机号 按回车生成" autocomplete="off" class="layui-input">'
|
|
|
+ .format(json.id);
|
|
|
+ } else {
|
|
|
+ _html += '<input type="text" id="{0}" lay-verify="required" placeholder="通过按钮生成标签" autocomplete="off" class="layui-input">'
|
|
|
+ .format(json.id);
|
|
|
+ }
|
|
|
+ _html += '</div>';
|
|
|
+ if (!options.isEnter) {
|
|
|
+ _html += '<button type="button" id="{0}-button" class="layui-btn layui-btn-normal">确定</button>'.format(json.id);
|
|
|
+ }
|
|
|
+ _html += '<div class="layui-input-inline">';
|
|
|
+ _html += '<div class=" generate" style="margin:0;line-height:38px;width:60px;text-align:center; border-color: #1E9FFF;background-color: #1E9FFF;color: #fff;cursor:pointer">确定</div>';
|
|
|
+ _html += '</div>';
|
|
|
+ // _html += '<label class="layui-form-label">颜色选择</label>';
|
|
|
+ // _html += '<div class="layui-input-inline">';
|
|
|
+ // _html += '<select lay-filter="{0}-switchTest">'.format(json.id);
|
|
|
+ // _html += '<option value="" selected>墨绿色</option>';
|
|
|
+ // _html += '<option value="layui-btn-primary">原始色</option>';
|
|
|
+ // _html += '<option value="layui-btn-normal">天蓝色</option>';
|
|
|
+ // _html += '<option value="layui-btn-warm">暖黄色</option>';
|
|
|
+ // _html += '<option value="layui-btn-danger">红色</option>';
|
|
|
+ // _html += '</select>';
|
|
|
+ // _html += '</div>';
|
|
|
+ _html += '</div>';
|
|
|
+ _html += '<div id="{0}-content"></div>'.format(json.id);
|
|
|
+ // _html += '</blockquote>';
|
|
|
+ return _html;
|
|
|
+ },
|
|
|
+ update: function (json) {
|
|
|
+
|
|
|
+ },
|
|
|
+ /* 获取对象 */
|
|
|
+ jsonData: function (id, that) {
|
|
|
+ //分配一个新的ID
|
|
|
+ var _json = JSON.parse(JSON.stringify(formField.label));
|
|
|
+ _json.id = id == undefined ? that.autoId(_json.tag) : id;
|
|
|
+ that.checkId(_json,that);
|
|
|
+ return _json;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /* 判定id是否重复*/
|
|
|
+ Class.prototype.checkId = function (json,that) {
|
|
|
+ if ($("#" + json.id + "-content").length != 0) {
|
|
|
+ json.id = that.autoId(json.tag);
|
|
|
+ that.checkId(json);
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Class.prototype.bindGridSortEvent = function (json) {
|
|
|
+ // var that = this
|
|
|
+ // , options = that.config;
|
|
|
+ // var formItemSort = Sortable.create(document.getElementById(json.id + "-content"), {
|
|
|
+ // group: {
|
|
|
+ // name: 'group' + json.id
|
|
|
+ // },
|
|
|
+ // animation: 1000,
|
|
|
+ // onEnd: function (evt) {
|
|
|
+ // var _values = $("#" + json.id + "-content").find("div");
|
|
|
+ // var ops = [];
|
|
|
+ // for (var i = 0; i < _values.length; i++) {
|
|
|
+ // ops.push({"ngColor": $(_values[i]).attr("ng-color"), "value": $(_values[i]).text()});
|
|
|
+ // }
|
|
|
+ // options.data = ops;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ /* 绑定事件*/
|
|
|
+ Class.prototype.deleteValue = function (value, ngValue) {
|
|
|
+ var that = this
|
|
|
+ , options = that.config;
|
|
|
+ for (var i = 0; i < options.data.length; i++) {
|
|
|
+ if (options.data[i].value === value && options.data[i].ngColor === ngValue) {
|
|
|
+ options.data.splice(i, 1);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 绑定事件*/
|
|
|
+ Class.prototype.bindPropertyEvent = function (_json) {
|
|
|
+ var that = this
|
|
|
+ , options = that.config;
|
|
|
+ var colorClass = "";
|
|
|
+ if (options.isEnter) {
|
|
|
+ $("#" + _json.id).keypress(function (event) {
|
|
|
+ if (event.which === 13) {
|
|
|
+ var _value = $(this).val();
|
|
|
+ if (!_value) {
|
|
|
+ layer.msg('请输入手机号!')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!/^1[3456789]\d{9}$/.test(_value)) {
|
|
|
+ layer.msg('手机号格式错误!')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let arr = $("#" + _json.id + "-content .layui-btn")
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if ($(arr[i]).text().trim() == _value) {
|
|
|
+ layer.msg('输入手机号重复!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // let arr1 = smsView.phoneSelect.getValue()
|
|
|
+ // arr1.push({
|
|
|
+ // children:undefined,
|
|
|
+ // name:_value,
|
|
|
+ // selected:false,
|
|
|
+ // value:_value
|
|
|
+ // })
|
|
|
+ // smsView.phoneSelect.setValue(arr1)
|
|
|
+ index = index + 1;
|
|
|
+ var _html = '<div class="layui-btn layui-btn-normal {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'
|
|
|
+ .format(colorClass, _value, _json.id + index, index);
|
|
|
+ $('.tags').append(_html);
|
|
|
+ // $("#" + _json.id + "-content").append(_html);
|
|
|
+ $("#" + _json.id).val('');
|
|
|
+ options.data.push({"ngColor": colorClass, "value": _value});
|
|
|
+
|
|
|
+ $("#" + _json.id + index + " .layui-icon-close").click(function () {
|
|
|
+ // let arr1 = smsView.phoneSelect.getValue()
|
|
|
+ // arr1.splice(arr1.findIndex(item=>{
|
|
|
+ // return item.value===$(this).parent().text()
|
|
|
+ // }),1)
|
|
|
+ // smsView.phoneSelect.setValue(arr1)
|
|
|
+ that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
|
|
|
+ $(this).parent().remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('.generate').click(function(){
|
|
|
+ var _value = $("#" + _json.id).val();
|
|
|
+ if (!_value) {
|
|
|
+ layer.msg('请输入手机号!')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!/^1[3456789]\d{9}$/.test(_value)) {
|
|
|
+ layer.msg('手机号格式错误!')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let arr = $("#" + _json.id + "-content .layui-btn")
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if ($(arr[i]).text().trim() == _value) {
|
|
|
+ layer.msg('输入手机号重复!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ index = index + 1;
|
|
|
+ var _html = '<div class="layui-btn layui-btn-normal {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'
|
|
|
+ .format(colorClass, _value, _json.id + index, index);
|
|
|
+ $('.tags').append(_html);
|
|
|
+ // $("#" + _json.id + "-content").append(_html);
|
|
|
+ $("#" + _json.id).val('');
|
|
|
+ options.data.push({"ngColor": colorClass, "value": _value});
|
|
|
+
|
|
|
+ $("#" + _json.id + index + " .layui-icon-close").click(function () {
|
|
|
+ // let arr1 = smsView.phoneSelect.getValue()
|
|
|
+ // arr1.splice(arr1.findIndex(item=>{
|
|
|
+ // return item.value===$(this).parent().text()
|
|
|
+ // }),1)
|
|
|
+ // smsView.phoneSelect.setValue(arr1)
|
|
|
+ that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
|
|
|
+ $(this).parent().remove();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ $("#" + _json.id + "-button").click(function (event) {
|
|
|
+ var _value = $("#" + _json.id).val();
|
|
|
+ index = index + 1;
|
|
|
+ var _html = '<div class="layui-btn {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'
|
|
|
+ .format(colorClass, _value, _json.id + index, index);
|
|
|
+ $("#" + _json.id + "-content").append(_html);
|
|
|
+ options.data.push({"ngColor": colorClass, "value": _value});
|
|
|
+ $("#" + _json.id + index + " .layui-icon-close").click(function () {
|
|
|
+ that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
|
|
|
+ $(this).parent().remove();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ form.on('select(' + _json.id + '-switchTest)', function (data) {
|
|
|
+ colorClass = data.value;
|
|
|
+ });
|
|
|
+ for (var i = 0; i < options.data.length; i++) {
|
|
|
+ index = index + 1;
|
|
|
+ // var _html = '<div class="layui-btn {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'
|
|
|
+ // .format(options.data[i].ngColor, options.data[i].value, _json.id + index, index);
|
|
|
+ // $("#" + _json.id + "-content").append(_html);
|
|
|
+ $("#" + _json.id + index + " .layui-icon-close").click(function () {
|
|
|
+ that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
|
|
|
+ $(this).parent().remove();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 渲染组件 */
|
|
|
+ Class.prototype.renderComponents = function () {
|
|
|
+ var that = this
|
|
|
+ , options = that.config;
|
|
|
+ var elem = $(options.elem);
|
|
|
+ elem.empty();
|
|
|
+ var jsonData = that.components['label'].jsonData(undefined, that);
|
|
|
+ elem.append(that.components['label'].render(jsonData,options));
|
|
|
+ that.bindPropertyEvent(jsonData);
|
|
|
+ // that.bindGridSortEvent(jsonData);
|
|
|
+ form.render();
|
|
|
+ }
|
|
|
+
|
|
|
+ Class.prototype.reload = function (options) {
|
|
|
+ var that = this;
|
|
|
+ options = options || {};//如果是空的话，就赋值 {}
|
|
|
+ that.config = $.extend({}
|
|
|
+ , that.config
|
|
|
+ , labelGeneration.config
|
|
|
+ , options);
|
|
|
+ that.render();
|
|
|
+ }
|
|
|
+
|
|
|
+ //核心入口 初始化一个 regionSelect 类
|
|
|
+ labelGeneration.render = function (options) {
|
|
|
+ var ins = new Class(options);
|
|
|
+ return thisIns.call(ins);
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 渲染组件
|
|
|
+ */
|
|
|
+ Class.prototype.render = function (options) {
|
|
|
+ var that = this
|
|
|
+ , options = that.config;
|
|
|
+ that.renderComponents();
|
|
|
+ }
|
|
|
+
|
|
|
+ String.prototype.format = function (args) {
|
|
|
+ var result = this;
|
|
|
+ if (arguments.length > 0) {
|
|
|
+ if (arguments.length == 1 && typeof (args) == "object") {
|
|
|
+ for (var key in args) {
|
|
|
+ if (args[key] != undefined) {
|
|
|
+ var reg = new RegExp("({" + key + "})"
|
|
|
+ , "g");
|
|
|
+ result = result.replace(reg
|
|
|
+ , args[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var i = 0; i < arguments.length; i++) {
|
|
|
+ if (arguments[i] != undefined) {
|
|
|
+ var reg = new RegExp("({[" + i + "]})"
|
|
|
+ , "g");
|
|
|
+ result = result.replace(reg
|
|
|
+ , arguments[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ exports(MOD_NAME, labelGeneration);
|
|
|
+});
|
elis