Merge branch 'TPE/feat/classroomManage' into TPE/develop

TEAMModelOS/ClientApp/src/api/classroom.js

@@ -0,0 +1,12 @@
+import { fetch, post } from '@/api/http'
+import mockTools from '@/mock'
+
+export default {
+    GetHiteachList: function (data) {        
+        return post('/school/init/get-school-product', {'school_code': data} )
+        // return new Promise((resolve) => {
+        //     let res = {data: mockTools.data.hiteachSetting}
+        //     resolve(res)
+        // })
+    }
+}

TEAMModelOS/ClientApp/src/api/index.js

@@ -23,6 +23,7 @@ import accessToken from './accessToken'
 import studentWeb from './studentWeb'
 import regist from './regist'
 import forgetPW from './forgetPW'
+import classroom from './classroom'
 export default {
     accessToken,
     learnActivity,
@@ -46,6 +47,7 @@ export default {
     schoolUser,
     regist,
     forgetPW,
+    classroom,
     // 获取登录跳转链接
     getLoginLink: function (data) {
         return post('api/login/login', data)

TEAMModelOS/ClientApp/src/mock/index.js

@@ -232,6 +232,39 @@ export default {
               'http://icons.iconarchive.com/icons/google/noto-emoji-people-face/256/10135-boy-light-skin-tone-icon.png',
               'http://icons.iconarchive.com/icons/google/noto-emoji-people-face/256/10147-adult-light-skin-tone-icon.png'
           ]
-      }
+      },
+      //Osbert-classroom的假資料
+      'hiteachSetting|20': [{
+        'id|+1': 1234567,
+        'serial': '12DLT43F-EE20-4775-93F5-6BCC',
+        'prodGroup': 'HiTeach 5',
+        'prodName|1' : ['PRO', 'TBL','STD'],
+        'deviceMax': '@natural(0, 10)', // 可綁定最大值，如只有一則回傳單一
+        'DateDate|1': [0, 1, 1602691199], //已到期，無限期或有一個結束時間
+        'aprule': {
+          'sokapp|1': true, // 蘇格拉底議課
+          'sokvdo|1': true, // 蘇格拉底報告
+          'ezs|1': true, // 錄播系統
+
+          // 目前沒有的
+          'remoteSys|1': true, // 遠距教室服務
+          'sokDestop|1': true, // 蘇格拉底桌面
+          'sokreport|1': true, // 蘇格拉底報告
+        },
+        "deviceBound": function(){
+          let max = this.deviceMax
+          let data = []
+          for(let i = 0; i< max; i++){
+            data.push({
+              'uuid': "OSBERT-COMPUTER",
+              'ip': '192.168.0.1',
+              'classId': 'hbcn0101',
+              'computer': "Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz",
+              'deveiceId': '12DLT43F-EE20-4775-93F5-6BCC'
+            })
+          }
+          return data
+        }
+      }],
   })
 }

TEAMModelOS/ClientApp/src/view/schoolmgmt/ClassroomSetting/ClassroomSetting.vue

@@ -196,208 +196,72 @@
                         </div>
                         <div class="hiteach-code-wrap-list">
                             <vuescroll>
-                                <div @click="stdFlag = !stdFlag" class="hiteach-collapse" style="border-bottom: 1px solid #424242;position: relative;cursor: pointer;">
-                                    <div class="hiteach-collapse-main" style="display: flex;align-items: center;padding: 20px 0 20px 20px;">
+                                <div class="hiteach-collapse" style="border-bottom: 1px solid #424242;position: relative;cursor: pointer;" v-for="(item, index) in showhiteachData" :key="index">
+                                    <div @click="openHiSub(index)" class="hiteach-collapse-main" style="display: flex;align-items: center;padding: 20px 0 20px 20px;">
 
-                                        <Icon :type="stdFlag ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" style="position: absolute;right: 5px;top: 20px;"/>
+                                        <Icon v-if="item.deviceMax > 1" :type="item.subOpen ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" style="position: absolute;right: 5px;top: 20px;"/>
 
