业务线选择页面

src/layout/components/Navbar.vue

@@ -139,22 +139,8 @@ export default {
         this.get_bizArr()
       }
     },
-    changeBizId(type) { // 下拉列表的点击事件x
+    changeBizId(type) { // 更改业务线
       this.$router.push({ name: '业务线选择' })
-      // this.sumType = type.name
-      // this.$store.dispatch('data/setBizId', type.code)
-      // this.settingUserSetBiz(type.code)
-      // const name = this.$route.name
-      // const isDetailPage = needIdList.find(item => item === name)
-      // if (isDetailPage) {
-      //   this.$router.push({ name: name.substr(0, 2), query: { bizId: EncryptId(type.code) }})
-      // } else {
-      //   this.$router.push({
-      //     path: this.$route.path,
-      //     query: { ...this.$route.query, bizId: EncryptId(type.code) }
-      //   })// 更新路由连接
-      //   this.$nextTick(() => { this.$router.go(0) }) // 重载页面
-      // }
     },
     async settingUserSetBiz(bizId) { // 设置成员登录业务线
       await settingUserSetBiz({ bizId: bizId })

src/views/business/bizIdSelect.vue

@@ -1,27 +1,40 @@
 <template>
   <section class="business-contain">
     <div class="bizId-select">
-      <div class="user-name">{{ username }}，欢迎您！</div>
-      <div class="user-tips">请选择您的业务线</div>
+      <div class="bizId-user">
+        <div class="user-name">{{ username }}，欢迎您！</div>
+        <div class="user-tips">请选择您的业务线</div>
+      </div>
       <div class="bizId-table">
-        <div class="table-item">
-          <span class="item-name" />
-          <span class="item-button" />
-        </div>
+        <div v-for="item in bizSelectList" :key="item.code" class="table-item">
+          <span class="item-name">{{ item.name }}</span>
+          <span class="item-button" /><el-button type="primary" size="small" @click="enter(item)">进入</el-button></div>
       </div>
     </div>
+    <div class="select-pagination">
+      <el-pagination
+        :current-page.sync="curIndex"
+        :page-size="5"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
   </section>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import { needIdList } from '@/router/needIdList'
-import { EncryptId, desDecryptId } from '@/utils/crypto-js.js'
+import { EncryptId } from '@/utils/crypto-js.js'
 import { settingGetBizList } from '@/api/projectIndex'
 let fromRoute = null
 export default {
   data() {
     return {
-      bizSelectList: [] // 业务线选择列表
+      originBizList: [], // 原始业务线列表
+      bizSelectList: [], // 业务线选择列表
+      total: 0,
+      curIndex: 1
     }
   },
   computed: {
@@ -33,31 +46,92 @@ export default {
     }
   },
   beforeRouteEnter(to, from, next) {
-    fromRoute = from.path
+    fromRoute = from
     next()
   },
   created() {
-    console.log('上一个路由地址', fromRoute)
     this.settingGetBizList()
   },
   methods: {
     async settingGetBizList() {
       const res = await settingGetBizList({})
-      if (res.code === 200) this.bizSelectList = res.data || []
+      if (res.code === 200) {
+        this.originBizList = res.data || []
+        this.total = res.data.length
+        this.bizSelectList = this.originBizList.slice((this.curIndex - 1) * 5, this.curIndex * 5)
+      }
+    },
+    handleCurrentChange() {
+      this.bizSelectList = this.originBizList.slice((this.curIndex - 1) * 5, this.curIndex * 5)
+    },
+    enter(biz) {
+      this.$store.dispatch('data/setBizId', biz.code)
+      if (!fromRoute || !fromRoute.name) {
+        this.$router.push({ name: '项目', query: { bizId: EncryptId(biz.code) }})
+        return
+      }
+      const name = fromRoute.name
+      const isDetailPage = needIdList.find(item => item === name)
+      if (isDetailPage) {
+        this.$router.push({ name: name.substr(0, 2), query: { bizId: EncryptId(biz.code) }})
+      } else {
+        this.$router.push({
+          path: fromRoute.path,
+          query: { ...this.$route.query, bizId: EncryptId(biz.code) }
+        })// 更新路由连接
+      }
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.bizId-select{
+.business-contain {
   height: 100vh;
   width: 100%;
+  padding: 48px 44px;
   background-color:#F2F3F6;
 }
+.bizId-select{
+  height: 600px;
+  width: 100%;
+  background-color:#FFFFFF;
+  border-radius: 10px;
+  box-shadow: 0px 30px 16px #EEF0F5;
+}
+.bizId-user {
+  height: 105px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 2px solid #F2F3F6;
+}
 .user-name {
-
+  color: #333333;
+  font-size: 24px;
 }
 .user-tips {
-
+  color: #999999;
+  font-size: 14px;
+}
+.bizId-table {
+  padding: 71px 106px 0 116px;
+}
+.table-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 41px;
+  .item-name {
+    color: #333B4A;
+    font-size: 18px;
+  }
+  .item-button {
+    font-size: 14px;
+  }
+}
+.select-pagination {
+  display: flex;
+  justify-content: flex-end;
 }
 </style>