admin-web-master/src/components/add/addmap.vue

<template>
  <div >
    <el-form v-if="ontype =='线上广告位' && iShsow" :model="formInline" :rules="rules" ref="formInline" label-width="130px"
      class="demo-ruleForm">
      <el-form-item label="广告位类型" prop="advertisingType">
        <el-select @change="changeadvertisingType" v-model="formInline.advertisingType" placeholder="请选择" style="width: 100%;">
          <el-option v-for="(item, index) in typelist" :key="index" :label="item.name" :value="item.vaule"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告位名称" prop="advertisingName">
        <el-input v-model="formInline.advertisingName" placeholder="请输入" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="所属端" prop="affiliation" >
        <el-select v-model="formInline.affiliation" placeholder="请选择" style="width: 100%;">
          <!-- <el-option label="游客小程序" value="游客小程序"></el-option>
          <el-option label="商家客户端" value="商家客户端"></el-option> -->
          <el-option v-for="(item,index) in owningEndList"
          :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="轮播顺序" prop="rotationOrder" >
        <el-select v-model="formInline.rotationOrder" placeholder="请选择" style="width: 100%;">
          <el-option v-for="(item,index) in rotationSequenceList"
          :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="轮播图" prop="carouselId" >
        <el-select v-model="formInline.carouselId" placeholder="请选择" style="width: 100%;">
          <el-option v-for="(item,index) in tableData" :key="index" :label="'第'+(index+1)+'张'" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告尺寸" prop="dimensions" >
        <el-input v-model="formInline.dimensions" placeholder="宽:300px 长:400px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="可上传大小" prop="size" >
        <el-input v-model="formInline.size"  placeholder="100kb" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="播放时长(秒)" prop="playDuration" >
        <el-input v-model.number="formInline.playDuration" maxlength="20"  placeholder="请输入" @input="validateNumber('playDuration', $event)"></el-input>
      </el-form-item>
      <el-form-item label="推送地址" prop="pushAddress" >
        <el-input v-model="formInline.pushAddress"  placeholder="请输入" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="位置示意图" prop="locationDiagram">
        <upimg :cmpOption="{disabled:false,isSetCover:false}" filePath="gg" inputtype="locationDiagram" :value="formInline.locationDiagram"
          @changimg="e=>changimg(e,'locationDiagram')"></upimg>
      </el-form-item>
      <el-form-item label="介绍" prop="memo">
        <wangEditor v-model="formInline.memo" ref="editor" :height="200"></wangEditor>
        <!-- <el-input maxlength="200" show-word-limit rows="4" v-model="formInline.memo" placeholder="请输入"
          type="textarea" /> -->
      </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>
    <el-form v-if="ontype =='实体广告位' && iShsow" :model="formInline" :rules="rulesSt" ref="formInline" label-width="130px"
      class="demo-ruleForm">
      <el-form-item label="广告位类型" prop="advertisingType">
        <el-select @change="changeadvertisingType" v-model="formInline.advertisingType" placeholder="请选择" style="width: 100%;">
          <el-option v-for="(item, index) in typelist" :key="index" :label="item.name" :value="item.vaule"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告位名称" prop="advertisingName">
        <el-input v-model="formInline.advertisingName" placeholder="请输入" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="所属绿道段" prop="belongingGreenwaySection">
        <el-select v-model="formInline.belongingGreenwaySection" placeholder="请选择"
          style="margin-top:5px;width: 100%;" @change="lvdaoSel">
          <el-option :label="item.name" :value="item.code" v-for="(item,index) in lvdaoList"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属公园/步道" prop="belongingParkTrail">
        <el-select v-model="formInline.belongingParkTrail" placeholder="请选择" style="width: 100%;">
          <el-option :label="item.name" :value="item.code" v-for="(item,index) in gongyuanList"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细位置" prop="detailedLocation">
        <el-input v-model="formInline.detailedLocation"  :disabled="true"  placeholder="请地图标点选择位置" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="地图标点" prop="mapPunctuation" >
        <!-- <div style="width: 100%;height: 300px;">
          <map-mark :sendChildDate="getChildDate"></map-mark>
        </div> -->
        <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="deviceType" >
		  <el-input v-model="formInline.deviceType" placeholder="请输入"  maxlength="50"></el-input>
        <!-- <el-select v-model="formInline.deviceType" placeholder="请选择" style="width: 100%;">
          <el-option label="灯箱广告牌" value="灯箱广告牌"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="设备大小" prop="equipmentSize" >
        <el-input v-model="formInline.equipmentSize" placeholder="宽:300mm 长:400mm 高: 400mm"  maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="广告尺寸" prop="dimensions">
        <el-input v-model="formInline.dimensions" placeholder="宽:300px 长:400px"  maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="广告材质" prop="advertisingMaterial">
        <el-input v-model="formInline.advertisingMaterial" placeholder="请输入"  maxlength="50"></el-input>
        <!-- <div style="display: flex;justify-content: space-between;">
          <el-select v-model="formInline.advertisingMaterial" placeholder="请选择" style="width: 100%">
            <el-option label="亚克力" value="亚克力"></el-option>
            <el-option label="玻璃" value="玻璃"></el-option>
          </el-select>
        </div> -->
      </el-form-item>
      <el-form-item label="位置示意图" prop="locationDiagram">
        <upimg :cmpOption="{disabled:false,isSetCover:false}" filePath="gg" inputtype="locationDiagram" :value="formInline.locationDiagram"
          @changimg="e=>changimg(e,'locationDiagram')"></upimg>
      </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 newmap from "@/components/newmap/index";
  import MapMark from "@/components/MapContainer/MapMark";
  import upimg from "@/components/ImageUpload/index"
  import {
    uploadUrl
  } from '@/utils/request'
  import {
    miniioupload
  } from '../../api/commodityLease.js'
 import { addList } from '@/api/map1.js';
 import wangEditor from "@/components/editor/index"
 import {
    lvdaoduan,
	parkTrails,
  gongyuan
  } from '@/api/information.js';
  import {
    bannerGet,
  } from '@/api/banner';
  export default {
    components: {
      upimg,
      MapMark,
      newmap,
      wangEditor
    },
    data() {
      return {
        lat: 30.67,
        lng: 104.06,
        ontype: '线上广告位',
        typelist: [{
            name: '线上广告位',
            vaule: '线上广告位'
          },
          {
            name: '实体广告位',
            vaule: '实体广告位'
          },
        ],
        //地图标点的经纬度
        mapData: {},
        uploadFileUrl: uploadUrl, // 请求地址
        formInline: {
          advertisingName: '', // 广告位名称
          advertisingType: '线上广告位', // 广告位类型
          affiliation: '', // 所属端
          detailedLocation: '', // 详细位置
          rotationOrder: '', // 轮播顺序
          dimensions: '', // 广告尺寸
          size: '', // 广告大小
          uploadFormat: '', // 上传格式
          advertisingSpaceStrategy: '', // 广告位策略
          advertisingSpaceNumber: '', // 广告位编号
          locationDiagram: '', // 位置示意图
          mapPunctuation: '', // 地图标点
          deviceType: '', // 设备类型
          equipmentSize: '', // 设备尺寸
          advertisingMaterial: '', // 广告材质
          createDate: '', // 创建时间
          createUser: '', // 创建人
          // updateDate: '', // 修改时间
          // updateUser: '', // 修改人
          rentalStatus: '', // 租赁状态
          publishStatus: '', // 发布状态
          leaseExpirationDate: '', // 租赁到期时间
          contractNumber: '', // 合同编号
          advertisingNumber: null, // 广告位数量
          playDuration: null, // 播放时长
          pushAddress: '', // 推送地址
          memo: '', // 备注信息
          onlineType: '' ,// 线上类型
          belongingGreenwaySection: '', // 所属绿道段
          belongingParkTrail: '', // 所属公园/步道
        },
        rules: {
          
          advertisingType: [{
            required: true,
            message: '请选择广告类型',
            trigger: ['change']
          }],
          advertisingName: [{
            required: true,
            message: '请输入广告位名称',
            trigger: ['change']
          }],
          affiliation: [{
            required: true,
            message: '请选择所属端',
            trigger: ['change']
          }],
          rotationOrder: [{
            required: true,
            message: '请选择轮播顺序',
            trigger: ['change']
          }],
          carouselId: [{
            required: true,
            message: '请选择轮播图',
            trigger: ['change']
          }],
          locationDiagram: [{
            required: true,
            message: '请上传位置示意图',
            trigger: ['change']
          }],
        },
        rulesSt: {
          belongingGreenwaySection: [{
            required: true,
            message: '请填写所属绿道段',
            trigger: 'blur'
          }, ],
          advertisingType: [{
            required: true,
            message: '请选择广告类型',
            trigger: ['change']
          }],
          advertisingName: [{
            required: true,
            message: '请输入广告位名称',
            trigger: ['change']
          }],
          detailedLocation: [{
            required: true,
            message: '请地图标点选择位置',
            trigger: ['change']
          }],
          mapPunctuation: [{
            required: true,
            message: '请选择地图标点',
            trigger: ['change']
          }],
          dimensions: [{
            required: true,
            message: '请选择广告尺寸',
            trigger: ['change']
          }],
          advertisingMaterial: [{
            required: true,
            message: '请输入广告材质',
            trigger: ['change']
          }],
          locationDiagram: [{
            required: true,
            message: '请上传位置示意图',
            trigger: ['change']
          }],
        },
        uploadFiles: [],
        filesLength: 1,
        gongyuanList: [],
        fileData: [],
        parentMessage: {},
        edit: true,
        iShsow:true,
        lvdaoList: [],
        tableData:[]
      };
    },
    computed: {
      owningEndList() {
        return this.$store.state.cent.owningEndList;
      },
      rotationSequenceList() {
        return this.$store.state.cent.rotationSequenceList;
      },
    },
    props: {
      type: {
        type: String,
        default: 'one'
      },
      info: {
        type: Object,
        default: {}
      },
      leixing: {
        type: Boolean,
        default: true
      }
    },
    async created() {
      const res = await bannerGet({pageNumber: 1,pageSize: 20})
      this.tableData = res.data.content
      if (this.info && this.info.id) {
        this.formInline = this.info
        if (this.formInline.mapPunctuation) {
          this.lat = Number(this.formInline.mapPunctuation.split(',')[0])
          this.lng = Number(this.formInline.mapPunctuation.split(',')[1])
        }
        this.ontype = this.formInline.advertisingType
        if (this.ontype == '线上广告位') {
          this.typelist = [{
            name: '线上广告位',
            vaule: '线上广告位'
          }]
        } else {
          this.typelist = [{
            name: '实体广告位',
            vaule: '实体广告位'
          }]
        }
      } else {
        if (this.leixing) {
          this.ontype = '线上广告位'
          this.formInline.advertisingType = '线上广告位'
        } else {
          this.ontype = '实体广告位'
          this.formInline.advertisingType = '实体广告位'
        }
      }
      const lvdao = await lvdaoduan()
	const gongyua  = await parkTrails() 
	  this.lvdaoList = lvdao.data.concat(gongyua.data)
    },
    methods: {
      validateNumber(field, value) {
      // 使用正则表达式确保输入的是数字，并且可以包含最多两位小数
        const regex = /^\d+(\.\d{1,2})?$/;
        if (!regex.test(value)) {
          this.formInline[field] = value.replace(/[^\d.]/g, '').replace(/(\.\d{2}).*$/, '$1');
        }
      },
      updatecenter(e) {
        console.error('-----------', e)
        this.formInline.detailedLocation = e.address
        this.lat = e.lat
        this.lng = e.lng
      },
      changimg(e, type) {
        this.formInline[type] = e
      },
      changeadvertisingType(e) {
        console.error(e)
        this.iShsow = false
        this.ontype = e
        // 延迟一秒执行
        setTimeout(() => {
          this.iShsow = true
          this.$forceUpdate();
        }, 10)
      },
      //获取当前时间
      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.formInline.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.formInline.mapPunctuation = this.lat + ',' + this.lng
        }
        if (this.formInline.id) {
          this.$refs.formInline.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.formInline.updateDate = this.updateCurrentTime()
              this.formInline.updateUser = localStorage.getItem('roleName')
              editList(this.formInline).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.formInline.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.formInline.createDate = this.updateCurrentTime()
              this.formInline.createUser = localStorage.getItem('roleName')
              if (this.ontype =='线上广告位') {
             
              } else {
               
              
              }
              this.formInline.publishStatus = 0
              addList(this.formInline).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>