教師帳號管理 #134

申請列表調整與測試資料

TEAMModelOS/ClientApp/src/icons.js

@@ -13,6 +13,7 @@ library.add(
   require('@fortawesome/free-solid-svg-icons').faBell,
   require('@fortawesome/free-solid-svg-icons').faCheck,
   require('@fortawesome/free-solid-svg-icons').faTimes,
+  require('@fortawesome/free-solid-svg-icons').faUpload,
   // Brands
   require('@fortawesome/free-brands-svg-icons').faFontAwesome,
   require('@fortawesome/free-brands-svg-icons').faMicrosoft,

TEAMModelOS/ClientApp/src/mock/index.js

@@ -130,6 +130,24 @@ export default {
           return 'http://ies.habook.com.tw/cms/aclass_one/home/index'
         } 
       }
-    }
+    },
+    "personnelList|30": [{
+      "type|1": ["invite", "apply"],
+      'identy|+1': 123456789,
+      'id': function(){ // 隨機ID
+          return "TB"+this.identy
+      },
+      'name': '@name',
+      'crtDatatime': '@datetime',
+      'crtDate': function(){
+        let date = new Date(this.crtDatatime)
+        return date.getTime()
+      },
+      'remindDatetime': '@datetime',
+      'remindDate': function(){
+        let date = new Date(this.remindDatetime)
+        return date.getTime()
+      }
+    }]
   })
 }

TEAMModelOS/ClientApp/src/view/teachermgmt/components/personnel/Index.less

