dy-admin-manager/src/views/resetTeaming/components/studentPayBase.vue

<!--  -->
<template>
  <!-- <div class="m-container">
    <el-page-header @back="goBack"
                    content="学员缴费记录">
    </el-page-header> -->
  <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.subjectId"
                   style="width:180px"
                   clearable
                   filterable
                   placeholder="请选择声部">
          <el-option v-for="(item,index) in soundList"
                     :key="index"
                     :label="item.name"
                     :value="item.id"></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="newBand"
         @click="resetPays"
         v-permission="'musicGroupStudentFee/batchUpdateCourseFee'">修改缴费金额</div> -->
    <div class="tableWrap">
      <el-table style="width: 100%"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                :data="tableList"
                ref='multipleTable'
                max-height="300"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column align="center"
                         prop="userId"
                         label="学员编号"></el-table-column>
        <el-table-column align="center"
                         prop="name"
                         label="学员姓名">

          <!-- <template slot-scope="scope">
            <div v-if="scope.row.sysUser">
              {{scope.row.sysUser.username}}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column align="center"
                         prop="subjectName"
                         label="学员声部"></el-table-column>
        <!-- <el-table-column align="center"
                         prop="studentId"
                         label="联系电话">
          <template slot-scope="scope">
            <div v-if="scope.row.sysUser">
              {{scope.row.sysUser.phone}}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center"
                         prop="courseFee"
                         label="缴费金额(元)"></el-table-column> -->
        <!-- <el-table-column align="center"
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'musicGroupStudentFee/batchUpdateCourseFee'"
                         @click="resetPay(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 :visible.sync="resetPayVisible"
               append-to-body
               width="500px"
               title="修改缴费金额">
      <el-form :model="resetPayForm"
               :inline="true"
               label-width="120px"
               label-position="right"
               ref='resetPayForm'>
        <!-- <el-form-item label="学生姓名"
                      :rules="[{ required: true, message: '学生姓名',trigger: 'blur'}]"
                      prop="startDate">
          <el-input disabled
                    value="张三"></el-input>
        </el-form-item> -->
        <el-form-item label="应缴金额"
                      :rules="[{ required: true, message: '请输入预计缴费金额',trigger: 'blur'},{pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的金额',trigger: 'blur' }]"
                      prop="momey">
          <el-input v-model="resetPayForm.momey"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetPayVisible = false">取 消</el-button>
        <el-button type="primary"
                   v-if="isSigan"
                   @click="submitSigan(true)">确 定</el-button>
        <el-button type="primary"
                   v-if="!isSigan"
                   @click="submitSigan(false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { findSound, getMusicGroupStudentFee, resetMusicGroupStudentFee, queryCanAddStudent } from "@/api/buildTeam";

export default {
  components: { pagination },
  props: ['clearStduent', 'musicGroupPaymentCalenderId', 'batchNo'],
  data () {
    return {
      searchForm: {
        search: null,
        subjectId: null,
      },
      teacherList: [],
      soundList: [],
      tableList: [{}],
      rules: {
        // 分页规则
        limit: 999, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      payVisible: false,
      resetPayVisible: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        }
      },

      payForm: {
        startDate: null
      },
      resetPayForm: {
        momey: null
      },
      activeChiose: [],
      isSigan: false,

    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log('create')
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 获取声部

    // 获取分部

    this.init();

  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.teamid = this.$route.query.id;
      findSound({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      });
      this.getList()
    },
    getList () {
      // this.searchForm.page = this.rules.page;
      // this.searchForm.rows = this.rules.limit;
      this.searchForm.musicGroupId = this.teamid;
      queryCanAddStudent({
        ...this.searchForm,
        batchNo: this.batchNo,
      }).then(res => {
        if (res.code == 200) {
          // this.rules.total = res.data.total;
          this.tableList = res.data;
        }
      })
    },
    search () {
      this.rules.page = 1;
      this.getList()
    },
    onReSet () {
      this.searchForm = {
        search: null,
        subjectId: null,
      }
      this.getList()
    },
    clearTable () {
      this.$refs.multipleTable.clearSelection()
    },
    startPay (row) { },
    resetPay (row) {
      this.activeRow = row;
      this.resetPayForm.momey = row.courseFee;
      this.isSigan = true
      this.resetPayVisible = true
    },
    resetPays () {
      this.isSigan = false
      if (this.activeChiose.length <= 0) {
        this.$message.error('请至少勾选一名学生')
        return
      }
      this.resetPayVisible = true

    },
    resetTime () {
      this.payVisible = true;
    },
    goBack () {
      let query = this.$route.query
      sessionStorage.setItem('resetCode', 3)
      this.$router.push({ path: '/business/resetTeaming', query })
    },
    handleSelectionChange (val) {
      this.activeChiose = val;
      this.$emit('chioseStudent', val)
    },
    submitSigan (sigan) {
      let obj = {}
      if (sigan) {
        obj.ids = this.activeRow.id
      } else {
        obj.ids = this.activeChiose.map(item => {
          return item.id
        }).join(',')
      }
      // obj.courseFee = this.resetPayForm.momey;
      // if (!obj.courseFee || obj.courseFee < 0) {
      //   this.$message.error('请输入正确的金额')
      //   return
      // }
      resetMusicGroupStudentFee(obj).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.resetPayVisible = false
          this.getList()
          if (this.$listeners.submited) {
            this.$listeners.submited()
          }
        }
      })
    }
  },
  watch: {
    resetPayVisible (val) {
      if (!val) {
        this.resetPayForm = {
          momey: null
        },
          this.$refs['resetPayForm'].resetFields()
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.tableWrap {
  // height: 300px;
  overflow: auto;
}
</style>