dy-admin-manager/src/views/teacherManager/teacherDetail/components/settlement.vue

<template>
  <div>
    <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>未结算总额:<span>{{ teacherNoPay }}</span></p>
        </div>
      </div>
    </div>
    <el-form :inline="true"
             :model="searchForm">
      <el-form-item>
        <el-date-picker v-model="courseDate"
                        style="width: 400px;"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        @change="searchCourseDate"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.courseScheduleType"
                   filterable
                   clearable
                   placeholder="课程类型">
          <el-option v-for="(item, index) in courseType"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.signInStatus"
                   clearable
                   filterable
                   placeholder="考勤状态">
          <el-option v-for="(item, index) in attendance"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></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 label="上课时间"
                         width="200">
          <template slot-scope="scope">
            {{ scope.row.classDate + ' ' + scope.row.classTime }}
          </template>
        </el-table-column>
        <el-table-column label="班级名称"
                         prop="className">
        </el-table-column>
        <el-table-column label="课程类型">
          <template slot-scope="scope">
            {{ scope.row.courseScheduleType | coursesType }}
          </template>
        </el-table-column>
        <el-table-column label="上课类型">
          <template slot-scope="scope">
            {{ scope.row.teacherRole | workType }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="当前课次"
                         prop="currentClassTimes">
          <template slot-scope="scope">
            <div>
              {{  scope.row.currentClassTimes + '/' +scope.row.totalClassTimes  }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="签到">
          <template slot-scope="scope">
            {{ scope.row.signInStatus | attendanceType }}
          </template>
        </el-table-column>
        <el-table-column label="签退">
          <template slot-scope="scope">
            {{ scope.row.signOutStatus | attendanceOutType }}
          </template>
        </el-table-column>
        <el-table-column label="预计发放"
                         prop="expectSalary">
        </el-table-column>
        <el-table-column label="实际发放"
                         prop="actualSalary">
        </el-table-column>
        <el-table-column label="课时补贴"
                         prop="subsidy">
        </el-table-column>
        <el-table-column label="结算状态">
          <template slot-scope="scope">
            {{ scope.row.settlementTime ? '已结算' : '未结算' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope"
                    v-if="scope.row.courseScheduleType != 'VIP' && !scope.row.settlementTime">
            <el-button v-if="scope.row.courseScheduleType != 'DEMO'"
                       v-permission="{child: 'courseSchedule/updateTeacherCoursesSalary', parent: 'settlement/updateTeacherCoursesSalary'}"
                       @click="onUpdate(scope.row)"
                       type="text">课酬调整</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>
    <el-dialog title="课酬调整"
               :visible.sync="settlementStatus"
               @close="onFormClose('ruleForm')"
               width="500px">
      <el-form :model="form"
               :rules="rules"
               ref="ruleForm">
        <el-form-item label="预计发放"
                      :label-width="formLabelWidth">
          <el-input v-model="form.expectSalary"
                    disabled
                    @mousewheel.native.prevent
                    type="number"></el-input>
        </el-form-item>
        <el-form-item label="补贴"
                      :label-width="formLabelWidth">
          <el-input v-model="form.subsidys"
                    disabled
                    @mousewheel.native.prevent
                    type="number"></el-input>
        </el-form-item>
        <el-form-item label="课酬调整为"
                      prop="salary"
                      :label-width="formLabelWidth">
          <el-input v-model="form.salary"
                    type="number"
                    @mousewheel.native.prevent
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课时补贴调整为"
                      prop="subsidy"
                      :label-width="formLabelWidth">
          <el-input v-model="form.subsidy"
                    type="number"
                    @mousewheel.native.prevent
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="调整范围"
                      prop="scope"
                      :label-width="formLabelWidth">
          <el-radio-group v-model="form.scope">
            <el-radio label="one">仅限本次</el-radio>
            <el-radio label="all">之后剩余课次</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="settlementStatus = false">取 消</el-button>
        <el-button @click="onSettlementSubmit('ruleForm')"
                   type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { teacherQueryCloses, sumTeacherNoPay, updateTeacherCoursesSalary } from '@/api/teacherManager'
import pagination from '@/components/Pagination/index'
import store from '@/store'
import { courseType, attendance } from '@/utils/searchArray'
export default {
  name: 'settlement',
  components: {
    pagination
  },
  data () {
    return {
      teacherNoPay: 0,
      courseDate: null,
      searchForm: {
        courseStartDate: null,
        courseEndDate: null,
        courseScheduleType: null,
        signInStatus: null,
      },
      courseType: courseType,
      attendance: attendance,
      organId: null,
      teacherId: this.$route.query.teacherId,
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      formLabelWidth: '120px',
      settlementStatus: false,
      form: {
        courseScheduleId: null,
        salary: null,
        subsidy: null,
        scope: 'one',
        expectSalary: null,
        subsidys: null
      },
      rules: {
        salary: [{ required: true, message: '请输入课酬', trigger: 'blur' }],
        subsidy: [{ required: true, message: '请输入课时补贴', trigger: 'blur' }],
        scope: [{ required: true, message: '请选择调整范围', trigger: 'change' }],
      }
    }
  },
  mounted () {
    this.getList()
    sumTeacherNoPay({ teacherId: this.teacherId }).then(res => {
      if (res.code == 200) {
        this.teacherNoPay = res.data
      }
    })
  },
  methods: {
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    onSettlementSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return
        this.form.teacherId = this.teacherId
        updateTeacherCoursesSalary(this.form).then(res => {
          this.messageTips('修改', res)
        })
      })
    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success(title + '成功')
        this.settlementStatus = false
        this.getList()
      } else {
        this.$message.error(res.msg)
      }
    },
    getList () {
      let params = this.searchForm
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      params.teacherId = this.teacherId
      teacherQueryCloses(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    searchCourseDate (value) {
      if (value) {
        this.searchForm.courseStartDate = value[0]
        this.searchForm.courseEndDate = value[1]
      } else {
        this.searchForm.courseStartDate = null
        this.searchForm.courseEndDate = null
      }
    },
    onFormClose (formName) { // 关闭弹窗重置验证
      this.$refs[formName].resetFields()
    },
    onUpdate (row) {
      this.form.courseScheduleId = row.courseScheduleId
      this.settlementStatus = true
      this.form.expectSalary = row.expectSalary
      this.form.subsidys = row.subsidy
    },
    onReSet () {
      this.courseDate = null
      this.searchForm = {
        courseStartDate: null,
        courseEndDate: null,
        courseScheduleType: null,
        signInStatus: null
      }
      this.getList();
    }
  }
}
</script>
<style lang="scss" scope>
</style>