vd/frontend/src/views/virtual/cards/js/index.js

import * as API from 'api/virtual/cards';

export default {
  name: 'Cards',
  components: {
    UiDetail: resolve => require(['views/virtual/cards/detail'], resolve)
  },
  data() {
    return {
      params: {
        'id': null,
        'sim': null,
        'company_name': null,
        'package_name': null,
        'carrier_operator': null,
        'time': []
      },
      list_data: null,
      detailObj: {
        show: false,
        data: null
      },
      search: {
        show: false
      },
      table_titles: [{
        title: '客户编号',
        key: 'id',
        width: 150
      },
      {
        title: 'SIM',
        key: 'sim',
        width: 150
      },
      {
        title: '运营商',
        key: 'carrier_operator',
        width: 90
      },
      {
        title: '企业名称',
        key: 'company_name',
        width: 300
      },
      {
        title: '套餐名称',
        key: 'package_name',
        width: 110
      },
      {
        title: '状态',
        key: 'status_name',
        width: 110
      },
      {
        title: '服务时间',
        key: '',
        width: 170,
        render: (h, {
          row,
          column,
          index
        }) => {
          return h('span', row.service_start_at + ' - ' + row.service_end_at);
        }
      },
      {
        title: '创建时间',
        key: 'created_at',
        width: 170
      },
      {
        title: '操作',
        key: 'action',
        render: (h, {
          row,
          column,
          index
        }) => {
          let html = [];

          if (this.haveJurisdiction('show')) {
            html.push(h('Button', {
              props: {
                type: 'dashed',
                size: 'small',
                disabled: false,
                icon: 'md-eye'
              },
              class: ['btn'],
              on: {
                click: (event) => {
                  this.detailObj = {
                    show: true,
                    data: row
                  };
                }
              }
            }, '查看'));
          }

          if (html.length) {
            return h('div', html);
          }
        }
      }
      ]
    };
  },
  created() {
    this.index(1);
  },
  methods: {
    /**
     * [index 列表]
     * @param  {Number} page [description]
     * @return {[type]}      [description]
     */
    index(page = 1) {
      let params = Object.assign({
        orderBy: 'id',
        sortedBy: 'asc'
      }, this.params);

      if (this.params.sim) {
        params.sim = this.params.sim.split(/[\s|,|;]+/);
      }

      let data = this.searchDataHandle({}, {
        page
      }, params);
      this.isShowLoading(true);
      API.index(data).then(res => {
        this.isShowLoading(false);
        if (res.code == 0) {
          this.list_data = res.data;
        }
      }).catch(() => {
        this.isShowLoading(false);
      });
    },

    /**
     * [request 刷新]
     * @return {[type]} [description]
     */
    request() {
      const result = this.list_data;
      let page = result.current_page;

      if (result && result.data.length == 1) {
        page = this.returnPage(result.total, result.current_page, result.per_page);
      }

      this.index(page);
    },

    resetSearch() {
      for (let k in this.params) {
        if (k === 'time') {
          this.params[k] = [];
        } else {
          this.params[k] = null;
        }
      }
      this.index(1);
    },

    exportExcel() {
      let params = Object.assign({
        orderBy: 'id',
        sortedBy: 'asc'
      }, this.params);

      if (this.params.sim) {
        params.sim = this.params.sim.split(/[\s|,|;]+/);
      }

      let data = this.searchDataHandle({}, {
        limit: 0
      }, params);
      this.isShowLoading(true);

      API.exportExcel(data).then(res => {
        this.isShowLoading(false);

        if (res.code === 0) {
          if (res.url) {
            this.downloadFile(res.url);
          } else {
            this.$Modal.success({
              title: '提示',
              content: '当前导出数据量大，已进入后台队列导出模式，请稍后至导出列表查看下载。'
            });
          }
        }
      }).catch(() => {
        this.isShowLoading(false);
      });
    }
  }
};