#318 修改授權管理頁介面： 變更為 分頁控件，整合AclassOne 有週期無週期卡牌資訊

TEAMModelOS/ClientApp/src/locale/lang/en-US/serviceDriveAuth.js

@@ -1,7 +1,7 @@
 export default {
   //授權管理服務清單
-  AEGMCPLY: 'AClass One 週期',
-  RYGVCPLY: 'AClass One 無週期',
+  "AEGMCPLY":"AClass One",//AClass One 週期
+  'RYGVCPLY':'AClass One',//AClass One 無週期
   IPALYEIY: '智慧教學服務空間',
   '6BOPC6MD': '教與學大數據管理服務',
   ON6MBDOP: '智慧學校大數據管理服務'

TEAMModelOS/ClientApp/src/locale/lang/zh-CN/serviceDriveAuth.js

@@ -1,9 +1,8 @@
 export default {
   //授權管理服務清單
-  AEGMCPLY: 'AClass One 週期',
-  RYGVCPLY: 'AClass One 無週期',
+  AEGMCPLY: 'AClass One', //AClass One 週期
+  RYGVCPLY: 'AClass One', //AClass One 無週期
   IPALYEIY: '智慧教學服務空間',
   '6BOPC6MD': '教與學大數據管理服務',
   ON6MBDOP: '智慧學校大數據管理服務'
-  
 }

TEAMModelOS/ClientApp/src/locale/lang/zh-TW/serviceDriveAuth.js

@@ -1,7 +1,7 @@
 export default {
 //授權管理服務清單
-"AEGMCPLY":"AClass One 週期",
-'RYGVCPLY':'AClass One 無週期',
+"AEGMCPLY":"AClass One",//AClass One 週期
+'RYGVCPLY':'AClass One',//AClass One 無週期
 'IPALYEIY':'智慧教學服務空間',
 '6BOPC6MD':'教與學大數據管理服務',
 'ON6MBDOP':'智慧學校大數據管理服務'

TEAMModelOS/ClientApp/src/store/module/serviceDriveAuth.js

@@ -17,6 +17,7 @@ export default {
     spaceStatus: undefined,
     serviceIntroIsOpen: [],
     hiteachListItemIsOpen: [], //存放每個開關
+    currentTab:0,//0 服務清單， 1 hiteach 清單
 
     //接實際api使用，一開始序號為空
 
@@ -83,8 +84,15 @@ export default {
         return {};
       }
     },
+    getTab(state){
+      return state.currentTab
+    }
   },
   mutations: {
+    setTab(state,page){
+      state.currentTab = page;
+
+    },
     setServiceIntroIsOpen(state, data) {
       state.serviceIntroIsOpen = data;
     },

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/Index.vue

@@ -6,12 +6,11 @@
   <div id="serviceDriveAuth">
     <Loading v-if="isloading == true"></Loading>
     <Row>
-      <i-col :xs="24" :sm="24" :md="24" :lg="7">
-        <ServiceList :serviceList="serviceList" :windowWidth='windowWidth' :windowHeight='windowHeight'/> 
-      </i-col>
-       <i-col :xs="24" :sm="24" :md="24" :lg="11">
-        <HiteachAuthList :hiteachAuthList="hiteachAuthList" :windowWidth='windowWidth' :windowHeight='windowHeight'/>
+      <i-col :xs="24" :sm="24" :md="24" :lg="18">
+        <ServiceList v-show="currentTab==0" :serviceList="serviceList" :windowWidth='windowWidth' :windowHeight='windowHeight' /> 
+         <HiteachAuthList v-show="currentTab==1" :hiteachAuthList="hiteachAuthList" :windowWidth='windowWidth' :windowHeight='windowHeight'/>
       </i-col>
+      
       <i-col :xs="24" :sm="24" :md="24" :lg="6">
         <SpaceStatus :spaceStatus="spaceStatus" :windowWidth='windowWidth' :windowHeight='windowHeight' :isloading='isloading'/>
       </i-col>
@@ -53,13 +52,15 @@ export default {
     ...mapGetters({
       serviceList: "serviceDriveAuth/getServiceList",
       hiteachAuthList:"serviceDriveAuth/getHiteachAuthList",
-      spaceStatus:"serviceDriveAuth/getSpaceStatus"
+      spaceStatus:"serviceDriveAuth/getSpaceStatus",
+      currentTab:'serviceDriveAuth/getTab'
     }),
   },
 
 
 
   methods: {
+  
     getSchoolProduct(schoolCode){
       this.$store.dispatch("serviceDriveAuth/getSchoolProduct",schoolCode).then(
         (res) => {

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/HiteachAuthList.less

@@ -1,9 +1,38 @@
 .hiteachAuth-list {
-  .no-data-text{
+  .title-item {
+    margin-right: 30px;
+    position: relative;
+    font-weight: 400;
+    cursor: pointer;
+  }
+  .title-checked {
+    font-weight: 900;
+
+    .title-checked-line {
+      border-bottom: 2px solid #1cc0f3;
+      animation: 0.1s expand;
+      width: 100%;
+      height: 2px;
+      top: 32px;
+      left: 0px;
+      position: absolute;
+    }
+    @keyframes expand {
+      0% {
+        width: 0px;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+  }
+
+  .no-data-text {
     text-align: center;
-    padding:40px;
+    padding: 40px;
   }
   .ivu-select-dropdown {
+    margin-left: 80px;
     border-radius: 4px !important;
     width: auto;
     background: #000;
@@ -27,26 +56,10 @@
       font-size: 10px;
       font-weight: 500;
     }
-    background: -webkit-linear-gradient(
-      360deg,
-      rgba(30, 30, 30, 0) 0%,
-      rgb(30, 30, 30)
-    );
-    background: -webkit-linear-gradient(
-      360deg,
-      rgba(30, 30, 30, 0) 0%,
-      rgb(30, 30, 30)
-    );
-    background: -webkit-linear-gradient(
-      360deg,
-      rgba(30, 30, 30, 0) 0%,
-      rgb(30, 30, 30)
-    );
-    background: -webkit-linear-gradient(
-      360deg,
-      rgba(30, 30, 30, 0) 0%,
-      rgb(30, 30, 30)
-    );
+    background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgb(30, 30, 30));
+    background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgb(30, 30, 30));
+    background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgb(30, 30, 30));
+    background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgb(30, 30, 30));
     padding: 10px 30px;
   }
   .hiteach-info {
@@ -57,7 +70,7 @@
       position: relative;
       top: 0px;
       left: 0px;
-      margin-right:4px;
+      margin-right: 4px;
       display: inline-block;
       font-size: 8px !important;
       font-weight: bolder;
@@ -74,13 +87,13 @@
       margin-top: -5px;
       font-weight: 500;
     }
-    .info-num-small{
+    .info-num-small {
       font-size: 30px;
       display: inline-block;
       font-weight: 500;
       position: relative;
       line-height: 25px;
-      left:15px;
+      left: 15px;
       top: 6px;
     }
   }
@@ -88,7 +101,7 @@
   .action-btn {
     cursor: pointer;
     border-radius: 5px;
-    margin-top: 15px;
+    margin-top: 35px;
     padding: 5px 12px;
     font-size: 12px;
     display: inline-block;
@@ -101,10 +114,8 @@
     &:hover {
       background-color: darken(#1cc0f3, 10%);
     }
-   
   }
   .hiteach-list {
-   
     padding-bottom: 80px;
     overflow: auto;
     border-top: 1px solid rgba(98, 97, 101, 0.4);
@@ -121,7 +132,7 @@
         z-index: 2;
         font-size: 30px;
         cursor: pointer;
-        &:hover{
+        &:hover {
           color: #1cc0f3;
         }
       }
@@ -177,7 +188,7 @@
         border-radius: 3px;
       }
       .pclist {
-        margin-left: 40px;
+        margin-left: 12%;
         @keyframes Itemfadein {
           0% {
             opacity: 0;
@@ -197,37 +208,17 @@
           .action-btn {
             display: block;
           }
-          background: -webkit-linear-gradient(
-            360deg,
-            rgba(30, 30, 30, 0) 0%,
-            rgba(110, 110, 110, 0.2) 50%,
-            rgba(110, 110, 110, 0.4) 100%
-          );
-          background: -webkit-linear-gradient(
-            360deg,
-            rgba(30, 30, 30, 0) 0%,
-            rgba(110, 110, 110, 0.2) 50%,
-            rgba(110, 110, 110, 0.4) 100%
-          );
-          background: -webkit-linear-gradient(
-            360deg,
-            rgba(30, 30, 30, 0) 0%,
-            rgba(110, 110, 110, 0.2) 50%,
-            rgba(110, 110, 110, 0.4) 100%
-          );
-          background: -webkit-linear-gradient(
-            360deg,
-            rgba(30, 30, 30, 0) 0%,
-            rgba(110, 110, 110, 0.2) 50%,
-            rgba(110, 110, 110, 0.4) 100%
-          );
+          background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgba(110, 110, 110, 0.2) 50%, rgba(110, 110, 110, 0.4) 100%);
+          background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgba(110, 110, 110, 0.2) 50%, rgba(110, 110, 110, 0.4) 100%);
+          background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgba(110, 110, 110, 0.2) 50%, rgba(110, 110, 110, 0.4) 100%);
+          background: -webkit-linear-gradient(360deg, rgba(30, 30, 30, 0) 0%, rgba(110, 110, 110, 0.2) 50%, rgba(110, 110, 110, 0.4) 100%);
         }
         &:first-child {
           border-bottom: none;
         }
         padding: 20px;
 
-        padding-left: 65px;
+        padding-left: 28px;
         list-style: none;
         .pc-title {
           font-size: 16px;
@@ -240,19 +231,18 @@
         .action-btn {
           display: none;
           position: absolute;
-          bottom: 36px;
+          bottom: 35%;
           border-radius: 4px !important;
         }
       }
-      .remove-pc{
+      .remove-pc {
         animation: 2s removeOut;
-      
+
         @keyframes removeOut {
-          0%{
+          0% {
             transform: translate(0px);
-            
           }
-          100%{
+          100% {
             transform: translate(130px);
             opacity: 0;
           }
@@ -265,7 +255,7 @@
     }
     .hicon-wrap {
       padding: 32px;
-      padding-left: 12px;
+      padding-left: 30%;
       * {
         font-size: 50px;
       }

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/HiteachAuthList.vue

@@ -19,7 +19,7 @@
     </Modal>
     <Loading v-if="isloading == true"></Loading>
     <div class="service-list">
-      <div class="service-listTitle">智慧教室授權管理</div>
+      <div class="service-listTitle"><span class="title-item" @click="setTab(0)">服務授權列表</span> <span class="title-item" @click="setTab(1)" :class="{ 'title-checked': true }" >智慧教室授權管理<span class="title-checked-line"></span></span></div>
       <Row>
         <i-col :xs="24" :sm="24" :md="24" :lg="19">
           <Row>
@@ -243,7 +243,7 @@ import "@/icons/svg/hiteach_std.svg";
 import "@/icons/svg/hiteach_pro.svg";
 import "@/icons/svg/hiteach_tbl.svg";
 import Loading from "@/common/Loading.vue";
-import { mapGetters } from "vuex";
+import { mapGetters,mapMutations } from "vuex";
 export default {
   props: ["hiteachAuthList", "windowHeight", "windowWidth"],
   name: "HiteachAuthList",
@@ -313,8 +313,11 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      setTab: 'serviceDriveAuth/setTab'
+    }),
+
     //先讓使用者確定是否解除授權
-   
     comfirmRemovePC(mac) {
       this.isOpenRemove = true;
       this.currentConfirmRemovePC = mac;

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/ServiceList.less

@@ -10,7 +10,39 @@
   .listTitle-noMargin {
     margin-left: 0px;
     padding-left: 20px;
+    .title-item{
+      margin-right:30px;
+      position: relative;
+      font-weight: 400; 
+      cursor: pointer;
+     
+    }
+    
+    .title-checked{
+      
+      font-weight: 900; 
+     
+      .title-checked-line{
+        border-bottom: 2px solid #1cc0f3;
+        animation: 0.1s expand ;
+        width: 100%;
+        height: 2px;
+        top:32px;
+        left:0px;
+        position: absolute;
+      }
+      @keyframes expand {
+        0%{
+          width: 0px;
+  
+        }
+        100%{
+          width: 100%;
+        }
+      }
+    }
   }
+  
   .service-search {
     position: relative;
     margin-top: -60px;

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/ServiceList.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="service-list">
-    <div class="service-listTitle listTitle-noMargin">服務授權列表</div>
+    <div class="service-listTitle listTitle-noMargin"><span class="title-item" :class="{ 'title-checked': true }" @click="setTab(0)">服務授權列表<span class="title-checked-line"></span></span> <span class="title-item" @click="setTab(1)">智慧教室授權管理</span></div>
     <div class="serviceList-wrap" :style="{ height: windowHeight - 116 + 'px' }">
-      <div class="service-item" v-for="(item, index) in serviceList" :key="index">
+      <div class="service-item" v-for="(item, index) in serviceList" :key="index" v-show="item.prodCode != 'AEGMCPLY'">
         <div class="detail-btn" @click="setIntroOpen(index)">
           <Icon v-show="serviceIntroIsOpen[index].isOpen == false" type="ios-arrow-down" />
           <Icon v-show="serviceIntroIsOpen[index].isOpen == true" type="ios-arrow-up" />
         </div>
         <div v-for="(proName, index) in serviceNameList" :key="index">
-          <p class="service-name" v-if="item.prodCode == proName">
+          <p class="service-name" v-if="item.prodCode == proName && proName != 'AEGMCPLY'">
             {{ $t(`serviceDriveAuth['${proName}']`) }}
           </p>
         </div>
@@ -17,12 +17,13 @@
 
         <p class="nomal-text">
           服務啟用 / 到期日:
-          <span class="strong-text" v-if="item.startDate != 0">{{ converTime(item.startDate) }} - {{ converTime(item.endDate) }}</span>
-          <span class="strong-text" v-if="item.startDate == 0">--</span>
+          <span class="strong-text" v-if="item.startDate != 0 && item.prodCode != 'RYGVCPLY'">{{ converTime(item.startDate) }} - {{ converTime(item.endDate) }}</span>
+          <span class="strong-text" v-if="item.startDate == 0 && item.prodCode != 'RYGVCPLY'">--</span>
+          <span class="strong-text" v-if="item.prodCode == 'RYGVCPLY' && isNaN(aclassOneTimeLimitData.startDate) == false">{{ converTime(aclassOneTimeLimitData.startDate) }} - {{ converTime(aclassOneTimeLimitData.endDate) }}</span>
         </p>
         <div v-if="item.hasOwnProperty('notbuy') != true">
           <Row class="time-bar-wrap">
-            <i-col :xs="24" :sm="24" :md="24" :lg="16" style="padding-right: 10px">
+            <i-col :xs="24" :sm="24" :md="24" :lg="20" style="padding-right: 10px">
               <div class="time-bar" v-if="item.startDate != 0"></div>
               <div
                 class="remain-bar"
@@ -33,7 +34,7 @@
                 }"
               ></div>
             </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="8" v-if="item.startDate != 0">
+            <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.startDate != 0">
               <span class="remainDay">剩餘</span>
               <span
                 class="remainDay-text"
@@ -44,12 +45,45 @@
               ><span class="remainDay">天</span>
             </i-col>
           </Row>
+          <Row class="time-bar-wrap" v-if="isNaN(aclassOneTimeLimitData.startDate) == false">
+            <i-col :xs="24" :sm="24" :md="24" :lg="20" style="padding-right: 10px">
+              <div class="time-bar" v-if="item.prodCode == 'RYGVCPLY'"></div>
+              <div
+                class="remain-bar"
+                v-if="item.prodCode == 'RYGVCPLY'"
+                :style="{
+                  width: (dateRemain(today(), converTime(aclassOneTimeLimitData.endDate)) / dateRemain(converTime(aclassOneTimeLimitData.startDate), converTime(aclassOneTimeLimitData.endDate))).toFixed(2) * 100 + '%',
+                  'background-color': colorPercent(converTime(aclassOneTimeLimitData.startDate), converTime(aclassOneTimeLimitData.endDate)) ? '#ad3435' : '#1cc0f3'
+                }"
+              ></div>
+            </i-col>
+
+            <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.prodCode == 'RYGVCPLY'">
+              <span class="remainDay">剩餘</span>
+              <span
+                class="remainDay-text"
+                :style="{
+                  color: colorPercent(converTime(aclassOneTimeLimitData.startDate), converTime(aclassOneTimeLimitData.endDate)) ? '#ad3435' : '#1cc0f3'
+                }"
+                >{{ dateRemain(today(), converTime(aclassOneTimeLimitData.endDate)) }}</span
+              ><span class="remainDay">天</span>
+            </i-col>
+          </Row>
         </div>
         <!--給AclassOne-->
         <div class="detailinfo-block" v-if="index == 0 && serviceIntroIsOpen[index].isOpen == true">
-          <p class="nomal-text auth-num" v-if="item.hasOwnProperty('notbuy') == false">
-            授權數量：<span class="strong-text">{{ item.avaliable }}</span>
-          </p>
+          <Row>
+            <i-col :xs="24" :sm="24" :md="24" :lg="10">
+              <p class="nomal-text auth-num" v-if="item.hasOwnProperty('notbuy') == false">
+                無週期授權數量：<span class="strong-text">{{ item.avaliable }}</span>
+              </p>
+            </i-col>
+            <i-col :xs="24" :sm="24" :md="24" :lg="14">
+              <p class="nomal-text auth-num" v-if="aclassOneTimeLimitData != ''">
+                有週期授權數量：<span class="strong-text">{{ aclassOneTimeLimitData.avaliable }}</span>
+              </p></i-col
+            >
+          </Row>
           <Row v-if="item.hasOwnProperty('notbuy') == false">
             <i-col :xs="24" :sm="24" :md="24" :lg="10">
               <div class="title-rec"></div>
@@ -101,16 +135,17 @@
 </template>
 
 <script>
-import router from '../../../router'
+
 import AclassOneChart from './AclassOneChart'
-import { mapGetters } from 'vuex'
+import { mapGetters,mapMutations } from 'vuex'
 export default {
   props: ['serviceList', 'windowWidth', 'windowHeight'],
   name: 'ServiceList',
   data() {
     return {
       serviceIntroIsOpen: {},
-      oriIndex: ''
+      oriIndex: '',
+      aclassOneTimeLimitData: ''
     }
   },
   components: {
@@ -137,12 +172,22 @@ export default {
           isOpen: false
         })
         temp[0].isOpen = true //預設把AclassOne細節打開
+        if (this.serviceList[i].prodCode == 'AEGMCPLY' && this.serviceList[i].hasOwnProperty('notbuy') != true) {
+          //console.log(this.serviceList[i])
+          this.aclassOneTimeLimitData = this.serviceList[i]
+        }
       }
       this.serviceIntroIsOpen = temp
     }
   },
-
+  beforeRouteLeave(to, from, next) {
+    this.setTab(0)
+    next()
+  },
   methods: {
+    ...mapMutations({
+      setTab: 'serviceDriveAuth/setTab'
+    }),
     converTime: function(time) {
       //time: Unix timestamp(秒)
       let datetime = new Date()