-                                        <v-icon style="width: 60px;height: 60px;margin-right: 30px;" iconClass="htc_std" />
-                                        <div style="font-size: 12px;letter-spacing: 1px;">
-                                            <ul>
-                                                <li>
-                                                    <h1 class="title" style="display: inline-block;margin-right: 12px;font-size: 16px;font-weight: 500;color: #bdbdbd;color:white;">HiTeach 5 STD</h1>
-                                                    <span style="margin-right: 12px;padding: 2px 5px;background: #1cc0f3;border-radius: 3px;color: white;;">大量</span>
-                                                    <span style="color: #1cc0f3;font-size:12px">2/2</span>
-                                                </li>
-                                                <li><span style="color: #1cc0f3;">3222IAVN-FJ4Y-F5EG-S3OI-4P1A</span></li>
-                                                <li>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底議課</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底報告</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底桌面</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底影片</Tag>
-                                                    <Tag type="border" color="#1cc0f3">遠距教室服務</Tag>
-                                                    <Tag type="border" color="#1cc0f3">錄播系統</Tag>
-                                                </li>
-                                                <li><span style="color: #8d8d8d;">序號到期日： </span>無到期日</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                    <div v-if="stdFlag">
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;" v-model="test1" disabled></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <!-- 被關聯要變色 -->
-                                                    <li style="color: #888888;">
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
-                                            </div>
-                                        </div>
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;"></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <li>
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li>
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li>
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span v-if="false" style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="hiteach-collapse" style="border-bottom: 1px solid #424242;position: relative;">
-                                    <div class="hiteach-collapse-main" style="display: flex;align-items: center;padding: 20px 0 20px 20px;">
-
-                                        <Icon @click="tblFlag = !tblFlag" :type="tblFlag ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" style="position: absolute;right: 5px;top: 20px;"/>
-
-                                        <v-icon style="width: 60px;height: 60px;margin-right: 30px;" iconClass="htc_tbl" />
-                                        <div style="font-size: 12px;letter-spacing: 1px;">
-                                            <ul>
-                                                <li>
-                                                    <h1 class="title" style="display: inline-block;margin-right: 12px;font-size: 16px;font-weight: 500;color: #bdbdbd;color:white;">HiTeach 5 STD</h1>
-                                                    <span style="margin-right: 12px;padding: 2px 5px;background: #1cc0f3;border-radius: 3px;color: white;;">大量</span>
-                                                    <span style="color: #1cc0f3;font-size:12px">2/2</span>
-                                                </li>
-                                                <li><span style="color: #1cc0f3;">3222IAVN-FJ4Y-F5EG-S3OI-4P1A</span></li>
-                                                <li>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底議課</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底報告</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底桌面</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底影片</Tag>
-                                                    <Tag type="border" color="#1cc0f3">遠距教室服務</Tag>
-                                                    <Tag type="border" color="#1cc0f3">錄播系統</Tag>
-                                                </li>
-                                                <li><span style="color: #8d8d8d;">序號到期日： </span>無到期日</li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                    <div v-if="tblFlag">
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;" v-model="test1" disabled></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <!-- 被關聯要變色 -->
-                                                    <li style="color: #888888;">
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
-                                            </div>
-                                        </div>
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;"></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <li>
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li>
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li>
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span v-if="false" style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="hiteach-collapse" style="border-bottom: 1px solid #424242;position: relative;">
-                                    <div class="hiteach-collapse-main" style="display: flex;align-items: center;padding: 20px 0 20px 20px;">
-
-                                        <Icon @click="proFlag = !proFlag" :type="proFlag ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" style="position: absolute;right: 5px;top: 20px;"/>
+                                        <v-icon style="width: 60px;height: 60px;margin-right: 30px;" :iconClass="item.prodName == 'STD' ? 'htc_std' : item.prodName == 'TBL' ? 'htc_tbl' : 'htc_pro'" />
 
-                                        <v-icon style="width: 60px;height: 60px;margin-right: 30px;" iconClass="htc_pro" />
                                         <div style="font-size: 12px;letter-spacing: 1px;">
                                             <ul>
                                                 <li>
