|
|
@@ -0,0 +1,201 @@
|
|
|
+<!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, maximum-scale=1">
|
|
|
+ <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
|
|
|
+ <link rel="stylesheet" href="../../css/public.css" media="all">
|
|
|
+ <link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="layuimini-container">
|
|
|
+ <div class="layuimini-main">
|
|
|
+
|
|
|
+ <div class="layui-fluid">
|
|
|
+ <div class="layui-card">
|
|
|
+ <div class="layui-card-body" style="padding-top: 40px;">
|
|
|
+ <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
|
|
|
+ <div carousel-item>
|
|
|
+ <div>
|
|
|
+ <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">模板下载:</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn layui-icon layui-icon-download-circle" lay-submit
|
|
|
+ lay-filter="downExcelTemplate">
|
|
|
+  点击下载模板
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">题目上传:</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <div class="layui-upload">
|
|
|
+ <button type="button" class="layui-btn layui-btn-normal"
|
|
|
+ id="selectFile">选择文件
|
|
|
+ </button>
|
|
|
+ <button style="display: none" type="button" class="layui-btn"
|
|
|
+ id="startUpload">开始上传
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn" lay-submit lay-filter="formStep">
|
|
|
+  解析 
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <table class="layui-hide" id="questionList"></table>
|
|
|
+ <div style="margin: 0 auto;width: 120px">
|
|
|
+ <button class="layui-btn" id="startImport">确定导入</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="text-align: center;margin-top: 90px;">
|
|
|
+ <i class="layui-icon layui-circle"
|
|
|
+ style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;"></i>
|
|
|
+ <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
|
|
|
+ 导入成功
|
|
|
+ </div>
|
|
|
+<!-- <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>-->
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;margin-top: 50px;">
|
|
|
+ <button class="layui-btn" onclick="location.reload()">再次导入</button>
|
|
|
+ <button class="layui-btn layui-btn-primary" id="close">关闭</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div id="sm" style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
|
|
|
+ <h3>说明</h3><br>
|
|
|
+ <h4>上传文件格式</h4>
|
|
|
+ <p>上传文件支持.xlsx</p>
|
|
|
+ <br><h4>上传须知</h4>
|
|
|
+ <p>下载模板,把题目滕到模板中,完成后删除末尾多余空格,<i style="color: red">尽量不要让单元格只有空格</i></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
|
|
|
+<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
|
|
|
+<script>
|
|
|
+ layui.use(['form', 'step', 'upload', 'table', 'http'], function () {
|
|
|
+ /**变-------------------------------量-------------------------------定-------------------------------义*/
|
|
|
+ var $ = layui.$,
|
|
|
+ form = layui.form,
|
|
|
+ upload = layui.upload,
|
|
|
+ http = layui.http,
|
|
|
+ table = layui.table,
|
|
|
+ isParsing = false,
|
|
|
+ step = layui.step,
|
|
|
+ uuid = '';
|
|
|
+
|
|
|
+ /**方-------------------------------法-------------------------------定-------------------------------义*/
|
|
|
+
|
|
|
+ // 初始化步骤
|
|
|
+ let initStep = function () {
|
|
|
+ step.render({
|
|
|
+ elem: '#stepForm',
|
|
|
+ filter: 'stepForm',
|
|
|
+ width: '100%', //设置容器宽度
|
|
|
+ stepWidth: '750px',
|
|
|
+ height: '800px',
|
|
|
+ stepItems: [{
|
|
|
+ title: '上传文件'
|
|
|
+ }, {
|
|
|
+ title: '档案预览'
|
|
|
+ }, {
|
|
|
+ title: '完成'
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化上传文件
|
|
|
+ let initUpload = function () {
|
|
|
+ upload.render({
|
|
|
+ elem: '#selectFile'
|
|
|
+ , url: http.requestUrl + 'archive/archive/import' //改成您自己的上传接口
|
|
|
+ , headers: {
|
|
|
+ accessToken: (layui.data('auth').data ? layui.data('auth').data.accessToken : '') || ''
|
|
|
+ }
|
|
|
+ , acceptMime: '.xls,.xlsx'
|
|
|
+ , accept: 'file' //普通文件
|
|
|
+ , auto: false
|
|
|
+ , multiple: false
|
|
|
+ , bindAction: '#startUpload'
|
|
|
+ , done: function (res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ layer.msg('上传成功');
|
|
|
+ table.render({
|
|
|
+ elem: '#questionList'
|
|
|
+ , data: res.data
|
|
|
+ ,limit: 10
|
|
|
+ ,page: true
|
|
|
+ , cols: [[
|
|
|
+ {field: 'dh', title: '档号', width: 240}
|
|
|
+ , {field: 'tm', title: '题名'}
|
|
|
+ , {field: 'wjbh', title: '文号'}
|
|
|
+ , {field: 'zrz', title: '责任者', width: 120}
|
|
|
+ ]]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**事-------------------------------件-------------------------------绑-------------------------------定*/
|
|
|
+ initStep()
|
|
|
+ initUpload()
|
|
|
+
|
|
|
+ // 解析
|
|
|
+ form.on('submit(formStep)', function (data) {
|
|
|
+ $("#startUpload").click()
|
|
|
+ if (isParsing) {
|
|
|
+ step.next('#stepForm');
|
|
|
+ } else {
|
|
|
+ layer.msg('请先上传文件')
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 开始上传
|
|
|
+ $("#startUpload").click(function () {
|
|
|
+ $("#sm").hide()
|
|
|
+ isParsing = true;
|
|
|
+ })
|
|
|
+
|
|
|
+ // 开始导入
|
|
|
+ $("#startImport").click(function () {
|
|
|
+ http.get('/archive/archive/confirmImport', {}, false, function (res) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ step.next('#stepForm');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ $("#close").click(function () {
|
|
|
+ let iframeIndex = parent.layer.getFrameIndex(window.name);
|
|
|
+ parent.layer.close(iframeIndex);
|
|
|
+ })
|
|
|
+
|
|
|
+ // 下载模板
|
|
|
+ form.on('submit(downExcelTemplate)', function () {
|
|
|
+ window.open("/template/导入模板.xlsx", "_blank")
|
|
|
+ return false;
|
|
|
+ })
|
|
|
+ })
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|