From 339d49107b99f016418968ef7c23af68456bdd5c Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Mon, 1 Apr 2024 16:42:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=A5=BC=E5=AE=87=E9=80=89=E6=8B=A9=E5=9B=AD=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/ParkEdit.vue | 178 ++++++++++++++++++++---------------
 1 file changed, 102 insertions(+), 76 deletions(-)

diff --git a/src/views/admin/ParkEdit.vue b/src/views/admin/ParkEdit.vue
index 0a2200c..f4647e1 100644
--- a/src/views/admin/ParkEdit.vue
+++ b/src/views/admin/ParkEdit.vue
@@ -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)