webapp / GreenwayWeb

  <template>
    <div>

      <el-form :model="ruleForm" :rules="rulesSt" ref="ruleForm" label-width="130px" class="demo-ruleForm">

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="场地名称" prop="venueName">
              <el-input v-model="ruleForm.venueName" placeholder="请输入"  maxlength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场地类型" prop="venueType">
              <el-select v-model="ruleForm.venueType" placeholder="请选择" style="width: 100%;">
                <el-option label="草地" value="草地"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实际使用面积" prop="actualArea">
              <el-input v-model="ruleForm.actualArea" placeholder="请输入" >
                <template slot="append">M<sup>2</sup></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域" prop="district">
              <el-select v-model="ruleForm.district" placeholder="请选择" style="width: 100%;">
                <el-option v-for="(item,index) in regionOptions"
                    :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归属部门" prop="department">
              <el-input v-model="ruleForm.department" placeholder="请输入"  maxlength="50">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="responsiblePerson">
              <el-input v-model="ruleForm.responsiblePerson" placeholder="请输入"  maxlength="20">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">

              <el-input v-model="ruleForm.contact" placeholder="请输入"  maxlength="50">

              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phoneNumber">
              <el-input v-model="ruleForm.phoneNumber" placeholder="请输入"  maxlength="20">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-form-item label="详细位置" prop="detailedLocation">

          <el-input v-model="ruleForm.detailedLocation" placeholder="请输入"  maxlength="100">
          </el-input>

        </el-form-item> -->

        <el-form-item label="地图标点" prop="detailedLocation">

          <div style="width: 100%;height: 300px;">
            <newmap :isonloed="info.id?true:false" :lat="lat" :lng="lng" @updatecenter="updatecenter"></newmap>
          </div>
        </el-form-item>
        <el-form-item label="场地描述" prop="description">

          <!-- <el-input maxlength="200" show-word-limit rows="4" v-model="ruleForm.description" placeholder="请输入"
            type="textarea" /> -->

            <wangEditor v-model="ruleForm.description" ref="editor" :height="200"></wangEditor>

        </el-form-item>
        <el-form-item label="规划图纸" prop="planningDrawing">
          <upimg filePath="cd" inputtype="planningDrawing" :value="ruleForm.planningDrawing" :cmpOption="{disabled:false,isSetCover:false}"
            @changimg="e=>changimg(e,'planningDrawing')"></upimg>
        </el-form-item>
        <el-form-item label="展示主图" prop="displayImage">
          <upimg  filePath="cd" inputtype="displayImage" :value="ruleForm.displayImage"
            @changimg="e=>changimg(e,'displayImage')"></upimg>
        </el-form-item>

        <el-form-item label="其他视频" prop="otherMedia">
          <upfile filePath="cd" inputtype="otherMedia" :value="ruleForm.otherMedia" @changimg="e=>changimg(e,'otherMedia')"></upfile>

        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <div style="margin-top: 20px">
                <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                <el-button @click="close()" class="buttonHover"
                  style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </template>
  
  <script>
    import MapMark from "@/components/MapContainer/MapMark";
    import upimg from "@/components/ImageUpload/index"

    import upfile from "@/components/fujianUpload/fujianList"

    import {
      uploadUrl
    } from '@/utils/request'
    import {
      miniioupload
    } from '../../api/commodityLease.js'
    import {
      gongyuan,

      addList,
      editList
    } from '../../api/map1.js';
    import {
      changadd,
      changedit
    } from '../../api/information'

    import newmap from "@/components/newmap/indexall";

     import wangEditor from "@/components/editor/index"

    export default {
      components: {
        upimg,

        MapMark,

        upfile,

        newmap,
        wangEditor

      },
      data() {
        return {

          lat: 30.67,
          lng: 104.06,
          ontype: '线上广告位',
          typelist: [{
              name: '线上广告位',
              vaule: '线上广告位'

            },
            {

              name: '实体广告位',
              vaule: '实体广告位'

            },
          ],
          //地图标点的经纬度
          mapData: {},
          uploadFileUrl: uploadUrl, // 请求地址
          ruleForm: {

            venueName: '', // 场地名称
            venueType: '', // 场地类型
            actualArea: '', // 实际使用面积（单位：平方米）
            district: '', // 所属区域
            department: '', // 归属部门
            responsiblePerson: '', // 负责人
            detailedLocation: '', // 详细位置
            mapMarker: '', // 地图标点（如经纬度）
            description: '', // 场地描述
            planningDrawing: '', // 规划图纸（二进制大对象）
            displayImage: '', // 展示主图（二进制大对象）
            otherMedia: '', // 其他图片/视频（可存储URL或路径）
            rentalStatus: '', // 租赁状态（0.待租  1.已租）
            publishStatus: '', // 发布状态
            contractNumber: '', // 合同编号
            contact: '', // 联系人
            phoneNumber: '', // 联系电话
            createDate: '', // 创建时间
            createUser: '', // 创建人

          },
          rulesSt: {
            venueName: [{
              required: true,
              message: '请输入场地名称',

              trigger: 'blur'

            }, ],
            venueType: [{
              required: true,
              message: '请选择场地类型',

              trigger: 'change'

            }, ],
            actualArea: [{
              required: true,
              message: '请输入实际使用面积',

              trigger: 'blur'

            }, ],
            district: [{
              required: true,
              message: '请选择所属区域',

              trigger: 'change'

            }],
            detailedLocation: [{
              required: true,

              message: '请地图标点选择位置',

              trigger: 'blur'
            }, ],
            mapMarker: [{
              required: true,
              message: '请选择地图标点',
              trigger: 'blur'
            }, ],
            displayImage: [{
              required: true,
              message: '请上传宣传图',
              trigger: 'change'
            }]

          },
          uploadFiles: [],
          filesLength: 1,
          gongyuanList: [],
          fileData: [],
          parentMessage: {},
          edit: true
        };
      },

      computed: {
        regionOptions() {
          return this.$store.state.app.regionOptions;
        }
      },

      props: {
        info: {
          type: Object,
          default: {}
        },
  
      },
      async created() {
        if (this.info && this.info.id) {
          this.ruleForm = this.info

          if (this.ruleForm.mapMarker) {
            this.lat = this.ruleForm.mapMarker.split(',')[0]
            this.lng = this.ruleForm.mapMarker.split(',')[1]
          }

        } else {
  
        }
      },
      methods: {

        
        updatecenter(e) {
          console.error('-----------', e)

          this.lat = e[0].lat
          this.lng = e[0].lng
          this.ruleForm.detailedLocation = JSON.stringify(e)
         

        },
        changimg(e, type) {

          this.ruleForm[type] = e
        },

        changeadvertisingType(e) {

          console.error(e)
          this.ontype = e
        },
        //获取当前时间
        updateCurrentTime() {
          const now = new Date();
          const year = now.getFullYear();
          const month = (now.getMonth() + 1).toString().padStart(2, '0');
          const day = now.getDate().toString().padStart(2, '0');
          const hours = now.getHours().toString().padStart(2, '0');
          const minutes = now.getMinutes().toString().padStart(2, '0');
          const seconds = now.getSeconds().toString().padStart(2, '0');
  
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        //获取地图点击的经纬度
        getChildDate(mapData) {
          this.mapData = mapData
  
        },
        lvdaoSel(vaule) {
          this.ruleForm.belongingParkTrail = ''
          this.gongyuan(vaule)
        },
        async gongyuan(value) {
          const gongyaun = await gongyuan()
          this.gongyuanList = gongyaun.data.filter(item => item.superior == value);
        },
        add() {

          if(this.lat) {
            this.ruleForm.mapMarker = this.lat + ',' + this.lng
          }

          if (this.ruleForm.id) {
            this.$refs.ruleForm.validate((valid) => {
              console.log(valid)
              if (valid) {

                this.ruleForm.updateUser = localStorage.getItem('roleName')

                this.ruleForm.updateDate = this.updateCurrentTime()

                changedit(this.ruleForm).then(res => {
                  if (res.code == 200) {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    })
                    this.$emit('removeonaction', '1')
                  } else {
                    this.$message({
                      message: res.msg,
                      type: 'error'
                    })
                  }
                })
              } else {
                this.$message({
                  message: '请填写完整信息',
                  type: 'error'
                })
                return false;
              }

            })
          } else {
            this.$refs.ruleForm.validate((valid) => {
              console.log(valid)
              if (valid) {

                this.ruleForm.createDate = this.updateCurrentTime()

                this.ruleForm.createUser = localStorage.getItem('roleName')

                this.ruleForm.rentalStatus = 0
                this.ruleForm.publishStatus = 0
                changadd(this.ruleForm).then(res => {
                  if (res.code == 200) {
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    })
                    this.$emit('removeonaction', '1')
                  } else {
                    this.$message({
                      message: res.msg,
                      type: 'error'
                    })
                  }
                })
              } else {
                this.$message({
                  message: '请填写完整信息',
                  type: 'error'
                })
                return false;
              }
            })
  
          }
        },
        close() {
          this.$emit('removeonaction', '1')
        },
        hefuRemove() {
          this.hefuData = []
        },
        hefuSuccess(response, file, fileList) {
          this.fileData = []
          console.error(response)
          let fd = new FormData()
          fd.append('file', response.raw)
          fd.append('filePath', 'hetong')
          miniioupload(fd).then(res => {
            console.error(res)
            const fileMsg = {
              name: response.name,
              url: res.data,
            }
            this.fileData.push(fileMsg)
          })
        },
  
  
      },
    };
  </script>
  <style lang="scss">
    .el-upload {
      display: block;
      /* text-align: left; */
    }
  
    .video-uploader {
      .el-upload {
        text-align: left;
      }
    }
  
    .el-dialog__header {
      background-color: #F2F3F5;
      text-align: left;
    }
  
    .el-dialog__title {
      line-height: 30px;
      font-size: 15px;
      color: #303133;
    }
  </style>