dy-admin-manager/src/views/teamDetail/components/salaryList.vue

<template>
  <div>
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-date-picker v-model.trim="searchForm.date"
                        style='width:400;'
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="课程开始日期"
                        end-placeholder="课程结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search"
                   type="danger">搜索</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'
                         label="时间">
          <template slot-scope="scope">
            {{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(0, 5) : '' }}
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="classGroupName"
                         label="班级名称">
        </el-table-column>
        <el-table-column align='center'
                         prop="courseScheduleType"
                         label="课程类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.courseScheduleType |  coursesType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="teacherNum"
                         label="老师人数">
        </el-table-column>

        <el-table-column align='center'
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type='text'
                         v-if="permission('courseSchedule/queryTeacherSalary')"
                         @click="setCourseInfo(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>
    <el-dialog title="课酬调整"
               width="800px"
               :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-if="permission('courseSchedule/updateTeacherCoursesSalary')"
                         @click="resetTeacher(scope.row)">操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog width="500px"
                 title=""
                 :visible.sync="innerVisible"
                 append-to-body>
        <!-- 修改代码 -->
        <el-form :model="teacherMask"
                 :rules="teacherRules"
                 ref='teacherMask'>
          <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-item label="课时补贴"
                        prop="subsidy">
            <el-input style="width:180px"
                      v-model.trim="teacherMask.subsidy"></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 pagination from '@/components/Pagination/index'
import { getCourseList, getTeacherSalary } from '@/api/buildTeam'
import { updateTeacherCoursesSalary } from '@/api/teacherManager'
import { permission } from '@/utils/directivePage'
export default {
  name: 'tsalaryList',
  data () {
    return {
      dialogTableVisible: false,
      innerVisible: false,
      searchForm: {
        date: '' // 时间选择器返回的值
      },
      pickerOptions: {

        firstDayOfWeek: 1,

      }, // 时间选择器默认选项
      tableList: [], // table列表
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      searchLsit: [],
      activeTeacherList: [{ 1: 1 }],
      teacherMask: {
        salary: '',
        subsidy: '',
        radio: ''
      },
      courseScheduleId: '',
      teacherRules: {
        salary: [{ required: true, message: '请输入课程课酬', trigger: 'blur' }],
        subsidy: [{ required: true, message: '请输入课时补贴', trigger: 'blur' }],
        radio: [{ required: true, message: '请选择调整范围', trigger: 'blur' }]
      },
      tempSelectRow: {}, // 选中班级数据
    }



  },
  components: {
    pagination
  },
  mounted () {
    this.getList();
  },
  activated () {
    this.getList()
  },
  methods: {
    permission (str) {
      return permission(str)
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      this.teamid = this.$route.query.id;
      // searchForm.date
      if (!this.searchForm.date) {
        this.searchForm.date = []
      }

      let obj = {
        musicGroupId: this.teamid,
        startTime: this.searchForm.date[0] || null,
        endTime: this.searchForm.date[1] || null,
        page: this.rules.page, rows: this.rules.limit
      }
      getCourseList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      })
    },
    setCourseInfo (row) {
      this.tempSelectRow = row
      getTeacherSalary({ courseScheduleId: row.courseScheduleId }).then(res => {
        if (res.code == 200) {
          this.dialogTableVisible = true;
          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,
            subsidy: this.teacherMask.subsidy,
            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>
<style lang="scss" scope>
</style>