dy-admin-manager/src/views/teacherManager/teacherList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>老师列表
    </h2>
    <div class="m-core">
      <div class="newBand"
           v-permission="'/teacherOperationAdd'"
           @click="onTeacher('create')">老师新增</div>
      <!-- 搜索标题 -->
      <el-form :inline="true"
               class="searchForm"
               v-model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.search"
                    @keyup.enter.native='getList'
                    placeholder="老师姓名或电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.lockFlag"
                     clearable
                     filterable
                     placeholder="老师状态">
            <el-option v-for="item in teacherStatus"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.subjectId"
                     filterable
                     clearable
                     placeholder="专业技能">
            <el-option-group v-for="group in subjectList"
                             :key="group.label"
                             :label="group.label">
              <el-option v-for="item in group.options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.organId"
                     filterable
                     clearable
                     placeholder="请选择分部">
            <el-option v-for="item in branchList"
                       :key="item.id"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.jobNature"
                     filterable
                     clearable
                     placeholder="工作类型">
            <el-option v-for="item in jobNature"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.isProbationPeriod"
                     clearable
                     filterable
                     placeholder="人事状态">
            <el-option label="试用"
                       value="0"></el-option>
            <el-option label="正式"
                       value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search"
                     type="danger">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="id"
                           label="老师编号">
          </el-table-column>
          <el-table-column align='center'
                           prop="realName"
                           label="老师名称">
          </el-table-column>
          <el-table-column align='center'
                           prop="organName"
                           label="所属分部">
          </el-table-column>
          <el-table-column align='center'
                           label="老师状态">
            <template slot-scope="scope">
              {{ scope.row.lockFlag | teacherStatus }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="专业技能">
            <template slot-scope="scope">
              <span style="max-height: 68px;display: block;"
                    :title="scope.row.splitSubjectName">{{ scope.row.splitSubjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="phone"
                           label="联系电话">
          </el-table-column>
          <el-table-column align='center'
                           label="工作类型">
            <template slot-scope="scope">
              {{ scope.row.jobNature | jobNature }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="人事状态">
            <template slot-scope="scope">
              {{ scope.row.isProbationPeriod ? '正式' : '试用' }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="vipNum"
                           label="已开小课">
          </el-table-column>
          <el-table-column align='center'
                           label="试听课安排">
            <template slot-scope="scope">
              {{ scope.row.demoNum > 0 ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="操作">
            <template slot-scope="scope">
              <!--   let search = JSON.stringify(this.searchForm)
      let rules = JSON.stringify(this.pageInfo) -->
              <router-link style="color:#409EFF"
                           v-permission="'/teacherDetail'"
                           :to="{path:`/business/teacherDetail?teacherId=${scope.row.id}&teacherName=${scope.row.realName}`,query:{search:JSON.stringify(searchForm),rules:JSON.stringify(pageInfo)}}">查看</router-link>
              <el-button v-permission="'/teacherIperationUpdate'"
                         @click="onTeacher('update', scope.row)"
                         type="text">修改</el-button>
              <el-button v-permission="'employee/employeeOperate'"
                         @click="onStaffOperation('LOCK_UNLOCK', scope.row)"
                         type="text">{{ scope.row.lockFlag == 1 ? '解冻' : '冻结' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { teacherQueryPage } from '@/api/teacherManager'
import { employeeOperate } from '@/api/systemManage'
import { subjectListTree } from '@/api/specialSetting'
import { getEmployeeOrgan } from '@/api/buildTeam'
import { jobNature, teacherStatus } from '@/utils/searchArray'
import store from '@/store'
export default {
  name: 'teacherList',
  components: {
    pagination
  },
  data () {
    return {
      searchForm: {
        lockFlag: null,
        isProbationPeriod: null,
        jobNature: null,
        subjectId: null,
        organId: null,
        search: null // 老师姓名或电话
      },
      jobNature: jobNature, // 工作类型
      teacherStatus: teacherStatus, // 老师状态
      subjectList: [], // 声部列表
      branchList: [], // 分部列表
      tableList: [],
      // organId: store.getters.organ,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
    }
  },
  activated () {
    this.__init();
    this.getList();
  },
  mounted () {
    this.__init()
    this.getList()
  },
  methods: {
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    __init () {
      if (this.$route.query.search) {
        this.$route.query.search instanceof Object ? this.searchForm = this.$route.query.search : this.searchForm = JSON.parse(this.$route.query.search);
      }
      if (this.$route.query.rules) {
        this.$route.query.rules instanceof Object ? this.pageInfo = this.$route.query.rules : this.pageInfo = JSON.parse(this.$route.query.rules);
      }
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            this.branchList.push({
              label: item.name,
              value: item.id
            })
          })
        }
      })

      subjectListTree({
        delFlag: 0,
        rows: 9999
      }).then(res => {
        let result = res.data
        if (res.code == 200) {
          let tempArray = []
          result.rows.forEach((item, index) => {
            let subject = []
            item.subjects.forEach(s => {
              subject.push({
                value: s.id,
                label: s.name
              })
            })

            tempArray[index] = {
              label: item.name,
              options: subject
            }
          })
          this.subjectList = tempArray
        }
      })
      // this.getList();
    },
    onTeacher (type, row) {
      let search = JSON.stringify(this.searchForm)
      let rules = JSON.stringify(this.pageInfo)
      let params = {
        type: type,
        search,
        rules
      }
      if (row) {
        params.teacherId = row.id
      }
      let path = '/business/teacherOperation'
      if (type == 'update') {
        path = '/business/teacherOperationUpdate'
      }
      this.$router.push({
        path: path,
        query: params
      })
    },
    getList () {
      let params = this.searchForm
      // params.organId = this.organId
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      teacherQueryPage(params).then(res => {
        if (res.code == 200) {
          // console.log(res)
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    onStaffOperation (type, data) {
      let str = ''
      if (data.lockFlag != 1) {
        str = `是否冻结${data.realName}老师？`
      } else {
        str = `是否解冻${data.realName}老师？`
      }
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        employeeOperate({
          employeeId: data.id,
          operate: type
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('更改成功')
            this.roleStatus = false
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => { })
    },
    onReSet () {
      this.searchForm = {
        lockFlag: null,
        isProbationPeriod: null,
        jobNature: null,
        organId: null,
        subjectId: null,
        search: null
      }
    }
  }
}
</script>
<style lang="scss">
.el-button + .el-button {
  margin-left: 0;
}
</style>