dy-admin-manager/src/views/withdrawal-application/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      退团申请
      <auth :auths="['/WithdrawalApplication/abnormal']">
        <filter-search
          @reload="reloadSearch"
          :keys="['visitFlag']"
          :moreKeys="['organId']"
        />
      </auth>
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        @submit="submit"
        @reset="onReSet"
        ref="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="学员(乐团)编号、名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            style="width: 180px !important"
            v-model.trim="searchForm.organId"
            filterable
            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>
          <el-select
            v-model="searchForm.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, key) in withdrawalStatus"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.currentApproveRole"
            clearable
            placeholder="请选择角色"
          >
            <el-option label="分部经理" value="1"></el-option>
            <el-option label="乐团主管" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <el-button
            @click="onExport"
            type="primary"
            v-permission="'export/musicGroupQuit'"
            >导出</el-button
          >
        </el-form-item>
      </save-form>
      <div class="btnList">
        <auth :auths="['musicGroupQuit/batchQuitMusicGroup']">
          <el-button type="primary" @click="quiteTeamAll">批量处理</el-button>
        </auth>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkSeleabled"
        >
        </el-table-column>
        <el-table-column prop="userId" label="学员编号">
          <copy-text slot-scope="scope">{{ scope.row.userId }}</copy-text>
        </el-table-column>
        <el-table-column prop="userId" label="学员姓名">
          <copy-text slot-scope="scope">{{
            scope.row.user.username
          }}</copy-text>
        </el-table-column>
        <el-table-column prop="organName" label="所属分部">
          <div slot-scope="scope">{{ scope.row.musicGroup.organName }}</div>
        </el-table-column>
        <el-table-column prop="musicGroupId" label="所属乐团">
          <copy-text slot-scope="scope">{{
            scope.row.musicGroup.name
          }}</copy-text>
        </el-table-column>

        <el-table-column prop="createTime" label="申请时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | dateForMinFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="applyUserName" label="申请人"></el-table-column>
        <el-table-column prop="createTime" label="退费金额">
          <template slot-scope="scope">
            <div>
              <p v-if="!scope.row.returnTotalFee">--</p>
              <p v-else>
                {{ scope.row.returnTotalFee | moneyFormat }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reasonEnum" label="退团原因">
          <template slot-scope="scope">
            <p>{{ scope.row.reasonEnum | quiteReasonFilter }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="userComment" label="退团理由">
          <overflow-text
            width="100%"
            slot-scope="scope"
            :text="scope.row.userComment"
          ></overflow-text>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | withdrawalStatus }}
              <span v-if="scope.row.status == 'PROCESSING'"
                >({{
                  scope.row.currentApproveRole == 1 ? "分部经理" : "乐团主管"
                }})</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          width="200px;"
          label="操作"
          v-if="
            permission('musicGroupQuit/quitMusicGroup/quit') ||
            permission('musicGroupQuit/quitMusicGroup/quit-only') ||
            permission('visit/add/tuituanliebiao')
          "
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                v-if="
                  permission('musicGroupQuit/quitMusicGroup/quit') && isManage
                "
                :disabled="
                  scope.row.status != 'PROCESSING' ||
                  scope.row.status == 'DENIED' ||
                  scope.row.status == 'CANCELED' ||
                  (scope.row.status == 'PROCESSING' &&
                    isManage == 'manage' &&
                    scope.row.currentApproveRole == '2') ||
                  (scope.row.status == 'PROCESSING' &&
                    isManage == 'staff' &&
                    scope.row.currentApproveRole == '1')
                "
                @click="quieTeamMask(scope.row)"
                >立即处理</el-button
              >
              <el-button
                type="text"
                v-if="
                  permission('musicGroupQuit/quitMusicGroup/quit') && isManage
                "
                :disabled="
                  !(
                    scope.row.status != 'PROCESSING' ||
                    scope.row.status == 'DENIED' ||
                    scope.row.status == 'CANCELED' ||
                    (scope.row.status == 'PROCESSING' &&
                      isManage == 'manage' &&
                      scope.row.currentApproveRole == '2') ||
                    (scope.row.status == 'PROCESSING' &&
                      isManage == 'staff' &&
                      scope.row.currentApproveRole == '1')
                  )
                "
                @click="quieTeamMask(scope.row, 'look')"
                >查看</el-button
              >
              <!-- <el-button
              type="text"
              v-if="permission('musicGroupQuit/quitMusicGroup/quit-only')"
              :disabled="scope.row.status != 'PROCESSING'"
              @click="quieTeam(scope.row)"
            >退团</el-button> -->
              <el-button
                type="text"
                v-if="permission('visit/add/tuituanliebiao')"
                @click="addVisit(scope.row)"
                >新增回访</el-button
              >
            </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="FetchList"
      />
    </div>
    <el-dialog
      :title="isDisabled ? '查看' : '立即处理'"
      width="700px"
      :visible.sync="quitVisible"
    >
      <quitModal
        v-if="quitVisible"
        :quitForm="quitForm"
        @close="quitVisible = false"
        @submited="FetchList"
        :isDisabled="isDisabled"
        ref="musicForm"
      />
      <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="$helpers.tenantId == 1">
                退还乐保费用：报名缴费时缴费的乐保费用
              </p>
            </div>
            <el-button
              type="text"
              icon="el-icon-question"
              slot="reference"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div v-if="!isDisabled">
          <el-button
            type="primary"
            v-permission="'musicGroupQuit/quitMusicGroup'"
            v-if="isManage == 'staff'"
            @click="submitInfo('PROCESSING')"
            >提交审核</el-button
          >
          <el-button
            v-if="isManage == 'super' || isManage == 'manage'"
            type="primary"
            v-permission="'musicGroupQuit/quitMusicGroup'"
            @click="submitInfo('APPROVED')"
            >同意</el-button
          >
          <el-button
            type="danger"
            v-permission="'musicGroupQuit/quitMusicGroup'"
            @click="submitInfo('DENIED')"
            >拒绝</el-button
          >
        </div>
      </span>
    </el-dialog>
    <!-- <el-dialog title="退团" width="500px" :visible.sync="quitOnlyVisible">
      <quitOnlyModal
        v-if="quitOnlyVisible && detail"
        :detail="detail"
        @close="quitOnlyVisible = false"
        @submited="FetchList"
      />
    </el-dialog> -->
    <el-dialog title="新增回访" width="760px" :visible.sync="visitVisible">
      <visit
        v-if="visitVisible && detail"
        :detail="detail"
        @close="visitVisible = false"
        @submited="FetchList"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import quitModal from "@/views/teamDetail/components/modals/quite-team";
