dy-admin-manager/src/views/main/notClassStudent.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      未在班级学员
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        ref="searchFrom"
        :model="searchForm"
      >
        <el-form-item prop="musicGroupSearch">
          <el-input
            v-model.trim="searchForm.musicGroupSearch"
            clearable
            @keyup.enter.native="
              (e) => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="乐团名称/编号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="studentSearch">
          <el-input
            v-model.trim="searchForm.studentSearch"
            clearable
            @keyup.enter.native="
              (e) => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="学员姓名/编号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organIds">
          <el-select
            placeholder="请选择分部"
            v-model="searchForm.organIds"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <auth :auths="['export/noClassGroupStudentList']">
            <el-button @click="onExport" type="primary">导出</el-button>
              </auth>

        </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" label="分部">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.organName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="乐团编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.groupId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="乐团名称">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.groupName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学员编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学员姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学员声部" prop="subjectName">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <auth :auths="['notClassStudent/nowLook', '/resetTeaming']" mulit>
                <el-button type="text" @click="showDetail(scope.row)"
                  >立即处理</el-button
                >
              </auth>
            </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>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { queryNoClassMusicStudentInfo } from "./api.js";
import { Export } from "@/utils/downLoadFile";
import cleanDeep from "clean-deep";
import qs from "qs";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        musicGroupSearch: null,
        studentSearch: null,
        organIds: null,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
    };
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const { query } = this.$route;
    if (query.organId) {
      this.searchForm.organIds = Number(query.organId);
    }
    this.$store.dispatch("setBranchs");

    this.getList();
  },
  methods: {
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs["searchFrom"].resetFields();
      this.getList();
    },
    async getList() {
      try {
        const { ...search } = this.searchForm;
        const params = {
          ...search,
          page: this.rules.page,
          rows: this.rules.limit,
        };
        let res = await queryNoClassMusicStudentInfo(params);
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (err) {
        //
      }
    },
    showDetail(item) {
      // ?status=PROGRESS&id=21040114171500001&name=0401莫莫2&organId=1&type=resetTeam&team_status=PROGRESS&tabrouter=5
      this.$router.push({
        path: "/business/resetTeaming",
        query: {
          type: "resetTeam",
          status: "PROGRESS",
          team_status: "PROGRESS",
          id: item.groupId,
          name: item.groupName,
          organId: item.organId,
          tabrouter: 5,
        },
      });
    },
    onExport() {
      Export(
        this,
        {
          url: "/api-web/export/noClassGroupStudentList",
          fileName: "未在班级学员.xls",
          method: "post",
          params: qs.stringify(cleanDeep(this.searchForm)),
        },
        "您确定导出未在班级学员?"
      );
    },
  },
};
</script>
<style lang='scss' scoped>
</style>