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

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      待激活云练习
    </h2>
    <div class="m-core">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model.trim="searchForm.queryCondition"
            @keyup.enter.native="queryCondition"
            clearable
            placeholder="学生姓名/编号/电话"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.status"
            clearable
            filterable
            placeholder="状态"
          >
            <el-option label="待激活" value="1"></el-option>
            <el-option label="已取消" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.operationDate"
            style="width: 410px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            :picker-options="{
              firstDayOfWeek: 1
            }"
            start-placeholder="操作开始日期"
            end-placeholder="操作结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="danger">搜索</el-button>
          <el-button @click="onReSet" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="newBand"
          @click="resetPays"
          v-permission="'musicGroupStudentFee/batchUpdateCourseFee'">修改缴费金额</div> -->
      <el-button
        @click="addMember"
        v-if="$helpers.permission('cloudTeacherOrder/pay/student')"
        type="primary"
        style="margin-bottom: 20px"
        >激活云练习</el-button
      >
      <el-button
        type="primary"
        style="margin-bottom: 20px;margin-left: 12px;"
        v-permission="'cloudTeacherOrder/cancelInactive'"
        @click="resetPay"
        >取消资格</el-button
      >

      <el-button
        type="primary"
        style="margin-bottom: 20px;margin-left: 12px;"
        @click="exportList"
        v-permission="'export/now'"
        >导出</el-button
      >

      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :selectable="isDisabled"
            width="55"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="studentId"
            label="学员编号"
          ></el-table-column>
          <el-table-column align="center" prop="name" label="学员姓名">
          </el-table-column>
          <el-table-column align="center" prop="phone" label="手机号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="学员声部"
          ></el-table-column>
          <el-table-column align="center" prop="type" label="云练习类型">
            <template slot-scope="scope">
              {{ scope.row.type | memberEnumType }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            label="数量"
          ></el-table-column>
          <el-table-column align="center" label="缴费金额(元)">
            <template slot-scope="scope">
              {{ scope.row.amount | hasMoneyFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              {{ scope.row.status | statusEnum }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="取消原因">
            <template slot-scope="scope">
              <!-- {{ scope.row.cancelReason }} -->
              <tooltip :content="scope.row.cancelReason" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作人">
            <template slot-scope="scope">
              {{ scope.row.operatorName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作时间">
            <template slot-scope="scope">
              {{ scope.row.operateTime }}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  v-if="scope.row.status == 1"
                  v-permission="'cloudTeacherOrder/cancelInactive'"
                  @click="resetPay(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="getList"
        />
      </div>
    </div>

    <el-dialog
      title="激活云练习"
      :visible.sync="giveMemberVisible"
      width="1000px"
      v-if="giveMemberVisible"
      append-to-body
    >
      <giveMemberModel
        :tableList="selectStudentList"
        @getList="getList"
        @close="giveMemberVisible = false"
      />
    </el-dialog>

    <el-dialog
      title="取消资格"
      :visible.sync="cancelCloudStatus"
      width="600px"
      v-if="cancelCloudStatus"
      append-to-body
    >
      <el-form ref="cancelCloudForm" :model="reson" label-width="100px">
        <el-form-item
          prop="cancelReason"
          label="取消原因"
          :rules="[
            { required: true, message: '请输入取消原因', trigger: 'blur' }
          ]"
        >
          <el-form-item>
            <el-input
              type="textarea"
              v-model="reson.cancelReason"
              placeholder="请输入取消原因"
              :rows="3"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCloudStatus = false">取 消</el-button>
        <el-button type="primary" @click="submitDateReset">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { queryInactive, cancelInactive } from "@/views/resetTeaming/api";
import giveMemberModel from "@/views/resetTeaming/modals/giveMemberModel";
import Tooltip from "@/components/Tooltip";
import { getTimeFormat } from "@/utils";
import { Export } from "@/utils/downLoadFile";
export default {
  components: { pagination, giveMemberModel, Tooltip },
  data() {
    let musicGroupId = this.$route.query.id;
    return {
      musicGroupId,
      giveMemberVisible: false,
      searchForm: {
        queryCondition: "",
        subjectId: "",
        operationDate: [],
        status: ""
      },
      soundList: [],
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      cancelCloudStatus: false,
      reson: {
        cancelReason: "",
        ids: ""
      },
      selectStudentList: [] // 选中的学生列表
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        let { operationDate, ...rest } = this.searchForm;
        let params = {
          ...rest,
          ...getTimeFormat(
            operationDate,
            ["operateStartTime", "operateEndTime"],
            "YYYY-MM-DD"
          ),
          page: this.rules.page,
          rows: this.rules.limit
        };
        const res = await queryInactive(params);
        this.rules.total = res.data.total;
        this.tableList = res.data.rows;
      } catch (e) {
        console.log(e, "e");
      }
      queryInactive;
    },
    // 是否允许批量调整
    isDisabled(row, index) {
      // || !row.isCallNames
      if (row.status !== 1) {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      this.selectStudentList = val || [];
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { search: "", subjectId: "" };
      this.search();
    },
    addMember() {
      if (this.selectStudentList.length <= 0) {
        this.$message.error("至少选择一名学生");
        return;
      }
      this.giveMemberVisible = true;
    },
    resetPay() {
      if (this.selectStudentList.length <= 0) {
        this.$message.error("至少选择一名学生");
        return;
      }
      this.cancelCloudStatus = true;
      const ids = [];
      this.selectStudentList.forEach(item => {
        ids.push(item.cloudTeacherOrderId);
      });
      this.reson.ids = ids.join(",");
    },
    exportList() {
      let { operationDate, ...rest } = this.searchForm;
      let params = {
        ...rest,
        ...getTimeFormat(
          operationDate,
          ["operateStartTime", "operateEndTime"],
          "YYYY-MM-DD"
        )
      };
      Export(
        this,
        {
          url: "/api-web/export/now",
          fileName: "待激活云练习.xls",
          method: "post",
          params: {
            exportEnum: "EXPORT_CLOUD_TEACHER_ORDER_INACTIVE",
            queryInfo: params
          }
        },
        "您确定导出待激活云练习?"
      );
    },
    async submitDateReset() {
      this.$refs["cancelCloudForm"].validate(async flag => {
        if (flag) {
          try {
            await cancelInactive(this.reson);
            this.$message.success("取消资格成功");
            this.cancelCloudStatus = false;
            this.reson.cancelReason = "";
            this.getList();
          } catch (e) {
            //
            console.log(e, "e");
          }
        }
      });
    }
  },
  filters: {
    statusEnum(val) {
      let template = {
        1: "待激活",
        2: "已生效",
        3: "已退 ",
        4: "已取消"
      };
      return template[val];
    }
  }
};
</script>