204 lines
8.6 KiB
HTML
204 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>文件上传</title>
|
|
<link rel="stylesheet" type="text/css" media="screen" href="../../layui-v2.8.3/layui/css/layui.css">
|
|
<style>
|
|
th,td{
|
|
text-align: center !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="pear-container">
|
|
<div class="layui-card"> <!-- 上半截卡片容器 -->
|
|
<div class="layui-upload layui-card-body">
|
|
<form class="form-inline layui-form" onsubmit="return false">
|
|
<div class="layui-form-item layui-inline">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label"><i style="color: red;font-size: 20px">*</i>文件类型</label>
|
|
<div class="layui-input-inline">
|
|
<select name="fileType" id="fileType" class="layui-select" style="width: 200px">
|
|
<option value="">请选择文件类型</option>
|
|
<option value="voucher">凭证</option>
|
|
<option value="wages">工资</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">费用月份</label>
|
|
<div class="layui-input-inline">
|
|
<input name="month" id="month" class="layui-input" style="width: 200px" />
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">备注</label>
|
|
<div class="layui-input-inline">
|
|
<input name="remarks" id="remarks" class="layui-input" style="width: 200px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item layui-inline" style="float: right;">
|
|
<div class="layui-inline">
|
|
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
|
|
<button type="button" id="uploadExcel" class="layui-btn layui-btn-normal layui-btn-danger" id="testAction">开始上传</button>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline" style="float: right;">
|
|
<button type="button" class="layui-btn" onclick="downloadVoucher()">下载凭证模板</button>
|
|
<button type="button" class="layui-btn" onclick="downloadWages()">下载工资册模板</button>
|
|
<button type="button" class="layui-btn" onclick="downloadNewWages()" style="display: none">下载工资册模板（贵阳）</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card"><!-- 下半截卡片容器 -->
|
|
<div class="layui-upload-list">
|
|
<table class="layui-table">
|
|
<thead>
|
|
<tr style="margin-left: 50px">
|
|
<th>文件名</th>
|
|
<th>大小</th>
|
|
<th>状态</th>
|
|
<th style="width: 150px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="fileList"></tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="../../js/libs/jquery-3.6.0.js"></script>
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
|
<script type="text/javascript" src="../../layui-v2.8.3/layui/layui.js"></script>
|
|
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
|
<script>
|
|
layui.use(['layer','upload','laydate'], function () {
|
|
var $ = layui.$;
|
|
var upload = layui.upload;
|
|
var layer = layui.layer;
|
|
var laydate = layui.laydate;
|
|
|
|
laydate.render({
|
|
elem: '#month',
|
|
format: 'yyyy-MM',
|
|
type:'month',
|
|
value:new Date()
|
|
});
|
|
|
|
//多文件列表
|
|
var fileListView = $('#fileList')
|
|
, uploadListIns = upload.render({
|
|
elem: '#testList'
|
|
, url: ctxPath + '/wages/uploadFileTwo'
|
|
, accept: 'file'
|
|
, multiple: true
|
|
, auto: false
|
|
, exts: 'xls|xlsx'
|
|
, size: 1024*500
|
|
, bindAction: '#uploadExcel'
|
|
, before: function () {
|
|
var photoType = $("#fileType").val();
|
|
var fileType = $("#fileType option:selected").text();
|
|
var remarks = $("#remarks").val();
|
|
var month = $("#month").val();
|
|
this.data = {
|
|
"fileType": fileType,
|
|
"photoType":photoType,
|
|
"month":month,
|
|
"remarks":remarks,
|
|
"type": "2"
|
|
};
|
|
layer.load();
|
|
}
|
|
, choose: function (obj) {
|
|
uploadListIns.config.elem.next()[0].value = '';
|
|
var fileType = $("#fileType").val();
|
|
var month = $("#month").val();
|
|
if (fileType == '') {
|
|
layer.msg("请选择上传文件类型", {
|
|
icon: 0,
|
|
time: 1000
|
|
});
|
|
}else if (month == null || month == "") {
|
|
layer.msg("请选择费用所属月份", {
|
|
icon: 0,
|
|
time: 1000
|
|
});
|
|
}else {
|
|
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
|
//读取本地文件
|
|
obj.preview(function (index, file) {
|
|
var tr = $(['<tr id="upload-' + index + '">'
|
|
, '<td>' + file.name + '</td>'
|
|
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
|
|
, '<td>等待上传</td>'
|
|
, '<td>'
|
|
, '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
|
|
, '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
|
|
, '</td>'
|
|
, '</tr>'].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 值，以免删除后出现同名文件不可选
|
|
});
|
|
|
|
fileListView.append(tr);
|
|
});
|
|
}
|
|
}
|
|
, done: function (res, index, upload) {
|
|
layer.closeAll("loading");
|
|
if (res.code == 200) { //上传成功
|
|
var tr = fileListView.find('tr#upload-' + index)
|
|
, tds = tr.children();
|
|
tds.eq(2).html('<span style="color:#5FB878;">上传成功</span>');
|
|
tds.eq(3).html(''); //清空操作
|
|
return delete this.files[index]; //删除文件队列已经上传成功的文件
|
|
} else {
|
|
var tr = fileListView.find('tr#upload-' + index)
|
|
, tds = tr.children();
|
|
tds.eq(2).html('<span style="color:#FF5722;">'+ res.msg +'</span>');
|
|
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
|
}
|
|
this.error(index, upload);
|
|
}
|
|
, error: function (res,index) {
|
|
layer.closeAll("loading");
|
|
var tr = fileListView.find('tr#upload-' + index)
|
|
, tds = tr.children();
|
|
tds.eq(2).html('<span style="color:#FF5722;">上传失败</span>');
|
|
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
|
}
|
|
});
|
|
});
|
|
|
|
function downloadVoucher() {
|
|
window.open(ctxPath + "/download/download?filename=凭证导入模版.xlsx")
|
|
}
|
|
|
|
function downloadWages() {
|
|
window.open(ctxPath + "/download/download?filename=建设银行工资导入模板.xlsx")
|
|
}
|
|
|
|
/**
|
|
* 下载工资册模板（贵阳）
|
|
* */
|
|
function downloadNewWages() {
|
|
window.open(ctxPath + "/download/download?filename=jh_gy_gzc.xlsx")
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |