webapp / GreenwayWeb

<template>
  <div>
    <el-form :model="ruleForm" :rules="rulesSt" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="意向租赁类型" prop="leaseType">
            <el-select v-model="ruleForm.leaseType" placeholder="请选择" style="width:100%">
              <el-option label="商铺" value="商铺" />
              <el-option label="场地" value="场地" />
              <el-option label="广告位" value="广告位" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定商家" prop="intentionReason">
            <el-select style="width: 100%;" v-model="ruleForm.intentionReason" placeholder="请输入关键词搜索" filterable
              @change="changeRelatedMerchants">
              <el-option v-for="(item,index) in shopList" :key="index" :label="item.name+ ' ' + item.phone" :value="item.id+''" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主体名称" prop="leaseCycle">
            <el-input v-model="ruleForm.leaseCycle" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="rentalRent">
            <el-input v-model="ruleForm.rentalRent" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主体类型" prop="operationType">
            <el-input v-model="ruleForm.operationType" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人" prop="intentionRegion">
            <el-input v-model="ruleForm.intentionRegion" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营范围" prop="idCardNumber">
            <el-input v-model="ruleForm.idCardNumber" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成立日期" prop="idCardType">
            <el-input v-model="ruleForm.idCardType" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="住所" prop="idCardValidStart">
            <el-input v-model="ruleForm.idCardValidStart" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱地址" prop="idCardValidEnd">
            <el-input v-model="ruleForm.idCardValidEnd" placeholder="请输入"  maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营开始时间" prop="intentionTime">
            <el-date-picker v-model="ruleForm.intentionTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
              style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营结束时间" prop="idCardPhotoBack">
            <el-date-picker v-model="ruleForm.idCardPhotoBack" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
              style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="营业执照" prop="idCardPhotoFront">
        <upimg  filePath="yx" inputtype="idCardPhotoFront" :value="ruleForm.idCardPhotoFront"  :cmpOption="{disabled:false,isSetCover:false}"
          @changimg="e=>changimg(e,'idCardPhotoFront')"></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 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"
   import {
    cerePlatformMerchant
  } from '@/api/newly.js'
  import {
    icManAll,
    icManAdd,
    icManEdit,
    icManDel,
    
  } from '@/api/icManagement';
  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: {
          leaseType: '',          // 意向租赁类型
          leaseCycle: '',         // 主体名称
          intentionReason: '',    // 绑定商家
          rentalRent: '',         // 统一社会信用代码
          operationType: '',      // 主体类型
          intentionRegion: '',    // 法定代表人
          idCardNumber: '',       // 经营范围
          idCardType: '',         // 成立日期
          idCardValidStart: '',   // 住所
          idCardValidEnd: '',     // 邮箱地址
          intentionTime: '',      // 经营开始时间
          idCardPhotoBack: '',    // 经营结束时间
          idCardPhotoFront: ''    // 营业执照
        },
        rulesSt: {
          leaseType: [{ required: true, message: '请选择意向租赁类型', trigger: 'change' }],
          leaseCycle: [{ required: true, message: '请输入主体名称', trigger: 'blur' }],
          intentionReason: [{ required: true, message: '请选择绑定商家', trigger: 'change' }],
          rentalRent: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
          operationType: [{ required: true, message: '请输入主体类型', trigger: 'blur' }],
          intentionRegion: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
          idCardNumber: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
          idCardType: [{ required: true, message: '请输入成立日期', trigger: 'blur' }],
          idCardValidStart: [{ required: true, message: '请输入住所', trigger: 'blur' }],
          idCardValidEnd: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }],
          intentionTime: [{ required: true, message: '请选择经营开始时间', trigger: 'change' }],
          idCardPhotoBack: [{ required: true, message: '请选择经营结束时间', trigger: 'change' }],
          idCardPhotoFront: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
        },
        uploadFiles: [],
        filesLength: 1,
        gongyuanList: [],
        fileData: [],
        parentMessage: {},
        edit: true,
        shopList:[],
        shopfrom: {
          checkState:'2',
          pageNumber: 0,
          pageSize: 1000,
        },
      };
    },
    computed: {
      regionOptions() {
        return this.$store.state.app.regionOptions;
      }
    },
    props: {
      info: {
        type: Object,
        default: {}
      },

    },
    async created() {
      await cerePlatformMerchant(this.shopfrom).then(res => {
        this.shopList = res.data.content
        console.error(this.shopList)
      })
      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: {
      changeRelatedMerchants(e) {
        console.error(e)
        // 循环 this.shopList 循环判断 e 是否等于 this.shopList[i].id
        for (let i = 0; i < this.shopList.length; i++) {
          if (e == this.shopList[i].id) {
            this.ruleForm.intentCustomerId = this.shopList[i].id
            this.ruleForm.intentCustomerName = this.shopList[i].name
            this.ruleForm.phone = this.shopList[i].phone
          }
       }
      },
      
      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.ruleForm.id) {
          this.$refs.ruleForm.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.ruleForm.updateUser = localStorage.getItem('roleName')
              this.ruleForm.updateDate = this.updateCurrentTime()
              icManEdit(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')
              icManAdd(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>