结构介绍
public：放置一下公共文件
src：项目的主要结构放在这个里边
assets：公共的样式，图片文件
common：公共的js文件，外部引入js文件
components:项目要的主要页面组件
locales：语言包（可换位置：比如放到assets中）
vuex:项目状态集中管理
APP.vue:项目主页面
main.js:项目主函数
router.js:路由文件其余文件可根据项目需求增删
vuex使用
type.js：主要用来存放mutations方法中的常量
store.js:vuex的状态集中管理文件
modules:存放各个组件的状态树
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersist from 'vuex-persist';
import login from './modules/login';
import element from './modules/element';
import tree from './modules/tree';
import editChart from './modules/editChart';
import datasource from './modules/datasource';
import upload from './modules/upload';
import tabledrag from './modules/tabledrag';
import permission from './modules/permission';
import controlCenter from './modules/controlCenter';
import editScreen from './modules/editScreen';
import fullpage from './modules/fullpage';
import template from './modules/template';
import filter from './modules/filter';
import linkage from './modules/linkage';
import bigScreen from './modules/bigScreen';
import dataSync from './modules/dataSync';
import targetManage from './modules/targetManage';
import fastAnaysis from './modules/fastAnaysis';
import permissionNew from './modules/permissionNew';
import sqlModel from './modules/sqlModel';
Vue.use(Vuex);
const vuexLocal = new VuexPersist({
storage: window.sessionStorage,
modules: ['sqlModel']
});
const store = new Vuex.Store({
modules: {
login,
element,
tree,
editChart,
upload,
tabledrag,
template,
datasource,
permission,
controlCenter,
editScreen,
fullpage,
bigScreen,
dataSync,
filter,
linkage,
targetManage,
fastAnaysis,
permissionNew,
sqlModel
},
plugins: [vuexLocal.plugin]
// strict: process.env.NODE_ENV !== 'production'
});
export default store;
type.js
// login
export const SET_USER_INFO = 'SET_USER_INFO'; // 设置用户信息
export const SET_LOGIN_STATUS = 'SET_LOGIN_STATUS'; // 设置登录状态
export const SET_STORE = 'SET_STORE';
export const SETROLE_AND_FETCHPERMISSION = 'SETROLE_AND_FETCHPERMISSION';
// element
export const SET_MODAL = 'SET_MODAL';// 全局modal （动态component的nama）
export const SET_FILTER = 'SET_FILTER'; // 存入时间，用于模态框全屏用
export const SET_THEME = 'SET_THEME'; // 存入主题，用于全局
export const SET_BIG_SCREEN_THEME = 'SET_BIG_SCREEN_THEME'; // 大屏主题
export const SET_FULLPAGE_STORE = 'SET_FULLPAGE_STORE'; // 单图表组件控制全屏，并向全屏通用组件提供数据
export const SET_TREE_NODES = 'SET_TREE_NODES'; // 目录树
export const SET_DASHBOARD_FILES = 'SET_DASHBOARD_FILES';
export const SET_FIELD_NODES = 'SET_FIELD_NODES'; // 添加图表目录树
export const SET_TREE_MENU_TYPE = 'SET_TREE_MENU_TYPE'; // 添加目录树类型
export const SET_UPLOAD = 'SET_UPLOAD'; // 上传
export const SET_UPLOAD_IMG = 'SET_UPLOAD_IMG'; // 上传图片
export const SET_REFRESH = 'SET_REFRESH'; // 是否刷新
export const SET_TABLEDRAGCONFIG = 'SET_TABLEDRAGCONFIG';
export const SET_FILTERINFO = 'SET_FILTERINFO';
export const SET_FILTERARR = 'SET_FILTERARR';
// permission
export const UPDATE_PERMISSION_LIST = 'UPDATE_PERMISSION_LIST';
export const SET_ROLE_INFO = 'SET_ROLE_INFO';
export const FETCH_PERMISSION_LIST = 'FETCH_PERMISSION_LIST';
export const GET_SHOW_ELES = 'GET_SHOW_ELES';
export const GET_HEADER_PERMS = 'GET_HEADER_PERMS';
export const SET_HEADER_PERMS_INFO = 'SET_HEADER_PERMS_INFO';
export const FETCH_HEADER_PERMS_LIST = 'FETCH_HEADER_PERMS_LIST';
export const IS_TEMPLATE_PREMISSION = 'IS_TEMPLATE_PREMISSION'; // 是否有获取模板的权限
export const USER_TYPE_PERMISSIONLIST = 'USER_TYPE_PERMISSIONLIST'; // 根据用户类型的权限
export const SET_USER_TYPE_PERMISSIONLIST = 'SET_USER_TYPE_PERMISSIONLIST'; // 设置根据用户类型的权限
export const GET_USER_TYPE_PERMISSIONLIST = 'GET_USER_TYPE_PERMISSIONLIST'; // 获取根据用户类型的权限
// 数据源
export const SET_CUSTOMFILELIST = 'SET_CUSTOMFILELIST';
// 数据同步
export const SET_CLIENT = 'SET_CLIENT';
export const SET_TASKSET = 'SET_TASKSET';
modules/tree.js
import * as types from '../type';
let fieldNode = sessionStorage.getItem('fieldNodes');
let treeNodes = sessionStorage.getItem('treeNodes');
let dashboardFile = sessionStorage.getItem('treeNodes');
let menuType = sessionStorage.getItem('menuType');
let menuCode = sessionStorage.getItem('menuCode');
const state = {
// 目录树以及当前节点
treeNodes: treeNodes ? JSON.parse(treeNodes) : [],
fieldNodes: fieldNode ? JSON.parse(fieldNode) : [],
dashboardFiles: dashboardFile ? JSON.parse(dashboardFile) : [],
menuTypes: menuType || '',
menuCode: menuCode || ''
};
const getters = {
treeNodes: state => state.treeNodes,
fieldNodes: state => state.fieldNodes,
dashboardFiles: state => state.dashboardFiles,
menuTypes: state => state.menuTypes,
menuCode: state => state.menuCode
};
const actions = {
setTreeNodes ({commit}, data) {
sessionStorage.setItem('treeNodes', JSON.stringify(data));
commit(types.SET_TREE_NODES, data);
},
setDashboardFiles ({commit}, data) {
sessionStorage.setItem('dashboardFiles', JSON.stringify(data));
commit(types.SET_DASHBOARD_FILES, data);
},
setFieldNodes ({commit}, data) {
sessionStorage.setItem('fieldNodes', JSON.stringify(data));
commit(types.SET_FIELD_NODES, data);
},
setMenuTypes ({commit}, data) {
sessionStorage.setItem('menuType', data);
commit(types.SET_TREE_MENU_TYPE, data);
},
setMenuCode ({commit}, data) {
sessionStorage.setItem('menuCode', data);
commit('MENU_CODE', data);
}
};
const mutations = {
[types.SET_TREE_NODES] (state, res) {
state.treeNodes = res;
},
[types.SET_DASHBOARD_FILES] (state, res) {
state.dashboardFiles = res;
},
[types.SET_FIELD_NODES] (state, res) {
state.fieldNodes = res;
},
[types.SET_TREE_MENU_TYPE] (state, res) {
state.menuType = res;
},
MENU_CODE (state, res) {
state.menuCode = res;
}
};
export default {
state,
actions,
getters,
mutations
};
页面中使用
import {mapActions, mapGetters, mapMutations} from 'vuex';
import store from '@/vuex/store'; computed: {
...mapGetters({
treeNodes: 'treeNodes',
menuCode: 'menuCode'
}),
/**
* @description 文件夹是否可拖拽disable
*/
dirDragableDisable () {
return (
this.isDisable ||
!this.$_has_permission(
this.$PERMISSION_TAG_LIST.DASHBOARD_EDIT_LEFTDIRDRAG
)
);
},
/**
* @description 看板是否可拖拽disable
*/
dasbboardDragableDisable () {
return !this.$_has_permission(
this.$PERMISSION_TAG_LIST.DASHBOARD_EDIT_FILEDRAG
);
}
}, methods: {
...mapMutations({
setMenuData: 'controlCenter/setMenuData'
}),
...mapActions({
setTreeNodes: 'setTreeNodes',
setMenuCode: 'setMenuCode',
setDashboardFiles: 'setDashboardFiles'
}),
getMenuInfo (val) {
// 获取菜单树目录
if (val !== undefined && val !== '') {
store.state.tree.menuTypes = val; // 修改menutype类型
}
api
.getMenuInfo({menuType: this.menuTypes, requestType: 1})
.then((res) => {
// console.log(res[0].children);
if (res && res[0] && res[0].children && res[0].children.length > 0) {
let parent = res[0];
this.toShowFile(parent, 'children');
this.menuData = parent;
if (this.menuTypes === 1) {
this.setDashboardFiles(this.menuData.children);
}
/* if (this.menuData.id === '4') { // 管理中心的左树存起暂用,与treeNodes重复，注掉了
this.setMenuData(this.menuData);
} */
// 如果有id
if (this.$route.query.menuCode) {
this.getCurrentNode(this.$route.query.menuCode);
} else {
this.setFirstNode();
}
this.setTreeNodes(this.menuData.children);
} else {
this.menuData = {children: []};
this.setMenuCode();
this.setTreeNodes([]);
this.$router.push(this.$route.path);
}
this.$emit('initTreeComplete');
});
this.$emit('action');
},
}