|
@@ -4,43 +4,30 @@
|
|
|
<div class="class-list-wrap">
|
|
|
<!--班级列表-->
|
|
|
<div class="class-list-header">
|
|
|
- <!-- <span>班级列表</span> -->
|
|
|
- <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates">
|
|
|
+ <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates" v-if="$store.state.user.schoolProfile.school_base">
|
|
|
<span style="cursor: pointer;">
|
|
|
<b class="title">{{ filterPeriodName }}</b>
|
|
|
- {{ '班级列表' }}
|
|
|
- <Icon type="ios-arrow-down"></Icon>
|
|
|
+ <!--{{ '班级列表' }}-->
|
|
|
+ <Icon type="ios-arrow-down" style="margin-left:8px;"></Icon>
|
|
|
</span>
|
|
|
- <DropdownMenu slot="list" v-for="(item,index) in this.$store.state.schoolBaseInfo.schoolBaseInfo.period" :value="item.id" :key="index">
|
|
|
+ <DropdownMenu slot="list" v-for="(item,index) in $store.state.user.schoolProfile.school_base.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" /> -->
|
|
|
- <!-- 新增班級 -->
|
|
|
- <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">
|
|
|
- <Icon type="ios-funnel" class="action-btn-icon" size="16" style="padding-top:1px;" />
|
|
|
- <div slot="content">
|
|
|
- <div style="margin-top:5px;margin-bottom:10px;">
|
|
|
- <span>学段:</span>
|
|
|
- <Select v-model="filterPeriod" style="width:80px" size="small" clearable @on-change="filterByPeriod">
|
|
|
- <Option v-for="(item,index) in $store.state.user.schoolProfile.school_base.period" :value="item.id" :key="index">
|
|
|
- {{ item.name }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Poptip> -->
|
|
|
+ <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-trash" @click.stop="showConfirmDelete()" />
|
|
|
+ <Icon class="action-btn-icon" type="md-add" @click="addClassroom()" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="dark-iview-input" style="float:right;width:calc(100% - 100px);padding-right:10px;">
|
|
|
+ <Input icon="ios-close"
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="关键字搜索..."
|
|
|
+ autofocus
|
|
|
+ style="width:100%"
|
|
|
+ @on-click="closeKeySearch"
|
|
|
+ @on-change="filterClassname" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="class-list-filter">
|
|
@@ -57,13 +44,6 @@
|
|
|
<DropdownItem name="total">{{ '依學生數排序' }}</DropdownItem>
|
|
|
</DropdownMenu>
|
|
|
</Dropdown>
|
|
|
- <div class="dark-iview-input" style="padding-right:10px;">
|
|
|
- <Input size="small" suffix="ios-search"
|
|
|
- v-model="keyword"
|
|
|
- style="width: 110px"
|
|
|
- @on-click="closeKeySearch"
|
|
|
- @on-change="filterClassname" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="class-list">
|
|
@@ -71,32 +51,42 @@
|
|
|
<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>{{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-name">
|
|
|
+ <span>
|
|
|
+ {{item.name}}
|
|
|
+ </span>
|
|
|
+ <span class="class-id-tag">
|
|
|
+ {{item.id}}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
<p class="class-type">
|
|
|
<template v-if="item.style != 'smart'">
|
|
|
<div class="iconHi" >
|
|
|
<v-icon iconClass="hi" style="color:#333;" />
|
|
|
</div>
|
|
|
<span>
|
|
|
- {{ $t('TEAM Model 智慧教室') }}
|
|
|
+ <!--多语系后面统一处理-->
|
|
|
+ <!--{{ $t('TEAM Model 智慧教室') }}-->
|
|
|
+ TEAM Model 智慧教室
|
|
|
</span>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<span style="color:#a5a5a5;">
|
|
|
- <v-icon iconClass="board" /> {{ $t('普通教室') }}
|
|
|
+ <v-icon iconClass="board" />
|
|
|
+ <!--{{ $t('普通教室') }}-->
|
|
|
+ 普通教室
|
|
|
</span>
|
|
|
</template>
|
|
|
<p class="second-text-color">
|
|
|
- <span class="title">{{ $t('學生人數') + ':' }}</span>
|
|
|
- <span class="primary-text-color">{{item.studCount}}</span>
|
|
|
- <span style="margin-left:5px;margin-right: 13px;">|</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()" />
|
|
|
+ <!--<Icon class="action-btn-icon" :class="curClassIndex == index ? '' : 'hide-icon'" size="19" type="md-trash"/>-->
|
|
|
</div>
|
|
|
<EmptyData v-if="classroomListShow.length == 0" style="padding-top:120px;"></EmptyData>
|
|
|
</vuescroll>
|
|
@@ -119,29 +109,20 @@
|
|
|
<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="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="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="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 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>
|
|
|
- <!-- 暫時註解 不修改 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.user.schoolProfile.school_base.period" :value="item.id" :key="index">
|
|
|
- {{ item.name }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
- </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>
|
|
@@ -159,10 +140,10 @@
|
|
|
</Select>
|
|
|
</FormItem>
|
|
|
<!-- 暫時註解改為旁邊勾選 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 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> -->
|
|
|
</Form>
|
|
|
</vuescroll>
|
|
|
</div>
|
|
@@ -171,8 +152,8 @@
|
|
|
<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('關聯Hiteach設備')}}
|
|
|
+ <!--{{$t('關聯Hiteach設備')}}-->
|
|
|
+ 關聯Hiteach設備
|
|
|
</p>
|
|
|
<div class="class-list-filter">
|
|
|
<div class="class-list-filter-box">
|
|
@@ -617,8 +598,8 @@
|
|
|
filterPeriodName: function(){
|
|
|
let pId = this.filterPeriod
|
|
|
let name = ''
|
|
|
- if(pId !== ''){
|
|
|
- let temp = this.$store.state.schoolBaseInfo.schoolBaseInfo.period.filter( item => {
|
|
|
+ if(pId){
|
|
|
+ let temp = this.$store.state.user.schoolProfile.school_base.period.filter( item => {
|
|
|
return pId == item.id
|
|
|
})
|
|
|
if(temp.length >0 ) name = temp[0].name
|
|
@@ -693,13 +674,19 @@
|
|
|
return data
|
|
|
},
|
|
|
filterByPeriod() {
|
|
|
+ this.curClassIndex = 0
|
|
|
if (this.filterPeriod) {
|
|
|
- this.classroomListShow = this.classroomList.filter(item => item.periodId == this.filterPeriod)
|
|
|
+ this.classroomListShow = this.classroomList.filter(item => item.periodId == this.filterPeriod || !item.periodId)
|
|
|
} else {
|
|
|
this.classroomListShow = [...this.classroomList]
|
|
|
}
|
|
|
// 排序
|
|
|
this.classroomListShow = this.dataSort(this.classroomListShow)
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.drawSchoolPlan('')
|
|
|
+ this.initIcon()
|
|
|
+ })
|
|
|
},
|
|
|
filterClassname() {
|
|
|
if (this.keyword == '' || this.keyword == undefined) {
|
|
@@ -807,7 +794,6 @@
|
|
|
this.schoolPlan = document.getElementById('school-plan')
|
|
|
this.schoolPlan.height = this.schoolImageData.height * this.scaleDefault
|
|
|
this.schoolPlan.width = this.schoolImageData.width * this.scaleDefault
|
|
|
- let ctx = this.schoolPlan.getContext('2d')
|
|
|
this.drawSchoolPlan('imgUrl')
|
|
|
this.initIcon()
|
|
|
},
|
|
@@ -836,28 +822,28 @@
|
|
|
this.schoolPlan = document.getElementById('school-plan')
|
|
|
let ctx = this.schoolPlan.getContext('2d')
|
|
|
let _this = this
|
|
|
- for (let i = 0; i < _this.classroomList.length; i++) {
|
|
|
+ for (let i = 0; i < _this.classroomListShow.length; i++) {
|
|
|
if (this.activeIcon == i) {
|
|
|
ctx.drawImage(this.greenImageData, x * _this.scaleDefault, y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
|
|
|
this.updated = true
|
|
|
} else {
|
|
|
- ctx.drawImage(this.whiteImageData, _this.classroomList[i].x * _this.scaleDefault, _this.classroomList[i].y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
|
|
|
+ ctx.drawImage(this.whiteImageData, _this.classroomListShow[i].x * _this.scaleDefault, _this.classroomListShow[i].y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
initIcon() {
|
|
|
this.schoolPlan = document.getElementById('school-plan')
|
|
|
let ctx = this.schoolPlan.getContext('2d')
|
|
|
- for (let i = 0; i < this.classroomList.length; i++) {
|
|
|
+ for (let i = 0; i < this.classroomListShow.length; i++) {
|
|
|
let icon = i == this.curClassIndex ? this.greenImageData : this.whiteImageData
|
|
|
ctx.drawImage(icon,
|
|
|
- this.classroomList[i].x * this.scaleDefault, this.classroomList[i].y * this.scaleDefault,
|
|
|
+ this.classroomListShow[i].x * this.scaleDefault, this.classroomListShow[i].y * this.scaleDefault,
|
|
|
20 * this.scaleDefault, 20 * this.scaleDefault)
|
|
|
}
|
|
|
},
|
|
|
checkActivieIcon(point) {
|
|
|
- for (let item in this.classroomList) {
|
|
|
- if (point.x > this.classroomList[item].x * this.scaleDefault && point.x < (this.classroomList[item].x + 15) * this.scaleDefault && point.y > this.classroomList[item].y * this.scaleDefault && point.y < (this.classroomList[item].y + 15) * this.scaleDefault) {
|
|
|
+ for (let item in this.classroomListShow) {
|
|
|
+ if (point.x > this.classroomListShow[item].x * this.scaleDefault && point.x < (this.classroomListShow[item].x + 15) * this.scaleDefault && point.y > this.classroomListShow[item].y * this.scaleDefault && point.y < (this.classroomListShow[item].y + 15) * this.scaleDefault) {
|
|
|
return item
|
|
|
}
|
|
|
}
|
|
@@ -899,12 +885,11 @@
|
|
|
let index = this.checkActivieIcon(this.point)
|
|
|
if (index != -1) {
|
|
|
if (this.textStatus == true) {
|
|
|
- this.drawText(this.classroomList[index].name, (this.classroomList[index].x + 25) * this.scaleDefault, (this.classroomList[index].y + 20) * this.scaleDefault)
|
|
|
+ this.drawText(this.classroomListShow[index].name, (this.classroomListShow[index].x + 25) * this.scaleDefault, (this.classroomListShow[index].y + 20) * this.scaleDefault)
|
|
|
this.textStatus = false
|
|
|
}
|
|
|
} else {
|
|
|
this.drawSchoolPlan('')
|
|
|
- //this.moveIcon(this.point.x, this.point.y)
|
|
|
this.initIcon()
|
|
|
this.textStatus = true
|
|
|
}
|
|
@@ -913,15 +898,15 @@
|
|
|
canvasMouseUp(e) {
|
|
|
this.isMouseDown = false
|
|
|
if (this.activeIcon != -1) {
|
|
|
- this.classroomList[this.activeIcon].x = this.point.x / this.scaleDefault
|
|
|
- this.classroomList[this.activeIcon].y = this.point.y / this.scaleDefault
|
|
|
+ this.classroomListShow[this.activeIcon].x = this.point.x / this.scaleDefault
|
|
|
+ this.classroomListShow[this.activeIcon].y = this.point.y / this.scaleDefault
|
|
|
}
|
|
|
this.activeIcon = -1
|
|
|
},
|
|
|
canvasMouseOut(e) {
|
|
|
this.isMouseDown = false
|
|
|
if (this.activeIcon != -1) {
|
|
|
- this.classroomList[this.activeIcon].point = this.point
|
|
|
+ this.classroomListShow[this.activeIcon].point = this.point
|
|
|
}
|
|
|
this.activeIcon = -1
|
|
|
},
|
|
@@ -973,8 +958,6 @@
|
|
|
reader.readAsDataURL(file)
|
|
|
reader.onload = () => {
|
|
|
const _base64 = reader.result
|
|
|
- //this.imgUrl = _base64 // 将_base64赋值给图片的src,实现图片预览
|
|
|
- //_this.drawSchoolPlan(this.imgUrl)
|
|
|
_this.drawSchoolPlan(_base64)
|
|
|
}
|
|
|
return false
|
|
@@ -1033,36 +1016,29 @@
|
|
|
getClassroom() {
|
|
|
this.isListLoading = true
|
|
|
//直接读取登录成功拿到得学校基础信息
|
|
|
- this.classroomList = this.$store.state.user.schoolProfile.school_classes
|
|
|
- if (this.classroomList.length > 0) {
|
|
|
- this.updateBefore = JSON.stringify(this.classroomList[0])
|
|
|
- }
|
|
|
- this.filterClassname()
|
|
|
- setTimeout(() => {
|
|
|
- this.isListLoading = false
|
|
|
- },500)
|
|
|
- /*this.$store.dispatch('schoolBaseInfo/getClassroom').then(
|
|
|
+
|
|
|
+ this.$store.dispatch('user/getSchoolProfile').then(
|
|
|
(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 (res) {
|
|
|
+ this.classroomList = this.$store.state.user.schoolProfile.school_classes
|
|
|
if (this.classroomList.length > 0) {
|
|
|
this.updateBefore = JSON.stringify(this.classroomList[0])
|
|
|
}
|
|
|
this.filterClassname()
|
|
|
+
|
|
|
+ // 預設搜尋給第一個
|
|
|
+ this.filterPeriod = res.school_base.period[0].id
|
|
|
+ this.filterByPeriod()
|
|
|
}
|
|
|
},
|
|
|
(err) => {
|
|
|
this.$Message.error('API error!')
|
|
|
}
|
|
|
).finally(() => {
|
|
|
- this.isListLoading = false
|
|
|
- })*/
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isListLoading = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
},
|
|
|
/**显示确认删除班级对话框 */
|
|
|
showConfirmDelete() {
|
|
@@ -1154,6 +1130,7 @@
|
|
|
this.updateBefore = JSON.stringify(this.classroomListShow[this.curClassIndex])
|
|
|
}
|
|
|
if (this.currentTabIndex == 1) {
|
|
|
+ this.drawSchoolPlan('')
|
|
|
this.initIcon()
|
|
|
}
|
|
|
}
|
|
@@ -1257,14 +1234,13 @@
|
|
|
id: '',
|
|
|
name: ''
|
|
|
},
|
|
|
- periodId:'',
|
|
|
+ periodId: this.filterPeriod,
|
|
|
gradeId: '',
|
|
|
x: 20 * (this.classroomList.length % 5),
|
|
|
y: 20 * (this.classroomList.length / 5).toFixed(0),
|
|
|
scope:'school',
|
|
|
option:'insert'
|
|
|
})
|
|
|
- //this.classroomListShow = [...this.classroomList]
|
|
|
this.drawIcon(5, 6)
|
|
|
this.curClassIndex = 0
|
|
|
this.updateBefore = JSON.stringify(this.classroomListShow[this.curClassIndex])
|
|
@@ -1411,7 +1387,7 @@
|
|
|
|
|
|
.sort-dropdown{
|
|
|
.title{
|
|
|
- color: #dcdee2;
|
|
|
+ color: white;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.ivu-select-dropdown{
|