| | |
| | | </el-aside> |
| | | <el-main> |
| | | <h3>导入数据查看</h3> |
| | | <div class="type-row"> |
| | | <span class="type-label">数据类型</span> |
| | | <div class="toolbar"> |
| | | <span class="toolbar-label">数据类型</span> |
| | | <el-radio-group v-model="activeModule" size="small" @change="onModuleChange"> |
| | | <el-radio-button v-for="g in modules" :key="g.key" :label="g.key">{{ g.name }}</el-radio-button> |
| | | </el-radio-group> |
| | | <el-select v-model="type" size="small" style="width:300px" placeholder="选择数据类型" @change="onTypeSelect"> |
| | | <el-select v-model="type" size="small" style="width:250px" placeholder="选择数据类型" @change="onTypeSelect"> |
| | | <el-option-group :label="activeTypes.name"> |
| | | <el-option v-for="t in activeTypes.types" :key="t.value" :label="t.label" :value="t.value"></el-option> |
| | | </el-option-group> |
| | | </el-select> |
| | | <span class="toolbar-sep"></span> |
| | | <el-date-picker v-model="period" type="month" placeholder="报表期(全部)" value-format="yyyy-MM" clearable style="width:150px" @change="doQuery"></el-date-picker> |
| | | <el-input v-model="keyword" placeholder="企业/市州名称" clearable style="width:180px" @keyup.enter.native="doQuery"></el-input> |
| | | <el-button type="primary" size="small" @click="doQuery">查询</el-button> |
| | | <el-button size="small" icon="el-icon-full-screen" @click="toggleFullscreen">全屏查看</el-button> |
| | | </div> |
| | | <el-form :inline="true" class="filter-row"> |
| | | <el-form-item label="报表期"> |
| | | <el-date-picker v-model="period" type="month" placeholder="全部" value-format="yyyy-MM" clearable style="width:140px" @change="loadData"></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="关键字"> |
| | | <el-input v-model="keyword" placeholder="企业/市州名称" clearable style="width:200px" @keyup.enter.native="loadData"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="loadData">查询</el-button> |
| | | <el-button type="success" icon="el-icon-full-screen" @click="toggleFullscreen">全屏查看</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div style="color:#909399;font-size:12px;margin-bottom:6px"> |
| | | 共 {{ total }} 条记录,当前第 {{ page }} 页 |
| | | </div> |
| | | <div class="load-hint">共 {{ total }} 条记录,已加载 {{ records.length }} 条</div> |
| | | <div class="table-wrap" ref="tableWrap"> |
| | | <div class="table-area"> |
| | | <el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <el-pagination style="margin-top:15px;text-align:right" |
| | | background layout="total, prev, pager, next, sizes" |
| | | :total="total" :current-page.sync="page" :page-size.sync="size" |
| | | :page-sizes="[20, 50, 100]" @current-change="loadData" @size-change="loadData"> |
| | | </el-pagination> |
| | | </div> |
| | | |
| | | </el-main> |
| | | </el-container> |
| | | </el-container> |
| | |
| | | period: '', |
| | | keyword: '', |
| | | page: 1, |
| | | size: 20, |
| | | size: 50, |
| | | total: 0, |
| | | records: [], |
| | | columns: [], |
| | |
| | | if (!g.types.some(t => t.value === this.type)) { |
| | | this.type = g.types[0].value |
| | | } |
| | | this.doQuery() |
| | | }, |
| | | onTypeSelect() { this.doQuery() }, |
| | | doQuery() { |
| | | this.page = 1 |
| | | this.records = [] |
| | | this.loadData() |
| | | }, |
| | | onTypeSelect() { this.loadData() }, |
| | | loadData() { |
| | | this.loading = true |
| | | this.loadingMore = false |
| | |
| | | .type-row { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } |
| | | .type-label { color: #606266; font-weight: 600; } |
| | | .filter-row { margin-bottom: 4px; } |
| | | #app .table-wrap { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: calc(100vh - 330px); |
| | | min-height: 300px; |
| | | } |
| | | #app .table-area { |
| | | flex: 1 1 auto; |
| | | min-height: 0; |
| | | overflow: hidden; |
| | | } |
| | | #app .table-area .el-table { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | #app .table-wrap .el-pagination { |
| | | flex: none; |
| | | margin-top: 8px; |
| | | } |
| | | #app .table-area:fullscreen { |
| | | padding: 20px; |
| | | background: #fff; |
| | | overflow: auto; |
| | | } |
| | | #app .table-wrap:fullscreen { |
| | | padding: 20px; |
| | | background: #fff; |
| | | overflow: auto; |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100vh; |
| | | } |
| | | #app .table-wrap:fullscreen .table-area { |
| | | flex: 1 1 auto; |
| | | min-height: 0; |
| | | } |
| | | #app .table-wrap:fullscreen .el-pagination { |
| | | flex: none; |
| | | } |
| | | #app .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; background:#FAFAFA; border:1px solid #EBEEF5; border-radius:8px; margin-bottom:8px; } |
| | | #app .toolbar-label { color:#606266; font-weight:600; white-space:nowrap; } |
| | | #app .toolbar-sep { width:1px; height:22px; background:#DCDFE6; margin:0 2px; } |
| | | #app .load-hint { color:#909399; font-size:12px; margin-bottom:6px; } |
| | | #app .table-wrap { display:flex; flex-direction:column; height:calc(100vh - 250px); min-height:300px; } |
| | | #app .table-area { flex:1 1 auto; min-height:0; overflow:hidden; } |
| | | #app .table-area .el-table { width:100%; height:100%; } |
| | | #app .table-area:fullscreen { padding:20px; background:#fff; overflow:auto; } |
| | | #app .table-wrap:fullscreen { padding:20px; background:#fff; overflow:auto; display:flex; flex-direction:column; height:100vh; } |
| | | #app .table-wrap:fullscreen .table-area { flex:1 1 auto; min-height:0; } |
| | | </style> |