feat: 更新角色

src/api/base.js

@@ -32,3 +32,8 @@ export function uploadFile(data) {
 export function getSelectCase() {
   return httpRequest.get('/api/xtraining/api/v1/selected-case')
 }
+
+// 获取已选中的角色
+export function getSelectRole() {
+  return httpRequest.get('/api/xtraining/api/v1/role')
+}

src/components/base/AppMenu.vue

+<template>
+  <ul class="menu">
+    <template v-for="(item, index) in menuList">
+      {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path), disabled: item.disabled.includes(role)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
+    </template>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'AppMenu',
+  data() {
+    return {
+      menuList: [
+        { label: '首页', path: '/home', disabled: [] },
+        { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3]  },
+        { label: '用户研究', path: '/user-study', disabled: [0, 1, 3] },
+        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2] },
+        { label: '作品展示', path: '/works-show', disabled: [] }
+      ]
+    }
+  },
+  computed: {
+    path() {
+      return this.$route.path
+    },
+    role() {
+      return this.$store.state.role
+    }
+  },
+  methods: {
+    menuSelect(item) {
+      if (item.disabled.includes(this.role)) {
+        this.$message.error('您当前的角色禁止访问该页面')
+      } else {
+        this.$router.push(item.path)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.menu{
+  width: 780px;
+  height:56px;
+  background:#68B8A4;
+  border-radius:28px;
+  display:flex;
+  font-size:18px;
+  line-height:56px;
+  color:#fff;
+}
+.menu li{
+  padding:0 40px;
+  cursor: pointer;
+}
+.menu li.active{
+  font-weight: bold;
+}
+.menu li.disabled{
+  color:#c7d4d5;
+  cursor:not-allowed;
+}
+</style>
\ No newline at end of file

src/components/layout/Header.vue

 <template>
   <header class="app-header">
-    <ul class="menu">
-      <template v-for="(item, index) in menuList">
-        {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
-      </template>
-    </ul>
+    <app-menu />
   </header>
 </template>
 
 <script>
+import AppMenu from '../base/AppMenu.vue'
 export default {
   name: 'AppHeader',
-  data() {
-    return {
-      menuList: [
-        { label: '首页', path: '/home' },
-        { label: '产品分析', path: '/product-analysis' },
-        { label: '用户研究', path: '/user-study' },
-        { label: '营销工具使用', path: '/market-tools' },
-        { label: '作品展示', path: '/works-show' }
-      ]
-    }
-  },
-  computed: {
-    path() {
-      return this.$route.path
-    }
-  },
-  methods: {
-    menuSelect(item) {
-      this.$router.push(item.path)
-    }
-  }
+  components: {AppMenu}
 }
 </script>
 
@@ -40,21 +17,4 @@ export default {
   // width:1360px;
   padding:30px 33px 0;
 }
-.menu{
-  width: 780px;
-  height:56px;
-  background:#68B8A4;
-  border-radius:28px;
-  display:flex;
-  font-size:18px;
-  line-height:56px;
-  color:#fff;
-}
-.menu li{
-  padding:0 40px;
-  cursor: pointer;
-}
-.menu li.active{
-  font-weight: bold;
-}
 </style>

src/modules/home/api.js

+import httpRequest from '@/utils/axios'
+
+/** 选择角色 */
+export function selectRole(data) {
+  return httpRequest.post('/api/xtraining/api/v1/check-roles', data)
+}

src/modules/home/components/RoleSelect.vue

@@ -29,17 +29,30 @@ export default {
       default: false
     }
   },
+  computed: {
+    role() {
+      return this.$store.state.role
+    }
+  },
   data() {
     return {
       roleList: [
-        { label: '我是产品分析员', icon: role1, id: '1' },
-        { label: '我是用户分析员', icon: role2, id: '2' },
-        { label: '我是营销专员', icon: role3, id: '3' },
-        { label: '我是团队组长', icon: role4, id: '4' }
+        { label: '我是产品分析员', icon: role1, id: 1 },
+        { label: '我是用户分析员', icon: role2, id: 2 },
+        { label: '我是营销专员', icon: role3, id: 3 },
+        { label: '我是团队组长', icon: role4, id: 4 }
       ],
       roleSelected: ''
     }
   },
+  watch: {
+    role: {
+      handler(v) {
+        this.roleSelected = v
+      },
+      immediate: true
+    }
+  },
   methods: {
     handleSelect() {
       this.$emit('roleSelect', this.roleSelected)

src/modules/home/views/Index.vue

@@ -6,22 +6,20 @@
     <div class="inner">
       <div class="header">
         <div class="logo">金融</div>
-        <ul class="menu">
-          <template v-for="(item, index) in menuList">
-            {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
-          </template>
-        </ul>
+        <app-menu />
       </div>
     </div>
     <!-- <btn :attrs="{ title: '用户研究', left: '240px', top: '120px' }" @click.native="handleClick('/user-study')" /> -->
-    <role-select :visible="visible" @roleSelect="handleRoleSelect" />
+    <role-select :visible="visible" @roleSelect="fetchSelectRole" />
   </div>
 </template>
 
 <script>
+import AppMenu from '@/components/base/AppMenu.vue'
 import RoleSelect from '../components/RoleSelect.vue'
+import { selectRole } from '../api'
 export default {
-  components: { RoleSelect },
+  components: { AppMenu, RoleSelect },
   data() {
     return {
       visible: false,
@@ -31,24 +29,37 @@ export default {
         { label: '用户研究', path: '/user-study' },
         { label: '营销工具使用', path: '/market-tools' },
         { label: '作品展示', path: '/works-show' }
-      ]
+      ],
+      menuMap: {}
     }
   },
   computed: {
     path() {
       return this.$route.path
+    },
+    case() {
+      return this.$store.state.case
     }
   },
   methods: {
     handleClick(path) {
       this.$router.push(path)
     },
-    handleRoleSelect(val) {
-      console.log(val)
-      this.visible = false
-    },
     menuSelect(item) {
       this.$router.push(item.path)
+    },
+    fetchSelectRole(role) {
+      selectRole({ role }).then(res => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.$message.success('选择角色成功！')
+          this.$store.commit('setRole', role)
+          this.visible = false
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
     }
   }
 }

src/modules/user-study/api.js

@@ -2,5 +2,17 @@ import httpRequest from '@/utils/axios'
 
 /** 获取用户分析多选题 */
 export function getQuestions() {
-  return httpRequest.get('/api/finance/api/v1/analysis-users/multiple-questions')
-}
+  return httpRequest.get('/api/xtraining/api/v1/analysis-users/multiple-questions')
+}
\ No newline at end of file
+/** 获取用户列表 */
+export function getUserList(params) {
+  return httpRequest.get('/api/xtraining/api/v1/analysis-users', { params })
+}
+/** 获取当前选择题对应的图表数据 */
+export function getChart(params) {
+  return httpRequest.get('/api/xtraining/api/v1/analysis-users/chart', { params })
+}
+/** 提交用户分析报告 */
+export function submitReport(data) {
+  return httpRequest.post('/api/xtraining/api/v1/analysis-users/report', data)
+}

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

@@ -6,7 +6,7 @@
         <li v-for="(it, idx) in item.selection" :key="idx">{{it.label}}</li>
       </ul> -->
       <template v-if="!multiple">
-        <span>{{ item.selection[0] ? item.selection[0].label : ''}}</span>
+        <span>{{ item.selection[0] ? item.selection[0].subject : ''}}</span>
       </template>
       <template v-else>
         <el-tag v-show="item.selection.includes(it)" size="small" v-for="(it, idx) in item.options" :key="idx">{{it.label}}</el-tag>

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

@@ -3,6 +3,7 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import { getChart } from '../api'
 export default {
   props: {
     value: {
@@ -25,7 +26,7 @@ export default {
           bottom: 90
         },
         xAxis: {
-          data: ['≤19', '20-29', '30-39', '40-49', '≥50'],
+          data: [],
           axisLabel: {
             rotate: 45
           }
@@ -38,7 +39,7 @@ export default {
             axisLine: {
               show: true,
               lineStyle: {
-                  color: '#333'
+                color: '#333'
               }
             },
             axisLabel: {
@@ -67,8 +68,7 @@ export default {
     value: {
       handler(v) {
         if (v.id) {
-          console.log(v.options)
-          this.options.xAxis.data = v.options.map(item => item.label)
+          this.options.xAxis.data = v.options.map(item => item.subject)
           this.$nextTick(() => {
             this.echart.setOption(this.options)
           })
@@ -82,14 +82,16 @@ export default {
     this.echart = echarts.init(document.getElementById('myChart'))
   },
   methods: {
-    drawerEchartBar() {
-      myChart.setOption(this.options)
-    },
     fetchEchartsData() {
-      window.setTimeout(() => {
-        this.options.series[0].data = [13, 28, 46, 23, 20]
-        this.echart.setOption(this.options)
-      }, 1000)
+      const params = {
+        option: this.value.tag
+      }
+      getChart(params).then(res => {
+        if (res.code === 0 && res.data && Array.isArray(res.data.chart)) {
+          this.options.series[0].data = res.data.chart.map(item => parseFloat(item.percent))
+          this.echart.setOption(this.options)
+        }
+      })
     }
   }
 }
@@ -99,4 +101,4 @@ export default {
   width:100%;
   height:100%;
 }
-</style>
+</style>
\ No newline at end of file

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

 <template>
   <div class="multiple-choice">
-    <p class="title" v-if="choice.title">{{choice.index}}、{{choice.title}}</p>
+    <p class="title" v-if="choice.subject">{{choice.index}}、{{choice.subject}}</p>
     <ul class="options">
-      <li :class="{ active: selection.includes(item) }" v-for="item in choice.options" :key="item.value" @click="handleSelect(item)">{{item.label}}</li>
+      <li :class="{ active: selection.includes(item) }" v-for="item in choice.options" :key="item.value" @click="handleSelect(item)">{{item.subject}}</li>
     </ul>
     <div class="btn-bar">
       <div>

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

@@ -45,4 +45,4 @@ li.active{
   background:#fff;
   border-top:4px solid #68B8A4;
 }
-</style>
+</style>
\ No newline at end of file

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

@@ -37,4 +37,4 @@ export default {
   padding-top:7px;
   text-align:right;
 }
-</style>
+</style>
\ No newline at end of file

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

@@ -37,21 +37,24 @@
       </div>
       <div class="right">
         <tabs v-model="tabActive" :list="list" @tab-click="handleTabClick"></tabs>
-        <div class="echart-cont" v-if="tabActive === '1'">
+        <div class="echart-cont" v-show="tabActive === '1'">
           <echart-bar :value="current.choice"/>
         </div>
-        <user-table v-if="tabActive === '2'" />
+        <user-table v-show="tabActive === '2'" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+// 组件
 import MultipleChoice from '../components/MultipleChoice.vue'
 import Tabs from '../components/Tabs.vue'
 import AnswerList from '../components/AnswerList.vue'
 import UserTable from '../components/UserTable.vue'
 import EchartBar from '../components/EchartBar.vue'
+// api
+import { getQuestions } from '../api'
 export default {
   components: { MultipleChoice, Tabs, AnswerList, UserTable, EchartBar },
   data() {
@@ -69,87 +72,9 @@ export default {
           ],
           selection: [],
           index: 1
-        },
-        {
-          id: '222',
-          title: '是否交易过基金产品',
-          options: [
-            { label: '交易过基金产品', value: 1 },
-            { label: '没有交易过基金产品', value: 2 }
-          ],
-          selection: [],
-          index: 2
-        },
-        {
-          id: '333',
-          title: '理财经验',
-          options: [
-            { label: '没有理财经验', value: 1 },
-            { label: '1-3年理财经验', value: 2 },
-            { label: '3-5年理财经验', value: 3 },
-            { label: '5年以上理财经验', value: 4 }
-          ],
-          selection: [],
-          index: 3
-        },
-        {
-          id: '444',
-          title: '学历',
-          options: [
-            { label: '初中及以下', value: 1 },
-            { label: '高中及中专', value: 2 },
-            { label: '大专', value: 3 },
-            { label: '本科', value: 4 },
-            { label: '硕士', value: 5 },
-            { label: '博士及以上', value: 6 }
-          ],
-          selection: [],
-          index: 4
-        },
-        {
-          id: '555',
-          title: '年收入总额',
-          options: [
-            { label: '5万以下年收入', value: 1 },
-            { label: '5-15万年收入', value: 2 },
-            { label: '15-25万年收入', value: 3 },
-            { label: '25-50万年收入', value: 4 },
-            { label: '50-100万年收入', value: 5 },
-            { label: '100万以上年收入', value: 6 }
-          ],
-          selection: [],
-          index: 5
-        },
-        {
-          id: '666',
-          title: '可支配资产总额',
-          options: [
-            { label: '10万以下', value: 1 },
-            { label: '10-20万', value: 2 },
-            { label: '20-50万', value: 3 },
-            { label: '50-80万', value: 4 },
-            { label: '80-100万', value: 5 },
-            { label: '100-300万', value: 6 },
-            { label: '300万以上', value: 7 }
-          ],
-          selection: [],
-          index: 6
-        },
-        {
-          id: '777',
-          title: '金融资产中占比最高',
-          options: [
-            { label: '存款', value: 1 },
-            { label: '基金', value: 2 },
-            { label: '保险', value: 3 },
-            { label: '股票', value: 4 },
-            { label: '理财产品', value: 5 },
-            { label: '其他', value: 6 }
-          ],
-          selection: [],
-          index: 7
         }
       ],
+      selection: [],
       current: {
         index: 0,
         choice: {}
@@ -168,6 +93,7 @@ export default {
       this.current.index = 0
       this.current.choice = this.questions[0]
     }, 1000)
+    this.fetchQuestions()
   },
   methods: {
     handlePrev() {
@@ -194,7 +120,19 @@ export default {
       this.status = 1
     },
     handleFinish() {},
-    handleSubmit() {}
+    handleSubmit() {},
+    fetchQuestions() {
+      getQuestions().then(res => {
+        if (res.code === 0 && res.data && Array.isArray(res.data.items)) {
+          const list = res.data.items
+          list.forEach((item, index) => {
+            item.selection = []
+            item.index = index + 1
+          })
+          this.questions = list
+        }
+      })
+    }
   }
 }
 </script>

src/router/index.js

@@ -5,7 +5,7 @@ Vue.use(VueRouter)
 
 const routes = [
   { path: '*', redirect: '/home' },
-  { path: '/', redirect: '/home' },
+  { path: '/', redirect: '/home' }
 ]
 
 const router = new VueRouter({

src/store/index.js

 import Vue from 'vue'
-import Vuex from 'vuex'
-import { getUser, logout, getSelectCase } from '@/api/base'
+import Vuex, { Store } from 'vuex'
+import { getUser, logout, getSelectCase, getSelectRole } from '@/api/base'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
     user: {},
-    case: {}
+    case: {},
+    role: 0
   },
   mutations: {
     setUser(state, user) {
@@ -15,6 +16,9 @@ export default new Vuex.Store({
     },
     setCase(state, data) {
       state.case = data
+    },
+    setRole(state, data) {
+      state.role = data
     }
   },
   actions: {
@@ -40,6 +44,10 @@ export default new Vuex.Store({
             getSelectCase().then(response => {
               commit('setCase', response.data.case)
             })
+            // 获取用户选中的角色
+            getSelectRole().then(res => {
+              commit('setRole', res.data.role)
+            })
             return true
           } else {
             commit('setUser', {})