import quitOnlyModal from "./modals/quitOnly";
import visit from "./modals/visit";
import { Export } from "@/utils/downLoadFile";
import { quitMusicGroup } from "@/api/journal";
import qs from "qs";
import { musicGroupQuitQeryPage, batchQuitMusicGroup } from "./api";
import cleanDeep from "clean-deep";
import { musicGroupQuit } from "@/api/journal";
import { withdrawalStatus } from "@/constant";
import { quiteReasonFilter } from "@/utils/vueFilter";
let that;
const initSearch = {
  search: "",
  status: null,
  organId: "",
};
export default {
  components: { pagination, quitModal, quitOnlyModal, visit },
  data() {
    return {
      withdrawalStatus,
      quitVisible: false,
      quitOnlyVisible: false,
      visitVisible: false,
      detail: null,
      list: [],
      searchForm: {
        ...initSearch,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        reason: "",
        courseViewType: null,
        hasMaintenance: null,
        studentName: null,
        musicGroupName: null,
        isVisit: false,
        userComment: null,
      },
      isManage: false,
      isDisabled: false,
      multipleSelection: [],
    };
  },
  async mounted() {
    that = this;
    let isSuperAdmin = this.$store.getters.isSuperAdmin;
    let roles = this.$store.getters.roles;
    await this.$store.dispatch("setBranchs");
    if (isSuperAdmin) {
      this.isManage = "super";
    } else {
      if (roles.indexOf("1") != -1) {
        this.isManage = "manage";
      }
      if (roles.indexOf("2") != -1) {
        this.isManage = "staff";
      }
    }
    if (roles.indexOf("1") != -1 && roles.indexOf("2") != -1) {
      this.isManage = "super";
    }
    this.FetchList();
  },
  methods: {
    permission,
    reloadSearch() {
      this.rules.page = 1;
      this.FetchList();
    },
    submit() {
      this.rules.page = 1;
      this.FetchList();
    },
    onReSet() {
      this.searchForm = { ...initSearch };
      this.submit();
    },
    async quieTeamMask(row, look) {
      await musicGroupQuit({ id: row.id }).then((res) => {
        if (res.code == 200) {
          if (look == "look") {
            this.isDisabled = true;
          } else {
            this.isDisabled = false;
          }
          this.musicForm = res.data;
          this.activeRow = { ...row, ...res.data.returnFeeDto };
          this.quitForm.courseViewType = res.data.musicGroup.courseViewType;
          this.quitForm.userComment = res.data.userComment;
          this.quitForm.isVisit = res.data.isVisit;
          this.quitForm.visitTime = res.data.visitTime;
          this.quitForm.studentName = res.data.user?.username;
          this.quitForm.musicGroupName = res.data.musicGroup?.name;
          this.quitForm.hasMaintenance = res.data.hasMaintenance;
          this.quitForm.reason = res.data.reason;
          this.quitForm.id = res.data.id;
          this.quitForm.reasonEnum = res.data.reasonEnum;
          this.quitForm = { ...this.quitForm, ...res.data.returnFeeDto };
          this.quitVisible = true;
        } else {
          this.$message.error(res.msg);
        }
      });

      // this.detail = row;
    },
    quieTeam(row) {
      this.quitOnlyVisible = true;
      this.detail = row;
    },
    addVisit(row) {
      this.visitVisible = true;
      this.detail = row;
    },
    async FetchList() {
      try {
        const res = await musicGroupQuitQeryPage({
          page: this.rules.page,
          rows: this.rules.limit,
          visitFlag: this.$route.query.visitFlag,
          ...this.searchForm,
        });
        this.rules.total = res.data.total;
        this.list = res.data.rows;
      } catch (error) {}
    },
    onExport() {
      const { ...rest } = this.searchForm;
      Export(
        this,
        {
          url: "/api-web/export/musicGroupQuit",
          fileName: "退团申请.xls",
          method: "post",
          params: qs.stringify({
            visitFlag: this.$route.query.visitFlag,
            ...rest,
          }),
        },
        "您确定导出退团申请列表?"
      );
    },
    submitInfo(status) {
      this.$confirm("确定此操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let query = this.quitForm;
          query.status = status;
          query.returnFeeDto = {
            accessoriesFee: query.accessoriesFee,
            courseFee: query.courseFee,
            isReturnAccessoriesFee: query.isReturnAccessoriesFee,
            isReturnCourseFee: query.isReturnCourseFee,
            isReturnMaintenanceFee: query.isReturnMaintenanceFee,
            isReturnMemberFee: query.isReturnMemberFee,
            isReturnMusicalFee: query.isReturnMusicalFee,
            maintenanceFee: query.maintenanceFee,
            memberFee: query.memberFee,
            musicalFee: query.musicalFee,
          };
          await quitMusicGroup(cleanDeep(query)).then((res) => {
            this.$message.success("处理成功");
            this.activeRow = null;
            if (this.$refs["musicForm"].$refs.quitForm) {
              this.$refs["musicForm"].$refs.quitForm.resetFields();
            }
            this.quitVisible = false;
            this.FetchList();
          });
        })
        .catch((e) => {
          console.log(e);
        });
      // 乐团主管这里
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    quiteTeamAll() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      let str = "";
      this.multipleSelection.forEach((stu) => {
        console.log(stu);
        str += stu.user.username + ",";
      });
      str += "的退团申请将批量处理";
      this.$prompt(str, "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "同意",
        cancelButtonText: "拒绝",
        confirmButtonClass: "el-button--primary",
        cancelButtonClass: "el-button--danger",
        closeOnClickModal: false,
        inputPattern: /\S/,
        inputType: "textarea",
        inputErrorMessage: "请输入审批理由",
        inputPlaceholder: "请输入审批理由",
        beforeClose: async (val, instance, done) => {
          if (val == "confirm") {
            // reason
            let objList = this.multipleSelection.map((stu) => {
              return {
                id: stu.id,
                status: "APPROVED",
                reason: instance.inputValue,
              };
            });
            try {
              const res = await batchQuitMusicGroup(objList);
              this.$message.success("审批成功");
              done();
              this.FetchList();
            } catch (e) {
              console.log(e);
            }
          } else if (val == "cancel") {
            instance.validate();
            let objList = this.multipleSelection.map((stu) => {
              return {
                id: stu.id,
                status: "DENIED",
                reason: instance.inputValue,
              };
            });
            try {
              const res = await batchQuitMusicGroup(objList);
              this.$message.success("审批成功");
              done();
              this.FetchList();
            } catch (e) {
              console.log(e);
            }
          } else {
            done();
          }
        },
      })
        .then(() => {
          // 同意
        })
        .catch((msg) => {
          // close,cancel
          console.log(msg);
        });
    },
    checkSeleabled(row) {
      if (row.status == "PROCESSING" && row.currentApproveRole == "1") {
        return 1;
      } else {
        return 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-footer.question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.btnList {
  margin-bottom: 20px;
}
.confirmButton {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.cancelButton {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
</style>