From 3a989926389ce36e027291b04d95f51cd7553ea1 Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Tue, 26 Mar 2024 14:23:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=9A=E4=BC=9A=E8=AE=AE?=
 =?UTF-8?q?=E5=AE=A4=E5=9B=9E=E6=98=BE=E6=88=BF=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meeting/modules/RoomContentModal.vue      | 320 ++++++++++--------
 1 file changed, 174 insertions(+), 146 deletions(-)

diff --git a/src/views/admin/meeting/modules/RoomContentModal.vue b/src/views/admin/meeting/modules/RoomContentModal.vue
index c17b741..94583e1 100644
--- a/src/views/admin/meeting/modules/RoomContentModal.vue
+++ b/src/views/admin/meeting/modules/RoomContentModal.vue
@@ -1,61 +1,64 @@
 <template>
   <a-modal
     :title="mdl.id>0?'编辑':'新增'"
-    style="top: 20px"
-    :width="1000"
-    v-model="visible"
-    :confirmLoading="confirmLoading"
+    style='top: 20px'
+    :width='1000'
+    v-model='visible'
+    :confirmLoading='confirmLoading'
 
-    @ok="handleSubmit"
+    @ok='handleSubmit'
   >
-    <a-form :form="form"     >
-      <a-form-item style="display: none">
+    <a-form :form='form'>
+      <a-form-item style='display: none'>
         <a-input v-decorator="['id']" />
       </a-form-item>
-      <a-form-item style="display: none">
+      <a-form-item style='display: none'>
         <a-input v-decorator="['version']" />
       </a-form-item>
 
       <!--   一行   -->
       <a-row>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="所属建筑">
-            <a-input placeholder="所属建筑" v-decorator="['build']" disabled='disabled' defaultValue='创智大厦' />
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属建筑'>
+            <a-input placeholder='所属建筑' v-decorator="['build']" disabled='disabled' defaultValue='创智大厦' />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item  label="会议名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="会议名称" v-decorator="['meetingName',{rules: [{ required: true, message: '输入会议名称' }]}]"  />
+        <a-col :span='10'>
+          <a-form-item label='会议名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-input placeholder='会议名称'
+                     v-decorator="['meetingName',{rules: [{ required: true, message: '输入会议名称' }]}]" />
           </a-form-item>
         </a-col>
       </a-row>
 
       <a-row>
-        <a-col :span="10">
-          <a-form-item  label="会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-select v-decorator="['type',{rules: [{ required: true, message: '输入会议类型' }]}]" placeholder="会议类型">
-              <a-select-option :value="1">
+        <a-col :span='10'>
+          <a-form-item label='会议类型' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-select v-decorator="['type',{rules: [{ required: true, message: '输入会议类型' }]}]"
+                      placeholder='会议类型'>
+              <a-select-option :value='1'>
                 会议室
               </a-select-option>
-              <a-select-option :value="2">
+              <a-select-option :value='2'>
                 路演厅
               </a-select-option>
-              <a-select-option :value="3">
+              <a-select-option :value='3'>
                 洽谈室
               </a-select-option>
-              <a-select-option :value="4">
+              <a-select-option :value='4'>
                 直播间
               </a-select-option>
-              <a-select-option :value="5">
+              <a-select-option :value='5'>
                 茶室
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="所属楼层">
-            <a-select v-decorator="['buildId',{rules: [{ required: true, message: '请选择所属楼层' }]}]" placeholder="所属楼层"  @change='getRoomList' >
-              <a-select-option v-for="item in floorList" :key="item.id" :value="item.id" >
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属楼层'>
+            <a-select v-decorator="['buildId',{rules: [{ required: true, message: '请选择所属楼层' }]}]"
+                      placeholder='所属楼层' @change='getRoomList'>
+              <a-select-option v-for='item in floorList' :key='item.id' :value='item.id'>
                 {{ item.floorName }}
               </a-select-option>
             </a-select>
