jjhc
/
odd_job


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="/static/echoui/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="/static/echoui/style/admin.css" media="all">
	</head>
	<body>
		
		<style>
			.layui-table-cell{ height:auto !important; }
			.picbox{ width: 75px; height: 75px; background-color: #F0F0F0; border: 1px solid #DDDDDD; display: table-cell; vertical-align: middle; text-align: center; padding: 1px; }
			.picbox img{ max-width: 100%; max-height: 100%; vertical-align: middle; }
		</style>

		<!-- <div class="layui-fluid"> -->
			<div class="layui-card" style="margin: 0px;">
				<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-attachment-image-imagelist-search">
					<div class="layui-form-item">
						<div class="layui-inline">
							<button class="layui-btn layui-btn-danger attachment-btn" data-type="batchdel">
								<i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i> 批量删除
							</button>
						</div>
						<div class="layui-inline">
							<input type="text" name="keywords" placeholder="请输入文件名关键字" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline" id="yearmonth"></div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-attachment-image-imagelist-search-btn">
								<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
							</button>
							<button class="layui-btn" id="attachment-upload-images">
								<i class="layui-icon layui-icon-upload layuiadmin-button-btn"></i> 上传图片
							</button>
						</div>
					</div>
				</div>
				
				<div class="layui-card-body">
					<table id="LAY-attachment-image-imagelist-table" lay-filter="LAY-attachment-image-imagelist-table"></table>
					<script type="text/html" id="attachmentTpl">
						<div id="pic{{d.id}}" class="picbox" lay-event="pic">
							<img src="{{d.attachment}}" alt="{{d.filename}}">
						</div>
					</script>
					<script type="text/html" id="setTpl">
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
					</script>
				</div>
				
			</div>
		<!-- </div> -->

		<script src="/static/echoui/layui/layui.js"></script>
		<script>
			layui.config({
				base: '/static/echoui/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'form', 'set', 'table', 'upload', 'selectN','selectM'], function() {
				var $ = layui.$,
					setter = layui.setter,
					admin = layui.admin,
					form = layui.form,
					table = layui.table,
					upload = layui.upload,
					selectN = layui.selectN,
					selectM = layui.selectM;
				form.render();
				
				var yearmonth = selectN({
					elem: '#yearmonth',
					search:[false,true],
					tips:["请选择上传年份","请选择上传月份"],
					data: {$yearmonth|raw},
					field:{idName:'key',titleName:'val',childName:'month'}
				}); 
				
				//列表
				table.render({
					elem: '#LAY-attachment-image-imagelist-table',
					url: setter.baseUrl + 'admin/attachment/listimage',
					cols: [[
						{type: 'checkbox'},
						{field: 'attachment', width: 140, title: '图片', templet: '#attachmentTpl', align: 'center'},
						{field: 'filename', title: '文件名', edit: 'text'},
						{field: 'createtime', title: '上传时间'},
						{title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#setTpl'}
					]],
					page: true,
					limit: 20,
					height: 'full-100',
					text: '对不起，加载出现异常！',
					// skin: 'line'
				});
				
				form.on('submit(LAY-attachment-image-imagelist-search-btn)', function(data) {
					table.reload('LAY-attachment-image-imagelist-table', {
						where: data.field,
						page: {
							curr: 1
						}
					});
				});
				
				// 上传
				upload.render({
					elem: '#attachment-upload-images',
					url: setter.baseUrl + 'admin/attachment/tplfieldimage',
					accept: 'images',
					exits: 'jpg|png|jpeg',
					acceptMime: 'image/*',
					size: 2048,
					number: 1,
					method: 'post',
					before: function(obj) {
						layer.load();
					},
					done: function(res, index, upload) {
						layer.closeAll('loading');
						table.reload('LAY-attachment-image-imagelist-table', {
							page: {
								curr: 1
							}
						});
					},
					error: function(index, upload){
						layer.closeAll('loading');
					}
				});

				//事件
				var active = {
					batchdel: function() {
						var checkStatus = table.checkStatus('LAY-attachment-image-imagelist-table'),
							checkData = checkStatus.data;
						if (checkData.length === 0) {
							return layer.msg('请选择数据');
						}
						var idarr = [];
						for (var i = 0; i < checkData.length; i++) {
							idarr.push(checkData[i].id);
						}
						layer.confirm('确定删除所选图片吗？', function(index) {
							admin.req({
								url: setter.baseUrl + 'admin/attachment/delattachment',
								data: {
									idarr: idarr
								},
								done: function(res) {
									table.reload('LAY-attachment-image-imagelist-table');
									layer.msg('已删除');
								}
							});
							layer.close(index);
						});
					}
				};
				
				//监听单元格编辑
				table.on('edit(LAY-attachment-image-imagelist-table)', function(obj){
					var id = obj.data.id,
						field = obj.field,
						value = obj.value;
					admin.req({
						url: setter.baseUrl + 'admin/attachment/fieldattachment',
						data: {id: id, field: field, value: value},
						done: function(res) {
							layer.msg('修改成功');
						}
					});
				});
				
				//监听工具条
				table.on('tool(LAY-attachment-image-imagelist-table)', function(obj) {
					var data = obj.data;
					if (obj.event === 'del') {
						layer.confirm('确定删除此图片吗？', function(index) {
							admin.req({
								url: setter.baseUrl + 'admin/attachment/delattachment',
								data: {
									idarr: [data.id]
								},
								done: function(res) {
									obj.del();
									layer.msg('已删除');
								}
							});
							layer.close(index);
						});
					} else if (obj.event === 'pic') {
						layer.photos({
							photos: '#pic' + data.id,
							anim: 5,
						}); 
					}
				});
				
				$('.attachment-btn').on('click', function(){
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
	
	</body>
</html>