tt-5-php-6001/plugin/admin/public/component/pear/module/design.js

layui.define(['layer', 'form'], function(exports) {
	var layer = layui.layer,
		form = layui.form,
		$ = layui.$,
		key = '',
		allJS = '',
	    allHtml = '';
	    let module = ["form"];
	delHtml()
	$('button').on('click', function() {
		var _this = $(this),
			size = _this.data('size'),
			type = _this.data('type'),
			html = '';
		key = randStrName();
		switch (type) {
			case 'text':
				html = input(type, size)
				break;
			case 'password':
				html = input(type, size)
				break;
			case 'select':
				html = select(size)
				break;
			case 'checkbox_a':
				html = checkbox_a(size)
				break;
			case 'checkbox_b':
				html = checkbox_b(size)
				break;
			case 'radio':
				html = radio(size)
				break;
			case 'textarea':
				html = textarea(size)
				break;
			case 'icon':
				html = icon(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['iconPicker'], function() {
					layui.iconPicker.render({
						elem: "#" + key,
						type: "fontClass",
					});
				});
				if (module.indexOf('iconPicker') === -1) module.push('iconPicker');
				allJS += '    // 图标选择\n' +
					'    layui.iconPicker.render({\n' +
					'       elem: "#' + key + '",\n' +
					'       type: "fontClass",\n' +
					'    });\n';
				$('.js-show').text(jscode())
				return;
			case 'multiSelect':
				html = multiSelect(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['xmSelect'], function() {
					layui.xmSelect.render({
						el: "#" + key,
						name: key,
						data: [{value: 1, name: "深圳"},{value: 2, name: "上海"},{value: 3, name: "广州"}],
					});
				});
				if (module.indexOf('xmSelect') === -1) module.push('xmSelect');
				allJS += '    // 下拉多选\n' +
					'    layui.xmSelect.render({\n' +
					'       el: "#' + key + '",\n' +
					'       name: "' + key + '",\n' +
					'       data: [{value: 1, name: "深圳"},{value: 2, name: "上海"},{value: 3, name: "广州"}],\n' +
					'    });\n';
				$('.js-show').text(jscode())
				return;
			case 'tree':
				html = tree(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['xmSelect'], function() {
					layui.xmSelect.render({
						el: "#" + key,
						name: key,
						tree: {show: true},
						data: [{value: 1, name: "广东省", children:[{value: 2, name: "深圳"},{value: 3, name: "广州"}]},{value: 4, name: "福建省", children:[{value: 5, name: "厦门"},{value: 6, name: "福州"}]}],
					});
				});
				if (module.indexOf('xmSelect') === -1) module.push('xmSelect');
				allJS += '    // 树多选\n' +
					'    layui.xmSelect.render({\n' +
					'       el: "#' + key + '",\n' +
					'       name: "' + key + '",\n' +
					'       tree: {show: true},\n' +
					'       data: [{value: 1, name: "广东省", children:[{value: 2, name: "深圳"},{value: 3, name: "广州"}]},{value: 4, name: "福建省", children:[{value: 5, name: "厦门"},{value: 6, name: "福州"}]}],\n' +
					'    });\n';
				$('.js-show').text(jscode())
				return;
			case 'treeSelectOne':
				html = treeSelectOne(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['xmSelect'], function() {
					layui.xmSelect.render({
						el: "#" + key,
						name: key,
						model: {"icon":"hidden","label":{"type":"text"}},
						clickClose: true,
						radio: true,
						tree: {show: true, strict: false, clickCheck: true, clickExpand: false},
						data: [{value: 1, name: "广东省", children:[{value: 2, name: "深圳"},{value: 3, name: "广州"}]},{value: 4, name: "福建省", children:[{value: 5, name: "厦门"},{value: 6, name: "福州"}]}],
					});
				});
				if (module.indexOf('xmSelect') === -1) module.push('xmSelect');
				allJS += '    // 树多选\n' +
					'    layui.xmSelect.render({\n' +
					'       el: "#' + key + '",\n' +
					'       name: "' + key + '",\n' +
					'       model: {"icon":"hidden","label":{"type":"text"}},\n' +
					'       clickClose: true,\n' +
					'       radio: true,\n' +
					'       tree: {show: true, strict: false, clickCheck: true, clickExpand: false},\n' +
					'       data: [{value: 1, name: "广东省", children:[{value: 2, name: "深圳"},{value: 3, name: "广州"}]},{value: 4, name: "福建省", children:[{value: 5, name: "厦门"},{value: 6, name: "福州"}]}],\n' +
					'    });\n';
				$('.js-show').text(jscode())
				return;
			case 'upload':
				html = upload(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['upload'], function() {
					let input = layui.$('#' + key).prev();
					input.prev().html(layui.util.escape(input.val()));
					layui.$("#attachment-choose-" + key).on('click', function() {
						parent.layer.open({
							type: 2,
							title: "选择附件",
							content: "/app/admin/upload/attachment",
							area: ["95%", "90%"],
							success: function (layero, index) {
								parent.layui.$("#layui-layer" + index).data("callback", function (data) {
									input.val(data.url).prev().html(layui.util.escape(data.url));
								});
							}
						});
					});
					layui.upload.render({
						elem: "#" + key,
						url: "/app/admin/upload/file",
						accept: "file",
						field: "__file__",
						done: function (res) {
							this.item.prev().val(res.data.url).prev().html(layui.util.escape(res.data.url));
						}
					});
				});
				if (module.indexOf('upload') === -1) module.push('upload');
				if (module.indexOf('util') === -1) module.push('util');
				allJS += '    // 上传文件\n' +
					'    layui.use([\'upload\'], function() {\n' +
					'      let input = layui.$("#'+key+'").prev();\n' +
					'      input.prev().html(layui.util.escape(input.val()));\n' +
					'      layui.$("#attachment-choose-'+key+'").on("click", function() {\n' +
					'        parent.layer.open({\n' +
					'          type: 2,\n' +
					'          title: "选择附件",\n' +
					'          content: "/app/admin/upload/attachment",\n' +
					'          area: ["95%", "90%"],\n' +
					'          success: function (layero, index) {\n' +
					'            parent.layui.$("#layui-layer" + index).data("callback", function (data) {\n' +
					'              input.val(data.url).prev().html(layui.util.escape(data.url));\n' +
					'            });\n' +
					'          }\n' +
					'        });\n' +
					'      });\n' +
					'    });\n' +
					'    layui.upload.render({\n' +
					'       elem: "#' + key + '",\n' +
					'       url: "/app/admin/upload/file",\n' +
					'       accept: "file",\n' +
					'       field: "__file__",\n' +
					'       done: function (res) {\n' +
					'         this.item.prev().val(res.data.url).prev().html(layui.util.escape(res.data.url));\n' +
					'       }\n' +
					'    });\n';
				$('.js-show').text(jscode())
				return;
			case 'uploadImg':
				html = uploadImg(size)
				$('form').append(html);
				form.render();
				setHtml(html);
				layui.use(['upload'], function() {
					let input = layui.$('#' + key).prev();
					input.prev().attr('src', input.val());
					layui.$('#attachment-choose-' + key).on('click', function() {
						parent.layer.open({
							type: 2,
							title: '选择附件',
							content: '/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp',
							area: ["95%", "90%"],
							success: function (layero, index) {
								parent.layui.$("#layui-layer" + index).data("callback", function (data) {
									input.val(data.url).prev().attr("src", data.url);
								});
							}
						});
					});
					layui.upload.render({
						elem: "#" + key,
						url: "/app/admin/upload/image",
						acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
						field: "__file__",
						done: function (res) {
							this.item.prev().val(res.data.url).prev().attr('src', res.data.url);
						}
					});
				});
				if (module.indexOf('upload') === -1) module.push('upload');
				allJS += '    // 上传图片\n' +
					'    layui.use([\'upload\'], function() {\n' +
					'      let input = layui.$("#'+key+'").prev();\n' +
					'      input.prev().attr(\'src\', input.val());\n' +
					'      layui.$("#attachment-choose-'+key+'").on("click", function() {\n' +
					'        parent.layer.open({\n' +
					'          type: 2,\n' +
					'          title: "选择附件",\n' +
					'          content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",\n' +
					'          area: ["95%", "90%"],\n' +
					'          success: function (layero, index) {\n' +
					'            parent.layui.$("#layui-layer" + index).data("callback", function (data) {\n' +
					'              input.val(data.url).prev().attr("src", data.url);\n' +
					'            });\n' +
					'          }\n' +
					'        });\n' +
					'      });\n' +
					'      layui.upload.render({\n' +
					'        elem: "#' + key + '",\n' +
					'        url: "/app/admin/upload/image",\n' +
					'        acceptMime: "image/gif,image/jpeg,image/jpg,image/png",\n' +
					'        field: "__file__",\n' +
					'        done: function (res) {\n' +
					'          this.item.prev().val(res.data.url).prev().attr(\'src\', res.data.url);\n' +
					'        }\n' +
					'     });\n' +
					'   });\n';
				$('.js-show').text(jscode())
				return;
			case 'submit':
				html = submits(size)
				break;
			case 'del':
				$('form').html("\n")
				delHtml()
				return false;
			default:
				layer.msg('类型错误', {
					icon: 2
				})
		}

		$('form').append(html);
		form.render();
		setHtml(html);
		$('.js-show').text(jscode())
	})

	function delHtml() {
		allHtml = '';
		allJS = '';
		$('.code-show').text('');
		$('.js-show').text(jscode());
	}

	function setHtml(html) {
		allHtml += html;
		$('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + allHtml + '</form>')
	}

	function icon(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">图标选择</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <input name="'+key+'" id="'+key+'" />\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function multiSelect(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">下拉多选</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <div name="'+key+'" id="'+key+'" ></div>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function tree(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">树多选</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <div name="'+key+'" id="'+key+'" ></div>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function treeSelectOne(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">树单选</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <div name="'+key+'" id="'+key+'" ></div>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function upload(size) {
		let uploadWords = size === "block" ? "上传文件" : "上传";
		let selectWords = size === "block" ? "选择文件" : "选择";
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">上传文件</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <span></span>\n' +
			'      <input type="text" style="display:none" name="'+key+'" value="" />\n' +
			'      <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="'+key+'" permission="app.admin.upload.file">\n' +
			'        <i class="layui-icon layui-icon-upload"></i>'+uploadWords+'\n' +
			'      </button>\n' +
			'      <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-'+key+'" permission="app.admin.upload.attachment">\n' +
			'	     <i class="layui-icon layui-icon-align-left"></i>'+selectWords+'\n' +
			'      </button>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function uploadImg(size) {
		let uploadWords = size === "block" ? "上传文件" : "上传";
		let selectWords = size === "block" ? "选择图片" : "选择";
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">上传图片</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <img class="img-3" src=""/>\n' +
			'      <input type="text" style="display:none" name="'+key+'" value="" />\n' +
			'      <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="'+key+'" permission="app.admin.upload.image">\n' +
			'        <i class="layui-icon layui-icon-upload"></i>'+uploadWords+'\n' +
		    '      </button>\n' +
			'      <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-'+key+'" permission="app.admin.upload.attachment">\n' +
			'	     <i class="layui-icon layui-icon-align-left"></i>'+selectWords+'\n' +
			'      </button>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function input(type, size) {
		var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">' + name + '</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <input type="' + type + '" name="' + key + '" required  lay-verify="required" placeholder="请输入' + name +
			'内容" autocomplete="off" class="layui-input">\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function select(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">选择框</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <select name="' + key + '" lay-verify="required" lay-search>\n' +
			'        <option value=""></option>\n' +
			'        <option value="0">北京</option>\n' +
			'        <option value="1">上海</option>\n' +
			'        <option value="2">广州</option>\n' +
			'        <option value="3">深圳</option>\n' +
			'        <option value="4">杭州</option>\n' +
			'      </select>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function checkbox_a(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">复选框</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <input type="checkbox" name="' + key + '[]" title="写作">\n' +
			'      <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
			'      <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function checkbox_b(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">开关</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function radio(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <label class="layui-form-label">单选框</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <input type="radio" name="' + key + '" value="男" title="男">\n' +
			'      <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function textarea(size) {
		var html = '  <div class="layui-form-item layui-form-text">\n' +
			'    <label class="layui-form-label">文本域</label>\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function submits(size) {
		var html = '  <div class="layui-form-item">\n' +
			'    <div class="layui-input-' + size + '">\n' +
			'      <button class="pear-btn pear-btn-primary" lay-submit="" lay-filter="formDemo">立即提交</button>\n' + //变更
			'      <button type="reset" class="pear-btn">重置</button>\n' + //变更
			'    </div>\n' +
			'  </div>\n';
		return html;
	}

	function jscode() {
		var html = '<script>\n' +
			'  layui.use('+JSON.stringify(module)+', function(){\n' +
			'    var form = layui.form;\n' +
			''+ allJS +
			'    // 提交表单\n' +
			'    form.on(\'submit(formDemo)\', function(data){\n' +
			'      layer.msg(JSON.stringify(data.field));\n' +
			'      return false;\n' +
			'    });\n' +
			'  });\n' +
			'</script>';
		return html;
	}

	function randStrName() {
		return 'a' + Math.random().toString(36).substr(9);
	}
	form.on('submit(formDemo)', function(data) {
		layer.msg(JSON.stringify(data.field));
		return false;
	});
	exports('design', {});
});