云中心数据加载，模态框处理

components/default/CloudHeader.vue

@@ -6,11 +6,11 @@
           <a href="http://www.ubtob.com" class="item navbar-link">
             <img src="/images/logo/uas.png" class="navbar-logo">
           </a>
-          <a href=""><span class="navbar-slogan">账号中心</span></a>
+          <a href=""><span class="navbar-slogan">云中心</span></a>
         </div>
         <ul class="nav nav-pills f-nav">
           <li>
-            <nuxt-link to="/cloudcenter" class="menu-item">基本信息</nuxt-link>
+            <nuxt-link to="/cloudcenter" class="menu-item" exact>基本信息</nuxt-link>
           </li>
           <li>
             <nuxt-link to="/cloudcenter/enterprise" class="menu-item">企业管理</nuxt-link>

pages/cloudcenter/enterprise/index.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="manager">
-    <div class="us-member w-over-box">
-      <div class="container">
-        <div class="table-list">
-          <div class="table-top">
-            <h3>成员列表</h3>
-            <a class="btn-us-apply">申请列表</a>
-          </div>
-          <table class="table table-striped">
-            <thead>
+    <template v-if="!centerDialogVisible">
+      <!--企业管理成员列表部分-->
+      <div class="us-member w-over-box" v-if="toggle">
+        <div class="container">
+          <div class="table-list">
+            <div class="table-top">
+              <h3>成员列表</h3>
+              <a class="btn-us-apply" @click="toggle = !toggle">申请列表</a>
+            </div>
+            <table class="table table-striped" v-if="member.content.length !== 0">
+              <thead>
               <tr>
                 <th>角色</th>
                 <th>用户名称</th>
@@ -16,34 +18,34 @@
                 <th>手机号</th>
                 <th>邮箱</th>
               </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>管理员</td>
-                <td>李事业</td>
-                <td>U456</td>
-                <td>123456799+66</td>
-                <td>112456112@qq.com</td>
+              </thead>
+              <tbody>
+              <tr v-for="item in member.content">
+                <td >管理员</td>
+                <td v-text="item.vipName ? item.vipName : ''">李事业</td>
+                <td v-text="item.userUU ? item.userUU : ''">U456</td>
+                <td v-text="item.mobile ? item.mobile : ''">123456799+66</td>
+                <td v-text="item.email ? item.email : ''">112456112@qq.com</td>
               </tr>
-            </tbody>
-          </table>
-          <page :total="pageParams.counts" :page-size="pageParams.count"
-                  :current="pageParams.page" @childEvent="handleCurrentChange">
-          </page>
+              </tbody>
+            </table>
+            <div style="text-align: center;color:#333;height:100px;line-height: 100px;" v-if="member.content.length === 0">现在没有可以申请的列表哦！</div>
+            <page :total="member.totalElements" :page-size="count"
+                  :current="page" @childEvent="handleApplyChange">
+            </page>
+          </div>
         </div>
       </div>
-    </div>
-
-    <!--企业管理申请列表部分-->
-    <div class="us-apply w-over-box">
-      <div class="container">
-        <div class="table-list">
-          <div class="table-top">
-            <h3>申请列表</h3>
-            <a class="btn-us-member">成员列表</a>
-          </div>
-          <table class="table table-striped">
-            <thead>
+      <!--企业管理申请列表部分-->
+      <div class="us-apply w-over-box" v-else>
+        <div class="container">
+          <div class="table-list">
+            <div class="table-top">
+              <h3>申请列表</h3>
+              <a class="btn-us-member" @click="toggle = !toggle">成员列表</a>
+            </div>
+            <table class="table table-striped" v-if="apple.content.length !== 0">
+              <thead>
               <tr>
                 <th>操作</th>
                 <th>用户名称</th>
@@ -51,33 +53,44 @@
                 <th>手机号</th>
                 <th>邮箱</th>
               </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <button class="btn btn-apply">同意</button>
-                  <button class="btn btn-apply">拒绝</button>
+              </thead>
+              <tbody>
+              <tr v-for="item in apple.content">
+                <td v-if="item.status === 311">
+                  <button class="btn btn-apply" @click="handleClick(true, item)">同意</button>
+                  <button class="btn btn-apply" @click="handleClick(false, item)">拒绝</button>
                 </td>
-                <td>李事业</td>
-                <td>U456</td>
-                <td>123456799+66</td>
-                <td>112456112@qq.com</td>
-              </tr>
-              <tr>
-                <td></td>
-                <td>李事业</td>
-                <td>U456</td>
-                <td>123456799+66</td>
-                <td>112456112@qq.com</td>
+                <td v-if="item.status === 316">
+                  已同意
+                </td>
+                <td v-if="item.status === 317">
+                  已拒绝
+                </td>
+                <td v-text="item.user.vipName ? item.user.vipName : ''">李事业</td>
+                <td v-text="item.user.userUU ? item.user.userUU : ''">U456</td>
+                <td v-text="item.user.mobile ? item.user.mobile : ''">123456799+66</td>
+                <td v-text="item.user.email ? item.user.email : ''">112456112@qq.com</td>
               </tr>
