maixinrong
/
Calculation


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>收方单附件上传-计量支付</title>
    <link rel="stylesheet" href="/public/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/public/css/wap/main.css">
    <link rel="stylesheet" href="/public/css/toast.css">
    <link rel="stylesheet" href="/public/css/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" href="/public/css/toastr.css">
    <link rel="shortcut icon" href="/public/images/favicon.ico">
</head>
<body>
<div class="container">
    <!--顶部-->
    <nav class="fixed-top bg-dark">
        <div class="my-2 d-flex justify-content-between">
            <span class="text-white ml-3">收方单附件上传</span>
            <div class="mr-3">
            </div>
        </div>
    </nav>
    <!--标段列表-->
    <div class="py-5">
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th>标段</th>
                <td><%- tender.name %></td>
            </tr>
            <tr>
                <th>计量期</th>
                <td>第 <%- order %> 期</td>
            </tr>
            <tr>
                <th>清单/计量单元</th>
                <td><%- name %></td>
            </tr>
            </tbody>
        </table>
        <table class="table table-bordered">
            <tr><th colspan="2" class="text-center">本次已上传文件</th></tr>
            <tbody id="file-list">
            </tbody>
            <!--<tr><td><a href="">202108098762.png</a></td><td><a href="" class="text-danger">删除</a></td></tr>-->
        </table>
    </div>
    <!--底栏菜单-->
    <nav class="fixed-bottom navbar-dark bg-light border-top">
        <ul class="nav nav-fill my-2">
            <li class="nav-item">
                <a class="nav-link" href="JavaScript:void(0);"><i class="fa fa-camera"></i> 拍照</a>
                <input id="uploadPhoto" type="file" accept="image/*" capture="camera" style="display: none">
            </li>
            <li class="nav-item">
                <a class="nav-link" href="JavaScript:void(0);"><i class="fa fa-upload"></i> 上传文件</a>
                <input id="uploadFile" multiple type="file" style="display: none">
            </li>
        </ul>
    </nav>
</div>

    <!-- JS. -->
<script src="/public/js/jquery/jquery-3.2.1.min.js"></script>
<script src="/public/js/popper/popper.min.js"></script>
<script src="/public/js/bootstrap/bootstrap.min.js"></script>
<script src="/public/js/cookies.js"></script>
<script src="/public/js/toastr.min.js"></script>
<script src="/public/js/wap/global.js"></script>
<script type="text/javascript">
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-center",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "3000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
<script>
    const whiteList = JSON.parse('<%- JSON.stringify(whiteList) %>');
    $(function () {
        $('.nav-link').on('click', function () {
            $(this).siblings('input').click();
        });
        $('#uploadPhoto').change(function () {
            const files = this.files;
            const formData = new FormData();
            formData.append('sfid', <%- sfid %>);
            for (const file of files) {
                if (file === undefined) {
                    toastr.error('未选择上传文件！');
                    return false;
                }
                const filesize = file.size;
                if (filesize > 30 * 1024 * 1024) {
                    toastr.error('存在上传文件大小过大！');
                    return false;
                }
                const ext = file.name.toLowerCase().split('.').splice(-1)[0];
                const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
                if (!imgStr.test(ext)) {
                    toastr.error('请上传正确的图片格式文件');
                    return
                }
                formData.append('size', filesize);
                formData.append('file[]', file);
            }
            upload(formData);
            $('#uploadPhoto').val('');
        });
        $('#uploadFile').change(function () {
            const files = this.files;
            const formData = new FormData();
            formData.append('sfid', <%- sfid %>);
            for (const file of files) {
                if (file === undefined) {
                    toastr.error('未选择上传文件！');
                    return false;
                }
                const filesize = file.size;
                if (filesize > 30 * 1024 * 1024) {
                    toastr.error('存在上传文件大小过大！');
                    return false;
                }
                const fileext = '.' + file.name.toLowerCase().split('.').splice(-1)[0];
                if (whiteList.indexOf(fileext) === -1) {
                    toastr.error('只能上传指定格式的附件！');
                    return false;
                }
                formData.append('size', filesize);
                formData.append('file[]', file);
            }
            upload(formData);
            $('#uploadFile').val('');
        });

        $('body').on('click', '.del-att', function () {
            const id = $(this).data('id');
            const _self = $(this);
            const data = { id };
            postData('/wap/shoufang/delfile', data, function (result) {
                _self.parents('tr').remove();
            });
        })

        function upload(formData) {
            if (formData.length < 1) {
                return;
            }
            postDataWithFile('/wap/shoufang/upfile', formData, function (result) {
                let html = '';
                for (const att of result) {
                    html += `<tr><td><a href="${att.filepath}" target="_blank">${att.filename}${att.fileext}</a></td><td><a href="javascript:void(0);" data-id="${att.id}" class="del-att text-danger">删除</a></td></tr>`;
                }
                $('#file-list').append(html);
            });
        }
    })

</script>
</body>
</html>