dy-admin-manager/src/views/teamDetail/componentCourse/teacherList.vue

<template>
  <div class="tableWrap">
    <el-table :data='tableList'
              :header-cell-style="{background:'#EDEEF0',color:'#444'}">
      <el-table-column align='center'
                       prop="teacherName"
                       width="150px"
                       label="老师姓名">
        <template slot-scope="scope">
          <div>
            <span>{{scope.row.teacherName}}</span><br/>
             <span style="color: #f56c6c">(<copy-text>{{scope.row.teacherId}}</copy-text>)</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="teacherRole"
                       label="老师类型">
        <template slot-scope="scope">
          <div>
            {{ scope.row.teacherRole|workType}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="teacherPhone"
                       label="签到时间">
        <template slot-scope="scope">
          <div>
            {{scope.row.signInTime | dayjsFormatMinute}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="teacherPhone"
                       label="签退时间">
        <template slot-scope="scope">
          <div>
            {{scope.row.signOutTime | dayjsFormatMinute}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="complaintsContent"
                       width="120"
                       label="考勤申诉内容">
        <template slot-scope="scope">
          <div v-if="scope.row.teacherAttendance">
            <overflow-text :text="scope.row.teacherAttendance.complaintsContent" width="100%">
              {{ scope.row.teacherAttendance.complaintsContent}}
            </overflow-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="complaintsTime"
                       width="160"
                       label="考勤申诉时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.teacherAttendance && scope.row.teacherAttendance.complaintsTime}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="complaintsStatus"
                       width="140"
                       label="考勤申诉状态">
        <template slot-scope="scope">
          <div v-if="scope.row.teacherAttendance">
            {{scope.row.teacherAttendance.complaintsStatus | complaintsStatusEnum}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="teacherPhone"
                       label="签到状态">
        <template slot-scope="scope">
          <div>{{ scope.row.signInStatus | attendanceType}}</div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="teacherPhone"
                       label="签退状态">
        <template slot-scope="scope">
          <div>{{ scope.row.signOutStatus | attendanceOutType}}</div>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       prop="signOutAttachments"
                       label="签退照片">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.teacherAttendance && scope.row.teacherAttendance.signOutAttachments"
            style="width: 60px; height: 60px"
            fit="cover"
            :src="scope.row.teacherAttendance.signOutAttachments"
            :previewSrcList="[scope.row.teacherAttendance.signOutAttachments]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align='center'
                       width="200px"
                       fixed="right"
                       label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text"
                       size="small"
                       v-permission="'teacherAttendance/updateTeacherAttendance'"
                       @click="mackAttendance(scope.row)">补考勤</el-button>
            <el-button type="text"
                       v-if="teachMode == 'OFFLINE'"
                       size="small"
                       @click="lookGPS(scope.row)">GPS定位</el-button>
            <el-button type="text"
                       size="small"
                       v-permission="'courseSchedule/queryTeacherSalary'"
                       @click="setCourseInfo(scope.row)">课酬调整</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="1000px"
               :visible.sync="gpsVisible"
               append-to-body>
      <gpsLoction v-if="gpsVisible"
                  :activeRow='activeRow' />
    </el-dialog>
    <!-- <el-dialog title="课酬调整"
               width="800px"
               append-to-body
               :visible.sync="dialogTableVisible">
      <el-table :data="activeTeacherList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="老师姓名"
                         prop="teacherName"></el-table-column>
        <el-table-column label="老师角色">
          <template slot-scope="scope">
            <div>
              {{ scope.row.teacherRole |workType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程课酬"
                         prop="expectSalary"></el-table-column> -->
        <!-- <el-table-column label="课时补贴"
                         prop="subsidy"></el-table-column> -->
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type='text'
                         v-permission="'courseSchedule/updateTeacherCoursesSalary'"
                         @click="resetTeacher(scope.row)">操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table> -->
      <el-dialog width="500px"
                 :title="activeTeacher&&(activeTeacher.teacherName + ` (${activeTeacher.teacherId})`)"
                 :visible.sync="innerVisible"
                 append-to-body>
        <!-- 修改代码 -->
        <el-form :model="teacherMask"
                 :rules="teacherRules"
                 ref='teacherMask'>
          <el-form-item label="原课程课酬"
                        prop="expectSalary">
            <span>{{activeTeacher && activeTeacher.expectSalary | moneyFormat}}</span>
          </el-form-item>
          <el-form-item label="调整范围"
                        prop="radio">
            <el-radio v-model.trim="teacherMask.radio"
                      label="all">之后剩余课次</el-radio>
            <el-radio v-model.trim="teacherMask.radio"
                      label="one">仅限本次</el-radio>
          </el-form-item>
          <el-form-item label="课程课酬"
                        prop="salary">
            <el-input style="width:180px"
                      v-model.trim="teacherMask.salary"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="resetSalary">确 定</el-button>
        </div>
      </el-dialog>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
import { updateTeacherAttendance, getCourseList, getTeacherSalary } from "@/api/buildTeam";
import { updateTeacherCoursesSalary } from '@/api/teacherManager'
import { getCourseTeachers } from "@/api/teacherManager";
import gpsLoction from "../componentCourse/gpsLocation";
export default {
  components: { gpsLoction },
  props: ['courseScheduleId', 'teachMode'],
  data () {
    return {
      tableList: [],
      gpsVisible: false,
      activeRow: null,
      activeTeacherList: [],
      dialogTableVisible: false,
      innerVisible: false,
      activeTeacher: null,
      teacherMask: {
        salary: '',
        subsidy: '',
        radio: ''
      },
      teacherRules: {
        salary: [{ required: true, message: '请输入课程课酬', trigger: 'blur' }],
        subsidy: [{ required: true, message: '请输入课时补贴', trigger: 'blur' }],
        radio: [{ required: true, message: '请选择调整范围', trigger: 'blur' }]
      },
    }
  },
  mounted () {
    this.init()
    console.log(this.teachMode)
  },
  activated () { },
  methods: {
    getList () {

      getCourseTeachers({ courseScheduleId: this.courseScheduleId }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data
        }
      })
    },
    init () {
      this.getList()
    },
    lookGPS (row) {
      this.activeRow = row;
      this.gpsVisible = true
    },
    mackAttendance (row) {

      this.$confirm('确定补考勤', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          teacherId: row.teacherId,
          courseScheduleId: this.courseScheduleId,
          signInStatus: 1,
          signOutStatus: 1
        };
        updateTeacherAttendance(params).then(res => {
          if (res.code == 200) {
            this.$message.success("补卡成功");
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        });

      }).catch(() => { })

    },
    setCourseInfo (row) {
      // this.tempSelectRow = row
      getTeacherSalary({ courseScheduleId: this.courseScheduleId }).then(res => {
        if (res.code == 200) {
          this.innerVisible = true;
          for (const item of res.data) {
            if (row.teacherId == item.teacherId) {
              this.activeTeacher = item
              break
            }
          }
          // this.courseScheduleId = row.courseScheduleId;
          // row.teachingTeachers
          // this.activeTeacherList = res.data;
        }
      })

    },
    resetTeacher (row) {
      this.innerVisible = true;
      this.activeTeacher = row;
    },
    resetSalary () {
      let that = this
      this.$refs['teacherMask'].validate(res => {
        if (res) {
          updateTeacherCoursesSalary({
            courseScheduleId: this.courseScheduleId,
            salary: this.teacherMask.salary,
            teacherId: this.activeTeacher.teacherId,
            scope: this.teacherMask.radio

          }).then(res => {
            if (res.code == 200) {
              this.$message.success('修改成功')
              this.teacherMask = {
                salary: '',
                subsidy: '',
                radio: ''
              }
              // this.dialogTableVisible = false;
              this.innerVisible = false;
              // that.setCourseInfo(this.tempSelectRow)
            }
          })
        } else {
          this.$message.error('请填写必要参数')
        }
      })

    }
  },
}
</script>