測試

wms/contract/README.md

@@ -1 +0,0 @@
-### 合約書生成、申請

wms/contract/contract-input.php

@@ -5,11 +5,18 @@ require_once("./conn.php");
 <link rel="stylesheet" href="./styles/style.css">
 <link rel="stylesheet" href="semantic/dist/semantic.min.css">
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js" integrity="sha512-aoTNnqZcT8B4AmeCFmiSnDlc4Nj/KPaZyB5G7JnOnUEkdNpCZs1LCankiYi01sLTyWy+m2P+W4XM+BuQ3Q4/Dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <div class="contract-input-component" x-data="{
     init(){
-        console.log(123456)
+        $('select.dropdown')
+        .dropdown();
     },
+    isLoading:false,
+    save(){
+        this.isLoading = true
+        console.log(12345678);
+    }
 }">
     <form method="post" id="form" enctype="multipart/form-data">
     <input type="hidden" name='form_name' value="main_form" />
@@ -198,16 +205,16 @@ require_once("./conn.php");
                     <td>
                     </td>
                 </tr>
-                <tr>
-                    <td>合約開始時間</td>
-                    <td colspan="7">
-                        <div style="max-height:250px;overflow-y:auto;">
-                        <input class="form-control disabled_select" type="date" name="contracttel" value="" >
-                        </div>
-                    </td>
-                </tr>
             </tbody>
         </table>
+        <button @click="save()" :disabled="isLoading ? true : false" type="button" class="btn btn-primary btn-lg pull-right savebtn">
+            <template x-if="!isLoading">
+                <span>存檔</span>
+            </template>
+            <template x-if="isLoading">
+                <div class="loader"></div>
+            </template>
+        </button>
     </div>
 </form>
 </div>
@@ -216,8 +223,3 @@ require_once("./conn.php");
   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
   crossorigin="anonymous"></script>
 <script src="semantic/dist/semantic.min.js" ></script>
-
-<script>
-$('select.dropdown')
-  .dropdown();
-</script>

wms/contract/styles/style.css

@@ -524,6 +524,23 @@ main table td, main table th {
   font-size: 12pt;
 }
 
+.loader {
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #999; /* Blue */
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .contract-input-component form {
   margin: 0 auto;
 }
@@ -531,6 +548,15 @@ main table td, main table th {
   width: 100%;
   margin-top: 7px;
 }
+.contract-input-component form .savebtn {
+  margin-right: 13px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 70px;
+  height: 45px;
+  font-size: 15px;
+}
 .contract-input-component .input-group-btn {
   font-size: 16px;
 }

wms/contract/styles/style.scss

@@ -549,7 +549,19 @@ main{
         font-size: 12pt;
     }
 }
-
+.loader {
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #999; /* Blue */
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+  }
+  
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
 .contract-input-component{
     form{
         margin:0 auto;
@@ -557,6 +569,15 @@ main{
             width:100%;
             margin-top: 7px;
         }
+        .savebtn{
+            margin-right: 13px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width:70px;
+            height: 45px;
+            font-size: 15px;
+        }
     }
     .input-group-btn{
         font-size: 16px;