admin/src/pages/system/caseManager/caseInfo/editCase/index.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>案场名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入名称"
                v-model="postData.CaseName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场地址：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请填写详细地址"
                v-model="postData.CaseAddress">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请填写详细描述"
                v-model="postData.CaseDesc">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场电话：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="限中国地区有效号码"
                v-model="postData.CaseTel"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场头像：<em>*</em></span>
          <div class="flex-item">
            <div>
              <!-- <a class="formImg">
                <img :src="postData.CaseIcon" class="centerLabel contain" alt="">
                <i class="iconfont icon-quxiao"></i>
              </a> -->
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="postData.CaseIcon" :src="postData.CaseIcon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>是否开放:<em>*</em></span>
          <div class="flex-item">
            <el-switch
              v-model="switchValue"
              active-color="#13ce66">
            </el-switch>
          </div>
        </li>
        <li class="flex-h">
          <span>左击地图获取经纬度：<em>*</em></span>
          <div class="flex-item" style="margin-left: 10px;">
            <div style="width:50%">
              <el-input
                placeholder=""
                v-model="postData.Coordinate"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="map flex-v">
          <div class="search">
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          </div>
          <div class="flex-item">
            <div>
              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
                <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
              </el-amap>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: '',
  data () {
    var _self = this
    return {
      postData: {
        OrgId: '', // 机构id
        CaseId: '', // 案场id
        CaseName: '', // 案场名称
        CaseDesc: '', // 案场描述
        CaseIcon: '', // 案场图标
        CaseAddress: '', // 案场地址
        CaseTel: '', // 案场电话
        Coordinate: '', // 经纬度
        Status: '', // 状态  0表示未开放, 1表示已开放
        CreatDate: '', // 创建日期
        CreatUser: '', // 创建人
      },
      switchValue: false, // 控制开关, 对应 postData.Status 字段 0=false, 1=true, 默认值 false
      markers: [],
      searchOption: {
        city: '南京',
        citylimit: false
      },
      mapCenter: [118.789509, 32.019989],
      events: {
        click: (e) => {
          _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
        }
      },
    }
  },
  computed: {
    ...mapState({
      OrgId: x => x.app.user.OrgId,
    }),
  },
  created () {
    this.getCaseInfoById()
  },
  components: {},
  methods: {
    ...mapActions([
      'updateSystemInfo'
    ]),
    getCaseInfoById () { // 获取案场信息
      this.$ajax(this.$api.caseManager.getCaseInfo.url, {
        method: this.$api.caseManager.getCaseInfo.method,
        urlData: { id: this.$route.query.id }
      }).then(res => {
        this.postData = res
        if (this.postData.Status === 0) {
          this.switchValue = false
        } else {
          this.switchValue = true // 是否开放状态
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.postData.CaseIcon = res.result.url
    },
    onSearchResult (pois) { // 搜索地图
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    },
    submit () { // 提交数据
      if (this.postData.CaseName === '') {
        this.$message({
          type: 'error',
          message: '请填写案场名称！'
        })
        return false
      }
      if (this.postData.CaseAddress === '') {
        this.$message({
          type: 'error',
          message: '请填写案场地址！'
        })
        return false
      }
      if (this.postData.CaseIcon === '') {
        this.$message({
          type: 'error',
          message: '请上传案场图片！'
        })
        return false
      }
      if (this.postData.Coordinate === '') {
        this.$message({
          type: 'error',
          message: '案场在地图上的位置不明确，请在地图上抓取地址获取经纬度！'
        })
        return false
      }
      this.postData.Status = this.switchValue === false ? 0 : 1 // 是否开放状态
      this.postData.OrgId = this.OrgId
      this.$ajax(this.$api.caseManager.addCase.url, {
        method: this.$api.caseManager.addCase.method,
        data: this.postData
      }).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.updateSystemInfo().then(() => {
          this.$router.push({ name: 'caseInfo' })
        })
      })
    },
    cancel () { // 取消
      this.$router.push({ name: 'caseInfo' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>