dy-admin-manager/src/views/teacherManager/teacherOperation/components/salarySet.vue

<template>
  <div class="salarySet">
    <!-- <h4>单次课次参考时长：30min</h4> -->
    <div class="tableList">
      <div class="left">
        <el-table :data="teamTable"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="乐团课课酬课时结算">
            <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
          </el-table-column>
          <!-- <el-table-column label="自定义课酬-主教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.mainTeacher30MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/人</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/30分钟</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="自定义课酬-助教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.assistantTeacher30MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/人</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/30分钟</template>
              </el-input>
            </template>
          </el-table-column> -->
          <el-table-column label="标准课酬-主教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent

                        v-model.trim="scope.row.mainTeacher90MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/人</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/90分钟</template>
                <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="标准课酬-助教">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent

                        v-model.trim="scope.row.assistantTeacher90MinSalary"
                        placeholder="请输入课酬">
                <template slot="append"
                          v-if="scope.row.courseScheduleType == 'HIGH'">元/人</template>
                <template slot="append"
                          v-else-if="scope.row.courseScheduleType == 'CLASSROOM'">元/40分钟</template>
                <template slot="append"
                          v-else>元/90分钟</template>
                <!-- <template slot="append">元/{{ (scope.row.courseScheduleType == 'HIGH' || scope.row.courseScheduleType == 'CLASSROOM') ? 45 : 90 }}分钟</template> -->
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="teamSmallTable"
                  style=" margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="">
            <template slot-scope="scope">{{ scope.row.courseScheduleType | coursesType }}</template>
          </el-table-column>
          <el-table-column label="1V1">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v1"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V2">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v2"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V3">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v3"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V4">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v4"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="1V5">
            <template slot-scope="scope">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.v5"
                        placeholder="请输入课酬">
                <template slot="append">元/节</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="vipTable"
                  style="width: 70%; margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="VIP课课酬参考值"
                           prop="vipGroupCategoryName"></el-table-column>
          <!-- <el-table-column label="线上课">
            <template slot-scope="scope">
              <el-input
                type="number"
                @mousewheel.native.prevent
                v-model.trim="scope.row.onlineClassesSalary"
                placeholder="请输入内容"
              >
                <template slot="append">元/45分钟</template>
              </el-input>
            </template>
          </el-table-column> -->
          <el-table-column label="">
            <template slot-scope="scope">
              <div>
                <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.offlineClassesSalary"
                        placeholder="请输入内容">
                <template slot="append"> 元/节</template>
                <!-- <template slot="append" v-else>节/人</template>  v-if="scope.row.musicTheory" -->
              </el-input>
              </div>

            </template>
          </el-table-column>
        </el-table>
        <el-table :data="accompanyTable"
                  style="width: 35%; margin-top: 15px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="网管课">
            <template slot-scope="scope">
              <el-input type="number"
                        style="width:195px"
                        @mousewheel.native.prevent
                        v-model.trim="scope.row.mainTeacherSalary">
                <template slot="append">元/{{scope.row.minutes}}分钟</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-form style="margin-top: 20px;" ref="salaryForm" :model="updateForm" :rules="rules">
          <el-form-item label="是否结算课酬" label-width="120px" prop="isSettlementSalary" :rules="[{ required: true, message: '请选择是否结算课酬', trigger: 'change'}]">
              <el-select v-model.trim="updateForm.isSettlementSalary" style="width: 220px !important;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            <div style="display: inline; color: red; padding-left: 10px;">说明：老师是否结算课酬；</div>
          </el-form-item>
          <el-form-item label="生效日期" label-width="120px" prop="startDate" :rules="[{ required: true, message: '请选择生效日期', trigger: 'change'}]">
            <el-date-picker v-model.trim="updateForm.startDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="选择日期"></el-date-picker>
            <div style="display: inline; color: red; padding-left: 10px;">说明：本次调整只对生效日期之后（包含当天）且未结算的课程生效；</div>
          </el-form-item>

        </el-form>

        <!--  v-permission="pageType == 'create' ? {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherAdd/batchUpset'} : {child: 'teacherDefaultMusicGroupSalary/batchUpset', parent: 'teacherUpdate/batchUpset'}" -->
        <div style="padding-top: 10px;">
          <auth :auths="pageType == 'create' ? ['/teacherOperationAdd', 'teacherDefaultCreateSave'] : ['/teacherOperationUpdate', 'teacherDefaultUpdateSave']" mulit>
            <el-button @click="onSave()" type="primary">保存</el-button>
          </auth>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  vipGroupSalaryList,
  vipGroupSalarySet,
  teacherSalaryList,
  teacherSalaryBatchUpset,
  teacherDefaultPracticeGroupSalary,
  PracticeGroupSalaryUpdate,
  teacherGet,
  teacherUpdate1
} from "@/api/teacherManager";
import { sysConfigList } from "@/api/generalSettings";
import { findTeacherDefaultSalary } from "@/api/vipSeting";
let nowTime = new Date();
let checkTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();
export default {
  props: ["teacherId"],
  name: "salarySet",
  data () {
    return {
      pageType: this.$route.query.type, // 页面类型
      // teacherId: this.teacherId ? this.teacherId : this.$route.query.teacherId,
      teamTable: [
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "SINGLE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "MIX",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "COMPREHENSIVE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "TRAINING_SINGLE",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "TRAINING_MIX",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "HIGH",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          courseScheduleType: "CLASSROOM",
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        }
      ],
      // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
      // userId: this.teacherId
      teamSmallTable: [
        {
          courseScheduleType: "HIGH_ONLINE",
          // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
          v1: 0,
          v2: 0,
          v3: 0,
          v4: 0,
          v5: 0,
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        },
        {
          courseScheduleType: "MUSIC_NETWORK",
          // salaryRuleJson: { 3: 0, 4: 0, 5: 0 },
          v1: 0,
          v2: 0,
          v3: 0,
          v4: 0,
          v5: 0,
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: this.teacherId
        }
      ],
      vipTable: [],
      musicGroupTable: [],
      ruleList: [],
      vipList: [],
      updateForm: {
        startDate: null,
        isSettlementSalary: 1,
      },
      rules: {},
      accompanyTable: [
        {
          assistantTeacherSalary: 30,
          minutes: 25,
          userId: this.teacherId,
          mainTeacherSalary: 0
        }
      ],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        firstDayOfWeek: 1
      }
    };
  },
  created () { },
  mounted () {
    // this.pageType = this.$route.query.type;
    this.__init();
  },
  // activated () {
  //   this.pageType = this.$route.query.type;
  //   this.__init();
  // },
  methods: {
    __init () {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      teacherGet({ teacherId: this.teacherId }).then((res) => {
          if (res.code == 200) {
            let result = res.data;
            this.updateForm.isSettlementSalary = result.isSettlementSalary ? 1 : 0
          }
        });

      // 获取课程形态 设置vip课酬
      findTeacherDefaultSalary({ userId: this.teacherId }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          let vipData = [];
          res.data.forEach(item => {
            vipData.push({
              offlineClassesSalary: null,
              onlineClassesSalary: null,
              vipGroupCategoryId: item.id,
              vipGroupCategoryName: item.name,
              userId: this.teacherId,
               musicTheory:item.musicTheory
            });
          });
          // VIP课列表
          vipGroupSalaryList({
            rows: 9999,
            page: 1,
            search: this.teacherId
          }).then(res => {
            if (res.code == 200) {
              let rows = res.data.rows;
              this.vipListCompare(vipData, rows);
            }
          });
        }
      });
      // 乐团
      teacherSalaryList({
        rows: 9999,
        page: 1,
        teacherId: this.teacherId
        // settlementType: 'FIXED_SALARY'
      }).then(res => {
        if (res.code == 200) {
          // this.teamTable = res.data.rows
          let rows = res.data.rows;
          this.teacherSalaryMoney(rows);
        }
      });
      // 网管课
      teacherDefaultPracticeGroupSalary({ teacherId: this.teacherId }).then(
        res => {
          if (res.code == 200 && res.data.length > 0) {
            this.accompanyTable = res.data;
          }
        }
      );
    },
    vipListCompare (vipData, rows) {
      // vip 做对比
      if (!rows) {
        // 判断是否有数据
        this.vipTable = vipData;
        return;
      }
      let result = [];
      vipData.forEach(item => {
        rows.forEach(c => {
          if (item.vipGroupCategoryId == c.vipGroupCategoryId) {
            item.checked = true;
            result.push({
              vipGroupCategoryId: c.vipGroupCategoryId,
              offlineClassesSalary: c.offlineClassesSalary,
              onlineClassesSalary: c.onlineClassesSalary,
              vipGroupCategoryName: c.vipGroupCategoryName,
              userId: c.userId,
              musicTheory:c.musicTheory
            });
          }
        });
      });
      if (result.length > 0) {
        vipData.forEach(item => {
          if (!item.checked) {
            result.push(item);
          }
        });
      } else {
        result = vipData;
      }
      this.vipTable = result;
    },

    teacherSalaryMoney (rows) {
      // 判断是否有数据
      if (!rows || rows.length <= 0) return;
      let teamTable = this.teamTable;
      let result = [];
      teamTable.forEach(item => {
        rows.forEach(c => {
          if (item.courseScheduleType == c.courseScheduleType) {
            item.checked = true;
            result.push({
              mainTeacher30MinSalary: c.mainTeacher30MinSalary,
              mainTeacher90MinSalary: c.mainTeacher90MinSalary,
              assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
              assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
              courseScheduleType: c.courseScheduleType,
              userId: this.teacherId
            });
          }
        });
      });
      if (result.length > 0) {
        teamTable.forEach(item => {
          if (!item.checked) {
            result.push(item);
          }
        });
      } else {
        result = teamTable;
      }
      this.teamTable = result;

      let smallResult = []
      let teamSmallTable = this.teamSmallTable
      teamSmallTable.forEach(item => {
        rows.forEach(c => {
          if (item.courseScheduleType == c.courseScheduleType) {
            item.checked = true;
            let tempJson = c.salaryRuleJson ? JSON.parse(c.salaryRuleJson) : { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }
            // console.log(tempJson)
            smallResult.push({
              mainTeacher30MinSalary: c.mainTeacher30MinSalary,
              mainTeacher90MinSalary: c.mainTeacher90MinSalary,
              assistantTeacher30MinSalary: c.assistantTeacher30MinSalary,
              assistantTeacher90MinSalary: c.assistantTeacher90MinSalary,
              salaryRuleJson: tempJson,
              v1: tempJson[1] ? tempJson[1] : 0,
              v2: tempJson[2] ? tempJson[2] : 0,
              v3: tempJson[3] ? tempJson[3] : 0,
              v4: tempJson[4] ? tempJson[4] : 0,
              v5: tempJson[5] ? tempJson[5] : 0,
              courseScheduleType: c.courseScheduleType,
              userId: this.teacherId
            });
          }
        });
      })

      if (smallResult.length > 0) {
        teamSmallTable.forEach(item => {
          if (!item.checked) {
            smallResult.push(item);
          }
        });
      } else {
        smallResult = teamSmallTable;
      }
      this.teamSmallTable = smallResult;
    },
    onSave () {
      let teamTable = this.teamTable;
      let checkStatus = true;
      teamTable.forEach(item => {
        if (
          item.assistantTeacher30MinSalary < 0 ||
          item.assistantTeacher90MinSalary < 0 ||
          item.mainTeacher30MinSalary < 0 ||
          item.mainTeacher90MinSalary < 0
        ) {
          this.$message.error("输入课酬不能为负数");
          checkStatus = false;
          return;
        }
      });
      let temps = []
      this.teamSmallTable.forEach(item => {
        if (item.v1 < 0 || item.v2 < 0 || item.v3 < 0 || item.v4 < 0 || item.v5 < 0) {
          this.$message.error("输入课酬不能为负数");
          checkStatus = false;
          return;
        }
        temps.push({
          courseScheduleType: item.courseScheduleType,
          salaryRuleJson: JSON.stringify({ 1: Number(item.v1), 2: Number(item.v2), 3: Number(item.v3), 4: Number(item.v4), 5: Number(item.v5) }),
          assistantTeacher30MinSalary: 0,
          assistantTeacher90MinSalary: 0,
          mainTeacher30MinSalary: 0,
          mainTeacher90MinSalary: 0,
          userId: item.userId
        })
      })
      this.vipTable.forEach(item => {
        // console.log(item)
        if (item.offlineClassesSalary < 0 || item.onlineClassesSalary < 0) {
          this.$message.error("输入课酬不能为负数");
          checkStatus = false;
          return;
        }
      });
      this.accompanyTable.forEach(item => {
        if (item.mainTeacherSalary < 0) {
          this.$message.error("输入课酬不能为负数");
          checkStatus = false;
          return;
        }
        if (!item.mainTeacherSalary.toString()) {
          this.$message.error("输入网管课课酬");
          checkStatus = false;
          return;
        }
      });
      if (!checkStatus) {
        return
      }
      this.$refs['salaryForm'].validate((valid) => {
        if(valid) {
          this.$confirm("您确定更改老师课酬", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async () => {
              let params = teamTable.concat(temps)
              let updateForm = this.updateForm
              let res = await teacherUpdate1({ id: this.teacherId, isSettlementSalary: updateForm.isSettlementSalary })
              if(res.code != 200) {
                this.$message.error(res.msg)
                return
              }
              teacherSalaryBatchUpset({
                teacherDefaultMusicGroupSalaries: params,
                startDate: updateForm.startDate
              }).then(res => {
                if (res.code == 200) {
                  // 判断输入的值是否正确
                  vipGroupSalarySet({
                    teacherDefaultVipGroupSalaries: this.vipTable,
                    startDate: updateForm.startDate
                  }).then(res => {
                    if (res.code == 200) {
                      PracticeGroupSalaryUpdate({
                        startDate: updateForm.startDate,
                        teacherDefaultPracticeGroupSalaries: this.accompanyTable
                      }).then(res => {
                        if (res.code == 200) {
                          this.$message.success("保存成功");
                          this.$store.dispatch('delVisitedViews', this.$route)
                          this.$router.push({
                            path: "/teacherManager/teacherList",
                            query: { rules: this.Frules, search: this.Fsearch }
                          });
                        }
                      });
                    }
                  });
                }
              });
            })
            .catch(() => { });
        }
      })
      // 判断输入的值是否正确
      // if (!this.startDate) {
      //   this.$message.error("请填写生效日期");
      //   return;
      // }


    }
  }
};
</script>
<style lang="scss" scoped>
.salarySet {
  h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
    font-weight: normal;
  }
  .tableList {
    .left,
    .right {
      float: left;
    }
    .left {
      width: 100%;
    }
    .right {
      width: 56%;
      margin-left: 2%;
    }
  }
}

/deep/.el-table__body {
  tr {
    td:nth-child(3) {
      border-right: 1px solid #ebeef5;
    }
  }
}
/deep/.el-input-group__append {
  min-width: 103px;
  background-color: #f5f7fa;
  text-align: center;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-left: 0;
}
</style>