绘制后台企业管理操作页面

sso-manage-console-web/src/components/accounts/enterprises/EnterpriseAdmin.vue

@@ -1,19 +1,65 @@
 <template>
   <div>
-    124
+    <message-list :messages="messages">
+      <button class="btn btn-default btn-change" slot="action">更换管理员</button>
+      <button class="btn btn-default" slot="action">更换记录</button>
+    </message-list>
   </div>
 </template>
 
 <script>
+  import MessageList from './common/MessageList'
+
   export default {
-    name: 'enterprise-admin'
+    name: 'enterprise-admin',
+    components: {
+      MessageList
+    },
+    data () {
+      return {
+        messages: [
+          {
+            label: '个人UU',
+            value: 'U05168'
+          },
+          {
+            label: '管理员名称',
+            value: '陈正亮',
+            suffixClass: 'admin-message',
+            action: () => { console.log('Ok') }
+          },
+          {
+            label: '手机号',
+            value: '13600001122'
+          },
+          {
+            label: '邮箱',
+            value: '1891141208@163.com'
+          },
+          {
+            label: '申诉状态',
+            value: '申诉中',
+            suffixClass: 'status-message',
+            action: () => { console.log('Ok') }
+          }
+        ]
+      }
+    }
   }
 </script>
 
 <style scoped>
+  .message-panel .message-action button.btn-change {
+    border-color: #4E8EFC;
+    background-color: #4E8EFC;
 
+    color: #FFFFFF;
+  }
 </style>
 
 <style>
-
+  .admin-message::after {
+    content: 'ABV';
+    color: black;
+  }
 </style>

