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

<!--  -->
<template>
  <div class="m-core">
    <el-form :inline="true" :model="searchForm">
      <el-form-item>
        <el-select
          placeholder="缴费类型"
          v-model="searchForm.paymentType"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in payOrderTypeList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="getList">搜索</el-button>
        <!-- <el-button @click="onReSet" type="primary">重置</el-button> -->
      </el-form-item>
    </el-form>
    <div class="topWrap">
      <!-- <div class="newBand"
           @click="newPay"
           v-permission="'musicGroupPaymentCalender/add'">新建缴费</div> -->
      <div class="newBand"
           @click="newUserPay"
           v-permission="'musicGroupPaymentCalender/add'">新建学员缴费</div>
      <!-- <div class="newBand"
           @click="newSchoolPay"
           v-permission="'musicGroupPaymentCalender/add'">新建学校缴费</div> -->
      <div class="newBand"
           v-permission="'/studentPayBase'"
           @click="setStudentPay">学员缴费设置</div>
      <!-- <div class="newBand"
      v-if="!isNewGropu"
           @click="onCreateQRCode">续费二维码</div> -->
    </div>
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column
          align="center"
          prop="startPaymentDate"
          width="120"
          label="缴费开始日期"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.startPaymentDate | formatTimer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="deadlinePaymentDate"
          label="缴费结束日期"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.deadlinePaymentDate | formatTimer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="expectNum"
          width="120"
          label="预计缴费人数"
        ></el-table-column>
        <el-table-column align="center" prop="paymentPattern" label="缴费方式">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentPattern | teamPayStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="paymentValidStartDate"
          width="150"
          label="缴费有效期开始日期"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentValidStartDate | formatTimer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="paymentValidEndDate"
          width="150"
          label="缴费有效期结束日期"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentValidEndDate | formatTimer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="actualNum"
          width="120"
          label="实际缴费人数"
        ></el-table-column>
        <el-table-column align="center" prop="status" label="缴费状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | payTypeStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isGiveMusicNetwork"
          width="120"
          label="是否赠送网管课"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.isGiveMusicNetwork ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="memo"
                         label="备注"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="260px">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="lookDetail(scope.row)"
                         v-permission="'musicGroupPaymentCalender/auditListDetail'">查看</el-button>
              <el-button type="text"
                         @click="openChioseStudent(scope.row)"
                         v-if="scope.row.status != 'REJECT' && scope.row.status != 'AUDITING'"
                         v-permission="'musicGroupPaymentCalenderDetail/batchAdd'">添加学员</el-button>
              <el-button type="text"
                         v-if="scope.row.status == 'REJECT'"
                         v-permission="'musicGroupPaymentCalender/update'"
                         @click="resetPay(scope.row)">修改</el-button>

              <el-button type="text" v-if="!isNewGropu" @click="onCreateQRCode(scope.row)">续费二维码</el-button>
              <el-button type="text" v-if="isNewGropu" @click="onPreview">预览</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="payVisible"
      :close-on-click-modal="false"
      width="500px"
      :title="diTitle"
    >
      <el-form
        :model="payForm"
        :inline="true"
        label-width="120px"
        label-position="right"
        ref="payForm"
      >
        <el-form-item
          label="缴费开始日期"
          :rules="[
            { required: true, message: '请设置缴费开始日期', trigger: 'blur' },
          ]"
          prop="startPaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.startPaymentDate"
            @change="changeStartTime"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费结束日期"
          :rules="[
            { required: true, message: '请设置缴费结束日期', trigger: 'blur' },
          ]"
          prop="deadlinePaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.deadlinePaymentDate"
            type="date"
            :picker-options="beginDate(payForm.startPaymentDate)"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费方式"
          prop="paymentPattern"
          :rules="[{ required: true, message: '请选择缴费方式' }]"
        >
          <el-select
            placeholder="缴费方式"
            style="width: 220px"
            clearable
            filterable
            @change="paymentPatternChange"
            v-model.trim="payForm.paymentPattern"
          >
            <el-option :value="0" label="按月"></el-option>
            <el-option :value="1" label="按季"></el-option>
            <el-option :value="2" label="一次性"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="缴费有效期开始"
          :rules="[
            {
              required: true,
              message: '请设置缴费有效期开始日期',
              trigger: 'blur',
            },
          ]"
          prop="paymentValidStartDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidStartDate"
            type="date"
            @change="changePaymentStartTime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="有效期开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费有效期结束"
          :rules="[
            {
              required: payForm.paymentPattern !== 2,
              message: '请设置缴费有效期结束日期',
              trigger: 'blur',
            },
          ]"
          prop="paymentValidEndDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidEndDate"
            type="date"
            :disabled="payForm.paymentPattern === 2"
            :picker-options="beginDate(payForm.paymentValidStartDate)"
            value-format="yyyy-MM-dd"
            placeholder="有效期结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="收费类型"
          v-if="isNew"
          :rules="[
            { required: true, message: '请选择收费类型', trigger: 'blur' },
          ]"
          prop="type"
        >
          <el-select
            v-model.trim="payForm.type"
            style="width: 220px !important"
            placeholder="课程类型"
          >
            <el-option label="线上" value="ONLINE"></el-option>
            <el-option label="线下" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
          v-if="isNew"
          :rules="[{ required: true, message: '请填写备注', trigger: 'blur' }]"
          prop="memo"
        >
          <el-input
            type="textarea"
            style="width: 220px !important"
            :rows="4"
            placeholder="请填写备注"
            v-model="payForm.memo"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isNew" @click="newPayInfo"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="resetPayDate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查看"
      :visible.sync="reviewVisible"
      width="900px"
      destroy-on-close
    >
      <reviewDetail
        @close="reviewVisible = false"
        @submited="getList"
        :detail="viewDetail"
        :musicGroupId="$route.query.id"
        destroy-on-close
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reviewVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :title="payFormTitle"
      :visible.sync="userVisible"
      width="800px"

    >
      <userPayForm
        v-if="userVisible"
        @close="userVisible = false"
        @submited="payedSubmited"
        @changeActive="$listeners.changeActive"
        :organizationCourseUnitPriceSettings="organizationCourseUnitPriceSettings"
        :rowDetail='activeRow'
        :type="payFormType"
        :baseInfo="baseInfo"
        :paymentType="isNewGropu ? 0 : undefined"
        :musicGroupId="$route.query.id"
      />
    </el-dialog>

    <el-dialog title="学员选择"
               :visible.sync="chioseStudentVisible"
               v-if="chioseStudentVisible"
               destroy-on-close
               append-to-body
               width='800px'>
      <setStudentFee @chioseStudent='chioseStudent'
                     ref='setStudentFee'
                     @submited="chioseStudentSubmited"
                     :clearTale="clearStduent"></setStudentFee>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="chioseStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewPay">确 定</el-button>
      </div>
    </el-dialog>

    <qr-code v-model="qrcodeStatus" title="续费二维码" :codeUrl="codeUrl" />

    <el-dialog
      title="选择预览声部"
      :visible.sync="dialogSubjectVisible"
      width="400px">
      <el-radio-group v-model="dialogSubjectId">
        <el-radio style="margin-right: 15px;" border size="medium" :label="item.subjectId" v-for="(item, index) in dialogSubjectList" :key="index">{{ item.subName }}</el-radio>
      </el-radio-group>
      <div slot="footer">
        <el-button @click="dialogSubjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="onPreviewSubmit">预 览</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="预览"
      :visible.sync="previewVisible"
      v-if="previewVisible"
      class="previewContainer"
      width="400px">
      <subject-preview :subjectId="dialogSubjectId"></subject-preview>
      <div slot="footer">
        <el-button type="primary" @click="previewVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import qs from "qs";
