szhd-safety-web-new/src/views/address/components/addAddress.vue

<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增枢纽' : '编辑枢纽'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>枢纽名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入枢纽名称" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>地址：
          </div>
          <div class="xy-table-item-content">
            <avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>

            <!-- <el-input v-model="form.address" placeholder="请输入地址" clearable style="width: 400px;"></el-input> -->
          </div>
        </div>
      </template>
      <template v-slot:lon>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>经度：
          </div>
          <div class="xy-table-item-content">
            <el-input class='maps' v-model="form.lon" disabled placeholder="请输入经度" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:lat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>纬度：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.lat" disabled placeholder="请输入地址" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    save,get
  } from "@/api/address/index.js";
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',

        form: {
          name: '',
          address: '',
          lat: '',
          lon: ''
        },
        mapparams: {
          zoom: 11,
        },
        mapform: [],
        rules: {
          name:[{
            required:true,
            message:'请输入枢纽名称'
          }],
          address:[{
            required:true,
            message:'请输入地址'
          }]
        }
      }
    },
    created() {
    },
    methods: {

      async getDetail() {
        const res = await get(this.id)
        this.form = {
          name: res?.name,
          address: res?.address,
          lat: res?.lat,
          lon: res?.lon,
        }
        this.mapform = [res.lon, res.lat, res.address]
      },
      submit() {
        if (this.type === 'add') {
          save({
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增枢纽成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑枢纽成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.mapform=[]
          this.$refs['dialog'].reset()
        }
      },
      mapform(newVal, oldVal) {
        this.form.lon = newVal[0];
        this.form.lat = newVal[1];
        this.form.address = newVal[2];
      }
    }

  }
</script>

<style scoped lang="scss">
  .xy-table-item-label {
    width: 160px;
  }

 ::v-deep .el-textarea__inner{
    width:300px;
    height: 40px!important;
    line-height: 30px;
 }
</style>