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 }}-{{
                scope.row.teacherRole | workType
              }}</span
            ><br />
            <span
              >(<copy-text>{{ scope.row.teacherId }}</copy-text
              >)</span
            ><!-- style="color: #f56c6c"-->
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="teacherRole" label="老师类型">
        <template slot-scope="scope">
          <div>

          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        prop="teacherPhone"
        label="签到签退"
        width="200px"
      >
        <template slot-scope="scope" v-if="courseStatus != 'NOT_START'">
          <div>
            {{ scope.row.signInTime | dayjsFormatMinute }}
            (<span :class="scope.row.signInStatus == 1 ? 'green' : 'red'">{{
              scope.row.signInStatus | attendanceType
            }}</span
            >) -
            {{ scope.row.signOutTime | dayjsFormatMinute }}
            (<span :class="scope.row.signOutStatus == 1 ? 'green' : 'red'">{{
              scope.row.signOutStatus | attendanceOutType
            }}</span
            >)
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="teacherPhone" label="签退时间">
        <template slot-scope="scope">
          <div>

          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="teacherPhone" label="考勤状态">
        <template slot-scope="scope">
          <div v-if="courseStatus != 'NOT_START'">
            {{ scope.row.signInStatus | attendanceType }} <br />
            {{ scope.row.signOutStatus | attendanceOutType }}
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="teacherPhone" label="签退状态">
        <template slot-scope="scope">
          <div v-if="courseStatus != 'NOT_START'">{{ scope.row.signOutStatus | attendanceOutType}}</div>
        </template>
      </el-table-column> -->

      <el-table-column
        align="center"
        prop="complaintsTime"
        width="160"
        label="申诉状态/时间"
      >
        <template slot-scope="scope">
          <div>
            <p>
              <span
                :class="
                  complaintscolor(scope.row.teacherAttendance.complaintsStatus)
                "
              >
                {{
                  scope.row.teacherAttendance.complaintsStatus
                    | complaintsStatusEnum
                }}
              </span>
            </p>
            <p>
              {{
                scope.row.teacherAttendance &&
                scope.row.teacherAttendance.complaintsTime
              }}
            </p>
          </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="complaintsStatus"
        width="120"
        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="disposeContent" label="处理意见">
        <template slot-scope="scope">
          <overflow-text
            width="100%"
            :text="
              scope.row.teacherAttendance &&
              scope.row.teacherAttendance.disposeContent
            "
          ></overflow-text>
        </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.split(',')[0]"
            :previewSrcList="
              scope.row.teacherAttendance.signOutAttachments.split(',')
            "
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" fixed="right" label="操作">
        <template slot-scope="scope">
          <div>
            <auth
              auths="teacherAttendance/updateTeacherAttendance/3485"
              v-if="courseStatus != 'NOT_START'"
            >
              <el-button
                type="text"
                size="small"
                @click="mackAttendance(scope.row)"
                >补考勤</el-button
              >
            </auth>

            <el-button
              type="text"
              v-if="teachMode == 'OFFLINE' && courseStatus != 'NOT_START'"
              size="small"
              @click="lookGPS(scope.row)"
              >GPS定位</el-button
            >
            <auth
              auths="courseSchedule/queryTeacherSalary"
              v-if="!scope.row.settlementTime"
            >
              <el-button
                type="text"
                size="small"
                @click="setCourseInfo(scope.row)"
                >课酬调剂</el-button
              >
            </auth>
            <auth
              auths="teacherAttendance/update?page=teamCourseList"
              v-if="courseStatus != 'NOT_START'"
            >
              <el-button
                size="small"
                type="text"
                @click="hand(scope.row)"
                v-if="
                  (scope.row.signInStatus != 1 ||
                    scope.row.signOutStatus != 1) &&
                  courseStatus != 'NOT_START'
                "
                >处理意见</el-button
              >
            </auth>
            <auth
              auths="teacherAttendance/repealComplaints/4300"
              v-if="courseStatus != 'NOT_START'"
            >
              <el-button
                type="text"
                size="small"
                v-if="
                  scope.row.jobNature != 'FULL_TIME' &&
                  scope.row.teacherAttendance.complaintsStatus == 2
                "
                @click="unappeal(scope.row)"
                >撤销申诉</el-button
              >
            </auth>
            <auth
              auths="teacherAttendance/addComplaints/4299"
              v-if="courseStatus != 'NOT_START'"
            >
              <el-button
                size="small"
                v-if="
                  scope.row.jobNature != 'FULL_TIME' &&
                  (scope.row.teacherAttendance.complaintsStatus == null ||
                    scope.row.teacherAttendance.complaintsStatus == 3)
                "
                type="text"
                @click="appeal(scope.row)"
                >考勤申诉</el-button
              >
            </auth>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="1000px"
      title="GPS定位"
      :visible.sync="gpsVisible"
      append-to-body
    >
      <gpsLoction v-if="gpsVisible" :activeRow="activeRow" />
    </el-dialog>
    <el-dialog
      title="处理意见"
      width="400px"
      :visible.sync="handVisible"
      append-to-body
    >
      <hand
        v-if="handVisible && detail"
        :detail="detail"
        @close="handVisible = false"
        @submited="getList"
      />
    </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"
        :inline="true"
        :rules="teacherRules"
         @submit.native.prevent
        ref="teacherMask"
      >
        <el-form-item label="课程课酬" prop="expectSalary">
          <span>{{
            activeTeacher && activeTeacher.expectSalary | moneyFormat
          }}</span>
        </el-form-item>
        <el-form-item label="课程补贴" prop="expectSalary">
          <span>{{
            activeTeacher && activeTeacher.subsidy | moneyFormat
          }}</span>
        </el-form-item>
        <el-form-item label="总课酬" prop="expectSalary">
          <span>{{
            ((activeTeacher && activeTeacher.expectSalary) +
              (activeTeacher && activeTeacher.subsidy))
              | moneyFormat
          }}</span>
        </el-form-item>
        <br />
        <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>
        <br />
        <el-form-item label="课程补贴" prop="subsidy">
          <el-input-number
          class="number-input"
            :controls="false"
            :min="activeTeacher&&activeTeacher.expectSalary?(0-activeTeacher.expectSalary):0"
            style="width: 180px;"
            v-model.number="teacherMask.subsidy"
          ></el-input-number>
        </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
      title="申诉"
      width="400px"
      :visible.sync="appealVisible"
      append-to-body
    >
      <appeal
        v-if="appealVisible && detail"
        :detail="detail"
        @close="appealVisible = false"
        @submited="getList"
      />
    </el-dialog>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
