Merge branch 'master' of https://gitlab.ezijing.com/webapp/x-training-new

src/api/base.js

@@ -37,3 +37,8 @@ export function getSelectCase() {
 export function getSelectRole() {
   return httpRequest.get('/api/xtraining/api/v1/role')
 }
+
+/** 获取作品完成状态 */
+export function getWorkStatus() {
+  return httpRequest.get('/api/xtraining/api/v1/show/analysis-status')
+}

src/components/base/AppMenu.vue

@@ -9,6 +9,7 @@
   </div>
 </template>
 <script>
+import { getWorkStatus } from '@/api/base.js'
 export default {
   name: 'AppMenu',
   data() {
@@ -16,9 +17,9 @@ export default {
       menuList: [
         { label: '首页', path: '/home', disabled: [] },
         { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3] },
-        { label: '用户研究', path: '/user-study', disabled: [0, 1, 3] },
+        { label: '用户分析', path: '/user-study', disabled: [0, 1, 3] },
         { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2] },
-        { label: '作品展示', path: '/works-show', disabled: [] }
+        { label: '作品展示', path: '/works-show', disabled: [0] }
       ]
     }
   },
@@ -31,11 +32,23 @@ export default {
     }
   },
   methods: {
-    menuSelect(item) {
-      if (item.disabled.includes(this.role)) {
+    async menuSelect(item) {
+      if (this.role === 0) {
+        this.$message.error('请选择角色')
+      } else if (item.disabled.includes(this.role)) {
         this.$message.error('您当前的角色禁止访问该页面')
       } else {
+        if (['/user-study', '/market-tools'].includes(item.path)) {
+          const flag = await this.fetchWorkStatus()
+          console.log(flag)
+          if (flag) {
             this.$router.push(item.path)
+          } else {
+            this.$message.error('请先完成产品分析报告，再进行' + item.label)
+          }
+        } else {
+          this.$router.push(item.path)
+        }
       }
     },
     selectProducts() {
@@ -46,17 +59,17 @@ export default {
       }).then(() => {
         this.$router.push({ path: '/product-analysis' })
       })
-      // if (this.$route.path === '/product-analysis/report') {
-      //   this.$confirm('切换案例，当前填写的内容不会保存', '提示', {
-      //     confirmButtonText: '确定',
-      //     cancelButtonText: '取消',
-      //     type: 'warning'
-      //   }).then(() => {
-      //     this.$router.push({ path: '/product-analysis' })
-      //   })
-      // } else {
-      //   this.$router.push({ path: '/product-analysis' })
-      // }
+    },
+    fetchWorkStatus() {
+      return new Promise((resolve) => {
+        getWorkStatus().then(res => {
+          if (res.code === 0 && res.data && res.data.case_status) {
+            resolve(true)
+          } else {
+            resolve(false)
+          }
+        }).catch(() => resolve(false))
+      })
     }
   }
 }

src/components/layout/Header.vue

@@ -8,7 +8,7 @@
 import AppMenu from '../base/AppMenu.vue'
 export default {
   name: 'AppHeader',
-  components: {AppMenu}
+  components: { AppMenu }
 }
 </script>
 

src/modules/home/views/Index.vue

 <template>
   <div class="home">
     <div class="top">
+      <el-button style="margin-left:10px;" type="primary" size="medium" plain round @click="handleLogout">退出系统</el-button>
       <el-button type="primary" size="medium" plain round @click="visible = true">切换角色</el-button>
     </div>
     <div class="inner">
@@ -8,8 +9,6 @@
         <div class="logo">金融</div>
         <app-menu />
       </div>
-      <el-button type="primary" disabled>1111</el-button>
-      <!-- <btn :attrs="{ title: '用户分析', left: '360px', top: '134px' }" @click.native="handleClick('/user-study')" disabled/> -->
       <btn v-for="(item, index) in btnList" :key="index" :attrs="{ title: item.label, left: item.left, top: item.top }" @click.native="handleClick(item)" :disabled="item.disabled.includes(role)"/>
     </div>
     <role-select :visible="visible" @roleSelect="fetchSelectRole" />
