refactor: 重构vuex
This commit is contained in:
parent
f1bcddd0ce
commit
4b7933a85d
|
@ -5,26 +5,26 @@
|
|||
<el-col :span="14">
|
||||
<el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
|
||||
|
||||
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/home'">
|
||||
<el-menu-item v-show="isNewVersion" :index="'/api/home'">
|
||||
{{ $t("i18n.home") }}
|
||||
</el-menu-item>
|
||||
<el-menu-item v-show="$store.state.switch.value=='old'" :index="'/api/home_obsolete'">
|
||||
<el-menu-item v-show="isOldVersion" :index="'/api/home_obsolete'">
|
||||
{{ $t("i18n.home") }}
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/definition'">
|
||||
<el-menu-item v-show="isNewVersion" :index="'/api/definition'">
|
||||
{{ $t("i18n.definition") }}
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation'">
|
||||
<el-menu-item v-show="isNewVersion" :index="'/api/automation'">
|
||||
{{ $t("i18n.automation") }}
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation/report'">
|
||||
<el-menu-item v-show="isNewVersion" :index="'/api/automation/report'">
|
||||
{{ $t("i18n.report") }}
|
||||
</el-menu-item>
|
||||
|
||||
<el-submenu v-show="$store.state.switch.value=='old'"
|
||||
<el-submenu v-show="isOldVersion"
|
||||
v-permission="['test_manager','test_user','test_viewer']" index="4">
|
||||
<template v-slot:title>{{ $t('commons.test') }}</template>
|
||||
<ms-recent-list ref="testRecent" :options="testRecent"/>
|
||||
|
@ -35,7 +35,7 @@
|
|||
:title="$t('load_test.create')"/>
|
||||
</el-submenu>
|
||||
|
||||
<el-submenu v-show="$store.state.switch.value=='old'"
|
||||
<el-submenu v-show="isOldVersion"
|
||||
v-permission="['test_manager','test_user','test_viewer']" index="5">
|
||||
<template v-slot:title>{{ $t('commons.report') }}</template>
|
||||
<ms-recent-list ref="reportRecent" :options="reportRecent"/>
|
||||
|
@ -44,7 +44,7 @@
|
|||
</el-submenu>
|
||||
|
||||
|
||||
<el-menu-item v-show="$store.state.switch.value=='old'"
|
||||
<el-menu-item v-show="isOldVersion"
|
||||
v-permission="['test_manager','test_user','test_viewer']" :index="'/api/monitor/view'">
|
||||
{{ $t('commons.monitor') }}
|
||||
</el-menu-item>
|
||||
|
@ -64,6 +64,7 @@ import MsCreateTest from "../../common/head/CreateTest";
|
|||
import {ApiEvent, LIST_CHANGE} from "@/business/components/common/head/ListEvent";
|
||||
import SearchList from "@/business/components/common/head/SearchList";
|
||||
import ProjectChange from "@/business/components/common/head/ProjectSwitch";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "MsApiHeaderMenus",
|
||||
|
@ -94,6 +95,12 @@ export default {
|
|||
currentProject: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isNewVersion',
|
||||
'isOldVersion',
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
registerEvents() {
|
||||
ApiEvent.$on(LIST_CHANGE, () => {
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
|
||||
<script>
|
||||
import {LicenseKey} from '@/common/js/constants';
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
const requireContext = require.context('@/business/components/xpack/', true, /router\.js$/)
|
||||
const report = requireContext.keys().map(key => requireContext(key).report);
|
||||
|
@ -62,15 +63,21 @@
|
|||
this.isReport = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isNewVersion',
|
||||
'isOldVersion',
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
handleSelect(index) {
|
||||
this.activeIndex = index
|
||||
},
|
||||
active() {
|
||||
if (this.activeIndex === '/api') {
|
||||
if (this.$store.state.switch.value == 'new') {
|
||||
if (this.isNewVersion) {
|
||||
window.location.href = "/#/api/home";
|
||||
} else if (this.$store.state.switch.value == 'old') {
|
||||
} else if (this.isOldVersion) {
|
||||
window.location.href = "/#/api/home_obsolete";
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,10 +9,10 @@
|
|||
<el-dropdown-item command="about">{{ $t('commons.about_us') }} <i class="el-icon-info"/></el-dropdown-item>
|
||||
<el-dropdown-item command="help">{{ $t('commons.help_documentation') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="ApiHelp">{{ $t('commons.api_help_documentation') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="old" v-show=isReadOnly @click.native="changeBar('old')">
|
||||
<el-dropdown-item command="old" v-show=isNewVersion @click.native="changeBar('old')">
|
||||
{{ $t('commons.cut_back_old_version') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="new" v-show=!isReadOnly @click.native="changeBar('new')">
|
||||
<el-dropdown-item command="new" v-show=isOldVersion @click.native="changeBar('new')">
|
||||
{{ $t('commons.cut_back_new_version') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">{{ $t('commons.exit_system') }}</el-dropdown-item>
|
||||
|
@ -27,6 +27,7 @@
|
|||
import {getCurrentUser} from "@/common/js/utils";
|
||||
import AboutUs from "./AboutUs";
|
||||
import axios from "axios";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
|
||||
const auth = requireComponent.keys().length > 0 ? requireComponent("./auth/Auth.vue") : {};
|
||||
|
@ -36,13 +37,16 @@ export default {
|
|||
components: {AboutUs},
|
||||
data() {
|
||||
return {
|
||||
isReadOnly: this.$store.state.isReadOnly.flag
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentUser: () => {
|
||||
return getCurrentUser();
|
||||
}
|
||||
},
|
||||
...mapGetters([
|
||||
'isNewVersion',
|
||||
'isOldVersion',
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
logout: function () {
|
||||
|
@ -79,9 +83,7 @@ export default {
|
|||
}
|
||||
},
|
||||
changeBar(item) {
|
||||
this.isReadOnly = !this.isReadOnly
|
||||
this.$store.commit('setFlag', this.isReadOnly);
|
||||
this.$store.commit('setValue', item);
|
||||
this.$store.commit('setVersionSwitch', item);
|
||||
if (item == "old") {
|
||||
window.location.href = "/#/api/home_obsolete";
|
||||
} else {
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
<script>
|
||||
import {getCurrentProjectID, getCurrentUser, hasRoles} from "@/common/js/utils";
|
||||
import {PROJECT_ID, ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "@/common/js/constants";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "SearchList",
|
||||
|
@ -39,6 +40,10 @@ export default {
|
|||
this.init();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isNewVersion',
|
||||
'isOldVersion',
|
||||
]),
|
||||
currentProjectId() {
|
||||
return localStorage.getItem(PROJECT_ID)
|
||||
}
|
||||
|
@ -106,9 +111,9 @@ export default {
|
|||
localStorage.setItem(PROJECT_ID, projectId);
|
||||
let path = this.$route.matched[0].path ? this.$route.matched[0].path : '/';
|
||||
if (path === '/api') {
|
||||
if (this.$store.state.switch.value === 'new') {
|
||||
if (this.isNewVersion) {
|
||||
path = "/api/home";
|
||||
} else if (this.$store.state.switch.value === 'old') {
|
||||
} else if (this.isOldVersion) {
|
||||
path = "/api/home_obsolete";
|
||||
} else {
|
||||
path = '/';
|
||||
|
|
|
@ -123,7 +123,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
importAPITest() {
|
||||
let apiTest = this.$store.state.api.test;
|
||||
let apiTest = this.$store.state.test;
|
||||
if (apiTest && apiTest.name) {
|
||||
this.$set(this.test, "name", apiTest.name);
|
||||
let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});
|
||||
|
|
|
@ -169,7 +169,7 @@ export default {
|
|||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER
|
||||
color: this.$store.state.theme ? this.$store.state.theme : COUNT_NUMBER
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -179,7 +179,7 @@ export default {
|
|||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER_SHALLOW
|
||||
color: this.$store.state.theme ? this.$store.state.theme : COUNT_NUMBER_SHALLOW
|
||||
}
|
||||
}
|
||||
}]
|
||||
|
|
|
@ -10,7 +10,7 @@ import router from "./components/common/router/router";
|
|||
import YanProgress from 'yan-progress';
|
||||
import './permission' // permission control
|
||||
import i18n from "../i18n/i18n";
|
||||
import store from "./store";
|
||||
import store from "../store";
|
||||
import {permission, roles, tester, xpack} from './permission'
|
||||
import chart from "../common/js/chart";
|
||||
import CalendarHeatmap from "../common/js/calendar-heatmap";
|
||||
|
|
|
@ -1,72 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const Common = {
|
||||
state: {
|
||||
projectId: ""
|
||||
},
|
||||
mutations: {
|
||||
setProjectId(state, projectId) {
|
||||
state.projectId = projectId;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const API = {
|
||||
state: {
|
||||
test: {}
|
||||
},
|
||||
mutations: {
|
||||
setTest(state, test) {
|
||||
state.test = test;
|
||||
},
|
||||
clearTest(state) {
|
||||
state.test = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const Switch = {
|
||||
state: {
|
||||
value: "new"
|
||||
},
|
||||
mutations: {
|
||||
setValue(state, value) {
|
||||
state.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const IsReadOnly = {
|
||||
state: {
|
||||
flag: true
|
||||
},
|
||||
mutations: {
|
||||
setFlag(state, value) {
|
||||
state.flag = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const Theme = {
|
||||
state: {
|
||||
theme: undefined
|
||||
},
|
||||
mutations: {
|
||||
setTheme(state, value) {
|
||||
state.theme = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
api: API,
|
||||
common: Common,
|
||||
switch: Switch,
|
||||
isReadOnly: IsReadOnly,
|
||||
theme: Theme
|
||||
}
|
||||
})
|
|
@ -0,0 +1,6 @@
|
|||
const actions = {
|
||||
// changeCount: ({
|
||||
// commit
|
||||
// }) => commit('changeCount'),
|
||||
}
|
||||
export default actions;
|
|
@ -0,0 +1,6 @@
|
|||
const getters = {
|
||||
isNewVersion: state => state.versionSwitch === 'new',
|
||||
isOldVersion: state => state.versionSwitch === 'old'
|
||||
}
|
||||
|
||||
export default getters
|
|
@ -0,0 +1,25 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import getters from './getters'
|
||||
import actions from './actions'
|
||||
import mutations from './mutations'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const state = {
|
||||
projectId: "",
|
||||
test: {},
|
||||
versionSwitch: "new",
|
||||
isReadOnly: true,
|
||||
theme: undefined
|
||||
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
})
|
||||
|
||||
export default store
|
|
@ -0,0 +1,9 @@
|
|||
const mutations = {
|
||||
setProjectId: (state, projectId) => state.projectId = projectId,
|
||||
setTest: (state, test) => state.test = test,
|
||||
clearTest: state => state.test = {},
|
||||
setVersionSwitch: (state, value) => state.versionSwitch = value,
|
||||
setTheme: (state, value) => state.theme = value
|
||||
}
|
||||
|
||||
export default mutations;
|
Loading…
Reference in New Issue