import { updateTeacherAttendance, getTeacherSalary } from "@/api/buildTeam";
import { updateTeacherCoursesSalary } from "@/api/teacherManager";
import { getCourseTeachers } from "@/api/teacherManager";
import gpsLoction from "../componentCourse/gpsLocation";
import appeal from "@/views/recodeManager/modals/appeal";
import { repealComplaints } from "@/views/recodeManager/api";
import hand from "@/views/recodeManager/modals/hand";
export default {
  components: { gpsLoction, hand, appeal },
  props: ["courseScheduleId", "teachMode", "courseStatus"],
  data() {
    return {
      appealVisible: false,
      tableList: [],
      gpsVisible: false,
      activeRow: null,
      activeTeacherList: [],
      dialogTableVisible: false,
      innerVisible: false,
      activeTeacher: null,
      handVisible: null,
      detail: null,
      teacherMask: {
        subsidy: "",
        subsidy: "",
        radio: "one",
      },
      teacherRules: {
        subsidy: [
          { required: true, message: "请输入课程补贴", trigger: "blur" },
        ],
        subsidy: [
          { required: true, message: "请输入课时补贴", trigger: "blur" },
        ],
        radio: [{ required: true, message: "请选择调整范围", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.init();
    // console.log(this.teachMode, this.courseStatus)
  },
  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;
    },
    hand(row) {
      this.detail = row;
      this.handVisible = 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();
              this.$emit("syncTeacherAttend");
            } 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;
                this.teacherMask.subsidy = item.subsidy;
                break;
              }
            }
            // this.courseScheduleId = row.courseScheduleId;
            // row.teachingTeachers
            // this.activeTeacherList = res.data;
          }
        }
      );
    },
    resetTeacher(row) {
      this.innerVisible = true;
      this.activeTeacher = row;
    },
    complaintscolor(status) {
      /**
       *    0: "已拒绝",
    1: "已通过",
    2: "待处理",
    3: "已撤销",
       */
      if (status == 0 || status == 2) {
        return "red";
      } else if (status == 1) {
        return "green";
      } else {
        return "";
      }
    },
    resetSalary() {
      let that = this;
      this.$refs["teacherMask"].validate((res) => {
        if (res) {
          updateTeacherCoursesSalary({
            courseScheduleId: this.courseScheduleId,
            subsidy: this.teacherMask.subsidy,
            teacherId: this.activeTeacher.teacherId,
            scope: this.teacherMask.radio,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.teacherMask = {
                subsidy: "",
                subsidy: "",
                radio: "one",
              };
              // this.dialogTableVisible = false;
              this.innerVisible = false;
              // that.setCourseInfo(this.tempSelectRow)
            }
          });
        } else {
          this.$message.error("请填写必要参数");
        }
      });
    },
    appeal(row) {
      this.appealVisible = true;
      this.detail = row;
      this.detail.courseScheduleId = row.teacherAttendance?.courseScheduleId;
    },
    async unappeal(row) {
      try {
        await this.$confirm("是否确认撤销申诉?", "提示", {
          type: "warning",
        });
        await repealComplaints({
          courseScheduleId: row.teacherAttendance.courseScheduleId,
          userId: row.teacherId,
        });
        this.$message.success("撤销成功");
        this.getList();
      } catch (error) {}
    },
  },
};
</script>
<style lang="scss" scoped>
.red {
  color: red;
}
.green {
  color: #14928a;
}
.orgin {
  color: #e6a23c;
}
.number-input{
  /deep/ .el-input__inner {
    text-align: left;
  }
}
</style>