fpsys/src/views/house/components/popup/IndexEdit.vue

<template>
  <div>
    <el-drawer
      v-loading="loading"
      :show-close="false"
      :title="curObj.id ? '编辑楼盘' : '新增楼盘'"
      :wrapper-closable="false"
      :close-on-press-escape="false"
      :visible.sync="isShow"
      size="960px"
      custom-class="xl-drawer"
      direction="rtl"
    >
      <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[17,18]">
        <div slot="OI17" class="scoped-product">
          <div class="sp-item" v-for="(product, one) in productData" :key="one">
            <div class="sp-title">{{product.product_type_name}}</div>
            <div class="sp-content">
              <el-form-item label="产品最低均价">
                <el-input v-model="product.price_min" placeholder="请输入产品类型最低均价"></el-input>
              </el-form-item>
              <el-form-item label="产品最高均价">
                <el-input v-model="product.price_max" placeholder="请输入产品类型最大高价"></el-input>
              </el-form-item>
              <el-form-item label="户型">
                <el-select v-model="product.house_type_list_val" placeholder="请选择" :multiple="true" @change="houseTypeChange(one)">
                  <el-option
                    v-for="item in $dictData.house_type"
                    :key="item.val"
                    :label="item.key"
                    :value="item.val">
                  </el-option>
                </el-select>
              </el-form-item>
              <div class="room-box">
                <div class="room-item" v-for="(room, two) in product.house_type_list" :key="two">
                  <div class="ri-title">{{room.house_type_name}}
                    <el-button type="small" icon="el-icon-plus" class="xl-form-btn xs t3" @click="roomAreaAdd(one, two)">添加</el-button>
                  </div>
                  <div class="ri-content">
                    <div class="ri-op" v-for="(area, three) in room.area_list" :key="three">
                      <el-upload
                        class="ri-img"
                        :action="`${domainUrl}/adm/upload/picture`"
                        :data="{logic_type: 'estate', token}"
                        name="upload"
                        :show-file-list="false"
                        :on-success="roomAreaUploadSuccess"
                        :on-error="roomAreaUploadError"
                        :before-upload="roomAreaUploadBefore"
                      >
                        <img v-if="area.img_url" :src="area.img_url" class="img" @click="roomAreaUploadImg(one, two, three)">
                        <i v-else class="el-icon-plus icon" @click="roomAreaUploadImg(one, two, three)"/>
                      </el-upload>
                      <div class="ri-deal">
                        <input class="ri-input" v-model="area.area" type="text" placeholder="输面积">
                        <span class="ri-del"  @click="roomAreaDel(one, two, three)">删除</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="OI18" class="scoped-other-form">
          <el-form-item label="点位坐标" class="scoped-item-two item">
            纬度N<el-input v-model="cObj.latitude" disabled />
            经度E<el-input v-model="cObj.longitude" disabled />
            <el-button type="primary" class="map-btn" size="small" @click="openMap">点击从地图获取</el-button>
          </el-form-item>
        </div>
      </base-form>
      <div class="xl-form">
        <div class="xl-form-footer fixed" style="width:960px;padding-top: 20px;border-top: 1px solid #dcdcdc;right:0;">
          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
          <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
        </div>
      </div>
    </el-drawer>
    <handle-map :is-show="isShowMap" @close="closeMap" />
  </div>
