dy-admin-manager/src/views/workBenchManager/payAppeal.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>课时申诉
    </h2>
    <div class="m-core">
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.search"
                    @keyup.enter.native="search"
                    placeholder='老师名称'></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.organId"
                     clearable
                     filterable
                     placeholder="请选择分部">
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.complaintsStatus"
                     clearable
                     filterable
                     placeholder="申诉状态">
            <el-option label="已拒绝"
                       :value="0"></el-option>
            <el-option label="已通过"
                       :value="1"></el-option>
            <el-option label="待处理"
                       :value="2"></el-option>
            <el-option label="已撤销"
                       :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="searchForm.timer"
                          style="width:400px;"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="课程开始日期"
                          end-placeholder="课程结束日期"
                          :picker-options="{
        firstDayOfWeek: 1
    }"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                     @click="search">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table style="width: 100%"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data="tableList">
          <el-table-column align="center"
                           prop="organName"
                           label="分部"></el-table-column>
          <el-table-column align="center"
                           prop="courseScheduleId"
                           label="课程编号"></el-table-column>
          <el-table-column align="center"
                           prop="courseScheduleName"
                           label="课程名称"></el-table-column>
          <el-table-column align="center"
                           width="180"
                           prop="courseScheduleTime"
                           label="课程时间">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.courseScheduleTime}} {{ scope.row.courseScheduleStartTime | timerForMinFormat }}-{{scope.row.courseScheduleEndTime | timerForMinFormat    }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="status"
                           label="签到状态">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.signInStatus | attendanceType  }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="status"
                           label="签退状态">
            <template slot-scope="scope">
              <div>
                <p>{{scope.row.signOutStatus | attendanceOutType  }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="teacherName"
                           label="老师名称"></el-table-column>
          <el-table-column align="center"
                           prop="studentId"
                           label="状态">
            <template slot-scope="scope">
              <div>
                {{scope.row.complaintsStatusEnum|complaintsStatusEnum}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="operatorName"
                           label="申诉处理者"></el-table-column>
          <el-table-column align="center"
                           label="操作">
            <!-- teacherAttendance/agreeTeacherAttendanceComplaints -->
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="permission('teacherAttendance/operation')"
                           @click="lookDetail(scope.row)">操作</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="课时申述"
               :visible.sync="dialogVisible"
               width="400px">
      <div>
        <div class="titleP">
          <p>签到时间:{{visibleForm.signInTime}}</p>
          <p>签退时间:{{visibleForm.signOutTime}}</p>
        </div>
        <el-form ref="visibleForm"
                 :model="visibleForm"
                 class="visibleForm">
          <el-form-item label="申诉内容"
                        :rules="[{ required: true, message: '请填写申诉内容',trigger: 'blur'}]"
                        prop="complaintsContent">
            <el-input type="textarea"
                      :rows="5"
                      :disabled="visibleForm.complaintsStatusEnum !='2'"
                      v-model.trim="visibleForm.complaintsContent"></el-input>
          </el-form-item>
          <el-form-item label="处理意见"
                        :rules="[{ required: true, message: '请填写处理意见',trigger: 'blur'}]"
                        prop="disposeContent">
            <el-input type="textarea"
                      :rows="5"
                      :disabled="visibleForm.complaintsStatusEnum !='2'"
                      v-model.trim="visibleForm.disposeContent"></el-input>
          </el-form-item>
          <el-form-item label="请选择需要补正的状态"
                        v-if="visibleForm.complaintsStatusEnum =='2'">
            <br />
            <el-checkbox v-model="visibleForm.reSignInStatus">签到状态</el-checkbox>
            <el-checkbox v-model="visibleForm.reSignOutStatus">签退状态</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer"
           v-if="visibleForm.complaintsStatusEnum =='2'">
        <el-button v-permission="'teacherAttendance/rejectTeacherAttendanceComplaints'"
                   @click="subreset('DENIED')">拒绝</el-button>
        <el-button v-permission="'teacherAttendance/agreeTeacherAttendanceComplaints'"
                   type="primary"
                   @click="subreset('AGREED')">同意</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { getEmployeeOrgan } from "@/api/buildTeam";
import { permission } from '@/utils/directivePage'
import {
  queryTeacherAttendanceComplaints,
  agreeTeacherAttendanceComplaints,
  rejectTeacherAttendanceComplaints
} from "@/api/journal";
export default {
  components: { pagination },
  data () {
    return {
      searchForm: {
        search: null,
        organId: null,
        complaintsStatus: null,
        timer: []
      },
      teacherList: [],
      tableList: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      dialogVisible: false,
      visibleForm: {
        complaintsContent: null,
        complaintsStatusEnum: null,
        disposeContent: null,
        signInStatus: null,
        signOutStatus: null,
        teacherAttendanceId: null,
        reSignInStatus: null,
        reSignOutStatus: null
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    // 获取分部

    this.init();


  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.getList()
    },
    permission (str) {
      return permission(str)
    },
    getList () {
      let obj = {}
      Object.assign(obj, this.searchForm)
      if (obj.timer && obj.timer.length > 0) {
        obj.courseScheduleStartDate = obj.timer[0]
        obj.courseScheduleEndDate = obj.timer[1]
      }
      obj.rows = this.rules.limit;
      obj.page = this.rules.page;
      delete obj.timer
      queryTeacherAttendanceComplaints(obj).then(res => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows
        }
      })
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReSet () {
      this.searchForm = {
        search: null,
        organId: null,
        complaintsStatus: null,
        timer: []
      }
      this.search()
    },
    subreset (str) {
      if (str == 'AGREED') {
        // 同意
        this.$refs['visibleForm'].validate(flag => {
          if (flag) {
            let obj = {}
            if (!this.visibleForm.reSignInStatus && !this.visibleForm.reSignOutStatus) {
              this.$message.error('请修正签到状态或签退状态')
              return
            }
            //visibleForm.reSignInStatus
            this.visibleForm.reSignInStatus ? obj.signInStatus = 1 : null
            this.visibleForm.reSignOutStatus ? obj.signOutStatus = 1 : null
            obj.content = this.visibleForm.disposeContent
            obj.teacherAttendanceId = this.visibleForm.teacherAttendanceId;
            agreeTeacherAttendanceComplaints(obj).then(res => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success('同意申诉成功')
                this.getList();
              }
            })
          }
        })

      } else {
        // 拒绝
        this.$refs['visibleForm'].validate(flag => {
          if (flag) {
            let obj = {}
            obj.content = this.visibleForm.disposeContent
            obj.teacherAttendanceId = this.visibleForm.teacherAttendanceId;
            rejectTeacherAttendanceComplaints(obj).then(res => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success('拒绝申诉成功')
                this.getList();
              }
            })
          }
        })

      }
    },
    lookDetail (row) {
      this.visibleForm = {
        complaintsContent: row.complaintsContent,
        complaintsStatusEnum: row.complaintsStatusEnum,
        disposeContent: row.disposeContent,
        signInStatus: row.signInStatus,
        signOutStatus: row.signOutStatus,
        signInTime: row.signInTime,
        signOutTime: row.signOutTime,
        teacherAttendanceId: row.teacherAttendanceId,
        reSignInStatus: null,
        reSignOutStatus: null
      }
      this.dialogVisible = true
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        this.visibleForm = {
          complaintsContent: null,
          complaintsStatusEnum: null,
          disposeContent: null,
          signInStatus: null,
          signOutStatus: null,
          teacherAttendanceId: null,
          reSignInStatus: null,
          reSignOutStatus: null
        }
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.titleP {
  line-height: 30px;
}
</style>