描述：添加园区管理员时，将界面中“所属租户”改成“所属地区”，同时添加必须选择所属园区

src/views/system/modules/UserModal.vue

@@ -44,37 +44,44 @@
           >
           </a-tree-select>
         </a-form-item>
-        <a-form-item v-if='tenantId === null' :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 v-if='tenantId !== null' :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属园区'>
-          <a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]">
-            <a-select-option v-for='item in parkData' :key='item.value'>{{ item.text }}</a-select-option>
-          </a-select>
-        </a-form-item>
         <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='拥有角色' hasFeedback>
           <a-select
             style='width: 100%'
-            mode='multiple'
             v-decorator="['roleIds', {rules: [{ required: true, message: '请选择角色' }]}]"
             :allowClear='true'
+            mode='multiple'
+            @change='roleSelectChange'
           >
-            <a-select-option v-for='(action) in roleAll' :key='action.id'>{{ action.roleName }}</a-select-option>
+            <a-select-option v-for='(action) in roleAll' :key='action.id' :disabled='selectRoleEnable'>
+              {{ action.roleName
+              }}
+            </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择企业'>
+        <a-form-item v-if='tenantShow' :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属地区'>
-          <a-select v-decorator="['customerId', {rules: [{ required: true, message: '请选择企业' }]}]">
+          <a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属地区' }]}]"
+                    @change='selectTenant'>
+            <a-select-option v-for='item in tenantData' :key='item.value'>{{ item.text }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if='parkShow' :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属园区'>
+          <a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]"
+                    @change='selectPark'>
+            <a-select-option v-for='item in parkData' :key='item.value'>{{ item.text }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if='customerShow' :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择企业'>
+          <a-select v-decorator="['customerId', {rules: [{ required: true, message: '请选择企业' }]}]"
+                    @change='selectEnterprise'>
             <a-select-option v-for='item in customerList' :key='item.value'>{{ item.text }}</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择用户'>
+        <a-form-item v-if='selectUserShow' :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择用户'>
           <a-select
             show-search
             v-decorator="['staffId', {rules: [{required: true, message: '请选择手机号码'}]}]"
             placeholder='请选择手机号码'
-            style='width: 200px'
+            style='width: 100%'
             :default-active-first-option='false'
             :show-arrow='false'
             :filter-option='false'
@@ -82,7 +89,7 @@
             @search='handleSearch'
             @change='handleChange'
           >
-            <a-select-option v-for='item in data' :value='item.id' :key='item.id'>
+            <a-select-option v-for='item in searchUserList' :value='item.id' :key='item.id'>
               {{ item.username }} -{{ item.mobile }}
             </a-select-option>
           </a-select>
@@ -135,25 +142,24 @@ export default {
       confirmLoading: false,
       roleAll: [],
       mdl: {},
-      data: [],
+      searchUserList: [],
       customerList: [],
       deptCheck: true,
       spinning: false,
       tenantData: [],
       parkData: [],
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      selectRoleEnable: false,
+      tenantShow: false,
+      parkShow: false,
+      customerShow: false,
+      selectUserShow: false
     }
   },
   beforeCreate() {
   },
   created() {
-    getCustomerList().then(res => {
+    // 地区
-      res.rows.forEach(r => {
-        this.customerList.push({ value: r.id, text: r.name })
-      })
-    })
-
-    // 租户
     getTenantList().then(res => {
       if (res.code === 0) {
         res.rows.forEach(r => {
@@ -161,23 +167,134 @@ export default {
         })
       }
     })
-    // 获取园区
-    getParkList().then(res => {
-      if (res.code === 0) {
-        res.rows.forEach(r => {
-          this.parkData.push({ value: r.id, text: r.name })
-        })
-      }
-    })
     this.loadRoleAll()
   },
   methods: {
+    // 选择角色
+    roleSelectChange(value) {
+      console.log('roleSelectChange', value)
+      // 清空数据
+      this.searchUserList = []
+      // 赋值
+      this.mdl.roleIds = value
+      // 角色判断
+      if (value.length > 0) {
+        this.selectRoleEnable = true
+        // 判断角色
+        if (value[0] == 4) { // 企业：4
+          this.tenantShow = true
+          this.parkShow = true
+          this.customerShow = true
+
+        } else if (value[0] == 5) { // 园区：5
+          this.tenantShow = true
+          this.parkShow = true
+
+        } else {
+          this.tenantShow = false
+          this.parkShow = false
+          this.customerShow = false
+          this.selectUserShow = false
+        }
+
+      } else {
+        this.selectRoleEnable = false
+        //
+        this.tenantShow = false
+        this.parkShow = false
+        this.customerShow = false
+        this.selectUserShow = false
+      }
+    },
+    // 选择地区 -> 查询园区
+    selectTenant(id) {
+      console.log('selectTenant', id)
+      getParkList({
+        tenantId: id
+      }).then(res => {
+        this.parkData = res.rows.map(item => {
+          return {
+            value: item.id,
+            text: item.name
+          }
+        })
+      })
+      // 赋值
+      this.mdl.tenantId = id
+      // 清空数据
+      this.searchUserList = []
+      // 隐藏用户搜索
+      this.selectUserShow = false
+      // 清空园区、企业、用户
+      this.mdl.parkId = null
+      this.mdl.customerId = null
+      this.mdl.staffId = null
+      this.form.setFieldsValue({
+        parkId: null,
+        customerId: null,
+        staffId: null
+      })
+    },
+    // 选择园区 -> 查询企业
+    selectPark(id) {
+      getCustomerList({
+        parkId: id
+      }).then(res => {
+        this.customerList = res.data.map(item => {
+          return {
+            value: item.id,
+            text: item.name
+          }
+        })
+      })
+      // 赋值
+      this.mdl.parkId = id
+      // 清空数据
+      this.searchUserList = []
+      // 清空企业、用户
+      this.mdl.customerId = null
+      this.mdl.staffId = null
+      this.form.setFieldsValue({
+        customerId: null,
+        staffId: null
+      })
+      // 园区角色显示用户并且查询用户
+      console.log('this.mdl.roleIds', this.mdl.roleIds)
+      if (this.mdl.roleIds[0] == 5) {
+        this.selectUserShow = true
+      } else {
+        // 隐藏用户搜索
+        this.selectUserShow = false
+      }
+    },
+    // 选择企业
+    selectEnterprise(id) {
+      // 赋值
+      this.mdl.customerId = id
+      // 显示搜索用户
+      this.selectUserShow = true
+      // 清空数据
+      this.searchUserList = []
+      // 清空用户
+      this.mdl.staffId = null
+      this.form.setFieldsValue({
+        staffId: null
+      })
+    },
     handleSearch(value) {
       let param = {
         mobile: value
+      }
+      // 判断角色
+      if (this.mdl.roleIds[0] == 4) { // 企业：4
+        param.customerId = this.mdl.customerId
+      } else if (this.mdl.roleIds[0] == 5) { // 园区：5
+        param.parkId = this.mdl.parkId
+      } else {
+
       }
       getStaffList(param).then(res => {
-        this.data = res.rows
+        this.searchUserList = res.rows
       })
     },
     handleChange() {
@@ -190,11 +307,12 @@ export default {
       this.$nextTick(() => {
         this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds', 'staffId', 'customerId', 'remark', 'deptId', 'parkId', 'tenantId'))
       })
-      let param = {}
+      // 初始化显示
-      getStaffListByUser(param).then(res => {
+      this.selectRoleEnable = false
-        this.data = res.rows
+      this.tenantShow = false
-
+      this.parkShow = false
-      })
+      this.customerShow = false
+      this.selectUserShow = false
     },
     edit(record) {
       if (record.id > 0) {
@@ -202,20 +320,54 @@ export default {
         this.spinning = true
         getUser(record.id).then(res => {
           this.mdl = Object.assign({}, res)
+          let copyMdl = JSON.parse(JSON.stringify(this.mdl))
           this.visible = true
           this.$nextTick(() => {
             this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds', 'customerId', 'staffId', 'remark', 'deptId', 'parkId', 'tenantId'))
             this.spinning = false
             // this.form.setFieldsValue({ ...record })
-            // 查询 选择用户
-            getStaffListByUser({
-              staffId: this.mdl.staffId
-            }).then(res => {
-              console.log('edit getStaffListByUser', res)
-              this.data = res.rows
-            })
           })
+          // 判断角色
+          if (this.mdl.roleIds[0] == 4) { // 企业：4
+            // 选择地区 -> 查询园区
+            this.mdl = JSON.parse(JSON.stringify(copyMdl))
+            this.selectTenant(copyMdl.tenantId)
+            // 选择园区 -> 查询企业
+            this.mdl = JSON.parse(JSON.stringify(copyMdl))
+            this.selectPark(copyMdl.parkId)
+            // 查询用户
+            this.mdl = JSON.parse(JSON.stringify(copyMdl))
+            this.handleSearch(copyMdl.staffPhone)
+            // 赋值
+            this.mdl.customerId = copyMdl.customerId
+            this.mdl.staffId = copyMdl.staffId
+            // 显示
+            this.tenantShow = true
+            this.parkShow = true
+            this.customerShow = true
+            this.selectUserShow = true
 
+          } else if (this.mdl.roleIds[0] == 5) { // 园区：5
+            // 选择地区 -> 查询园区
+            this.mdl = JSON.parse(JSON.stringify(copyMdl))
+            this.selectTenant(copyMdl.tenantId)
+            // 查询用户
+            this.mdl = JSON.parse(JSON.stringify(copyMdl))
+            this.handleSearch(copyMdl.staffPhone)
+            // 赋值
+            this.mdl.staffId = copyMdl.staffId
+            // 显示
+            this.tenantShow = true
+            this.parkShow = true
+            this.customerShow = false
+            this.selectUserShow = true
+
+          } else {
+            this.tenantShow = false
+            this.parkShow = false
+            this.customerShow = false
+            this.selectUserShow = false
+          }
         })
       }
     },