教師帳號管理 (#134)

新增申請列表

TEAMModelOS/ClientApp/src/icons.js

@@ -11,6 +11,8 @@ library.add(
   require('@fortawesome/free-solid-svg-icons').faTrash,
   require('@fortawesome/free-solid-svg-icons').faFileAlt,
   require('@fortawesome/free-solid-svg-icons').faBell,
+  require('@fortawesome/free-solid-svg-icons').faCheck,
+  require('@fortawesome/free-solid-svg-icons').faTimes,
   // Brands
   require('@fortawesome/free-brands-svg-icons').faFontAwesome,
   require('@fortawesome/free-brands-svg-icons').faMicrosoft,

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

@@ -72,6 +72,24 @@
                             justify-content: flex-end;
                             align-items: center;
                             height: 50px;
+                            .icon-box{
+                                width: 32px;
+                                height: 32px;
+                                border: 3px solid #777777;
+                                border-radius: 50%;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                cursor: pointer;
+                            }
+                            .icon-check{
+                                color: #2e7867;
+                                border-color: #2e7867;
+                            }
+                            .icon-reject{
+                                color: #8d3231;
+                                border-color: #8d3231;
+                            }                            
                         }
                     }
                 }

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

@@ -40,79 +40,46 @@
             <div class="details">
                 <div class="details-box scrollstyle">
 
-                    <div class="detail">
+                    <div class="detail" v-for="(item, key) in personnelList" :key="key">
                         <div class="detail-info">
                             <div class="title ellipsis">
-                                {{ 'mia_spoelstra#3927' }}
+                                {{ item.id }}
                             </div>
                             <span class="sub-title">
-                                {{ 'Erilk Jon spcelstra' }}
+                                {{ item.name }}
                                 <div class="typeInfo">
-                                    <icon class="icon" icon="file-alt" /> {{'教師申請加入'}}
-                                </div>
-                            </span>
-                        </div>
-                        <div class="detail-ctr">
-                            <div class="time">
-                                2009.9.5 AM 10:49
-                            </div>
-                            <div class="btns">
-                                <i-circle :percent="80" :trail-width="9" :stroke-width="10" :size="32" stroke-color="#adadad" trail-color="#545454">
-                                    <Icon size="20" color="#545454" type="md-notifications" />                                    
-                                </i-circle>                                
-                            </div>
-                        </div>
-                    </div>
+                                    <template v-if="item.type == 'invite'">
+                                        <icon class="icon" icon="file-alt" /> {{'學校邀請加入'}}
+                                    </template>
+                                    <template v-else-if="item.type == 'apply'">
+                                        <icon class="icon" icon="file-alt" /> {{'教師申請加入'}}
+                                    </template>
 
-                    <div class="detail">
-                        <div class="detail-info">
-                            <div class="title ellipsis">
-                                {{ 'mia_spoelstra#3927' }}
-                            </div>
-                            <span class="sub-title">
-                                {{ 'Erilk Jon spcelstra' }}
-                                <div class="typeInfo">
-                                    <icon class="icon" icon="file-alt" /> {{'教師申請加入'}}
                                 </div>
                             </span>
                         </div>
                         <div class="detail-ctr">
                             <div class="time">
-                                2009.9.5 AM 10:49
+                                {{ item.crtDate | converTime }}
                             </div>
                             <div class="btns">
-                                <i-circle :percent="100" :trail-width="9" :stroke-width="10" :size="32" stroke-color="#adadad" trail-color="#545454">
-                                    <Icon size="20" color="#adadad" type="md-notifications" />                                    
-                                </i-circle>                                
+                                <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">
+                                        <Icon size="20" :color="isOver24hr(item.remindDate, 'color')"  type="md-notifications" />
+                                    </i-circle>
+                                </template>
+                                <template v-else-if="item.type == 'apply'">
+                                    <div class="icon-box icon-check" style="margin-right: 20px;">
+                                        <icon class="icon-check" icon="check" />
+                                    </div>
+                                    <div class="icon-box icon-reject">
+                                        <icon class="icon-reject" icon="times" />
+                                    </div>
+                                </template>
                             </div>
                         </div>
                     </div>
 
-                    <div class="detail">
-                        <div class="detail-info">
-                            <div class="title ellipsis">
-                                {{ 'mia_spoelstra#3927' }}
-                            </div>
-                            <span class="sub-title">
-                                {{ 'Erilk Jon spcelstra' }}
-                                <div class="typeInfo">
-                                    <icon class="icon" icon="file-alt" /> {{'教師申請加入'}}
-                                </div>
-                            </span>
-                        </div>
-                        <div class="detail-ctr">
-                            <div class="time">
-                                2009.9.5 AM 10:49
-                            </div>
-                            <div class="btns">
-                                <div style="width: 32px;">
-                                    <Icon :size="20" type="md-checkmark" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
                 </div>
             </div>
         </div>
@@ -127,12 +94,64 @@ 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: ''
+                },
+            ]
+        }
+    },
+    filters:{
+        converTime: function(time){
+            let datetime = new Date()
+            datetime.setTime(time)
+            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 + ' ' + ampm + ' ' + hour + ':' + minute
         }
     },
     computed:{
-
+        
     },
     methods: {
+        isOver24hr: function(timestamp, type){
+            let datetime = new Date()
+            let nowTime = datetime.getTime()
+            let equals = nowTime - timestamp
+            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;
+            }            
+        }
     }
 }
 </script>