option 更新完成

wms/contract/insertData.php

@@ -108,6 +108,9 @@ foreach ($sheet->getRowIterator() as $key=>$row) {
     }elseif($id == 14){
         $kind ='D';
         $subkind = 'D2';
+    }elseif($id == 15){
+        $kind ='B';
+        $subkind = 'B1';
     }
 
     if(isset($_GET['id'])){

wms/mkt/assets/js/alpine.js

@@ -1,11 +1,12 @@
 const priceOptionIndex = ()=>{
     return {
         init(){
-            console.log(this.kind);
+            this.renderPagination();
             this.initButtons(this.kind);
+            this.options = this.options.slice(0, this.pageLength)
         },
         kind: kind,
-        pageLength: 999999,
+        pageLength: 50,
         search: '',
         orioptions: options,
         options: options,
@@ -13,8 +14,13 @@ const priceOptionIndex = ()=>{
             1:'標',
             2:'選',
         },
-        btntype:'',
+        btntype:1,
         buttons:[],
+        pageLength: 50,
+        currentpage:1,
+        dataLangth:options.length,
+        search: '',
+        pageNumber:1,
         initButtons(kind){
             if(kind == 'A'){
                 this.buttons = [
@@ -42,31 +48,146 @@ const priceOptionIndex = ()=>{
                     {name: '功能與配置', type: 'D1'},
                     {name: 'OH與樓高', type: 'D2'},
                 ]
+            }else if(kind == 'E'){
+                this.buttons = [
+                    {name: '平台梯', type: 'E1'},
+                ]
             }
             this.buttons.unshift({
                 name:'顯示全部',type:'1',
             })
             this.btntype = this.buttons[0].type;
         },
-        changeType(type = this.btntype){
+        changeType(type=this.btntype){
-            this.btntype = type
+            this.currentpage = 1
+            this.btntype = type;
             this.options = this.orioptions;
             this.options = this.getOptions();
             this.inputSearch()
         },
-        getOptions(){
+        getOptions(start=0, end=this.pageLength){
             if(this.btntype != 1){
-                return this.options.filter(item=>(item.subkind == this.btntype)).slice(0, this.pageLength)
+                return this.options.filter(item=>(item.subkind == this.btntype)).slice(start, end)
             }
-            return this.options.slice(0, this.pageLength);
+            return this.options.slice(start, end);
         },
         inputSearch(e=null){
             let text = e!=null ? e.target.value : this.search;
-            this.search = text
+            this.search = text.toLowerCase();
-            this.options = this.orioptions
+            if(text != ''){
-            this.options = this.getOptions().filter(item=>{
+                this.currentpage = 1;
-                return (item.group_name.includes(text))
+                this.options = this.orioptions
-            })
+                this.options = this.options.filter(item=>{
+                    if(item.subkind == this.btntype || this.btntype == 1){
+                        if(item.group_name == null) item.group_name = ''
+                        if(item.spec == null) item.spec = ''
+                        if(item.memo == null) item.memo = ''
+                        if(item.price == null) item.price = 0
+                        return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ;
+                    }
+                }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
+                this.dataLangth = this.options.length
+            }else{
+                this.options = this.orioptions
+                if(this.btntype == 1){
+                    this.options = this.options.filter(item=> item.kind == this.kind)
+                }else{
+                    this.options = this.options.filter(item=> (item.subkind == this.btntype))
+                }
+                if(this.btntype == 1){
+                    this.dataLangth = this.orioptions.filter(item=> (item.kind == this.kind)).length
+                }else{
+                    this.dataLangth = this.orioptions.filter(item=> (item.subkind == this.btntype)).length
+                }
+                this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
+            }
+            this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength))
+            this.pageNumberArr  = []
+            for(let i=0;i<this.pageNumber;i++){
+                this.pageNumberArr.push({page:i+1, disabled:false})
+            }
+        },
+        renderPagination(){
+            this.inputSearch();
+        },
+        switchPage(page){
+            if(page == '...') return
+            this.currentpage = page
+            this.renderPagination()
+        },
+        selectPage(e){
+            this.currentpage = e.target.value
+            this.renderPagination()
+        }
+    }
+}
+
+const priceOptionSelect = ()=>{
+    return {
+        init(){
+            this.renderPagination();
+            this.options = this.options.slice(0, this.pageLength)
+        },
+        orioptions: options,
+        options: options,
+        options_arr: {
+            1:'標',
+            2:'選',
+        },
+        btntype:1,
+        buttons:[],
+        pageLength: 50,
+        currentpage:1,
+        dataLangth:options.length,
+        search: '',
+        pageNumber:1,
+        startpage:0,
+        endpage:this.startpage + this.pageLength,
+        pageNumberArr:[],
+        changeType(){
+            this.options = this.orioptions;
+            this.options = this.getOptions();
+            this.inputSearch()
+        },
+        getOptions(start=0, end=this.pageLength){
+            return this.options.slice(start, end);
+        },
+        inputSearch(e=null){
+            let text = e!=null ? e.target.value : this.search;
+            this.search = text.toLowerCase();
+            if(text != ''){
+                this.currentpage = 1;
+                this.options = this.orioptions
+                this.options = this.options.filter(item=>{
+                    if(item.group_name == null) item.group_name = ''
+                    if(item.spec == null) item.spec = ''
+                    if(item.memo == null) item.memo = ''
+                    if(item.price == null) item.price = 0
+                    return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ;
+                }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
+                this.dataLangth = this.options.length
+            }else{
+                this.options = this.orioptions
+                this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
+                this.dataLangth = this.orioptions.length
+            }
+            this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength))
+            this.pageNumberArr  = []
+            for(let i=0;i<this.pageNumber;i++){
+                this.pageNumberArr.push({page:i+1, disabled:false})
+            }
+        },
+        renderPagination(){
+            this.inputSearch();
+        },
+        switchPage(page){
+            if(page == '...') return
+            this.currentpage = page
+            this.renderPagination()
+        },
+        selectPage(e){
+            this.currentpage = e.target.value
+            this.renderPagination()
         }
     }
 }

wms/mkt/conn.php

@@ -13,12 +13,18 @@ if (file_exists($envFile)) {
         }
     }
 }
