<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="储配站" prop="stationId"> <el-select v-model="queryParams.stationId" placeholder="请选择储配站"> <el-option v-for="item in stationList" :key="item.stationId" :label="item.stationName" :value="item.stationId" /> </el-select> </el-form-item> <el-form-item label="充装人" prop="operator"> <el-input v-model="queryParams.operator" placeholder="请输入充装人" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="充装时间" prop="operateTime"> <el-date-picker v-model="operateTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange" > </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" style="color: #1890ff" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getInfo"></right-toolbar> </el-row> <el-tabs v-model="statisticsType" @tab-click="handleClick"> <el-tab-pane label="储配站" name="station"> <StationList ref="station" :queryParams="queryParams" /> </el-tab-pane> <el-tab-pane label="充装人员" name="operator"> <Operator ref="operator" :queryParams="queryParams" /> </el-tab-pane> </el-tabs> </div> </template> <script> import { gasStorageStationList } from "@/api/gasBottleTrack/gasHolderStationManage"; import StationList from "./StationList"; import Operator from "./Operator"; export default { name: "air-charge", components: { StationList, Operator }, data(){ return{ statisticsType: 'station', queryParams: { pageNum: 1, pageSize: 10, stationId: null, operator: null, operateBeginTime: null, operateEndTime: null }, operateTime: [], exportLoading: false, // 显示搜索条件 showSearch: true, stationList: [] } }, mounted(){ this.getInfo(); this.getStationInfo(); }, methods: { handleClick(){ this.queryParams.pageNum = 1; this.queryParams.pageSize = 10; this.$refs[this.statisticsType].queryDataInfo(); }, //查询 getInfo(){ this.$refs[this.statisticsType].queryDataInfo(); }, //导出 handleExport(){ this.$refs[this.statisticsType].importData(); }, getStationInfo(){ gasStorageStationList().then(res =>{ if(res.code == 200){ this.stationList = res.data; } }) }, timeChange(value){ this.queryParams.operateBeginTime = value[0]; this.queryParams.operateEndTime = value[1]; }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getInfo(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.operateTime = []; this.queryParams.operateBeginTime = null; this.queryParams.operateEndTime = null; this.handleQuery(); }, } } </script> <style scoped> </style>