sso-manage-console-web/src/components/accounts/enterprises/EnterpriseApps.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <app-list :rows="apps"></app-list>
+  </div>
+</template>
+
+<script>
+  import AppList from './common/AppList'
+
+  export default {
+    name: 'enterprise-apps',
+    components: {
+      AppList
+    },
+    data () {
+      return {
+        apps: [
+          {
+            label: 'UAS系统',
+            status: 2
+          },
+          {
+            label: 'B2B商务平台',
+            status: 2
+          },
+          {
+            label: '优软商城',
+            status: 1
+          },
+          {
+            label: '金融服务',
+            status: 0
+          },
+          {
+            label: '优软人才网',
+            status: 0
+          },
+          {
+            label: 'UU众创',
+            status: 0
+          },
+          {
+            label: '定制商城',
+            status: 0
+          }
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .message-panel .message-action button.btn-auth {
+    border-color: #4E8EFC;
+    background-color: #4E8EFC;
+
+    color: #FFFFFF;
+  }
+</style>
+
+<style>
+  .admin-message::after {
+    content: 'ABV';
+    color: black;
+  }
+</style>

sso-manage-console-web/src/components/accounts/enterprises/EnterpriseAuth.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <message-list :messages="messages">
+      <button class="btn btn-default btn-auth" slot="action">认证通过</button>
+      <button class="btn btn-default" slot="action">不通过</button>
+    </message-list>
+  </div>
+</template>
+
+<script>
+  import MessageList from './common/MessageList'
+
+  export default {
+    name: 'enterprise-auth',
+    components: {
+      MessageList
+    },
+    data () {
+      return {
+        messages: [
+          {
+            label: '企业名称',
+            value: '深圳市优软科技有限公司'
+          },
+          {
+            label: '法定代表人',
+            value: '陈正亮'
+          },
+          {
+            label: '营业执照号',
+            value: '1891141208120191'
+          },
+          {
+            label: '营业执照附件',
+            value: '营业执照.jpg'
+          },
+          {
+            label: '企业地址',
+            value: '广东省深圳市南山区高新科技产业园科技南五路英唐大厦五楼'
+          }
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .message-panel .message-action button.btn-auth {
+    border-color: #4E8EFC;
+    background-color: #4E8EFC;
+
+    color: #FFFFFF;
+  }
+</style>
+
+<style>
+  .admin-message::after {
+    content: 'ABV';
+    color: black;
+  }
+</style>

sso-manage-console-web/src/components/accounts/enterprises/common/AppList.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="message-panel">
+    <div class="row" v-for="row in rows">
+      <div class="message-label">
+        <div class="message-label-wrapper">
+          <span>{{row.label}}</span>
+          <span v-if="row.status === 0" style="color: #E68717;">未开通</span>
+          <span v-if="row.status === 1" style="color: #E68717;">开通失败</span>
+          <span v-if="row.status === 2" style="color: #646464;">已开通</span>
+        </div>
+      </div>
+      <div class="message-value">
+        <button class="btn btn-primary btn-open" v-if="row.status === 0" @click="() => { $message.info('开通') }">开通</button>
+        <button class="btn btn-primary btn-reopen" v-if="row.status === 1" @click="() => { $message.info('重新开通') }">重新开通</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'app-list',
+    props: {
+      rows: Array
+    }
+  }
+</script>
+
+<style scoped>
+  .message-panel {
+    padding-top: 16px;
+  }
+  .message-panel .row {
+    margin: 10px 0;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 26px;
+  }
+  .message-panel .row div {
+    display: inline-block;
+  }
+  .message-panel .row .message-label {
+    padding: 0 20px;
+    width: 330px;
+    height: 40px;
+    border: 1px #D2D2D2 solid;
+
+    color: #000000;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .message-panel .row .message-label .message-label-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+  .message-panel .row .message-value {
+    margin-left: 20px;
+    width: 100px;
+
+    color: #000000;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .message-panel .row .message-value button {
+    height: 26px;
+    outline: none;
+    border-radius: 0;
+
+    color: #FFFFFF;
+    font-size: 12px;
+    font-weight: normal;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .message-panel .row .message-value btn-open {
+    width: 50px;
+    line-height: 12px;
+  }
+  .message-panel .row .message-value .btn-reopen {
+    width: 64px;
+    line-height: 12px;
+    padding: 6px 0;
+  }
+</style>

sso-manage-console-web/src/components/accounts/enterprises/common/MessageList.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="message-panel">
+    <div class="row" v-for="message in messages">
+      <div class="message-label">{{ message.label }}</div>
+      <div class="message-value">
+        <span>{{ message.value }}</span>
+        <span v-if="message.suffixClass" :class="message.suffixClass" @click="message.action"></span>
+      </div>
+    </div>
+    <div class="row message-action">
+      <slot name="action"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'message-list',
+    props: {
+      messages: Array
+    }
+  }
+</script>
+
+<style scoped>
+  .message-panel {
+    padding-top: 16px;
+  }
+  .message-panel .row {
+    margin: 10px 0;
+    height: 34px;
+    line-height: 34px;
+  }
+  .message-panel .row div {
+    display: inline-block;
+    padding: 10px 0;
+    line-height: 14px;
+  }
+  .message-panel .row .message-label {
+    padding-left: 26px;
+    width: 150px;
+
+    color: #000000;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "SimHei", sans-serif;
+  }
+  .message-panel .row .message-value {
+    width: 600px;
+
+    color: #646464;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .message-panel .message-action {
+    margin-top: 70px;
+    padding-left: 26px;
+  }
+  .message-panel .message-action button {
+    margin-right: 26px;
+    width: 120px;
+    height: 34px;
+    line-height: 20px;
+    border-radius: 0;
+
+    color: #000000;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .message-panel .message-action button:last-child {
+    margin-right: 0;
+  }
+</style>

sso-manage-console-web/src/components/accounts/enterprises/index.js

@@ -3,11 +3,15 @@ import EnterpriseBasicInfo from './EnterpriseBasicInfo'
 import EnterpriseMembers from './EnterpriseMembers'
 import EnterpriseAdmin from './EnterpriseAdmin'
 import EnterpriseBaseAction from './EnterpriseBaseAction'
+import EnterpriseAuth from './EnterpriseAuth'
+import EnterpriseApps from './EnterpriseApps'
 
 export {
   EnterpriseHome,
   EnterpriseBasicInfo,
   EnterpriseMembers,
   EnterpriseAdmin,
-  EnterpriseBaseAction
+  EnterpriseBaseAction,
+  EnterpriseAuth,
+  EnterpriseApps
 }

sso-manage-console-web/src/router/index.js

@@ -3,8 +3,8 @@ import Router from 'vue-router'
 import Index from '@/components/Index'
 import AccountIndex from '@/components/accounts/AccountIndex'
 import {
-  EnterpriseAdmin, EnterpriseBaseAction, EnterpriseBasicInfo,
-  EnterpriseHome, EnterpriseMembers
+  EnterpriseAdmin, EnterpriseApps, EnterpriseAuth, EnterpriseBaseAction,
+  EnterpriseBasicInfo, EnterpriseHome, EnterpriseMembers
 } from '@/components/accounts/enterprises'
 import {UserBasicInfo, UserHome} from '@/components/accounts/users'
 import {AppealHome} from '@/components/accounts/appeals'
@@ -65,12 +65,14 @@ export default new Router({
             {
               // 企业认证信息
               path: 'auth',
-              name: 'EnterpriseAuth'
+              name: 'EnterpriseAuth',
+              component: EnterpriseAuth
             },
             {
               // 企业应用管理
               path: 'apps',
-              name: 'EnterpriseApps'
+              name: 'EnterpriseApps',
+              component: EnterpriseApps
             }
           ]
         },