描述：楼宇管理，园区管理员不可编辑地区和园区

src/views/admin/modules/BuildingModal.vue

@@ -1,29 +1,45 @@
 <template>
   <a-modal
-    title="操作"
+    title='操作'
-    style="top: 20px;"
+    style='top: 20px;'
-    :width="800"
+    :width='800'
-    v-model="visible"
+    v-model='visible'
-    :confirmLoading="confirmLoading"
+    :confirmLoading='confirmLoading'
-    @ok="handleSubmit"
+    @ok='handleSubmit'
   >
-    <a-form :form="form">
+    <a-form :form='form'>
-      <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 :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属地区'>
+        <a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属地区' }]}]"
+                  @change='selectTenant'
+                  :disabled='tenantEnable'>
+          <a-select-option v-for='item in tenantList' :key='item.id'>{{ item.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属园区'>
+        <a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]"
+                  :disabled='parkEnable'>
+          <a-select-option v-for='item in parkList' :key='item.id'>{{ item.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        :labelCol='labelCol'
+        :wrapperCol='wrapperCol'
+        label='楼宇名称'
+      >
+        <a-input placeholder='楼宇名称'
+                 v-decorator="['buildingName', {rules: [{ required: true, message: '请输入楼宇名称' }]}]" />
       </a-form-item>
       <a-form-item
-        :labelCol="labelCol"
+        :labelCol='labelCol'
-        :wrapperCol="wrapperCol"
+        :wrapperCol='wrapperCol'
-        label="楼宇名称"
+        label='备注'
       >
-        <a-input placeholder="楼宇名称" v-decorator="['buildingName', {rules: [{ required: true, message: '请输入楼宇名称' }]}]" />
+        <a-textarea :rows='5' placeholder='...' v-decorator="['remark']" />
-      </a-form-item>
-      <a-form-item
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-        label="备注"
-      >
-        <a-textarea :rows="5" placeholder="..." v-decorator="['remark']"/>
       </a-form-item>
 
     </a-form>
@@ -34,13 +50,16 @@ import { saveBuilding } from '@/api/admin/building'
 import pick from 'lodash.pick'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getInfo } from '@/api/login'
+import { getTenantList } from '@/api/tenant'
+import { getParkList } from '@/api/admin/park'
+
+
 export default {
   name: 'BuildingModal',
-  props: {
+  props: {},
-  },
+  components: {},
-  components: {
+  data() {
-  },
-  data () {
     return {
       visible: false,
       labelCol: {
@@ -58,16 +77,62 @@ export default {
       headers: {
         token: storage.get(ACCESS_TOKEN)
       },
-      parkData: [],
+      tenantList: [],
-      form: this.$form.createForm(this)
+      parkList: [],
+      form: this.$form.createForm(this),
+      userDetail: {},
+      tenantEnable: false,
+      parkEnable: false
     }
   },
-  beforeCreate () {
+  beforeCreate() {
   },
-  created () {
+  created() {
+    this.getUserDetail()
   },
   methods: {
-    beforeUpload (file) {
+    // 获取用户详细信息
+    getUserDetail() {
+      getInfo().then(res => {
+        console.log('getUserDetail', res)
+        this.userDetail = res
+        // 园区：5
+        if (this.userDetail.roleIds && this.userDetail.roleIds.length > 0 && this.userDetail.roleIds[0] == 5) {
+          // 不可编辑
+          this.tenantEnable = true
+          this.parkEnable = true
+          // 关联地区和园区
+          this.mdl.parkId = this.userDetail.parkId
+          this.mdl.tenantId = this.userDetail.tenantId
+          this.form.setFieldsValue({
+            parkId: this.mdl.parkId,
+            tenantId: this.mdl.tenantId
+          })
+        }
+      })
+    },
+    // 查询地区
+    getTenantData() {
+      getTenantList().then(res => {
+        this.tenantList = res.rows
+      })
+    },
+    // 选择地区 -> 查询园区
+    selectTenant(id) {
+      console.log('selectTenant', id)
+      // 清空数据
+      this.mdl.parkId = null
+      this.form.setFieldsValue({
+        parkId: null
+      })
+      // 查询园区
+      getParkList({
+        tenantId: id
+      }).then(res => {
+        this.parkList = res.rows
+      })
+    },
+    beforeUpload(file) {
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
       if (!isJpgOrPng) {
         this.$message.error('You can only upload JPG file!')
@@ -78,7 +143,7 @@ export default {
       }
       return isJpgOrPng && isLt2M
     },
-    handleChange (info) {
+    handleChange(info) {
       if (info.file.status === 'uploading') {
         this.loading = true
         return
@@ -100,22 +165,29 @@ export default {
         })
       }
     },
-
+    add() {
-    add () {
       this.form.resetFields()
       this.edit()
     },
-    edit (record) {
+    edit(record) {
-      this.mdl = Object.assign({}, record)
+      this.mdl = Object.assign(this.mdl, record)
+      let copyMdl = JSON.parse(JSON.stringify(this.mdl))
       this.visible = true
       if (this.mdl.buildingPic) {
         this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.buildingPic
       }
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.mdl, 'id', 'buildingName', 'buildingPic', 'remark', 'parkId'))
+        this.form.setFieldsValue(pick(this.mdl, 'id', 'buildingName', 'buildingPic', 'remark', 'parkId', 'tenantId'))
       })
+      // 查询地区
+      this.getTenantData()
+      // 选择地区 -> 查询园区
+      if (this.mdl.tenantId) {
+        this.selectTenant(this.mdl.tenantId)
+      }
+      this.mdl = copyMdl
     },
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {
@@ -153,8 +225,9 @@ export default {
       */
   }
 }
+
 // 上传图片
-function getBase64 (img, callback) {
+function getBase64(img, callback) {
   const reader = new FileReader()
   reader.addEventListener('load', () => callback(reader.result))
   reader.readAsDataURL(img)