切换小区优化

src/components/tools/LoginSwitchHouse.vue

+<template>
+  <a-modal :title="title" width="100%" :dialog-style="{ top: '0', height: '100vh'}" :keyboard="false" :visible="visible"
+    :mask="false" :closable="closable" :footer="false" :maskClosable="false" @cancel="visible = false">
+    <div class="house-content-box">
+      <div class="box" :class="{'active': currentCode === item.communityCode}" v-for="item in list" :key="item.id"
+        @click="selectHouse(item)">
+        <img class="image" :src="imgUrl+'/sys/common/static/'+item.communityImage" alt="" />
+        <div class="describe">
+          <p class="name">{{item.communityName}}</p>
+          <p class="address">{{item.communityArea}}{{item.addressInfo}}222</p>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import Vue from 'vue'
+import { putAction } from '@/api/manage'
+import { welcome } from '@/utils/util'
+import { mapActions } from 'vuex'
+import {
+  ACCESS_TOKEN,
+  TENANT_ID,
+  USER_NAME,
+  USER_INFO,
+  UI_CACHE_DB_DICT_DATA,
+  HOUSE_LIST,
+} from '@/store/mutation-types'
+let username = ''
+
+export default {
+  name: 'LoginSelectTenant',
+  props: {
+    title: {
+      type: String,
+      default: '请选择小区',
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      houseList: [],
+      currentCode: '',
+      imgUrl: process.env.VUE_APP_API_BASE_URL,
+    }
+  },
+  methods: {
+    ...mapActions(['changeHouse']),
+    clear() {
+      this.houseList = []
+      this.visible = false
+    },
+    bizDepart(loginResult) {
+      let multi_community = loginResult.multi_community
+      if (multi_community === 2) {
+        this.visible = true
+        let list = loginResult.communitys.map((item) => {
+          let imgList = item.communityImage.split(',')
+          return {
+            ...item,
+            imgUrl: process.env.VUE_APP_API_BASE_URL + '/sys/common/static/' + imgList[0],
+          }
+        })
+        Vue.ls.set(HOUSE_LIST, list, 7 * 24 * 60 * 60 * 1000)
+        this.houseList = list
+
+        // }
+        // if( multi_community == 0 ){
+        //   this.$notification.warn({
+        //     message: '提示',
+        //     description: `您尚未认证小区,请确认账号信息`,
+        //     duration:3
+        //   });
+        // } else if(multi_community === 1) {
+        //   this.visible = false
+      } else {
+        this.visible = false
+      }
+    },
+    show(loginResult) {
+      if (loginResult) {
+        this.clear()
+        this.bizDepart(loginResult)
+
+        if (this.visible === false) {
+          this.$emit('success')
+        }
+      } else {
+        const list = Vue.ls.get(HOUSE_LIST)
+        const code = Vue.ls.get(TENANT_ID)
+        this.houseList = list
+        this.currentCode = code
+        this.visible = true
+      }
+    },
+    requestFailed(err) {
+      this.$notification['error']({
+        message: '登录失败',
+        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        duration: 4,
+      })
+    },
+    departResolve(row) {
+      return new Promise((resolve, reject) => {
+        putAction('/sys/selectCommunity', {
+          platformCode: row.communityCode,
+          username: Vue.ls.get(USER_NAME),
+        }).then((res) => {
+          if (res.success) {
+            const result = res.result
+            const userInfo = result.userInfo
+            Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
+            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
+            Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
+            Vue.ls.set(TENANT_ID, result.userInfo.platformCode, 7 * 24 * 60 * 60 * 1000)
+            this.$store.commit('SET_TOKEN', result.token)
+            this.$store.commit('SET_INFO', userInfo)
+            this.$store.commit('SET_NAME', {
+              username: userInfo.username,
+              realname: userInfo.realname,
+              welcome: welcome(),
+            })
+            this.$store.commit('SET_AVATAR', userInfo.avatar)
+            resolve()
+          } else {
+            this.requestFailed(res)
+            this.$store.dispatch('Logout')
+            reject()
+          }
+        })
+      })
+    },
+    selectHouse(row) {
+      // console.log(this.changeHouse)
+      // debugger
+      // let loginParams = {
+      //   platformCode: row.communityCode,
+      //   username,
+      //   platformType: 'community'
+      // }
+      // this.changeHouse(loginParams).then(()=> {
+      //   this.$store.dispatch('saveTenant', row.communityCode);
+      //   this.$emit('success')
+      // }).catch(err=> {
+      //   this.requestFailed(err)
+      //   this.$store.dispatch('Logout');
+      // })
+      this.departResolve(row)
+        .then(() => {
+          this.visible = false
+          this.$store.dispatch('saveTenant', row.communityCode)
+          this.$emit('success')
+        })
+        .catch(() => {
+          console.log('登录选择出问题')
+        })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-modal-content {
+  height: 100vh !important;
+  max-height: 100vh !important;
+  overflow-y: auto;
+}
+.house-content-box {
+  display: flex;
+  .box {
+    box-sizing: border-box;
+    flex: none;
+    width: 300px;
+    height: 300px;
+    border-radius: 10px;
+    margin-right: 20px;
+    border: 1px solid #cbcbcb;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.5s;
+    &:hover {
+      box-shadow: 0px 0px 10px #a9a4a4;
+    }
+    &.active {
+      box-shadow: 0px 0px 10px #a9a4a4;
+    }
+    .image {
+      width: 100%;
+      height: 200px;
+      border-radius: 10px 10px 0 0;
+    }
+    .describe {
+      height: 100px;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .name {
+        font-size: 16px;
+        color: #666;
+        margin-bottom: 10px;
+      }
+      .address {
+        font-size: 14px;
+        color: #999;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/tools/UserMenu.vue

@@ -89,7 +89,7 @@
     <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
     <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
 
-    <login-select-house ref="loginSelect" :closable="true" title="小区切换" @success="loginSelectOk"></login-select-house>
+    <login-switch-house ref="loginSelect" :closable="true" title="小区切换" @success="loginSelectOk" :list="communityList"></login-switch-house>
   </div>
 </template>
 
@@ -98,7 +98,7 @@
   import UserPassword from './UserPassword'
   import SettingDrawer from "@/components/setting/SettingDrawer";
   import DepartSelect from './DepartSelect'
-  import LoginSelectHouse from './LoginSelectHouse'
+  import LoginSwitchHouse from './LoginSwitchHouse'
   import { mapActions, mapGetters,mapState } from 'vuex'
   import { mixinDevice } from '@/utils/mixin.js'
   import { getFileAccessHttpUrl,getAction } from "@/api/manage"
@@ -115,7 +115,8 @@
         searchMenuComp: 'span',
         searchMenuVisible: false,
         // update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
-        isShowChange: true
+        isShowChange: true,
+        communityList:[]
       }
     },
     components: {
@@ -123,7 +124,7 @@
       UserPassword,
       DepartSelect,
       SettingDrawer,
-      LoginSelectHouse
+      LoginSwitchHouse
     },
     props: {
       theme: {
@@ -209,8 +210,13 @@
         this.$refs.userPassword.show(username)
       },
       updateCurrentDepart(){
+        this.getHouse()
         this.$refs.loginSelect.show()
       },
+      async getHouse() {
+        let { result } = await getAction('/property-company/community/companyCommunity/getCommunityList',{ })
+        this.communityList = result
+      },
       // systemSetting(){
       //   this.$refs.loginSelect.showDrawer()
       // },