<template> <div> <el-dialog title="燃气用户" :visible.sync="open" width="1200px" append-to-body destroy-on-close :before-close="handleClose"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="用户名称" prop="nickName"> <el-input v-model="queryParams.nickName" placeholder="请输入用户名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="表号" prop="username"> <el-input v-model="queryParams.username" placeholder="请输入表号" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="检测时间"> <el-date-picker is-range v-model="inspectDate" size="small" type="datetimerange" range-separator="至" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item label="是否检测" prop="isInspect"> <el-select v-model="queryParams.isInspect" size="small" placeholder="请选择检测状态"> <el-option value="0" label="未检测"/> <el-option value="1" label="已检测"/> <el-option value="2" label="到访不遇"/> </el-select> </el-form-item> <el-form-item label="安检人" prop="inspector"> <el-input v-model="queryParams.inspector" placeholder="请输入安检人" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="地址" prop="address"> <el-input v-model="queryParams.address" placeholder="请输入地址" clearable size="small" @keyup.enter.native="handleQuery" /> </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 type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading" >导出</el-button> </el-col> </el-row> <el-table v-loading="loading" :data="userList"> <el-table-column label="序号" type="index" align="center" width="60"> <template slot-scope="scope"> <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span> </template> </el-table-column> <!--<el-table-column label="用户账号" align="center" prop="username" />--> <el-table-column label="用户名称" align="center" prop="nickName" > <span slot-scope="scope" v-if="scope.row.nickName">{{scope.row.nickName}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="用户类型" align="center" prop="userType" > <span slot-scope="scope" v-if="scope.row.userType">{{scope.row.userType}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="地址" align="center" prop="address" width="150" :show-overflow-tooltip="true"> <span slot-scope="scope" v-if="scope.row.address">{{scope.row.address}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="所属企业" align="center" prop="beyondEnterpriseName" > <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="表号" align="center" prop="username" > <span slot-scope="scope" v-if="scope.row.username">{{scope.row.username}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="电话" align="center" prop="phone" width="120"> <span slot-scope="scope" v-if="scope.row.phone">{{scope.row.phone}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="是否安检" align="center" prop="isInspect" > <template slot-scope="scope"> <span v-if="scope.row.isInspect == '0'">未检测</span> <span v-if="scope.row.isInspect == '1'">已检测</span> <span v-if="scope.row.isInspect == '2'">到访不遇</span> </template> </el-table-column> <el-table-column label="最近安检人" align="center" prop="inspector" > <span slot-scope="scope" v-if="scope.row.inspector">{{scope.row.inspector}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="最近安检时间" align="center" prop="inspectDate" :show-overflow-tooltip="true"> <span slot-scope="scope" v-if="scope.row.inspectDate">{{scope.row.inspectDate}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-document" @click="handleInspectDetailInfo(scope.row)" >安检详情</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getGasUserInfo" /> </el-dialog> <InspectDetail :taskId="taskId" :userId="receiveId" :open="inspectDetailOpen" @close="closeInspectDetail" /> </div> </template> <script> import InspectDetail from "./inspectDetail"; import { getDetectorUserInspectInfo, detectorUserExport } from "@/api/detector/detectorUser"; export default { name: "gas-user-info", props:{ open:{ type: Boolean, default: false }, taskId:{ type: Number } }, components:{ InspectDetail }, watch:{ open(newVal){ if(newVal){ this.queryParams.taskId = this.taskId; this.getGasUserInfo(); } } }, data(){ return{ // 查询参数 queryParams: { pageNum: 1, pageSize: 10, username: null, nickName: null, linkman: null, isInspect: null, taskId: null, inspectBeginTime: null, inspectEndTime: null, inspector: null, address: null }, total: 0, userList: [], loading: false, // 显示搜索条件 showSearch: true, inspectInfoList: [], inspectDetailOpen: false, receiveId: null, inspectDate:[], exportLoading: false } }, methods: { getGasUserInfo(){ this.loading = true; getDetectorUserInspectInfo(this.queryParams).then(res =>{ this.userList = res.rows; this.total = res.total; this.loading = false; }) }, handleClose(){ this.$emit("close"); this.resetQuery(); }, handleInspectDetailInfo(row){ if(row.isInspect && row.isInspect == '1'){ this.receiveId = row.userId; this.inspectDetailOpen = true; }else{ this.$message.error('用户未检测') } }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getGasUserInfo(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.inspectDate = []; this.queryParams.inspectBeginTime = null; this.queryParams.inspectEndTime = null; this.handleQuery(); }, closeInspectDetail(){ this.inspectDetailOpen = false; }, timeChange(val){ this.queryParams.inspectBeginTime = val[0]; this.queryParams.inspectEndTime = val[1]; }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams; this.$confirm('是否确认导出所有用户安检任务数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.exportLoading = true; return detectorUserExport(queryParams); }).then(response => { this.download(response.msg); this.exportLoading = false; }).catch(() => {}); }, } } </script> <style scoped> </style>