-            </tbody>
-          </table>
-          <page :total="pageParams.counts" :page-size="pageParams.count"
-                :current="pageParams.page" @childEvent="handleCurrentChange">
-          </page>
+              </tbody>
+            </table>
+            <div style="text-align: center; color:#333;height:100px;line-height: 100px;" v-if="apple.content.length === 0">现在没有可以申请的列表哦！</div>
+            <page :total="apple.totalElements" :page-size="count"
+                  :current="page" @childEvent="handleMemberChange">
+            </page>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
+    <el-dialog
+      title="温馨提示"
+      :visible.sync="centerDialogVisible"
+      width="30%">
+      <span style="font-size: 14px;">您目前是个人账户登录，请 <strong>绑定企业</strong> </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="centerDialogVisible = false">立即绑定</el-button>
+        <el-button @click="centerDialogVisible = false">暂不绑定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -86,28 +99,95 @@
   export default {
     name: 'manager',
     layout: 'cloud',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('loadApplyList', {page: 1, size: 20}),
+        store.dispatch('loadMemberList', {page: 1, size: 20})
+      ])
+    },
     components: {
       Page
     },
     data () {
       return {
-        pageParams: {
-          page: 1,
-          count: 10,
-          counts: 222,
-          filter: {}
-        }
+        centerDialogVisible: true,
+        toggle: false,
+        page: 1,
+        count: 20
+      }
+    },
+    created: function () {
+      this.user.userspace ? this.centerDialogVisible = false : this.centerDialogVisible = true
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.userInfo.data.content
+      },
+      apple () {
+        return this.$store.state.cloudCenter.apple.data.content
+      },
+      member () {
+        return this.$store.state.cloudCenter.member.data.content
       }
     },
     methods: {
-      handleCurrentChange () {
-        console.log('11')
+      handleApplyChange: function (page) {
+        this.$store.dispatch('loadApplyList', {page: page, size: 20})
+      },
+      handleMemberChange: function (page) {
+        this.$store.dispatch('loadMemberList', {page: page, size: 20})
+      },
+      handleClick: function (type, item) {
+        let param = new FormData()
+        param.append('userUU', item.user.userUU)
+        param.append('id', item.id)
+        let config = {
+          headers: {'Context-Type': 'multipart/form-data'}
+        }
+        if (type) {
+          this.$http.post('/sso/center/agree/apply', param, config)
+            .then(res => {
+              if (res.data.success) {
+                this.handleApplyChange()
+                this.$message({
+                  message: '操作成功',
+                  type: 'success'
+                })
+              }
+              if (res.data.error) {
+                this.$message.error(res.data.errMsg)
+              }
+            })
+        } else {
+          this.$http.post('/sso/center/disagree/apply', param, config)
+            .then(res => {
+              if (res.data.success) {
+                this.handleApplyChange()
+                this.$message({
+                  message: '操作成功',
+                  type: 'success'
+                })
+              }
+              if (res.data.error) {
+                this.$message.error(res.data.mrrMsg)
+              }
+            })
+        }
       }
     }
   }
 </script>
 
 <style scoped type="text/scss" lang="scss">
+  .el-dialog__wrapper{
+    z-index:10000;
+  }
+  .el-dialog__body{
+    text-align: center;
+  }
+  .el-dialog__footer{
+    text-align: center;
+  }
   .manager{
     background: #eee;
     padding:50px 0 112px 30px;

pages/cloudcenter/index.vue

@@ -19,7 +19,7 @@
         </div>
       </div>
     </div>
-    <div class="w-over-box">
+    <div class="w-over-box" v-if="user.userspace">
       <div class="container">
         <div class="basic-info">
           <h3><i class="business"></i><b v-text="user.userspace.spaceName ? user.userspace.spaceName : '企业名称'"></b></h3>

store/cloudCenter.js

@@ -0,0 +1,33 @@
+export const state = () => ({
+  apple: {
+    data: {},
+    fetching: false
+  },
+  member: {
+    data: {},
+    fetching: false
+  }
+})
+
+export const mutations = {
+  REQUEST_APPLY (state) {
+    state.apple.fetching = true
+  },
+  REQUEST_APPLY_SUCCESS (state, result) {
+    state.apple.fetching = false
+    state.apple.data = result
+  },
+  REQUEST_APPLY_FAILURE (state) {
+    state.apple.fetching = false
+  },
+  REQUEST_MEMBER (state) {
+    state.member.fetching = true
+  },
+  REQUEST_MEMBER_SUCCESS (state, result) {
+    state.member.data = result
+    state.member.fetching = false
+  },
+  REQUEST_MEMBER_FAILURE (state) {
+    state.member.fetching = false
+  }
+}

store/index.js

@@ -52,7 +52,26 @@ export const actions = {
       commit('option/REQUEST_LOGOUT_SUCCESS', response.data)
     })
   },
-
+  // 获取成员列表信息
+  loadMemberList ({ commit }, params = {}) {
+    commit('cloudCenter/REQUEST_MEMBER')
+    return axios.get('/sso/center/member/info', {params})
+      .then(res => {
+        commit('cloudCenter/REQUEST_MEMBER_SUCCESS', res.data)
+      }, err => {
+        commit('cloudCenter/REQUEST_MEMBER_FAILURE', err)
+      })
+  },
+  // 获取申请列表信息
+  loadApplyList ({commit}, params = {}) {
+    commit('cloudCenter/REQUEST_APPLY')
+    return axios.get('/sso/center/apply/info', {params})
+      .then(res => {
+        commit('cloudCenter/REQUEST_APPLY_SUCCESS', res.data)
+      }, err => {
+        commit('cloudCenter/REQUEST_APPLY_FAILURE', err)
+      })
+  },
   // 获取表单配置
   loadFormData ({ commit }, params = {}) {
     commit('formConfig/REQUEST_FORMDATA')