-$db_hostname = 'localhost';        //資料庫主機名稱
+$db_hostname = getenv('DB_HOST');        //資料庫主機名稱
-$db_username = 'masadaroot';             //登入資料庫的管理者的帳號
+$db_username = getenv('DB_USERNAME');             //登入資料庫的管理者的帳號
-$db_password = 'x6h5E5p#u8y';        //登入密碼
+$db_password = getenv('DB_PASSWORD');        //登入密碼
-$db_name     = 'appwms';            //使用的資料庫
+$db_name     = getenv('DB_DATABASE');            //使用的資料庫
 $db_charset  = 'utf8';             //設定字元編碼
 
+
+// $db_hostname = 'localhost';        //資料庫主機名稱
+// $db_username = 'masadaroot';             //登入資料庫的管理者的帳號
+// $db_password = 'x6h5E5p#u8y';        //登入密碼
+// $db_name     = 'appwms';            //使用的資料庫
+// $db_charset  = 'utf8';             //設定字元編碼
 //建立PDO的指定工作
 $dsn = "mysql:host=$db_hostname;dbname=$db_name;charset=$db_charset";
  

wms/mkt/css/style.css

@@ -1,13 +1,13 @@
 .price_option-select {
   width: 100%;
-  max-width: 1200px;
   margin: 0 auto;
   display: flex;
 }
 .price_option-select > .sidebar {
-  width: 10%;
+  padding: 20px;
+  width: 15%;
   min-width: 180px;
-  height: 100%;
+  height: auto;
   min-height: 80vh;
   display: flex;
   flex-direction: column;
@@ -16,55 +16,65 @@
 .price_option-select > .sidebar > a {
   margin: 6px 0;
   transition: 0.3s;
+  color: #666;
 }
 .price_option-select > .sidebar > a:hover {
-  color: #00b;
+  color: #000;
 }
-.price_option-select > .content {
+.price_option-select > .sidebar > a.active {
-  display: grid;
+  color: #000;
-  grid-template-columns: repeat(3, 33.3%);
+  font-weight: 700;
-  grid-row-gap: 12px;
-  grid-column-gap: 12px;
 }
-.price_option-select > .content > a {
+.price_option-select > .options {
-  width: 100%;
+  width: 85%;
-  display: block;
-  height: 300px;
-  position: relative;
 }
-.price_option-select > .content > a:hover > div {
+.price_option-select > .options > div {
-  opacity: 1;
+  width: 80%;
+  margin: 0 auto;
 }
-.price_option-select > .content > a > img {
+.price_option-select > .options > div.container {
-  width: 100%;
+  margin-bottom: 16px;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
 }
-.price_option-select > .content > a > div {
+
-  opacity: 0;
+.price_option-index {
-  transition: 0.3s;
   width: 100%;
-  height: 100%;
+  margin: 0 auto;
+  width: 100%;
+  margin: 0 auto;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.7);
 }
-.price_option-select > .content > a > div p {
+.price_option-index > .sidebar {
-  color: #fff;
+  padding: 20px;
-  font-size: 17px;
+  width: 15%;
-  font-weight: 600;
+  min-width: 180px;
+  height: auto;
+  min-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px #ccc solid;
 }
-
+.price_option-index > .sidebar > a {
-.price_option-index {
+  margin: 6px 0;
-  width: 100%;
+  transition: 0.3s;
-  max-width: 1200px;
+  color: #666;
+}
+.price_option-index > .sidebar > a:hover {
+  color: #000;
+}
+.price_option-index > .sidebar > a.active {
+  color: #000;
+  font-weight: 700;
+}
+.price_option-index > .options {
+  width: 85%;
+}
+.price_option-index > .options > div {
+  width: 80%;
   margin: 0 auto;
 }
+.price_option-index > .options > div.container {
+  margin-bottom: 16px;
+}
 
 .btn-secondary {
   background-color: #6C757D;
@@ -72,4 +82,41 @@
 
 .text-light {
   color: #fff;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 15px;
+}
+.pagination small {
+  color: #111;
+  font-size: 13px;
+}
+.pagination .links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pagination a {
+  color: black;
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+.pagination a.active {
+  background-color: #1E74FD;
+  color: white;
+  border-radius: 5px;
+}
+.pagination a:hover:not(.active) {
+  background-color: #ddd;
+}
+.pagination a.disabled {
+  cursor: not-allowed;
+}
+.pagination a.disabled:hover:not(.active) {
+  background-color: transparent;
 }/*# sourceMappingURL=style.css.map */

wms/mkt/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,iBAAA;EACA,cAAA;EACA,aAAA;ACCJ;ADAI;EACI,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACER;ADDQ;EACI,aAAA;EACA,gBAAA;ACGZ;ADFY;EACI,WAAA;ACIhB;ADAI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,qBAAA;ACER;ADDQ;EACI,WAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;ACGZ;ADFY;EACI,UAAA;ACIhB;ADFY;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;ACIhB;ADFY;EACI,UAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,oCAAA;ACIhB;ADHgB;EACI,WAAA;EACA,eAAA;EACA,gBAAA;ACKpB;;ADCA;EACI,WAAA;EACA,iBAAA;EACA,cAAA;ACEJ;;ADAA;EACI,yBAAA;ACGJ;;ADDA;EACI,WAAA;ACIJ","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,cAAA;EACA,aAAA;ACCJ;ADAI;EACI,aAAA;EACA,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACER;ADDQ;EACI,aAAA;EACA,gBAAA;EACA,WAAA;ACGZ;ADFY;EACI,WAAA;ACIhB;ADFY;EACI,WAAA;EACA,gBAAA;ACIhB;ADAI;EACI,UAAA;ACER;ADDQ;EACI,UAAA;EACA,cAAA;ACGZ;ADFY;EACI,mBAAA;ACIhB;;ADCA;EACI,WAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;ACEJ;ADDI;EACI,aAAA;EACA,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACGR;ADFQ;EACI,aAAA;EACA,gBAAA;EACA,WAAA;ACIZ;ADHY;EACI,WAAA;ACKhB;ADHY;EACI,WAAA;EACA,gBAAA;ACKhB;ADDI;EACI,UAAA;ACGR;ADFQ;EACI,UAAA;EACA,cAAA;ACIZ;ADHY;EACI,mBAAA;ACKhB;;ADAA;EACI,yBAAA;ACGJ;;ADDA;EACI,WAAA;ACIJ;;ADFA;EACI,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBAAA;ACKJ;ADJI;EACI,WAAA;EACA,eAAA;ACMR;ADJI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;ACMR;ADJI;EACI,YAAA;EACA,WAAA;EACA,iBAAA;EACA,qBAAA;EACA,iCAAA;ACMR;ADLQ;EACI,yBAAA;EACA,YAAA;EACA,kBAAA;ACOZ;ADLQ;EAAsB,sBAAA;ACQ9B;ADPQ;EACI,mBAAA;ACSZ;ADRY;EAAsB,6BAAA;ACWlC","file":"style.css"}

wms/mkt/css/style.scss

@@ -1,12 +1,12 @@
 .price_option-select{
     width: 100%;
-    max-width: 1200px;
     margin: 0 auto;
     display: flex;
     >.sidebar{
-        width: 10%;
+        padding: 20px;
+        width: 15%;
         min-width: 180px;
-        height: 100%;
+        height: auto;
         min-height: 80vh;
         display: flex;
         flex-direction: column;
@@ -14,54 +14,65 @@
         >a{
             margin:6px 0;
             transition: .3s;
+            color:#666;
             &:hover{
-                color:#00b;
+                color:#000;
+            }
+            &.active{
+                color:#000;
+                font-weight: 700;
             }
         }
     }
-    >.content{
+    >.options{
-        display: grid;
+        width: 85%;
-        grid-template-columns: repeat(3,33.3%);
+        >div{
-        grid-row-gap: 12px;
+            width: 80%;
-        grid-column-gap: 12px;
+            margin:0 auto;
-        >a{
+            &.container{
-            width: 100%;
+                margin-bottom: 16px;
-            display: block;
-            height: 300px;
-            position: relative;
-            &:hover > div{
-                opacity: 1;
-            }
-            >img{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-            >div{
-                opacity: 0;
-                transition: .3s;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                position: absolute;
-                top: 0;
-                right:0;
-                background-color: rgba($color: #000, $alpha: .7);
-                p{
-                    color:#fff;
-                    font-size: 17px;
-                    font-weight: 600;
-                }
             }
         }
     }
 }
 .price_option-index{
     width: 100%;
-    max-width: 1200px;
     margin: 0 auto;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    >.sidebar{
+        padding: 20px;
+        width: 15%;
+        min-width: 180px;
+        height: auto;
+        min-height: 80vh;
+        display: flex;
+        flex-direction: column;
+        border-right:1px #ccc solid;
+        >a{
+            margin:6px 0;
+            transition: .3s;
+            color:#666;
+            &:hover{
+                color:#000;
+            }
+            &.active{
+                color:#000;
+                font-weight: 700;
+            }
+        }
+    }
+    >.options{
+        width: 85%;
+        >div{
+            width: 80%;
+            margin:0 auto;
+            &.container{
+                margin-bottom: 16px;
+            }
+        }
+    }
 }
 .btn-secondary{
     background-color: #6C757D;
@@ -69,3 +80,36 @@
 .text-light{
     color:#fff;
 }
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 15px;
+    small{
+        color:#111;
+        font-size: 13px;
+    }
+    .links{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    a {
+        color: black;
+        float: left;
+        padding: 8px 16px;
+        text-decoration: none;
+        transition: background-color .3s;
+        &.active {
+            background-color: #1E74FD;
+            color: white;
+            border-radius: 5px;
+        }
+        &:hover:not(.active) {background-color: #ddd;}
+        &.disabled{
+            cursor:not-allowed;
+            &:hover:not(.active) {background-color: transparent;}
+        }
+    }
+    
+}

wms/mkt/price_option-index.php

@@ -15,62 +15,97 @@ $optional_arr = [1=>'標', 2=>'選'];
 <script defer src="../contract/js/alpinejs/cdn.min.js"></script>
 <script src="../contract/js/axios/axios.min.js"></script>
 <div class="price_option-index" x-data="priceOptionIndex">
-    <div class="container"><h2>OPTION價格查詢</h2></div>
+    <div class="sidebar">
-    <div id="exTab1" class="container">
+        <a href="./price_option-select.php?<?php echo $token_link; ?> ">全部顯示</a>
-        <div class="toolbar">
+        <a <?php if($kind == 'A'){echo 'class="active"';} ?> href="./price_option-index.php?kind=A&<?php echo $token_link; ?>">A-1車廂意匠</a>
-            <label for="">
+        <a <?php if($kind == 'B'){echo 'class="active"';} ?> href="./price_option-index.php?kind=B&<?php echo $token_link; ?>">A-2車廂內裝</a>
-                顯示
+        <a <?php if($kind == 'C'){echo 'class="active"';} ?> href="./price_option-index.php?kind=C&<?php echo $token_link; ?>">A-3車廂外部</a>
-                <select x-model="pageLength" @change="changeType()">
+        <a <?php if($kind == 'D'){echo 'class="active"';} ?> href="./price_option-index.php?kind=D&<?php echo $token_link; ?>">A-4控制與其他</a>
-                    <option value="10">10</option>
+        <a <?php if($kind == 'E'){echo 'class="active"';} ?> href="./price_option-index.php?kind=E&<?php echo $token_link; ?>">B-1平台梯</a>
-                    <option value="25">25</option>
+        <a <?php if($kind == 'F'){echo 'class="active"';} ?> href="./price_option-index.php?kind=F&<?php echo $token_link; ?>">C-1汰改</a>
-                    <option value="50">50</option>
+    </div>
-                    <option value="100">100</option>
+    <div class="options">
-                    <option value="999999">顯示全部</option>
+        <div class="container"><h2>OPTION價格查詢</h2></div>
-                </select>
+        <div id="exTab1" class="container">
-            </label>
+            <div class="toolbar">
-            <label for="">
+                <label for="">
-                <template x-for="btn in buttons">
+                    顯示
-                    <button style="margin-right:4px" :class="['btn', (btn.type == btntype) ? 'btn-primary' : 'btn-secondary text-light']" x-text="btn.name" @click="changeType(btn.type)"></button>
+                    <select x-model="pageLength" @change="changeType()">
-                </template>
+                        <option value="10">10</option>
-            </label>
+                        <option value="25">25</option>
-            <label for="">
+                        <option value="50">50</option>
-                搜尋
+                        <option value="100">100</option>
-                <input type="text"  @keyup="inputSearch($event)" />
+                        <option value="999999">顯示全部</option>
-            </label>
+                    </select>
-        </div>
+                </label>
-        <table id="table_index2" class="table table-striped table-bordered" style="width:100%">
+                <label for="">
-            <thead>
+                    <template x-for="btn in buttons">
-                <tr class="kind-col">
+                        <button style="margin-right:4px" :class="['btn', (btn.type == btntype) ? 'btn-primary' : 'btn-secondary text-light']" x-text="btn.name" @click="changeType(btn.type)"></button>
-                    <th scope="col" nowrap>名稱</th>
+                    </template>
-                    <th scope="col" nowrap>規格</th>
+                </label>
-                    <th scope="col" nowrap>備註</th>
+                <label for="">
-                    <th scope="col" nowrap>配置</th>
+                    搜尋
-                    <th scope="col" nowrap>單位</th>
+                    <input type="text"  @keyup="inputSearch($event)" />
-                    <th scope="col" nowrap>定價</th>
+                </label>
-                </tr>
+            </div>
-            </thead>
+            <table id="table_index2" class="table table-striped table-bordered" style="width:100%">
-            <tbody>
+                <thead>
-                <template x-if="options.length <= 0">
+                    <tr class="kind-col">
-                    <tr>
+                        <th scope="col" nowrap>名稱</th>
-                        <td colspan="6"><p style="font-size:13px;color:#a00">沒有符合的結果。</p></td>
+                        <th scope="col" nowrap>規格</th>
-                    </tr>
+                        <th scope="col" nowrap>備註</th>
-                </template>
+                        <th scope="col" nowrap>配置</th>
-                <template x-for="option in options">
+                        <th scope="col" nowrap>單位</th>
-                    <tr>
+                        <th scope="col" nowrap>定價</th>
-                        <td x-text="option.group_name"></td>
-                        <td x-text="option.spec"></td>
-                        <td x-text="option.memo"></td>
-                        <td x-text="options_arr[option.optional]"></td>
-                        <td x-text="option.unit"></td>
-                        <td x-text="option.price!=null ? option.price.toLocaleString() : ''"></td>
                     </tr>
-                </template>
+                </thead>
-        </table>
+                <tbody>
+                    <template x-if="options.length <= 0">
+                        <tr>
+                            <td colspan="6"><p style="font-size:13px;color:#a00">沒有符合的結果。</p></td>
+                        </tr>
+                    </template>
+                    <template x-for="option in options">
+                        <tr>
+                            <td x-text="option.group_name"></td>
+                            <td x-text="option.spec"></td>
+                            <td x-text="option.memo"></td>
+                            <td x-text="options_arr[option.optional]"></td>
+                            <td x-text="option.unit"></td>
+                            <td x-html="option.price!=null ? Number(option.price).toLocaleString() : ''"></td>
+                        </tr>
+                    </template>
+            </table>
+            <div class="pagination">
+                <small x-text="'顯示第'+((Number(currentpage)-1)*Number(pageLength)+1)+' 至 '+((((Number(currentpage)-1)*Number(pageLength) +Number(pageLength))< dataLangth) ? ((Number(currentpage)-1)*Number(pageLength) +Number(pageLength)) : dataLangth )+' 項結果，共 '+dataLangth+' 項'"></small>
+                <div class="links">
+                    <template x-if="currentpage>1">
+                        <a href="###" @click="switchPage(currentpage-1)">&laquo;</a>
+                    </template>
+                    <template x-if="pageNumber <= 10">
+                        <template x-for="page in pageNumber">
+                                <a href="javascript:;" @click="switchPage(page)" :class="[(page == currentpage) ? 'active' : '']" x-text="page" ></a>
+                        </template>
+                    </template>
+                    <template x-if="pageNumber > 10">
+                        <select @change="selectPage($event)" style="width:66px;padding:8px 2px" x-model="currentpage">
+                            <template x-for="page in pageNumber">
+                                <option :value="page" x-text="page"></option>
+                            </template>
+                        </select>
+                    </template>
+                    <template x-if="currentpage<pageNumber">
+                        <a href="###" @click="switchPage(currentpage+1)">&raquo;</a>
+                    </template>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
 <script src="./assets/js/alpine.js"></script>
 <script>
     const options = [...<?php echo json_encode($options); ?>];
+    console.log(options);
     const kind = '<?php echo $kind; ?>';
 </script>

wms/mkt/price_option-select.php

@@ -1,47 +1,106 @@
 <?php 
 include "../header.php";
+require_once('./conn.php');
+$sql_str = "SELECT * FROM option_price WHERE status = 'Y' ORDER BY kind, id";
+$stmt = $conn->prepare($sql_str);
+$stmt->execute();
+$options = $stmt->fetchAll(PDO::FETCH_ASSOC);
+$optional_arr = [1=>'標', 2=>'選'];
 ?>
 <link rel="stylesheet" href="./css/style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="../contract/semantic/dist/semantic.min.css">
-<div class="price_option-select">
+<script defer src="../contract/js/alpinejs/cdn.min.js"></script>
+<script src="../contract/js/axios/axios.min.js"></script>
+<div class="price_option-select" x-data="priceOptionSelect">
+    
     <div class="sidebar">
+        <a class="active" href="./price_option-select.php?<?php echo $token_link; ?> ">全部顯示</a>
         <a href="./price_option-index.php?kind=A&<?php echo $token_link; ?>">A-1車廂意匠</a>
         <a href="./price_option-index.php?kind=B&<?php echo $token_link; ?>">A-2車廂內裝</a>
         <a href="./price_option-index.php?kind=C&<?php echo $token_link; ?>">A-3車廂外部</a>
         <a href="./price_option-index.php?kind=D&<?php echo $token_link; ?>">A-4控制與其他</a>
-        <a href="./price_option-index.php?kind=E&<?php echo $token_link; ?>">A-5汰改</a>
+        <a href="./price_option-index.php?kind=E&<?php echo $token_link; ?>">B-1平台梯</a>
+        <a href="./price_option-index.php?kind=F&<?php echo $token_link; ?>">C-1汰改</a>
     </div>
-    <div class="content">
+    <div class="options">
-        <a href="./price_option-index.php?kind=A&<?php echo $token_link; ?>">
+
-            <img src="./assets/img/1.jpg" />
+        <div class="container"><h2>OPTION價格查詢</h2></div>
-            <div>
+        <div id="exTab1" class="container">
-                <p>車廂意匠</p>
+            <div class="toolbar">
+                <label for="">
+                    顯示
+                    <select x-model="pageLength" @change="changeType()">
+                        <option value="10">10</option>
+                        <option value="25">25</option>
+                        <option value="50">50</option>
+                        <option value="100">100</option>
+                        <option value="999999">顯示全部</option>
+                    </select>
+                </label>
+                <label for="">
+                </label>
+                <label for="">
+                    搜尋
+                    <input type="text"  @keyup="inputSearch($event)" />
+                </label>
             </div>
-        </a>
+            <table id="table_index2" class="table table-striped table-bordered" style="width:100%">
-        <a href="./price_option-index.php?kind=B&<?php echo $token_link; ?>">
+                <thead>
-            <img src="./assets/img/2.jpg" />
+                    <tr class="kind-col">
-            <div>
+                        <th scope="col" nowrap>名稱</th>
-                <p>車廂內裝</p>
+                        <th scope="col" nowrap>規格</th>
+                        <th scope="col" nowrap>備註</th>
+                        <th scope="col" nowrap>配置</th>
+                        <th scope="col" nowrap>單位</th>
+                        <th scope="col" nowrap>定價</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template x-if="options.length <= 0">
+                        <tr>
+                            <td colspan="6"><p style="font-size:13px;color:#a00">沒有符合的結果。</p></td>
+                        </tr>
+                    </template>
+                    <template x-for="option in options">
+                        <tr>
+                            <td x-text="option.group_name"></td>
+                            <td x-text="option.spec"></td>
+                            <td x-text="option.memo"></td>
+                            <td x-text="options_arr[option.optional]"></td>
+                            <td x-text="option.unit"></td>
+                            <td x-html="option.price!=null ? Number(option.price).toLocaleString() : ''"></td>
+                        </tr>
+                    </template>
+            </table>
+            <div class="pagination">
+                <small x-text="'顯示第'+((Number(currentpage)-1)*Number(pageLength)+1)+' 至 '+((((Number(currentpage)-1)*Number(pageLength) +Number(pageLength))< dataLangth) ? ((Number(currentpage)-1)*Number(pageLength) +Number(pageLength)) : dataLangth )+' 項結果，共 '+dataLangth+' 項'"></small>
+                <div class="links">
+                    <template x-if="currentpage>1">
+                        <a href="###" @click="switchPage(currentpage-1)">&laquo;</a>
+                    </template>
+                    <template x-if="pageNumber <= 10">
+                        <template x-for="page in pageNumber">
+                                <a href="javascript:;" @click="switchPage(page)" :class="[(page == currentpage) ? 'active' : '']" x-text="page" ></a>
+                        </template>
+                    </template>
+                    <template x-if="pageNumber > 10">
+                        <select @change="selectPage($event)" style="width:66px;padding:8px 2px" x-model="currentpage">
+                            <template x-for="page in pageNumber">
+                                <option :value="page" x-text="page"></option>
+                            </template>
+                        </select>
+                    </template>
+                    <template x-if="currentpage<pageNumber">
+                        <a href="###" @click="switchPage(currentpage+1)">&raquo;</a>
+                    </template>
+                </div>
             </div>
-        </a>
+        </div>
-        <a href="./price_option-index.php?kind=C&<?php echo $token_link; ?>">
-            <img src="./assets/img/3.jpg" />
-            <div>
-                <p>車廂外部</p>
-            </div>
-        </a>
-        <a href="./price_option-index.php?kind=D&<?php echo $token_link; ?>">
-            <img src="./assets/img/4.jpg" />
-            <div>
-                <p>控制與其他</p>
-            </div>
-        </a>
-        <a href="./price_option-index.php?kind=E&<?php echo $token_link; ?>">
-            <img src="./assets/img/5.jpg" />
-            <div>
-                <p>汰改</p>
-            </div>
-        </a>
     </div>
 </div>
+
+<script src="./assets/js/alpine.js"></script>
+<script>
+    const options = [...<?php echo json_encode($options); ?>];
+</script>