#318 微調教師空間授權表格，學生授權介面捲動效果

TEAMModelOS/ClientApp/src/view/student-account/AclassOneAuth.less

@@ -1,78 +1,79 @@
 .aclassone-auth {
-.dark-iview-select{
-  margin:0 10px;
-  position: relative;
   
-  width: 180px;
-   .ivu-select-selection{
-    outline: none !important;
-
-    background-color: #333237 !important;
-    border:#4a4a4d 1px solid !important ;
-    &:active,&:hover,&:focus{
+  position: absolute;
+  background-color: #2b2a2f;
+  border-left: 1px solid #434247;
+  width: 50%;
+  height: 100vh;
+  top: -45px;
+  right: -50% !important;
+  padding-left: 20px;
+  overflow: auto;
+  padding-bottom: 100px;
+  .dark-iview-select {
+    margin: 0 10px;
+    position: relative;
+    width: 180px;
+    .ivu-select-selection {
       outline: none !important;
-      border:#909096 1px solid !important ;
-     }
-    
-   }
-  
-}
-.input-num{
-  text-align: center;
-   color: #c0c0c0;
-   font-weight: 700;
-   font-size: 14px;
-   outline: none;
-   background-color: #333237;
-   width: 50px;
-   border-radius: 5px;
-   padding:4px 3px;
-   margin:0 5px;
-   top:-4px;
-   position: relative;
-   border:#4a4a4d 1px solid !important ;
-   &:focus{
-    border:#909096 1px solid !important ;
-   }
-    
-}  
-
-@keyframes slideIn {
-  0% {
-    right: 0%;
-  }
 
-  100% {
-    right: -50%;
+      background-color: #333237 !important;
+      border: #4a4a4d 1px solid !important ;
+      &:active,
+      &:hover,
+      &:focus {
+        outline: none !important;
+        border: #909096 1px solid !important ;
+      }
+    }
+  }
+  .input-num {
+    text-align: center;
+    color: #c0c0c0;
+    font-weight: 700;
+    font-size: 14px;
+    outline: none;
+    background-color: #333237;
+    width: 50px;
+    border-radius: 5px;
+    padding: 4px 3px;
+    margin: 0 5px;
+    top: -4px;
+    position: relative;
+    border: #4a4a4d 1px solid !important ;
+    &:focus {
+      border: #909096 1px solid !important ;
+    }
   }
-}
 
-@keyframes slideout {
-  0% {
-    right: 0%;
+  @keyframes slideIn {
+    0% {
+      right: 0%;
+    }
+
+    100% {
+      right: -50%;
+    }
   }
 
-  100% {
-    right: -30%;
+  @keyframes slideout {
+    0% {
+      right: 0%;
+    }
+
+    100% {
+      right: -30%;
+    }
   }
-}
-@keyframes fadeIn{
-  0%{
+  @keyframes fadeIn {
+    0% {
       opacity: 0;
-  }
-  100%{
+    }
+    100% {
       opacity: 1;
+    }
   }
 
-}
-  position: absolute;
-  background-color: #2b2a2f;
-  border-left: 1px solid #434247;
-  width: 50%;
-  height: 100vh;
-  top: -45px;
-  right: -50% !important;
-  padding-left: 20px;
 
   .title {
     color: #bab8c0;
@@ -150,13 +151,22 @@
   }
 
   .tabContent-wrap {
+    .bottom-border {
+      display: block;
+      margin-top:10px;
+      position: relative;
+      width: 110%;
+      border-bottom: 1px solid #434247;
+    }
+    position: relative;
     border-top: 1px solid #434247;
-    border-bottom: 1px solid #434247;
     margin-top: 15px;
     padding-right: 25%;
     margin-left: 10px;
     animation: fadeIn 0.5s !important;
 
+    overflow: auto;
+
     .chart-title {
       font-size: 16px;
       font-weight: 500;
@@ -218,60 +228,57 @@
       }
     }
   }
-    .option-group{
-      padding:15px;
-      animation: fadeIn 0.5s !important;
-      .small-title{
-        font-size: 10px;
-        font-weight: 400;
-        color: #797979;
-        margin-bottom: 25px;
-      }
-      
-      .assign-btn{
-        
-        cursor: pointer;
-        position: absolute;
-        line-height: 20px;
-       
-        right:-50px;
-        background-color: #515151;
-        color: #c0c0c0;
-        text-align: center;
-        display: inline-block;
-        font-size: 10px;
-        padding:2px 16px;
-        font-weight: 700;
-        border-radius: 5px;
-        &:hover {
-          color: #f5f5f5;
-          transition: 0.2s;
-          background-color: #1cc0f3
-        }
-       
-      }
-      
-      .option-text{
-        color: #797979;
-        font-size: 13px;
-        font-weight: 500;
-        line-height: 24px;
-      }
-      .option-item{
-       height: 48px;
-      }
-      .option-item:nth-child(3){
-        margin-top:-4px;
+  .option-group {
+    padding: 15px;
+    animation: fadeIn 0.5s !important;
+    .small-title {
+      font-size: 10px;
+      font-weight: 400;
+      color: #797979;
+      margin-bottom: 25px;
+    }
+
+    .assign-btn {
+      cursor: pointer;
+      position: absolute;
+      line-height: 20px;
+
+      right: -50px;
+      background-color: #515151;
+      color: #c0c0c0;
+      text-align: center;
+      display: inline-block;
+      font-size: 10px;
+      padding: 2px 16px;
+      font-weight: 700;
+      border-radius: 5px;
+      &:hover {
+        color: #f5f5f5;
+        transition: 0.2s;
+        background-color: #1cc0f3;
       }
     }
-  .unAssign-btn{
+
+    .option-text {
+      color: #797979;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 24px;
+    }
+    .option-item {
+      height: 48px;
+    }
+    .option-item:nth-child(3) {
+      margin-top: -4px;
+    }
+  }
+  .unAssign-btn {
     cursor: pointer;
     animation: fadeIn 0.7s !important;
-    position: absolute;
-    bottom: 135px;
+
     border-radius: 5px;
     margin: 20px;
-    width: 75%;
+    width: 100%;
     margin-left: 3%;
     padding: 10px 12px;
     font-size: 16px;
@@ -281,18 +288,18 @@
     font-weight: 700;
 
     &:hover {
-      background-color: darken( #616161, 10%);
+      background-color: darken(#616161, 10%);
     }
   }
-  
+
   .save-btn {
     cursor: pointer;
     animation: fadeIn 0.7s !important;
-    position: absolute;
-    bottom: 80px;
+    //position: absolute;
+    //bottom: 80px;
     border-radius: 5px;
     margin: 20px;
-    width: 75%;
+    width: 100%;
     margin-left: 3%;
     padding: 10px 12px;
     font-size: 16px;
@@ -300,36 +307,32 @@
     color: white;
     text-align: center;
     font-weight: 700;
-    
+
     &:hover {
       background-color: darken(#1cc0f3, 10%);
     }
   }
-  .buy-btn{
-    
-      width: 62% !important;
-      margin-left: 10%;
-    
+  .buy-btn {
+    width: 100% !important;
   }
 }
 
-
 .closeShow {
   animation: slideout 0.7s !important;
   right: 30%;
 }
 
-.light-btn{
+.light-btn {
   color: #ffffff !important;
   transition: 0.2s;
-  background-color: #1cc0f3 !important
+  background-color: #1cc0f3 !important;
 }
-.disabled-btn{
+.disabled-btn {
   background-color: #333333 !important;
   color: #a0a0a0 !important;
   &:hover {
     color: #a0a0a0 !important;
     background-color: #333333 !important;
   }
-  cursor:not-allowed !important
-}
+  cursor: not-allowed !important;
+}

TEAMModelOS/ClientApp/src/view/student-account/AclassOneAuth.vue

@@ -2,50 +2,50 @@
   <div class="aclassone-auth" :class="{ closeShow: closefromBtn == true }">
     <!--收回授權弹窗 -->
     <Modal class="aclassone-auth-modal" v-model="isOpenRemove" :title="titletext">
-      <p>{{$t("serviceDriveAuth['收回授權後使用數會直接設置為0，如欲給予授權可針對目標對象進行套用。']")}}</p>
+      <p>{{ $t("serviceDriveAuth['收回授權後使用數會直接設置為0，如欲給予授權可針對目標對象進行套用。']") }}</p>
 
       <div slot="footer">
-        <Button type="text" @click="isOpenRemove = false">{{$t("serviceDriveAuth['取消']")}}</Button>
-        <Button type="primary" @click="resetAll">{{$t("serviceDriveAuth['確定']")}}</Button>
+        <Button type="text" @click="isOpenRemove = false">{{ $t("serviceDriveAuth['取消']") }}</Button>
+        <Button type="primary" @click="resetAll">{{ $t("serviceDriveAuth['確定']") }}</Button>
       </div>
     </Modal>
     <div class="title">
-      {{$t("serviceDriveAuth['服務授權管理']")}}<span @click="close()"><v-icon class="close-icon" iconClass="close"/></span>
+      {{ $t("serviceDriveAuth['服務授權管理']") }}<span @click="close()"><v-icon class="close-icon" iconClass="close"/></span>
     </div>
-    <div class="dashboard-title">{{$t("serviceDriveAuth['AClassONE智慧學伴服務授權']")}}</div>
+    <div class="dashboard-title">{{ $t("serviceDriveAuth['AClassONE智慧學伴服務授權']") }}</div>
     <p class="dashboard-note">
-      {{$t("serviceDriveAuth['賦予持有該服務授權的學生TEAM Modal ID使用AClassONE智慧學伴App的權限']")}}
+      {{ $t("serviceDriveAuth['賦予持有該服務授權的學生TEAM Modal ID使用AClassONE智慧學伴App的權限']") }}
     </p>
     <Row class="dashboard">
       <i-col :xs="24" :sm="8" :md="8" :lg="8">
         <p class="info-num">
           <CountTo class="auth-info-num" :endVal="totalAuth" :duration="600"></CountTo>
         </p>
-        <p class="info-text">{{$t("serviceDriveAuth['總授權數']")}}</p>
+        <p class="info-text">{{ $t("serviceDriveAuth['總授權數']") }}</p>
       </i-col>
       <i-col :xs="24" :sm="8" :md="8" :lg="8">
         <p class="info-num">
           <CountTo class="auth-info-num" :endVal="currentAssignNum" :duration="600"></CountTo>
         </p>
-        <p class="info-text">{{$t("serviceDriveAuth['本次套用數']")}}</p>
+        <p class="info-text">{{ $t("serviceDriveAuth['本次套用數']") }}</p>
       </i-col>
       <i-col :xs="24" :sm="8" :md="8" :lg="8">
         <p class="info-num">
           <CountTo class="auth-info-num" :endVal="usedAuth" :duration="600"></CountTo>
         </p>
-        <p class="info-text">{{$t("serviceDriveAuth['已使用數']")}}</p>
+        <p class="info-text">{{ $t("serviceDriveAuth['已使用數']") }}</p>
       </i-col>
     </Row>
 
     <!--分頁控件--->
-    <span class="tab-btn" :class="{ 'tab-now': currentTab == 0 }" @click="setCurrentTab(0)">{{$t("serviceDriveAuth['授權總覽']")}}</span>
-    <span class="tab-btn" :class="{ 'tab-now': currentTab == 1 }" @click="setCurrentTab(1)">{{$t("serviceDriveAuth['授權管理']")}}</span>
+    <span class="tab-btn" :class="{ 'tab-now': currentTab == 0 }" @click="setCurrentTab(0)">{{ $t("serviceDriveAuth['授權總覽']") }}</span>
+    <span class="tab-btn" :class="{ 'tab-now': currentTab == 1 }" @click="setCurrentTab(1)">{{ $t("serviceDriveAuth['授權管理']") }}</span>
     <Row class="tabContent-wrap">
       <!--授權總攬-->
-      <div v-if="currentTab == 0">
+      <div v-if="currentTab == 0" class="tab-page">
         <i-col :xs="24" :sm="12" :md="12" :lg="16">
           <p class="chart-title">
-            {{$t("serviceDriveAuth['已購授權總數']")}}<span class="chart-totalnum">{{ totalAuth }}</span>
+            {{ $t("serviceDriveAuth['已購授權總數']") }}<span class="chart-totalnum">{{ totalAuth }}</span>
           </p>
           <AuthNumChart :clickTab="clickTab" :dbPieNumData="pieNumData" />
         </i-col>
@@ -57,24 +57,28 @@
           </div>
         </i-col>
 
-        <div class="chart-note"><span class="list-icon">*</span>&nbsp;{{$t("serviceDriveAuth['note']")}}</div>
+        <div class="chart-note"><span class="list-icon">*</span>&nbsp;{{ $t("serviceDriveAuth['note']") }}</div>
+        <div class="bottom-border" />
+        <div v-if="currentTab == 0" class="save-btn buy-btn">{{ $t("serviceDriveAuth['添購其他授權']") }}</div>
       </div>
       <!--授權管理-->
       <div v-if="currentTab == 1" class="option-group">
-        <p class="small-title">{{$t("serviceDriveAuth['快速套用授權']")}}</p>
+        <p class="small-title">{{ $t("serviceDriveAuth['快速套用授權']") }}</p>
         <Row class="option-item">
-          <i-col :xs="24" :sm="12" :md="12" :lg="22"><p class="option-text">{{$t("serviceDriveAuth['套用至所有當前勾選項目']")}}</p></i-col>
+          <i-col :xs="24" :sm="12" :md="12" :lg="22"
+            ><p class="option-text">{{ $t("serviceDriveAuth['套用至所有當前勾選項目']") }}</p></i-col
+          >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
             ><div class="assign-btn" style="margin-top: -2px" @click="assignType(1)" :class="{ 'light-btn': currentAssignType == 1 }">
-              {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
             </div></i-col
           >
         </Row>
         <Row class="option-item">
           <i-col :xs="24" :sm="12" :md="12" :lg="22"
             ><p class="option-text">
-              {{$t("serviceDriveAuth['套用至當前勾選目標第']")}}
-              <input :disabled="selected.length == 0" class="input-num" v-model="inputSelectMin" type="number" placeholder="-" :max="selected.length" min="1" />{{$t("serviceDriveAuth['項至第']")}} <input :disabled="selected.length == 0" placeholder="-" class="input-num" v-model="inputSelectMax" type="number" :min="inputSelectMin" :max="selected.length" />{{$t("serviceDriveAuth['項']")}}
+              {{ $t("serviceDriveAuth['套用至當前勾選目標第']") }}
+              <input :disabled="selected.length == 0" class="input-num" v-model="inputSelectMin" type="number" placeholder="-" :max="selected.length" min="1" />{{ $t("serviceDriveAuth['項至第']") }} <input :disabled="selected.length == 0" placeholder="-" class="input-num" v-model="inputSelectMax" type="number" :min="inputSelectMin" :max="selected.length" />{{ $t("serviceDriveAuth['項']") }}
             </p></i-col
           >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
@@ -87,18 +91,19 @@
                 'disabled-btn': inputSelectMin > selected.length == true || inputSelectMax > selected.length == true || inputSelectMin > inputSelectMax == true || inputSelectMax <= 0 || inputSelectMax == '' || inputSelectMin <= 0 || inputSelectMin == ''
               }"
             >
-              {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
             </div></i-col
           >
         </Row>
         <Row class="option-item">
           <i-col :xs="24" :sm="12" :md="12" :lg="22"
             ><p class="option-text">
-              {{$t("serviceDriveAuth['套用至']")}}
+              {{ $t("serviceDriveAuth['套用至']") }}
               <!-- 學制Select -->
               <Select class="dark-iview-select" v-model="searchPeriod" :placeholder="$t('stuAccount.periodHolder')" clearable @on-clear="currentFilter = -1" @on-open-change="cleanData(0)" @on-change="filterData">
-                <Option v-for="(item, index) in periods" :value="item.id" :key="index">{{ item.name }}</Option> </Select
-              > {{$t("serviceDriveAuth['所有項目']")}}
+                <Option v-for="(item, index) in periods" :value="item.id" :key="index">{{ item.name }}</Option>
+              </Select>
+              {{ $t("serviceDriveAuth['所有項目']") }}
             </p></i-col
           >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
@@ -111,19 +116,20 @@
                 'disabled-btn': currentFilter != 0 || searchPeriod == ''
               }"
             >
-              {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
             </div></i-col
           >
         </Row>
         <Row class="option-item">
           <i-col :xs="24" :sm="12" :md="12" :lg="22"
             ><p class="option-text">
-               {{$t("serviceDriveAuth['套用至']")}}
+              {{ $t("serviceDriveAuth['套用至']") }}
 
               <!-- 學級Select -->
               <Select class="dark-iview-select" v-model="searchGrade" :placeholder="$t('stuAccount.gradeHolder')" not-found-text="请先选择学段" clearable @on-clear="currentFilter = -1" @on-open-change="cleanData(1)" @on-change="filterData">
-                <Option v-for="(item, index) in grades" :value="item.id" :key="index">{{ item.name }}</Option> </Select
-              > {{$t("serviceDriveAuth['所有項目']")}}
+                <Option v-for="(item, index) in grades" :value="item.id" :key="index">{{ item.name }}</Option>
+              </Select>
+              {{ $t("serviceDriveAuth['所有項目']") }}
             </p></i-col
           >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
@@ -136,19 +142,20 @@
                 'disabled-btn': currentFilter != 1 || searchGrade == ''
               }"
             >
-              {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
             </div></i-col
           >
         </Row>
         <Row class="option-item">
           <i-col :xs="24" :sm="12" :md="12" :lg="22"
             ><p class="option-text">
-               {{$t("serviceDriveAuth['套用至']")}}
+              {{ $t("serviceDriveAuth['套用至']") }}
               <!-- 教室Select -->
               <Select v-model="searchClassroom" class="dark-iview-select" ref="classroom" :placeholder="selectClasses" clearable @on-clear="currentFilter = -1" @on-open-change="cleanData(2)" @on-change="filterData" :not-found-text="searchGrade ? '此年级暂无教室' : '请先选择年级'">
                 <Option v-for="(item, index) in classes" :value="item.id" :key="index">{{ item.name }}</Option>
-                <Option value="noclass">{{$t("serviceDriveAuth['未关联班级']")}}</Option> </Select
-              > {{$t("serviceDriveAuth['所有項目']")}}
+                <Option value="noclass">{{ $t("serviceDriveAuth['未关联班级']") }}</Option>
+              </Select>
+              {{ $t("serviceDriveAuth['所有項目']") }}
             </p></i-col
           >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
@@ -161,13 +168,13 @@
                 'disabled-btn': currentFilter != 2 || searchClassroom == ''
               }"
             >
-               {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
             </div></i-col
           >
         </Row>
         <Row class="option-item">
           <i-col :xs="24" :sm="12" :md="12" :lg="22"
-            ><p class="option-text"> {{$t("serviceDriveAuth['套用至全校所有項目']")}} ({{$t("serviceDriveAuth['共']")}} {{ students.length }} {{$t("serviceDriveAuth['個']")}}，{{ students.length > totalAuth ? $t("serviceDriveAuth['大於總授權數，無法使用']") : '' }})</p></i-col
+            ><p class="option-text">{{ $t("serviceDriveAuth['套用至全校所有項目']") }} ({{ $t("serviceDriveAuth['共']") }} {{ students.length }} {{ $t("serviceDriveAuth['個']") }}，{{ students.length > totalAuth ? $t("serviceDriveAuth['大於總授權數，無法使用']") : '' }})</p></i-col
           >
           <i-col :xs="24" :sm="12" :md="12" :lg="2"
             ><div
@@ -179,19 +186,23 @@
                 'disabled-btn': students.length > totalAuth
               }"
             >
-               {{$t("serviceDriveAuth['套用']")}}
+              {{ $t("serviceDriveAuth['套用']") }}
+            </div></i-col
+          >
+        </Row>
+        <Row>
+          <i-col :xs="24" :sm="24" :md="24" :lg="24">
+             <div class="bottom-border" />
+            <div v-if="currentTab == 1" class="unAssign-btn" @click="isOpenRemove = true">
+              {{ $t("serviceDriveAuth['收回所有授權']") }}
+            </div>
+            <div v-if="currentTab == 1" class="save-btn" @click="saveAuth()">
+              {{ $t("serviceDriveAuth['保存所有變更']") }}
             </div></i-col
           >
         </Row>
       </div>
     </Row>
-    <div v-if="currentTab == 0" class="save-btn buy-btn">{{$t("serviceDriveAuth['添購其他授權']")}}</div>
-    <div v-if="currentTab == 1" class="unAssign-btn" @click="isOpenRemove = true">
-       {{$t("serviceDriveAuth['收回所有授權']")}}
-    </div>
-    <div v-if="currentTab == 1" class="save-btn" @click="saveAuth()">
-       {{$t("serviceDriveAuth['保存所有變更']")}}
-    </div>
   </div>
 </template>
 
@@ -250,15 +261,14 @@ export default {
       periods: 'user/getPeriods', // 學制s
       grades: 'user/getGrades', // 年級
       classes: 'user/getClasses', // 教室ID
-      aclassOneInfoNum: 'studentAclassOneAuth/getSchoolAclassOneInfoNum',
-      
+      aclassOneInfoNum: 'studentAclassOneAuth/getSchoolAclassOneInfoNum'
     }),
-    selectClasses:function(){
+    selectClasses: function() {
       return this.$t("serviceDriveAuth['選擇班級']")
     },
-    titletext:function(){
-        return this.$t("serviceDriveAuth['確定收回所有授權']")
-      },
+    titletext: function() {
+      return this.$t("serviceDriveAuth['確定收回所有授權']")
+    },
     filterGrades: function() {
       var data = this.grades
       if (this.searchPeriod) {

TEAMModelOS/ClientApp/src/view/student-account/AuthNumChart.vue

@@ -171,7 +171,7 @@ export default {
 
 <style lang="less">
 #authNum-chart {
-  width: 300px;
+  //width: 300px;
   height: 170px;
   margin-top: 20px;
   margin-bottom: 40px;

TEAMModelOS/ClientApp/src/view/teachermgmt/components/userList/Index.vue

@@ -661,7 +661,7 @@ export default {
           },
           {
             title: this.$t('teachermgmt.table.th3'),
-            width: 150,
+           
             key: 'job',
             sortable: true,
             render: (h, params) => {
@@ -677,7 +677,7 @@ export default {
             sortable: true,
 
             show: true,
-            width: 150,
+           
             render: (h, params) => {
               if (params.row.permissionCount > 0) {
                 return h(
@@ -696,7 +696,7 @@ export default {
           },
           {
             title: this.$t("serviceDriveAuth['空間分配']"),
-            width: 300,
+            width: 250,
             slot: 'spaceShare',
             align: 'center'
           }