|
|
@@ -4,8 +4,12 @@
|
|
|
<span>当前选择章节：</span>
|
|
|
<span class="node-name">{{ nodeInfo.title }}</span>
|
|
|
</div>
|
|
|
+ <div class="search-wrap" v-if="isSchool">
|
|
|
+ <Input v-model="searchVal" placeholder="输入教师名字或ID查询..."
|
|
|
+ icon="ios-close-circle-outline" @on-click="onCloseSearch" @on-change="onSearchChange"/>
|
|
|
+ </div>
|
|
|
<div class="teacher-wrap">
|
|
|
- <Table class="dark-iview-table" :columns="teacherCol" :data="teacherList" height="500">
|
|
|
+ <Table class="dark-iview-table" :columns="teacherCol" :data="teacherList" height="400" v-if="isSchool">
|
|
|
<template slot-scope="{ row }" slot="name">
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
<PersonalPhoto :name="row.name" :picture="row.picture" />
|
|
|
@@ -14,10 +18,24 @@
|
|
|
</template>
|
|
|
<template slot-scope="{ row }" slot="action">
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
-
|
|
|
+ <i-switch true-color="#13ce66"></i-switch>
|
|
|
</div>
|
|
|
</template>
|
|
|
</Table>
|
|
|
+ <div class="search-id-wrap" v-else>
|
|
|
+ <div class="id-search">
|
|
|
+ <Input v-model="searchIdVal" placeholder="搜索教师..." search @on-search="onIdSearch"/>
|
|
|
+ <p v-html="$t('teachermgmt.addTeacher.content')"></p>
|
|
|
+ <p v-if="curTeacher && curTeacher.id" class="search-result-text">搜索结果</p>
|
|
|
+ <div v-if="curTeacher && curTeacher.id" class="search-result-wrap">
|
|
|
+ <PersonalPhoto :name="curTeacher.name" :picture="curTeacher.picture" />
|
|
|
+ <p class="t-name">{{ curTeacher.name }}</p>
|
|
|
+ <p class="t-id">{{ curTeacher.id }}</p>
|
|
|
+ </div>
|
|
|
+ <p v-if="!curTeacher && hasSearchResult" class="search-none">暂未查询到相关结果</p>
|
|
|
+ <p v-if="hasSearchResult" class="re-search" @click="onReSearch">重新搜索</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -40,31 +58,54 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ isSchool:false,
|
|
|
+ hasSearchResult:false,
|
|
|
+ searchVal:'',
|
|
|
+ searchIdVal:'',
|
|
|
nodeInfo: {
|
|
|
title: ''
|
|
|
},
|
|
|
+ curTeacher:{
|
|
|
+ name:'',
|
|
|
+ picture:'',
|
|
|
+ id:'',
|
|
|
+ job:''
|
|
|
+ },
|
|
|
teacherCol: [{
|
|
|
- title: '姓名',
|
|
|
+ title: this.$t('teachermgmt.table.th2'),
|
|
|
key: 'name',
|
|
|
slot: 'name'
|
|
|
},
|
|
|
{
|
|
|
- title: '醍摩豆ID',
|
|
|
+ title: this.$t('teachermgmt.table.th1'),
|
|
|
key: 'id'
|
|
|
},
|
|
|
{
|
|
|
- title: '权限',
|
|
|
- key: 'size'
|
|
|
+ title: this.$t('teachermgmt.table.th3'),
|
|
|
+ key: 'job',
|
|
|
+ render: (h, params) => {
|
|
|
+ if (typeof params.row.job === 'undefined' || params.row.job == null || params.row.job === '') {
|
|
|
+ return h('span', this.$t('teachermgmt.job.teacher'))
|
|
|
+ } else {
|
|
|
+ return h('span', params.row.job)
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
- title: '操作',
|
|
|
- slot:'action'
|
|
|
+ title: '是否共编',
|
|
|
+ key:'action',
|
|
|
+ slot: 'action'
|
|
|
}
|
|
|
],
|
|
|
- teacherList: []
|
|
|
+ teacherList: [],
|
|
|
+ originList:[]
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.isSchool = this.$route.name === 'syllabus'
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ /* 获取学校所有教师列表 */
|
|
|
getAllTeacher() {
|
|
|
this.$store.dispatch('user/getSchoolTeacher').then(
|
|
|
res => {
|
|
|
@@ -72,22 +113,52 @@
|
|
|
this.$Message.error('無法取得使用者資料')
|
|
|
} else {
|
|
|
this.teacherList = this.$store.state.user.schoolUserList.filter(i => i.status === 'join')
|
|
|
- console.log(this.teacherList)
|
|
|
+ this.originList = JSON.parse(JSON.stringify(this.teacherList))
|
|
|
}
|
|
|
},
|
|
|
err => {
|
|
|
this.$Message.error('user/setSchoolTeacher API error!')
|
|
|
}
|
|
|
)
|
|
|
+ },
|
|
|
+ /* 搜索词汇发生变化 */
|
|
|
+ onSearchChange(){
|
|
|
+ this.teacherList = this.originList.filter(i => i.name.indexOf(this.searchVal) > -1 || i.id.indexOf(this.searchVal) > -1)
|
|
|
+ },
|
|
|
+ /* 关闭搜索 */
|
|
|
+ onCloseSearch(){
|
|
|
+ this.searchVal = ''
|
|
|
+ this.teacherList = JSON.parse(JSON.stringify(this.originList))
|
|
|
+ },
|
|
|
+ /* 根据ID邮箱手机号搜索教师信息 */
|
|
|
+ onIdSearch(){
|
|
|
+ this.$store.dispatch('user/getUserFromCoreId', [this.searchIdVal]).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.curTeacher = res.data.length ? res.data[0] : null
|
|
|
+ } else {
|
|
|
+ this.$Message.error('user/getUserFromCoreId API error!')
|
|
|
+ }
|
|
|
+ this.hasSearchResult = true
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ this.$Message.error('user/getUserFromCoreId API error!')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ /* 重新搜索 */
|
|
|
+ onReSearch(){
|
|
|
+ this.searchIdVal = ''
|
|
|
+ this.curTeacher = null
|
|
|
+ this.hasSearchResult = false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getAllTeacher()
|
|
|
+ this.isSchool && this.getAllTeacher()
|
|
|
},
|
|
|
watch: {
|
|
|
node: {
|
|
|
handler(n, o) {
|
|
|
- console.log('xxxxxxx', n)
|
|
|
if (n) {
|
|
|
this.nodeInfo = n
|
|
|
}
|
|
|
@@ -100,12 +171,113 @@
|
|
|
|
|
|
<style lang="less" scoped src="./InviteTeacher.less"></style>
|
|
|
<style lang="less">
|
|
|
- .teacher-wrap {
|
|
|
- .dark-iview-table .ivu-table td {
|
|
|
- border-color: #494949;
|
|
|
- color: #c4c4c4 !important;
|
|
|
+ .it-container{
|
|
|
+ .teacher-wrap {
|
|
|
+ .dark-iview-table .ivu-table td {
|
|
|
+ border-color: #494949;
|
|
|
+ color: #c4c4c4 !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ .search-wrap{
|
|
|
+ .ivu-input-wrapper{
|
|
|
+ width: 300px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ .ivu-input{
|
|
|
+ background-color: #474747;
|
|
|
+ border-color: #515151;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ddd;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding-left: 10px;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-input-icon{
|
|
|
+ line-height: 75px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .search-id-wrap{
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #adadad;
|
|
|
+ .point{
|
|
|
+ color: #F1F1F1;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .id-search{
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ivu-input-wrapper{
|
|
|
+ width: 500px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ .ivu-input{
|
|
|
+ background-color: #474747;
|
|
|
+ border-color: #515151;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ddd;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding-left: 20px;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-input-icon{
|
|
|
+ line-height: 86px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-result-text{
|
|
|
+ margin-top: 60px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-result-wrap{
|
|
|
+ background-color: #4e4e4e;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .avatar , .fakeAvatar{
|
|
|
+ width: 60px !important;
|
|
|
+ height: 60px !important;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .t-name{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-none{
|
|
|
+ color: #ff4f80;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .re-search{
|
|
|
+ margin: 20px 0;
|
|
|
+ text-decoration: underline;
|
|
|
+ color: #FFFCFC;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
OnePsycho