/**
+------------------------------------------------------------------------------------+
+ ayq-layui-form-designer(layui表单设计器)
+------------------------------------------------------------------------------------+
+ ayq-layui-form-designer v1.1.6
* MIT License By http://116.62.237.101:8009/
+ 作者：谁家没一个小强
+ 官方：
+ 时间：2021-06-23
+------------------------------------------------------------------------------------+
+ 版权声明：该版权完全归谁家没一个小强所有，可转载使用和学习，但请务必保留版权信息
+------------------------------------------------------------------------------------+
+ 本项目是一个基于layui表单组件的表单设计器
+ 1.本项目基于Layui、Jquery、Sortable
+ 2.项目已经基本实现了拖动布局，父子布局
+ 3.项目实现了大部分基于Layui的Form表单控件布局，包括输入框、编辑器、下拉、单选、单选组、多选组、日期、滑块、评分、轮播、图片、颜色选择、图片上传、文件上传
+ 4.表单数据的获取与回显,禁用全表单
+------------------------------------------------------------------------------------+
*/
layui.define(['layer', 'laytpl', 'element', 'form', 'slider', 'laydate', 'rate', 'colorpicker', 'carousel', 'upload', 'formField',"numberInput","iconPicker", "cron","labelGeneration"]
, function (exports) {
var $ = layui.jquery
, layer = layui.layer
, laytpl = layui.laytpl
, setter = layui.cache
, element = layui.element
, slider = layui.slider
, laydate = layui.laydate
, rate = layui.rate
, colorpicker = layui.colorpicker
, carousel = layui.carousel
, form = layui.form
, upload = layui.upload
, formField = layui.formField
, hint = layui.hint
, numberInput = layui.numberInput
, iconPicker = layui.iconPicker
, cron = layui.cron
, labelGeneration = layui.labelGeneration
, iceEditorObjects = {}
, labelGenerationObjects = {}
, signObjects = {}
, files = []
, images = []
, guid = function () {
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
, lang = {
id: "标识",
label: "标题",
index: "序号",
tag: "表单类型",
tagIcon: '图标',
width: '宽度',
height: "高度",
span: '网格宽度',
placeholder: "placeholder",
defaultValue: "默认值",
labelWidth: "文本宽度",
clearable: "是否清楚",
prepend: "前缀",
append: "",
prefixIcon: '前缀图标',
suffixIcon: '后缀图标',
maxlength: "最大长度",
showWordLimit: "是否限制字符",
readonly: "只读",
disabled: "禁用",
required: "必填",
columns: "列数",
options: "选项",
switchValue: "默认值",
maxValue: "最大值",
minValue: "最小值",
stepValue: "步长",
datetype: "日期类型",
dateformat: "日期格式",
half: "显示半星",
theme: "皮肤",
rateLength: "星星个数",
interval: "间隔毫秒",
autoplay: "自动播放",
startIndex: "开始位置",
full: "是否全屏",
arrow: "鼠标样式",
contents: "内容",
document: '帮助文档',
input: "输入框",
select: "下拉",
checkbox: "多选组",
radio: "单选组",
date: "日期",
editor: "编辑器",
slider: "滑块",
image: "图片",
grid: "一行多列",
colorpicker: "颜色选择器",
textarea: "多行文本",
rate: "评分控件",
switch: "开关",
password: "密码框",
carousel: "轮播",
uploadUrl: "上传路径",
urlPrefix: "上传前缀",
uploadData: '上传参数',
expression: "验证",
file: "文件",
numberInput:"排序文本框",
iconPicker:"图标选择器",
cron:"Cron表达式",
cronUrl:"运行路径",
bottom:"按钮组件",
}
, MOD_NAME = 'formPreview'
, ELEM = '.layui-form-designer'
, TPL_SUBMIT = [''].join('')
//外部接口
, formPreview = {
index: layui.formPreview ? (layui.formPreview.index + 10000) : 0
//设置全局项
, 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);
}
}
/**
* 操作当前实例
* id 表示当前实例的索引 默认就是内部的 index，如果id存在值 那么就从已经存在的获取
*/
, 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;
},geticeEditorObjects:function () {
return iceEditorObjects || null;
},getImages:function () {
return images || null;
},getFiles:function () {
return files || null;
},getFormData:function () {
return that.getFormData() || null;
},setFormData:function (json) {
return that.setFormData(json) || null;
},globalDisable:function () {
return that.globalDisable() || null;
},globalNoDisable:function () {
return that.globalNoDisable() || null;
},
}
}
, getThisInsConfig = function (id) {
var config = thisIns.config[id];
if (!config) {
hint.error('The ID option was not found in the table instance');
}
return config || null;
}
, Class = function (options) {
var that = this;
that.index = ++formPreview.index; //增加实例，index 也是要增加
that.config = $.extend({}
, that.config
, formPreview.config
, options);
that.render();
};
/* 此方法最后一道 commom.js 中 */
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;
}
Class.prototype.config = {
version: "1.0.0"
, formName: "表单示例"
, Author: "谁家没一个小强"
, formId: "id"
, generateId: 0
, data: []
, formData:{}
, selectItem: undefined
};
/* 自动生成ID 当前页面自动排序*/
Class.prototype.autoId = function (tag) {
var that = this,
options = that.config;
options.generateId = options.generateId + 1;
return tag + '_' + options.generateId;
};
/* 组件定义 */
Class.prototype.components = {
input: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _readonly = json.readonly ? 'readonly=""' : '';
var _required = json.required ? 'required' : '';
if (json.expression !== null && json.expression !== undefined ) {
if (json.expression !== '') {
_required = _required + '|' + json.expression;
}
}
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.input));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
}
},
numberInput: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _required = json.required ? 'required' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.numberInput));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
}
},
labelGeneration: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = '';
return _html;
},
update: function (json,value) {
$('#' + json.id + ' .layui-input-block').empty();
var _html = '';
//重绘设计区改id下的所有元素
_html += ''.format(json.tag + json.id);
$('#' + json.id + ' .layui-input-block').append(_html);
var labelGenerationObject = labelGeneration.render({
elem:'#' + json.tag + json.id,
data:value,
isEnter:json.isEnter
});
labelGenerationObjects[json.id] = labelGenerationObject;
if (json.disabled) {
$("#" + json.id).find(".layui-input-block").append('');
} else {
$("#" + json.id).find(".iceEditor-disabled").remove();
}
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.labelGeneration));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
},
},
iconPicker: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _required = json.required ? 'required' : '';
var _html = '';
return _html;
}, update: function (json,value) {
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
$('#' + json.id + ' .layui-input-block').empty();
var _html = '';
//重绘设计区改id下的所有元素
_html += ''
.format(json.id, value ? value : '', json.width, json.placeholder, _disabled, _disabledClass,json.tag + json.id);
$('#' + json.id + ' .layui-input-block').append(_html);
iconPicker.render({
// 选择器，推荐使用input
elem: '#' + json.tag + json.id,
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false，默认true
search: json.iconPickerSearch,
// 是否开启分页：true/false，默认true
page: json.iconPickerPage,
// 每页显示数量，默认12
limit: json.iconPickerLimit,
// 每个图标格子的宽度：'43px'或'20%'
cellWidth: json.iconPickerCellWidth,
// 点击回调
click: function (data) {
//console.log(data);
},
// 渲染成功后的回调
success: function(d) {
//console.log(d);
}
});
iconPicker.checkIcon(json.tag + json.id, value);
if (json.disabled) {
$("#" + json.id).find(".layui-input-block").append('');
} else {
$("#" + json.id).find(".iceEditor-disabled").remove();
}
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.iconPicker));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
},
},
cron: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _required = json.required ? 'required' : '';
var _width = json.width.replace(/[^\d]/g,'');
if(''!=_width){
_width = 100 - parseInt(_width);
}
var _html = '';
return _html;
},
update: function (json,value) {
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
$('#' + json.id + ' .layui-input-block').empty();
var _html = '';
//重绘设计区改id下的所有元素
_html += ''
.format(json.id, value ? value : '', json.width, json.placeholder, _disabled, _disabledClass,json.tag + json.id);
if (!json.disabled) {
var _width = json.width.replace(/[^\d]/g,'');
if(''!=_width){
_width = 100 - parseInt(_width);
}
_html += ''.format(json.tag + json.id,_width);
$('#' + json.id + ' .layui-input-block').append(_html);
cron.render({
elem: "#" + json.tag + json.id + "-button", // 绑定元素
url: json.cronUrl, // 获取最近运行时间的接口
value: value, // 默认值
done: function (cronStr) {
$("#" + json.tag + json.id).val(cronStr);
},
});
} else {
$('#' + json.id + ' .layui-input-block').append(_html);
}
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.cron));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
},
},
password: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _readonly = json.readonly ? 'readonly=""' : '';
var _required = json.required ? 'lay-verify="required"' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.password));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
select: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'required' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.select));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
radio: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.radio));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
checkbox: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'lay-verify="otherReq"' : '';
var _html = '';
return _html;
},
update: function (json) {
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'lay-verify="otherReq"' : '';
$('#' + json.id + ' .layui-input-block').empty();
var _html = '';
//重绘设计区改id下的所有元素
for (var i = 0; i < json.options.length; i++) {
_html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled,_required);
}
$('#' + json.id + ' .layui-input-block').append(_html);
form.render('checkbox');
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.checkbox));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
switch: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.switch));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
slider: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _html = '';
return _html;
},
update: function (json,value) {
slider.render({
elem: '#' + json.tag + json.id,
value: value, //初始值
min: json.minValue,
max: json.maxValue,
step: json.stepValue,
disabled: json.disabled,
input:json.isInput,
change: function(_value){
$("#" + json.id).find("input[name=" + json.id + "]").val(_value);
}
});
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.slider));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
date: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.date));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},bottom: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _coustomCss = "";
if (json.buttonSize === "layui-btn-lg") {
_coustomCss = "custom-lg";
}
if (json.buttonSize === "") {
_coustomCss = "custom-zc";
}
if (json.buttonSize === "layui-btn-sm") {
_coustomCss = "custom-sm";
}
if (json.buttonSize === "layui-btn-xs") {
_coustomCss = "custom-xs";
}
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.bottom));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
}
},sign: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = '';
return _html;
},
update: function (json,value) {
$('#' + json.id + ' .layui-input-block').empty();
var _html = '';
//重绘设计区改id下的所有元素
if (json.disabled) {
_html += ''.format(json.id + json.tag ,json.buttonIcon,json.buttonVlaue);
}else {
_html += ''.format(json.id + json.tag ,json.buttonIcon,json.buttonVlaue);
}
if (value !== "") {
_html += ''.format(value);
signObjects[json.id] = value;
}
$('#' + json.id + ' .layui-input-block').append(_html);
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.sign));
_json.id = id == undefined ? autoId(_json.tag) : id;
_json.index = index;
return _json;
},
},dateRange: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.dateRange));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
},
},
rate: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _readonly = json.readonly ? 'readonly=""' : '';
var _required = json.required ? 'required=""' : '';
var _html = '';
return _html;
},
update: function (json,value) {
rate.render({
elem: '#' + json.tag + json.id,
value: value,
text: json.text,
half: json.half,
length: json.rateLength,
readonly: json.readonly,
choose: function(_value){
$("#" + json.id).find("input[name=" + json.id + "]").val(_value);
}
});
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.rate));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
carousel: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.carousel));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
colorpicker: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = '';
return _html;
},
update: function (json,value) {
if (json.disabled) {
$("#" + json.id).find(".layui-input-block").append('');
} else {
$("#" + json.id).find(".iceEditor-disabled").remove();
}
colorpicker.render({
elem: '#' + json.tag + json.id
,color: value
,format: 'rgb'
,predefine: true
,alpha: true
,done: function (color) {
$("#" + json.id).find("input[name=" + json.id + "]").val(color);
}
});
$("#" + json.id).find("input[name=" + json.id + "]").val(value);
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.colorpicker));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
image: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _html = '';
return _html;
},
/* 获取对象 */
jsonData: function (id, index, columncount) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.image));
_json.id = id == undefined ? guid() : id;
_json.index = index;
return _json;
}
},
textarea: {
/**
* 根据json对象生成html对象
* @param {object} json
* @param {boolean} selected true 表示选择当前
* */
render: function (json, selected) {
if (selected === undefined) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'lay-verify="required"' : '';
var _readonly = json.readonly ? 'readonly=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _html = ''.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '
'.format(json.required ? 'layui-form-required' : '', json.label);
_html += '
';
_html += ''
.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
_html += '
';
_html += '
'.format(json.id, json.tag, selected ? 'active' : '', json.index,json.width);
_html += '
'.format(json.label,json.width);
_html += '
';
// if(selected){
// _html +='
';
// }
_html += '
' +
'
' +
'
' +
'
' + imageList[i] + '
' +
'
' +
'
' +
'
' +
'
' + res.data[i].title + '
' +
'
' +
'
' +
'
' +
'
' + res.data.title + '
' +
'
'
, '| ' + file.name + ' | '
, '' + (file.size / 1014).toFixed(1) + 'kb | '
, ' | '
, ''
, ''
, ''
, ' | '
, '
'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
, done: function (res, index, upload) { //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
}
, allDone: function (obj) { //多文件上传完毕后的状态回调
console.log(obj)
}
, error: function (index, upload) { //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
, progress: function (n, elem, e, index) {
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
}
});
};
/* 重新渲染设计区*/
Class.prototype.renderForm = function () {
var that = this
, options = that.config;
var elem = $('#formPreviewForm');
//清空
elem.empty();
that.renderComponents(options.data, elem);
if (!!options.openSubmit) {
elem.append(TPL_SUBMIT);
}
that.setFormData(options.formData);
form.render();//一次性渲染表单
if (options.data.length != 0) {
for (let i = 0; i < options.data.length ; i++) {
if (options.data[i].tag === 'grid') {
for (let j = 0; j < options.data[i].columns.length; j++) {
for (let k = 0; k < options.data[i].columns[j].list.length; k++) {
if (options.data[i].columns[j].list[k].tag === 'select') {
$('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].columns[j].list[k].width)});
}
}
}
} else {
if (options.data[i].tag === 'select') {
$('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].width)});
}
}
}
}
};
//核心入口 初始化一个 regionSelect 类
formPreview.render = function (options) {
var defaults = {
readonly: true,//是否只读
formStyle: false,
canformitems:[] //是否可修改
};
options = $.extend(defaults, options);
var ins = new Class(options);
return thisIns.call(ins);
};
exports('formPreview'
, formPreview);
}); 
'.format(json.data);
}
_html += '