@@ -29,12 +29,15 @@
             }
         }
         .details{
+            height: calc(100% - 72px);
             &-box{
                 padding-left: 40px;
+                height: 100%;
+                overflow: auto;
                 .detail{
                     padding: 20px 40px 20px 5px;
                     border-bottom: 1px solid #464646;
-                    display: flex;                
+                    display: flex;
                     &-info{
                         height: 75px;
                         width: 75%;
@@ -99,6 +102,26 @@
     .addTeacher{
         float: left;
         width: 65%;
-        height: 100%;
+        height: 100%;        
+        &-div{                        
+            padding-left: 20px;
+            .title-box{
+                border-bottom: 1px solid #464646;
+                padding-right: 20px;
+                .title{
+                    color: #777777;
+                    height: 45px;
+                    line-height: 45px;
+                }
+                .batch{
+                    color: #fefefe;
+                    float: right;
+                    font-size: 12px;
+                    height: 45px;
+                    line-height: 45px;
+                    cursor: pointer;
+                }          
+            }
+        }
     }
 }

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

@@ -24,15 +24,15 @@
             <div class="sort-box">
                 <div class="title">{{'申請審核'}}</div>
                 <div class="sort">
-                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start">
-                        <span>
-                            {{'顯示時間排序'}}
+                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="sortPersonnel">
+                        <span style="cursor: pointer;">
+                            {{ sortCodeText }}
                             <Icon type="ios-arrow-down"></Icon>
                         </span>
-                        <DropdownMenu class="sdfsdf" slot="list">
-                            <DropdownItem>{{ '顯示時間排序' }}</DropdownItem>
-                            <DropdownItem>{{ '顯示老師申請' }}</DropdownItem>
-                            <DropdownItem>{{ '顯示學校邀請' }}</DropdownItem>
+                        <DropdownMenu slot="list">
+                            <DropdownItem name="time">{{ '顯示時間排序' }}</DropdownItem>
+                            <DropdownItem name="apply">{{ '顯示老師申請' }}</DropdownItem>
+                            <DropdownItem name="invite">{{ '顯示學校邀請' }}</DropdownItem>
                         </DropdownMenu>
                     </Dropdown>
                 </div>                
@@ -40,7 +40,7 @@
             <div class="details">
                 <div class="details-box scrollstyle">
 
-                    <div class="detail" v-for="(item, key) in personnelList" :key="key">
+                    <div class="detail" v-for="(item, key) in personnels" :key="key">
                         <div class="detail-info">
                             <div class="title ellipsis">
                                 {{ item.id }}
@@ -64,7 +64,7 @@
                             </div>
                             <div class="btns">
                                 <template v-if="item.type == 'invite'">
-                                    <i-circle :percent="isOver24hr(item.remindDate)" :trail-width="9" :stroke-width="10" :size="32" stroke-color="#adadad" trail-color="#545454">
+                                    <i-circle :style="{'cursor': isOver24hr(item.remindDate) == 100 ? 'pointer' : 'auto'}" :percent="isOver24hr(item.remindDate)" :trail-width="9" :stroke-width="10" :size="32" stroke-color="#adadad" trail-color="#545454">
                                         <Icon size="20" :color="isOver24hr(item.remindDate, 'color')"  type="md-notifications" />
                                     </i-circle>
                                 </template>
@@ -84,7 +84,17 @@
             </div>
         </div>
         <div class="addTeacher">
-            sdfsdf
+            <div class="addTeacher-box">
+                <div class="title-box">
+                    <span class="title">{{'申請審核'}}</span>
+                    <span class="batch">
+                        <icon icon="upload" style="margin-right: 10px;" />{{'匯入名單'}}
+                    </span>
+                </div>
+            </div>
+            <div>
+                
+            </div>
         </div>
     </div>
 </template>
@@ -94,31 +104,35 @@ export default {
     name:'personnel',
     data() {
         return {
-            personnelList:[
-                {
-                    type: 'invite',
-                    id: 'mia_spoelstra#3927',
-                    name: 'Erilk Jon spcelstra',
-                    crtDate: '1588382527000',
-                    remindDate: '1588382527000'
-                },
-                {
-                    type: 'invite',
-                    id: 'mia_spoelstra#3927',
-                    name: 'Erilk Jon spcelstra',
-                    crtDate: '1588582418000',
-                    remindDate: '1588582418000'
-                },
-                {
-                    type: 'apply',
-                    id: 'mia_spoelstra#3927',
-                    name: 'Erilk Jon spcelstra',
-                    crtDate: '1588582418000',
-                    remindDate: ''
-                },
+            sortCode: 'time',
+            dataList:[
+                // {
+                //     type: 'invite',
+                //     id: 'mia_spoelstra#3927',
+                //     name: 'Erilk Jon spcelstra',
+                //     crtDate: '1588382527000',
+                //     remindDate: '1588382527000'
+                // },
+                // {
+                //     type: 'invite',
+                //     id: 'mia_spoelstra#3927',
+                //     name: 'Erilk Jon spcelstra',
+                //     crtDate: '1588582418000',
+                //     remindDate: '1588582418000'
+                // },
+                // {
+                //     type: 'apply',
+                //     id: 'mia_spoelstra#3927',
+                //     name: 'Erilk Jon spcelstra',
+                //     crtDate: '1588582418000',
+                //     remindDate: ''
+                // },
             ]
         }
     },
+    created(){
+        this.dataList = this.$Mock.data.personnelList      
+    },
     filters:{
         converTime: function(time){
             let datetime = new Date()
@@ -135,7 +149,36 @@ export default {
         }
     },
     computed:{
-        
+        sortCodeText: function(){
+            switch (this.sortCode) {
+                case 'time':
+                    return '顯示時間排序'
+                break;
+                case 'apply':
+                    return '顯示老師申請'
+                break;
+                case 'invite':
+                    return '顯示學校邀請'
+                break;
+            }
+        },
+        personnels: function(){
+            let _this = this;
+            switch (this.sortCode) {
+                case 'time': 
+                    this.dataList.sort(function(a, b){
+                        return b.crtDate - a.crtDate;
+                    })
+                    return this.dataList
+                break;
+                default:
+                    let a = this.dataList.filter(function(item){
+                        return item.type == _this.sortCode
+                    })
+                    return a
+                break;                
+            }
+        }
     },
     methods: {
         isOver24hr: function(timestamp, type){
@@ -145,12 +188,14 @@ export default {
             equals = equals/(1000 * 60 * 60)
             let percent = (equals / 24) * 100
             percent = percent >= 100 ? 100 :  Math.floor(percent)
-            console.log(percent)
             if(type == 'color') {
                 return percent ==100 ?  '#adadad' : '#545454';
             } else {
                 return percent;
             }            
+        },
+        sortPersonnel(name){
+            this.sortCode = name
         }
     }
 }