1. 绑定keyup时间

2. 调整样式

src/api/modules/role.js

@@ -13,7 +13,7 @@ export function list (params) {
}
// 获取角色列表, 根据当前用户
export function listByUser () {
export function select () {
  return request({
    url: requestUrl('/sys/role/select'),
    method: 'get',
@@ -22,9 +22,9 @@ export function listByUser () {
}
// 获取角色信息
export function info (roleId) {
export function info (id) {
  return request({
    url: requestUrl('/sys/role/info' + (isInteger(roleId) ? `/${roleId}` : '')),
    url: requestUrl('/sys/role/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })

src/api/modules/user.js

@@ -13,9 +13,9 @@ export function list (params) {
}
// 获取用户信息
export function info (userId) {
export function info (id) {
  return request({
    url: requestUrl('/sys/user/info' + (isInteger(userId) ? `/${userId}` : '')),
    url: requestUrl('/sys/user/info' + (isInteger(id) ? `/${id}` : '')),
    method: 'get',
    params: requestParam({}, 'get')
  })

src/assets/scss/_base.scss

@@ -79,11 +79,12 @@ img {
  .el-submenu__title {
    text-align: center;
  }
  .site-sidebar__menu-icon {
    margin-right: 0;
    font-size: 20px;
  .site-sidebar__menu.el-menu {
    .site-sidebar__menu-icon {
      margin-right: 0;
      font-size: 20px;
    }
  }
  .el-menu-item span,
  .el-submenu > .el-submenu__title span {
    display: none;
  }
@@ -106,6 +107,7 @@ img {
  float: left;
  width: 230px;
  height: 50px;
  transition: width .2s;
}
.site-logo {
  display: table-cell;
@@ -116,6 +118,7 @@ img {
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  transition: width .2s;
  &__lg,
  &__mini {
    color: #fff;
@@ -149,6 +152,7 @@ img {
  margin-left: 230px;
  padding-right: 15px;
  background-color: #fff;
  transition: margin-left .2s;
}
.site-topbar__menu {
  float: left;
@@ -176,6 +180,7 @@ img {
  width: 230px;
  background-color: #545c64;
  overflow: hidden;
  transition: width .2s;
}
.site-sidebar__inner {
  position: relative;
@@ -184,10 +189,12 @@ img {
  height: 100%;
  padding-bottom: 15px;
  overflow-y: scroll;
  transition: width .2s;
}
.site-sidebar__menu.el-menu {
  width: 230px;
  border-right: 0;
  transition: width .2s;
  .site-sidebar__menu-icon {
    margin-right: 5px;
    font-size: 16px;
@@ -200,6 +207,7 @@ img {
  padding-top: 50px;
  margin-left: 230px;
  min-height: 100%;
  transition: margin-left .2s;
}
.site-content {
  position: relative;
@@ -217,6 +225,7 @@ img {
      padding: 0 15px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #fff;
      transition: left .2s;
    }
    .el-tabs__nav-wrap {
      margin-bottom: 0;

src/store/mutation-types.js

@@ -4,6 +4,7 @@ export const UPDATE_DOCUMENT_CLIENT_HEIGHT = 'UPDATE_DOCUMENT_CLIENT_HEIGHT'
export const UPDATE_MENU_NAV_LIST = 'UPDATE_MENU_NAV_LIST'
export const ADD_CONTENT_TAB = 'ADD_CONTENT_TAB'
export const UPDATE_CONTENT_TABS = 'UPDATE_CONTENT_TABS'
export const DELETE_CONTENT_TABS = 'DELETE_CONTENT_TABS'
export const UPDATE_CONTENT_TABS_ACTIVE_NAME = 'UPDATE_CONTENT_TABS_ACTIVE_NAME'
// 用户
export const UPDATE_USER_ID = 'UPDATE_USER_ID'

src/store/mutations.js

@@ -21,6 +21,10 @@ export default {
    state.contentTabs = tabs
  },
  [types.DELETE_CONTENT_TABS] (state) {
    state.contentTabs = []
  },
  [types.UPDATE_CONTENT_TABS_ACTIVE_NAME] (state, { name }) {
    state.contentTabsActiveName = name
  }

src/views/config/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>

src/views/home/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="site-content site-content--home">
    <el-card :style="contentViewHeight()">
    <el-card :style="contentViewStyles">
      <h3>项目介绍</h3>
      <ul>
        <li><a href="http://demo.renren.io/renren-fast/" target="_blank">http://demo.renren.io/renren-fast/</a></li>
@@ -34,14 +34,16 @@
      return {
      }
    },
    methods: {
      contentViewHeight () {
    computed: {
      contentViewStyles () {
        var height = this.$store.state.documentClientHeight
        height -= 50 // site-topbar
        height -= 15 // site-content padding-top
        height -= 15 // site-content padding-bottom
        height += 'px'
        return { minHeight: height }
        return [
          { minHeight: height }
        ]
      }
    }
  }

src/views/layout/sidebar.vue

@@ -9,7 +9,7 @@
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1-1" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <i class="site-sidebar__menu-icon fa fa-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <sub-menu-nav

src/views/layout/topbar.vue

@@ -1,9 +1,9 @@
<template>
  <header class="site-topbar">
    <div class="site-topbar__header">
      <h1 class="site-logo">
        <a class="site-logo__lg" href="/">Vue-cli-basic</a>
        <a class="site-logo__mini" href="/">Vue</a>
      <h1 class="site-logo" @click="$router.push({ name: 'home' })">
        <a class="site-logo__lg" href="javascript:;">Vue-cli-basic</a>
        <a class="site-logo__mini" href="javascript:;">Vue</a>
      </h1>
    </div>
    <div class="site-topbar__body clearfix">
@@ -63,14 +63,21 @@
      },
      // 退出
      logoutHandle () {
        API.common.logout().then(({data}) => {
          if (data && data.code === 0) {
            this.$cookie.delete('token')
            this.$router.replace({ name: 'login' })
          }
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.common.logout().then(({data}) => {
            if (data && data.code === 0) {
              this.DELETE_CONTENT_TABS([])
              this.$cookie.delete('token')
              this.$router.replace({ name: 'login' })
            }
          })
        })
      },
      ...mapMutations(['SWITCH_SIDEBAR_COLLAPSE'])
      ...mapMutations(['SWITCH_SIDEBAR_COLLAPSE', 'DELETE_CONTENT_TABS'])
    }
  }
</script>

src/views/layout/update-password.vue

@@ -3,7 +3,7 @@
    title="修改密码"
    :visible.sync="visible"
    :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="账号">
        <span>{{ $store.state.user.name }}</span>
      </el-form-item>
@@ -26,6 +26,7 @@
<script>
  import API from '@/api'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      var validateConfirmPassword = (rule, value, callback) => {
@@ -81,6 +82,7 @@
                  onClose: () => {
                    this.visible = false
                    this.$nextTick(() => {
                      this.DELETE_CONTENT_TABS([])
                      this.$cookie.delete('token')
                      this.$router.replace({ name: 'login' })
                    })
@@ -92,7 +94,8 @@
            })
          }
        })
      }
      },
      ...mapMutations(['DELETE_CONTENT_TABS'])
    }
  }
</script>

src/views/log/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
      </el-form-item>

src/views/login/index.vue

@@ -8,7 +8,7 @@
        </div>
        <div class="login-main">
          <h3 class="login-title">管理员登录</h3>
          <el-form :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()" ref="dataForm" status-icon>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
@@ -101,7 +101,6 @@
    left: 0;
    background-color: rgba(38, 50, 56, .6);
    overflow: hidden;
    &:before {
      position: fixed;
      top: 0;
@@ -113,7 +112,6 @@
      background-image: url(~@/assets/img/login_bg.jpg);
      background-size: cover;
    }
    .site-content__wrapper {
      position: absolute;
      top: 0;
@@ -159,7 +157,6 @@
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;

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

@@ -3,7 +3,7 @@
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio :label="0">目录</el-radio>

src/views/role/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="mod-role">
    <el-form :inline="true" :model="dataForm">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
      </el-form-item>

src/views/schedule/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="mod-schedule">
    <el-form :inline="true" :model="dataForm">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.beanName" placeholder="bean名称" clearable></el-input>
      </el-form-item>

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

@@ -0,0 +1,169 @@
<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
        <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
        <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="角色" size="mini" prop="roleIdList">
        <el-checkbox-group v-model="dataForm.roleIdList">
          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="状态" size="mini" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">禁用</el-radio>
          <el-radio :label="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="addOrUpdateFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import API from '@/api'
  import { isEmail, isMobile } from '@/utils/validate'
  export default {
    data () {
      var validatePassword = (rule, value, callback) => {
        if (!this.dataForm.id && !/\S/.test(value)) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
      var validateComfirmPassword = (rule, value, callback) => {
        if (!this.dataForm.id && !/\S/.test(value)) {
          callback(new Error('确认密码不能为空'))
        } else if (this.dataForm.password !== value) {
          callback(new Error('确认密码与密码输入不一致'))
        } else {
          callback()
        }
      }
      var validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('邮箱格式错误'))
        } else {
          callback()
        }
      }
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        visible: false,
        roleList: [],
        dataForm: {
          id: 0,
          userName: '',
          password: '',
          comfirmPassword: '',
          email: '',
          mobile: '',
          roleIdList: [],
          status: 1
        },
        dataRule: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          comfirmPassword: [
            { validator: validateComfirmPassword, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { validator: validateEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { validator: validateMobile, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        API.role.select().then(({data}) => {
          this.roleList = data && data.code === 0 ? data.list : []
        }).then(() => {
          this.visible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
          })
        }).then(() => {
          if (this.dataForm.id) {
            API.user.info(this.dataForm.id).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.userName = data.user.username
                this.dataForm.email = data.user.email
                this.dataForm.mobile = data.user.mobile
                this.dataForm.roleIdList = data.user.roleIdList
                this.dataForm.status = data.user.status
              }
            })
          }
        })
      },
      // 新增 / 修改, 提交
      addOrUpdateFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'userId': this.dataForm.id || undefined,
              'username': this.dataForm.userName,
              'password': this.dataForm.password,
              'email': this.dataForm.email,
              'mobile': this.dataForm.mobile,
              'status': this.dataForm.status,
              'roleIdList': this.dataForm.roleIdList
            }
            var tick = this.dataForm.id ? API.user.update(params) : API.user.add(params)
            tick.then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

src/views/user/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="mod-user">
    <el-form :inline="true" :model="dataForm">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      </el-form-item>
@@ -86,81 +86,15 @@
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog
      :title="!addOrUpdateForm.userId ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="addOrUpdateDialogVisible">
      <el-form :model="addOrUpdateForm" :rules="addOrUpdateRule" ref="addOrUpdateForm" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addOrUpdateForm.userName" placeholder="登录帐号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :class="{ 'is-required': !addOrUpdateForm.userId }">
          <el-input v-model="addOrUpdateForm.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !addOrUpdateForm.userId }">
          <el-input v-model="addOrUpdateForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addOrUpdateForm.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addOrUpdateForm.mobile" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="角色" size="mini" prop="roleIdList">
          <el-checkbox-group v-model="addOrUpdateForm.roleIdList">
            <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="状态" size="mini" prop="status">
          <el-radio-group v-model="addOrUpdateForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrUpdateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrUpdateFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
  import API from '@/api'
  import { isEmail, isMobile } from '@/utils/validate'
  import AddOrUpdate from './add-or-update'
  export default {
    data () {
      var validatePassword = (rule, value, callback) => {
        if (!this.addOrUpdateForm.userId && !/\S/.test(value)) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
      var validateComfirmPassword = (rule, value, callback) => {
        if (!this.addOrUpdateForm.userId && !/\S/.test(value)) {
          callback(new Error('确认密码不能为空'))
        } else if (this.addOrUpdateForm.password !== value) {
          callback(new Error('确认密码与密码输入不一致'))
        } else {
          callback()
        }
      }
      var validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('邮箱格式错误'))
        } else {
          callback()
        }
      }
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        dataForm: {
          userName: ''
@@ -171,39 +105,12 @@
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        roleList: [],
        addOrUpdateDialogVisible: false,
        addOrUpdateForm: {
          userId: 0,
          userName: '',
          password: '',
          comfirmPassword: '',
          email: '',
          mobile: '',
          roleIdList: [],
          status: 1
        },
        addOrUpdateRule: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          comfirmPassword: [
            { validator: validateComfirmPassword, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { validator: validateEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { validator: validateMobile, trigger: 'blur' }
          ]
        }
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
@@ -244,58 +151,9 @@
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateForm.userId = id || 0
        API.role.listByUser().then(({data}) => {
          this.roleList = data && data.code === 0 ? data.list : []
        }).then(() => {
          this.addOrUpdateDialogVisible = true
          this.$nextTick(() => {
            this.$refs['addOrUpdateForm'].resetFields()
          })
        }).then(() => {
          if (this.addOrUpdateForm.userId) {
            API.user.info(this.addOrUpdateForm.userId).then(({data}) => {
              if (data && data.code === 0) {
                this.addOrUpdateForm.userName = data.user.username
                this.addOrUpdateForm.email = data.user.email
                this.addOrUpdateForm.mobile = data.user.mobile
                this.addOrUpdateForm.roleIdList = data.user.roleIdList
                this.addOrUpdateForm.status = data.user.status
              }
            })
          }
        })
      },
      // 新增 / 修改, 提交
      addOrUpdateFormSubmit () {
        this.$refs['addOrUpdateForm'].validate((valid) => {
          if (valid) {
            var params = {
              'userId': this.addOrUpdateForm.userId || undefined,
              'username': this.addOrUpdateForm.userName,
              'password': this.addOrUpdateForm.password,
              'email': this.addOrUpdateForm.email,
              'mobile': this.addOrUpdateForm.mobile,
              'status': this.addOrUpdateForm.status,
              'roleIdList': this.addOrUpdateForm.roleIdList
            }
            var tick = this.addOrUpdateForm.userId ? API.user.update(params) : API.user.add(params)
            tick.then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.addOrUpdateDialogVisible = false
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除