@@ -29,8 +28,8 @@ export default {
       btnList: [
         { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3], left: '960px', top: '134px' },
         { label: '用户分析', path: '/user-study', disabled: [0, 1, 3], left: '340px', top: '134px' },
-        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2], left: '650px', top: '344px' },
-        { label: '作品展示', path: '/works-show', disabled: [], left: '320px', top: '344px' }
+        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2], left: '652px', top: '343px' },
+        { label: '作品展示', path: '/works-show', disabled: [0], left: '320px', top: '343px' }
       ],
       menuMap: {}
     }
@@ -60,6 +59,11 @@ export default {
     menuSelect(item) {
       this.$router.push(item.path)
     },
+    handleLogout() {
+      this.$store.dispatch('logout').then(() => {
+        window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
+      })
+    },
     fetchSelectRole(role) {
       selectRole({ role }).then(res => {
         if (res.code === 0 && res.data && res.data.status) {
@@ -80,10 +84,10 @@ export default {
 <style scoped>
 .top{
   height:80px;
+  padding:20px 50px 0 0;
 }
 .top .el-button{
   float:right;
-  margin:20px 50px 0 0;
 }
 .inner{
   background:url('@/assets/images/home.png') no-repeat left center;

src/modules/user-study/components/EchartBar.vue

@@ -17,7 +17,12 @@ export default {
     return {
       options: {
         title: { text: '年龄分布' },
-        tooltip: {},
+        tooltip: {
+          trigger: 'item',
+          formatter: function(data) {
+            return data.name + '<br/>' + data.seriesName + '：' + data.value + '%' // 将小数转化为百分数显示
+          }
+        },
         // legend: {
         //   data: ['基金', '全网分布', '平均温度']
         // },

src/modules/user-study/components/UserTable.vue

 <template>
   <div class="user-table">
     <el-table :data="tableData" stripe size="medium" height="calc(100% - 26px)" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
-      <el-table-column prop="name" label="客户姓名" min-width="120" />
-      <el-table-column prop="id" label="客户编号" min-width="120" />
-      <el-table-column prop="age" label="年龄" min-width="100" />
-      <el-table-column prop="sex" label="性别" min-width="100" >
+      <el-table-column prop="name" label="客户姓名" min-width="100" />
+      <el-table-column prop="no" label="客户编号" min-width="150" />
+      <el-table-column prop="age" label="年龄" min-width="80" />
+      <el-table-column prop="sex" label="性别" min-width="80" >
         <template slot-scope="scope">{{scope.row.sex === 1 ? '男' : '女'}}</template>
       </el-table-column>
       <el-table-column prop="property" label="可支配资产" min-width="120" >
-        <template slot-scope="scope">{{scope.row.disposable_assets}}万</template>
+        <template slot-scope="scope">{{scope.row.disposable_assets | propertyFilter}}</template>
       </el-table-column>
-      <el-table-column label="理财经验" min-width="120" >
-        <template slot-scope="scope">{{scope.row.financial_experience}}年</template>
+      <el-table-column label="理财经验" min-width="80" >
+        <template slot-scope="scope">{{scope.row.financial_experience | experienceFilter}}</template>
       </el-table-column>
     </el-table>
     <div class="pagination">
@@ -21,6 +21,21 @@
 </template>
 <script>
 import { getUserList } from '../api'
+const propertyMap = {
+  1: '10万以下',
+  2: '10万-20万',
+  3: '20-50万',
+  4: '50-80万',
+  5: '80-100万',
+  6: '100万-300万',
+  7: '300万以上'
+}
+const experienceMap = {
+  1: '没有经验',
+  2: '1-3年',
+  3: '3-5年',
+  4: '5年以上'
+}
 export default {
   props: {
     params: {
@@ -38,6 +53,14 @@ export default {
       limit: 10
     }
   },
+  filters: {
+    propertyFilter(val) {
+      return propertyMap[val]
+    },
+    experienceFilter(val) {
+      return experienceMap[val]
+    }
+  },
   watch: {
     params: {
       handler(v) {
@@ -65,6 +88,9 @@ export default {
   box-sizing:border-box;
   height:484px;
 }
+.user-table ::v-deep.el-table .el-table__cell.gutter{
+  background:#ededed;
+}
 .pagination{
   padding-top:7px;
   text-align:right;

src/modules/user-study/views/Index.vue

@@ -98,6 +98,10 @@ export default {
     }
   },
   created() {
+    if (![2, 4].includes(this.$store.state.role)) {
+      this.$router.push('/home')
+      return
+    }
     this.init()
     this.status = this.$route.query.type || '0'
   },
@@ -117,13 +121,13 @@ export default {
         }
         this.initQuestions(questions, selection)
         this.handleChoiceSelect()
-      }).catch(err => {
+      }).catch(() => {
         if (!(this.$store.state.case && this.$store.state.case.id)) {
           this.$alert('请先选择完成产品分析案例选择，再进行用户分析', {
             confirmButtonText: '回到首页',
             showClose: false,
             callback: action => {
-              this.$route.push('/home')
+              this.$router.push('/home')
             }
           })
         }

src/modules/works-show/api.js

-import httpRequest from '@/utils/axios'
-
-/** 获取作品完成状态 */
-export function getWorkStatus() {
-  return httpRequest.get('/api/xtraining/api/v1/show/analysis-status')
-}
\ No newline at end of file

src/modules/works-show/views/Index.vue

@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import { getWorkStatus } from '../api'
+import { getWorkStatus } from '@/api/base'
 export default {
   data() {
     return {
-      case_status: true,
-      marketing_status: true,
-      user_analysis_status: true,
+      case_status: false,
+      marketing_status: false,
+      user_analysis_status: false,
       navMap: {
         1: '/product-analysis/report',
         2: '/product-analysis/result',
@@ -65,6 +65,8 @@ export default {
           this.marketing_status = res.data.marketing_status
           this.user_analysis_status = res.data.user_analysis_status
         }
+      }).catch(err => {
+        console.log(err)
       })
     }
   }

src/router/index.js

 import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Router from 'vue-router'
 
-Vue.use(VueRouter)
+Vue.use(Router)
+
+const originalPush = Router.prototype.push
+const originalReplace = Router.prototype.replace
+// push
+Router.prototype.push = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+// replace
+Router.prototype.replace = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
+  return originalReplace.call(this, location).catch(err => err)
+}
 
 const routes = [
   { path: '*', redirect: '/home' },
   { path: '/', redirect: '/home' }
 ]
 
-const router = new VueRouter({
+const router = new Router({
   mode: 'history',
   routes
 })

src/store/index.js

 import Vue from 'vue'
-import Vuex, { Store } from 'vuex'
+import Vuex from 'vuex'
 import { getUser, logout, getSelectCase, getSelectRole } from '@/api/base'
 
 Vue.use(Vuex)
@@ -8,7 +8,7 @@ export default new Vuex.Store({
   state: {
     user: {},
     case: {},
-    role: 0
+    role: null
   },
   mutations: {
     setUser(state, user) {
@@ -45,9 +45,9 @@ export default new Vuex.Store({
               commit('setCase', response.data.case)
             })
             // 获取用户选中的角色
-            getSelectRole().then(res => {
-              commit('setRole', res.data.role)
-            })
+            // getSelectRole().then(res => {
+            //   commit('setRole', res.data.role)
+            // })
             return true
           } else {
             commit('setUser', {})
@@ -59,6 +59,23 @@ export default new Vuex.Store({
           return false
         })
       return isLogin
+    },
+    async checkRole({ commit }) {
+      const hasRole = await getSelectRole()
+        .then(res => {
+          if (res.code === 0) {
+            commit('setRole', res.data.role)
+            return true
+          } else {
+            commit('setRole', null)
+            return false
+          }
+        })
+        .catch(() => {
+          commit('setRole', null)
+          return false
+        })
+      return hasRole
     }
   }
 })

src/utils/beforeEnter.js

 import store from '@/store'
+import router from '@/router'
 
 const UA = navigator.userAgent
 const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
@@ -29,6 +30,11 @@ export default async function (to, from, next) {
   if (!isLogin) {
     window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
     return
+  } else {
+    const hasRole = typeof store.state.role === 'number' || (await store.dispatch('checkRole'))
+    if (hasRole && store.state.role === 0 && to.path !== '/home') {
+      router.push('/home')
+    }
   }
 
   next()