dy-admin-manager/src/views/studentManager/modals/setMemberList.vue

<template>
  <div>
    <save-form
        :inline="true"
        class="searchForm"
        @submit="onSearch"
        @reset="onReSet"
        ref="saveForm"
        save-key="studentLit-memberChange"
        :model.sync="searchForm"
      >
      <el-form-item prop="memberRankSettingId">
        <el-cascader
          v-model.trim="searchForm.memberRankSettingId"
          :options="memberRankList"
          :props="{ value: 'id', label: 'name'  }"
          :show-all-levels="false"
          collapse-tags
          clearable
          placeholder="请选择学练宝版本"
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="buyType">
        <el-select
            class="multiple"
            v-model.trim="searchForm.buyType"
            clearable
            placeholder="请选择变更方式"
          >
            <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="operatorName">
          <el-input
            clearable
            placeholder="请输入操作人"
            @keydown.enter.native="
              e => {
                e.target.blur();
                $refs.saveForm.save();
                onSearch();
              }
            "
            v-model.trim="searchForm.operatorName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="timer">
          <el-date-picker
            :clearable="false"
            v-model.trim="searchForm.timer"
            style="width: 420px"
            type="daterange"
            clearable
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{
              firstDayOfWeek: 1
            }"
          >
          </el-date-picker>
        </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>

      <el-button
        @click="operationTimer('add')"
        type="primary"
        style="margin-bottom: 20px"
        v-if="$helpers.permission('studentManage/updateStudentMember')"
      >
        添加时长
      </el-button>
      <el-button
        @click="operationTimer('plus')"
        type="default"
        style="margin-bottom: 20px"
         v-if="$helpers.permission('studentManage/updateStudentMember')"
      >
        扣减时长
      </el-button>
    <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
        <el-table-column
            align="center"
            prop="buyType"
            label="变更方式"
          >
          <template slot-scope="scope">
            {{ scope.row.buyType | filterBuyType }}   
          </template>
        </el-table-column>
          <el-table-column
            align="center"
            prop="memberRankSettingName"
            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"
            prop="operatorName"
            label="操作人"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="添加时间"
          ></el-table-column>
          <el-table-column align="center" prop="activeDate" label="添加原因">
            <template slot-scope="scope">
              <Tooltip
                :content="
                  scope.row.memo
                    ? scope.row.memo
                    : '--'
                "
              />
            </template>
          </el-table-column>
      </el-table>
      <pagination
          sync
          save-key="studentLit-memberChange"
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
    </div>

    <el-dialog
      :title="`${operationType === 'add' ? '添加': '扣减'}学练宝`"
      width="600px"
      :visible.sync="cloudDateVisible"
      append-to-body
      @close="() => {
          getList()
          getUserInfo()
        }"
    >
      <setMemberDate
        v-if="cloudDateVisible"
        :memberRankList="memberRankList"
        :type="operationType"
        :row="userDetail"
        @close="cloudDateVisible = false"
        @confirm="() => {
          getList()
          getUserInfo()
        }"
      ></setMemberDate>
    </el-dialog>
  </div>
</template>
<script>
import setMemberDate from "./setMemberDate";
import pagination from "@/components/Pagination/index";
import Tooltip from "@/components/Tooltip";
import { api_studentMemberUpdateLog, api_studentManageUserInfo } from "../api";
import { getTimeFormat } from "@/utils";
export default {
  props: ["row", "type", "memberRankList"],
  components: {
    pagination,
    Tooltip,
    setMemberDate
  },
  data() {
    return {
      userDetail: {},
      cloudDateVisible: false,
      searchForm: {
        memberRankSettingId: null,
        buyType: null,
        operatorName: null,
        timer: [],
      },
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      operationType: 'add',
    };
  },
  mounted() {
    this.getUserInfo()
    this.getList()
  },
  methods: {
    async getUserInfo() {
      try {
        const { data } = await api_studentManageUserInfo({ userId: this.row.userId })
        this.userDetail = data;
      } catch {}
    },
    async getList() {
      try {
        const { timer, memberRankSettingId, ...more } = this.searchForm
        let rankId = null;
        if(memberRankSettingId && memberRankSettingId.length > 0) {
          rankId = memberRankSettingId[memberRankSettingId.length - 1]
        }
        let params = { ...more, ...getTimeFormat(timer, ["startTime", "endTime"]), userId: this.row.userId, memberRankSettingId: rankId };
        const { data } = await api_studentMemberUpdateLog(params)
        this.tableList = data.rows || []
        this.pageInfo.total = data.total || 0
      } catch {}
    },
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet() {
      this.$nextTick(() => {
        this.searchForm.timer = []
        this.onSearch();
      });
    },
    operationTimer(type) {
      this.operationType = type
      this.cloudDateVisible = true
    }
  },
  filters: {
    filterBuyType(type) {
      const template = {
        1: '自行购买',
        2: '后台添加',
        3: '后台扣减',
      }
      return template[type]
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
  font-size: 16px;
  color: #000;
}
</style>