-                                                    <h1 class="title" style="display: inline-block;margin-right: 12px;font-size: 16px;font-weight: 500;color: #bdbdbd;color:white;">HiTeach 5 STD</h1>
-                                                    <span style="margin-right: 12px;padding: 2px 5px;background: #1cc0f3;border-radius: 3px;color: white;;">大量</span>
-                                                    <span style="color: #1cc0f3;font-size:12px">2/2</span>
+                                                    <h1 class="title" style="display: inline-block;margin-right: 12px;font-size: 16px;font-weight: 500;color: #bdbdbd;color:white;">
+                                                        {{ item.prodGroup +' '+item.prodName}}
+                                                    </h1>
+                                                    <span style="margin-right: 12px;padding: 2px 5px;background: #1cc0f3;border-radius: 3px;color: white;;">
+                                                        {{ item.deviceMax == 1 ? $t('單一') : $t('大量')}}
+                                                    </span>
+                                                    <span style="color: #1cc0f3;font-size:12px">
+                                                        <!-- 要增加被關聯了幾個 -->
+                                                        {{ item.deviceBound ? '0 / '+item.deviceMax : '-- / -- '}}
+                                                    </span>
                                                 </li>
-                                                <li><span style="color: #1cc0f3;">3222IAVN-FJ4Y-F5EG-S3OI-4P1A</span></li>
+                                                <li><span style="color: #1cc0f3;">{{ item.serial }}</span></li>
                                                 <li>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底議課</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底報告</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底桌面</Tag>
-                                                    <Tag type="border" color="#8d8d8d">蘇格拉底影片</Tag>
-                                                    <Tag type="border" color="#1cc0f3">遠距教室服務</Tag>
-                                                    <Tag type="border" color="#1cc0f3">錄播系統</Tag>
+                                                    <Tag type="border" :color="item.aprule.sokapp ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底議課')}}</Tag>
+                                                    <Tag type="border" :color="item.aprule.sokreport ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底報告')}}</Tag>
+                                                    <Tag type="border" :color="item.aprule.sokDestop ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底桌面')}}</Tag>
+                                                    <Tag type="border" :color="item.aprule.sokvdo ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底影片')}}</Tag>
+                                                    <Tag type="border" :color="item.aprule.remoteSys ? '#1cc0f3' : '#8d8d8d'"> {{ $t('遠距教室服務')}}</Tag>
+                                                    <Tag type="border" :color="item.aprule.ezs ? '#1cc0f3' : '#8d8d8d'"> {{ $t('錄播系統')}}</Tag>
                                                 </li>
-                                                <li><span style="color: #8d8d8d;">序號到期日： </span>無到期日</li>
+                                                <li><span style="color: #8d8d8d;">序號到期日： </span>{{item.DateDate | timeFmt}}</li>
                                             </ul>
                                         </div>
                                     </div>
-                                    <div v-if="proFlag">
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;" v-model="test1" disabled></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <!-- 被關聯要變色 -->
-                                                    <li style="color: #888888;">
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li style="color: #888888;">
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
+                                    <div v-if="item.subOpen" id="hiteach-1">
+                                        <template v-if="item.deviceBound.length >0">
+                                            <div v-for="(dbItem, dbIndex) in item.deviceBound" :key="dbIndex" class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
+                                                <!-- 被關聯 disabled -->
+                                                <Checkbox style="margin-right: 70px;" v-model="test1"></Checkbox>
+                                                <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
+                                                    <ul>
+                                                        <!-- 被關聯要變色 #888888;-->
+                                                        <li>
+                                                            <h3>{{ dbItem.uuid }}</h3>
+                                                        </li>
+                                                        <li>
+                                                            <span>{{ dbItem.ip }} | {{ dbItem.deveiceId }} </span>
+                                                        </li>
+                                                        <li>
+                                                            <span>{{ dbItem.computer }}</span>
+                                                        </li>
+                                                    </ul>
+                                                    <span v-if="false" style="color: #1cc0f3;padding: 0 15px;">
+                                                        已被關聯
+                                                    </span>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
-                                            <Checkbox style="margin-right: 70px;"></Checkbox>
-                                            <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
-                                                <ul>
-                                                    <li>
-                                                        <h3>USER-PCCA062992</h3>
-                                                    </li>
-                                                    <li>
-                                                        <span>192.168.256 | 84FJID3LKSD88 </span>
-                                                    </li>
-                                                    <li>
-                                                        <span>Microsoft Winfows NT 10.0.18883.0 | Intel(R Core(TM i7-10700 CPU @ 2.9Ghz))</span>
-                                                    </li>
-                                                </ul>
-                                                <span v-if="false" style="color: #1cc0f3;padding: 0 15px;">
-                                                    已被關聯
-                                                </span>
+                                        </template>
+                                        <template v-else>
+                                            <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
+                                                <span style="margin-right: 70px;" ></span>
+                                                <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
+                                                    {{ '此序號尚未啟用' }}
+                                                </div>
                                             </div>
