dy-admin-manager/src/views/studentManager/memberList.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      乐团会员列表
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="onReSet"
      >
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="乐团/学员名称编号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            @keyup.enter.native="search"
            placeholder="学员姓名/编号"
          ></el-input>
        </el-form-item> -->
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="hasMember">
          <el-select
            class="multiple"
            v-model.trim="searchForm.hasMember"
            placeholder="会员状态"
          >
            <el-option label="已过期" value="0"></el-option>
            <el-option label="即将过期" value="1"></el-option>
            <el-option label="待生效" value="2"></el-option>
            <el-option label="生效中" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="visitTime">
          <el-date-picker
            v-model.trim="searchForm.visitTime"
            style="width: 410px"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="{
              firstDayOfWeek: 1
            }"
            range-separator="至"
            start-placeholder="回访开始日期"
            end-placeholder="回访结束日期"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item prop="isActive">
          <el-select
            class="multiple"
            v-model.trim="searchForm.isActive"
            clearable
            placeholder="会员是否即将过期"
          >
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column
            align="center"
            prop="userId"
            label="学员编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="学员姓名"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="手机号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="organName"
            label="所属分部"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="musicGroupName"
            label="所属乐团"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="gotoMusic(scope.row.musicGroupName)"
              >
                {{ scope.row.musicGroupName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="会员状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.hasMember | hasMemberFilter }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="memberDay"
            label="会员有效期剩余天数"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.memberDay >= 0 ? scope.row.memberDay : 0 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="memberDay" label="回访日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.visitTime | dayjsFormat }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="操作">
            <template slot-scope="scope">
              <div>
                <!-- addVisit -->
                <auth :auths="'visit/add/4465'">
                  <el-button type="text" @click="addVisit(scope.row)"
                    >新增回访</el-button
                  >
                </auth>
                <auth :auths="'visit/queryPage'" v-if="scope.row.visitTime">
                  <el-button type="text" @click="lookVisit(scope.row)"
                    >查看回访</el-button
                  >
                </auth>

                <auth :auths="'musicGroupQuit/directQuitMusicGroup4463'">
                  <el-button type="text" @click="quitTeam(scope.row)"
                    >退团退费</el-button
                  >
                </auth>
                <auth :auths="'musicGroupQuit/directQuitMusicGroup4462'">
                  <el-button type="text" @click="onekeyquickTeams(scope.row)"
                    >退团</el-button
                  >
                </auth>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 退团弹窗 -->
    <el-dialog title="退团信息确认" width="660px" :visible.sync="quitVisible">
      <quiteTeam :quitForm="quitForm" :activeRow="activeRow" ref="quitForm" />
      <p style="color: red; paddingleft: 150px">退费金额暂不进入账户余额</p>
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-popover placement="right" width="500" trigger="click">
            <div class="popoverWrap">
              <p>乐团退团退费规则：</p>
              <p>退还学练宝费用：报名缴费时缴费的学练宝费用</p>
              <p>退还课程费用：缴费总额-已结束课时单价之和</p>
              <p>退还乐器费用：报名缴费时缴纳的乐器费用（团购、租金）</p>
              <p>退还教辅费用：报名缴费时缴费的教辅费用</p>
              <p v-if="tenantId == 1">退还乐保费用：报名缴费时缴费的乐保费用</p>
            </div>
            <el-button
              type="text"
              icon="el-icon-question"
              slot="reference"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div>
          <el-button @click="quitVisible = false">取 消</el-button>
          <el-button type="primary" @click="chioseType">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 退团 -->
    <el-dialog title="一键退团" width="660px" :visible.sync="onekeyQuitVisible">
      <el-form
        :model="quitForm"
        ref="onekeyQuitForm"
        label-width="150px"
        :inline="true"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="学员姓名">
              <span>{{ quitForm.studentName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乐团名称">
              <overflow-text
                :text="quitForm.musicGroupName"
                width="150px"
              ></overflow-text>
              <!-- <span>{{}}</span>   -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item
            label="退团原因"
            prop="reasonEnum"
            :rules="[{ required: true, message: '请选择退团原因' }]"
          >
            <el-radio-group v-model="quitForm.reasonEnum" :disabled="false">
              <el-radio-button
                :label="item.value"
                v-for="(item, index) in quiteReasonList"
                :key="index"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-form-item
          label="审批理由"
          prop="reason"
          :rules="[{ required: true, message: '请输入退团理由' }]"
        >
          <el-input
            :disabled="false"
            type="textarea"
            :rows="3"
            v-model.trim="quitForm.reason"
            style="width: 455px !important"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-button @click="onekeyQuitVisible = false">取 消</el-button>
          <el-button type="primary" @click="quieTeams">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 新增回访 -->
    <el-dialog
      title="新增回访"
      width="760px"
      :visible.sync="visitVisible"
      append-to-body
    >
      <visit
        v-if="visitVisible && activeRow"
        :detail="activeRow"
        :username="activeRow.username"
        @close="visitVisible = false"
        @submited="getList"
        :useVisitType="['其它', '会员续费']"
      />
    </el-dialog>
    <el-dialog title="退团信息确认" width="660px" :visible.sync="quitVisible">
      <quiteTeam :quitForm="quitForm" :activeRow="activeRow" ref="quitForm" />
      <p style="color: red; paddingleft: 150px">退费金额暂不进入账户余额</p>
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-popover placement="right" width="500" trigger="click">
            <div class="popoverWrap">
              <p>乐团退团退费规则：</p>
              <p>退还学练宝费用：报名缴费时缴费的学练宝费用</p>
              <p>退还课程费用：缴费总额-已结束课时单价之和</p>
              <p>退还乐器费用：报名缴费时缴纳的乐器费用（团购、租金）</p>
              <p>退还教辅费用：报名缴费时缴费的教辅费用</p>
              <p v-if="tenantId == 1">退还乐保费用：报名缴费时缴费的乐保费用</p>
            </div>
            <el-button
              type="text"
              icon="el-icon-question"
              slot="reference"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div>
          <el-button @click="quitVisible = false">取 消</el-button>
          <el-button type="primary" @click="chioseType">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import quiteTeam from "@/views/teamDetail/components/modals/quite-team";
import { StudentQuit } from "@/api/buildTeam";
import load from "@/utils/loading";
import { getMusicMemberList } from "./api";
import visit from "@/views/withdrawal-application/modals/visit";
import { getTimes } from "@/utils";
import { quiteReasonList } from "@/utils/searchArray";
export default {
  components: { pagination, quiteTeam, visit },
  data() {
    return {
      searchForm: {
        search: null,
        organId: null,
        hasMember: "0",
        visitTime: []
      },

      tableList: [{}],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      quitForm: {
        // 退团信息确认
        studentName: null,
        musicGroupName: null,
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        isMaintenanceFee: null,
        cloudTeacherAmount: null,
        isCloudTeacherAmount: null,
        isRefundMemberFee: null,
        maintenanceFee: 0,
        reason: ""
      },
      quitVisible: false,
      activeRow: null,
      visitVisible: false,
      tenantId: "",
      onekeyQuitVisible: false,
      quiteReasonList
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取分部
    this.tenantId = this.$helpers.tenantId;
    this.$store.dispatch("setBranchs");
    this.init();
  },
  methods: {
    init() {
      if (this.$route.query.hasMember) {
        this.$set(this.searchForm, "hasMember", this.$route.query.hasMember);
      }
      this.getList();
    },
    async getList() {
      // 设置时间
      let { visitTime, ...rest } = this.searchForm;
      try {
        const res = await getMusicMemberList({
          ...rest,
          ...getTimes(visitTime, ["visitStartTime", "visitEndTime"]),
          page: this.rules.page,
          rows: this.rules.limit
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    quitTeam(row) {
      this.activeRow = row;
      this.quitVisible = true;
      this.quitForm.cloudTeacherAmount = row.cloudTeacherAmount;
      this.quitForm.studentName = row.username;
      this.quitForm.musicGroupName = row.musicGroupName;
    },
    onekeyquickTeams(row) {
      this.quitForm.cloudTeacherAmount = row.cloudTeacherAmount;
      this.quitForm.studentName = row.username;
      this.quitForm.musicGroupName = row.musicGroupName;
      this.activeRow = row;
      this.onekeyQuitVisible = true;
    },
    quieTeams() {
      this.$refs.onekeyQuitForm.validate(res => {
        if (!res) {
          return;
        }
        StudentQuit({
          musicGroupId: this.activeRow.musicGroupId,
          userId: this.activeRow.userId,
          reason: this.quitForm.reason,
          reasonEnum: this.quitForm.reasonEnum,
          isRefundCourseFee: false,
          isRefundInstrumentFee: false,
          isRefundTeachingAssistantsFee: false,
          isRefundMemberFee: false
        }).then(res => {
          this.quitForm = {
            // 退团信息确认
            isRefundCourseFee: null,
            isRefundInstrumentFee: null,
            isRefundTeachingAssistantsFee: null,
            isMaintenanceFee: null,
            cloudTeacherAmount: null,
            isCloudTeacherAmount: null,
            isRefundMemberFee: null,
            maintenanceFee: 0,
            reason: "",
            reasonEnum: ""
          };
          if (res.code == 200) {
            this.$message.success("退团成功");
            this.getList();
            this.onekeyQuitVisible = false;
          }
        });
      });
    },
    chioseType() {
      this.$refs["quitForm"].$refs["quitForm"].validate(res => {
        if (res) {
          this.$confirm("确定退团?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              let row = this.activeRow;
              let params = {
                musicGroupId: row.musicGroupId,
                userId: row.userId,
                reason: this.quitForm.reason,
                isRefundCourseFee: this.quitForm.isRefundCourseFee,
                isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
                isRefundTeachingAssistantsFee: this.quitForm
                  .isRefundTeachingAssistantsFee,
                maintenanceFee: this.quitForm.maintenanceFee,
                isRefundMemberFee: this.quitForm.isRefundMemberFee
              };
              // 退还学练宝费用
              if (this.quitForm.isRefundMemberFee) {
                params.cloudTeacherAmount = this.quitForm.cloudTeacherAmount;
              } else {
                params.cloudTeacherAmount = 0;
              }
              // 发请求 退团
              StudentQuit(params).then(res => {
                this.quitForm = {
                  // 退团信息确认
                  isRefundCourseFee: null,
                  isRefundInstrumentFee: null,
                  isRefundTeachingAssistantsFee: null,
                  isMaintenanceFee: null,
                  cloudTeacherAmount: null,
                  isCloudTeacherAmount: null,
                  isRefundMemberFee: null,
                  maintenanceFee: 0,
                  reason: ""
                };
                if (res.code == 200) {
                  this.$message.success("退团成功");
                  this.getList();
                  this.quitVisible = false;
                }
              });
            })
            .catch(() => {});
        } else {
        }
      });

      // row.typeVisible = false;
    },
    addVisit(row) {
      this.visitVisible = true;
      this.activeRow = row;
    },
    gotoMusic(str) {
      this.$router.push({ path: "/teamList", query: { search: str } });
    },
    lookVisit(row) {
      this.$router.push({
        path: "/studentManager/returnVisitList",
        query: {
          search: row.userId,
          tabrouter: "2",
          typeList: ["其它", "会员续费"]
        }
      });
    }
  },
  watch: {
    quitVisible(val) {
      if (!val) {
        this.quitForm = {
          // 退团信息确认
          isRefundCourseFee: null,
          isRefundInstrumentFee: null,
          isRefundTeachingAssistantsFee: null,
          isMaintenanceFee: null,
          cloudTeacherAmount: null,
          isCloudTeacherAmount: null,
          maintenanceFee: 0,
          reason: ""
        };
        this.$refs["quitForm"].$refs["quitForm"].resetFields();
      }
    }
  },
  filters: {
    hasMemberFilter(val) {
      const arr = ["已过期", "即将过期", "待生效", "生效中"];
      return arr[val];
    }
  }
};
</script>
<style lang="scss" scoped></style>