@@ -63,105 +66,114 @@
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="所属房间">
-            <a-select v-decorator="['roomId',{rules: [{ required: true, message: '选择所属房间' }]}]" placeholder="所属房间"  @change='getArea' >
-              <a-select-option v-for="item in roomList" :key="item.id" :value="item.id" >
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属房间'>
+            <a-select v-decorator="['roomId',{rules: [{ required: true, message: '选择所属房间' }]}]"
+                      placeholder='所属房间' @change='getArea'>
+              <a-select-option v-for='item in roomList' :key='item.id' :value='item.id'>
                 {{ item.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item  label="会议面积" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="会议面积" v-decorator="['area',{rules: [{ required: true, message: '请输入会议面积' }]}]" disabled='disabled' />
+        <a-col :span='10'>
+          <a-form-item label='会议面积' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-input placeholder='会议面积'
+                     v-decorator="['area',{rules: [{ required: true, message: '请输入会议面积' }]}]"
+                     disabled='disabled' />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item  label="容纳人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="容纳人数" v-decorator="['capacityNum',{rules: [{ required: true, message: '输入容纳人数' }]}]" />
+        <a-col :span='10'>
+          <a-form-item label='容纳人数' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-input placeholder='容纳人数'
+                     v-decorator="['capacityNum',{rules: [{ required: true, message: '输入容纳人数' }]}]" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="会议地址 ">
-            <a-input placeholder="会议地址" v-decorator="['address',{rules: [{ required: true, message: '输入会议地址' }]}]" />
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='会议地址 '>
+            <a-input placeholder='会议地址'
+                     v-decorator="['address',{rules: [{ required: true, message: '输入会议地址' }]}]" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item  label="排列形状" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-select v-decorator="['shape',{rules: [{ required: true, message: '输入排列形状' }]}]" placeholder="排列形状">
-              <a-select-option value="围桌式">
+        <a-col :span='10'>
+          <a-form-item label='排列形状' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-select v-decorator="['shape',{rules: [{ required: true, message: '输入排列形状' }]}]"
+                      placeholder='排列形状'>
+              <a-select-option value='围桌式'>
                 围桌式
               </a-select-option>
-              <a-select-option value="课桌式">
+              <a-select-option value='课桌式'>
                 课桌式
               </a-select-option>
-              <a-select-option value="长方形">
+              <a-select-option value='长方形'>
                 长方形
               </a-select-option>
-              <a-select-option value="U形">
+              <a-select-option value='U形'>
                 U形
               </a-select-option>
-              <a-select-option value="鱼骨形">
+              <a-select-option value='鱼骨形'>
                 鱼骨形
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="负责人">
-            <a-input placeholder="负责人" v-decorator="['headName',{rules: [{ required: true, message: '输入负责人' }]}]" />
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='负责人'>
+            <a-input placeholder='负责人'
+                     v-decorator="['headName',{rules: [{ required: true, message: '输入负责人' }]}]" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
 
-        <a-col :span="10">
-          <a-form-item  label="负责人联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="负责人联系方式" v-decorator="['headPhone',{rules: [{ required: true, message: '输入负责人联系方式'}]}]" />
+        <a-col :span='10'>
+          <a-form-item label='负责人联系方式' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-input placeholder='负责人联系方式'
+                     v-decorator="['headPhone',{rules: [{ required: true, message: '输入负责人联系方式'}]}]" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="启用时间">
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='启用时间'>
             <a-date-picker
               format='YYYY-MM-DD HH:mm:ss'
               valueFormat='YYYY-MM-DD HH:mm:ss'
               v-decorator="['startTime',{rules: [{ required: true, message: '输入启用时间'}]}]"
               :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
-              type="date"
-              placeholder="选择时间"
-              style="width: 100%;"
+              type='date'
+              placeholder='选择时间'
+              style='width: 100%;'
 
             />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item  label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+        <a-col :span='10'>
+          <a-form-item label='结束时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
             <a-date-picker
               format='YYYY-MM-DD HH:mm:ss'
               valueFormat='YYYY-MM-DD HH:mm:ss'
               v-decorator="['endDate',{rules: [{ required: true, message: '输入结束时间'}]}]"
               :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
-              type="date"
-              placeholder="选择时间结束时间"
-              style="width: 100%;"
+              type='date'
+              placeholder='选择时间结束时间'
+              style='width: 100%;'
 
             />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item  label="是否使用优惠劵" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-select v-decorator="['isTicket',{rules: [{ required: true, message: '请选择优惠券'}]}]" placeholder="是否收费">
-              <a-select-option :value="0">
+        <a-col :span='10'>
+          <a-form-item label='是否使用优惠劵' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-select v-decorator="['isTicket',{rules: [{ required: true, message: '请选择优惠券'}]}]"
+                      placeholder='是否收费'>
+              <a-select-option :value='0'>
                 是
               </a-select-option>
-              <a-select-option :value="1">
+              <a-select-option :value='1'>
                 否
               </a-select-option>
             </a-select>
@@ -169,75 +181,78 @@
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="是否收费">
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='是否收费'>
             <a-select v-decorator="['isToll',{rules: [{ required: true, message: '请选择是否收费'}]}]"
-                      @change='selectChangeIsToll' placeholder="是否收费">
-              <a-select-option :value="0">
+                      @change='selectChangeIsToll' placeholder='是否收费'>
+              <a-select-option :value='0'>
                 是
               </a-select-option>
-              <a-select-option :value="1">
+              <a-select-option :value='1'>
                 否
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item v-if='mdl.isToll === 0' :labelCol="labelCol" :wrapperCol="wrapperCol"  label="收费金额 ">
-            <a-input placeholder="收费金额 " v-decorator="['money',{rules: [{ required: true, message: '请输入收费金额'}]}]" />
+        <a-col :span='10'>
+          <a-form-item v-if='mdl.isToll === 0' :labelCol='labelCol' :wrapperCol='wrapperCol' label='收费金额 '>
+            <a-input placeholder='收费金额 '
+                     v-decorator="['money',{rules: [{ required: true, message: '请输入收费金额'}]}]" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item  label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-select v-decorator="['isShow',{rules: [{ required: true, message: '请选择是否启用'}]}]" placeholder="是否启用">
-            <a-select-option :value="0">
-              是
-            </a-select-option>
-            <a-select-option :value="1">
-              否
-            </a-select-option>
+        <a-col :span='10'>
+          <a-form-item label='是否启用' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-select v-decorator="['isShow',{rules: [{ required: true, message: '请选择是否启用'}]}]"
+                      placeholder='是否启用'>
+              <a-select-option :value='0'>
+                是
+              </a-select-option>
+              <a-select-option :value='1'>
+                否
+              </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="金额备注 ">
-            <a-input placeholder="金额备注 " v-decorator="['remake']" />
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='金额备注 '>
+            <a-input placeholder='金额备注 ' v-decorator="['remake']" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
 
-        <a-col :span="10">
-          <a-form-item  label="起租时长" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-input placeholder="起租时长" v-decorator="['duration',{rules: [{ required: true, message: '请输入起租时长'}]}]" />
+        <a-col :span='10'>
+          <a-form-item label='起租时长' :labelCol='labelCol' :wrapperCol='wrapperCol'>
+            <a-input placeholder='起租时长'
+                     v-decorator="['duration',{rules: [{ required: true, message: '请输入起租时长'}]}]" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="会议描述 ">
-            <a-input placeholder="会议描述 " v-decorator="['content']" />
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='会议描述 '>
+            <a-input placeholder='会议描述 ' v-decorator="['content']" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span="10">
-          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="室内图片url">
+        <a-col :span='10'>
+          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='室内图片url'>
             <!--        <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
             <a-upload
               v-decorator="['indoorPicUrl']"
-              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>
@@ -247,7 +262,13 @@
   </a-modal>
 </template>
 <script>
-import { saveRoomContent,getFloorList,getRoomListByFloorId,selectRoomById,get } from '@/api/admin/meeting/roomContent'
+import {
+  saveRoomContent,
+  getFloorList,
+  getRoomListByFloorId,
+  selectRoomById,
+  get
+} from '@/api/admin/meeting/roomContent'
 import pick from 'lodash.pick'
 import storage from 'store'
 import moment from 'moment'
@@ -257,12 +278,12 @@ export default {
   name: 'RoomContentModal',
   props: {},
   components: {},
-  data () {
+  data() {
     return {
       visible: false,
       labelCol: {
         xs: { span: 24 },
-        sm: { span: 5 },
+        sm: { span: 5 }
       },
       uploadUrl: process.env.VUE_APP_API_BASE_URL + '/api/dfs/upload',
       imageUrl: '',
@@ -270,58 +291,60 @@ export default {
         Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
       },
       loading: false,
-      floorList:[],
+      floorList: [],
 
-      roomList:[],
+      roomList: [],
       wrapperCol: {
         xs: { span: 24 },
-        sm: { span: 16 },
+        sm: { span: 16 }
       },
       confirmLoading: false,
       mdl: {},
       typeData: [],
-      form: this.$form.createForm(this),
+      form: this.$form.createForm(this)
     }
   },
-  beforeCreate () {},
-  created () {},
+  beforeCreate() {
+  },
+  created() {
+  },
   mounted() {
     this.getFloorList()
   },
   methods: {
-    selectChangeIsToll(value){
+    selectChangeIsToll(value) {
       this.mdl.isToll = value
     },
 
     moment,
     // 获取面积
-    getArea(value){
-      let param={
-        "id":value
+    getArea(value) {
+      let param = {
+        'id': value
       }
-      selectRoomById(param).then((res )=>{
+      selectRoomById(param).then((res) => {
         this.form.setFieldsValue({
           area: res.data.area
         })
       })
     },
-    getFloorList(){
-      getFloorList().then((res) =>{
+    getFloorList() {
+      getFloorList().then((res) => {
         this.floorList = res.data
       })
     },
-    getRoomList(value){
-      let param={
-        "buildingDetailId":value,
-        "type":0
+    getRoomList(value) {
+      let param = {
+        'buildingDetailId': value,
+        'type': 0
       }
-      getRoomListByFloorId(param).then((res) =>{
+      getRoomListByFloorId(param).then((res) => {
         this.roomList = res.data
       })
     },
 
 
-    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!')
@@ -332,7 +355,7 @@ export default {
       }
       return isJpgOrPng && isLt2M
     },
-    handleChange (info) {
+    handleChange(info) {
       if (info.file.status === 'uploading') {
         this.loading = true
         return
@@ -354,25 +377,30 @@ export default {
         })
       }
     },
-    add () {
+    add() {
       this.form.resetFields()
       this.edit({ id: 0 })
     },
-    edit (record) {
-      if (record.id != 0){
-        get(record.id).then((res) =>{
+    edit(record) {
+      if (record.id != 0) {
+        get(record.id).then((res) => {
         })
       }
-
       this.mdl = Object.assign(record)
       if (this.mdl.indoorPicUrl) {
         this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.indoorPicUrl
       }
+      if (this.mdl.roomId) {
+        this.roomList.push({
+          id: this.mdl.roomId,
+          name: this.mdl.roomName
+        })
+      }
       getRoomListByFloorId({
-        "buildingDetailId":this.mdl.buildId,
-        "type":0
+        'buildingDetailId': this.mdl.buildId,
+        'type': 0
 
-      }).then((res) =>{
+      }).then((res) => {
         this.roomList = res.data
       })
 
@@ -403,13 +431,12 @@ export default {
             'money',
             'remake',
             'duration',
-            'content',
-
+            'content'
           )
         )
       })
     },
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {
@@ -433,10 +460,11 @@ export default {
             })
         }
       })
-    },
+    }
   }
 }
-function getBase64 (img, callback) {
+
+function getBase64(img, callback) {
   const reader = new FileReader()
   reader.addEventListener('load', () => callback(reader.result))
   reader.readAsDataURL(img)
@@ -444,28 +472,28 @@ function getBase64 (img, callback) {
 </script>
 
 <style scoped>
-.self-item-cell{
+.self-item-cell {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.self-item-cell .self-item{
+.self-item-cell .self-item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 50%;
 }
 
-.self-item-cell .self-item:first-of-type{
+.self-item-cell .self-item:first-of-type {
   margin-right: 10px;
 }
 
-.self-item-cell .self-item .title{
+.self-item-cell .self-item .title {
   margin-right: 10px;
 }
 
-.self-item-cell .self-item .input{
+.self-item-cell .self-item .input {
   flex: 1;
 
 }