mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 05:39:36 +08:00
描述：新增楼宇选择园区
This commit is contained in:
SelfRidicule
parent
2be81744cf
commit
339d49107b
@ -1,103 +1,119 @@
|
||||
<template>
|
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
||||
<a-form @submit="handleSubmit" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 6 }">
|
||||
<a-form-item style="display:none">
|
||||
<a-input v-decorator="['id']"/>
|
||||
<a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
|
||||
<a-form @submit='handleSubmit' :form='form' :label-col='{ span: 4 }' :wrapper-col='{ span: 6 }'>
|
||||
<a-form-item style='display:none'>
|
||||
<a-input v-decorator="['id']" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区名称" extra="不要超过15个字符">
|
||||
<a-input style="width: 60%" placeholder="请输入园区名称" v-decorator="['name', {rules: [{ required: true, message: '请输入园区名称' }]}]"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属地区'>
|
||||
<a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属地区' }]}]">
|
||||
<a-select-option v-for='item in tenantData' :key='item.value'>{{ item.text }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区总面积" extra="不要超过15个字符">
|
||||
<a-input-number :min="1" style="width: 20%" placeholder="请输入园区总面积" v-decorator="['area', {rules: [{ required: true, message: '请输入园区总面积' }]}]"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区名称' extra='不要超过15个字符'>
|
||||
<a-input placeholder='请输入园区名称'
|
||||
v-decorator="['name', {rules: [{ required: true, message: '请输入园区名称' }]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区总房间数" extra="不要超过15个字符">
|
||||
<a-input-number :min="1" style="width: 20%" placeholder="请输入园区总房间数" v-decorator="['roomNumbers']"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区总面积' extra='不要超过15个字符'>
|
||||
<a-input-number :min='1' style='width: 20%' placeholder='请输入园区总面积'
|
||||
v-decorator="['area', {rules: [{ required: true, message: '请输入园区总面积' }]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传园区小图" extra="尺寸建议：宽160px，高160px">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区总房间数' extra='不要超过15个字符'>
|
||||
<a-input-number :min='1' style='width: 20%' placeholder='请输入园区总房间数' v-decorator="['roomNumbers']" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传园区小图' extra='尺寸建议：宽160px，高160px'>
|
||||
<a-upload
|
||||
v-decorator="['smallPic']"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
list-type='picture-card'
|
||||
class='avatar-uploader'
|
||||
:show-upload-list='false'
|
||||
:action='uploadUrl'
|
||||
:headers='headers'
|
||||
:before-upload='beforeUpload'
|
||||
@change='handleChange'
|
||||
>
|
||||
<img v-if="imageUrl" :src="imageUrl" style="width: 102px; height: 102px"/>
|
||||
<img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
|
||||
<div v-else>
|
||||
<a-icon :type="loading ? 'loading' : 'plus'" />
|
||||
<div class="ant-upload-text"> 上传 </div>
|
||||
<div class='ant-upload-text'> 上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传园区banner图" extra="尺寸建议：宽750px，高300px">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传园区banner图'
|
||||
extra='尺寸建议：宽750px，高300px'>
|
||||
<a-upload
|
||||
v-decorator="['bannerImages', {rules: [{ required: true, message: '上传园区banner图' }]}]"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:file-list="fileList"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
@preview="handlePreview"
|
||||
@change="handleChangeFileList"
|
||||
list-type='picture-card'
|
||||
class='avatar-uploader'
|
||||
:file-list='fileList'
|
||||
:action='uploadUrl'
|
||||
:headers='headers'
|
||||
@preview='handlePreview'
|
||||
@change='handleChangeFileList'
|
||||
>
|
||||
<div v-if="fileList.length < 4">
|
||||
<a-icon type="plus" />
|
||||
<div class="ant-upload-text"> 上传 </div>
|
||||
<div v-if='fileList.length < 4'>
|
||||
<a-icon type='plus' />
|
||||
<div class='ant-upload-text'> 上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
||||
<img style="width: 100%" :src="previewImage" />
|
||||
<a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
|
||||
<img style='width: 100%' :src='previewImage' />
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区简介（可选）" extra="不要超过50个字符">
|
||||
<a-textarea placeholder="请输入园区简介" :rows="5" v-decorator="['briefIntro']"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区简介（可选）' extra='不要超过50个字符'>
|
||||
<a-textarea placeholder='请输入园区简介' :rows='5' v-decorator="['briefIntro']" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纬度">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='纬度'>
|
||||
<a-input-group compact>
|
||||
<a-input-number style="width: 150px; text-align: center" placeholder="纬度" v-decorator="['lat', {rules: [{ required: true, message: '请输入纬度' }]}]"/>
|
||||
<a-input-number style='width: 150px; text-align: center' placeholder='纬度'
|
||||
v-decorator="['lat', {rules: [{ required: true, message: '请输入纬度' }]}]" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经度">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='经度'>
|
||||
<a-input-group compact>
|
||||
<a-input-number style="width: 150px; text-align: center" placeholder="经度" v-decorator="['lng', {rules: [{ required: true, message: '请输入经度' }]}]"/>
|
||||
<a-input-number style='width: 150px; text-align: center' placeholder='经度'
|
||||
v-decorator="['lng', {rules: [{ required: true, message: '请输入经度' }]}]" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="租金范围(起)">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='租金范围(起)'>
|
||||
<a-input-group compact>
|
||||
<a-input-number :min="1" style="width: 150px; text-align: center" placeholder="租金范围" v-decorator="['lowRent', {rules: [{ required: true, message: '请输入租金范围' }]}]"/>
|
||||
<a-input style="width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="~" disabled />
|
||||
<a-input-number :min="1" style="width: 150px; text-align: center; border-left: 0" placeholder="租金范围" v-decorator="['highRent', {rules: [{ required: true, message: '请输入租金范围' }]}]"/>
|
||||
<a-select style="width: 10%" v-decorator="['rentType', {initialValue: '4', rules: [{ required: true, message: '请选择租金类型' }]}]">
|
||||
<a-select-option value="1"> 元/㎡/天 </a-select-option>
|
||||
<a-select-option value="2"> 元/㎡/月 </a-select-option>
|
||||
<a-select-option value="3"> 元/天 </a-select-option>
|
||||
<a-select-option value="4"> 元/月 </a-select-option>
|
||||
<a-input-number :min='1' style='width: 150px; text-align: center' placeholder='租金范围'
|
||||
v-decorator="['lowRent', {rules: [{ required: true, message: '请输入租金范围' }]}]" />
|
||||
<a-input style='width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff' placeholder='~'
|
||||
disabled />
|
||||
<a-input-number :min='1' style='width: 150px; text-align: center; border-left: 0' placeholder='租金范围'
|
||||
v-decorator="['highRent', {rules: [{ required: true, message: '请输入租金范围' }]}]" />
|
||||
<a-select style='width: 10%'
|
||||
v-decorator="['rentType', {initialValue: '4', rules: [{ required: true, message: '请选择租金类型' }]}]">
|
||||
<a-select-option value='1'> 元/㎡/天</a-select-option>
|
||||
<a-select-option value='2'> 元/㎡/月</a-select-option>
|
||||
<a-select-option value='3'> 元/天</a-select-option>
|
||||
<a-select-option value='4'> 元/月</a-select-option>
|
||||
</a-select>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区地址">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区地址'>
|
||||
<a-input-group compact>
|
||||
<a-cascader :options="options" placeholder="选择地区" v-model="city" changeOnSelect/>
|
||||
<a-input style="width: 40%; margin-left: 8px" placeholder="详细地址" v-decorator="['address', {rules: [{ required: true, message: '请输入详细地址' }]}]"/>
|
||||
<a-cascader :options='options' placeholder='选择地区' v-model='city' changeOnSelect />
|
||||
<a-input style='width: 40%; margin-left: 8px' placeholder='详细地址'
|
||||
v-decorator="['address', {rules: [{ required: true, message: '请输入详细地址' }]}]" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="配套服务" extra="不要超过50个字符">
|
||||
<a-textarea placeholder="请输入配套服务" :rows="5" v-decorator="['facilities', {rules: [{ required: true, message: '请输入配套服务' }]}]"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='配套服务' extra='不要超过50个字符'>
|
||||
<a-textarea placeholder='请输入配套服务' :rows='5'
|
||||
v-decorator="['facilities', {rules: [{ required: true, message: '请输入配套服务' }]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交通" extra="不要超过50个字符">
|
||||
<a-textarea placeholder="请输入配套服务" :rows="5" v-decorator="['traffic']"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='交通' extra='不要超过50个字符'>
|
||||
<a-textarea placeholder='请输入配套服务' :rows='5' v-decorator="['traffic']" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="停车费（元/小时）" extra="不要超过15个字符">
|
||||
<a-input placeholder="请输入停车费" v-decorator="['parkingFee']"/>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='停车费（元/小时）' extra='不要超过15个字符'>
|
||||
<a-input placeholder='请输入停车费' v-decorator="['parkingFee']" />
|
||||
</a-form-item>
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="园区图文介绍">
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='园区图文介绍'>
|
||||
<WangEditor v-decorator="['introduction']"></WangEditor>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ span: 12, offset: 12 }">
|
||||
<a-button htmlType="submit" type="primary">提交</a-button>
|
||||
<a-button icon="rollback" style="margin-left: 8px" @click="rollback">关闭</a-button>
|
||||
<a-form-item :wrapper-col='{ span: 12, offset: 12 }'>
|
||||
<a-button htmlType='submit' type='primary'>提交</a-button>
|
||||
<a-button icon='rollback' style='margin-left: 8px' @click='rollback'>关闭</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
@ -110,6 +126,7 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
import WangEditor from '@/components/Editor/WangEditor.vue'
|
||||
import { getDistVOList } from '@/api/system'
|
||||
import { getParkById, savePark } from '@/api/admin/park'
|
||||
import { getTenantList } from '@/api/tenant'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
@ -117,7 +134,7 @@ export default {
|
||||
components: {
|
||||
WangEditor
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
@ -139,11 +156,20 @@ export default {
|
||||
options: [],
|
||||
city: [],
|
||||
// form
|
||||
form: this.$form.createForm(this)
|
||||
|
||||
form: this.$form.createForm(this),
|
||||
tenantData: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
// 地区
|
||||
getTenantList().then(res => {
|
||||
this.tenantData = res.rows.map(item => {
|
||||
return {
|
||||
value: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
})
|
||||
// 初始化地区
|
||||
getDistVOList().then(res => {
|
||||
this.options = res.data
|
||||
@ -152,7 +178,7 @@ export default {
|
||||
this.handleInit()
|
||||
},
|
||||
methods: {
|
||||
handleInit () {
|
||||
handleInit() {
|
||||
const { parkId } = this.$route.query
|
||||
if (parkId) {
|
||||
getParkById(parkId).then(record => {
|
||||
@ -168,12 +194,12 @@ export default {
|
||||
})
|
||||
this.fileList = this.mdl.bannerImages
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'area', 'smallPic', 'bannerImages', 'roomNumbers', 'briefIntro', 'lowRent', 'highRent', 'rentType', 'address', 'facilities', 'traffic', 'parkingFee', 'introduction', 'lat', 'lng'))
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'tenantId', 'name', 'area', 'smallPic', 'bannerImages', 'roomNumbers', 'briefIntro', 'lowRent', 'highRent', 'rentType', 'address', 'facilities', 'traffic', 'parkingFee', 'introduction', 'lat', 'lng'))
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeUpload (file) {
|
||||
beforeUpload(file) {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||||
if (!isJpgOrPng) {
|
||||
this.$message.error('You can only upload JPG file!')
|
||||
@ -184,7 +210,7 @@ export default {
|
||||
}
|
||||
return isJpgOrPng && isLt2M
|
||||
},
|
||||
handleChange (info) {
|
||||
handleChange(info) {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.loading = true
|
||||
return
|
||||
@ -206,22 +232,22 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
async handlePreview (file) {
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64FileList(file.originFileObj)
|
||||
}
|
||||
this.previewImage = file.url || file.preview
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleCancel () {
|
||||
handleCancel() {
|
||||
this.previewVisible = false
|
||||
},
|
||||
// 上传banner
|
||||
handleChangeFileList ({ fileList }) {
|
||||
handleChangeFileList({ fileList }) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
// handler
|
||||
handleSubmit (e) {
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
@ -260,21 +286,21 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
rollback () {
|
||||
rollback() {
|
||||
this.$router.push('/admin/park/parkList')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上传园区小图
|
||||
function getBase64 (img, callback) {
|
||||
function getBase64(img, callback) {
|
||||
const reader = new FileReader()
|
||||
reader.addEventListener('load', () => callback(reader.result))
|
||||
reader.readAsDataURL(img)
|
||||
}
|
||||
|
||||
// 上传园区banner图
|
||||
function getBase64FileList (file) {
|
||||
function getBase64FileList(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user