-                                        </div>
+                                        </template>
                                     </div>
                                 </div>
                                 <!-- <ul>
@@ -472,10 +336,12 @@
                 }
             }
             return {
+                showhiteachData: [],
                 tblFlag: false,
                 stdFlag: false,
-                proFlag: false,                
+                proFlag: false,
                 test1: true,
+// 開發中
                 orderBy: 'id',
                 updateBefore:'',
                 filterPeriod: undefined,
@@ -613,7 +479,30 @@
                 },
             }
         },
+        filters: {
+            timeFmt: function (val) {
+                if(val == 0 || val == 1){
+                    return val == 0 ? '已到期' : '無限期'
+                } else {
+                    let d = new Date(val),
+                    month = '' + (d.getMonth() + 1),
+                    day = '' + d.getDate(),
+                    year = d.getFullYear();
+
+                    if (month.length < 2) 
+                        month = '0' + month;
+                    if (day.length < 2) 
+                        day = '0' + day;
+
+                    return [year, month, day].join('/');
+                }
+            }
+        },
         computed: {
+            ...mapGetters({
+                periods: 'user/getPeriods', // 學制s
+                classes: 'user/getClasses', // 教室ID
+            }),
             filterPeriodName: function(){
                 let pId = this.filterPeriod
                 let name = ''
@@ -689,7 +578,6 @@
                         })
                         break;
                 }
-                console.log(data)
                 return data
             },
             filterByPeriod() {
@@ -1268,12 +1156,44 @@
                 this.drawIcon(5, 6)
                 this.curClassIndex = 0
                 this.updateBefore = JSON.stringify(this.classroomListShow[this.curClassIndex])
+            },
+            initHiteachData: async function () {
+                let temp;                
+                await this.getHiteachList().then( res=>{
+                    temp = res.map( item => {
+                        item.subOpen = false
+                        if(item.deviceMax == 1) item.subOpen = true
+                        return item        
+                    })
+                    console.log(temp, '3333333333333333333333')
+                })
+                console.log(temp, 'temp')
+                this.showhiteachData = temp
+                console.log(this.showhiteachData, 'showhiteachData')
+            },
+            getHiteachList: async function() {
+                let data = []
+                await this.$api.classroom.GetHiteachList(this.$store.state.user.schoolCode).then(
+                    (res) => {
+                        data = res.data
+                    },
+                    (err) => {
+                        this.$Message.error('API error!')
+                    }
+                )
+                return data
+            },
+            openHiSub(index){
+                if(this.showhiteachData.length > 0){
+                    this.showhiteachData[index].subOpen = !this.showhiteachData[index].subOpen
+                }
             }
         },
         mounted() {
             this.filterClassname()
             this.filterCode()
             this.initData()
+            this.initHiteachData()
         },
         beforeRouteLeave(to, from, next) {
             if (this.updated) {
@@ -1304,7 +1224,6 @@
         },
         created() {
             this.editStatus = this.noStatus
-            this.getClassroom()
             this.$store.dispatch('teachers/getTeacherList').then(res => { })
         }
     }