steve07s
/
DataBase


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html>

<head>
    <title>設計群匯入工具</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="./assets/images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./script/css/form.css" />
    <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet'
        type='text/css'>
    <link rel="stylesheet" href="./assets/vendor/font-awesome/css/font-awesome.css" />
    <script src="./assets/vendor/jquery/jquery.js"></script>
</head>
<a href="./edit.html" class="go-to-editor" target="_self">進入至編輯工具</a>
<form method="post" enctype="multipart/form-data" action="./script/php/importTool/uploadExcel.php">

    <h1><strong>MAA</strong> 設計群匯入工具</h1>

    <div class="form-group">
        <label for="projectId">計畫編號 </label>
        <input type="text" name="projectId" id="projectId" class="form-controll" required="required" />
    </div>
    <div class="form-group">
        <label for="projectName">計畫名稱 </label>
        <input type="text" name="projectName" id="projectName" class="form-controll" required="required" />
    </div>
    <div class="form-group">
        <label for="category">工程類別</label>
        <select name="category" id="category" class="form-controll" required="required">
        </select>
    </div>

    <div class="form-group file-area">
        <label for="excel">Excel文件</label>
        <input type="file" name="excel" id="excel" required="required"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
        <div class="file-dummy">
            <div class="success">你已經選擇<span id="filename"></span>。 請繼續下一步。</div>
            <div class="default">選擇Excel文件</div>
        </div>
    </div>

    <div class="form-group center">
        <p><strong>注意事項:</strong>Excel檔名請用計畫編號命名。 (例:15032.xlsx)</p>
        <button type="submit">上傳檔案</button>
        <button id="reset" type="button">清除表單</button>
    </div>

</form>
<a href="./index.php" class="back-to-article" target="_self">返回至查詢工具</a>

<script type="text/javascript">
    var projectTable;
    var projectName;
    $(document).ready(function () {
        getCategory();
        $("#projectId").change(function () {
            const find = projectTable.find(element => element[0] == this.value);
            if (find != null) {
                projectName = find[1];
                category = find[2];
                $("#projectName").val(projectName);
                $("#projectName").css("cursor", "not-allowed");
                $('#projectName').attr('readonly', true);
                $('#category').val(category);
                $("#category").css("cursor", "not-allowed");
                $('#category').prop('disabled', true);
            } else {
                $("#projectName").val("");
                $("#projectName").css("cursor", "text");
                $('#projectName').attr('readonly', false);
                $('#category').val(1);
                $("#category").css("cursor", "default");
                $('#category').prop('disabled', false);
            }

        });
    });
    var inputElement = document.getElementById("excel");
    inputElement.addEventListener("change", handleFiles, false);

    function handleFiles() {
        var fileList = this.files;
        $("#filename").text(fileList[0].name);
    }

    jQuery(function ($) {
        $('form').bind('submit', function () {
            $(this).find(':input').prop('disabled', false);
        });
    });

    function getCategory() {

        $.ajax({
                url: "./script/php/importTool/getConstructionCategory.php",
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "GET",
            })
            .success(function (response) {
                projectTable = response["project"];
                for (i = 0; i < response["category"].length; i++) {
                    $('#category').append(
                        `<option value='${response["category"][i][0]}'>${response["category"][i][1]}</option>`);
                }
            })
            .error(function (error) {
                console.log(error);
            })
            .complete(function () {
                $('#page0').addClass('in active')
            });
    }

    $("#reset").click(function(){
        $("#projectId").val('')
        $("#projectName").val('')
        $('#category').val(1);
        $("#excel").val('')
    })
</script>

</html>