element-ui 分页注意事项

<template>
  <div id="monitor">
    一页显示
    {{currentCount}}条
    当前第
    {{currentPage}}页
    <jc-card style="margin-bottom: 2px;">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">全局查询</span>
      </div>
      <div class="jc-container-table-actionBar">
        <jc-form class="jc-box-table-search" :inline="true">
          <jc-form-item label="记录时间">
            <jc-date-picker
              v-model="timePicker"
              type="datetimerange"
              :picker-options="trange"
              placeholder="选择时间范围"
              align="right">
            </jc-date-picker>
          </jc-form-item>

          <jc-form-item label="提报时间">
            <jc-date-picker
              v-model="sub_picker"
              type="datetimerange"
              :picker-options="trange"
              placeholder="选择时间范围"
              align="right">
            </jc-date-picker>
          </jc-form-item>

          <jc-form-item label="工单级别">
            <jc-select v-model="gdForm['jibie=']" placeholder="工单级别" clearable>
              <jc-option label='高' value="高"></jc-option>
              <jc-option label="中" value="中"></jc-option>
              <jc-option label="低" value="低"></jc-option>
            </jc-select>
          </jc-form-item>
          <jc-form-item label="工单来源">
            <jc-select v-model="gdForm['source=']" placeholder="工单来源" clearable>
              <jc-option label='咚咚' value="咚咚"></jc-option>
              <jc-option label="邮箱" value="邮箱"></jc-option>
              <jc-option label="电话" value="电话"></jc-option>
              <jc-option label="微信" value="微信"></jc-option>
            </jc-select>
          </jc-form-item>

          <jc-form-item label="工单状态">
            <jc-select v-model="gdForm['zhuangtai=']" placeholder="工单状态" clearable>
              <jc-option label='进行中' value="进行中"></jc-option>
              <jc-option label="完成" value="完成"></jc-option>
            </jc-select>
          </jc-form-item>

          <jc-form-item label="一级分类">

            <jc-select v-model="gdForm['fenlei=']" placeholder="一级分类" clearable
                       @change="get_second">
              <jc-option
                v-for="item in first_kinds"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </jc-option>
            </jc-select>
          </jc-form-item>

          <jc-form-item label="记录人">
            <jc-input placeholder="记录人" v-model="gdForm['author=']"></jc-input>
          </jc-form-item>

          <jc-form-item label="提报人">
            <jc-input placeholder="查询提报人" v-model="gdForm['realName=']"></jc-input>
          </jc-form-item>


          <jc-form-item label="受派人">
            <jc-input placeholder="查询受派人" v-model="gdForm['shoupairen=']"></jc-input>
          </jc-form-item>

          <jc-form-item>
            <jc-button icon="search" @click="submitSearch" type="primary">搜索</jc-button>
          </jc-form-item>
          <jc-form-item>
            <jc-button icon="jc-icon-my-arrow-square-down" class="jc-button--primary" @click="download">下载
            </jc-button>
          </jc-form-item>

          <jc-form-item>
            <jc-badge class="mark" style="left: 20px;" :value="total"/>
          </jc-form-item>

        </jc-form>
      </div>
    </jc-card>

    <jc-row>
      <div class="jc-container-table">

        <div class="jc-container-table">
          <div class="jc-container-table">
            <jc-table :data="gongData.data" style=" 100%" v-loading="loading">

              <jc-table-column sortable label="工单号">
                <template slot-scope="scope">
                  <router-link :to="{name:'RecordDetail',params:{id:scope.row.id}}">{{scope.row.danhao}}
                  </router-link>
                </template>
              </jc-table-column>

              <jc-table-column sortable label="概要">
                <template slot-scope="scope">
                  <span :title="scope.row.title">{{scope.row.title|sub}}</span>
                </template>
              </jc-table-column>

              <jc-table-column prop="author" sortable label="创建人">
              </jc-table-column>

              <jc-table-column prop="kehu" sortable label="提报人">
                <template slot-scope="scope">
                  <a :href="scope.row.kehu|addUrl" style="margin-top: 5px"><i class="icon iconfont icon-dongdong"
                                                                              style="margin-top: 10px"></i></a>
                  <span v-if="scope.row.realName">{{scope.row.realName}}</span>
                  <span v-else>{{scope.row.kehu}}</span>
                </template>
              </jc-table-column>

              <jc-table-column prop="jibie" sortable label="优先级/来源">
                <template slot-scope="scope">
                  <span :class="levelMap[scope.row.jibie]">{{scope.row.jibie}}</span>/
                  <span>{{scope.row.source}}</span>
                </template>
              </jc-table-column>

              <jc-table-column prop="shoupairen" sortable label="受派人">
              </jc-table-column>

              <jc-table-column prop="is_comment" sortable label="评价/重开">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_comment==1 && scope.row.is_restart!=1">
                      <jc-rate
                        v-model="scope.row.comment_start"
                        show-text>
                        </jc-rate>
                    </span>
                  <span v-else>
                      <span v-if="scope.row.is_restart==1">工单重开</span>
                      <span v-if="scope.row.is_comment==0 && scope.row.is_restart==0">未评价</span>
                      <span v-if="scope.row.gong_id"></span>
                      <span style="color:#0055aa" v-else>未发起</span>
                    </span>
                </template>
              </jc-table-column>

              <jc-table-column prop="zhuangtai" sortable label="状态">
                <template slot-scope="scope">
                  <span :class="statusMap[scope.row.zhuangtai]">{{scope.row.zhuangtai}}</span>
                  <jc-popover ref="popover1" placement="top-start" title="详细内容" width="400" trigger="hover">
                    <span v-html="scope.row.fangan"></span>
                  </jc-popover>
                  <a href="#" class="jc-icon-my-help" v-popover:popover1></a>
                </template>
              </jc-table-column>

              <jc-table-column prop="sub_time" label="提报时间" sortable></jc-table-column>

              <jc-table-column label="分类" sortable>
                <template slot-scope="scope">
                  {{scope.row.fenlei}} <span style="color:#c00">/</span> {{scope.row.leixing}}<span
                  style="color:#c00">/</span>{{scope.row.leixing2}}
                </template>
              </jc-table-column>

            </jc-table>
            <!--current-page 表示默认的选中的页面-->
            <div class="jc-container-table-actionBar">
              <jc-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]"
                             :page-size="currentCount"
                             layout="total, sizes, prev, pager, next, jumper" :total="gongData.total">
              </jc-pagination>

            </div>
          </div>
        </div>
      </div>
    </jc-row>

  </div>
