index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="query" :model="query" style="display: inline-block;">
        <el-input v-model="query.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" name="userskk" />
        <el-input v-model="query.city" placeholder="地区" style="width: 200px;" class="filter-item" name="city" />
        <el-select v-model="query.sex" placeholder="性别" clearable style="width: 90px" class="filter-item" @change="selectOneSex">
          <el-option v-for="item in importanceOptions" :key="item.key" :label="item.val" :value="item.key" />
        </el-select>
        <el-select v-model="query.state" placeholder="状态" clearable class="filter-item" style="width: 130px" @change="selectOneState">
          <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.val" :value="item.key" />
        </el-select>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSubmit">
          {{ $t('table.search') }}
        </el-button>
      </el-form>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        {{ $t('table.export') }}
      </el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">OpenId</el-checkbox>
    </div>
    <el-table :key="tableKey" v-loading="loading" :data="list" border fit highlight-current-row>
      <el-table-column align="center" label="id" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="left" label="用户名称">
        <template slot-scope="scope">
          <el-image :src="scope.row.headimgurl" :preview-src-list="srcList" style="width:50px"></el-image>
          <a class="zl-nickname">{{ scope.row.nickname | handeNickname }}</a>
        </template>
      </el-table-column>
      <el-table-column v-if="showReviewer" align="center" label="openid" width="320">
        <template slot-scope="scope">
          <span style="color: #909399;" @click="handleCopy(scope.row.openid,$event)">{{ scope.row.openid }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="性别" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.sex | handeSex }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="地区" width="220">
        <template slot-scope="scope">
          <span>{{ scope.row.country }}{{ scope.row.province }}{{ scope.row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="170">
        <template slot-scope="scope">
          <span :style="{color:( scope.row.state==1 ? '#F56C6C' : '#67C23A' )}">{{ scope.row.state==1 ? '禁用' : '正常' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
  </div>
</template>

<script>
import UserResource from '@/api/wxuser';
import clip from '@/utils/clipboard';
import Pagination from '@/components/Pagination'; // 分页
import { parseTime } from '@/utils';
import waves from '@/directive/waves'; // 水波纹效果
const Base64 = require('js-base64').Base64;
const userResource = new UserResource();
export default {
  name: 'Wxuser',
  components: { Pagination },
  directives: { waves },
  filters: {
    handeNickname: function(value) {
      return Base64.decode(value);
    },
    handeSex: function(value) {
      const sexes = [
        '未知', '男', '女',
      ];
      return sexes[value];
    },
  },
  data() {
    return {
      total: 0,
      tableKey: 0,
      list: [],
      loading: true,
      showReviewer: false,
      query: {
        page: 1,
        limit: 10,
        mobile: undefined,
        sex: undefined,
        state: undefined,
        city: undefined,
      },
      importanceOptions: [{
        'key': 0,
        'val': '未知',
      }, {
        'key': 1,
        'val': '男',
      }, {
        'key': 2,
        'val': '女',
      }],
      calendarTypeOptions: [{
        'key': 1,
        'val': '禁用',
      }, {
        'key': 2,
        'val': '启用',
      }],
      srcList: [],
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const { limit, page } = this.query;
      this.loading = true;
      const { data } = await userResource.list(this.query);
      var Wxuser = data.Wxuser;
      this.list = Wxuser;
      this.list.forEach((element, index) => {
        element['index'] = (page - 1) * limit + index + 1;
      });
      for (var item of Wxuser) {
        this.srcList.push(item['headimgurl']);
      }
      this.total = data.cont;
      this.loading = false;
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    handleDownload() {
      this.downloadLoading = true;
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['id', 'openid', 'nickname', 'sex', 'mobile', 'created_at'];
        const filterVal = ['id', 'openid', 'nickname', 'sex', 'mobile', 'created_at'];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '微信用户',
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'created_at') {
          return parseTime(v[j]);
        } else if (j === 'sex') {
          const sexes = [
            '未知', '男', '女',
          ];
          return sexes[v[j]];
        } else {
          return v[j];
        }
      }));
    },
    async handleSubmit() {
      const { limit, page } = this.query;
      this.loading = true;
      const { data } = await userResource.fetchArticle(this.query);
      var Wxuser = data.Wxuser;
      this.list = Wxuser;
      this.list.forEach((element, index) => {
        element['index'] = (page - 1) * limit + index + 1;
      });
      for (var item of Wxuser) {
        this.srcList.push(item['headimgurl']);
      }
      this.total = data.cont;
      this.loading = false;
    },
    selectOneSex(event, item) {
      if (event === '') {
        this.query.sex = undefined;
      }
    },
    selectOneState(event, item) {
      if (event === '') {
        this.query.state = undefined;
      }
    },
  },
};
</script>
<style>
  .zl-nickname{
    position: absolute;
    line-height: 50px;
    margin-left: 10px;
  }
</style>