zhangzengfei
2022-11-25 610a3c14abbd833de453bf4fe4dc0ce771482681
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <div style="padding: 20px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="reportDownload">
        <span slot="label"><i class="el-icon-s-home"></i> 自定义报表</span>
        <reportDownload :activeName.sync="activeName" @commit="getFormList" :tableData.sync="tableData"></reportDownload>
      </el-tab-pane>
      <el-tab-pane name="formList">
        <span slot="label"><i class="el-icon-s-platform"></i> 报表下载</span>
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="formName" label="报表名称"> </el-table-column>
            <el-table-column prop="formType" label="报表类型"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <!-- <el-table-column prop="createTime" label="创建时间"> </el-table-column> -->
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <a :href="scope.row.url">{{ "下载" }}</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination
            @current-change="refrash"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25]"
            :total="total"
            background
          ></el-pagination>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane name="alarmPush">
        <span slot="label"><i class="el-icon-phone"></i> 报警上报日志</span>
        <alarmPush></alarmPush>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
 
<script>
import reportDownload from "./reportDownload.vue"
import { addAreaTreeData, reportFormGetExport } from "@/api/area"
 
export default {
  components: {
    reportDownload
  },
  data() {
    return {
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,
 
      activeName: "reportDownload",
      tableData: [],
      titles: []
    }
  },
  created() {},
  mounted() {},
  methods: {
    refrash(page) {
      this.page = page
      this.getFormList()
    },
    handleSizeChange(size) {
      this.size = size
      this.getFormList()
    },
 
    async getFormList() {
      // console.log(row, "|row")
      let query = {
        FormType: "",
        KeyWords: "",
        StartTime: "",
        EndTime: "",
        Page: this.page,
        Size: this.size
      }
      let res = await reportFormGetExport(query)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    handleClick(tab,event) {
      console.log(tab, event)
      if (tab.name == "formList") {
        this.getFormList()
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
.el-pagination ::v-deep {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  height: 24px;
  .el-pagination__sizes {
    margin-right: 0;
  }
}
</style>
 
<style></style>