選取option 增加分類、搜尋

wms/mkt/assets/js/alpine.js

@@ -191,3 +191,62 @@ const priceOptionSelect = ()=>{
         }
     }
 }
+
+const pricereviewOptionSelect = ()=>{
+    return {
+        init(){
+            console.log(options);
+            this.optionCategory = 0
+            this.initButtons();
+        },
+        options: options,
+        optionalArr: {
+            1:'標配',
+            2:'選配',
+            3:'加價',
+        },
+        kind:0,
+        subkind:0,
+        buttons:[],
+        initButtons(kind){
+            if(kind == 'A'){
+                this.buttons = [
+                    {name: '車廂意匠', type: 'A1'}
+                ]
+            }else if(kind == 'B'){
+                this.buttons = [
+                    {name: '天井', type: 'B1'},
+                    {name: '地板', type: 'B2'},
+                    {name: '操縱盤', type: 'B3'},
+                    {name: '扶手', type: 'B4'},
+                    {name: '車廂門與層門(轎門/層門)', type: 'B5'},
+                    {name: '轎壁(車廂側板)', type: 'B6'},
+                    {name: '其他車廂內裝配件', type: 'B7'},
+                ]
+            }else if(kind == 'C'){
+                this.buttons = [
+                    {name: '框', type: 'C1'},
+                    {name: '乘場指示器', type: 'C2'},
+                    {name: '燈', type: 'C3'},
+                    {name: '方式與門', type: 'C4'},
+                ]
+            }else if(kind == 'D'){
+                this.buttons = [
+                    {name: '功能與配置', type: 'D1'},
+                    {name: 'OH與樓高', type: 'D2'},
+                ]
+            }else if(kind == 'E'){
+                this.buttons = [
+                    {name: '平台梯', type: 'E1'},
+                ]
+            }
+        },
+        kind:0,
+        optionSubCategory:1,
+        changeCategory(category){
+            this.kind = category
+            this.initButtons(category)
+        },
+        
+    }
+}

wms/mkt/pricereview-create.php

@@ -1,6 +1,6 @@
 <?php
 include "../header.php";
-require_once('./conn.php');
+
 $vol_no = $_REQUEST["vol_no"];  // 從有望客戶過來:卷號
 
 // 營業員只建自己客戶的價審單
@@ -144,9 +144,9 @@ while ($row = mysqli_fetch_assoc($res)) {
     $opt_data_arr[$row["kind"]][$row["group_name"]][$row["id"]]["unit"] = $row["unit"];
     $opt_data_arr[$row["kind"]][$row["group_name"]][$row["id"]]["price"] = $row["price"];
 }
-$option_str = $opt_data_arr[$row["kind"]][$row["group_name"]][$row["id"]]["spec"];
+
 mysqli_free_result($res);
-$option_str  .= '<table id="table_index2" class="table table-striped table-bordered" style="width:100%">';
+$option_str  = '<table id="table_index2" class="table table-striped table-bordered" style="width:100%">';
 $option_str .= '<thead>
                 <tr class="kind-col">
                 <th scope="col" nowrap>名稱</th>
@@ -195,6 +195,8 @@ foreach ($opt_data_arr as $k => $v) {
         */
 }
 $option_str .= "</tbody></table>";
+
+
 ?>
 <style>
     .c_iframe iframe {
@@ -242,7 +244,7 @@ $option_str .= "</tbody></table>";
     }
 
     .modal-content {
-        height: 660px;
+        height: 710px;
     }
 
     #optionModal .modal-body {
@@ -322,6 +324,7 @@ $option_str .= "</tbody></table>";
     }
 </style>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script defer src="../contract/js/alpinejs/cdn.min.js"></script>
 <script>
     // 加千分位
     function commafy(num) {
@@ -740,7 +743,8 @@ $option_str .= "</tbody></table>";
             $("#optionModal .modal-body td").unbind().click(function() {
                 var pobj = $(this).closest('td').parent();
                 console.log(jobj.html(pobj.find('td').eq(0).html() + ' ' + pobj.find('td').eq(1).html()));
-                jobj.html(pobj.find('td').eq(0).html() + ' ' + pobj.find('td').eq(1).html());
+                console.log(pobj.find('td').eq(0).html()+ pobj.find('td').eq(2).html() + ' ' + pobj.find('td').eq(1).html());
+                jobj.html(pobj.find('td').eq(0).html() + ' ' + pobj.find('td').eq(1).html() + '<br />(' + pobj.find('td').eq(2).html() + ')');
                 jobj.closest('td').parent().find('input[name=option_unit_price]').val(pobj.find('td').eq(5).html());
                 jobj.closest('td').parent().find('input[name=option_price_bp]').val(commafy(pobj.find('td').eq(5).html().replace(/[,]+/g, "") * jobj.closest('td').parent().find('input[name=option_qty]').val().replace(/[,]+/g, "")));
                 jobj.closest('td').parent().find('input[name=op_id]').val(pobj.find('input[name=option_id]').val());
@@ -1139,6 +1143,14 @@ $option_str .= "</tbody></table>";
         });
     });
 </script>
+<?php 
+require_once('./conn.php');
+$sql_str = "SELECT * FROM option_price WHERE status='Y' ORDER BY kind ASC";
+$stmt = $conn->prepare($sql_str);
+$stmt->execute();
+$options = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+?>
 <div>
     <ul class="notice">
         <li>「保存」：儲存價審單內容</li>
@@ -1167,13 +1179,7 @@ $option_str .= "</tbody></table>";
     </div>
 </div>
 <!--子窗:option加價-->