</template>

<script>
  import {getDepart, getFirstKind, getSecondKind, getThirdKind} from '../../api/index'

  const statusMap = {
    '进行中': 'jc-status-progress',
    '完成': 'jc-status-success',
  }

  const levelMap = {
    "高": "jc-status-danger",
    "中": "js-status-warning",
    "低": "jc-status-info"
  }

  import {getGongdan} from '../../api/index'
  import getStringTime from '../../utils/timeformat'
  import timeRange from '../../utils/timerange'
  import qs from 'qs'
  import {mapState} from "vuex"

  export default {
    name: "monitor",
    data() {
      return {
        gongData: {},
        loading: true,
        timerange: "",
        s_value: "",
        s_v: "",
        statusMap: statusMap,
        levelMap: levelMap,
        currentPage: 1,
        currentCount: 50,
        trange: timeRange,
        author: "",
        timePicker: [],
        sub_picker: [],
        gdForm: {
          "jilu_time>=": "",
          "jilu_time<=": "",
          "zhuangtai=": "",
          "jibie=": "",
          "miaoshu=": "",
          "source=": "",
          "fenlei=": "",
          "leixing=": "",
          "leixing2=": "",
          "shoupairen=": "",
          "realName=": "",
          "sub_time>=": "",
          "sub_time<=": "",
          "author=": "",
        },
        real_first: "",
        real_second: "",
        first_kinds: [{name: "", id: ""}],
        second_kinds: [],
        third_kinds: [],
        all_kinds: [],
        t: "onet",
      }
    },
    async created() {
      let data = await getGongdan();
      this.gongData = data;
      if (this.gongData) {
        this.loading = false;
      }
      this.first_kinds = await getFirstKind()
    },
    methods: {
      async handleSizeChange(val) {
        this.loading = true;
        let query = qs.stringify(this.gdForm);
        let data = await getGongdan(1, val, query);
        if (data) {
          this.gongData = data;
          this.loading = false;
        }
        this.currentCount = val;
        this.currentPage = 1;
      },
      async handleCurrentChange(val) {
        this.loading = true;
        this.currentPage = val;// 先定义分页，需要写在异步请求的前面
        let query = qs.stringify(this.gdForm);
        let data = await getGongdan(val, this.currentCount, query);
        if (data) {
          this.gongData = data;
          this.loading = false;
        }
      },
      async submitSearch() {
        //保证时间有值
        let isTime = this.timePicker.every((item) => {
          return item;
        });

        if (isTime) {
          // 将时间对象转换时间字符串
          this.gdForm['jilu_time>='] = getStringTime(this.timePicker[0]);
          this.gdForm['jilu_time<='] = getStringTime(this.timePicker[1]);
        } else {
          this.gdForm['jilu_time>='] = "";
          this.gdForm['jilu_time<='] = "";
        }

        //确保时间范围都有值
        let tiTime = this.sub_picker.every((item) => {
          return item;
        });

        if (tiTime) {
          // 将时间对象转换时间字符串
          this.gdForm['sub_time>='] = getStringTime(this.sub_picker[0]);
          this.gdForm['sub_time<='] = getStringTime(this.sub_picker[1]);
        } else {
          this.gdForm['sub_time>='] = "";
          this.gdForm['sub_time<='] = "";
        }

        this.loading = true;
        let query = qs.stringify(this.gdForm);
        this.gongData = await getGongdan(1, 50, query);
        if (this.gongData) {
          this.loading = false;
        }
        this.loading = false;
        this.currentPage = 1;
        this.currentCount = 50;
      },
      download() {
        // 访问后端来下载数据
        window.open("http://jdjk.jd.com/api/gongdan/download", "_self");
      },
      showDetail(id) {
        this.isShowDetail = true;
      },
      async get_second() {
        this.gdForm['leixing='] = "";
        this.gdForm['leixing2='] = "";
        if (this.gdForm['fenlei=']) {
          //获取第二分类
          let data = await getSecondKind(this.gdForm['fenlei=']);
          this.second_kinds = data;
        }

      },
      async get_third() {
        this.gdForm['leixing2='] = "";
        if (this.gdForm['leixing=']) {
          let data = await getThirdKind(this.gdForm['fenlei='], this.gdForm['leixing=']);
          this.third_kinds = data;
        }
      }
    },
    filters: {
      sub(val) {
        return String(val).substring(0, 15) + "...";
      },
      addUrl(val) {
        return "timline://chat/?topin=" + val;
      }
    },
    computed: {
      total() {
        return this.gongData.total;
      },
      ...mapState(['is_submit'])
    },
    watch: {
      /**
       * 如果全局的state.is_submit提交成功，则自动请求页面
       * @param newVal
       * @param oldVue
       * @returns {Promise<void>}
       */
      async is_submit(newVal, oldVue) {
        console.log(newVal);
        console.log(oldVue);
        if (newVal > oldVue) {
          this.loading = true;
          let data = await getGongdan();
          this.gongData = data;
          if (this.gongData) {
            this.loading = false;
          }
        }
      }
    }
  }

</script>

<style scoped>
  #monitor {
  }

  .jc-container-table-actionBar {
    transition: all .3s linear;
  }

  .jc-badge {
    margin-top: -7px !important;
  }

</style>