处理授权tab顺序

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

@@ -17,7 +17,7 @@ export default {
     spaceStatus: undefined,
     serviceIntroIsOpen: [],
     hiteachListItemIsOpen: [], //存放每個開關
-    currentTab:0,//0 服務清單， 1 hiteach 清單
+    currentTab:1,//0 服務清單， 1 hiteach 清單
 
     //接實際api使用，一開始序號為空
 

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

@@ -1,242 +1,182 @@
 <template>
-  <div class="hiteachAuth-list">
-    <!-- 新增知识点弹窗 -->
-    <Modal
-      id="hiteachAuth-modal"
-      ref="pointRef"
-      v-model="isOpenRemove"
-      :title="title"
-      
-    >
-      <p>{{$t("serviceDriveAuth['當前您所選中的PC']")}}【{{ currentConfirmRemovePC }}】{{$t("serviceDriveAuth['，確定解除授權?']")}}</p>
-      <p>{{$t("serviceDriveAuth['解除授權後，可在教室中的電腦再次進行綁定授權。']")}}</p>
+    <div class="hiteachAuth-list">
+        <!-- 新增知识点弹窗 -->
+        <Modal id="hiteachAuth-modal" ref="pointRef" v-model="isOpenRemove" :title="title">
+            <p>{{$t("serviceDriveAuth['當前您所選中的PC']")}}【{{ currentConfirmRemovePC }}】{{$t("serviceDriveAuth['，確定解除授權?']")}}</p>
+            <p>{{$t("serviceDriveAuth['解除授權後，可在教室中的電腦再次進行綁定授權。']")}}</p>
 
-      <div slot="footer">
-        <Button type="text" @click="isOpenRemove = false">{{$t("serviceDriveAuth['取消']")}}</Button>
-        <Button type="primary" @click="removeUserPC(currentConfirmRemovePC)"
-          >{{$t("serviceDriveAuth['確定']")}}</Button
-        >
-      </div>
-    </Modal>
-    <Loading v-if="isloading == true"></Loading>
-    <div class="service-list">
-      <div class="service-listTitle"><span class="title-item" @click="setTab(0)">{{$t("serviceDriveAuth['服務授權列表']")}}</span> <span class="title-item" @click="setTab(1)" :class="{ 'title-checked': true }" >{{$t("serviceDriveAuth['智慧教室授權管理']")}}<span class="title-checked-line"></span></span></div>
-      <Row>
-        <i-col :xs="24" :sm="24" :md="24" :lg="19">
-          <Row>
-            <i-col :xs="24" :sm="24" :md="24" :lg="13">
-              <div class="hiteach-info">
-                <p class="nomal-text">{{$t("serviceDriveAuth['Hiteach序號數']")}}</p>
-                <Row>
-                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
-                    <p class="device-max">{{$t("serviceDriveAuth['大量']")}}</p>
-                    &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
-                    <p class="info-num-small">{{ serialInfo.multiAuthNum }}</p>
-                  </i-col>
-                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
-                    <p class="device-max">{{$t("serviceDriveAuth['單一']")}}</p>
-                    &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
-                    <p class="info-num-small">{{ serialInfo.singleAuthNum }}</p>
-                  </i-col>
-                </Row>
+            <div slot="footer">
+                <Button type="text" @click="isOpenRemove = false">{{$t("serviceDriveAuth['取消']")}}</Button>
+                <Button type="primary" @click="removeUserPC(currentConfirmRemovePC)">{{$t("serviceDriveAuth['確定']")}}</Button>
+            </div>
+        </Modal>
+        <Loading v-if="isloading == true"></Loading>
+        <div class="service-list">
+            <div class="service-listTitle">
+                <span class="title-item" @click="setTab(1)" :class="{ 'title-checked': true }">
+                    {{$t("serviceDriveAuth['智慧教室授權管理']")}}
+                    <span class="title-checked-line">
+                    </span>
+                </span>
+                <span class="title-item" @click="setTab(0)">{{$t("serviceDriveAuth['服務授權列表']")}}</span>
+            </div>
+            <Row>
+                <i-col :xs="24" :sm="24" :md="24" :lg="19">
+                    <Row>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="13">
+                            <div class="hiteach-info">
+                                <p class="nomal-text">{{$t("serviceDriveAuth['Hiteach序號數']")}}</p>
+                                <Row>
+                                    <i-col :xs="24" :sm="24" :md="24" :lg="12">
+                                        <p class="device-max">{{$t("serviceDriveAuth['大量']")}}</p>
+                                        &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
+                                        <p class="info-num-small">{{ serialInfo.multiAuthNum }}</p>
+                                    </i-col>
+                                    <i-col :xs="24" :sm="24" :md="24" :lg="12">
+                                        <p class="device-max">{{$t("serviceDriveAuth['單一']")}}</p>
+                                        &nbsp;<span class="nomal-text">{{$t("serviceDriveAuth['授權']")}}</span>
+                                        <p class="info-num-small">{{ serialInfo.singleAuthNum }}</p>
+                                    </i-col>
+                                </Row>
 
-                <!--p class="info-num">{{ serialInfo.totalNum }}</p-->
-              </div>
-            </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="5">
-              <div class="hiteach-info">
-                <p class="nomal-text">{{$t("serviceDriveAuth['可啟用裝置數']")}}</p>
-                <p class="info-num">
-                  {{ serialInfo.couldActiveNum }}
-                </p>
-              </div>
-            </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="6">
-              <div class="hiteach-info">
-                <p class="nomal-text">{{$t("serviceDriveAuth['已啟用裝置數']")}}</p>
-                <p class="info-num">
-                  {{ serialInfo.activeNum }}
-                </p>
-              </div>
-            </i-col>
-          </Row></i-col
-        >
-        <i-col :xs="24" :sm="24" :md="24" :lg="5">
-          <div class="action-btn" @click="gotoHiteachMgmt()">
-            {{$t("serviceDriveAuth['管理Hiteach教室']")}}
-          </div>
-        </i-col>
-      </Row>
-    </div>
-    <div class="hiteach-info-border" />
-    <div class="hiteach-type-filter">
-       <!--篩選選單-->
-      <Dropdown @on-click="filterList">
-        <a class="title" href="javascript:void(0)">
-          <span
-            v-for="item in filterListItem"
-            v-show="filterType == item.name"
-            :key="item.name"
-            >{{ item.text }}</span
-          >
+                                <!--p class="info-num">{{ serialInfo.totalNum }}</p-->
+                            </div>
+                        </i-col>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="5">
+                            <div class="hiteach-info">
+                                <p class="nomal-text">{{$t("serviceDriveAuth['可啟用裝置數']")}}</p>
+                                <p class="info-num">
+                                    {{ serialInfo.couldActiveNum }}
+                                </p>
+                            </div>
+                        </i-col>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="6">
+                            <div class="hiteach-info">
+                                <p class="nomal-text">{{$t("serviceDriveAuth['已啟用裝置數']")}}</p>
+                                <p class="info-num">
+                                    {{ serialInfo.activeNum }}
+                                </p>
+                            </div>
+                        </i-col>
+                    </Row>
+                </i-col>
+                <i-col :xs="24" :sm="24" :md="24" :lg="5">
+                    <div class="action-btn" @click="gotoHiteachMgmt()">
+                        {{$t("serviceDriveAuth['管理Hiteach教室']")}}
+                    </div>
+                </i-col>
+            </Row>
+        </div>
+        <div class="hiteach-info-border" />
+        <div class="hiteach-type-filter">
+            <!--篩選選單-->
+            <Dropdown @on-click="filterList">
+                <a class="title" href="javascript:void(0)">
+                    <span v-for="item in filterListItem" v-show="filterType == item.name" :key="item.name">{{ item.text }}</span>
 
-          <span><Icon type="ios-arrow-down"></Icon></span>
-        </a>
-        <DropdownMenu slot="list">
-          <DropdownItem
-            v-for="item in filterListItem"
-            :name="`${item.name}`"
-            :key="item.name"
-            >{{ item.text }}</DropdownItem
-          >
-        </DropdownMenu>
-      </Dropdown>
-    </div>
-    <div class="hiteach-list" :style="{ height: windowHeight - 250 + 'px' }">
-      <!--無資料時-->
-       <div
-        v-if="
+                    <span>
+                        <Icon type="ios-arrow-down"></Icon>
+                    </span>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem v-for="item in filterListItem" :name="`${item.name}`" :key="item.name">{{ item.text }}</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+        <div class="hiteach-list" :style="{ height: windowHeight - 250 + 'px' }">
+            <!--無資料時-->
+            <div v-if="
          serialInfo.multiAuthNum==0&& serialInfo.singleAuthNum==0
-        "
-        class="no-data-text"
-      >
-        <img src="../../../assets/icon/no_data.png" width="120" />
-        <p style="color: #808080">{{$t("serviceDriveAuth['暂无数据']")}}</p>
-      </div>
+        " class="no-data-text">
+                <img src="../../../assets/icon/no_data.png" width="120" />
+                <p style="color: #808080">{{$t("serviceDriveAuth['暂无数据']")}}</p>
+            </div>
 
+            <div class="hiteach-item" v-for="(i, index) in hiteachAuthList" :key="i.id" v-show="filterCondition(i)">
+                <div class="detail-btn" @click="setIntroOpen(index)" v-if="i.endDate != 1 && i.deviceBound.length != 0 && i.deviceMax != 1">
+                    <!--只要是單一就直接展開無需開關控件-->
+                    <Icon v-show="hiteachListItemIsOpen[index].isOpen == false" type="ios-arrow-down" />
+                    <Icon v-show="hiteachListItemIsOpen[index].isOpen == true" type="ios-arrow-up" />
+                </div>
+                <Row>
+                    <i-col :xs="24" :sm="24" :md="24" :lg="3">
+                        <div class="hicon-wrap">
+                            <v-icon v-if="i.prodCode === 'J223IZ6M'" iconClass="hiteach_std" />
+                            <v-icon v-if="i.prodCode === 'J223IZAM'" iconClass="hiteach_pro" />
+                            <v-icon v-if="i.prodCode === '3222C6D2'" iconClass="hiteach_tbl" />
+                        </div>
+                    </i-col>
+                    <i-col :xs="24" :sm="24" :md="24" :lg="21">
+                        <p class="title">
 
-      <div
-        class="hiteach-item"
-        v-for="(i, index) in hiteachAuthList"
-        :key="i.id"
-        v-show="filterCondition(i)"
-      >
-        <div
-          class="detail-btn"
-          @click="setIntroOpen(index)"
-          v-if="i.endDate != 1 && i.deviceBound.length != 0 && i.deviceMax != 1"
-        >
-          <!--只要是單一就直接展開無需開關控件-->
-          <Icon
-            v-show="hiteachListItemIsOpen[index].isOpen == false"
-            type="ios-arrow-down"
-          />
-          <Icon
-            v-show="hiteachListItemIsOpen[index].isOpen == true"
-            type="ios-arrow-up"
-          />
-        </div>
-        <Row>
-          <i-col :xs="24" :sm="24" :md="24" :lg="3">
-            <div class="hicon-wrap">
-              <v-icon
-                v-if="i.prodCode === 'J223IZ6M'" 
-                iconClass="hiteach_std"
-              /><v-icon
-                v-if="i.prodCode === 'J223IZAM'"
-                iconClass="hiteach_pro"
-              /><v-icon v-if="i.prodCode === '3222C6D2'" iconClass="hiteach_tbl" />
-            </div>
-          </i-col>
-          <i-col :xs="24" :sm="24" :md="24" :lg="21">
-            <p class="title">
-            
-              <span v-if="i.prodCode === 'J223IZ6M'" >HiTeach STD </span>
-              <span v-if="i.prodCode === '3222C6D2'" >HiTeach TBL </span>
-              <span v-if="i.prodCode === 'J223IZAM'" >HiTeach PRO </span>
-              <span class="device-max">{{
+                            <span v-if="i.prodCode === 'J223IZ6M'">HiTeach STD </span>
+                            <span v-if="i.prodCode === '3222C6D2'">HiTeach TBL </span>
+                            <span v-if="i.prodCode === 'J223IZAM'">HiTeach PRO </span>
+                            <span class="device-max">{{
                 i.deviceMax == 1 ? $t("serviceDriveAuth['單一']") : $t("serviceDriveAuth['大量']")
               }}</span>
-            </p>
-            <p
-              class="serial"
-              :class="{ 'overtime-text': i.expireStatus == 'F' }"
-            >
-              {{ i.serial }}
-            </p>
+                        </p>
+                        <p class="serial" :class="{ 'overtime-text': i.expireStatus == 'F' }">
+                            {{ i.serial }}
+                        </p>
 
-            <p class="app-group">
-              <span
-                v-for="(item, index) in aprules"
-                :key="index"
-                class="more-app"
-                :class="{
+                        <p class="app-group">
+                            <span v-for="(item, index) in aprules" :key="index" class="more-app" :class="{
                   'bought-app': i.aprule!=null&&i.aprule.hasOwnProperty(item) == true,
-                }"
-                >{{ $t("schoolBaseInfo." + item) }}</span
-              >
-             
-            </p>
-            <Row>
-              <i-col :xs="24" :sm="24" :md="24" :lg="7">
-                <p class="nomal-text">
-                  {{$t("serviceDriveAuth['序號到期日']") }}<span
-                    class="strong-text"
-                    v-if="i.expireStatus == 'A' || i.expireStatus === ''"
-                    >{{ i.endDate == 0 ?  $t("serviceDriveAuth['無到期日']")  : converTime(i.endDate) }}
-                  </span>
-                  <!--span  class="strong-text" v-if="i.expireStatus === ''">(未啟用)</span-->
-                  <span class="strong-text" v-if="i.expireStatus == 'F'"
-                    >{{$t("serviceDriveAuth['已到期']")}}</span
-                  >
-                </p>
-              </i-col>
-              <i-col :xs="24" :sm="24" :md="24" :lg="17"
-                ><p class="nomal-text" style="margin-left: 4%">
-                 {{$t("serviceDriveAuth['序號使用狀況']")}}<span class="strong-text"
-                    >{{ i.deviceBound.length }} / {{ i.deviceMax }} ({{
+                }">{{ $t("schoolBaseInfo." + item) }}</span>
+
+                        </p>
+                        <Row>
+                            <i-col :xs="24" :sm="24" :md="24" :lg="7">
+                                <p class="nomal-text">
+                                    {{$t("serviceDriveAuth['序號到期日']") }}<span class="strong-text" v-if="i.expireStatus == 'A' || i.expireStatus === ''">{{ i.endDate == 0 ?  $t("serviceDriveAuth['無到期日']")  : converTime(i.endDate) }}
+                                    </span>
+                                    <!--span  class="strong-text" v-if="i.expireStatus === ''">(未啟用)</span-->
+                                    <span class="strong-text" v-if="i.expireStatus == 'F'">{{$t("serviceDriveAuth['已到期']")}}</span>
+                                </p>
+                            </i-col>
+                            <i-col :xs="24" :sm="24" :md="24" :lg="17">
+                                <p class="nomal-text" style="margin-left: 4%">
+                                    {{$t("serviceDriveAuth['序號使用狀況']")}}<span class="strong-text">{{ i.deviceBound.length }} / {{ i.deviceMax }} ({{
                       (i.deviceBound.length > i.deviceMax
                         ? 100
                         : (i.deviceBound.length / i.deviceMax) * 100
                       ).toFixed(0) + "%"
-                    }})</span
-                  >
-                </p></i-col
-              >
-            </Row>
-          </i-col>
-        </Row>
-        <!--只要是單一就直接展開無需開關控件-->
-        <ul
-          class="pclist"
-          v-if="
+                    }})</span>
+                                </p>
+                            </i-col>
+                        </Row>
+                    </i-col>
+                </Row>
+                <!--只要是單一就直接展開無需開關控件-->
+                <ul class="pclist" v-if="
             (i.endDate != 1 && hiteachListItemIsOpen[index].isOpen == true) ||
             i.deviceMax == 1
-          "
-        >
-          <li
-            :id="`PC${pc.uuid != null ? pc.uuid : pc.uuid2}`"
-            v-for="(pc, index) in i.deviceBound"
-            :key="index + 'pc'"
-            v-show="i.deviceMax != 1 ? index < i.deviceMax : index < 1"
-            class="pclist-item"
-          >
-            <p class="pc-title">
-              {{ pc.pcname == null ? $t("serviceDriveAuth['未命名機台']") : pc.pcname }}
-            </p>
-            <p class="nomal-text" v-if="pc.ip!==null">
-              {{ pc.ip }} | {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
-            </p>
-             <p class="nomal-text" v-else>
-              {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
-            </p>
-            <p class="nomal-text" v-if="pc.os!==null">
-              {{ pc.os }}&nbsp;{{ pc.cpu }}&nbsp;{{
+          ">
+                    <li :id="`PC${pc.uuid != null ? pc.uuid : pc.uuid2}`" v-for="(pc, index) in i.deviceBound" :key="index + 'pc'" v-show="i.deviceMax != 1 ? index < i.deviceMax : index < 1" class="pclist-item">
+                        <p class="pc-title">
+                            {{ pc.pcname == null ? $t("serviceDriveAuth['未命名機台']") : pc.pcname }}
+                        </p>
+                        <p class="nomal-text" v-if="pc.ip!==null">
+                            {{ pc.ip }} | {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
+                        </p>
+                        <p class="nomal-text" v-else>
+                            {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
+                        </p>
+                        <p class="nomal-text" v-if="pc.os!==null">
+                            {{ pc.os }}&nbsp;{{ pc.cpu }}&nbsp;{{
                 (pc.ram / 1000).toFixed(1)
               }}G RAM
-            </p>
-            <div
-              class="action-btn"
-              @click="comfirmRemovePC(pc.uuid != null ? pc.uuid : pc.uuid2)"
-            >
-              <Icon type="md-close" /> {{$t("serviceDriveAuth['解除授權']")}}
+                        </p>
+                        <div class="action-btn" @click="comfirmRemovePC(pc.uuid != null ? pc.uuid : pc.uuid2)">
+                            <Icon type="md-close" /> {{$t("serviceDriveAuth['解除授權']")}}
+                        </div>
+                    </li>
+                    <!--div v-if="i.deviceBound==0" class='pclist-empty' >尚未綁定任何機台</div-->
+                </ul>
             </div>
-          </li>
-          <!--div v-if="i.deviceBound==0" class='pclist-empty' >尚未綁定任何機台</div-->
-        </ul>
-      </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -244,172 +184,172 @@ 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,mapMutations } from "vuex";
+import { mapGetters, mapMutations } from "vuex";
 export default {
-  props: ["hiteachAuthList", "windowHeight", "windowWidth"],
-  name: "HiteachAuthList",
-  components: {
-    Loading,
-  },
-  data() {
-    return {
-     
-      tempRemovePCs: [], //暫存解綁的UserPC的Mac
-      hiteachListItemIsOpen: {},
-      filterType: "1",
-      currentConfirmRemovePC: "", //暫存讓使用者確認的UserPC
-      isOpenRemove: false,
-      isloading: false,
-    };
-  },
-  created() {
-    this.hiteachListItemIsOpen = this.hiteachListItemIsOpenVuex;
-  },
-  computed: {
-    ...mapGetters({
-      serialInfo: "serviceDriveAuth/getHiteachAuthListInfo",
-      aprules: "schoolBaseInfo/getAprules", //讀取周邊產品列表
-      hiteachListItemIsOpenVuex: "serviceDriveAuth/getHiteachListItemIsOpen",
-    }),
-    title:function(){
-      return this.$t('serviceDriveAuth["確定解除授權"]')
-    },
-    filterListItem:function(){
-      return [
-        {
-          name: 1,
-          text: this.$t('serviceDriveAuth["顯示全部"]'),
-        },
-        {
-          name: 2,
-          text: this.$t('serviceDriveAuth["僅顯示HiTeach STD序號"]'),
-        },
-        {
-          name: 3,
-          text: this.$t('serviceDriveAuth["僅顯示HiTeach PRO序號"]'),
-        },
-        {
-          name: 4,
-          text: this.$t('serviceDriveAuth["僅顯示HiTeach TBL序號"]'),
-        },
-        {
-          name: 5,
-          text: this.$t('serviceDriveAuth["僅顯示已完成綁定的序號"]'),
-        },
-        {
-          name: 6,
-          text: this.$t('serviceDriveAuth["僅顯示已到期序號"]'),
-        },
-      ]
-    }
-  },
-  watch: {
-    hiteachAuthList: function (value) {
-      //根據服務的長度生出開關，只要服務數量變動就必須重置
-     
-      let temp = [];
-
-      for (let i = 0; i < value.length; i++) {
-        temp.push({
-          index: i,
-          isOpen: false,
-        });
-      }
-      console.log(value, temp);
-      this.hiteachListItemIsOpen = temp;
+    props: ["hiteachAuthList", "windowHeight", "windowWidth"],
+    name: "HiteachAuthList",
+    components: {
+        Loading,
     },
-  },
-  methods: {
-    ...mapMutations({
-      setTab: 'serviceDriveAuth/setTab'
-    }),
+    data() {
+        return {
 
-    //先讓使用者確定是否解除授權
-    comfirmRemovePC(mac) {
-      this.isOpenRemove = true;
-      this.currentConfirmRemovePC = mac;
+            tempRemovePCs: [], //暫存解綁的UserPC的Mac
+            hiteachListItemIsOpen: {},
+            filterType: "1",
+            currentConfirmRemovePC: "", //暫存讓使用者確認的UserPC
+            isOpenRemove: false,
+            isloading: false,
+        };
     },
-    removeUserPC(mac) {
-      //假設回傳deviceMac，進行解綁動作
-      this.isOpenRemove = false;
-      if (this.tempRemovePCs.includes(mac) == false) {
-        this.tempRemovePCs.push(mac);
-      }
-      //console.log(this.tempRemovePCs);
-      document.getElementById(`PC${mac}`).classList.add("remove-pc");
-      setTimeout(() => {
-        document.getElementById(`PC${mac}`).style.display = "none";
-
-        this.$Message.success(this.$t('serviceDriveAuth["已成功解除授權"]'));
-      }, 1800);
-      this.isloading = true;
-      setTimeout(() => {
-        this.getDataAsyc();
-        this.isloading = false;
-      }, 3000);
+    created() {
+        this.hiteachListItemIsOpen = this.hiteachListItemIsOpenVuex;
     },
-    gotoHiteachMgmt() {
-      this.$router.push("/home/classroom");
-    },
-    getDataAsyc() {
-      this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
-        (res) => {
-          this.$Message.success("取得Mock資料");
+    computed: {
+        ...mapGetters({
+            serialInfo: "serviceDriveAuth/getHiteachAuthListInfo",
+            aprules: "schoolBaseInfo/getAprules", //讀取周邊產品列表
+            hiteachListItemIsOpenVuex: "serviceDriveAuth/getHiteachListItemIsOpen",
+        }),
+        title: function () {
+            return this.$t('serviceDriveAuth["確定解除授權"]')
         },
-        (err) => {
-          this.$Message.error("取得資料失敗");
+        filterListItem: function () {
+            return [
+                {
+                    name: 1,
+                    text: this.$t('serviceDriveAuth["顯示全部"]'),
+                },
+                {
+                    name: 2,
+                    text: this.$t('serviceDriveAuth["僅顯示HiTeach STD序號"]'),
+                },
+                {
+                    name: 3,
+                    text: this.$t('serviceDriveAuth["僅顯示HiTeach PRO序號"]'),
+                },
+                {
+                    name: 4,
+                    text: this.$t('serviceDriveAuth["僅顯示HiTeach TBL序號"]'),
+                },
+                {
+                    name: 5,
+                    text: this.$t('serviceDriveAuth["僅顯示已完成綁定的序號"]'),
+                },
+                {
+                    name: 6,
+                    text: this.$t('serviceDriveAuth["僅顯示已到期序號"]'),
+                },
+            ]
         }
-      );
     },
-    filterCondition(item) {
-      switch (this.filterType) {
-        case "1":
-          return true;
+    watch: {
+        hiteachAuthList: function (value) {
+            //根據服務的長度生出開關，只要服務數量變動就必須重置
 
-        case "2":
-          return item.prodCode === 'J223IZ6M'
-          //return item.prodName === "STD";
-        case "3":
-          return item.prodCode === 'J223IZAM'
-          //return item.prodName === "PRO";
-        case "4":
-           return item.prodCode === '3222C6D2'
-          //return item.prodName === "TBL";
-        case "5":
-          return item.deviceBound.length != 0;
-        case "6":
-          return item.expireStatus === "F";
+            let temp = [];
 
-        default:
-          return true;
-      }
-    },
-    filterList(name) {
-      this.filterType = name;
-    },
-    converTime: function (time) {
-      //time: Unix timestamp(秒)
-      let datetime = new Date();
-      //let timerecount = time * 1000 - datetime.getTimezoneOffset() * 60 * 1000;
-      let timerecount = time * 1000;
-      datetime.setTime(timerecount);
-      let year = datetime.getFullYear();
-      let month = datetime.getMonth() + 1;
-      let date = datetime.getDate();
-      let hour = datetime.getHours();
-      let ampm = hour >= 12 ? "PM" : "AM";
-      hour %= 12;
-      hour = hour || 12; // the hour '0' should be '12'
-      let minute = datetime.getMinutes();
-      return year + "." + month + "." + date;
+            for (let i = 0; i < value.length; i++) {
+                temp.push({
+                    index: i,
+                    isOpen: false,
+                });
+            }
+            console.log(value, temp);
+            this.hiteachListItemIsOpen = temp;
+        },
     },
-    setIntroOpen(index) {
-      this.hiteachListItemIsOpen[index].isOpen = !this.hiteachListItemIsOpen[
-        index
-      ].isOpen;
-      //console.log(index, this.hiteachListItemIsOpen);
+    methods: {
+        ...mapMutations({
+            setTab: 'serviceDriveAuth/setTab'
+        }),
+
+        //先讓使用者確定是否解除授權
+        comfirmRemovePC(mac) {
+            this.isOpenRemove = true;
+            this.currentConfirmRemovePC = mac;
+        },
+        removeUserPC(mac) {
+            //假設回傳deviceMac，進行解綁動作
+            this.isOpenRemove = false;
+            if (this.tempRemovePCs.includes(mac) == false) {
+                this.tempRemovePCs.push(mac);
+            }
+            //console.log(this.tempRemovePCs);
+            document.getElementById(`PC${mac}`).classList.add("remove-pc");
+            setTimeout(() => {
+                document.getElementById(`PC${mac}`).style.display = "none";
+
+                this.$Message.success(this.$t('serviceDriveAuth["已成功解除授權"]'));
+            }, 1800);
+            this.isloading = true;
+            setTimeout(() => {
+                this.getDataAsyc();
+                this.isloading = false;
+            }, 3000);
+        },
+        gotoHiteachMgmt() {
+            this.$router.push("/home/classroom");
+        },
+        getDataAsyc() {
+            this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
+                (res) => {
+                    this.$Message.success("取得Mock資料");
+                },
+                (err) => {
+                    this.$Message.error("取得資料失敗");
+                }
+            );
+        },
+        filterCondition(item) {
+            switch (this.filterType) {
+                case "1":
+                    return true;
+
+                case "2":
+                    return item.prodCode === 'J223IZ6M'
+                //return item.prodName === "STD";
+                case "3":
+                    return item.prodCode === 'J223IZAM'
+                //return item.prodName === "PRO";
+                case "4":
+                    return item.prodCode === '3222C6D2'
+                //return item.prodName === "TBL";
+                case "5":
+                    return item.deviceBound.length != 0;
+                case "6":
+                    return item.expireStatus === "F";
+
+                default:
+                    return true;
+            }
+        },
+        filterList(name) {
+            this.filterType = name;
+        },
+        converTime: function (time) {
+            //time: Unix timestamp(秒)
+            let datetime = new Date();
+            //let timerecount = time * 1000 - datetime.getTimezoneOffset() * 60 * 1000;
+            let timerecount = time * 1000;
+            datetime.setTime(timerecount);
+            let year = datetime.getFullYear();
+            let month = datetime.getMonth() + 1;
+            let date = datetime.getDate();
+            let hour = datetime.getHours();
+            let ampm = hour >= 12 ? "PM" : "AM";
+            hour %= 12;
+            hour = hour || 12; // the hour '0' should be '12'
+            let minute = datetime.getMinutes();
+            return year + "." + month + "." + date;
+        },
+        setIntroOpen(index) {
+            this.hiteachListItemIsOpen[index].isOpen = !this.hiteachListItemIsOpen[
+                index
+            ].isOpen;
+            //console.log(index, this.hiteachListItemIsOpen);
+        },
     },
-  },
 };
 </script>
 
@@ -417,30 +357,30 @@ export default {
 @import "./HiteachAuthList.less";
 
 #hiteachAuth-modal {
-  .ivu-modal-header {
-    border-radius: 5px 5px 0px 0px !important;
-  }
-  .ivu-modal-footer {
-    border-radius: 0px 0px 5px 5px !important;
-  }
+    .ivu-modal-header {
+        border-radius: 5px 5px 0px 0px !important;
+    }
+    .ivu-modal-footer {
+        border-radius: 0px 0px 5px 5px !important;
+    }
 
-  .ivu-modal-header,
-  .ivu-modal-body,
-  .ivu-modal-footer {
-    background-color: rgb(88, 88, 88) !important;
-    color: white !important;
-    border: none !important;
-  }
-  .ivu-btn-text {
-    color: white;
-    &:hover {
-      background-color: transparent !important;
-      color: #1cc0f3;
+    .ivu-modal-header,
+    .ivu-modal-body,
+    .ivu-modal-footer {
+        background-color: rgb(88, 88, 88) !important;
+        color: white !important;
+        border: none !important;
+    }
+    .ivu-btn-text {
+        color: white;
+        &:hover {
+            background-color: transparent !important;
+            color: #1cc0f3;
+        }
+    }
+    .ivu-modal-header-inner {
+        color: white !important;
+        font-weight: bolder !important;
     }
-  }
-  .ivu-modal-header-inner {
-    color: white !important;
-    font-weight: bolder !important;
-  }
 }
 </style>

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

@@ -1,244 +1,237 @@
 <template>
-  <div class="service-list">
-    <div class="service-listTitle listTitle-noMargin"><span class="title-item" :class="{ 'title-checked': true }" @click="setTab(0)">{{$t("serviceDriveAuth['服務授權列表']")}}<span class="title-checked-line"></span></span> <span class="title-item" @click="setTab(1)">{{$t("serviceDriveAuth['智慧教室授權管理']")}}</span></div>
-    <div class="serviceList-wrap" :style="{ height: windowHeight - 116 + 'px' }">
-      <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 && proName != 'AEGMCPLY'">
-            {{ $t(`serviceDriveAuth['${proName}']`) }}
-          </p>
+    <div class="service-list">
+        <div class="service-listTitle listTitle-noMargin">
+            <span class="title-item" @click="setTab(1)">{{$t("serviceDriveAuth['智慧教室授權管理']")}}</span>
+            <span class="title-item" :class="{ 'title-checked': true }" @click="setTab(0)">
+                {{$t("serviceDriveAuth['服務授權列表']")}}
+                <span class="title-checked-line"></span>
+            </span>
+
         </div>
-        <p class="unbuy" v-if="item.hasOwnProperty('notbuy') == true">{{$t("serviceDriveAuth['未購買']")}}</p>
-        <p class="isbuy" v-else>{{$t("serviceDriveAuth['已購買']")}}</p>
+        <div class="serviceList-wrap" :style="{ height: windowHeight - 116 + 'px' }">
+            <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 && proName != 'AEGMCPLY'">
+                        {{ $t(`serviceDriveAuth['${proName}']`) }}
+                    </p>
+                </div>
+                <p class="unbuy" v-if="item.hasOwnProperty('notbuy') == true">{{$t("serviceDriveAuth['未購買']")}}</p>
+                <p class="isbuy" v-else>{{$t("serviceDriveAuth['已購買']")}}</p>
 
-        <p class="nomal-text">
-          {{$t("serviceDriveAuth['服務啟用 / 到期日:']")}}
-          <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="20" style="padding-right: 10px">
-              <div class="time-bar" v-if="item.startDate != 0"></div>
-              <div
-                class="remain-bar"
-                v-if="item.startDate != 0"
-                :style="{
+                <p class="nomal-text">
+                    {{$t("serviceDriveAuth['服務啟用 / 到期日:']")}}
+                    <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="20" style="padding-right: 10px">
+                            <div class="time-bar" v-if="item.startDate != 0"></div>
+                            <div class="remain-bar" v-if="item.startDate != 0" :style="{
                   width: (dateRemain(today(), converTime(item.endDate)) / dateRemain(converTime(item.startDate), converTime(item.endDate))).toFixed(2) * 100 + '%',
                   'background-color': colorPercent(converTime(item.startDate), converTime(item.endDate)) ? '#ad3435' : '#1cc0f3'
-                }"
-              ></div>
-            </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.startDate != 0">
-              <span class="remainDay">{{$t("serviceDriveAuth['剩餘']")}}</span>
-              <span
-                class="remainDay-text"
-                :style="{
+                }"></div>
+                        </i-col>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.startDate != 0">
+                            <span class="remainDay">{{$t("serviceDriveAuth['剩餘']")}}</span>
+                            <span class="remainDay-text" :style="{
                   color: colorPercent(converTime(item.startDate), converTime(item.endDate)) ? '#ad3435' : '#1cc0f3'
-                }"
-                >{{ dateRemain(today(), converTime(item.endDate)) }}</span
-              ><span class="remainDay">{{$t("serviceDriveAuth['天']")}}</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="{
+                }">{{ dateRemain(today(), converTime(item.endDate)) }}</span><span class="remainDay">{{$t("serviceDriveAuth['天']")}}</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>
+                }"></div>
+                        </i-col>
 
-            <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.prodCode == 'RYGVCPLY'">
-              <span class="remainDay">{{$t("serviceDriveAuth['剩餘']")}}</span>
-              <span
-                class="remainDay-text"
-                :style="{
+                        <i-col :xs="24" :sm="24" :md="24" :lg="4" v-if="item.prodCode == 'RYGVCPLY'">
+                            <span class="remainDay">{{$t("serviceDriveAuth['剩餘']")}}</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">{{$t("serviceDriveAuth['天']")}}</span>
-            </i-col>
-          </Row>
-        </div>
-        <!--給AclassOne-->
-        <div class="detailinfo-block" v-if="index == 0 && serviceIntroIsOpen[index].isOpen == true">
-          <Row>
-            <i-col :xs="24" :sm="24" :md="24" :lg="10">
-              <p class="nomal-text auth-num" v-if="item.hasOwnProperty('notbuy') == false">
-                {{$t("serviceDriveAuth['無週期授權數量']")}}：<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 != ''">
-                {{$t("serviceDriveAuth['有週期授權數量']")}}：<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>
-              <p class="nomal-text title-withRec">
-                 {{$t("serviceDriveAuth['固定分配數']")}}：<span class="strong-text">{{ item.staUsed }} ({{ ((item.staUsed / item.avaliable) * 100).toFixed(1) }}%)</span>
-              </p>
-              <br />
-              <div class="title-rec"></div>
-              <p class="nomal-text title-withRec">
-                 {{$t("serviceDriveAuth['動態分配數']")}}：<span class="strong-text">{{ item.dynUsed }} ({{ ((item.dynUsed / item.avaliable) * 100).toFixed(1) }}%)</span>
-              </p></i-col
-            >
-            <i-col :xs="24" :sm="24" :md="24" :lg="7">
-              <p class="nomal-text">
-                 {{$t("serviceDriveAuth['總使用率']")}}：<span class="strong-text"> {{ (((item.dynUsed + item.staUsed) / item.avaliable) * 100).toFixed(1) }}%</span>
-              </p></i-col
-            >
-            <i-col :xs="24" :sm="24" :md="24" :lg="7"> <AclassOneChart :less="item.dynUsed" :used="item.staUsed" :avaliable="item.avaliable"/></i-col>
-          </Row>
-          <p
-            v-if="item.hasOwnProperty('notbuy') == true"
-            class="detail"
-            :style="{
+                }">{{ dateRemain(today(), converTime(aclassOneTimeLimitData.endDate)) }}</span><span class="remainDay">{{$t("serviceDriveAuth['天']")}}</span>
+                        </i-col>
+                    </Row>
+                </div>
+                <!--給AclassOne-->
+                <div class="detailinfo-block" v-if="index == 0 && serviceIntroIsOpen[index].isOpen == true">
+                    <Row>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="10">
+                            <p class="nomal-text auth-num" v-if="item.hasOwnProperty('notbuy') == false">
+                                {{$t("serviceDriveAuth['無週期授權數量']")}}：<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 != ''">
+                                {{$t("serviceDriveAuth['有週期授權數量']")}}：<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>
+                            <p class="nomal-text title-withRec">
+                                {{$t("serviceDriveAuth['固定分配數']")}}：<span class="strong-text">{{ item.staUsed }} ({{ ((item.staUsed / item.avaliable) * 100).toFixed(1) }}%)</span>
+                            </p>
+                            <br />
+                            <div class="title-rec"></div>
+                            <p class="nomal-text title-withRec">
+                                {{$t("serviceDriveAuth['動態分配數']")}}：<span class="strong-text">{{ item.dynUsed }} ({{ ((item.dynUsed / item.avaliable) * 100).toFixed(1) }}%)</span>
+                            </p>
+                        </i-col>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="7">
+                            <p class="nomal-text">
+                                {{$t("serviceDriveAuth['總使用率']")}}：<span class="strong-text"> {{ (((item.dynUsed + item.staUsed) / item.avaliable) * 100).toFixed(1) }}%</span>
+                            </p>
+                        </i-col>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="7">
+                            <AclassOneChart :less="item.dynUsed" :used="item.staUsed" :avaliable="item.avaliable" />
+                        </i-col>
+                    </Row>
+                    <p v-if="item.hasOwnProperty('notbuy') == true" class="detail" :style="{
               'margin-top': item.hasOwnProperty('notbuy') != true ? '0px' : '10px'
-            }"
-          >
-            {{$t("serviceDriveAuth['詳細服務內容']")}}:
-          </p>
-          <Row v-if="item.hasOwnProperty('notbuy') == true">
-            <i-col :xs="24" :sm="24" :md="24" :lg="16"> <p class="intro-text">待提供</p></i-col>
-          </Row>
-          <div class="action-btn" @click="gotoStudentManagent()">
-            {{$t("serviceDriveAuth['管理AClassOne授權']")}}:
-          </div>
-        </div>
+            }">
+                        {{$t("serviceDriveAuth['詳細服務內容']")}}:
+                    </p>
+                    <Row v-if="item.hasOwnProperty('notbuy') == true">
+                        <i-col :xs="24" :sm="24" :md="24" :lg="16">
+                            <p class="intro-text">待提供</p>
+                        </i-col>
+                    </Row>
+                    <div class="action-btn" @click="gotoStudentManagent()">
+                        {{$t("serviceDriveAuth['管理AClassOne授權']")}}:
+                    </div>
+                </div>
 
-        <!--給其他產品-->
-        <div class="detailinfo-block" v-if="index != 0 && serviceIntroIsOpen[index].isOpen == true">
-          <p class="detail" :style="{ 'margin-top': item.hasOwnProperty('notbuy') != true ? '0px' : '10px' }">
-            {{$t("serviceDriveAuth['詳細服務內容']")}}:
-          </p>
-          <Row>
-            <i-col :xs="24" :sm="24" :md="24" :lg="16"> <p class="intro-text">待提供</p></i-col>
-          </Row>
+                <!--給其他產品-->
+                <div class="detailinfo-block" v-if="index != 0 && serviceIntroIsOpen[index].isOpen == true">
+                    <p class="detail" :style="{ 'margin-top': item.hasOwnProperty('notbuy') != true ? '0px' : '10px' }">
+                        {{$t("serviceDriveAuth['詳細服務內容']")}}:
+                    </p>
+                    <Row>
+                        <i-col :xs="24" :sm="24" :md="24" :lg="16">
+                            <p class="intro-text">待提供</p>
+                        </i-col>
+                    </Row>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 
 import AclassOneChart from './AclassOneChart'
-import { mapGetters,mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 export default {
-  props: ['serviceList', 'windowWidth', 'windowHeight'],
-  name: 'ServiceList',
-  data() {
-    return {
-      serviceIntroIsOpen: {},
-      oriIndex: '',
-      aclassOneTimeLimitData: ''
-    }
-  },
-  components: {
-    AclassOneChart
-  },
-  computed: {
-    ...mapGetters({
-      serviceIntroIsOpenVuex: 'serviceDriveAuth/getServiceIntroIsOpen',
-      serviceNameList: 'serviceDriveAuth/getServiceNameList'
-    })
-  },
-  created() {
-    this.serviceIntroIsOpen = this.serviceIntroIsOpenVuex
-  },
-
-  watch: {
-    serviceList: function() {
-      //根據服務的長度生出開關，只要服務數量變動就必須重置
-      let temp = []
-
-      for (let i = 0; i < this.serviceList.length; i++) {
-        temp.push({
-          index: i,
-          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]
+    props: ['serviceList', 'windowWidth', 'windowHeight'],
+    name: 'ServiceList',
+    data() {
+        return {
+            serviceIntroIsOpen: {},
+            oriIndex: '',
+            aclassOneTimeLimitData: ''
         }
-      }
-      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()
-      //let timerecount = time * 1000 - datetime.getTimezoneOffset() * 60 * 1000;
-      let timerecount = time * 1000
-      datetime.setTime(timerecount)
-      let year = datetime.getFullYear()
-      let month = datetime.getMonth() + 1
-      let date = datetime.getDate()
-      let hour = datetime.getHours()
-      let ampm = hour >= 12 ? 'PM' : 'AM'
-      hour %= 12
-      hour = hour || 12 // the hour '0' should be '12'
-      let minute = datetime.getMinutes()
-      return year + '.' + month + '.' + date
     },
-    gotoStudentManagent() {
-      this.$router.push('/home/studentAccount')
+    components: {
+        AclassOneChart
     },
-    colorPercent: function(a, b) {
-      if (this.dateRemain(this.today(), b) / this.dateRemain(a, b) < 0.3) return true
-      else return false
+    computed: {
+        ...mapGetters({
+            serviceIntroIsOpenVuex: 'serviceDriveAuth/getServiceIntroIsOpen',
+            serviceNameList: 'serviceDriveAuth/getServiceNameList'
+        })
     },
-    setIntroOpen(index) {
-      this.serviceIntroIsOpen[index].isOpen = !this.serviceIntroIsOpen[index].isOpen
-      //console.log(index, this.serviceIntroIsOpen);
+    created() {
+        this.serviceIntroIsOpen = this.serviceIntroIsOpenVuex
     },
-    today() {
-      var today = new Date()
-      var dd = String(today.getDate()).padStart(2, '0')
-      var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
-      var yyyy = today.getFullYear()
 
-      today = yyyy + '/' + mm + '/' + dd
-      return today
+    watch: {
+        serviceList: function () {
+            //根據服務的長度生出開關，只要服務數量變動就必須重置
+            let temp = []
+
+            for (let i = 0; i < this.serviceList.length; i++) {
+                temp.push({
+                    index: i,
+                    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
+        }
     },
-    dateRemain(today, endday) {
-      let strEndday = endday.replace('.', '/')
+    beforeRouteLeave(to, from, next) {
+        this.setTab(0)
+        next()
+    },
+    methods: {
+        ...mapMutations({
+            setTab: 'serviceDriveAuth/setTab'
+        }),
+        converTime: function (time) {
+            //time: Unix timestamp(秒)
+            let datetime = new Date()
+            //let timerecount = time * 1000 - datetime.getTimezoneOffset() * 60 * 1000;
+            let timerecount = time * 1000
+            datetime.setTime(timerecount)
+            let year = datetime.getFullYear()
+            let month = datetime.getMonth() + 1
+            let date = datetime.getDate()
+            let hour = datetime.getHours()
+            let ampm = hour >= 12 ? 'PM' : 'AM'
+            hour %= 12
+            hour = hour || 12 // the hour '0' should be '12'
+            let minute = datetime.getMinutes()
+            return year + '.' + month + '.' + date
+        },
+        gotoStudentManagent() {
+            this.$router.push('/home/studentAccount')
+        },
+        colorPercent: function (a, b) {
+            if (this.dateRemain(this.today(), b) / this.dateRemain(a, b) < 0.3) return true
+            else return false
+        },
+        setIntroOpen(index) {
+            this.serviceIntroIsOpen[index].isOpen = !this.serviceIntroIsOpen[index].isOpen
+            //console.log(index, this.serviceIntroIsOpen);
+        },
+        today() {
+            var today = new Date()
+            var dd = String(today.getDate()).padStart(2, '0')
+            var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
+            var yyyy = today.getFullYear()
+
+            today = yyyy + '/' + mm + '/' + dd
+            return today
+        },
+        dateRemain(today, endday) {
+            let strEndday = endday.replace('.', '/')
 
-      //console.log(today, strEndday);
+            //console.log(today, strEndday);
 
-      let oDate1 = new Date(today)
-      let oDate2 = new Date(strEndday)
-      let iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒數轉換為天數
-      //console.log(iDays);
-      return iDays
+            let oDate1 = new Date(today)
+            let oDate2 = new Date(strEndday)
+            let iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒數轉換為天數
+            //console.log(iDays);
+            return iDays
+        }
     }
-  }
 }
 </script>
 
 <style lang="less">
-@import './ServiceList.less';
+@import "./ServiceList.less";
 </style>