-<?php 
+<div class="modal fade" id="optionModal" tabindex="-1" role="dialog" aria-labelledby="optionModalTitle" aria-hidden="true" x-data=pricereviewOptionSelect()>
-$sql_str = "SELECT * FROM option_price WHERE status='Y' ORDER BY kind ASC";
-$stmt = $conn->prepare($sql_str);
-$stmt->execute();
-$options = $stmt->fetchAll(PDO::FETCH_ASSOC);
-?>
-<div class="modal fade" id="optionModal" tabindex="-1" role="dialog" aria-labelledby="optionModalTitle" aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -1181,9 +1187,26 @@ $options = $stmt->fetchAll(PDO::FETCH_ASSOC);
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
+                <label for="" >
+                    <input type="text" class="form-control" style="float:left" placeholder="搜尋..." />
+                </label>
+                <div class="categories">
+                    <button :class="['btn', (kind==0) ? 'btn-primary' : 'btn-secondary text-light']" @click="">顯示全部</button>
+                    <button :class="['btn', (kind=='A') ? 'btn-primary' : 'btn-secondary text-light']" @click="changeCategory('A')">A-1 車廂意匠</button>
+                    <button :class="['btn', (kind=='B') ? 'btn-primary' : 'btn-secondary text-light']">A-2 車廂內裝</button>
+                    <button :class="['btn', (kind=='C') ? 'btn-primary' : 'btn-secondary text-light']">A-3 車廂外部</button>
+                    <button :class="['btn', (kind=='D') ? 'btn-primary' : 'btn-secondary text-light']">A-4 控制與其他</button>
+                    <button :class="['btn', (kind=='E') ? 'btn-primary' : 'btn-secondary text-light']">B-1 平台梯</button>
+                    <button :class="['btn', (kind=='F') ? 'btn-primary' : 'btn-secondary text-light']">C-1 汰改</button>
+                    <br /><br />
+                    <template x-for="button in buttons" >
+                        <button :class="['btn', (kind==button) ? 'btn-primary' : 'btn-secondary text-light']" @click="kind=button">
+                    </template>
+
+                </div>
             </div>
             <div class="modal-body" >
-        <table id="table_index2" class="table table-striped table-bordered" style="width:100%">
+                <table id="" class="table table-striped table-bordered" style="width:100%">
                     <thead>
                         <tr class="kind-col">
                             <th scope="col" nowrap>名稱</th>
@@ -1195,26 +1218,16 @@ $options = $stmt->fetchAll(PDO::FETCH_ASSOC);
                         </tr>
                     </thead>
                     <tbody>
-                <?php foreach($options as $option): ?>
+                        <template x-for="option in options" >
-                    <tr>
+                            <tr style="cursor:pointer">
-                        <td><?php echo $option['group_name'] ?></td>
+                                <td x-text="option.group_name"> </td>
-                        <td><?php echo $option['spec']; ?></td>
+                                <td x-text="option.spec"></td>
-                        <td><?php echo $option['memo'] ?></td>
+                                <td x-text="option.memo"></td>
-                        <td><?php 
+                                <td x-text="optionalArr[option.optional]"></td>
-                            if($option['optional'] == 1){
+                                <td x-text="option.unit"></td>
-                                echo "標配";
+                                <td x-text="option.price"></td>
-                            }elseif($option['optional'] == 2){
-                                echo "選配";
-                            }elseif($option['optional'] == 3){
-                                echo "加價";
-                            }else{
-                                echo "";
-                            }
-                        ?></td>
-                        <td><?php echo $option['unit']; ?></td>
-                        <td>$<?php echo $option['price']; ?></td>
                             </tr>
-                <?php endforeach; ?>
+                        </template>
                     </tbody>
                 </table>
             </div>
@@ -1857,10 +1870,11 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){
                     <?php
                     if (count($last_pritem_arr) > 0 && isset($last_pritem_arr["B"])) {
                         foreach ($last_pritem_arr["B"] as $k => $v) {
+                            print_r($last_pritem_arr);
                     ?>
                             <tr name="option_templ">
                                 <td name="option_seat">
-                                    <a href="" name="option_href" data-toggle="modal"><?php echo $v["item_spec"] . '-(' . $v['item-memo'] . ')'; ?></a>
+                                    <a href="" name="option_href" data-toggle="modal"><?php echo $v["item_spec"] . '-(' . $v['item_memo'] . ')'; ?></a>
                                 </td>
                                 <td><input type="text" name="option_unit_price" class="form-control dollar-right" size="8" value="<?php echo number_format($v["item_unit_price"]); ?>" readonly></td>
                                 <td><input type="text" name="option_qty" class="form-control" size="2" maxlength="2" value="<?php echo $v["item_qty"]; ?>"></td>
@@ -2352,13 +2366,12 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){
             </tr>
         </tbody>
     </table>
-</div>
-
-      
-        <div class="nextline"></div>
     <ul>
     <li>營業權限85%以上；85-80%呈至區處長審核；80%以下呈至總經理審核。</li>
 </ul>
+</div>
+
+
 <div class="nextline"></div>
 <label for="attatch1">報價單</label>
 <input type="file" name="attatch1" id="attatch1"><a href="javascript:void(0);" name="filedel" class="btn btn-danger btn-sm">X</a>
@@ -2423,3 +2436,9 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){
 <?php
 include "../footer.php";
 ?>
+
+<script src="./assets/js/alpine.js"></script>
+
+<script>
+    const options = [...<?php echo json_encode($options); ?>];
+</script>