h5-service-web/src/views/bbfc/answerRecord.vue

<template>
  <div>
    <lx-header
      icon="md-apps"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="答题记录"
    >
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
          <Input
            v-model="select.keyword"
            placeholder="请输入关键字"
            style="width: 180px"
          ></Input>
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="select = {
                 page: 1,
                 page_size: 20,
                 keyword: '',
                 activity_list_id: 10
              }"
          >重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="getList"
          >查询</Button
          >
          <Button style="margin-left: 10px" type="primary" @click="exportXLSX"
          >导出</Button
          >
          <el-upload
            class="upload-demo"
            :action="action"
            :limit="1"
            :on-success="importData"
            :headers="{
               Authorization: `Bearer ${getToken()}`,
            }"
            :data="{
              'table_name': 'users'
            }"
            :show-file-list="false"
            :file-list="fileList">
            <Button style="margin-left: 10px" type="primary"
            >导入</Button
            >
          </el-upload>
        </div>
      </slot>
    </lx-header>

    <xy-table
      :list="list"
      :total="total"
      :table-item="table"
      @delete="deleteitem"
      @editor="
        (row) => {
          $refs['addPeople'].setId(row.id);
          $refs['addPeople'].setType('editor');
          $refs['addPeople'].show()
        }
      "
      @pageSizeChange="pageSizeChange"
      @pageIndexChange="pageChange"
    >
    </xy-table>
    <addPeople ref="addPeople" @refresh="getList"></addPeople>
  </div>
</template>

<script>
import addPeople from "./addPeople.vue"
import { getToken } from "@/utils/auth"
import * as XLSX from "xlsx";
import { index , save } from "@/api/activity/activityUser";
import { index as baseFormIndex } from "@/api/index/index"
export default {
  components: {
    addPeople
  },
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/api/admin/base-form/excel-show`,
      fileList: [],
      activityListId: 10,
      list: [],
      total: 0,
      table: [
        {
          prop: "name",
          label: "名称",
          width: 120,
          fixed: 'left'
        },
        {
          prop: "mobile",
          label: "手机号",
          width: 140
        },
        {
          prop: "address",
          label: "部门",
          align: "left",
          minWidth: 200
        },
        {
          prop: "score",
          label: "最高分",
          width: 100
        },
        {
          prop: "pid",
          label: "是否中奖",
          width: 120,
          formatter:(d1, d2, v) => {
            return v ? "是" : "否"
          }
        },
        {
          prop: "company_name",
          label: "奖品名称",
          width: 220
        }
      ],
      select: {
        page: 1,
        page_size: 10,
        keyword: "",
        table_name: "users",
        activity_list_id: 10,
        filter: [
          {
            key: "mobile",
            op: "neq",
            value: "null"
          }
        ]
      }
    }
  },
  methods: {
    getToken,
    async getList () {
      const res = await baseFormIndex(this.select)
      this.list = res.data;
      this.total = res.total;
    },
    deleteitem () {

    },
    pageSizeChange (e) {
      this.select.page_size = e;
      this.select.page = 1;
      this.getList()
    },
    pageChange (e) {
      this.select.page = e;
      this.getList()
    },
    async exportXLSX () {
      const res = await baseFormIndex({
        table_name: "users",
        page: 1,
        page_size: 99999,
        activity_list_id: 10,
        filter: [
          {
            key: "mobile",
            op: "neq",
            value: "null"
          }
        ]
      })
      console.log(res)
      let headers = [{ label: 'id', prop: 'id' },...this.table].map(i => ({
        name: i.label,
        key: i.prop
      }))
      const data = res.data.map(i => {
        return headers.map(header => {
          return i[header.key]
        })
      })

      data.unshift(headers.map(i => i.name))
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, '人员分数.xlsx')
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      let a = document.createElement('a');
      let url = window.URL.createObjectURL(new Blob([wbout],{ type: "application/octet-stream" }))
      a.href = url;
      a.download = '人员分数.xlsx';
      a.click();
      window.URL.revokeObjectURL(url)
    },
    importData (response, file, fileList) {
      console.log(response, file, fileList)
      Promise.all(response.map(i => {
        return save({
          ...i,
          activity_list_id: 10,
        })
      })).then(res => {
        this.$message({
          type: "success",
          message: `成功导入${res.length}条`
        })
        this.getList()
      })
    }
  },
  computed: {},
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.selects {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-bottom: 6px;
  }
}
</style>