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

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>退团申请 <filter-search @reload="reloadSearch" :keys="['visitFlag']" :moreKeys="['organId']"/>
    </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>
          <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-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>
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <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="musicGroupId"
          label="所属乐团"
        >
          <copy-text slot-scope="scope">{{scope.row.musicGroup.name}}</copy-text>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status | withdrawalStatus }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间"
        ></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
          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">
            <el-button
              type="text"
              v-if="permission('musicGroupQuit/quitMusicGroup/quit')"
              :disabled="scope.row.status != 'PROCESSING'"
              @click="quieTeamMask(scope.row)"
            >审核</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>
          </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="审核" width="640px" :visible.sync="quitVisible">
      <quitModal
        v-if="quitVisible && detail"
        :detail="detail"
        @close="quitVisible = false"
        @submited="FetchList"
      />
    </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="500px" :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 './modals/quit'
import quitOnlyModal from './modals/quitOnly'
import visit from './modals/visit'
import { Export } from '@/utils/downLoadFile'
import qs from 'qs'
import { musicGroupQuitQeryPage } from './api'
import { withdrawalStatus } from '@/constant'
const initSearch = {
  search: '',
  status: null
}
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], // 选择限制显示条数
      },
    }
  },
  mounted() {
    this.FetchList()
  },
  methods: {
    permission,
    reloadSearch() {
      this.rules.page = 1;
      this.FetchList();
    },
    submit() {
      this.rules.page = 1
      this.FetchList()
    },
    onReSet() {
      this.searchForm = {...initSearch}
      this.submit();
    },
    quieTeamMask(row) {
      this.quitVisible = true
      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 })
      }, '您确定导出退团申请列表?')
    }
  }
}
</script>