dy-admin-manager/src/views/teacherManager/teacherDetail/components/timerList.vue

<!--  -->
<template>
  <div class="m-core">
    <div class="wrap">
      <div class="newBand"
           v-permission="'sysTenantAccount/addMinutes'"
           style="margin-right:20px"
           @click="addTimer">系统充值</div>
      <div class="newBand"
           v-permission="'sysTenantAccount/subtractMinutes'"
           @click="subTimer">系统扣除</div>
    </div>
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-select clearable
                   placeholder="操作类型"
                   v-model="searchForm.transType">
          <el-option :label="item.label"
                     :value="item.value"
                     v-for="(item,index) in teacherTimeStatus"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker style="width: 400px;"
                        v-model.trim="searchForm.courseDate"
                        type="daterange"
                        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 @click="search"
                   type="danger">搜索</el-button>
        <el-button @click="onReSet"
                   type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="font-size: 14px; color: #F85043; padding-bottom: 10px;">可用时间：{{ totalTransMinutes }}分钟 &nbsp;&nbsp;&nbsp;&nbsp;</div>
    <div class="tableWrap">
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center"
                         prop="updateTime"
                         label="操作时间">
          <template slot-scope="scope">
            <div>{{scope.row.updateTime | dateForMinFormat}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作类型">
          <template slot-scope="scope">
            <div>{{scope.row.transType | transTypeFilter}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="operatorId"
                         label="操作人">
          <template slot-scope="scope">
            <div>{{scope.row.operatorId?scope.row.operatorId:scope.row.userId}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="transMinutes"
                         label="时间变动/分钟">
          <template slot-scope="scope">
            <div>{{scope.row.transMinutes +'分钟'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="totalAvailableMinutes"
                         label="剩余时间/分钟">
          <template slot-scope="scope">
            <div>{{scope.row.totalAvailableMinutes +'分钟'}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="memo"
                         label="备注"></el-table-column>
      </el-table>
      <pagination :total="pageInfo.total"
                  :page.sync="pageInfo.page"
                  :limit.sync="pageInfo.limit"
                  :page-sizes="pageInfo.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog :title="maskTitle"
               width="440px"
               :visible.sync="timerVisible">
      <el-form :model="timerForm"
               ref="timerForm">
        <el-form-item :label="isAdd?'本次充值':'本次扣除'"
                      prop="minutes"
                      :rules="[{ required: true, message: '请输入时间' }]">
          <el-row>
            <el-col :span="28">
              <el-input type="number"
                        @mousewheel.native.prevent
                        v-model.trim="timerForm.minutes"
                        @keyup.native="handleInput">
                <template slot="append">分钟</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="操作备注"
                      prop="memo"
                      :rules="[{ required: true, message: '请输入备注' }]">
          <el-row>
            <el-col :span="28">
              <el-input type="textarea"
                        :rows="3"
                        v-model.trim="timerForm.memo"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="timerVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addTimerSub(isAdd)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { teacherTimeStatus } from "@/utils/searchArray";
import pagination from "@/components/Pagination/index";
import {
  queryTenantAccountList,
  sysTenantAccountAddMinutes,
  sysTenantAccountSubtractMinutes,
  queryTenantAcGet
} from "@/api/teacherManager";
export default {
  components: { pagination },
  data () {
    return {
      teacherId: null,
      teacherTimeStatus,
      searchForm: {
        courseDate: [],
        transType: null
      },
      maskTitle: "",
      isAdd: false,
      totalTransMinutes: 0,
      tableList: [],
      timerVisible: false,
      timerForm: {
        minutes: null,
        memo: null
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 1, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      this.teacherId = this.$route.query.teacherId;

      this.getList();
    },
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReSet () {
      (this.searchForm = {
        courseDate: [],
        transType: null
      }),
        this.search();
    },
    getTime () {
      queryTenantAcGet({ teacherId: this.teacherId }).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.totalTransMinutes = res.data.availableMinutes;
          }
        }
      });
    },
    getList () {
      let obj = {};
      if (this.searchForm.courseDate && this.searchForm.courseDate.length > 0) {
        obj.startTime = this.searchForm.courseDate[0] + ' 00:00:00';
        obj.endTime = this.searchForm.courseDate[1] + ' 23:59:59';
      }
      this.searchForm.transType
        ? (obj.transType = this.searchForm.transType)
        : null;
      obj.userId = this.teacherId;
      obj.page = this.pageInfo.page;
      obj.rows = this.pageInfo.limit;
      queryTenantAccountList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
      this.getTime();
    },
    addTimer () {
      this.isAdd = true;
      this.maskTitle = "充值时间";
      this.timerVisible = true;
    },
    subTimer () {
      this.isAdd = false;
      this.maskTitle = "扣除时间";
      this.timerVisible = true;
    },
    addTimerSub (flag) {
      // true 加时间  false 减时间
      this.$refs["timerForm"].validate(res => {
        if (res) {
          let obj = {
            teacherId: this.teacherId,
            minutes: this.timerForm.minutes,
            memo: this.timerForm.memo
          };
          if (flag) {
            sysTenantAccountAddMinutes(obj).then(res => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.timerVisible = false;
                this.getList();
              }
            });
          } else {
            sysTenantAccountSubtractMinutes(obj).then(res => {
              if (res.code == 200) {
                this.$message.success("扣除成功");
                this.timerVisible = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    handleInput () {
      this.timerForm.minutes = this.timerForm.minutes.replace(/[^\.\d]/g, "");
      this.timerForm.minutes = this.timerForm.minutes.replace(".", "");
    }
  },
  watch: {
    timerVisible (val) {
      if (!val) {
        this.timerForm = {
          minutes: null,
          memo: null
        };
        this.$refs["timerForm"].resetFields();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
/deep/.el-textarea__inner {
  width: 254px;
}
</style>