<template> <div> <el-dialog v-loading="loading" :show-close="false" :close-on-click-modal="false" :visible.sync="isShow" :title="curObj.id ? '编辑房源' : '新增房源'" :fullscreen="false" width="960px" custom-class="xl-dialog" center > <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[9]"> <div slot="OI9"> <div class="scoped-img-area"> <div class="sia-op" v-for="(imgsrc,index) in imagesArr" :key="index"> <img class="img" :src="imgsrc + '_adm0'" alt="img"> <span class="close" @click="imgDel(index)"></span> </div> <el-upload class="sia-img" :action="`${domainUrl}/adm/upload/cloud`" :data="{logic_type: 'estate', token}" name="upload" :show-file-list="false" :on-success="roomAreaUploadSuccess" :before-upload="roomAreaUploadBefore" > <i class="el-icon-plus icon"/> </el-upload> </div> </div> <div slot="OI9" 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> <div slot="footer"> <el-button class="xl-form-btn t2" @click="close">关 闭</el-button> <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button> </div> </base-form> </el-dialog> <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, imagesArr: [], roomAreaList: [], } }, watch: { isShow: function(val) { if (val) { if (this.curObj.id) { this.loading = true this.$api.house.admoldhousedetail({id: this.curObj.id}).then(res => { let curData = res || {} this.imagesArr = curData.images ? curData.images.split(',') : [] this.cObj = curData || {} this.getDef() this.loading = false }) } else { this.cObj = this.curObj this.imagesArr = [] this.getDef() } } }, }, methods: { imgDel (index) { this.imagesArr.splice(index, 1) }, roomAreaUploadSuccess(res, file) { const data = res.data || {} this.imagesArr.push(`${data.url}`) }, 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('上传图片大小不能超过 2M!') } return isJPGPNG && isLt2M }, getDef (str) { let params = {} params = { ...this.cObj } if (str === 'edit') { params = {...this.$refs.ruleForm.baseForm, ...params} } if (!params.custom_tag) params.custom_tag = '洪楼房源' if (params.estate_id) { this.formData = [ { label: '所属楼盘', key: 'estate_id', rules: 1, class: 'c-3', type: 'selectRemote', changeHandle: this.estateChange, remoteParams: { skey: 'estate_name', api: `house.admestatelist?estate_tag=二手`, opKey: 'estate_name', opVal: 'id' }, remoteOptions: [ { keyRO: params.estate_name, valRO: params.estate_id } ] }, { label: '区域', key: 'area_type', class: 'c-3', type: 'select', options: this.$dictData.area_type}, { label: '产品类型', key: 'product_type', class: 'c-3', type: 'select', options: this.$dictData.product_type}, { label: `产品户型`, label2: `快捷选择工具`, key: `HT`, class: 'c-3', type: 'select', options: this.roomAreaList, changeHandle: this.htChange,}, { label: '面积', key: 'area', class: 'c-3', type: 'inputFont', appendFont: '㎡', rules: [ { validator: (rule, value, callback) => { if (Number(value) < 0 || isNaN(Number(value))) { callback(new Error('请输入数字')) } else { callback() } }, trigger: 'blur' }, ]}, { label: '房源户型', key: 'house_type', class: 'c-3', type: 'select', options: this.$dictData.house_type}, { label: '房源标题', key: 'title'}, { label: '户型图', key: 'house_img', class: 'c-3', type: 'upload' }, { label: '房源主图', key: 'pri_image', rules: 1, class: 'c-3', type: 'cuImg', options: { w: 375, h: 250, SY: 1, } }, { label: '房源地址', key: 'address' }, { label: '总价', key: 'price', class: 'c-3', type: 'inputFont', appendFont: '万元', rules: [ { validator: (rule, value, callback) => { if (Number(value) < 0 || isNaN(Number(value))) { callback(new Error('请输入数字')) } else { callback() } }, trigger: 'blur' }, ]}, { label: '层高', class: 'c-3', key: 'floor_height', rules: [ { validator: (rule, value, callback) => { if (Number(value) < 0 || isNaN(Number(value))) { callback(new Error('请输入数字')) } else { callback() } }, trigger: 'blur' }, ] }, { label: '总层数', class: 'c-3', key: 'height', rules: [ { validator: (rule, value, callback) => { if (Number(value) < 0 || isNaN(Number(value))) { callback(new Error('请输入数字')) } else { callback() } }, trigger: 'blur' }, ] }, { label: '详细地址', label2: '如:1栋2单元305室', class: 'c-3', key: 'detail_address' }, { label: '满几年', key: 'how_many_year', class: 'c-3', type: 'select', options: this.$dictData.house_room_year }, { label: '是否装修', key: 'is_dec', class: 'c-3', type: 'select', options: this.$dictData.sys_yesno }, { label: '业主称呼', class: 'c-3', key: 'owner' }, { label: '业主电话', class: 'c-3', key: 'phone' }, { label: '自定义标签', class: 'c-3', key: 'custom_tag', rules: 1 }, { label: '置业经理', key: 'sale_id', rules: 1, class: 'c-3', type: 'selectRemote', remoteParams: { skey: 'sale_name', api: `user.admsaleuserlist`, opKey: 'sale_name', opVal: 'id' }, remoteOptions: [ { keyRO: params.sale_name, valRO: params.sale_id } ] }, { label: '(对外展示)房源简介', key: 'introduce', type: 'textarea' }, { label: '备注', key: 'remarked', type: 'textarea' }, ] } else { this.formData = [ { label: '所属楼盘', key: 'estate_id', rules: 1, type: 'selectRemote', changeHandle: this.estateChange, remoteParams: { skey: 'estate_name', api: `house.admestatelist?estate_tag=二手`, opKey: 'estate_name', opVal: 'id' }, }, ] } params.pri_image = this.IMadd(params.pri_image) this.setDefaultValue(params) }, estateChange (estate_id, op, cur) { if (estate_id) { this.$api.house.admestatehousearealist({estate_id}).then(res => { const list = res.list || [] const htObj = arrToObj(this.$dictData.house_type) const ptObj = arrToObj(this.$dictData.product_type) list.map(item => { item.key = `${htObj[item.house_type]}${item.area}㎡-${ptObj[item.product_type]}` item.key2 = `${htObj[item.house_type]}` item.val = item.id }) this.roomAreaList = [...list] this.cObj.estate_id = estate_id this.cObj.area_type = cur.area_type this.cObj.address = cur.address this.cObj.latitude = cur.latitude this.cObj.longitude = cur.longitude this.cObj.estate_name = cur.estate_name this.cObj.title = `${cur.estate_name}-${arrToObj(this.$dictData.area_type)[cur.area_type]}` this.cObj.product_type = '' this.cObj.house_type = '' this.cObj.area = '' this.cObj.house_img = '' this.cObj.HT = '' this.getDef('edit') }) } }, htChange (val) { this.roomAreaList.forEach(ra => { if (val === ra.id) { this.cObj.product_type = ra.product_type this.cObj.house_type = ra.house_type this.cObj.area = ra.area this.cObj.house_img = ra.pri_image this.cObj.HT = val this.cObj.title = `${ra.key}-${this.cObj.estate_name}(${arrToObj(this.$dictData.area_type)[this.cObj.area_type]})` this.getDef('edit') } return }) }, 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 newForm.longitude = this.cObj.longitude newForm.latitude = this.cObj.latitude if (!newForm.longitude) return this.$msgw('请选择经度!') else if (!newForm.latitude) return this.$msgw('请选择纬度!') const imgUrlArr = this.imagesArr.map(urlStr => { return urlStr }) newForm.images = imgUrlArr.join(',') newForm.pri_image = this.IMdel(newForm.pri_image) newForm.custom_tag = newForm.custom_tag.replace(/,|、|\/|\\/g, ',') let apiStr = 'admoldhouseadd' if (this.curObj.id) apiStr = 'admoldhouseedit' 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-img-area { text-align: left; width: 280px; .sia-op { display: inline-block; vertical-align: middle; margin-right: 10px; margin-bottom: 10px; border: 1px solid #f2f2f2; width: 80px; height: 80px; position: relative; &:hover { .img-big { display: block; } } .img { width: 80px; height: 80px; } .close { position: absolute; width: 20px; height: 20px; top: -10px; right: -10px; background: url(../../../../assets/icon_g_close.png) no-repeat; background-size: 20px; cursor: pointer; } .img-big { position: absolute; bottom: 0; left: 0; width: 400px; height: auto; display: none; box-shadow: 10px 10px 10px #ccc; z-index: 99; } } .sia-img { display: inline-block; vertical-align: middle; width: 80px; height: 80px; overflow: hidden; border: 1px dashed #999; margin-bottom: 10px; .el-icon-plus { color: #999; padding: 30px; } } } </style>