结构介绍public：放置公共文件src：这里放置项目主体结构assets：公共样式，图片文件common：公共js文件，外部导入的js文件components：项目需要的主页面组件locales：语言包（你可以改变位置：比如放在assets中）vuex：集中管理项目状态APP.vue：项目主页面main.js：项目主要功能router.js：路由文件其他文件可根据需要增删项目要求。用于存储mutations方法中的常量store.js:vuex状态集中管理文件modules:存储各个组件的状态树store.jsimportVuefrom'vue';importVuexfrom'vuex';importVuexPersistfrom'vuex-persist';从'./modules/login'导入登录名；从'./modules/element'导入元素；从'./modules/tree'导入树；从'./modules/editChart'导入editChart；从'./modules/editChart'导入数据源。/modules/datasource'；从'./modules/upload'导入上传；从'./modules/tabledrag'导入tabledrag；从'./modules/permission'导入权限；从'./modules/controlCenter'导入controlCenter；从'./modules/editScreen'导入editScreen；从'./modules/fullpage'导入全页；从'./modules/template'导入模板；从'./modules/filter'导入过滤器；从'./导入链接模块/链接';导入bigSc从'./modules/bigScreen'重新启动；从'./modules/dataSync'导入dataSync；从'./modules/targetManage'导入targetManage；从'./modules/fastAnaysis'导入fastAnaysis；从'./modules导入permissionNew/permissionNew';从'./modules/sqlModel'导入sqlModel;Vue.use(Vuex);constvuexLocal=newVuexPersist({storage:window.sessionStorage,modules:['sqlModel']});conststore=newVuex.Store({modules:{login,element,tree,editChart,upload,tabledrag,template,datasource,permission,controlCenter,editScreen,fullpage,bigScreen,dataSync,filter,linkage,targetManage,fastAnaysis,permissionNew,sqlModel},插件：[vuexLocal.plugin]//strict:process.env.NODE_ENV!=='production'});exportdefaultstore;type.js//loginexportconstSET_USER_INFO='SET_USER_INFO';//设置用户信息exportconstSET_LOGIN_STATUS='SET_LOGIN_STATUS';//设置登录状态exportconstSET_STORE='SET_STORE';exportconstSETROLE_AND_FETCHPERMISSION='SETROLE_AND_FETCHPERMISSION';//elementexportconstSET_MODAL='SET_MODAL';//全局模态（动态组件的名称）exportconstSET_FILTER='SET_FILTER';//节省时间，用于模态框exportconstSET_THEME='SET_THEME'forfullscreen;//保存全局导出的主题constSET_BIG_SCREEN_THEME='SET_BIG_SCREEN_THEME';//为大屏幕主题导出常量SET_FULLPAGE_STORE='SET_FULLPAGE_STORE';全屏通用组件提供数据导出constSET_TREE_NODES='SET_TREE_NODES';//目录树导出constSET_DASHBOARD_FILES='SET_DASHBOARD_FILES';导出常量SET_FIELD_NODES='SET_FIELD_NODES';//添加图表目录树exportconstSET_TREE_MPEU_SETTYPE='目录树类型exportconstSET_UPLOAD='SET_UPLOAD';//上传导出常量SET_UPLOAD_IMG='SET_UPLOAD_IMG';//上传图片exportconstSET_REFRESH='SET_REFRESH';//是否刷新exportconstSET_TALEDRAGCONFIG='SET_TALEDRAGCONFIGIN';exportconstSET_FIL'SET_FILTERINFO';exportconstSET_FILTERARR='SET_FILTERARR';//权限导出constUPDATE_PERMISSION_LIST='UPDATE_PERMISSION_LIST';exportconstSET_ROLE_INFO='SET_ROLE_INFO';exportconstFETCH_PERMISSION_LIST='FETCH_PERMISSION_LIST';exportconstGET_SHOW_ELES='GET_SHOW_ELES';exportconstGET_HEADER_PERMS='GET_HEADER_PERMS';exportconstSET_HEADER_PERMS_INFO='SET_HEADER_PERMS_INFO';exportconstFETCH_HEADER_PERMS_LIST='FETCH_HEADER_PERMS_LIST';exportconstIS_TEMPLATE_PREMISSION='IS_TEMPLATE_PREMISSION';//是否有取得模板的权限exportconstUSER_TYPE_PERMISSIONLIST='USER_TYPE_PERMISSIONLIST';//根据用户类型的权限exportconstSET_USER_TYPE_PERMISSIONLIST='SET_USER_TYPE_PERMISSIONLIST';//设置根据用户类型权限exportconstGET_USER_TYPE_PERMISSIONLIST='GET_USER_TYPE_PERMISSIONLIST';//根据用户类型获取权限//数据源exportconstSET_CUSTOMFILELIST='SET_CUSTOMFILELIST';//数据同步exportconstSET_CLIENT='SET_CLIENT';exportconstSETSET_TASK'=modules/tree.jsimport*astypesfrom'../type';letfieldNode=sessionStorage.getItem('fieldNodes');让treeNodes=sessionStorage.getItem('treeNodes');让dashboardFile=sessionStorage.getItem('treeNodes');让menuType=sessionStorage.getItem('menuType');让menuCode=sessionStorage.getItem('menuCode');conststate={//目录树以及当节前点treeNodes:treeNodes?JSON.parse(treeNodes):[],fieldNodes:fieldNode?JSON.parse(fieldNode):[],dashboardFiles:dashboardFile?JSON.parse(dashboardFile):[],menuTypes:菜单类型||'',菜单代码:菜单代码||''};constgetters={treeNodes:state=>state.treeNodes,fieldNodes:state=>state.fieldNodes,dashboardFiles:state=>state.dashboardFiles,menuTypes:state=>state.menuTypes,menuCode:state=>state.menuCode};constactions={setTreeNodes({commit},data){sessionStorage.setItem('treeNodes',JSON.stringify(data));提交（类型。SET_TREE_NODES，数据）；},setDashboardFiles({commit},数据){sessionStorage.setItem('dashboardFiles',JSON.stringify(数据））;提交（类型。SET_DASHBOARD_FILES，数据）；},setFieldNodes({commit},data){sessionStorage.setItem('fieldNodes',JSON.stringify(data));提交（类型。SET_FIELD_NODES，数据）；},setMenuTypes({commit},数据){sessionStorage.setItem('menuType',数据);提交（类型。SET_TREE_MENU_TYPE，数据）；},setMenuCode({commit},数据){sessionStorage.setItem('menuCode',数据);提交（'MENU_CODE'，数据）；}};constmutations={[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;}};exportdefault{state,actions,getters,mutations};页面中使用import{mapActions,mapGetters,mapMutations}from'vuex';importstorefrom'@/vuex/store';计算d:{...mapGetters({treeNodes:'treeNodes',menuCode:'menuCode'}),/***@description文件夹是否可以拖拽禁用*/dirDragableDisable(){return(this.isDisable||!this.$_has_permission(this.$PERMISSION_TAG_LIST.DASHBOARD_EDIT_LEFTDIRDRAG));},/***@description看板是否可以拖动禁用*/dasbboardDragableDisable(){return!this.$_has_permission(this.$PERMISSION_TAG_LIST.DASHBOARD}RAGIT_)},methods:{...mapMutations({setMenuData:'controlCenter/setMenuData'}),...mapActions({setTreeNodes:'setTreeNodes',setMenuCode:'setMenuCode',setDashboardFiles:'setDashboardFiles'}),getMenuInfo(val){//获取菜单树目录if(val!==undefined&&val!==''){store.state.tree.menuTypes=val;//修改菜单类型类型}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){letparent=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);}*///如果有idif(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('动作');},}
