优化http请求

src/api/index.js

import * as common from './modules/common'
import * as user from './modules/user'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as log from './modules/log'
import * as config from './modules/config'
import * as oss from './modules/oss'
import * as schedule from './modules/schedule'
export default {
  common,     // 公共
  user,       // 管理员管理
  role,       // 角色管理
  menu,       // 菜单管理
  log,        // 系统日志
  config,     // 参数管理
  oss,        // 文件服务
  schedule    // 定时任务
}

src/api/modules/common.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
// 获取验证码
export function captcha (uuid) {
  return requestUrl(`/captcha.jpg?uuid=${uuid}`)
}
// 登录
export function login (params) {
  return request({
    url: requestUrl('/sys/login'),
    method: 'post',
    data: requestParam(params)
  })
}
// 退出
export function logout () {
  return request({
    url: requestUrl('/sys/logout'),
    method: 'post',
    data: requestParam()
  })
}

src/api/modules/config.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取参数列表
export function list (params) {
  return request({
    url: requestUrl('/sys/config/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取参数信息
export function info (id) {
  return request({
    url: requestUrl('/sys/config/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 添加参数
export function add (params) {
  return request({
    url: requestUrl('/sys/config/save'),
    method: 'post',
    data: requestParam(params)
  })
}
// 修改参数
export function update (params) {
  return request({
    url: requestUrl('/sys/config/update'),
    method: 'post',
    data: requestParam(params)
  })
}
// 删除参数
export function del (params) {
  return request({
    url: requestUrl('/sys/config/delete'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}

src/api/modules/log.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取日志列表
export function list (params) {
  return request({
    url: requestUrl('/sys/log/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取定时任务日志列表
export function scheduleList (params) {
  return request({
    url: requestUrl('/sys/scheduleLog/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取定时任务日志信息
export function scheduleInfo (id) {
  return request({
    url: requestUrl('/sys/scheduleLog/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}

src/api/modules/menu.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取导航菜单列表 / 权限
export function nav () {
  return request({
    url: requestUrl('/sys/menu/nav'),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 获取菜单列表
export function list () {
  return request({
    url: requestUrl('/sys/menu/list'),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 获取上级菜单
export function select () {
  return request({
    url: requestUrl('/sys/menu/select'),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 获取菜单信息
export function info (id) {
  return request({
    url: requestUrl('/sys/menu/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 添加菜单
export function add (params) {
  return request({
    url: requestUrl('/sys/menu/save'),
    method: 'post',
    data: requestParam(params)
  })
}
// 修改菜单
export function update (params) {
  return request({
    url: requestUrl('/sys/menu/update'),
    method: 'post',
    data: requestParam(params)
  })
}
// 删除菜单
export function del (id) {
  return request({
    url: requestUrl('/sys/menu/delete' + (isInteger(id) ? `/${id}` : '')),
    method: 'post',
    data: requestParam()
  })
}

src/api/modules/oss.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
// 获取文件列表
export function list (params) {
  return request({
    url: requestUrl('/sys/oss/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取云存储配置信息
export function config () {
  return request({
    url: requestUrl('/sys/oss/config'),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 保存云存储配置信息
export function addConfig (params) {
  return request({
    url: requestUrl('/sys/oss/saveConfig'),
    method: 'post',
    data: requestParam(params)
  })
}
// 上传文件
export function upload (token) {
  return requestUrl(`/sys/oss/upload?token=${token}`)
}
// 删除文件
export function del (params) {
  return request({
    url: requestUrl('/sys/oss/delete'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}

src/api/modules/role.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取角色列表
export function list (params) {
  return request({
    url: requestUrl('/sys/role/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取角色列表, 根据当前用户
export function select () {
  return request({
    url: requestUrl('/sys/role/select'),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 获取角色信息
export function info (id) {
  return request({
    url: requestUrl('/sys/role/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 添加角色
export function add (params) {
  return request({
    url: requestUrl('/sys/role/save'),
    method: 'post',
    data: requestParam(params)
  })
}
// 修改角色
export function update (params) {
  return request({
    url: requestUrl('/sys/role/update'),
    method: 'post',
    data: requestParam(params)
  })
}
// 删除角色
export function del (params) {
  return request({
    url: requestUrl('/sys/role/delete'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}

src/api/modules/schedule.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取定时任务列表
export function list (params) {
  return request({
    url: requestUrl('/sys/schedule/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取定时任务信息
export function info (id) {
  return request({
    url: requestUrl('/sys/schedule/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 添加定时任务
export function add (params) {
  return request({
    url: requestUrl('/sys/schedule/save'),
    method: 'post',
    data: requestParam(params)
  })
}
// 修改定时任务
export function update (params) {
  return request({
    url: requestUrl('/sys/schedule/update'),
    method: 'post',
    data: requestParam(params)
  })
}
// 删除定时任务
export function del (params) {
  return request({
    url: requestUrl('/sys/schedule/delete'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}
// 运行定时任务
export function run (params) {
  return request({
    url: requestUrl('/sys/schedule/run'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}
// 暂停定时任务
export function pause (params) {
  return request({
    url: requestUrl('/sys/schedule/pause'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}
// 恢复定时任务
export function resume (params) {
  return request({
    url: requestUrl('/sys/schedule/resume'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}

src/api/modules/user.js

import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
import isInteger from 'lodash/isInteger'
// 获取用户列表
export function list (params) {
  return request({
    url: requestUrl('/sys/user/list'),
    method: 'get',
    params: requestParam(params, 'get')
  })
}
// 获取用户信息
export function info (id) {
  return request({
    url: requestUrl('/sys/user/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })
}
// 修改密码
export function updatePassword (params) {
  return request({
    url: requestUrl('/sys/user/password'),
    method: 'post',
    data: requestParam(params)
  })
}
// 添加用户
export function add (params) {
  return request({
    url: requestUrl('/sys/user/save'),
    method: 'post',
    data: requestParam(params)
  })
}
// 修改用户
export function update (params) {
  return request({
    url: requestUrl('/sys/user/update'),
    method: 'post',
    data: requestParam(params)
  })
}
// 删除用户
export function del (params) {
  return request({
    url: requestUrl('/sys/user/delete'),
    method: 'post',
    data: requestParam(params, 'post', false)
  })
}

src/api/request.js

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
// 创建axios实例
const service = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})
// request拦截器
service.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token')
  return config
}, error => {
  return Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    Vue.cookie.delete('token')
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})
export default service

src/api/requestParam.js

import qs from 'qs'
import merge from 'lodash/merge'
/**
 * 请求参数统一处理／组装
 * @param {*} params 参数对象
 * @param {*} requestType 类型
 * @param {*} openDefultParams 是否开启默认参数?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
export default function (params, requestType = 'post', openDefultParams = true, contentType = 'json') {
  // 默认参数
  var defaults = {
    't': new Date().getTime()
  }
  params = openDefultParams ? merge(defaults, params) : params
  params = requestType === 'post' ? (contentType === 'json' ? JSON.stringify(params) : qs.stringify(params)) : params
  return params
}

src/api/requestUrl.js

/**
 * 请求地址统一处理／组装
 * @param {*} actionName action方法名称
 */
export default function (actionName) {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

src/assets/scss/index.scss

@import "normalize";       // api: https://github.com/necolas/normalize.css/
@import "variables";       // 站点变量
@import "element-ui";      // element-ui主题定制, 开启(解开注释)后会增加编译时间(建议: 开发时／无此需求时, 请注释!) #待优化
// @import "element-ui";      // element-ui主题定制, 开启(解开注释)后会增加编译时间(建议: 开发时／无此需求时, 请注释!) #待优化
@import "base";

src/main.js

import '@/element-ui'               // api: https://github.com/ElemeFE/element
import '@/icons'                    // api: http://www.iconfont.cn/
import '@/assets/scss/index.scss'
import http from '@/utils/http'
import { isAuth } from '@/utils'
Vue.use(VueCookie)
Vue.config.productionTip = false
// 非生产环境, 适配mockjs模拟数据.        api: https://github.com/nuysoft/Mock
// 非生产环境, 适配mockjs模拟数据.         api: https://github.com/nuysoft/Mock
if (process.env.NODE_ENV !== 'production') {
  require('@/mock')
}
// 挂载权限方法
Vue.prototype.isAuth = isAuth
Vue.prototype.$http = http    // 挂载, ajax请求方法
Vue.prototype.isAuth = isAuth // 挂载, 权限方法
/* eslint-disable no-new */
new Vue({

src/mock/index.js

import * as oss from './modules/oss'
import * as schedule from './modules/schedule'
console.log('\n%c!<-------------------- 接口拦截, mock模拟数据 start -------------------->', 'color:red')
console.log('\n%c!<-------------------- 接口拦截, mock模拟数据 s -------------------->', 'color:red')
// tips
// 1. 关闭[业务模块集]拦截, create方法[第2个参数]设置. (默认开启)
create(oss, false)         // 文件服务
create(schedule, false)    // 定时任务
console.log('%c!<-------------------- 接口拦截, mock模拟数据  end  -------------------->\n', 'color:red')
console.log('%c!<-------------------- 接口拦截, mock模拟数据 e -------------------->\n', 'color:red')

src/mock/modules/common.js

// 登录
export function login () {
  return {
    isOpen: false,
    // isOpen: false,
    url: '/sys/login',
    type: 'post',
    data: {

src/router/index.js

export default new Router({
  mode: 'hash',
  routes: [
    { path: '/404', component: _import('error/404'), name: '404', desc: '404未找到' },
    { path: '/login', component: _import('login/index'), name: 'login', desc: '登录' },
    { path: '/404', component: _import('common/404'), name: '404', desc: '404未找到' },
    { path: '/login', component: _import('common/login'), name: 'login', desc: '登录' },
    {
      path: '/',
      component: _import('layout/index'),
      name: 'layout',
      component: _import('main'),
      name: 'main',
      redirect: { name: 'home' },
      desc: '上左右整体布局',
      desc: '主入口整体布局',
      children: [
        // 通过isTab属性, 设定是否通过tab标签页展示内容
        { path: '/home', component: _import('home/index'), name: 'home', desc: '首页' },
        { path: '/layout-setting', component: _import('layout/setting'), name: 'setting', desc: '布局设置' },
        { path: '/user', component: _import('user/index'), name: 'user', desc: '管理员管理', meta: { isTab: true } },
        { path: '/role', component: _import('role/index'), name: 'role', desc: '角色管理', meta: { isTab: true } },
        { path: '/menu', component: _import('menu/index'), name: 'menu', desc: '菜单管理', meta: { isTab: true } },
        { path: '/sql', component: _import('sql/index'), name: 'sql', desc: 'SQL监控', meta: { isTab: true } },
        { path: '/schedule', component: _import('schedule/index'), name: 'schedule', desc: '定时任务', meta: { isTab: true } },
        { path: '/config', component: _import('config/index'), name: 'config', desc: '参数管理', meta: { isTab: true } },
        { path: '/oss', component: _import('oss/index'), name: 'oss', desc: '文件上传', meta: { isTab: true } },
        { path: '/log', component: _import('log/index'), name: 'log', desc: '系统日志', meta: { isTab: true } }
        { path: '/home', component: _import('common/home'), name: 'home', desc: '首页' },
        { path: '/theme', component: _import('common/theme'), name: 'theme', desc: '主题' },
        { path: '/job/schedule', component: _import('modules/job/schedule'), name: 'schedule', desc: '定时任务', meta: { isTab: true } },
        { path: '/oss', component: _import('modules/oss/index'), name: 'oss', desc: '文件上传', meta: { isTab: true } },
        { path: '/sys/config', component: _import('modules/sys/config'), name: 'config', desc: '参数管理', meta: { isTab: true } },
        { path: '/sys/log', component: _import('modules/sys/log'), name: 'log', desc: '系统日志', meta: { isTab: true } },
        { path: '/sys/menu', component: _import('modules/sys/menu'), name: 'menu', desc: '菜单管理', meta: { isTab: true } },
        { path: '/sys/role', component: _import('modules/sys/role'), name: 'role', desc: '角色管理', meta: { isTab: true } },
        { path: '/sys/user', component: _import('modules/sys/user'), name: 'user', desc: '管理员管理', meta: { isTab: true } }
      ],
      beforeEnter (to, from, next) {
        let token = Vue.cookie.get('token')

src/utils/http.js

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})
/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})
/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    Vue.cookie.delete('token')
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})
/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}
/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}
/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}
export default http

src/views/login/index.vue

</template>
<script>
  import API from '@/api'
  import { getUUID } from '@/utils'
  export default {
    data () {
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'username': this.dataForm.userName,
              'password': this.dataForm.password,
              'uuid': this.dataForm.uuid,
              'captcha': this.dataForm.captcha
            }
            API.common.login(params).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token, { expires: `${data.expire || 0}s` })
                this.$router.replace({ name: 'home' })
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = API.common.captcha(this.dataForm.uuid)
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      }
    }
  }

src/views/layout/content-tabs.vue

<template>
  <el-tabs
    v-model="tabActiveName"
    :closable="true"
    @tab-click="selectedTabHandle"
    @tab-remove="removeTabHandle">
    <el-tab-pane
      v-for="item in $store.state.contentTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name">
      <el-card :body-style="contentViewStyles(item)">
        <iframe
          v-if="item.type === 'iframe'"
          :src="getNestIframeUrl(item.url)"
          width="100%" height="100%" frameborder="0" scrolling="yes">
        </iframe>
        <keep-alive v-else>
          <router-view v-if="item.name === tabActiveName"></router-view>
        </keep-alive>
      </el-card>
    </el-tab-pane>
    
    <!-- tabs tools -->
    <el-dropdown class="site-tabs__tools" @command="toolsCommandHandle" :show-timeout="0">
      <i class="el-icon-arrow-down el-icon--right"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="closeCurrent">关闭当前标签页</el-dropdown-item>
        <el-dropdown-item command="closeOther">关闭其它标签页</el-dropdown-item>
        <el-dropdown-item command="closeAll">关闭全部标签页</el-dropdown-item>
        <el-dropdown-item command="refreshCurrent">刷新当前标签页</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-tabs>
</template>
<script>
  import isEmpty from 'lodash/isEmpty'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      return {
      }
    },
    computed: {
      tabActiveName: {
        get () {
          return this.$store.state.contentTabsActiveName
        },
        set (name) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name })
        }
      }
    },
    watch: {
      '$store.state.contentTabs' (tabs) {
        if (tabs.length <= 0) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name: '' })
          this.$router.push({ name: 'home' })
        }
      }
    },
    methods: {
      // tab内容容器显示高度
      contentViewStyles (tab) {
        var height = this.$store.state.documentClientHeight
        height -= 50 // site-topbar
        height -= 40 // el-tabs__header
        height -= 15 // el-tabs__header margin-bottom
        height -= 15 // el-tabs__content padding-bottom
        height -= 2  // el-card border-top border-bottom
        height += 'px'
        return [
          tab.type === 'iframe' ? { height } : { minHeight: height }
        ]
      },
      // 获取iframe嵌套地址
      getNestIframeUrl (url) {
        return window.SITE_CONFIG.nestIframeUrl + url
      },
      // 选中tab
      selectedTabHandle (tab) {
        tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)
        if (!isEmpty(tab)) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // 删除tab
      removeTabHandle (tabName) {
        var newTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        // 当前选中tab被删除
        if (newTabs.length >= 1 && tabName === this.tabActiveName) {
          this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
            this.tabActiveName = this.$route.name
          })
        }
        this.UPDATE_CONTENT_TABS(newTabs)
      },
      // 工具操作
      toolsCommandHandle (command) {
        if (command === 'closeCurrent') {
          this.removeTabHandle(this.tabActiveName)
        } else if (command === 'closeOther') {
          this.UPDATE_CONTENT_TABS(this.$store.state.contentTabs.filter(item => item.name === this.tabActiveName))
        } else if (command === 'closeAll') {
          this.DELETE_CONTENT_TABS()
        } else if (command === 'refreshCurrent') {
          var tempTabName = this.tabActiveName
          this.removeTabHandle(tempTabName)
          this.$nextTick(() => {
            this.$router.push({ name: tempTabName })
          })
        }
      },
      ...mapMutations(['UPDATE_MENU_NAV_ACTIVE_NAME', 'UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME', 'DELETE_CONTENT_TABS'])
    }
  }
</script>

src/views/layout/index.vue

<template>
  <div class="site-wrapper" :class="siteWarpperClasses" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
    <template v-if="!loading">
      <navbar></navbar>
      <sidebar></sidebar>
      <div class="site-content__wrapper" :style="siteContentWarpperStyles">
        <main class="site-content" :class="{ 'site-content--tabs': routeIsTab }">
          <el-card v-if="!routeIsTab" :body-style="contentViewStyles">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </el-card>
          <!-- tab标签页, 内容展示方式 -->
          <content-tabs v-else></content-tabs>
        </main>
      </div>
    </template>
  </div>
</template>
<script>
  import Navbar from './navbar'
  import Sidebar from './sidebar'
  import ContentTabs from './content-tabs'
  import API from '@/api'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      return {
        loading: true
      }
    },
    components: {
      Navbar,
      Sidebar,
      ContentTabs
    },
    computed: {
      siteWarpperClasses () {
        return [
          { 'site-sidebar--collapse': this.$store.state.sidebarCollapse }
        ]
      },
      siteContentWarpperStyles () {
        return [
          { 'minHeight': this.$store.state.documentClientHeight + 'px' }
        ]
      },
      routeIsTab () {
        return this.$route.meta && this.$route.meta.isTab
      },
      contentViewStyles () {
        var height = this.$store.state.documentClientHeight
        height -= 50 // site-topbar
        height -= 15 // site-content padding-top
        height -= 15 // site-content padding-bottom
        height -= 2  // el-card border-top border-bottom
        height += 'px'
        return [
          { minHeight: height }
        ]
      }
    },
    created () {
      this.getUserInfo()
    },
    mounted () {
      this.resetDocumentClientHeight()
      window.onresize = () => {
        this.resetDocumentClientHeight()
      }
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.UPDATE_DOCUMENT_CLIENT_HEIGHT({ height: document.documentElement['clientHeight'] })
      },
      // 获取当前管理员信息
      getUserInfo () {
        API.user.info().then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.DELETE_CONTENT_TABS()
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
          }
        })
      },
      ...mapMutations(['UPDATE_DOCUMENT_CLIENT_HEIGHT', 'UPDATE_USER_ID', 'UPDATE_USER_NAME', 'DELETE_CONTENT_TABS'])
    }
  }
</script>

src/views/layout/update-password.vue

</template>
<script>
  import API from '@/api'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'password': this.dataForm.password,
              'newPassword': this.dataForm.newPassword
            }
            API.user.updatePassword(params).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl('/sys/user/password'),
              method: 'post',
              data: this.$http.adornData({
                'password': this.dataForm.password,
                'newPassword': this.dataForm.newPassword
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/layout/navbar.vue

</template>
<script>
  import UpdatePassword from './update-password'
  import API from '@/api'
  import UpdatePassword from './main-navbar-update-password'
  import { mapMutations } from 'vuex'
  export default {
    data () {
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.common.logout().then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.DELETE_CONTENT_TABS()
              this.$cookie.delete('token')

src/views/layout/sidebar.vue

<script>
  import SubMenuNav from '@/components/sub-menu-nav'
  import API from '@/api'
  import { mapMutations } from 'vuex'
  import { getRouteNameByUrl } from '@/utils'
  import isEmpty from 'lodash/isEmpty'
    methods: {
      // 获取菜单导航列表 / 权限
      getMenuNavList () {
        return API.menu.nav().then(({data}) => {
        return this.$http({
          url: this.$http.adornUrl('/sys/menu/nav'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.UPDATE_MENU_NAV_LIST(data.menuList)
            sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))

src/views/main.vue

<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--collapse': this.$store.state.sidebarCollapse }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': this.$store.state.documentClientHeight + 'px' }">
        <main class="site-content" :class="{ 'site-content--tabs': routeIsTab }">
          <!-- 标签页展示内容 s -->
          <el-tabs
            v-if="routeIsTab"
            v-model="tabActiveName"
            :closable="true"
            @tab-click="selectedTabHandle"
            @tab-remove="removeTabHandle">
            <!-- 标签页工具 s -->
            <el-dropdown class="site-tabs__tools" :show-timeout="0">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
                <el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 标签页工具 e -->
            <el-tab-pane
              v-for="item in $store.state.contentTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name">
              <el-card :style="siteContentViewHeight">
                <iframe
                  v-if="item.type === 'iframe'"
                  :src="getNestIframeUrl(item.url)"
                  width="100%" height="100%" frameborder="0" scrolling="yes">
                </iframe>
                <keep-alive v-else>
                  <router-view v-if="item.name === tabActiveName" />
                </keep-alive>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <!-- 标签页展示内容 e -->
          <el-card v-else :style="siteContentViewHeight">
            <keep-alive>
              <router-view />
            </keep-alive>
          </el-card>
        </main>
      </div>
    </template>
  </div>
</template>
<script>
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import { mapMutations } from 'vuex'
  import isEmpty from 'lodash/isEmpty'
  export default {
    data () {
      return {
        loading: true
      }
    },
    components: {
      MainNavbar,
      MainSidebar
    },
    computed: {
      siteContentViewHeight () {
        var height = this.$store.state.documentClientHeight - 50 - 30 - 2
        if (this.routeIsTab) {
          height -= 40
          return this.$route.meta && this.$route.meta.isIframe ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      },
      routeIsTab () {
        return this.$route.meta && this.$route.meta.isTab
      },
      tabActiveName: {
        get () {
          return this.$store.state.contentTabsActiveName
        },
        set (name) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name })
        }
      }
    },
    watch: {
      '$store.state.contentTabs' (tabs) {
        if (tabs.length <= 0) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name: '' })
          this.$router.push({ name: 'home' })
        }
      }
    },
    created () {
      this.getUserInfo()
    },
    mounted () {
      this.resetDocumentClientHeight()
      window.onresize = () => {
        this.resetDocumentClientHeight()
      }
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight () {
        this.UPDATE_DOCUMENT_CLIENT_HEIGHT({ height: document.documentElement['clientHeight'] })
      },
      // 获取当前管理员信息
      getUserInfo () {
        this.$http({
          url: this.$http.adornUrl('/sys/user/info'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.DELETE_CONTENT_TABS()
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
          }
        })
      },
      // 获取iframe嵌套地址
      getNestIframeUrl (url) {
        return window.SITE_CONFIG.nestIframeUrl + url
      },
      // tabs, 选中tab
      selectedTabHandle (tab) {
        tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)
        if (!isEmpty(tab)) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        var newTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        // 当前选中tab被删除
        if (newTabs.length >= 1 && tabName === this.tabActiveName) {
          this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
            this.tabActiveName = this.$route.name
          })
        }
        this.UPDATE_CONTENT_TABS(newTabs)
      },
      // tabs, 关闭当前
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.tabActiveName)
      },
      // tabs, 关闭其它
      tabsCloseOtherHandle () {
        this.UPDATE_CONTENT_TABS(this.$store.state.contentTabs.filter(item => item.name === this.tabActiveName))
      },
      // tabs, 关闭全部
      tabsCloseAllHandle () {
        this.DELETE_CONTENT_TABS()
      },
      // tabs, 刷新当前
      tabsRefreshCurrentHandle () {
        var tempTabName = this.tabActiveName
        this.removeTabHandle(tempTabName)
        this.$nextTick(() => {
          this.$router.push({ name: tempTabName })
        })
      },
      ...mapMutations(['UPDATE_DOCUMENT_CLIENT_HEIGHT', 'UPDATE_USER_ID', 'UPDATE_USER_NAME', 'UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME', 'DELETE_CONTENT_TABS', 'UPDATE_MENU_NAV_ACTIVE_NAME'])
    }
  }
</script>

src/views/schedule/add-or-update.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            API.schedule.info(this.dataForm.id).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/schedule/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.beanName = data.schedule.beanName
                this.dataForm.methodName = data.schedule.methodName
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'jobId': this.dataForm.id || undefined,
              'beanName': this.dataForm.beanName,
              'methodName': this.dataForm.methodName,
              'params': this.dataForm.params,
              'cronExpression': this.dataForm.cronExpression,
              'remark': this.dataForm.remark,
              'status': !this.dataForm.id ? undefined : this.dataForm.status
            }
            var tick = !this.dataForm.id ? API.schedule.add(params) : API.schedule.update(params)
            tick.then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/schedule/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'jobId': this.dataForm.id || undefined,
                'beanName': this.dataForm.beanName,
                'methodName': this.dataForm.methodName,
                'params': this.dataForm.params,
                'cronExpression': this.dataForm.cronExpression,
                'remark': this.dataForm.remark,
                'status': !this.dataForm.id ? undefined : this.dataForm.status
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/schedule/log.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          jobId: this.dataForm.id
        }
        API.log.scheduleList(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/scheduleLog/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'jobId': this.dataForm.id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
      },
      // 失败信息
      showErrorInfo (id) {
        API.log.scheduleInfo(id).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl(`/sys/scheduleLog/info/${id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$alert(data.log.error)
          } else {

src/views/schedule/index.vue

</template>
<script>
  import API from '@/api'
  import AddOrUpdate from './add-or-update'
  import Log from './log'
  import AddOrUpdate from './schedule-add-or-update'
  import Log from './schedule-log'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          beanName: this.dataForm.beanName
        }
        API.schedule.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/schedule/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'beanName': this.dataForm.beanName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.schedule.del(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/schedule/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.schedule.pause(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/schedule/pause'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.schedule.resume(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/schedule/resume'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.schedule.run(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/schedule/run'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/oss/index.vue

</template>
<script>
  import API from '@/api'
  import Config from './config'
  import Upload from './upload'
  import Config from './oss-config'
  import Upload from './oss-upload'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize
        }
        API.oss.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/oss/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.oss.del(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/oss/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/oss/config.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
    methods: {
      init (id) {
        this.visible = true
        API.oss.config().then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/oss/config'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataForm = data && data.code === 0 ? data.config : []
        })
      },
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            API.oss.addConfig(this.dataForm).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl('/sys/oss/saveConfig'),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/oss/upload.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
    },
    methods: {
      init (id) {
        this.url = API.oss.upload(this.$cookie.get('token'))
        this.url = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
        this.visible = true
      },
      // 上传之前

src/views/config/add-or-update.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            API.config.info(this.dataForm.id).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.key = data.config.key
                this.dataForm.value = data.config.value
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'id': this.dataForm.id || undefined,
              'key': this.dataForm.key,
              'value': this.dataForm.value,
              'remark': this.dataForm.remark
            }
            var tick = !this.dataForm.id ? API.config.add(params) : API.config.update(params)
            tick.then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'key': this.dataForm.key,
                'value': this.dataForm.value,
                'remark': this.dataForm.remark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/config/index.vue

</template>
<script>
  import API from '@/api'
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './config-add-or-update'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        }
        API.config.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/config/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.config.del(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/config/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/log/index.vue

</template>
<script>
  import API from '@/api'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        }
        API.log.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/log/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount

src/views/menu/add-or-update.vue

</template>
<script>
  import API from '@/api'
  import { treeDataTranslate } from '@/utils'
  import Icon from '@/icons'
  export default {
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        API.menu.select().then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/menu/select'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.menuList = treeDataTranslate(data.menuList, 'menuId')
        }).then(() => {
          this.visible = true
            this.menuListTreeSetCurrentNode()
          } else {
            // 修改
            API.menu.info(this.dataForm.id).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              this.dataForm.id = data.menu.menuId
              this.dataForm.type = data.menu.type
              this.dataForm.name = data.menu.name
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'menuId': this.dataForm.id || undefined,
              'type': this.dataForm.type,
              'name': this.dataForm.name,
              'parentId': this.dataForm.parentId,
              'url': this.dataForm.url,
              'perms': this.dataForm.perms,
              'orderNum': this.dataForm.orderNum,
              'icon': this.dataForm.icon
            }
            var tick = !this.dataForm.id ? API.menu.add(params) : API.menu.update(params)
            tick.then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'menuId': this.dataForm.id || undefined,
                'type': this.dataForm.type,
                'name': this.dataForm.name,
                'parentId': this.dataForm.parentId,
                'url': this.dataForm.url,
                'perms': this.dataForm.perms,
                'orderNum': this.dataForm.orderNum,
                'icon': this.dataForm.icon
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/menu/index.vue

<script>
  import TableTreeColumn from '@/components/table-tree-column'
  import AddOrUpdate from './add-or-update'
  import API from '@/api'
  import AddOrUpdate from './menu-add-or-update'
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        API.menu.list().then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/menu/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataList = treeDataTranslate(data, 'menuId')
          this.dataListLoading = false
        })
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.menu.del(id).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/role/add-or-update.vue

</template>
<script>
  import API from '@/api'
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        API.menu.list().then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.menuList = treeDataTranslate(data, 'menuId')
        }).then(() => {
          this.visible = true
          })
        }).then(() => {
          if (this.dataForm.id) {
            API.role.info(this.dataForm.id).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.roleName = data.role.roleName
                this.dataForm.remark = data.role.remark
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'roleId': this.dataForm.id || undefined,
              'roleName': this.dataForm.roleName,
              'remark': this.dataForm.remark,
              'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
            }
            var tick = !this.dataForm.id ? API.role.add(params) : API.role.update(params)
            tick.then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'roleId': this.dataForm.id || undefined,
                'roleName': this.dataForm.roleName,
                'remark': this.dataForm.remark,
                'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/role/index.vue

</template>
<script>
  import AddOrUpdate from './add-or-update'
  import API from '@/api'
  import AddOrUpdate from './role-add-or-update'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          roleName: this.dataForm.roleName
        }
        API.role.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'roleName': this.dataForm.roleName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.role.del(ids).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/role/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/user/add-or-update.vue

</template>
<script>
  import API from '@/api'
  import { isEmail, isMobile } from '@/utils/validate'
  export default {
    data () {
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        API.role.select().then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/role/select'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.roleList = data && data.code === 0 ? data.list : []
        }).then(() => {
          this.visible = true
          })
        }).then(() => {
          if (this.dataForm.id) {
            API.user.info(this.dataForm.id).then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.userName = data.user.username
                this.dataForm.salt = data.user.salt
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'userId': this.dataForm.id || undefined,
              'username': this.dataForm.userName,
              'password': this.dataForm.password,
              'salt': this.dataForm.salt,
              'email': this.dataForm.email,
              'mobile': this.dataForm.mobile,
              'status': this.dataForm.status,
              'roleIdList': this.dataForm.roleIdList
            }
            var tick = !this.dataForm.id ? API.user.add(params) : API.user.update(params)
            tick.then(({data}) => {
            this.$http({
              url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'userId': this.dataForm.id || undefined,
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'salt': this.dataForm.salt,
                'email': this.dataForm.email,
                'mobile': this.dataForm.mobile,
                'status': this.dataForm.status,
                'roleIdList': this.dataForm.roleIdList
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',

src/views/user/index.vue

</template>
<script>
  import API from '@/api'
  import AddOrUpdate from './add-or-update'
  import AddOrUpdate from './user-add-or-update'
  export default {
    data () {
      return {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          username: this.dataForm.userName
        }
        API.user.list(params).then(({data}) => {
        this.$http({
          url: this.$http.adornUrl('/sys/user/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'username': this.dataForm.userName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.user.del(userIds).then(({data}) => {
          this.$http({
            url: this.$http.adornUrl('/sys/user/delete'),
            method: 'post',
            data: this.$http.adornData(userIds, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',

src/views/sql/index.vue

<template>
  <div>sql</div>
</template>

static/config/index.js

  window.SITE_CONFIG = {};
  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://demo.renren.io/renren-fast';
  window.SITE_CONFIG['baseUrl'] = 'http://dev.demo.renren.io/renren-fast';
  // 嵌套iframe地址
  window.SITE_CONFIG['nestIframeUrl'] = 'http://demo.renren.io/renren-fast';
  window.SITE_CONFIG['nestIframeUrl'] = 'http://dev.demo.renren.io/renren-fast';
  // 嵌套iframe路由名称列表
  window.SITE_CONFIG['nestIframeRouteNameList'] = ['sql'];

static/config/init.js

      window.SITE_CONFIG.cdnUrl + '/static/js/manifest.js',
      window.SITE_CONFIG.cdnUrl + '/static/js/vendor.js',
      window.SITE_CONFIG.cdnUrl + '/static/js/app.js',
      // window.SITE_CONFIG.cdnUrl + '/static/plugins/mock-1.0.0-beta3/mock-min.js'
      window.SITE_CONFIG.cdnUrl + '/static/plugins/mock-1.0.0-beta3/mock-min.js'
    ]
  };