提取企业后台管理操作页面的公共布局

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

@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <ul class="nav nav-tabs">
-      <li @click="$router.go(-1)">
-        <img src="/static/images/go_back.png" alt="GoBack"/>
-      </li>
-      <router-link tag="li" active-class="active" :to="{name: 'EnterpriseBasicInfo'}" exact>
-        <a>基本信息</a><span class="triangle"></span></router-link>
-      <router-link tag="li" active-class="active" :to="{name: 'EnterpriseMembers'}" exact>
-        <a>成员管理</a><span class="triangle"></span></router-link>
-      <router-link tag="li" active-class="active" :to="{name: 'EnterpriseAdmin'}" exact><a>管理员信息</a><span
-        class="triangle"></span></router-link>
-      <router-link tag="li" active-class="active" :to="{name: 'EnterpriseAuth'}" exact>
-        <a>认证信息</a><span class="triangle"></span></router-link>
-      <router-link tag="li" active-class="active" :to="{name: 'EnterpriseApps'}" exact>
-        <a>应用管理</a><span class="triangle"></span></router-link>
-    </ul>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'common-menu'
-  }
-</script>
-
-<style scoped>
-  .nav-tabs {
-    background-color: #E6EDF1;
-  }
-  .nav-tabs>li {
-    height: 60px;
-  }
-  .nav-tabs>li>img {
-    margin: 13px 38px 13px 14px;
-
-    cursor: pointer;
-  }
-  .nav-tabs>li>a {
-    margin: 13px 0;
-    border: none;
-    height: 34px;
-    padding: 9px 8px;
-    line-height: 14px;
-    background: none;
-
-    color: #646464;
-    font-size: 14px;
-    font-family: "Microsoft YaHei", sans-serif;
-  }
-  .nav-tabs>li.active>a {
-    color: #323232;
-    font-weight: bold;
-  }
-  .nav-tabs>li.active>a,
-  .nav-tabs>li.active>a:focus,
-  .nav-tabs>li.active>a:hover {
-    cursor: pointer;
-    border: none;
-    background: none;
-  }
-  .nav-tabs>li.active .triangle{
-    position: absolute;
-    width: 24px;
-    height: 12px;
-    border-right: 12px solid transparent;
-    border-left: 12px solid transparent;
-    border-bottom: 12px solid #FFFFFF;
-    z-index: 99;
-    bottom: 0;
-    left: 50%;
-    margin-left: -12px;
-  }
-</style>

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

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    124
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'enterprise-admin'
+  }
+</script>
+
+<style scoped>
+
+</style>
+
+<style>
+
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div style="min-height: 570px;">
+    <div>
+      <ul class="nav nav-tabs">
+        <li @click="$router.go(-1)">
+          <img src="/static/images/go_back.png" alt="GoBack"/>
+        </li>
+        <router-link tag="li" active-class="active" :to="{name: 'EnterpriseBasicInfo'}" exact>
+          <a>基本信息</a><span class="triangle"></span></router-link>
+        <router-link tag="li" active-class="active" :to="{name: 'EnterpriseMembers'}" exact>
+          <a>成员管理</a><span class="triangle"></span></router-link>
+        <router-link tag="li" active-class="active" :to="{name: 'EnterpriseAdmin'}" exact><a>管理员信息</a><span
+          class="triangle"></span></router-link>
+        <router-link tag="li" active-class="active" :to="{name: 'EnterpriseAuth'}" exact>
+          <a>认证信息</a><span class="triangle"></span></router-link>
+        <router-link tag="li" active-class="active" :to="{name: 'EnterpriseApps'}" exact>
+          <a>应用管理</a><span class="triangle"></span></router-link>
+      </ul>
+    </div>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'common-menu'
+  }
+</script>
+
+<style scoped>
+  .nav-tabs {
+    background-color: #E6EDF1;
+  }
+  .nav-tabs>li {
+    height: 60px;
+  }
+  .nav-tabs>li>img {
+    margin: 13px 38px 13px 14px;
+
+    cursor: pointer;
+  }
+  .nav-tabs>li>a {
+    margin: 13px 0;
+    border: none;
+    height: 34px;
+    padding: 9px 8px;
+    line-height: 14px;
+    background: none;
+
+    color: #646464;
+    font-size: 14px;
+    font-family: "Microsoft YaHei", sans-serif;
+  }
+  .nav-tabs>li.active>a {
+    color: #323232;
+    font-weight: bold;
+  }
+  .nav-tabs>li.active>a,
+  .nav-tabs>li.active>a:focus,
+  .nav-tabs>li.active>a:hover {
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+  .nav-tabs>li.active .triangle{
+    position: absolute;
+    width: 24px;
+    height: 12px;
+    border-right: 12px solid transparent;
+    border-left: 12px solid transparent;
+    border-bottom: 12px solid #FFFFFF;
+    z-index: 99;
+    bottom: 0;
+    left: 50%;
+    margin-left: -12px;
+  }
+</style>

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

@@ -1,82 +1,74 @@
 <template>
-  <div style="min-height: 570px;">
-    <common-menu></common-menu>
-    <!-- 内容区域 -->
-    <div class="basic-enterprise-info" style="padding: 30px 0 0;width: 490px;">
-      <el-form ref="form" :model="enterpriseInfo" label-width="150px">
-        <el-form-item label="企业UU">
-          <div>{{ enterpriseInfo.spaceUU }}</div>
-        </el-form-item>
-        <el-form-item label="企业名称">
-          <el-input v-model="enterpriseInfo.spaceName"></el-input>
-        </el-form-item>
-        <el-form-item label="法定代表人">
-          <el-input v-model="enterpriseInfo.corporation">
-            <div slot="append" v-if="enterpriseInfo.corporation">
-              <img src="/static/images/status/right.png" alt="Status">
-            </div>
-            <div slot="append" v-if="!enterpriseInfo.corporation">
-              <img src="/static/images/status/wrong.png" alt="Status">
-            </div>
-          </el-input>
+  <div class="basic-enterprise-info" style="padding: 30px 0 0;width: 490px;">
+    <el-form ref="form" :model="enterpriseInfo" label-width="150px">
+      <el-form-item label="企业UU">
+        <div>{{ enterpriseInfo.spaceUU }}</div>
+      </el-form-item>
+      <el-form-item label="企业名称">
+        <el-input v-model="enterpriseInfo.spaceName"></el-input>
+      </el-form-item>
+      <el-form-item label="法定代表人">
+        <el-input v-model="enterpriseInfo.corporation">
+          <div slot="append" v-if="enterpriseInfo.corporation">
+            <img src="/static/images/status/right.png" alt="Status">
+          </div>
+          <div slot="append" v-if="!enterpriseInfo.corporation">
+            <img src="/static/images/status/wrong.png" alt="Status">
+          </div>
+        </el-input>
 
-        </el-form-item>
-        <el-form-item label="营业执照号">
-          <el-input v-model="enterpriseInfo.businessCode"></el-input>
-        </el-form-item>
-        <el-form-item label="营业执照附件">
-          <el-input v-model="enterpriseInfo.businessCodeImage">
-            <i class="el-input__icon" slot="prefix" style="line-height: 14px;margin-left: 10px;">
-              <img src="/static/images/pic.png" alt="Picture">
-            </i>
-            <i class="el-input__icon" slot="suffix" style="line-height: 12px;">
-              <img src="/static/images/look.png" alt="Look">
-            </i>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="企业地址">
-          <el-input v-model="enterpriseInfo.companyAddress" :readonly="true">
-            <i class="el-input__icon" slot="prefix" style="line-height: 16px;margin-left: 10px;">
-              <img src="/static/images/loc.png" alt="Location">
-            </i>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="认证状态" width="400">
-          <el-select v-model="enterpriseInfo.validCode" placeholder="请选择认证状态">
-            <el-option label="未认证" :value="0"></el-option>
-            <el-option label="申诉中" :value="1"></el-option>
-            <el-option label="已认证" :value="2"></el-option>
-            <el-option label="未通过" :value="3"></el-option>
-          </el-select>
-          <span style="padding-left: 8px;">
+      </el-form-item>
+      <el-form-item label="营业执照号">
+        <el-input v-model="enterpriseInfo.businessCode"></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照附件">
+        <el-input v-model="enterpriseInfo.businessCodeImage">
+          <i class="el-input__icon" slot="prefix" style="line-height: 14px;margin-left: 10px;">
+            <img src="/static/images/pic.png" alt="Picture">
+          </i>
+          <i class="el-input__icon" slot="suffix" style="line-height: 12px;">
+            <img src="/static/images/look.png" alt="Look">
+          </i>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="企业地址">
+        <el-input v-model="enterpriseInfo.companyAddress" :readonly="true">
+          <i class="el-input__icon" slot="prefix" style="line-height: 16px;margin-left: 10px;">
+            <img src="/static/images/loc.png" alt="Location">
+          </i>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="认证状态" width="400">
+        <el-select v-model="enterpriseInfo.validCode" placeholder="请选择认证状态">
+          <el-option label="未认证" :value="0"></el-option>
+          <el-option label="申诉中" :value="1"></el-option>
+          <el-option label="已认证" :value="2"></el-option>
+          <el-option label="未通过" :value="3"></el-option>
+        </el-select>
+        <span style="padding-left: 8px;">
             <img src="/static/images/status/right.png" alt="Status" v-if="enterpriseInfo.validCode === 2">
             <img src="/static/images/status/wrong.png" alt="Status" v-if="enterpriseInfo.validCode !== 2">
           </span>
-        </el-form-item>
-        <el-form-item label="注册时间">
-          <!-- TODO 注册时间 -->
-          <div v-text="enterpriseInfo.registerDate">2017-06-11 12:51:44</div>
-        </el-form-item>
-        <el-form-item>
-          <div class="action-form-item">
-            <el-button type="primary" @click="onSubmit">保存修改</el-button>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
+      </el-form-item>
+      <el-form-item label="注册时间">
+        <!-- TODO 注册时间 -->
+        <div v-text="enterpriseInfo.registerDate">2017-06-11 12:51:44</div>
+      </el-form-item>
+      <el-form-item>
+        <div class="action-form-item">
+          <el-button type="primary" @click="onSubmit">保存修改</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
   import _ from 'lodash'
   import axios from '@/assets/js/axios'
-  import CommonMenu from './CommonMenu'
 
   export default {
     name: 'enterprise-basic-info',
-    components: {
-      CommonMenu
-    },
     data () {
       return {
         enterpriseInfo: {}

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="basic-enterprise-info" style="padding: 30px 0 0;width: 490px;">
+    <el-form ref="form" :model="enterpriseInfo" label-width="150px">
+      <el-form-item label="企业UU">
+        <div>{{ enterpriseInfo.spaceUU }}</div>
+      </el-form-item>
+      <el-form-item label="企业名称">
+        <el-input v-model="enterpriseInfo.spaceName"></el-input>
+      </el-form-item>
+      <el-form-item label="法定代表人">
+        <el-input v-model="enterpriseInfo.corporation">
+          <div slot="append" v-if="enterpriseInfo.corporation">
+            <img src="/static/images/status/right.png" alt="Status">
+          </div>
+          <div slot="append" v-if="!enterpriseInfo.corporation">
+            <img src="/static/images/status/wrong.png" alt="Status">
+          </div>
+        </el-input>
+
+      </el-form-item>
+      <el-form-item label="营业执照号">
+        <el-input v-model="enterpriseInfo.businessCode"></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照附件">
+        <el-input v-model="enterpriseInfo.businessCodeImage">
+          <i class="el-input__icon" slot="prefix" style="line-height: 14px;margin-left: 10px;">
+            <img src="/static/images/pic.png" alt="Picture">
+          </i>
+          <i class="el-input__icon" slot="suffix" style="line-height: 12px;">
+            <img src="/static/images/look.png" alt="Look">
+          </i>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="企业地址">
+        <el-input v-model="enterpriseInfo.companyAddress" :readonly="true">
+          <i class="el-input__icon" slot="prefix" style="line-height: 16px;margin-left: 10px;">
+            <img src="/static/images/loc.png" alt="Location">
+          </i>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="认证状态" width="400">
+        <el-select v-model="enterpriseInfo.validCode" placeholder="请选择认证状态">
+          <el-option label="未认证" :value="0"></el-option>
+          <el-option label="申诉中" :value="1"></el-option>
+          <el-option label="已认证" :value="2"></el-option>
+          <el-option label="未通过" :value="3"></el-option>
+        </el-select>
+        <span style="padding-left: 8px;">
+            <img src="/static/images/status/right.png" alt="Status" v-if="enterpriseInfo.validCode === 2">
+            <img src="/static/images/status/wrong.png" alt="Status" v-if="enterpriseInfo.validCode !== 2">
+          </span>
+      </el-form-item>
+      <el-form-item label="注册时间">
+        <!-- TODO 注册时间 -->
+        <div v-text="enterpriseInfo.registerDate">2017-06-11 12:51:44</div>
+      </el-form-item>
+      <el-form-item>
+        <div class="action-form-item">
+          <el-button type="primary" @click="onSubmit">保存修改</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash'
+  import axios from '@/assets/js/axios'
+
+  export default {
+    name: 'enterprise-basic-info',
+    data () {
+      return {
+        enterpriseInfo: {}
+      }
+    },
+    methods: {
+      onSubmit () {
+        const data = _.pick(this.enterpriseInfo,
+          [
+            'spaceUU',
+            'spaceName',
+            'corporation',
+            'businessCode',
+            'businessCodeImage',
+            'companyAddress',
+            'validCode'
+          ]
+        )
+
+        const success = () => {
+          this.isChange = false
+          this.$message.success('保存成功')
+          this.$route.go(-1)
+        }
+        const error = error => {
+          this.$message.error(error)
+        }
+
+        axios.put('/api/user/space//modifySpaceInfo', data).then(success).catch(error)
+      }
+    },
+    mounted () {
+      this.enterpriseInfo = Object.assign({}, this.enterpriseInfo, this.$route.params)
+    }
+  }
+</script>
+
+<style scoped>
+  .action-form-item {
+    margin-left: -128px;
+    margin-top: 70px;
+  }
+  .action-form-item .el-button {
+    border-radius: 0;
+    padding: 10px 20px;
+  }
+  .el-button {
+    width: 120px;
+    height: 34px;
+  }
+  .el-button--primary {
+    background-color: #4E8EFC;
+    border-color: #4E8EFC;
+  }
+  .el-button--primary.is-disabled {
+    background-color: #D2D2D2;
+    border-color: #D2D2D2;
+  }
+</style>
+
+<style>
+  .basic-enterprise-info .el-input__inner {
+    height: 34px;
+    width: 340px;
+    border-radius: 0;
+  }
+  .basic-enterprise-info .el-form-item {
+    margin-bottom: 12px;
+  }
+  .basic-enterprise-info .el-form-item__label {
+    margin: 0;
+    height: 34px;
+    padding-left: 26px;
+    text-align: left;
+    line-height: 34px;
+
+    color: #000000;
+    font-size: 14px;
+    font-weight: normal;
+    font-family: "SimHei", sans-serif;
+  }
+  .basic-enterprise-info .el-form-item__content {
+    height: 34px;
+    line-height: 34px;
+  }
+  .basic-enterprise-info div.el-form-item:nth-last-child(3) .el-form-item__content {
+    width: 400px;
+  }
+  .basic-enterprise-info .el-input-group__append {
+    background: none;
+    border: none;
+    padding-left: 12px;
+  }
+</style>

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

@@ -1,7 +1,13 @@
 import EnterpriseHome from './EnterpriseHome'
 import EnterpriseBasicInfo from './EnterpriseBasicInfo'
+import EnterpriseMembers from './EnterpriseMembers'
+import EnterpriseAdmin from './EnterpriseAdmin'
+import EnterpriseBaseAction from './EnterpriseBaseAction'
 
 export {
   EnterpriseHome,
-  EnterpriseBasicInfo
+  EnterpriseBasicInfo,
+  EnterpriseMembers,
+  EnterpriseAdmin,
+  EnterpriseBaseAction
 }

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

@@ -11,8 +11,8 @@ import SettingsHome from '@/components/settings/SettingsHome'
 import {BackHome} from '@/components/back'
 import AccountIndex from '@/components/accounts/AccountIndex'
 import {
-  EnterpriseBasicInfo,
-  EnterpriseHome
+  EnterpriseAdmin, EnterpriseBaseAction, EnterpriseBasicInfo,
+  EnterpriseHome, EnterpriseMembers
 } from '@/components/accounts/enterprises'
 import {UserBasicInfo, UserHome} from '@/components/accounts/users'
 import {AppealHome} from '@/components/accounts/appeals'
@@ -41,10 +41,8 @@ export default new Router({
           component: EnterpriseHome
         },
         {
-          // 企业基本信息
-          path: 'enterprise/basic',
-          name: 'EnterpriseBasicInfo',
-          component: EnterpriseBasicInfo,
+          path: 'enterprise',
+          component: EnterpriseBaseAction,
           beforeEnter: (to, from, next) => {
             const enterpriseInfo = to.params
             if (enterpriseInfo.spaceUU) {
@@ -52,27 +50,37 @@ export default new Router({
             } else {
               next({ name: 'EnterpriseHome' })
             }
-          }
-        },
-        {
-          // 企业成员管理
-          path: 'enterprise/members',
-          name: 'EnterpriseMembers'
-        },
-        {
-          // 企业管理员信息
-          path: 'enterprise/admin',
-          name: 'EnterpriseAdmin'
-        },
-        {
-          // 企业认证信息
-          path: 'enterprise/auth',
-          name: 'EnterpriseAuth'
-        },
-        {
-          // 企业应用管理
-          path: 'enterprise/apps',
-          name: 'EnterpriseApps'
+          },
+          children: [
+            {
+              // 企业基本信息
+              path: 'basic',
+              name: 'EnterpriseBasicInfo',
+              component: EnterpriseBasicInfo
+            },
+            {
+              // 企业成员管理
+              path: 'members',
+              name: 'EnterpriseMembers',
+              component: EnterpriseMembers
+            },
+            {
+              // 企业管理员信息
+              path: 'admin',
+              name: 'EnterpriseAdmin',
+              component: EnterpriseAdmin
+            },
+            {
+              // 企业认证信息
+              path: 'auth',
+              name: 'EnterpriseAuth'
+            },
+            {
+              // 企业应用管理
+              path: 'apps',
+              name: 'EnterpriseApps'
+            }
+          ]
         },
         {
           path: 'user',