boyue2025/dbd-meeting-html
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-html.git synced 2025-06-21 05:39:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

描述：新增楼宇选择园区

Browse Source
This commit is contained in:
SelfRidicule 2024-04-01 16:42:11 +08:00
parent 2be81744cf
commit 339d49107b
1 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/admin/ParkEdit.vue
View File

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