<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px"> <el-form-item label="管道名称" prop="pipeName"> <el-input v-model="queryParams.pipeName" placeholder="请输入管道名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="管道编号" prop="pipeCode"> <el-input v-model="queryParams.pipeCode" placeholder="请输入管道编号" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="管道类型" prop="pipeType"> <el-select v-model="queryParams.pipeType" placeholder="请选择管道类型" size="small"> <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ></el-option> </el-select> </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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:pipe:add']" >新增</el-button> </el-col> <!--<el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['device:pipe:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:pipe:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['device:pipe:export']" >导出</el-button> </el-col>--> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="pipeList" @selection-change="handleSelectionChange"> <el-table-column label="管道名称" align="center" prop="pipeName" /> <el-table-column label="管道编号" align="center" prop="pipeCode" /> <el-table-column label="管道类型" align="center" prop="pipeType" > <template slot-scope="scope"> <span v-if="scope.row.pipeType == 1">地埋管线</span> <span v-if="scope.row.pipeType == 2">地表管线</span> </template> </el-table-column> <el-table-column label="管道压力" align="center" prop="pipePressure" > <template slot-scope="scope"> <span v-if="scope.row.pipePressure == 1">低压</span> <span v-if="scope.row.pipePressure == 2">中压</span> <span v-if="scope.row.pipePressure == 3">次高压</span> <span v-if="scope.row.pipePressure == 4">高压</span> </template> </el-table-column> <el-table-column label="管道长度" align="center" prop="pipeLength" /> <el-table-column label="所在地址" align="center" prop="pipeAddr" /> <el-table-column label="安装日期" align="center" prop="installationTime" width="180" /> <el-table-column label="最后巡检日期" align="center" prop="inspectionTime" width="180" /> <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-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:pipe:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="showDetail(scope.row)" >详情</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:pipe:remove']" >删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改管道信息对话框 --> <el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel"> <el-form ref="form" :model="form" :rules="rules" label-width="135px"> <el-col :span="23"> <el-form-item label="管道名称" prop="pipeName"> <el-input v-model="form.pipeName" placeholder="请输入管道名称" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="管道编号" prop="pipeCode"> <el-input v-model="form.pipeCode" placeholder="请输入管道编号" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="管道长度" prop="pipeLength"> <el-input type="number" min="0" v-model="form.pipeLength" placeholder="请输入管道长度"> <i slot="suffix" style="color: #000; font-style: normal; margin-right: 10px" >米</i > </el-input> </el-form-item> </el-col> <el-col :span="23"> <el-form-item label="管道所在地址" prop="pipeAddr"> <el-input v-model="form.pipeAddr" placeholder="请输入管道所在地址" /> </el-form-item> </el-col> <el-col :span="23"> <el-form-item label="管道坐标" prop="coordinates"> <el-col :span="18"> <el-input type="textarea" v-model="form.coordinates" placeholder="请输入管道坐标" /> </el-col> <el-col :span="5" style="margin-left: 10px"> <el-button type="primary" plain @click="MapdialogFun">选择管道坐标</el-button> </el-col> </el-form-item> </el-col> <el-col> <el-form-item label="管道类型" prop="pipeType"> <el-radio-group v-model="form.pipeType"> <el-radio label="1">地埋管线</el-radio> <el-radio label="2">地表管线</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col> <el-form-item label="管道压力" prop="pipePressure"> <!-- select --> <el-radio-group v-model="form.pipePressure"> <!-- 1低压,2中压,3次高压,4高压 --> <el-radio label="1">低压</el-radio> <el-radio label="2">中压</el-radio> <el-radio label="3">次高压</el-radio> <el-radio label="4">高压</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col> <el-form-item label="管道图片上传" prop="iconUrl"> <MyFileUpload listType="picture-card" @resFun="getFileInfo" @remove="listRemove" :fileArr="fileList" /> <el-input v-show="false" disabled v-model="form.iconUrl"></el-input> </el-form-item> </el-col> <el-col> <el-form-item label="安装日期" prop="installationTime"> <el-col :span="11"> <el-date-picker clearable size="small" style="width: 100%" v-model="form.installationTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择安装日期"> </el-date-picker> </el-col> </el-form-item> </el-col> <el-col :span="23"> <el-form-item label="备注信息" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注信息" /> </el-form-item> </el-col> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <Mapdialog v-if="loadmap" :dialogTableVisible="dialogTableVisible" @dialogcancelFun="dialogcancelFun" @confirmFun="confirmFun($event)" :str="str" ></Mapdialog> </div> </template> <script> import { listPipe, getPipe, addPipe, updatePipe, exportPipe } from "@/api/device/pipe"; import MyFileUpload from '@/components/MyFileUpload'; // import Mapdialog from "@/components/mapDialog/checkPipeLineLocation.vue"; export default { name: "Pipe", components: { MyFileUpload, Mapdialog }, data() { return { // 遮罩层 loading: true, // 导出遮罩层 exportLoading: false, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 管道信息表格数据 pipeList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 上传文件列表 fileList: [], // 地图 loadmap: false, dialogTableVisible: false, // 管道压力数据字典 pressureOptions: [], // 查询参数 queryParams: { pageNum: 1, pageSize: 10, enterpriseId: null, pipeName: null, pipeAddr: null, coordinates: null, pipeLength: null, pipeType: null, pipePressure: null, iconUrl: null, installationTime: null, inspectionTime: null, remarks: null }, // 表单参数 form: { pipeName: "", pipeType: "1", pipePressure: "1", iconUrl: "", coordinates: "" }, // 表单校验 rules: { pipeName: [ { required: true, message: "请输入管道名称", trigger: "blur" }, ], pipeCode: [ { required: true, message: "请输入管道编号", trigger: "blur" }, ], pipeLength: [ { required: true, message: "请输入管道长度", trigger: "blur" }, ], pipeAddr: [ { required: true, message: "请输入管道所在地址", trigger: "blur" }, ], pipeType: [ { required: true, message: "请选择管道类型", trigger: "blur" }, ], pipePressure: [ { required: true, message: "请选择管道压力", trigger: "blur" }, ], coordinates: [ { required: true, message: "请选择管道坐标", trigger: "blur" }, ], /*iconUrl: [ { required: true, message: "请上传图片", trigger: "change" }, ], installationTime: [ { required: true, message: "请选择日期", trigger: "change" }, ],*/ } }; }, created() { this.getList(); this.getDicts("t_pipe_type").then(response => { this.typeOptions = response.data; }); this.getDicts("t_pipe_pressure").then(response => { this.pressureOptions = response.data; }); }, methods: { /** 查询管道信息列表 */ getList() { this.loading = true; listPipe(this.queryParams).then(response => { this.pipeList = response.rows; this.total = response.total; this.loading = false; }); }, getFileInfo(res){ this.form.iconUrl = res.url; }, listRemove(e) { this.form.iconUrl = ""; this.fileList = []; }, confirmFun(res) { //确认选择经纬度 this.form.longitude = res.lng; this.form.latitude = res.lat; }, MapdialogFun() { this.loadmap = true; this.dialogTableVisible = true; }, dialogcancelFun() { this.loadmap = false; this.dialogTableVisible = false; }, // 取消按钮 cancel() { this.open = false; this.reset(); this.fileList = []; }, // 表单重置 reset() { this.form = { pipeId: null, enterpriseId: null, pipeName: null, pipeAddr: null, coordinates: null, pipeLength: null, pipeType: null, pipePressure: null, iconUrl: null, installationTime: null, inspectionTime: null, remarks: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.pipeId) this.single = selection.length!==1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "新增管道信息"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const pipeId = row.pipeId || this.ids getPipe(pipeId).then(response => { this.form = response.data; if (this.form.iconUrl) { this.fileList.push({ url: this.form.iconUrl, }); } this.open = true; this.title = "修改管道信息"; }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.pipeId != null) { updatePipe(this.form).then(response => { this.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addPipe(this.form).then(response => { this.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { row.isDel = "1"; var devices = " "; for(var i = 0; i < row.deviceInfoList.length; i++){ var obj = row.deviceInfoList[i]; devices = devices + obj.deviceName + " "; } this.$confirm('请确认是否删除管道名称为"' + row.pipeName + '"的数据项,该管道下包含的设备(' + devices + ')将一并被删除', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function () { return updatePipe(row); }).then(() => { this.getList(); this.msgSuccess("已删除"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams; this.$confirm('是否确认导出所有管道信息数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.exportLoading = true; return exportPipe(queryParams); }).then(response => { this.download(response.msg); this.exportLoading = false; }).catch(() => {}); }, /** 详细信息跳转 */ showDetail(row) { this.$router.push({ path: '/device/pipeDetail', query: { pipeId: row.pipeId } }) }, } }; </script> <style> .notice { background: white; position: fixed; top: 102px; right: 0; left: 0; margin: auto; width: 80%; height: 80%; border: solid 1px; } </style>