live-cms/src/views/room/statList.vue

<template>
  <div id="statList">
    <el-row>
      <el-col :span="24" class="index">
        <el-col :span="24" class="top">
          <topInfo :topTitle="pageTitle"></topInfo>
        </el-col>
      </el-col>
      <el-col :span="24" class="add" style="text-align:right">
        <el-button size="mini" type="primary" @click="excelBtn()" icon="el-icon-plus">导出</el-button>
      </el-col>
      <el-col :span="24" class="info">
        <data-table :fields="fields" :data="list" :opera="opera" :total="total" @query="searchInfo"></data-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import topInfo from '@/layout/public/top.vue';
import dataTable from '@/components/data-table.vue';
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: lookuser } = createNamespacedHelpers('lookuser');
export default {
  name: 'statList',
  props: {},
  components: {
    topInfo,
    dataTable,
  },
  data: () => ({
    opera: [],
    fields: [
      { label: '房间号', prop: 'roomname' },
      { label: '观看用户', prop: 'username' },
      { label: '身份证号', prop: 'idnumber' },
      { label: '年龄', prop: 'age' },
      { label: '性别', prop: 'gender' },
      { label: '手机号', prop: 'phone' },
      { label: '所在地', prop: 'address' },
      { label: '医院', prop: 'hosname' },
      { label: '科室', prop: 'deptname' },
      { label: '职务', prop: 'level' },
      { label: '专业', prop: 'major' },
      { label: '是否基层', prop: 'isjc' },
      { label: '是否授予学分', prop: 'isxf' },
      { label: '观看时间', prop: 'createtime' },
    ],
    list: [],
    total: 0,
  }),
  created() {
    this.searchInfo();
  },
  methods: {
    ...lookuser(['query']),
    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, roomname: this.name, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 导出
    excelBtn() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');
        const tHeader = [
          '房间号',
          '观看用户',
          '身份证号',
          '年龄',
          '性别',
          '手机号',
          '所在地',
          '医院',
          '科室',
          '职务',
          '专业',
          '是否基层',
          '是否授予学分',
          '观看时间',
        ];
        const filterVal = [
          'roomname',
          'username',
          'idnumber',
          'age',
          'gender',
          'phone',
          'address',
          'hosname',
          'deptname',
          'level',
          'major',
          'isjc',
          'isxf',
          'createtime',
        ];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    name() {
      return this.$route.query.name;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>
<style lang="less" scoped>
.add {
  height: 40px;
  line-height: 35px;
  padding: 0 15px;
}
</style>