匯入工具改版

script/php/importTool/getExcel.php

@@ -6,12 +6,13 @@ use PhpOffice\PhpSpreadsheet\Spreadsheet;
 use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
 
 $ajax = array();
+$errorLists = array();
 $connectionInfo = array("Database" => "$dbname", "UID" => "$username", "PWD" => "$password", "CharacterSet" => "UTF-8");
 $conn = sqlsrv_connect($hostname, $connectionInfo);
 if ($conn === false) {
     die(print_r(sqlsrv_errors(), true));
 }
-$fileinfo = array(array("計畫編號", "工程類別", "此計畫是否匯入過"));
+$fileinfo = array(array("計畫編號", "計畫名稱", "工程類別", "此計畫是否匯入過"));
 
 $file = '00000.xlsx';
 if (isset($_GET['file'])) {
@@ -32,10 +33,14 @@ $sql = "SELECT [category_name] FROM [Construction_Category] WHERE [category_id]
 $fetchResult = sqlsrv_query($conn, $sql);
 $category = sqlsrv_fetch_array($fetchResult)[0];
 
-array_push($fileinfo, array($project_id, $category, $isImport));
-$importinfo = array(array("類別", "選擇檔案類型", "是否為新的類型"));
+$sql = "SELECT [project_name] FROM [Project_Table] WHERE [project_id] = '{$project_id}'";
+$fetchResult = sqlsrv_query($conn, $sql);
+$project_name = sqlsrv_fetch_array($fetchResult)[0];
+
+array_push($fileinfo, array($project_id, $project_name, $category, $isImport));
+$importinfo = array(array("類別", "選擇檔案類型"/*, "是否為新的類型"*/));
 $statuses = ["info"];
-$extension = pathinfo($file,PATHINFO_EXTENSION);
+$extension = pathinfo($file, PATHINFO_EXTENSION);
 $ajax["匯入資訊"] = $fileinfo;
 if ('csv' == $extension) {
     $reader = new \PhpOffice\PhpSpreadsheet\Reader\Csv();
@@ -43,7 +48,7 @@ if ('csv' == $extension) {
     $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xls();
 } else
     $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx();
-    
+
 $reader->setReadDataOnly(true);
 $reader->setReadEmptyCells(false);
 $spreadsheet = $reader->load($file);
@@ -94,28 +99,28 @@ for ($s = 0; $s < $sheetCount; $s++) {
     $cellCollection = $sheet->getCellCollection();
     $column = $cellCollection->getHighestRowAndColumn();
     $data = array();
-
+    $error = "";
     for ($i = 1; $i <= $column['row']; $i++) { //行        
         $row = array();
         for ($j = 'A'; $j <= $column['column']; $j++) { //列
             $key = $j . $i;
             $value = $sheet->getCell($key)->getValue();
-            if($value == null){
+            if ($value === null) {
                 $status = 'warning';
-            }//.$value
-            if($fileCol != '0') {    
-                if($j == $fileCol & $i > 1){
-                    if(!is_file('../../../assets/建置資料/資訊工程/180024-新北市3D智慧管線查詢及管理系統'.$value)){
-                        $status = 'error';                        
+                //$test = "key: ".$key." value: ".$value;
+            }
+            if ($fileCol != '0') {
+                if ($j == $fileCol & $i > 1) {
+                    if (!is_file('../../../assets/建置資料/' . $category . '/' . $project_id . '-' . $project_name . $value)) {
+                        $error = $error.','.$i-2; //扣掉欄位名稱及從零開始計算
+                        $status = 'error';
                     }
-                }            
-                
+                }
             }
-           
+
             array_push($row, $value);
         }
         array_push($data, $row);
-        
     }
     $ajax[$sheetName] = $data;
     array_push($statuses, $status);
@@ -124,11 +129,12 @@ for ($s = 0; $s < $sheetCount; $s++) {
     <input type='radio' id='blueprint{$s}' name='type{$s}' value='[Blueprint]' {$blueprintCheck}>
     <label for='blueprint{$s}'>設計圖或成果圖</label><br>
     <input type='radio' id='cancel{$s}' name='type{$s}' value='cancel' {$cancelCheck}>
-    <label for='cancel{$s}'>不進行匯入</label>  ", $isImportArray[$s]));    
+    <label for='cancel{$s}'>不進行匯入</label>  "/*, $isImportArray[$s]*/));
+    $errorLists[$sheetName] = $error;
 }
 $data["table"] = $ajax;
 $data["info"] = $importinfo;
 $data["statuses"] = $statuses;
-$data["test"] = $test;
+$data["errorLists"] = $errorLists;
 echo json_encode($data, JSON_UNESCAPED_UNICODE);
-sqlsrv_close($conn);  
+sqlsrv_close($conn);

script/php/importTool/uploadExcel.php

@@ -107,6 +107,7 @@ if (0 < $_FILES['excel']['error']) {
             margin-top: 13px;
             border-bottom: 4px solid #0088cc;
             height: 41px;
+            padding-left: 40px;
         }
 
         .sidebar-left {
@@ -144,8 +145,12 @@ if (0 < $_FILES['excel']['error']) {
 
         }
 
-        th {
-            width: 30%;
+        #tablepage0>thead>tr>th {
+            width: 25%;
+        }
+
+        #tableform>thead>tr>th {
+            width: 50%;
         }
 
         .nav-main {
@@ -168,10 +173,6 @@ if (0 < $_FILES['excel']['error']) {
             width: 0px;
         }
 
-        #datatable-ajax tr:hover {
-            background-color: #e8e8e8;
-        }
-
         #viewDiv {
             height: 100%;
             width: 100%;
@@ -281,6 +282,10 @@ if (0 < $_FILES['excel']['error']) {
             color: white;
         }
 
+        table.dataTable tbody tr td.NullClass {
+            background-color: #ed9c28;
+        }
+
         .submit {
             display: inline-block;
             margin-left: auto;
@@ -319,7 +324,9 @@ if (0 < $_FILES['excel']['error']) {
             color: #d2322d;
         }
 
-        a.error.text-center,i.error {
+        a.error.text-center,
+        i.error,
+        td.error {
             color: #d2322d;
         }
 
@@ -331,7 +338,9 @@ if (0 < $_FILES['excel']['error']) {
             color: #ed9c28;
         }
 
-        a.warning.text-center,i.warning {
+        a.warning.text-center,
+        i.warning,
+        td.warning {
             color: #ed9c28;
         }
 
@@ -343,7 +352,8 @@ if (0 < $_FILES['excel']['error']) {
             color: #0088cc;
         }
 
-        a.info.text-center,i.info {
+        a.info.text-center,
+        i.info {
             color: #0088cc;
         }
 
@@ -355,9 +365,18 @@ if (0 < $_FILES['excel']['error']) {
             color: #4a934a;
         }
 
-        a.success.text-center,i.success {
+        a.success.text-center,
+        i.success {
             color: #4a934a;
         }
+
+        .dataTables_wrapper .dataTables_filter label {
+            width: initial;
+        }
+
+        .dataTables_wrapper .dataTables_filter input {
+            width: initial;
+        }
     </style>
 
 
@@ -445,14 +464,15 @@ if (0 < $_FILES['excel']['error']) {
 
     </section>
     <script type="text/javascript">
-
+        var error;
+        var tables;
         const icons = {
-            'info':'fa fa-info-circle',
-            'success':'fa fa-check-circle',
-            'error':'fa fa-times-circle',
-            'warning':'fa fa-exclamation-circle',
-        }; 
-        // TODO: 1.頁籤依據選擇變色 2.偵測null欄位資料
+            'info': 'fa fa-info-circle',
+            'success': 'fa fa-check-circle',
+            'error': 'fa fa-times-circle',
+            'warning': 'fa fa-exclamation-circle',
+        };
+
         $(document).ready(function() {
             const queryString = window.location.search;
             const urlParams = new URLSearchParams(queryString);
@@ -479,26 +499,29 @@ if (0 < $_FILES['excel']['error']) {
                     type: "GET",
                 })
                 .success(function(response) {
-                    var table = response.table;
+                    tables = response.table;
                     var info = response.info;
                     var statuses = response.statuses;
-                    console.log(response.test);
+                    errors = response.errorLists;
+                    var projectInfo = tables["匯入資訊"];
+                    $("#header").append(projectInfo[1][0] + "-" + projectInfo[1][1]); // 16019-促進民間參與高雄市鳳山溪污水處理廠放流水回收再利用案之興建、移轉、營運
+
                     let i = 0;
-                    for (var tab in table) {
+                    console.log(errors);
+                    for (var tab in tables) {
                         let status = statuses[i];
                         let active = '';
                         if (i == 0) {
                             active = 'class="active"';
-                        } 
+                        }
                         let icon = icons[status];
                         $('#tabs').append(`<li ${active}><a href="#page${i}" data-toggle="tab" class="text-center ${status}"><i class="${icon}"></i> ${tab}</a></li>`);
                         $("#tab-content").append(`<div id="page${i}" class="tab-pane fade"></div>`);
-
-                        appendTable(table[tab], `#page${i}`);
+                        appendTable(tables[tab], `page${i}`);
                         i++;
                     }
                     $(`#page${0}`).append("<form id='form' method='post' action='./insertExcel.php'></form>");
-                    appendTable(info, "#form");
+                    appendTable(info, "form");
                     // TODO: add confirm message
                     $("#form").append(`<div class='center'><input class='submit' type='submit' value='開始匯入'><button type='button' class='submit' onClick=\"location.href='/DataBase/upload.html'\" >重新選擇檔案</button></div>`);
                     $("#form").append(`<input id='projectId' name='projectId' type='hidden' value='${projectId}'><input id='projectName' name='projectName' type='hidden' value='${projectName}'><input id='file' name='file' type='hidden' value='${file}'><input id='categoryId' name='categoryId' style='display:none;' value='${categoryId}'>`);
@@ -508,29 +531,104 @@ if (0 < $_FILES['excel']['error']) {
                 })
                 .complete(function() {
                     $('#page0').addClass('in active')
+                    let i = 1;
+                    
+                    for (var tab in tables) {
+                        var errorList = [];
+                        
+                        if (errors[tab] != "" && errors[tab] != undefined) {
+                            errorList = errors[tab].split(',');
+                            errorList.shift();
+                        }
+
+                        /*$('#tablepage'+i).dataTable({
+                            "createdRow": function(row, data, dataIndex) {
+                                for (j = 0; j < data.length; j++) {
+                                    if (data[j] == `null`) {
+                                        $(row).addClass('NullClass');
+                                    }
+                                }
+                            }
+                        });*/
+                        $('#tablepage' + i).dataTable({
+                            "language": {
+                                "processing": "處理中...",
+                                "loadingRecords": "載入中...",
+                                "lengthMenu": "顯示 _MENU_ 項結果",
+                                "zeroRecords": "沒有符合的結果或是沒有資料",
+                                "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
+                                "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
+                                "infoFiltered": "(從 _MAX_ 項結果中過濾)",
+                                "infoPostFix": "",
+                                "search": "搜尋:",
+                                "paginate": {
+                                    "first": '<i class="fa fa-step-backward"></i>',
+                                    "previous": '<i class="fa fa-backward"></i>',
+                                    "next": '<i class="fa fa-forward"></i>',
+                                    "last": '<i class="fa fa-step-forward"></i>'
+                                },
+                                "aria": {
+                                    "sortAscending": ": 升冪排列",
+                                    "sortDescending": ": 降冪排列"
+                                }
+                            },
+                            "columnDefs": [{
+                                "targets": -1,
+                                "createdCell": function(td, cellData, rowData, row, col) {                                  
+                                    
+                                    if(cellData == "03-厭氧儲氣槽結構計算書"){
+                                        console.log("row:" + row + " col: " + col)
+                                    }
+                                    if(errorList.length > 0 ){
+                                        for(var error in errorList){
+                                            if(error == row){
+                                                console.log(cellData)
+                                                $(td).addClass('NullClass');
+                                            }
+                                        }
+                                        
+                                    }
+                                }
+                            },{
+                                "targets": '_all',
+                                "createdCell": function(td, cellData, rowData, row, col) {
+                                    if (cellData == "null") {                                        
+                                        $(td).addClass('NullClass');
+                                    }
+                                }
+                            }],
+                        });
+                        i++;
+                    }
+
+
                 });
         }
 
         function appendTable(data, id) {
             let i = 0;
-            table = "<table class='excel'>";
+            table = `<table id='table${id}' class='excel'><thead>`;
             for (var tab in data) {
                 table += "<tr>";
 
                 for (j = 0; j < data[tab].length; j++) {
                     if (i == 0)
-                        table += `<th style="width:33%;">${data[tab][j]}</th>`
+                        table += `<th>${data[tab][j]}</th>` //style="width:33%;"
                     else
                         table += `<td>${data[tab][j]}</td>`
                 }
-                i++;
+
                 table += "</tr>";
+                if (i == 0) {
+                    table += "</thead><tbody>";
+                }
+                i++;
             }
 
 
-            table += "</table>";
+            table += "</tbody></table>";
 
-            $(id).append(table);
+            $('#' + id).append(table);
         }
     </script>