style: tab menu 디자인 변경

home_dir/www/ksvc/inc/css/scss/component/_form.scss

@@ -29,10 +29,12 @@ form {
             border-bottom: none;
             border-radius: 5px 5px 0 0;
             background: white;
+
             color: $blue-005;
             font-size: 13px;
+            font-weight: 600;
             
-            &:hover{
+            &:hover, &.on{
               background: $blue-005;
               color: white;
             }
@@ -79,7 +81,15 @@ form {
 
                 li{
                   border-radius: 50px;
-                  border-bottom: solid 2px $blue-005;
+                  border: solid 2px $blue-001;
+
+                  &:hover{
+                    background-color: $blue-001;
+                  }
+                  &.on{
+                    background-color: $blue-001;
+
+                  }
                 }
               }
               .table-title{

home_dir/www/ksvc/inc/css/style.css

@@ -941,8 +941,9 @@ form[name=frmWorkData] > div.form-button-container .form-button-box button {
   background: white;
   color: #162788;
   font-size: 13px;
+  font-weight: 600;
 }
-form[name=frmWorkData] > div.form-button-container .form-button-box button:hover {
+form[name=frmWorkData] > div.form-button-container .form-button-box button:hover, form[name=frmWorkData] > div.form-button-container .form-button-box button.on {
   background: #162788;
   color: white;
 }
@@ -981,7 +982,13 @@ form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .t
 }
 form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li {
   border-radius: 50px;
-  border-bottom: solid 2px #162788;
+  border: solid 2px #4A5ED2;
+}
+form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li:hover {
+  background-color: #4A5ED2;
+}
+form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .tab-menu li.on {
+  background-color: #4A5ED2;
 }
 form[name=frmWorkData] > div.form-contents .detail-container .detail-contents .table-box .table-title {
   width: 99%;

home_dir/www/ksvc/site/sts_order_prod/reg_prod_result.js

@@ -104,6 +104,14 @@ class FieldPop {
             isInsp: true,
             isFile: false
           },
+
+          tabs1: ['과거불량이력 조회', '작업표준서 조회', '도면 조회'],
+
+          tabs2: ['설비 고장등록', '가동', '비가동'],
+
+          com2:['isFacltBreak','isRun','isNoRun'],
+          
+          activeTab : '',
           
           tableField : {
             isWorker : [
@@ -218,7 +226,9 @@ class FieldPop {
         },
 
         // 클릭시 컴포넌트 생성 및 삭제로 페이지 레이아웃 변경
-        showComponent(com) {
+        showComponent(com, tab) {
+          this.activeTab = tab;
+          
           Object.keys(this.isComponent).map((key)=>{
             this.isComponent[key] = com == key ? true : false;
           });

home_dir/www/ksvc/site/sts_order_prod/reg_prod_result.php

@@ -15,14 +15,10 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
         <!-- form button-container -->
         <div class="form-button-container flexrow flexcenter gap10">
           <div class="form-button-box flexrow gap06">
-            <button class="form-button" type="button" @click="showDefect">과거불량이력 조회</button>
+            <button type="button" v-for="(tab, idx) in tabs1" :key="idx" :class="{ on : activeTab === tab}" @click="activeTab = tab" >{{ tab }}</button>
-            <button class="form-button" type="button" @click="showWrkDocs">작업표준서 조회</button>
-            <button class="form-button" type="button" @click="showDraw">도면 조회</button>
           </div>
           <div class="form-button-box flexrow gap06">
-            <button class="form-button" type="button" @click="showComponent('isFacltBreak')">설비 고장등록</button>
+            <button type="button" v-for="(tab, idx) in tabs2" :key="idx" :class="{ on : activeTab === tab }" @click="showComponent(com2[idx], tab)" >{{ tab }}</button>
-            <button class="form-button run-btn" type="button" @click="showComponent('isRun')">가동</button>
-            <button class="form-button norun-btn" type="button" @click="showComponent('isNoRun')">비가동</button>
           </div>
         </div>
 
@@ -68,7 +64,7 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
               <div class="input-container flexrow gap06">
                 <div class="input-box flex-1">
                   <label for="EMP_NO">작업자</label>
-                  <input v-model="formData.EMP_NO" @click="showComponent('isWorker')" type="text" id="EMP_NO" name="EMP_NO"
+                  <input v-model="formData.EMP_NO" @click="showComponent('isWorker')" :class="{on : isComponent['isWorker']}" type="text" id="EMP_NO" name="EMP_NO"
                     class="form-control form-control-sm" readonly />
                 </div>
                 <div class="input-box flex-1">
@@ -81,7 +77,7 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
               <div class="input-container flexrow gap06">
                 <div class="input-box flex-1">
                   <label for="WO_NO">설비</label>
-                  <input v-model="formData.FACLT_CD" @click="showComponent('isFacility')" type="text" id="WO_NO" name="WO_NO"
+                  <input v-model="formData.FACLT_CD" @click="showComponent('isFacility')" :class="{on : isComponent['isFacility']}" type="text" id="WO_NO" name="WO_NO"
                     class="form-control form-control-sm" readonly />
                 </div>
                 <div class="input-box flex-1">
@@ -119,12 +115,12 @@ include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
               <div class="input-container flexrow gap06">
                 <div class="input-box flex-1">
                   <label for="WO_NO">양품수량</label>
-                  <input @click="showComponent('isProd')" type="text" id="WO_NO" name="WO_NO"
+                  <input @click="showComponent('isProd')" :class="{on : isComponent['isProd']}" type="text" id="WO_NO" name="WO_NO"
                     class="form-control form-control-sm" readonly />
                 </div>
                 <div class="input-box flex-1">
                   <label for="">불량수량</label>
-                  <input @click="showComponent('isDef')" type="text" id="" name="" class="form-control form-control-sm"
+                  <input @click="showComponent('isDef')" :class="{on : isComponent['isDef']}" type="text" id="" name="" class="form-control form-control-sm"
                     readonly />
                 </div>
               </div>