Skip to content

X
x-training-new
提交 42cfd2dd authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

feat: 更新角色

上级 b12c8500
隐藏空白字符变更
内嵌 并排
正在显示 包含 183 行增加 和 168 行删除
src/api/base.js
浏览文件 @ 42cfd2dd
......@@ -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 0 → 100644
浏览文件 @ 42cfd2dd
<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
浏览文件 @ 42cfd2dd
<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 0 → 100644
浏览文件 @ 42cfd2dd
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
浏览文件 @ 42cfd2dd
......@@ -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
浏览文件 @ 42cfd2dd
......@@ -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
浏览文件 @ 42cfd2dd
......@@ -2,5 +2,17 @@ import httpRequest from '@/utils/axios'
/** 获取用户分析多选题 */
export function getQuestions() {
return httpRequest.get('/api/finance/api/v1/analysis-users/multiple-questions')
}
\ No newline at end of file
return httpRequest.get('/api/xtraining/api/v1/analysis-users/multiple-questions')
}
/** 获取用户列表 */
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
浏览文件 @ 42cfd2dd
......@@ -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
浏览文件 @ 42cfd2dd
......@@ -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>
\ No newline at end of file
</style>
src/modules/user-study/components/MultipleChoice.vue
浏览文件 @ 42cfd2dd
<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
浏览文件 @ 42cfd2dd
......@@ -45,4 +45,4 @@ li.active{
background:#fff;
border-top:4px solid #68B8A4;
}
</style>
\ No newline at end of file
</style>
src/modules/user-study/components/UserTable.vue
浏览文件 @ 42cfd2dd
......@@ -37,4 +37,4 @@ export default {
padding-top:7px;
text-align:right;
}
</style>
\ No newline at end of file
</style>
src/modules/user-study/views/Index.vue
浏览文件 @ 42cfd2dd
......@@ -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
浏览文件 @ 42cfd2dd
......@@ -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
浏览文件 @ 42cfd2dd
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', {})
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论