import dayjs from 'dayjs'
import QrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from '@/utils/validate'
import { addMusicGroupPaymentCalender, getMusicGroupPaymentCalender, resetMusicGroupPaymentCalender, delMusicGroupPaymentCalender, findMusicGroupSubjectInfo } from "@/api/buildTeam";
import {
  getOrganizationCourseUnitPriceSettings
} from '@/api/specialSetting'
import { musicGroupPaymentCalenderQueryPage, getMusicGroupStu, musicGroupPaymentCalenderDetailBatchAdd } from '../api'
import setStudentFee from './studentPayBase'
import userPayForm from '../modals/user-pay-form'
import schoolPayForm from '../modals/school-pay-form'
import review from '../modals/review'
import reviewDetail from '../modals/review-detail'
import subjectPreview from '@/views/resetTeaming/modals/subject-preview'
import { userPaymentType } from '@/constant'
import { objectToOptions } from '@/utils'
import { payOrderTypeList}  from "@/utils/searchArray";
export default {
  props: ["baseInfo", "isNewGropu"],
  components: {
    pagination,
    setStudentFee,
    userPayForm,
    schoolPayForm,
    QrCode,
    review,
    reviewDetail,
    subjectPreview
  },
  data() {
    return {
      musicGroupStu: [],
      payFormType: "user",
      userVisible: false,
      schoolVisible: false,
      reviewVisible: false,
      organizationCourseUnitPriceSettings: [],
      searchForm: {
        paymentType: null,
      },
      viewDetail: null,
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      isInit: false,
      diTitle: "新增缴费",
      payVisible: false,
      payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        paymentPattern: null,
        paymentValidStartDate: null,
        paymentValidEndDate: null,
        type: null,
        memo: null,
      },
      isNew: false,
      activeRow: null,
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      qrcodeStatus: false, // 生成二维码
      codeUrl: null,
      chioseStudentVisible: false,
      chioseStudentList: [],
      clearStduent: true,
      musicGroupPaymentCalenderId: "",
      payOrderTypeLists: payOrderTypeList,
      dialogSubjectVisible: false, // 预览声部
      dialogSubjectList: [],
      dialogSubjectId: null, // 选择预览声部编号
      previewVisible: false
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    // 获取分部
    try {
      const res = await getOrganizationCourseUnitPriceSettings({
        rows: 9999
      })
      this.organizationCourseUnitPriceSettings = res.data.rows
    } catch (error) {}
    this.init();
  },
  computed: {
    payOrderTypeList() {
      return objectToOptions(userPaymentType);
    },
    payFormTitle() {
      if (this.isNew) {
        return this.payFormType === "user" ? "新增学员缴费" : "新增学校缴费";
      } else {
        return this.payFormType === "user" ? "修改学员缴费" : "修改学校缴费";
      }
    },
  },
  activated() {
    this.init();
  },
  methods: {
    async init() {
      try {
        const res = await getMusicGroupStu({
          musicGroupId: this.$route.query.id,
        });

      } catch (error) {}
      this.getList();
    },
    newUserPay() {
      this.payFormType = "user";
      this.isNew = true;
      this.activeRow = null
      this.userVisible = true;
    },
    newSchoolPay() {
      this.payFormType = "school";
      this.isNew = true;
      this.activeRow = null
      this.userVisible = true;
    },
    getList () {
      let musicGroupId = this.$route.query.id
      return musicGroupPaymentCalenderQueryPage({
        page: this.rules.page,
        rows: this.rules.limit,
        musicGroupId,
        payUserType: 'STUDENT',
        paymentType: this.searchForm.paymentType,
      }).then(res => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows;
        }
      });
    },
    paymentPatternChange(val) {
      if (val === 2) {
        this.payForm.paymentValidEndDate = null;
      }
    },
    onCreateQRCode (row) { // 生成报名二维码
      this.qrcodeStatus = true
      this.codeUrl = vaildStudentUrl() + '/#/musicGroupRenew?calenderId=' + row.id
    },
    chioseStudent(val) {
      this.chioseStudentList = val;
    },
    newPay() {
      this.diTitle = "新增缴费";
      this.isNew = true;
      this.payVisible = true;
    },
    resetPay(row) {
      this.diTitle = "修改缴费";
      this.isNew = false;
      this.activeRow = row;
      this.payFormType = row.payUserType==='SCHOOL'?'school':'user'
      this.userVisible = true;
    },
    async chioseStudentSubmited() {
      try {
        await this.$confirm('缴费创建完成, 是否立即排课？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (this.$listeners.changeActive) {
          this.$listeners.changeActive({
            name: '5'
          })
        }
      } catch (error) {}
    },
    detelePay(row) {
      let id = row.id;
      this.$confirm(`确定删除该缴费周期?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMusicGroupPaymentCalender({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    lookDetail(row) {
      let query = this.$route.query;
      this.$route.query.paymentId = row.id;
      this.viewDetail = row;
      if (row.payUserType === "SCHOOL") {
        this.reviewVisible = true;
      } else {
        this.$router.push({ path: "/business/strudentPayInfo", query });
      }
    },
    setStudentPay() {
      let query = this.$route.query;
      this.$router.push({ path: "/business/studentPayBase", query });
    },
    newPayInfo() {
      this.$refs["payForm"].validate((res) => {
        if (res) {
          /**
           *   payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        type: null,
        memo: null
      },
           *
           */
          this.chioseStudentVisible = true;
          return;
        }
      });
    },
    submitNewPay() {
      if (this.chioseStudentList.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }

      let obj = {};
      obj.userIdList = this.chioseStudentList.map((stu) => {
        return stu.userId;
      });
      obj.musicGroupPaymentCalenderId = this.musicGroupPaymentCalenderId;
      musicGroupPaymentCalenderDetailBatchAdd(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.$refs.setStudentFee.clearTable();
          this.payVisible = false;
          this.chioseStudentVisible = false;
          this.getList();
        }
      });
    },
    resetPayDate() {
      resetMusicGroupPaymentCalender({
        id: this.activeRow.id,
        startPaymentDate: this.payForm.startPaymentDate,
        deadlinePaymentDate: this.payForm.deadlinePaymentDate,
        paymentValidStartDate: this.payForm.paymentValidStartDate
          ? dayjs(this.payForm.paymentValidStartDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidStartDate,
        paymentValidEndDate: this.payForm.paymentValidEndDate
          ? dayjs(this.payForm.paymentValidEndDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidEndDate,
        paymentPattern: this.payForm.paymentPattern,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.payVisible = false;
          this.getList();
        }
      });
    },
    changeStartTime(val) {
      this.payForm.deadlinePaymentDate = this.dateAddDays(val, 3);
    },
    changePaymentStartTime(val) {
      this.payForm.paymentValidEndDate = null;
    },
    dateAddDays(dataStr, dayCount) {
      let strdate = dataStr; //日期字符串
      let isdate = new Date(strdate.replace(/-/g, "/")); //把日期字符串转换成日期格式
      isdate = new Date((isdate / 1000 + 86400 * dayCount) * 1000); //日期加1天
      let pdate =
        isdate.getFullYear() +
        "-" +
        (isdate.getMonth() + 1) +
        "-" +
        isdate.getDate(); //把日期格式转换成字符串
      return pdate;
    },
    beginDate(end) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { payUserType: null };
    },
    openChioseStudent (row) {
      this.chioseStudentVisible = true;
      this.musicGroupPaymentCalenderId = row.id;
    },
    async payedSubmited(data) {
      try {
        await this.getList();
        // if (!this.isNewGropu) {
        //   this.chioseStudentVisible = true;
        //   if (data) {
        //     this.musicGroupPaymentCalenderId = data.musicGroupPaymentCalenderId;
        //   }
        // }
      } catch (error) {}
    },
    async onPreview() { // 开始预览
      const musicGroupId = this.$route.query.id
      await findMusicGroupSubjectInfo({ musicGroupId: musicGroupId }).then(res => {
        if(res.code == 200) {
          this.dialogSubjectList = res.data.musicGroupSubjectPlans
          this.dialogSubjectVisible = true
        } else {
          this.$message.warning('没有可预览的声部')
        }
      })
    },
    onPreviewSubmit() {
      this.previewVisible = true
    }
  },
  watch: {
    chioseStudentVisible() {
      this.chioseStudentList = [];
    },
    payVisible (val) {
      if (!val) {
        this.payForm = {
          startPaymentDate: null,
          paymentPattern: null,
          paymentValidStartDate: null,
          paymentValidEndDate: null,
          type: null,
          memo: null,
          deadlinePaymentDate: null,
        };
        this.$refs["payForm"].resetFields();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.topWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 10px;
  }
}
.left-code,
.right-code {
  // width: 50%;
  // float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}
.previewContainer {
  /deep/.el-dialog__body {
    padding: 0;
  }
}
</style>