Merge branch 'develop3.0' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop3.0

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

@@ -17,6 +17,7 @@ export default {
         getClassrooms: state => state.classrooms,
         getGrades: state => state.srvAdr,
         getStudent: state => state.students,
+        getSchoolInfo: state => state.schoolBaseInfo,
     },
     mutations: {
         setSchoolInfo(state, data) {
@@ -54,6 +55,7 @@ export default {
                         }).then(
                             res => {
                                 if (res) {
+                                    console.log(res)
                                     if (res.schools.length > 0) {
                                         context.commit('setSchoolInfo', res.schools[0])
                                         resolve({

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

@@ -3,7 +3,7 @@
 @primary-textColor: #fff; //文本主颜色
 @second-textColor: #a5a5a5; //文本副级颜色
 @third-textColor: #dddddd;//其他颜色
-@fourth-textColor: #6BDFC3;
+@fourth-textColor: #1cc0f3;
 @primary-fontSize: 14px;
 @second-fontSize: 16px;
 @large-fontSize: 20px;
@@ -14,13 +14,13 @@
     flex-direction: row;
 
     .class-list-wrap {
-        width: 400px;
+        width: 500px;
         height: 100%;
         border-right: 1px solid @borderColor;
     }
 
     .class-info-wrap {
-        width: ~"calc(100% - 400px)";
+        width: ~"calc(100% - 500px)";
         height: 100%;
         padding-left:15px;
     }
@@ -29,17 +29,39 @@
     width:100%;
     height:45px;
     line-height:45px;
-    border-bottom:1px solid @borderColor;
+    // border-bottom:1px solid @borderColor;
     padding-left:15px;
     color:@second-textColor;
 }
-.action-btn-icon{
-    float:right;
-    margin-right:15px;
-    margin-top:12px;
-    color:white;
-    font-size:18px;
-    cursor:pointer;
+.class-list-filter{
+    width:100%;
+    height:45px;
+    border-bottom:1px solid @borderColor;
+    padding-left:15px;
+    &-box {
+        height: 45px;
+        border-top:1px solid @borderColor;
+        color:@second-textColor;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+.action-btn{
+    float: right;
+    color: white;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+    cursor: pointer;
+    &-icon{
+        color:white;
+        margin-right: 12px;
+        &.hide-icon{
+            display: none;
+        }
+    }
 }
 .class-info-header{
     width:100%;
@@ -186,6 +208,9 @@
     .border(bottom);
     cursor:pointer;
     position:relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;    
     &:hover {
         .active-item-bg,
         .period-btn-edit {
@@ -196,16 +221,17 @@
 .class-name {
     font-size: @large-fontSize;
     color: white;
-    font-weight: 900;
+    font-weight: 500;
 }
 .second-text-color {
     color: @second-textColor;
+    font-size: 12px;
 }
 .third-text-color{
     color:@third-textColor;
 }
 .fourth-text-color {
-    color: #6BDFC3 !important;
+    color: #1cc0f3 !important;
     /*text-shadow:1px 1px 1px white;*/
 }
 .class-hiteach-code {
@@ -214,15 +240,28 @@
 .class-type {
     margin-top:6px;
     margin-bottom:4px;
-    color:#6BDFC3;
-    margin-left:-4px;
+    align-items: center;
+    display: flex;
+    span{
+        color: rgb(28, 192, 243);
+    }
+}
+.iconHi{
+    width: 16px;
+    height: 16px;
+    background: rgb(28, 192, 243);
+    border-radius: 16%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 5px;
 }
 .primary-text-color{
     color:@primary-textColor;
 }
 
 .class-attr-wrap{
-    width:47%;
+    width:35%;
     height:100%;
     .border(right);
     &-label{
@@ -234,7 +273,7 @@
     }
 }
 .hiteach-code-wrap {
-    width: 53%;
+    width: 65%;
     height: 100%;
     &-header {
         width: ~"calc(100% - 30px)";
@@ -251,46 +290,51 @@
         .border(top);
         width: 100%;
         height: ~"calc(100% - 72px)";
-
+        padding-left: 25px;
         h1 {
-            margin-top: -120px;
+        //     margin-top: -120px;
+            font-weight: 400;
         }
 
         ul {
             list-style: none;
-            padding-left: 20px;
-            margin-top: 15px;
+            // padding-left: 20px;
+            // margin-top: 15px;
 
             li {
-                span {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    display: inline-block;
-                    width: calc(100% - 50px);
-                }
+                color: #dbdbdb;
+                display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+                // span {
+                //     text-overflow: ellipsis;
+                //     overflow: hidden;
+                //     white-space: nowrap;
+                //     display: inline-block;
+                //     width: calc(100% - 50px);
+                // }
 
-                &:hover {
-                    background: @borderColor;
-                    color: white;
-                }
+                // &:hover {
+                //     background: @borderColor;
+                //     color: white;
+                // }
 
-                height: 40px;
-                line-height: 40px;
-                color: @second-textColor;
-                font-size: @second-fontSize - 1;
-                padding-left: 5px;
-                cursor: pointer;
-                .border(bottom);
+                // height: 40px;
+                // line-height: 40px;
+                // color: @second-textColor;
+                // font-size: @second-fontSize - 1;
+                // padding-left: 5px;
+                // cursor: pointer;
+                // .border(bottom);
 
-                .ivu-icon {
-                    margin-top: -4px;
-                }
+                // .ivu-icon {
+                //     margin-top: -4px;
+                // }
 
-                .ivu-tag {
-                    float: right;
-                    margin-top: 8px;
-                }
+                // .ivu-tag {
+                //     float: right;
+                //     margin-top: 8px;
+                // }
             }
         }
     }

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

@@ -4,12 +4,28 @@
         <div class="class-list-wrap">
             <!--班级列表-->
             <div class="class-list-header">
-                <span>班级列表</span>
+                <!-- <span>班级列表</span> -->
+                <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates">
+                    <span style="cursor: pointer;">
+                        <b class="title">{{ filterPeriodName }}</b>
+                        {{ '班级列表' }}
+                        <Icon type="ios-arrow-down"></Icon>
+                    </span>
+                    <DropdownMenu slot="list" v-for="(item,index) in this.$store.state.schoolBaseInfo.schoolBaseInfo.period" :value="item.id" :key="index">
+                        <DropdownItem :name="item.id">{{ item.name }}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+                    
                 <div v-if="!isSearch" style="float:right;">
-                    <Icon class="action-btn-icon" type="ios-search" @click="isSearch = true" />
-                    <Icon class="action-btn-icon" type="md-add" @click="addClassroom()" />
-                    <Icon class="action-btn-icon" type="md-trash" @click.stop="showConfirmDelete()" />
-                    <Tag v-show="filterPeriod != undefined" closable @on-close="filterPeriod = undefined" color="#606060" style="margin-right:15px;margin-top:-5px;">
+                    <!-- <Icon class="action-btn-icon" type="ios-search" @click="isSearch = true" /> -->
+                    <!-- 新增班級 -->
+                    <div class="action-btn" @click="addClassroom()">
+                        <Icon class="action-btn-icon" type="md-add" />
+                        <span>{{ $t('新增教室') }}</span>
+                    </div>
+
+                     <!-- 學段篩選 先註解 -->
+                        <!-- <Tag v-show="filterPeriod != undefined" closable @on-close="filterPeriod = undefined" color="#606060" style="margin-right:15px;margin-top:-5px;">
                         {{$jsFn.getPeriod( $store.state.schoolBaseInfo.schoolBaseInfo.period,filterPeriod).name}}
                     </Tag>
                     <Poptip trigger="hover" placement="bottom" offset="-8">
@@ -24,32 +40,63 @@
                                 </Select>
                             </div>
                         </div>
-                    </Poptip>
+                    </Poptip> -->
                 </div>
-                <div v-else class="dark-iview-input" style="float:right;width:calc(100% - 100px);padding-right:10px;">
-                    <Input icon="ios-close"
+            </div>
+            <div class="class-list-filter">
+                <div class="class-list-filter-box">
+                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ orderBy = e }" @on-visible-change="restOrderBy">
+                        <span style="cursor: pointer;color:white;">
+                            <Icon type="md-funnel" color="white" size="17" />
+                            {{ orderByText }}
+                            <Icon type="ios-arrow-down"></Icon>
+                        </span>
+                        <DropdownMenu slot="list">
+                            <DropdownItem name="id">{{ '依教室編號排序' }}</DropdownItem>
+                            <DropdownItem name="state">{{ '依智慧教室排序' }}</DropdownItem>
+                            <DropdownItem name="total">{{ '依學生數排序' }}</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                    <div class="dark-iview-input" style="padding-right:10px;">
+                        <Input size="small" suffix="ios-search"
                            v-model="keyword"
-                           placeholder="关键字搜索..."
-                           autofocus
-                           style="width:100%"
+                           style="width: 110px"
                            @on-click="closeKeySearch"
                            @on-change="filterClassname" />
+                    </div>
                 </div>
             </div>
             <div class="class-list">
                 <vuescroll>
                     <div class="class-list-item" v-for="(item,index) in classroomListShow" :key="index" @click="chooseClassroom(index)" :class="curClassIndex == index ? 'block-bg block-bg-active':'block-bg'">
                         <div class="class-list-item-left">
-                            <p class="class-name">{{item.name}}</p>
-                            <p class="class-hiteach-code second-text-color">{{item.sn}}</p>
+                            <!-- <p>{{getPeriodName(item.periodId)}}</p> -->
+                            <p class="class-name">{{item.id}}, {{item.name}}</p>
+                            <!-- <p class="class-hiteach-code second-text-color">{{item.sn}}</p> -->
                             <p class="class-type">
-                                <Icon type="md-arrow-dropright" size="18" />{{item.style == 'smart' ? '智慧教室' : '普通教室'}}
-                            </p>
+                                <template v-if="item.style != 'smart'">
+                                    <div class="iconHi" >
+                                        <v-icon iconClass="hi" style="color:#333;" />
+                                    </div>
+                                    <span>
+                                        {{ $t('TEAM Model 智慧教室') }}
+                                    </span>
+                                </template>
+                                <template v-else>
+                                    <span style="color:#a5a5a5;">
+                                        <v-icon iconClass="board" /> {{ $t('普通教室') }}
+                                    </span>
+                                </template>
                             <p class="second-text-color">
-                                <span>{{$t('schoolBaseInfo.headmaster')}}</span>
+                                <span class="title">{{ $t('學生人數') + '：' }}</span>
+                                <span class="primary-text-color">{{item.studCount}}</span>
+                                <span style="margin-left:5px;margin-right: 13px;">|</span>
+                                <span>{{$t('schoolBaseInfo.headmaster') + '：'}}</span>
                                 <span class="primary-text-color">{{item.teacher.name}}</span>
                             </p>
                         </div>
+                        <!-- 刪除教室 -->
+                        <Icon class="action-btn-icon" :class="curClassIndex == index ? '' : 'hide-icon'" size="19" type="md-trash" @click.stop="showConfirmDelete()" /> 
                     </div>
                     <EmptyData v-if="classroomListShow.length == 0" style="padding-top:120px;"></EmptyData>
                 </vuescroll>
@@ -72,29 +119,30 @@
                     <div class="class-attr-wrap disabled-iview-select dark-iview-select">
                         <vuescroll>
                             <Form v-if="classroomListShow[curClassIndex]" ref="classInfo" :model="classroomListShow[curClassIndex]" :rules="classValidate" style="padding-top:20px;">
-                                <FormItem prop="name" :label="$t('schoolBaseInfo.classroomName')" @click.native.stop>
-                                    <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomName')}}</span>
-                                    <Input @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].name" clearable :placeholder="$t('schoolBaseInfo.classroomNameHolder')" />
-                                </FormItem>
-                                <FormItem prop="id" @click.native.stop>
+                                <FormItem prop="id" @click.native.stop class="requird-color">
                                     <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomCode')}}</span>
                                     <Input @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].id" clearable :placeholder="$t('schoolBaseInfo.classroomCodeHolder')" />
                                 </FormItem>
-                                <FormItem prop="openType" @click.native.stop>
+                                <FormItem prop="name" :label="$t('schoolBaseInfo.classroomName')" @click.native.stop class="requird-color">
+                                    <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.classroomName')}}</span>
+                                    <Input @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].name" clearable :placeholder="$t('schoolBaseInfo.classroomNameHolder')" />
+                                </FormItem>
+                                <FormItem prop="openType" @click.native.stop class="requird-color">
                                     <span slot="label" class="class-attr-wrap-label">班级属性</span>
                                     <Select @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].openType" clearable>
                                         <Option v-for="(item,index) in attributeList" :value="item.value" :key="index">{{ item.label }}</Option>
                                     </Select>
                                 </FormItem>
-                                <FormItem prop="periodId" :label="$t('schoolBaseInfo.setPeriod')" @click.native.stop>
+                                <!-- 暫時註解 不修改 Osbert 
+                                    <FormItem prop="periodId" :label="$t('schoolBaseInfo.setPeriod')" @click.native.stop>
                                     <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.setPeriod')}}</span>
                                     <Select @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].periodId" clearable>
                                         <Option v-for="(item,index) in $store.state.schoolBaseInfo.schoolBaseInfo.period" :value="item.id" :key="index">
                                             {{ item.name }}
                                         </Option>
                                     </Select>
-                                </FormItem>
-                                <FormItem prop="gradeId" :label="$t('schoolBaseInfo.setGrade')" @click.native.stop>
+                                </FormItem> -->
+                                <FormItem prop="gradeId" :label="$t('schoolBaseInfo.setGrade')" @click.native.stop class="requird-color">
                                     <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.setGrade')}}</span>
                                     <Select @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].gradeId" clearable>
                                         <Option v-for="(item,index) in $jsFn.getPeriod($store.state.schoolBaseInfo.schoolBaseInfo,classroomListShow[curClassIndex].periodId).grades" :value="item.id" :key="index">
@@ -102,7 +150,7 @@
                                         </Option>
                                     </Select>
                                 </FormItem>
-                                <FormItem prop="teacher" :label="$t('schoolBaseInfo.headmaster')" @click.native.stop>
+                                <FormItem prop="teacher" :label="$t('schoolBaseInfo.headmaster')" @click.native.stop class="requird-color">
                                     <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.headmaster')}}</span>
                                     <Select @on-change="watchUpdate" :disabled="editStatus" v-model="classroomListShow[curClassIndex].teacher.id" clearable filterable>
                                         <Option v-for="(item,index) in $store.state.teachers.teacherList" :value="item.id" :key="index" @click.native="classroomListShow[curClassIndex].teacher = {id:item.id, name:item.name}">
@@ -110,10 +158,11 @@
                                         </Option>
                                     </Select>
                                 </FormItem>
-                                <FormItem prop="sn" :label="$t('schoolBaseInfo.setHiteachCode')" @click.native.stop>
+                                <!-- 暫時註解改為旁邊勾選 Osbert
+                                    <FormItem prop="sn" :label="$t('schoolBaseInfo.setHiteachCode')" @click.native.stop>
                                     <span slot="label" class="class-attr-wrap-label">{{$t('schoolBaseInfo.setHiteachCode')}}</span>
                                     <Input @on-change="watchUpdate" ref="hiteachCode" @on-focus="toBlur" v-model="classroomListShow[curClassIndex].sn" :disabled="editStatus" :placeholder="$t('schoolBaseInfo.hiTeachHolder')" clearable />
-                                </FormItem>
+                                </FormItem> -->
                             </Form>
                         </vuescroll>
                     </div>
@@ -121,21 +170,243 @@
                     <div class="hiteach-code-wrap">
                         <div class="hiteach-code-wrap-header">
                             <p>
-                                {{$t('schoolBaseInfo.hiteachList')}}
-                                <Icon style="float:right;margin-right:12px;margin-top:2px;cursor:pointer;" class="label-icon" color="white" type="md-add" @click="addCode = true" />
+                                <!-- {{$t('schoolBaseInfo.hiteachList')}} -->
+                                <!-- <Icon style="float:right;margin-right:12px;margin-top:2px;cursor:pointer;" class="label-icon" color="white" type="md-add" @click="addCode = true" /> -->
+                                {{$t('關聯Hiteach設備')}}
                             </p>
-                            <Input clearable v-model="serchCode" :placeholder="$t('schoolBaseInfo.codeHolder')" style="width: 100%;height:30px;" @on-change="filterCode">
-                            <Icon style="margin-top:0px;" type="ios-search" slot="suffix" />
-                            </Input>
+                            <div class="class-list-filter">
+                                <div class="class-list-filter-box">
+                                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start">
+                                        <span style="cursor: pointer;color:white;">
+                                            {{ '顯示所有版本的Hiteach' }}
+                                            <Icon type="ios-arrow-down"></Icon>
+                                        </span>
+                                        <DropdownMenu slot="list">
+                                            <DropdownItem name="All">{{ '顯示所有版本的Hiteach' }}</DropdownItem>
+                                            <DropdownItem name="Standard">{{ '僅顯示Hiteach Standard版本' }}</DropdownItem>
+                                            <DropdownItem name="Pro">{{ '僅顯示Hiteach Pro版本' }}</DropdownItem>
+                                            <DropdownItem name="TBL">{{ '僅顯示Hiteach TBL版本' }}</DropdownItem>
+                                        </DropdownMenu>
+                                    </Dropdown>
+                                    <div class="dark-iview-input" style="padding-right:10px;">
+                                        <Input clearable v-model="serchCode" size="small" suffix="ios-search" @on-change="filterCode"></Input>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="hiteach-code-wrap-list">
-                            <h1 v-if="!hiTeachs.length">{{$t('schoolBaseInfo.noHiTeachTips')}}</h1>
-                            <ul v-else>
-                                <li v-for="(item,index) in hiTeachsShow" :key="index" @click.stop="chooseHiTeach(index)" :class="item.using > 0 ? 'fourth-text-color':''" :title="item.code">
-                                    <span>{{item.code}}</span>
-                                    <Tag color="#6BDFC3" v-if="item.single == 1">{{item.using+'/'+5}}</Tag>
-                                </li>
-                            </ul>
+                            <vuescroll>
+                                <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="stdFlag = !stdFlag" :type="stdFlag ? '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 testclass" 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 testclass" 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 testclass" 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 testclass" 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="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>
+                                                </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="proFlag">
+                                        <div class="hiteach-collapse-sub testclass" 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 testclass" 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>
+                                <!-- <ul>
+                                    <li v-for="(item,index) in hiTeachsShow" :key="index" @click.stop="chooseHiTeach(index)" :class="item.using > 0 ? 'fourth-text-color':''" :title="item.code">
+                                        <span>{{item.code}}</span>
+                                        <Tag color="#6BDFC3" v-if="item.single == 1">{{item.using+'/'+5}}</Tag>
+                                    </li>
+                                </ul> -->
+                            </vuescroll>    
                         </div>
                     </div>
                 </div>
@@ -179,8 +450,14 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+    import '@/icons/svg/htc.svg'
+    import '@/icons/svg/htc_pro.svg'
+    import '@/icons/svg/htc_std.svg'
+    import '@/icons/svg/htc_tbl.svg'
+    import '@/icons/svg/board.svg'
+    
     export default {
-        
         data() {
             // 验证只能是字母和数字
             const validateCode = (rule, value, callback) => {
@@ -195,6 +472,11 @@
                 }
             }
             return {
+                tblFlag: false,
+                stdFlag: false,
+                proFlag: false,                
+                test1: true,
+                orderBy: 'id',
                 updateBefore:'',
                 filterPeriod: undefined,
                 editStatus: true,//可切换编辑状态
@@ -319,16 +601,51 @@
                     openType: [
                         { required: true, message: '请教室属性', trigger: 'change' }
                     ],
-                    periodId: [
-                        { required: true, message: '请设置学段', trigger: 'change' }
-                    ],
+                    // periodId: [
+                    //     { required: true, message: '请设置学段', trigger: 'change' }
+                    // ],
                     gradeId: [
                         { required: true, message: '请设置年级', trigger: 'change' }
-                    ]
+                    ],
+                    teacher: [
+                        { required: true, type: 'object', message: '请设置班主任', trigger: 'change' }
+                    ],
                 },
             }
         },
+        computed: {
+            filterPeriodName: function(){
+                let pId = this.filterPeriod
+                let name = ''
+                if(pId !== ''){
+                    let temp = this.$store.state.schoolBaseInfo.schoolBaseInfo.period.filter( item => {
+                        return pId == item.id
+                    })
+                    if(temp.length >0 ) name = temp[0].name
+                }
+                return name
+            },
+            orderByText: function(){
+                switch (this.orderBy) {
+                    case 'id':
+                        return this.$t('依教室編號排序')
+                    break;
+                    case 'state':
+                        return this.$t('依智慧教室排序')
+                    break;
+                    case 'total':
+                        return this.$t('依學生數排序')    
+                    break;
+                }
+            }
+        },
         methods: {
+            dropdownStates(flag){
+                if(!flag) this.filterByPeriod()
+            },
+            restOrderBy(flag){
+                if(!flag) this.filterByPeriod()
+            },
             closeKeySearch() {
                 this.isSearch = false
                 this.keyword = ''
@@ -340,12 +657,49 @@
                 }
                 console.log(data)
             },
+            dataSort(data){
+                switch (this.orderBy) {
+                    case 'id': // ID 排序
+                        data.sort(function(a, b){
+                            let nameA = a.id.toUpperCase(); // ignore upper and lowercase
+                            let nameB = b.id.toUpperCase(); // ignore upper and lowercase
+                            if (nameA < nameB) {
+                                return -1;
+                            }
+                            if (nameA > nameB) {
+                                return 1;
+                            }
+
+                            // names must be equal
+                            return 0;
+                        })
+                        break;
+                    case 'state': // 智慧教室排序
+                        data.sort(function(a, b){
+                            if(a.style == 'smart'){
+                                return 1
+                            } else {
+                                return -1
+                            }
+                        })
+                        break; // 學生總數排序
+                    case 'total':
+                        data.sort(function(a, b){
+                            return b.studCount - a.studCount;
+                        })
+                        break;
+                }
+                console.log(data)
+                return data
+            },
             filterByPeriod() {
                 if (this.filterPeriod) {
                     this.classroomListShow = this.classroomList.filter(item => item.periodId == this.filterPeriod)
                 } else {
                     this.classroomListShow = [...this.classroomList]
                 }
+                // 排序
+                this.classroomListShow = this.dataSort(this.classroomListShow)
             },
             filterClassname() {
                 if (this.keyword == '' || this.keyword == undefined) {
@@ -358,6 +712,8 @@
                         filterRes = [...this.classroomList]
                     }
                     this.classroomListShow = filterRes.filter(item => item.name.indexOf(this.keyword) != -1)
+                    // 排序
+                    this.classroomListShow = this.dataSort(this.classroomListShow)
                     this.curClassIndex = 0
                     this.updateBefore = JSON.stringify(this.classroomListShow[this.curClassIndex])
                 }
@@ -625,6 +981,7 @@
             },
             saveClassroom() {
                 this.$refs['classInfo'].validate((valid) => {
+                    console.log(valid, 'valid')
                     if (!valid) {
                         this.$Message.error('请先完善班级信息再保存!')
                     } else {
@@ -678,6 +1035,12 @@
                     (res) => {
                         if (res.code == 1 || res.code == 3) {
                             this.classroomList = this.$store.state.schoolBaseInfo.classroomList
+
+                            console.log(this.$store.state.schoolBaseInfo.classroomList, 'classroomList')
+
+                            // 預設搜尋給第一個
+                            this.filterPeriod = this.$store.state.schoolBaseInfo.schoolBaseInfo.period[0].id
+
                             if (this.classroomList.length > 0) {
                                 this.updateBefore = JSON.stringify(this.classroomList[0])
                             }
@@ -954,12 +1317,16 @@
     }
 
     .hiteach-code-wrap-header .ivu-input {
-        width: calc(100% - 30px);
-        background: none;
-        border: none;
-        border-radius: 0px;
+        width: 110px;
+        /* background: none; */
+        /* border: none; */
+        /* border-radius: 0px; */
         color: white;
         font-size: 15px;
+
+        background: none;
+        color: white;
+        border-color: #606060;
     }
 
     .class-attr-wrap .ivu-input {
@@ -1011,4 +1378,79 @@
     .school-plan-wrap .ivu-upload-list {
         display: none;
     }
+
+    
+
+        
+        
+</style>
+<style lang="less">
+.testclass{
+    @keyframes Itemfadein {
+          0% {
+            opacity: 0;
+            transform: translate(-40px);
+          }
+          100% {
+            opacity: 1;
+            transform: translate(0px);
+          }
+        }
+        animation: 0.5s Itemfadein;
+}
+
+.sort-dropdown{
+    .title{
+        color: #dcdee2;
+        font-size: 14px;
+    }
+    .ivu-select-dropdown{
+        background-color: #2d2d2d;
+        border-radius: 2px;
+        border: 1px #464646 solid;
+        .ivu-dropdown-menu{
+            li {
+                color: #ccc;
+                font-size: 12px!important;
+                &:hover{
+                    color: #2d2d2d;
+                }
+            }
+        }
+    }
+}
+.requird-color{
+    .ivu-form-item-label:before{
+        color: #1cc0f3;
+    }
+}
+.hiteach-collapse{
+//     background: transparent;
+//     color: white;
+//     border-top: none;
+//     .ivu-collapse-item{
+//         .ivu-collapse-header{
+//             height: 200px;
+//             line-height: 200px;
+//             display: flex;
+//             align-items: center;
+//             padding-left: 15px;
+            .ivu-tag-border{
+                background: transparent!important;
+                margin-right: 10px;
+                border-radius: 5px;
+                letter-spacing: 1px;
+            }
+//             .ivu-icon-ios-arrow-forward{
+//                 position: absolute;
+//                 right: 2px;
+//                 font-size: 30px;
+//                 color: white;
+//             }
+//         }
+//         .ivu-collapse-content{
+//             background: transparent;
+//         }
+//     }
+}    
 </style>

TEAMModelOS/Controllers/School/ClassRoomController.cs

@@ -211,7 +211,7 @@ namespace TEAMModelOS.Controllers
             var client = _azureCosmos.GetCosmosClient();
             List<object> classrooms = new List<object>();
             StringBuilder sql = new StringBuilder();
-            sql.Append("select c.id,c.point,c.name,c.teacher,c.periodId,c.gradeId,c.sn,c.style,c.scope,c.type,c.code,c.openType,c.x,c.y from c ");
+            sql.Append("select c.id,c.point,c.name,c.teacher,c.periodId,c.gradeId,c.sn,c.style,c.scope,c.type,c.code,c.openType,c.x,c.y,ARRAY_LENGTH(c.students) AS studCount from c ");
             Dictionary<string, object> dict = new Dictionary<string, object>();
             var emobj = requert.EnumerateObject();
             while (emobj.MoveNext())