</template>
<script>
import { arrToObj } from '@/utils'
import handleMap from '@/components/Common/Map'
export default {
  components: { handleMap },
  mixins,
  props: {
    isShow: Boolean,
    curObj: Object
  },
  inject: ['parentData'],
  data() {
    const token = window.sessionStorage.getItem('fp_token')
    let domainUrl = process.env.VUE_APP_BASE_API
    return {
      domainUrl,
      token,
      loading: false,
      formData: [],
      cObj: {},
      isShowMap: false,
      productData: [],
      tempImgIndex: [0, 0, 0],
    }
  },
  watch: {
    isShow: function(val) {
      if (val) {
        if (this.curObj.id) {
          this.loading = true
          this.$api.house.admestatedetail({id: this.curObj.id}).then(res => {
            let curData = res || {}
            if (curData.house_type) curData.house_type = curData.house_type.split(',')
            if (curData.product_type) curData.product_type = curData.product_type.split(',')
            if (curData.hospital_type) curData.hospital_type = curData.hospital_type.split(',')
            if (curData.high_street) curData.high_street = curData.high_street.split(',')
            if (curData.park_type) curData.park_type = curData.park_type.split(',')
            if (curData.metro_line) curData.metro_line = curData.metro_line.split(',')
            if (curData.metro_type) curData.metro_type = curData.metro_type.split(',')
            curData.pri_image = `${curData.domain}${curData.pri_image}?url=${curData.pri_image}`
            this.cObj = curData || {}
            let productData = curData.area_data || []
            productData.map(one =>{
              one.product_type_name = arrToObj(this.$dictData.product_type)[one.product_type_val]
              let houseTypeList = one.house_type_list || []
              one.house_type_list_val = []
              houseTypeList.map(two => {
                two.house_type_name = arrToObj(this.$dictData.house_type)[two.house_type_val]
                one.house_type_list_val.push(String(two.house_type_val))
                const areaList = two.area_list || []
                areaList.map(three =>{
                  three.img_url = `${curData.domain}${three.img_url}?url=${three.img_url}`
                })
              })
            })
            this.productData = [...productData]
            this.getDef()
            this.loading = false
          })
        } else {
          this.cObj = this.curObj
          this.getDef()
        }
      }
    },
  },
  methods: {
    houseTypeChange (one) {
      let productData = [...this.productData]
      let tempList = []
      let houseTypeList = productData[one].house_type_list || []
      const curVal = productData[one].house_type_list_val ||[]
      curVal.forEach(v =>{
        let cObj = {
          house_type_name: arrToObj(this.$dictData.house_type)[v],
          house_type_val: v,
          area_list: [{img_url: '', area: ''}]
        }
        houseTypeList.forEach((h, hIndex) =>{
          if (v === String(h.house_type_val)) {
            cObj.area_list = houseTypeList[hIndex].area_list || []
          }
        })
        tempList.push(cObj)
      })
      productData[one].house_type_list = tempList
      this.productData = [...productData]
    },
    roomAreaDel (one, two, three) {
      let productData = [...this.productData]
      productData[one].house_type_list[two].area_list.splice(three, 1)
      this.productData = [...productData]
    },
    roomAreaAdd (one, two) {
      let productData = [...this.productData]
      productData[one].house_type_list[two].area_list.push({img_url: '', area: ''})
      this.productData = [...productData]
    },
    roomAreaUploadImg (one, two, three) {
      this.tempImgIndex = [one, two, three]
    },
    roomAreaUploadSuccess(res, file) {
      const data = res.data || {}
      let productData = [...this.productData]
      productData[this.tempImgIndex[0]].house_type_list[this.tempImgIndex[1]].area_list[this.tempImgIndex[2]].img_url =  `${data.domain}${data.url}?url=${data.url}&id=${data.file_id}`
      this.productData = [...productData]
    },
    roomAreaUploadError(file) {
      // this.changeHandle(file)
    },
    roomAreaUploadBefore(file) {
      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPGPNG) {
        this.$message.error('上传图片只能是 JPG PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 400k!')
      }
      return isJPGPNG && isLt2M
    },
    metroLineChange (val) {
      this.getDef('change', 'metro_line')
    },
    productTypeChange (val, op, item) {
      const valArr = [...val]
      const productData = [...this.productData]
      let newArr = []
      valArr.forEach(v => {
        let vObj = {
          product_type_name: arrToObj(this.$dictData.product_type)[v],
          product_type_val: v,
        }
        productData.forEach(old =>{
          if (v === String(old.product_type_val)) {
            vObj = {...old}
          }
        })
        newArr.push(vObj)
      })
      this.productData = [...newArr]
    },
    getDef (str, strKey, strParams) {
      let params = {}
      if (str === 'change') {
        params = {...this.cObj, ...this.$refs.ruleForm.baseForm}
      } else {
        params = { ...this.cObj }
      }
      let metroLine = params.metro_line || []
      let metroTypeArr = []
      if (str === 'change' && strKey === 'metro_line') params.metro_type = ''
      const metroTypeAll = this.$dictData.metro_type || []
      metroTypeAll.map(item => {
        metroLine.map(mline => {
          if (item.option1.indexOf(mline) > -1) {
            metroTypeArr.push(item)
          }
        })
      })
      let disabled = false
      if (params.id) disabled = true
      const remoteOptionsSchoolList = []
      if (params.school_list) {
        params.school_id_list = params.school_list.map(item => {
          remoteOptionsSchoolList.push({ keyRO: item.school_name, valRO: item.id })
          return item.id
        })
      } else {
        params.school_id_list = []
      }
      this.formData = [
        { label: '楼盘名称', key: 'estate_name' },
        { label: '所属区域', key: 'area_type', type: 'select', class: 'c-3', options: this.$dictData.area_type },
        { label: '地铁线路', key: 'metro_line', type: 'select', class: 'c-3', options: this.$dictData.metro_line, changeHandle: this.metroLineChange, multiple: true },
        { label: '地铁站名', key: 'metro_type', type: 'select', class: 'c-3', options: metroTypeArr, multiple: true},
        { label: '周边医院', key: 'hospital_type', type: 'select', class: 'c-3', options: this.$dictData.hospital_type, multiple: true },
        { label: '周边商圈', key: 'high_street', type: 'select', class: 'c-3', options: this.$dictData.high_street, multiple: true },
        { label: '周边公园', key: 'park_type', type: 'select', class: 'c-3', options: this.$dictData.park_type, multiple: true },
        { label: '建设时间', key: 'build_time', class: 'c-3', type: 'datePicker', type2: 'month', valueFormat: 'yyyy-MM'},
        { label: '竣工时间', key: 'complete_time', class: 'c-3', type: 'datePicker', type2: 'month', valueFormat: 'yyyy-MM'},
        { label: '容积率', key: 'plot_ratio', class: 'c-3', type: 'inputFont', appendFont: '%'},
        { label: '占地面积', key: 'acreage', class: 'c-3', type: 'inputFont', appendFont: '㎡'},
        { label: '建筑面积', key: 'built_up_area', class: 'c-3', type: 'inputFont', appendFont: '㎡'},
        { label: '总户数', key: 'household', class: 'c-3', type: 'inputFont', appendFont: '户'},
        { label: '物业公司', key: 'property_type', class: 'c-3'},
        { label: '物业费', key: 'property_fee', class: 'c-3'},
        { label: '车位数量', key: 'parking', class: 'c-3'},
        { label: '产品类型', key: 'product_type', type: 'select', options: this.$dictData.product_type, multiple: true, changeHandle: this.productTypeChange},
        // { label: '房型', key: 'house_type', type: 'select', options: this.$dictData.house_type, multiple: true},
        // { label: '面积', label2: '多个面积英文逗号,分开(如:100,120)', key: 'house_area', type: 'inputFont', appendFont: '㎡'},
        // { label: '均价范围1', key: 'price_min', class: 'c-3', type: 'inputFont', appendFont: '元(最小)'},
        // { label: '均价范围2', key: 'price_max', class: 'c-3', type: 'inputFont', appendFont: '元(最大)'},
        { label: '就读学校', key: 'school_id_list', type: 'selectRemote', multiple: true,
          remoteParams: { skey: 'school_name', api: `house.admschoollist`, opKey: 'school_name', opVal: 'id' },
          remoteOptions: remoteOptionsSchoolList
        },
        { label: '楼盘地址', key: 'address' },
        { label: '不利因素', key: 'minus_points' },
        { label: '楼盘图', key: 'pri_image', class: 'c-3', type: 'upload' },
        { label: '简评', key: 'remarked', class: 'c-3s', type: 'textarea' },
      ]
      this.setDefaultValue(params)
    },
    close (str) {
      if (str === 'confirm') {
        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
          if (valid) {
            const oldform = this.$refs.ruleForm.baseForm
            const newForm = { ...oldform }
            if (this.curObj.id) newForm.id = this.curObj.id
            if (newForm.school_id_list && newForm.school_id_list.length > 0) {
              newForm.school_id_list = newForm.school_id_list.join(',')
            } else {
              newForm.school_id_list = ''
            }
            newForm.longitude = this.cObj.longitude
            newForm.latitude = this.cObj.latitude
            if (!newForm.longitude) return this.$msgw('请选择经度！')
            else if (!newForm.latitude) return this.$msgw('请选择纬度！')
            if (newForm.pri_image && newForm.pri_image.indexOf('?') > -1) {
              const imgArr = newForm.pri_image.split('?')
              const queryArr = imgArr[1].split('&')
              queryArr.forEach(q =>{
                const curQArr = q.split('=')
                if (curQArr[0] === 'url') {
                  newForm.pri_image = curQArr[1]
                }
              })
            }
            if (newForm.house_type) newForm.house_type = newForm.house_type.join(',')
            if (newForm.product_type) newForm.product_type = newForm.product_type.join(',')
            if (newForm.hospital_type) newForm.hospital_type = newForm.hospital_type.join(',')
            if (newForm.high_street) newForm.high_street = newForm.high_street.join(',')
            if (newForm.park_type) newForm.park_type = newForm.park_type.join(',')
            if (newForm.metro_line) newForm.metro_line = newForm.metro_line.join(',')
            if (newForm.metro_type) newForm.metro_type = newForm.metro_type.join(',')
            let productData = this.productData || []
            productData.map(one => {
              const houseTypeList = one.house_type_list || []
              houseTypeList.map(two => {
                const areaList = two.area_list || []
                areaList.map(three =>{
                  if (three.img_url && three.img_url.indexOf('?') > -1) {
                    const imgArr = three.img_url.split('?')
                    const queryArr = imgArr[1].split('&')
                    queryArr.forEach(q =>{
                      const curQArr = q.split('=')
                      if (curQArr[0] === 'url') {
                        three.img_url = curQArr[1]
                      }
                    })
                  }
                })
              })
            })
            if (productData.length === 0) {
              newForm.area_data = ''
            } else {
              newForm.area_data = JSON.stringify([...productData])
            }
            let apiStr = 'admestateadd'
            if (this.curObj.id) apiStr = 'admestateedit'
            this.$api.house[apiStr](newForm).then(data => {
              this.$msgs(newForm.id ? '编辑成功' : '新增成功')
              this.productData = []
              this.$emit('close', newForm)
            })
          }
        })
      } else {
        this.$emit('close')
        this.productData = []
        this.setDefaultValue()
      }
    },
    openMap() { // 定位
      this.isShowMap = true
      const pointObj = {
        latitude: this.cObj.latitude || '',
        longitude: this.cObj.longitude || '',
        address: this.cObj.address || ''
      }
      this.$root.$emit('handleMap', pointObj)
    },
    closeMap(obj) {
      if (obj) {
        const oldform = this.$refs.ruleForm.baseForm
        const newForm = { ...oldform, ...obj }
        this.cObj = newForm
        this.setDefaultValue(newForm)
      }
      this.isShowMap = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../../styles/libEdit.scss';
.lib-edit {
  width: 900px;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 40px;
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
  ::v-deep .el-date-editor.el-input {
    width: 100%;
  }
}
.scoped-other-form {
  .scoped-item-two {
    .el-input {
      display: inline-block;
      width: 140px;
      margin: 0 10px;
    }
  }
}
.map-btn{
  height: 36px;
}
::v-deep .el-drawer__header {
  margin-bottom: 10px;
}

.scoped-product {
  width: 100%;
  .sp-item {
    border: 1px solid #dcdcdc;
    margin-bottom: 10px;
    margin-left: 55px;
    margin-right: 30px;
    border-radius: 10px;
  }
  .sp-title {
    background: #dcdcdc;
    font-weight: bold;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 14px;
    color: #666;
  }
  .sp-content {
    padding: 10px 10px 0;
  }
}

.room-box {
  margin: 0 20px 10px 80px;
  .room-item {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .ri-title {
    color: #666;
    margin-bottom: 10px;
  }
  .ri-op {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
  }
  .ri-img {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px dashed #999;
    img {
      width: 80px;
      height: 80px;
    }
    .el-icon-plus {
      color: #999;
      padding: 30px;
    }
  }
  .ri-deal {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
  }
  .ri-input {
    width: 50px;
    border: 1px solid #dcdcdc;
    height: 30px;
    text-align: center;
    border-radius: 0;
    outline: none;
    color: #666;
    font-size: 12px;
    margin-top: -5px;
  }
  .ri-del {
    font-size: 12px;
    background: #e6a23c;
    color: #fff;
    width: 100%;
    height: 26px;
    line-height: 26px;
    margin-top: 10px;
    cursor: pointer;
    display: inline-block;
  }
}
</style>