dy-admin-manager/src/views/teamBuild/modals/close-studens.vue

<template>
  <div>
    <el-form :model="moneys" ref="form">
      <el-table
        style="width: 100%"
        max-height="300px"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="list"
      >
        <el-table-column prop="name" align="center" label="学员姓名">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.name }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="parentsName" align="center" label="家长姓名">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.parentsName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="parentsPhone" align="center" label="手机号码" width="130">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.parentsPhone }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="classGroupName" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="subjectName" align="center" label="声部">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.subjectName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="surplusCourseFee" align="center" label="退费金额(元)" width="150">
          <template slot-scope="scope">
            <el-form-item style="margin-bottom:0"
              :prop="'' + scope.row.userId"
              :rules="[
                { required: true, message: '' },
                { validator: validatorMoney(scope.row) },
              ]"
            >
              <el-input-number
                size="mini"
                :controls="false"
                :precision="2"
                :step="0.01"
                v-model="moneys[scope.row.userId]"
                placeholder="请输入退费金额"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </div>
</template>
<script>
import { closeMusicGroup, getMusicGroupStuReBack } from '../api'
export default {
  props: ['detail'],
  mounted() {
    this.FetchList()
  },
  data() {
    return {
       list: [],
       moneys: {}
    }
  },
  methods: {
    async FetchList() {
      const res = await getMusicGroupStuReBack({
        musicGroupId: this.detail?.id,
      })
      this.list = res.data
      const data = {}
      for (const item of res.data) {
        data[item.userId] = item.surplusCourseFee
      }
      this.moneys = data
    },
    async submit() {
      try {
        this.$refs.form.validate(async valid => {
          if (valid) {
            await this.$confirm('是否确认关闭乐团', '提示', {
              type: 'warning'
            })
            await closeMusicGroup({
              musicGroupId: this.detail?.id,
              userReBack: this.moneys
            })
            this.$message.success('关闭成功')
            this.$emit('submited')
            this.$emit('close')
          } else {
            this.$$message.error('请填写完成退费金额')
          }
        })
      } catch (error) {}
    },
    validatorMoney(row) {
      return (rule, value, callback) => {
        if (row.surplusCourseFee < value || value < 0) {
          callback(new Error(`最大退费金额: ${row.surplusCourseFee}`))
          return
        }
        callback()
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .dialog-footer{
    margin-top: 20px;
    display: block;
    text-align: right;
  }
</style>