设备信息维护详情页加按钮

gassafety-web/src/views/device/deviceInfo/index.vue

@@ -83,9 +83,9 @@
     </el-row>
 
     <el-table v-loading="loading" :data="deviceInfoList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @selection-change="handleSelectionChange">
-      <el-table-column label="设备名称" align="center" prop="deviceName" />
-      <el-table-column label="所属管道" align="center" prop="pipeName" />
-      <el-table-column label="设备编号" align="center" prop="deviceCode" />
+      <el-table-column label="设备名称" align="center" prop="deviceName" width="240px"/>
+      <el-table-column label="所属管道" align="center" prop="pipeName" width="240px"/>
+      <el-table-column label="设备编号" align="center" prop="deviceCode" width="240px"/>
       <el-table-column label="设备类型" align="center" prop="deviceType">
         <template slot-scope="scope">
           <span v-if="scope.row.deviceType == 1">调压阀</span>
@@ -95,9 +95,9 @@
         </template>
       </el-table-column>
       <el-table-column label="设备型号" align="center" prop="deviceModel" />
-      <el-table-column label="所在地址" align="center" prop="deviceAddr" />
-      <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" prop="deviceAddr" width="280px"/>
+      <el-table-column label="安装日期" align="center" prop="installationTime" />
+      <el-table-column label="最后巡检日期" align="center" prop="inspectionTime" >
         <template slot-scope="scope">
           <span v-if="scope.row.inspectionTime != null">{{ scope.row.inspectionTime }}</span>
           <span v-if="scope.row.inspectionTime == null">-</span>

gassafety-web/src/views/device/pipe/index.vue

@@ -83,8 +83,8 @@
     </el-row>
 
     <el-table v-loading="loading" :data="pipeList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @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="pipeName" width="280px"/>
+      <el-table-column label="管道编号" align="center" prop="pipeCode" width="240px"/>
       <el-table-column label="管道类型" align="center" prop="pipeType" >
         <template slot-scope="scope">
           <span v-if="scope.row.pipeType == 1">地埋管线</span>
@@ -100,7 +100,7 @@
         </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="pipeAddr" width="280px"/>
       <el-table-column label="安装日期" align="center" prop="installationTime" width="180" />
       <el-table-column label="最后巡检日期" align="center" prop="inspectionTime" width="180" >
         <template slot-scope="scope">
@@ -162,8 +162,7 @@
               <i
                 slot="suffix"
                 style="color: #000; font-style: normal; margin-right: 10px"
-              >米</i
-              >
+              >米</i>
             </el-input>
           </el-form-item>
         </el-col>

gassafety-web/src/views/device/pipeDetail/index.vue

@@ -70,32 +70,164 @@
         </el-col>
       </el-row>
 
-      <!-- <div style="width: 100%;height: 440px;">
-        <div style="float: left;width: 50%;">
+      <div class="" style="width: 95%; height: 60px;margin-left: 50px;text-align: center;">
+        <el-button
+          size="normal"
+          type="primary"
+          icon="el-icon-edit"
+          @click="handleUpdate(form)"
+          v-hasPermi="['device:pipe:edit']"
+        >修改</el-button>
+        <el-button
+          size="normal"
+          type="primary"
+          icon="el-icon-delete"
+          @click="handleDelete(form)"
+          v-hasPermi="['device:pipe:remove']"
+        >删除</el-button>
 
 
+        <!-- 添加或修改管道信息对话框 -->
+        <el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel">
+          <el-form ref="editForm" :model="editForm" :rules="rules" label-width="135px">
+            <el-col :span="23">
+              <el-form-item label="管道名称" prop="pipeName">
+                <el-input v-model="editForm.pipeName" placeholder="请输入管道名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item label="管道编号" prop="pipeCode">
+                <el-input v-model="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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> -->
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 
-  import { getPipe } from "@/api/device/pipe";
+  import { updatePipe, getPipe } from "@/api/device/pipe";
   import gaodeMap from "utils/gaodeMap.js";
-  import { DEVICE_TYPE } from "utils/gaodeMap.js";
+  import MyFileUpload from '@/components/MyFileUpload';
+  import Mapdialog from "@/components/mapDialog/checkPipeLineLocation.vue";
 
   export default {
     name: "PipeDetail",
     components: {
+      MyFileUpload,
+      Mapdialog
     },
     data() {
       return {
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 上传文件列表
+        fileList: [],
+        // 地图
+        loadmap: false,
+        dialogTableVisible: false,
+        // 管道类型字典
+        typeOptions: [],
+        str: "",
+        // 管道压力数据字典
+        pressureOptions: [],
         // 表单参数
-        form: { },
+        form: {
+        },
+        editForm: {
+        },
         // 表单校验
         rules: { }
       };
@@ -104,6 +236,12 @@
       // 如果是跳转来的，则接受初始化参数
       this.pipeId = this.$route.query.pipeId;
       this.getDetail();
+      this.getDicts("t_pipe_type").then(response => {
+        this.typeOptions = response.data;
+      });
+      this.getDicts("t_pipe_pressure").then(response => {
+        this.pressureOptions = response.data;
+      });
     },
     mounted(){
       let gaoMap =  new gaodeMap("石家庄");
@@ -116,6 +254,79 @@
           this.gaoMap.onlyLine(this.form);
         });
       },
+      getFileInfo(res){
+        this.editForm.iconUrl = res.url;
+      },
+      listRemove(e) {
+        this.editForm.iconUrl = "";
+        this.fileList = [];
+      },
+      confirmFun(res) {
+        //确认选择坐标
+        this.editForm.coordinates = res;
+      },
+      MapdialogFun() {
+        this.loadmap = true;
+        this.dialogTableVisible = true;
+      },
+      dialogcancelFun() {
+        this.loadmap = false;
+        this.dialogTableVisible = false;
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.fileList = [];
+      },
+      /** 修改按钮操作 */
+      handleUpdate(res) {
+        getPipe(res.pipeId).then(response => {
+          this.editForm = response.data;
+          if (this.editForm.iconUrl) {
+            this.fileList.push({
+              url: this.editForm.iconUrl,
+            });
+          }
+          if(this.editForm.coordinates){
+            this.str = this.editForm.coordinates;
+          }
+          this.open = true;
+          this.title = "修改管道信息";
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["editForm"].validate(valid => {
+          if (valid) {
+            console.log(this.editForm);
+            updatePipe(this.editForm).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              location.reload();
+            });
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(res) {
+        res.isDel = "1";
+        var devices = " ";
+        for(var i = 0; i < res.deviceInfoList.length; i++){
+          var obj = res.deviceInfoList[i];
+          devices = devices + obj.deviceName + " ";
+        }
+        this.$confirm('请确认是否删除管道名称为"' + res.pipeName + '"的数据项，该管道下包含的设备（' + devices + '）将一并被删除', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          return updatePipe(res);
+        }).then(() => {
+          this.$router.go(-1);
+          this.msgSuccess("已删除");
+        }).catch(() => {
+        });
+      },
     }
   }
 </script>