tmzn-weihe/src/views/hydrological-station/hyInfo.vue

<template>
  <div class="main-container">
    <el-form :model="searchForm" label-width="100px" ref="searchForm">
      <el-row>
        <el-col :span="8">
          <el-form-item label="水文站名称">
            <el-input v-model="searchForm.stationName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="水文站编号">
            <el-input v-model="searchForm.stationCode" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between" class="mb20">
        <el-col :span="12" style="text-align: left">
          <el-button size="small" icon="el-icon-plus" class="primaryBtn" @click="toAdd">新增水文站</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button size="small" icon="el-icon-search" @click="handleSearch" class="primaryBtn">查询</el-button>
          <el-button size="small" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border style="width: 100%" height="680">
      <el-table-column prop="stationCode" label="水文站编号" align="center"> </el-table-column>
      <el-table-column prop="stationName" label="水文站名称" align="center"> </el-table-column>
      <el-table-column prop="stationLocation" label="水文站位置" align="center"> </el-table-column>
      <el-table-column prop="stationCoordinates" label="水文站经纬度" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="jcInfo(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon" /> 监测信息</el-button>
          <el-button size="small" type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
          <el-button size="small" type="text" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      popper-class="v-pageination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchForm.pageSize"
      background
      small
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog :title="title" :visible.sync="addDialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="水文站名称：" prop="stationName">
          <el-input v-model="form.stationName"></el-input>
        </el-form-item>
        <el-form-item label="水文站编号：" prop="stationCode">
          <el-input v-model="form.stationCode"> </el-input>
        </el-form-item>
        <el-form-item label="水文站位置：" prop="stationLocation">
          <el-input v-model="form.stationLocation"> </el-input>
        </el-form-item>
        <el-form-item label="经度：" prop="stationLatitude">
          <el-input v-model="form.stationLatitude" type="number"> </el-input>
        </el-form-item>
        <el-form-item label="纬度：" prop="stationLongitude">
          <el-input v-model="form.stationLongitude" type="number"> </el-input>
        </el-form-item>
        <el-form-item label="水文站详情：" prop="stationDetails">
          <el-input type="textarea" :rows="6" v-model="form.stationDetails"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getHydrologicalList, toAddhydrological, toUpdatehydrological, toDelete } from '@/api/hydrologicalStationApi'
export default {
  data() {
    var checkLongitude = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入经度'))
      }
      if (value < -180 || value > 180) {
        return callback(new Error('经度必须在 -180 到 180 之间'))
      }
      callback()
    }
    var checkLatitude = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入纬度'))
      }
      if (value < -90 || value > 90) {
        return callback(new Error('纬度必须在 -90 到 90 之间'))
      }
      callback()
    }
    return {
      searchForm: {
        stationName: '',
        stationCode: '',
        pageSize: 10,
        pageNum: 1
      },
      form: {
        stationName: '',
        stationCode: '',
        stationLocation: '',
        stationLatitude: '',
        stationLongitude: '',
        stationDetails: ''
      },
      tableData: [],
      total: 0,
      title: '新增文水站',
      addDialogVisible: false,
      titleType: 'add',
      rules: {
        stationName: [{ required: true, message: '请输入水文站名称', trigger: 'blur' }],
        stationCode: [{ required: true, message: '请输入水文站编码', trigger: 'blur' }],
        stationLocation: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
        stationLatitude: [{  validator: checkLatitude, trigger: 'blur' }],
        stationLongitude: [{  validator: checkLongitude, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleSearch() {
      this.fetchData()
    },
    resetForm() {
      this.searchForm = {
        stationName: '',
        stationCode: '',
        pageSize: 10,
        pageNum: 1
      }
      this.fetchData()
    },
    jcInfo(row) {
      this.$emit('closeHy', row.id)
    },
    handleEdit(row) {
      this.title = '编辑水文站'
      this.titleType = 'edit'
      this.form = JSON.parse(JSON.stringify(row))
      this.addDialogVisible = true
    },
    handleDelete(row) {
      toDelete({ id: row.id }).then((res) => {
        if (res.data) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData()
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.fetchData()
    },
    fetchData() {
      getHydrologicalList(this.searchForm).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    toAdd() {
      this.title = '新增文水站'
      this.titleType = 'add'
      this.form = {
        stationName: '',
        stationCode: '',
        stationLatitude: '',
        stationLongitude: '',
        stationDetails: '',
        stationLocation: ''
      }
      this.addDialogVisible = true
    },
    confirmSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.titleType == 'add') {
            toAddhydrological(this.form).then((res) => {
              if (res.data) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.closeModal()
                this.fetchData()
              } else {
                this.$message({
                  message: '新增失败',
                  type: 'error'
                })
              }
            })
          } else {
            toUpdatehydrological(this.form).then((res) => {
              if (res.data) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.closeModal()
                this.fetchData()
              } else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                })
              }
            })
          }
        }
      })
    },
    closeModal() {
      this.addDialogVisible = false
      this.form = {
        stationName: '',
        stationCode: '',
        stationLatitude: '',
        stationLongitude: '',
        stationDetails: '',
        stationLocation: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form .el-select),
:deep(.el-input__inner) {
  width: 100%;
}
.mb20 {
  margin-bottom: px-to-rem(20);
}
.page {
  margin-top: px-to-rem(20);
  text-align: right;
}
.primaryBtn {
  color: #fff !important;
  background-color: #ff6a6c !important;
  border-color: #ff6a6c !important;
}
.el-upload__tip {
  color: #ff6a6c;
}
.vIcon {
  width: px-to-rem(12);
  height: px-to-rem(12);
}
:deep(.el-pager li.active) {
  background-color: rgba(240, 105, 106, 1) !important;
}
</style>