init

src/views/main-content.vue

@@ -0,0 +1,96 @@
+<template>
+  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
+    <!-- tab展示内容 -->
+    <template v-if="$route.meta.isTab">
+      <el-dropdown class="aui-content--tabs-tools">
+        <i class="el-icon-arrow-down"></i>
+        <el-dropdown-menu slot="dropdown" :show-timeout="0">
+          <el-dropdown-item @click.native="tabRemoveHandle($store.state.contentTabsActiveName)">{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-tabs v-model="$store.state.contentTabsActiveName" @tab-click="tabSelectedHandle" @tab-remove="tabRemoveHandle">
+        <el-tab-pane
+          v-for="item in $store.state.contentTabs"
+          :key="item.name"
+          :name="item.name"
+          :label="item.title"
+          :closable="item.name !== 'home'"
+          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
+          <template v-if="item.name === 'home'">
+            <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
+          </template>
+          <iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+          <keep-alive v-else>
+            <router-view v-if="item.name === $store.state.contentTabsActiveName" />
+          </keep-alive>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+    <!-- 其他方式, 展示内容 -->
+    <template v-else>
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    </template>
+  </main>
+</template>
+
+<script>
+import { isURL } from '@/utils/validate'
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+    // tabs, 是否通过iframe展示
+    tabIsIframe (url) {
+      return isURL(url)
+    },
+    // tabs, 选中tab
+    tabSelectedHandle (tab) {
+      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
+      if (tab) {
+        this.$router.push({
+          'name': tab.name,
+          'params': { ...tab.params },
+          'query': { ...tab.query }
+        })
+      }
+    },
+    // tabs, 删除tab
+    tabRemoveHandle (tabName) {
+      if (tabName === 'home') {
+        return false
+      }
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+      if (this.$store.state.contentTabs.length <= 0) {
+        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+        return false
+      }
+      // 当前选中tab被删除
+      if (tabName === this.$store.state.contentTabsActiveName) {
+        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
+        this.$router.push({
+          name: tab.name,
+          params: { ...tab.params },
+          query: { ...tab.query }
+        })
+      }
+    },
+    // tabs, 关闭其它
+    tabsCloseOtherHandle () {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
+        return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
+      })
+    },
+    // tabs, 关闭全部
+    tabsCloseAllHandle () {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
+      this.$router.push({ name: 'home' })
+    }
+  }
+}
+</script>

src/views/main-navbar-update-password.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('updatePassword.title')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :append-to-body="true">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item :label="$t('updatePassword.username')">
+        <span>{{ $store.state.user.name }}</span>
+      </el-form-item>
+      <el-form-item prop="password" :label="$t('updatePassword.password')">
+        <el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input>
+      </el-form-item>
+      <el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')">
+        <el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPassword" :label="$t('updatePassword.confirmPassword')">
+        <el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('updatePassword.confirmPassword')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { clearLoginInfo } from '@/utils'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        password: '',
+        newPassword: '',
+        confirmPassword: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      var validateConfirmPassword = (rule, value, callback) => {
+        if (this.dataForm.newPassword !== value) {
+          return callback(new Error(this.$t('updatePassword.validate.confirmPassword')))
+        }
+        callback()
+      }
+      return {
+        password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateConfirmPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              clearLoginInfo()
+              this.$router.replace({ name: 'login' })
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/main-navbar.vue

@@ -0,0 +1,103 @@
+<template>
+  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+    <div class="aui-navbar__header">
+      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
+        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
+        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+      </h1>
+    </div>
+    <div class="aui-navbar__body">
+      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
+        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
+          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+        </el-menu-item>
+        <el-menu-item index="2" @click="refresh()">
+          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
+        </el-menu-item>
+      </el-menu>
+      <el-menu class="aui-navbar__menu" mode="horizontal">
+        <el-menu-item index="2">
+          <a href="https://www.renren.io/" target="_blank">
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <a href="https://gitee.com/renrenio/renren-security" target="_blank">
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="4" @click="fullscreenHandle()">
+          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+        </el-menu-item>
+        <el-menu-item index="5" class="aui-navbar__avatar">
+          <el-dropdown placement="bottom" :show-timeout="0">
+            <span class="el-dropdown-link">
+              <img src="~@/assets/img/avatar.png">
+              <span>{{ $store.state.user.name }}</span>
+              <i class="el-icon-arrow-down"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <!-- 弹窗, 修改密码 -->
+    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+  </nav>
+</template>
+<script>
+import screenfull from 'screenfull'
+import UpdatePassword from './main-navbar-update-password'
+import { clearLoginInfo } from '@/utils'
+export default {
+  inject: ['refresh'],
+  data () {
+    return {
+      updatePasswordVisible: false,
+      messageTip: false
+    }
+  },
+  components: {
+    UpdatePassword
+  },
+  methods: {
+    // 全屏
+    fullscreenHandle () {
+      if (!screenfull.enabled) {
+        return this.$message({
+          message: this.$t('fullscreen.prompt'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      screenfull.toggle()
+    },
+    // 修改密码
+    updatePasswordHandle () {
+      this.updatePasswordVisible = true
+      this.$nextTick(() => {
+        this.$refs.updatePassword.init()
+      })
+    },
+    // 退出
+    logoutHandle () {
+      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.post('/logout').then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          clearLoginInfo()
+          this.$router.push({ name: 'login' })
+        }).catch(() => {})
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/main-sidebar-sub-menu.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+    <template slot="title">
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+      <span>{{ menu.name }}</span>
+    </template>
+    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+  </el-submenu>
+  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
+    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+    <span>{{ menu.name }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+import SubMenu from './main-sidebar-sub-menu'
+export default {
+  name: 'sub-menu',
+  props: {
+    menu: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    SubMenu
+  },
+  methods: {
+    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+    gotoRouteHandle (menuId) {
+      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+      if (route) {
+        this.$router.push({ name: route.name })
+      }
+    }
+  }
+}
+</script>

src/views/main-sidebar.vue

@@ -0,0 +1,30 @@
+<template>
+  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
+    <div class="aui-sidebar__inner">
+      <el-menu
+        :default-active="$store.state.sidebarMenuActiveName"
+        :collapse="$store.state.sidebarFold"
+        :unique-opened="true"
+        :collapseTransition="false"
+        class="aui-sidebar__menu">
+        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
+      </el-menu>
+    </div>
+  </aside>
+</template>
+
+<script>
+import SubMenu from './main-sidebar-sub-menu'
+export default {
+  data () {
+    return {
+    }
+  },
+  components: {
+    SubMenu
+  },
+  created () {
+    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+  }
+}
+</script>

src/views/main.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
+    <template v-if="!loading">
+      <main-navbar />
+      <main-sidebar />
+      <div class="aui-content__wrapper">
+        <main-content v-if="!$store.state.contentIsNeedRefresh" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import MainNavbar from './main-navbar'
+import MainSidebar from './main-sidebar'
+import MainContent from './main-content'
+import debounce from 'lodash/debounce'
+export default {
+  provide () {
+    return {
+      // 刷新
+      refresh () {
+        this.$store.state.contentIsNeedRefresh = true
+        this.$nextTick(() => {
+          this.$store.state.contentIsNeedRefresh = false
+        })
+      }
+    }
+  },
+  data () {
+    return {
+      loading: true
+    }
+  },
+  components: {
+    MainNavbar,
+    MainSidebar,
+    MainContent
+  },
+  watch: {
+    $route: 'routeHandle'
+  },
+  created () {
+    this.windowResizeHandle()
+    this.routeHandle(this.$route)
+    Promise.all([
+      this.getUserInfo(),
+      this.getPermissions()
+    ]).then(() => {
+      this.loading = false
+    })
+  },
+  methods: {
+    // 窗口改变大小
+    windowResizeHandle () {
+      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      window.addEventListener('resize', debounce(() => {
+        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
+      }, 150))
+    },
+    // 路由, 监听
+    routeHandle (route) {
+      if (!route.meta.isTab) {
+        return false
+      }
+      var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
+      if (!tab) {
+        tab = {
+          ...window.SITE_CONFIG['contentTabDefault'],
+          ...route.meta,
+          'name': route.name,
+          'params': { ...route.params },
+          'query': { ...route.query }
+        }
+        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
+      }
+      this.$store.state.sidebarMenuActiveName = tab.menuId
+      this.$store.state.contentTabsActiveName = tab.name
+    },
+    // 获取当前管理员信息
+    getUserInfo () {
+      return this.$http.get('/sys/user/info').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.$store.state.user.id = res.data.id
+        this.$store.state.user.name = res.data.username
+        this.$store.state.user.superAdmin = res.data.superAdmin
+      }).catch(() => {})
+    },
+    // 获取权限
+    getPermissions () {
+      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        window.SITE_CONFIG['permissions'] = res.data
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/modules/home.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-home">
+      <h3>项目介绍</h3>
+      <ul>
+        <li>renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案</li>
+        <li>前后端分离，通过token进行数据交互，可独立部署</li>
+        <li>动态菜单，通过菜单管理统一管理访问路由</li>
+        <li>演示地址：<a href="http://demo.open.renren.io/renren-security" target="_blank">http://demo.open.renren.io/renren-security</a> (账号密码：admin/admin)</li>
+      </ul>
+      <h3>获取帮助</h3>
+      <ul>
+        <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
+        <li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
+        <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
+        <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
+      </ul>
+      <h3>官方微信群</h3>
+      <ul>
+        <li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
+        <li><img src="https://cdn.renren.io/f5cef202207132229319338.jpg" alt="微信群" /></li>
+      </ul>
+    </div>
+  </el-card>
+</template>
+
+<style>
+.mod-home {
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="beanName" :label="$t('schedule.beanName')">
+        <el-input v-model="dataForm.beanName" :placeholder="$t('schedule.beanNameTips')"></el-input>
+      </el-form-item>
+      <el-form-item prop="params" :label="$t('schedule.params')">
+        <el-input v-model="dataForm.params" :placeholder="$t('schedule.params')"></el-input>
+      </el-form-item>
+      <el-form-item prop="cronExpression" :label="$t('schedule.cronExpression')">
+        <el-popover v-model="cronPopover">
+          <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
+          <el-input slot="reference" @click="cronPopover=true" v-model="dataForm.cronExpression" :placeholder="$t('schedule.cronExpressionTips')"></el-input>
+        </el-popover>
+      </el-form-item>
+      <el-form-item prop="remark"  :label="$t('schedule.remark')">
+        <el-input v-model="dataForm.remark" :placeholder="$t('schedule.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { cron } from 'vue-cron'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        beanName: '',
+        params: '',
+        cronExpression: '',
+        remark: '',
+        status: 0
+      },
+      cronPopover: false
+    }
+  },
+  components: {
+    cron
+  },
+  computed: {
+    dataRule () {
+      return {
+        beanName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        cronExpression: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    changeCron (val) {
+      this.dataForm.cronExpression = val
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/schedule/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = res.data
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/schedule', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/job/schedule-log.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="$t('schedule.log')" :close-on-click-modal="false" :close-on-press-escape="false" width="75%">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item>
+        <el-input v-model="dataForm.jobId" :placeholder="$t('schedule.jobId')" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="dataListLoading"
+      :data="dataList"
+      border
+      @sort-change="dataListSortChangeHandle"
+      height="460"
+      style="width: 100%;">
+      <el-table-column prop="jobId" :label="$t('schedule.jobId')" header-align="center" align="center" width="80"></el-table-column>
+      <el-table-column prop="beanName" :label="$t('schedule.beanName')" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="params" :label="$t('schedule.params')" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="status" :label="$t('schedule.status')" header-align="center" align="center">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status === 1" size="small">{{ $t('schedule.statusLog1') }}</el-tag>
+          <el-tag v-else type="danger" size="small" @click.native="showErrorInfo(scope.row.id)" style="cursor: pointer;">{{ $t('schedule.statusLog0') }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="times" :label="$t('schedule.times')" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="createDate" :label="$t('schedule.createDate')" header-align="center" align="center" width="180"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="limit"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="pageSizeChangeHandle"
+      @current-change="pageCurrentChangeHandle">
+    </el-pagination>
+  </el-dialog>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      visible: false,
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/scheduleLog/page',
+        getDataListIsPage: true
+      },
+      dataForm: {
+        jobId: ''
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.getDataList()
+    },
+    // 失败信息
+    showErrorInfo (id) {
+      this.$http.get(`/sys/scheduleLog/${id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.$alert(res.data.error)
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/modules/job/schedule.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-job__schedule">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.beanName" :placeholder="$t('schedule.beanName')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:pause')" type="danger" @click="pauseHandle()">{{ $t('schedule.pauseBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:resume')" type="danger" @click="resumeHandle()">{{ $t('schedule.resumeBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:run')" type="danger" @click="runHandle()">{{ $t('schedule.runBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:schedule:log')" type="success" @click="logHandle()">{{ $t('schedule.log') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="beanName" :label="$t('schedule.beanName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="params" :label="$t('schedule.params')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="cronExpression" :label="$t('schedule.cronExpression')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('schedule.remark')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="status" :label="$t('schedule.status')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" size="small">{{ $t('schedule.status1') }}</el-tag>
+            <el-tag v-else size="small" type="danger">{{ $t('schedule.status0') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:schedule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:schedule:pause')" type="text" size="small" @click="pauseHandle(scope.row.id)">{{ $t('schedule.pause') }}</el-button>
+            <el-button v-if="$hasPermission('sys:schedule:resume')" type="text" size="small" @click="resumeHandle(scope.row.id)">{{ $t('schedule.resume') }}</el-button>
+            <el-button v-if="$hasPermission('sys:schedule:run')" type="text" size="small" @click="runHandle(scope.row.id)">{{ $t('schedule.run') }}</el-button>
+            <el-button v-if="$hasPermission('sys:schedule:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <!-- 弹窗, 日志列表 -->
+      <log v-if="logVisible" ref="log"></log>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './schedule-add-or-update'
+import Log from './schedule-log'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/schedule/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/schedule',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        beanName: ''
+      },
+      logVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate,
+    Log
+  },
+  methods: {
+    // 暂停
+    pauseHandle (id) {
+      if (!id && this.dataListSelections.length <= 0) {
+        return this.$message({
+          message: this.$t('prompt.deleteBatch'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.pause') }), this.$t('prompt.title'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.put('/sys/schedule/pause', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        }).catch(() => {})
+      }).catch(() => {})
+    },
+    // 恢复
+    resumeHandle (id) {
+      if (!id && this.dataListSelections.length <= 0) {
+        return this.$message({
+          message: this.$t('prompt.deleteBatch'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.resume') }), this.$t('prompt.title'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.put('/sys/schedule/resume', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        }).catch(() => {})
+      }).catch(() => {})
+    },
+    // 执行
+    runHandle (id) {
+      if (!id && this.dataListSelections.length <= 0) {
+        return this.$message({
+          message: this.$t('prompt.deleteBatch'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('schedule.run') }), this.$t('prompt.title'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.put('/sys/schedule/run', id ? [id] : this.dataListSelections.map(item => item.id)).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        }).catch(() => {})
+      }).catch(() => {})
+    },
+    // 日志列表
+    logHandle () {
+      this.logVisible = true
+      this.$nextTick(() => {
+        this.$refs.log.init()
+      })
+    }
+  }
+}
+</script>

src/views/modules/oss/oss-config.vue

@@ -0,0 +1,225 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="$t('oss.config')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item :label="$t('oss.type')" size="mini">
+        <el-radio-group v-model="dataForm.type">
+          <el-radio :label="1">{{ $t('oss.type1') }}</el-radio>
+          <el-radio :label="2">{{ $t('oss.type2') }}</el-radio>
+          <el-radio :label="3">{{ $t('oss.type3') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="dataForm.type === 1">
+        <el-form-item size="mini">
+          <a href="https://s.qiniu.com/7Rfaym" target="_blank">免费申请(七牛)10GB储存空间</a>
+        </el-form-item>
+        <el-form-item prop="qiniuDomain" :label="$t('oss.qiniuDomain')">
+          <el-input v-model="dataForm.qiniuDomain" :placeholder="$t('oss.qiniuDomainTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qiniuPrefix" :label="$t('oss.qiniuPrefix')">
+          <el-input v-model="dataForm.qiniuPrefix" :placeholder="$t('oss.qiniuPrefixTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qiniuAccessKey" :label="$t('oss.qiniuAccessKey')">
+          <el-input v-model="dataForm.qiniuAccessKey" :placeholder="$t('oss.qiniuAccessKeyTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qiniuSecretKey" :label="$t('oss.qiniuSecretKey')">
+          <el-input v-model="dataForm.qiniuSecretKey" :placeholder="$t('oss.qiniuSecretKeyTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qiniuBucketName" :label="$t('oss.qiniuBucketName')">
+          <el-input v-model="dataForm.qiniuBucketName" :placeholder="$t('oss.qiniuBucketNameTips')"></el-input>
+        </el-form-item>
+      </template>
+      <template v-else-if="dataForm.type === 2">
+        <el-form-item size="mini">
+          <a href="https://www.aliyun.com/minisite/goods?userCode=y93lfwbg" target="_blank">免费领取阿里云优惠券</a>
+        </el-form-item>
+        <el-form-item prop="aliyunDomain" :label="$t('oss.aliyunDomain')">
+          <el-input v-model="dataForm.aliyunDomain" :placeholder="$t('oss.aliyunDomainTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="aliyunPrefix" :label="$t('oss.aliyunPrefix')">
+          <el-input v-model="dataForm.aliyunPrefix" :placeholder="$t('oss.aliyunPrefixTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="aliyunEndPoint" :label="$t('oss.aliyunEndPoint')">
+          <el-input v-model="dataForm.aliyunEndPoint" :placeholder="$t('oss.aliyunEndPointTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="aliyunAccessKeyId" :label="$t('oss.aliyunAccessKeyId')">
+          <el-input v-model="dataForm.aliyunAccessKeyId" :placeholder="$t('oss.aliyunAccessKeyIdTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="aliyunAccessKeySecret" :label="$t('oss.aliyunAccessKeySecret')">
+          <el-input v-model="dataForm.aliyunAccessKeySecret" :placeholder="$t('oss.aliyunAccessKeySecretTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="aliyunBucketName" :label="$t('oss.aliyunBucketName')">
+          <el-input v-model="dataForm.aliyunBucketName" :placeholder="$t('oss.aliyunBucketNameTips')"></el-input>
+        </el-form-item>
+      </template>
+      <template v-else-if="dataForm.type === 3">
+        <el-form-item size="mini">
+          <a href="https://curl.qcloud.com/zt3xdYbZ" target="_blank">免费领取腾讯云优惠券</a>
+        </el-form-item>
+        <el-form-item prop="qcloudDomain" :label="$t('oss.qcloudDomain')">
+          <el-input v-model="dataForm.qcloudDomain" :placeholder="$t('oss.qcloudDomainTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudPrefix" :label="$t('oss.qcloudPrefix')">
+          <el-input v-model="dataForm.qcloudPrefix" :placeholder="$t('oss.qcloudPrefixTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudAppId" :label="$t('oss.qcloudAppId')">
+          <el-input v-model="dataForm.qcloudAppId" :placeholder="$t('oss.qcloudAppIdTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudSecretId" :label="$t('oss.qcloudSecretId')">
+          <el-input v-model="dataForm.qcloudSecretId" :placeholder="$t('oss.qcloudSecretIdTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudSecretKey" :label="$t('oss.qcloudSecretKey')">
+          <el-input v-model="dataForm.qcloudSecretKey" :placeholder="$t('oss.qcloudSecretKeyTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudBucketName" :label="$t('oss.qcloudBucketName')">
+          <el-input v-model="dataForm.qcloudBucketName" :placeholder="$t('oss.qcloudBucketNameTips')"></el-input>
+        </el-form-item>
+        <el-form-item prop="qcloudRegion" :label="$t('oss.qcloudRegion')">
+          <el-select v-model="dataForm.qcloudRegion" clearable :placeholder="$t('oss.qcloudRegionTips')" class="w-percent-100">
+            <el-option value="ap-beijing-1" :label="$t('oss.qcloudRegionBeijing1')"></el-option>
+            <el-option value="ap-beijing" :label="$t('oss.qcloudRegionBeijing')"></el-option>
+            <el-option value="ap-shanghai" :label="$t('oss.qcloudRegionShanghai')"></el-option>
+            <el-option value="ap-guangzhou" :label="$t('oss.qcloudRegionGuangzhou')"></el-option>
+            <el-option value="ap-chengdu" :label="$t('oss.qcloudRegionChengdu')"></el-option>
+            <el-option value="ap-chongqing" :label="$t('oss.qcloudRegionChongqing')"></el-option>
+            <el-option value="ap-singapore" :label="$t('oss.qcloudRegionSingapore')"></el-option>
+            <el-option value="ap-hongkong" :label="$t('oss.qcloudRegionHongkong')"></el-option>
+            <el-option value="na-toronto" :label="$t('oss.qcloudRegionToronto')"></el-option>
+            <el-option value="eu-frankfurt" :label="$t('oss.qcloudRegionFrankfurt')"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        type: 0,
+        qiniuDomain: '',
+        qiniuPrefix: '',
+        qiniuAccessKey: '',
+        qiniuSecretKey: '',
+        qiniuBucketName: '',
+        aliyunDomain: '',
+        aliyunPrefix: '',
+        aliyunEndPoint: '',
+        aliyunAccessKeyId: '',
+        aliyunAccessKeySecret: '',
+        aliyunBucketName: '',
+        qcloudDomain: '',
+        qcloudPrefix: '',
+        qcloudAppId: 0,
+        qcloudSecretId: '',
+        qcloudSecretKey: '',
+        qcloudBucketName: '',
+        qcloudRegion: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        qiniuDomain: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qiniuAccessKey: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qiniuSecretKey: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qiniuBucketName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        aliyunDomain: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        aliyunEndPoint: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        aliyunAccessKeyId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        aliyunAccessKeySecret: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        aliyunBucketName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudDomain: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudAppId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudSecretId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudSecretKey: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudBucketName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        qcloudRegion: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'dataForm.type' (val) {
+      this.$refs['dataForm'].clearValidate()
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.getInfo()
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get('/sys/oss/info').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = res.data
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http.post('/sys/oss', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/oss/oss-upload.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="$t('oss.upload')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-upload
+      :action="url"
+      :file-list="fileList"
+      drag
+      multiple
+      :before-upload="beforeUploadHandle"
+      :on-success="successHandle"
+      class="text-center">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text" v-html="$t('upload.text')"></div>
+      <div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'jpg、png、gif' }) }}</div>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+export default {
+  data () {
+    return {
+      visible: false,
+      url: '',
+      num: 0,
+      fileList: []
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.url = `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
+      this.num = 0
+      this.fileList = []
+    },
+    // 上传之前
+    beforeUploadHandle (file) {
+      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
+        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
+        return false
+      }
+      this.num++
+    },
+    // 上传成功
+    successHandle (res, file, fileList) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.fileList = fileList
+      this.num--
+      if (this.num === 0) {
+        this.$message({
+          message: this.$t('prompt.success'),
+          type: 'success',
+          duration: 500,
+          onClose: () => {
+            this.visible = false
+            this.$emit('refreshDataList')
+          }
+        })
+      }
+    }
+  }
+}
+</script>

src/views/modules/oss/oss.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-oss__oss">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-button type="primary" @click="configHandle()">{{ $t('oss.config') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="uploadHandle()">{{ $t('oss.upload') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="url" :label="$t('oss.url')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('oss.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 云存储配置 -->
+      <config v-if="configVisible" ref="config"></config>
+      <!-- 弹窗, 上传文件 -->
+      <upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import Config from './oss-config'
+import Upload from './oss-upload'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/oss/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/oss',
+        deleteIsBatch: true
+      },
+      dataForm: {},
+      configVisible: false,
+      uploadVisible: false
+    }
+  },
+  components: {
+    Config,
+    Upload
+  },
+  methods: {
+    // 云存储配置
+    configHandle () {
+      this.configVisible = true
+      this.$nextTick(() => {
+        this.$refs.config.init()
+      })
+    },
+    // 上传文件
+    uploadHandle () {
+      this.uploadVisible = true
+      this.$nextTick(() => {
+        this.$refs.upload.init()
+      })
+    }
+  }
+}
+</script>

src/views/modules/sys/dept-add-or-update.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="name" :label="$t('dept.name')">
+        <el-input v-model="dataForm.name" :placeholder="$t('dept.name')"></el-input>
+      </el-form-item>
+      <el-form-item prop="parentName" :label="$t('dept.parentName')" class="dept-list">
+        <el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">
+          <el-tree
+            :data="deptList"
+            :props="{ label: 'name', children: 'children' }"
+            node-key="id"
+            ref="deptListTree"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            accordion
+            @current-change="deptListTreeCurrentChangeHandle">
+          </el-tree>
+        </el-popover>
+        <el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" :placeholder="$t('dept.parentName')">
+          <i
+            v-if="$store.state.user.superAdmin === 1 && dataForm.pid !== '0'"
+            slot="suffix"
+            @click.stop="deptListTreeSetDefaultHandle()"
+            class="el-icon-circle-close el-input__icon">
+          </i>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="sort" :label="$t('dept.sort')">
+        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('dept.sort')"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      deptList: [],
+      deptListVisible: false,
+      dataForm: {
+        id: '',
+        name: '',
+        pid: '',
+        parentName: '',
+        sort: 0
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.getDeptList().then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          } else if (this.$store.state.user.superAdmin === 1) {
+            this.deptListTreeSetDefaultHandle()
+          }
+        })
+      })
+    },
+    // 获取部门列表
+    getDeptList () {
+      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.deptList = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/dept/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        if (this.dataForm.pid === '0') {
+          return this.deptListTreeSetDefaultHandle()
+        }
+        this.$refs.deptListTree.setCurrentKey(this.dataForm.pid)
+      }).catch(() => {})
+    },
+    // 上级部门树, 设置默认值
+    deptListTreeSetDefaultHandle () {
+      this.dataForm.pid = '0'
+      this.dataForm.parentName = this.$t('dept.parentNameDefault')
+    },
+    // 上级部门树, 选中
+    deptListTreeCurrentChangeHandle (data) {
+      this.dataForm.pid = data.id
+      this.dataForm.parentName = data.name
+      this.deptListVisible = false
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dept', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__dept {
+  .dept-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/modules/sys/dept.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__dept">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:dept:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
+        <el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
+        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:dept:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './dept-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/dept/list',
+        deleteURL: '/sys/dept'
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

src/views/modules/sys/dict-data-add-or-update.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="dictValue" :label="$t('dict.dictValue')">
+        <el-input v-model="dataForm.dictValue" :placeholder="$t('dict.dictValue')"></el-input>
+      </el-form-item>
+      <el-form-item prop="dictLabel" :label="$t('dict.dictLabel')">
+        <el-input v-model="dataForm.dictLabel" :placeholder="$t('dict.dictLabel')"></el-input>
+      </el-form-item>
+      <el-form-item prop="sort" :label="$t('dict.sort')">
+        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('dict.sort')"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="remark" :label="$t('dict.remark')">
+        <el-input v-model="dataForm.remark" :placeholder="$t('dict.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        dictTypeId: '',
+        dictLabel: '',
+        dictValue: '',
+        sort: 0,
+        remark: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        dictLabel: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        dictValue: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/dict/data/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dict/data', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/sys/dict-data.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__dict">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.dictValue" :placeholder="$t('dict.dictValue')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.dictLabel" :placeholder="$t('dict.dictLabel')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:dict:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:dict:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="dictValue" :label="$t('dict.dictValue')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="dictLabel" :label="$t('dict.dictLabel')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="sort" :label="$t('dict.sort')" sortable="custom" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('dict.remark')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column  :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:dict:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:dict:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './dict-data-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        createdIsNeed: false,
+        getDataListURL: '/sys/dict/data/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/dict/data',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        dictTypeId: '0',
+        dictLabel: '',
+        dictValue: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  created () {
+    this.dataForm.dictTypeId = this.$route.params.dictTypeId || '0'
+    this.getDataList()
+  },
+  methods: {
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm.id = id
+        this.$refs.addOrUpdate.dataForm.dictTypeId = this.dataForm.dictTypeId
+        this.$refs.addOrUpdate.init()
+      })
+    }
+  }
+}
+</script>

src/views/modules/sys/dict-type-add-or-update.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="dictName" :label="$t('dict.dictName')">
+        <el-input v-model="dataForm.dictName" :placeholder="$t('dict.dictName')"></el-input>
+      </el-form-item>
+      <el-form-item prop="dictType" :label="$t('dict.dictType')">
+        <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')"></el-input>
+      </el-form-item>
+      <el-form-item prop="sort" :label="$t('dict.sort')">
+        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('dict.sort')"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="remark" :label="$t('dict.remark')">
+        <el-input v-model="dataForm.remark" :placeholder="$t('dict.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        dictName: '',
+        dictType: '',
+        sort: 0,
+        remark: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        dictName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        dictType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/dict/type/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dict/type', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/sys/dict-type.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__dict">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.dictName" :placeholder="$t('dict.dictName')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:dict:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:dict:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="dictName" :label="$t('dict.dictName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="dictType" :label="$t('dict.dictType')" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="childHandle(scope.row)">{{ scope.row.dictType }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" :label="$t('dict.sort')" sortable="custom" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('dict.remark')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('dict.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column  :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:dict:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:dict:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './dict-type-add-or-update'
+import { addDynamicRoute } from '@/router'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/dict/type/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/dict/type',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: '0',
+        dictName: '',
+        dictType: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 子级
+    childHandle (row) {
+      // 路由参数
+      const routeParams = {
+        routeName: `${this.$route.name}__${row.id}`,
+        title: `${this.$route.meta.title} - ${row.dictType}`,
+        path: 'sys/dict-data',
+        params: {
+          dictTypeId: row.id
+        }
+      }
+      // 动态路由
+      addDynamicRoute(routeParams, this.$router)
+    }
+  }
+}
+</script>

src/views/modules/sys/log-error.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__log-error">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
+        <el-table-column prop="requestUri" :label="$t('logError.requestUri')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="requestMethod" :label="$t('logError.requestMethod')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="requestParams" :label="$t('logError.requestParams')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="ip" :label="$t('logError.ip')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="userAgent" :label="$t('logError.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('logError.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="infoHandle(scope.row.errorInfo)">{{ $t('logError.errorInfo') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/log/error/page',
+        getDataListIsPage: true,
+        exportURL: '/sys/log/error/export'
+      }
+    }
+  },
+  methods: {
+    // 异常信息
+    infoHandle (info) {
+      this.$alert(info, this.$t('logError.errorInfo'), {
+        customClass: 'mod-sys__log-error-view-info'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__log-error {
+  &-view-info {
+    width: 80%;
+  }
+}
+</style>

src/views/modules/sys/log-login.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__log-login">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.creatorName" :placeholder="$t('logLogin.creatorName')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="dataForm.status" :placeholder="$t('logLogin.status')" clearable>
+            <el-option :label="$t('logLogin.status0')" :value="0"></el-option>
+            <el-option :label="$t('logLogin.status1')" :value="1"></el-option>
+            <el-option :label="$t('logLogin.status2')" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
+        <el-table-column prop="creatorName" :label="$t('logLogin.creatorName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="operation" :label="$t('logLogin.operation')" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.operation === 0 ? $t('logLogin.operation0') : $t('logLogin.operation1') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" :label="$t('logLogin.status')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logLogin.status0') }}</el-tag>
+            <el-tag v-else-if="scope.row.status === 1" size="small" type="success">{{ $t('logLogin.status1') }}</el-tag>
+            <el-tag v-else size="small" type="warning">{{ $t('logLogin.status2') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ip" :label="$t('logLogin.ip')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="userAgent" :label="$t('logLogin.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('logLogin.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/log/login/page',
+        getDataListIsPage: true,
+        exportURL: '/sys/log/login/export'
+      },
+      dataForm: {
+        creatorName: '',
+        status: ''
+      }
+    }
+  }
+}
+</script>

src/views/modules/sys/log-operation.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__log-operation">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-select v-model="dataForm.status" :placeholder="$t('logOperation.status')" clearable>
+            <el-option :label="$t('logOperation.status0')" :value="0"></el-option>
+            <el-option :label="$t('logOperation.status1')" :value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
+        <el-table-column prop="creatorName" :label="$t('logOperation.creatorName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="operation" :label="$t('logOperation.operation')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="requestUri" :label="$t('logOperation.requestUri')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="requestMethod" :label="$t('logOperation.requestMethod')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="requestParams" :label="$t('logOperation.requestParams')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="requestTime" :label="$t('logOperation.requestTime')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ `${scope.row.requestTime}ms` }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" :label="$t('logOperation.status')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logOperation.status0') }}</el-tag>
+            <el-tag v-else size="small" type="success">{{ $t('logOperation.status1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ip" :label="$t('logOperation.ip')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="userAgent" :label="$t('logOperation.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('logOperation.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/log/operation/page',
+        getDataListIsPage: true,
+        exportURL: '/sys/log/operation/export'
+      },
+      dataForm: {
+        status: ''
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,221 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="type" :label="$t('menu.type')" size="mini">
+        <el-radio-group v-model="dataForm.type" :disabled="!!dataForm.id">
+          <el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
+          <el-radio :label="1">{{ $t('menu.type1') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="name" :label="$t('menu.name')">
+        <el-input v-model="dataForm.name" :placeholder="$t('menu.name')"></el-input>
+      </el-form-item>
+      <el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
+        <el-popover v-model="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click">
+          <el-tree
+            :data="menuList"
+            :props="{ label: 'name', children: 'children' }"
+            node-key="id"
+            ref="menuListTree"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            accordion
+            @current-change="menuListTreeCurrentChangeHandle">
+          </el-tree>
+        </el-popover>
+        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')">
+          <i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
+        <el-input v-model="dataForm.url" :placeholder="$t('menu.url')"></el-input>
+      </el-form-item>
+      <el-form-item prop="sort" :label="$t('menu.sort')">
+        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="permissions" :label="$t('menu.permissions')">
+        <el-input v-model="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
+        <el-popover v-model="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover">
+          <div class="mod-sys__menu-icon-inner">
+            <div class="mod-sys__menu-icon-list">
+              <el-button
+                v-for="(item, index) in iconList"
+                :key="index"
+                @click="iconListCurrentChangeHandle(item)"
+                :class="{ 'is-active': dataForm.icon === item }">
+                <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
+              </el-button>
+            </div>
+          </div>
+        </el-popover>
+        <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { getIconList } from '@/utils'
+export default {
+  data () {
+    return {
+      visible: false,
+      menuList: [],
+      menuListVisible: false,
+      iconList: [],
+      iconListVisible: false,
+      dataForm: {
+        id: '',
+        type: 0,
+        name: '',
+        pid: '0',
+        parentName: '',
+        url: '',
+        permissions: '',
+        sort: 0,
+        icon: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'dataForm.type' (val) {
+      this.$refs['dataForm'].clearValidate()
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.iconList = getIconList()
+        this.dataForm.parentName = this.$t('menu.parentNameDefault')
+        this.getMenuList().then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      })
+    },
+    // 获取菜单列表
+    getMenuList () {
+      return this.$http.get('/sys/menu/list?type=0').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.menuList = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/menu/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        if (this.dataForm.pid === '0') {
+          return this.deptListTreeSetDefaultHandle()
+        }
+        this.$refs.menuListTree.setCurrentKey(this.dataForm.pid)
+      }).catch(() => {})
+    },
+    // 上级菜单树, 设置默认值
+    deptListTreeSetDefaultHandle () {
+      this.dataForm.pid = '0'
+      this.dataForm.parentName = this.$t('menu.parentNameDefault')
+    },
+    // 上级菜单树, 选中
+    menuListTreeCurrentChangeHandle (data) {
+      this.dataForm.pid = data.id
+      this.dataForm.parentName = data.name
+      this.menuListVisible = false
+    },
+    // 图标, 选中
+    iconListCurrentChangeHandle (icon) {
+      this.dataForm.icon = icon
+      this.iconListVisible = false
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/menu', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__menu {
+  .menu-list,
+  .icon-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+    > .el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>

src/views/modules/sys/menu.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
+        <el-table-column prop="name" :label="$t('menu.name')" header-align="center" min-width="150"></el-table-column>
+        <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
+          <template slot-scope="scope">
+            <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.type === 0" size="small">{{ $t('menu.type0') }}</el-tag>
+            <el-tag v-else size="small" type="info">{{ $t('menu.type1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" :label="$t('menu.sort')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150" :show-overflow-tooltip="true" ></el-table-column>
+        <el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column  :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './menu-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/menu/list',
+        deleteURL: '/sys/menu'
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

src/views/modules/sys/params-add-or-update.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="paramCode" :label="$t('params.paramCode')">
+        <el-input v-model="dataForm.paramCode" :placeholder="$t('params.paramCode')"></el-input>
+      </el-form-item>
+      <el-form-item prop="paramValue" :label="$t('params.paramValue')">
+        <el-input v-model="dataForm.paramValue" :placeholder="$t('params.paramValue')"></el-input>
+      </el-form-item>
+      <el-form-item prop="remark" :label="$t('params.remark')">
+        <el-input v-model="dataForm.remark" :placeholder="$t('params.remark')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        paramCode: '',
+        paramValue: '',
+        remark: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        paramCode: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        paramValue: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/params/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/params', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/sys/params.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__params">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.paramCode" :placeholder="$t('params.paramCode')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:params:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:params:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="paramCode" :label="$t('params.paramCode')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="paramValue" :label="$t('params.paramValue')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('params.remark')" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:params:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:params:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './params-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/params/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/params',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        paramCode: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

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

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="name" :label="$t('role.name')">
+        <el-input v-model="dataForm.name" :placeholder="$t('role.name')"></el-input>
+      </el-form-item>
+      <el-form-item prop="remark" :label="$t('role.remark')">
+        <el-input v-model="dataForm.remark" :placeholder="$t('role.remark')"></el-input>
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item size="mini" :label="$t('role.menuList')">
+            <el-tree
+              :data="menuList"
+              :props="{ label: 'name', children: 'children' }"
+              node-key="id"
+              ref="menuListTree"
+              accordion
+              show-checkbox>
+            </el-tree>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item size="mini" :label="$t('role.deptList')">
+            <el-tree
+              :data="deptList"
+              :props="{ label: 'name', children: 'children' }"
+              node-key="id"
+              ref="deptListTree"
+              accordion
+              show-checkbox>
+            </el-tree>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      menuList: [],
+      deptList: [],
+      dataForm: {
+        id: '',
+        name: '',
+        menuIdList: [],
+        deptIdList: [],
+        remark: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.$refs.menuListTree.setCheckedKeys([])
+        this.$refs.deptListTree.setCheckedKeys([])
+        Promise.all([
+          this.getMenuList(),
+          this.getDeptList()
+        ]).then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      })
+    },
+    // 获取菜单列表
+    getMenuList () {
+      return this.$http.get('/sys/menu/select').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.menuList = res.data
+      }).catch(() => {})
+    },
+    // 获取部门列表
+    getDeptList () {
+      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.deptList = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/role/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        this.dataForm.menuIdList.forEach(item => this.$refs.menuListTree.setChecked(item, true))
+        this.$refs.deptListTree.setCheckedKeys(this.dataForm.deptIdList)
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.dataForm.menuIdList = [
+          ...this.$refs.menuListTree.getHalfCheckedKeys(),
+          ...this.$refs.menuListTree.getCheckedKeys()
+        ]
+        this.dataForm.deptIdList = this.$refs.deptListTree.getCheckedKeys()
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/role', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/modules/sys/role.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__role">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.name" :placeholder="$t('role.name')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:role:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:role:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="name" :label="$t('role.name')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('role.remark')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="createDate" :label="$t('role.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './role-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/role/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/role',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        name: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

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

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="username" :label="$t('user.username')">
+        <el-input v-model="dataForm.username" :placeholder="$t('user.username')"></el-input>
+      </el-form-item>
+      <el-form-item prop="deptName" :label="$t('user.deptName')">
+        <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :dept-name.sync="dataForm.deptName"></ren-dept-tree>
+      </el-form-item>
+      <el-form-item prop="password" :label="$t('user.password')" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.password" type="password" :placeholder="$t('user.password')"></el-input>
+      </el-form-item>
+      <el-form-item prop="confirmPassword" :label="$t('user.confirmPassword')" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('user.confirmPassword')"></el-input>
+      </el-form-item>
+      <el-form-item prop="realName" :label="$t('user.realName')">
+        <el-input v-model="dataForm.realName" :placeholder="$t('user.realName')"></el-input>
+      </el-form-item>
+      <el-form-item prop="gender" :label="$t('user.gender')">
+        <ren-radio-group v-model="dataForm.gender" dict-type="gender"></ren-radio-group>
+      </el-form-item>
+      <el-form-item prop="email" :label="$t('user.email')">
+        <el-input v-model="dataForm.email" :placeholder="$t('user.email')"></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" :label="$t('user.mobile')">
+        <el-input v-model="dataForm.mobile" :placeholder="$t('user.mobile')"></el-input>
+      </el-form-item>
+      <el-form-item prop="roleIdList" :label="$t('user.roleIdList')" class="role-list">
+        <el-select v-model="dataForm.roleIdList" multiple :placeholder="$t('user.roleIdList')">
+          <el-option v-for="role in roleList" :key="role.id" :label="role.name" :value="role.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="status" :label="$t('user.status')" size="mini">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="0">{{ $t('user.status0') }}</el-radio>
+          <el-radio :label="1">{{ $t('user.status1') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { isEmail, isMobile } from '@/utils/validate'
+export default {
+  data () {
+    return {
+      visible: false,
+      roleList: [],
+      roleIdListDefault: [],
+      dataForm: {
+        id: '',
+        username: '',
+        deptId: '',
+        deptName: '',
+        password: '',
+        confirmPassword: '',
+        realName: '',
+        gender: 0,
+        email: '',
+        mobile: '',
+        roleIdList: [],
+        status: 1
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      var validatePassword = (rule, value, callback) => {
+        if (!this.dataForm.id && !/\S/.test(value)) {
+          return callback(new Error(this.$t('validate.required')))
+        }
+        callback()
+      }
+      var validateConfirmPassword = (rule, value, callback) => {
+        if (!this.dataForm.id && !/\S/.test(value)) {
+          return callback(new Error(this.$t('validate.required')))
+        }
+        if (this.dataForm.password !== value) {
+          return callback(new Error(this.$t('user.validate.confirmPassword')))
+        }
+        callback()
+      }
+      var validateEmail = (rule, value, callback) => {
+        if (value && !isEmail(value)) {
+          return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.email') })))
+        }
+        callback()
+      }
+      var validateMobile = (rule, value, callback) => {
+        if (value && !isMobile(value)) {
+          return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.mobile') })))
+        }
+        callback()
+      }
+      return {
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        deptName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        password: [
+          { validator: validatePassword, trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { validator: validateConfirmPassword, trigger: 'blur' }
+        ],
+        realName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        email: [
+          { validator: validateEmail, trigger: 'blur' }
+        ],
+        mobile: [
+          { validator: validateMobile, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.dataForm.deptId = ''
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.roleIdListDefault = []
+        Promise.all([
+          this.getRoleList()
+        ]).then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      })
+    },
+    // 获取角色列表
+    getRoleList () {
+      return this.$http.get('/sys/role/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.roleList = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/sys/user/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data,
+          roleIdList: []
+        }
+        // 角色配置, 区分是否为默认角色
+        for (var i = 0; i < res.data.roleIdList.length; i++) {
+          if (this.roleList.filter(item => item.id === res.data.roleIdList[i])[0]) {
+            this.dataForm.roleIdList.push(res.data.roleIdList[i])
+            continue
+          }
+          this.roleIdListDefault.push(res.data.roleIdList[i])
+        }
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
+          ...this.dataForm,
+          roleIdList: [
+            ...this.dataForm.roleIdList,
+            ...this.roleIdListDefault
+          ]
+        }).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__user {
+  .role-list {
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/modules/sys/user.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__user">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <ren-select v-model="dataForm.gender" dict-type="gender" :placeholder="$t('user.gender')"></ren-select>
+        </el-form-item>
+        <el-form-item>
+          <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:user:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-if="$hasPermission('sys:user:export')" type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="email" :label="$t('user.email')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="gender" :label="$t('user.gender')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            {{ $getDictLabel("gender", scope.row.gender) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" :label="$t('user.status')" sortable="custom" header-align="center" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
+            <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createDate" :label="$t('user.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button v-if="$hasPermission('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button v-if="$hasPermission('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './user-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/user/page',
+        getDataListIsPage: true,
+        deleteURL: '/sys/user',
+        deleteIsBatch: true,
+        exportURL: '/sys/user/export'
+      },
+      dataForm: {
+        username: '',
+        deptId: '',
+        gender: ''
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  }
+}
+</script>

src/views/pages/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="aui-wrapper aui-page__not-found">
+    <div class="aui-content__wrapper">
+      <div class="aui-content">
+        <h2 class="title">400</h2>
+        <p class="desc" v-html="$t('notFound.desc')"></p>
+        <div class="btn-bar">
+          <el-button @click="$router.go(-1)">{{ $t('notFound.back') }}</el-button>
+          <el-button type="primary" @click="$router.push({ name: 'home' })">{{ $t('notFound.home') }}</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

src/views/pages/login.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="aui-wrapper aui-page__login">
+    <div class="aui-content__wrapper">
+      <main class="aui-content">
+        <div class="login-header">
+          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+        </div>
+        <div class="login-body">
+          <h3 class="login-title">{{ $t('login.title') }}</h3>
+          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
+            <el-form-item prop="username">
+              <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+                </span>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
+                </span>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="captcha">
+              <el-row :gutter="20">
+                <el-col :span="14">
+                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
+                    <span slot="prefix" class="el-input__icon">
+                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
+                    </span>
+                  </el-input>
+                </el-col>
+                <el-col :span="10" class="login-captcha">
+                  <img :src="captchaPath" @click="getCaptcha()">
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="login-footer">
+          <p>
+            <a href="http://demo.open.renren.io/renren-security" target="_blank">{{ $t('login.demo') }}</a>
+          </p>
+          <p><a href="https://www.renren.io/" target="_blank">{{ $t('login.copyright') }}</a>2022 © renren.io</p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import { getUUID } from '@/utils'
+export default {
+  data () {
+    return {
+      captchaPath: '',
+      dataForm: {
+        username: 'admin',
+        password: 'admin',
+        uuid: '',
+        captcha: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        captcha: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created () {
+    this.getCaptcha()
+  },
+  methods: {
+    // 获取验证码
+    getCaptcha () {
+      this.dataForm.uuid = getUUID()
+      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.getCaptcha()
+            return this.$message.error(res.msg)
+          }
+          Cookies.set('token', res.data.token)
+          this.$router.replace({ name: 'home' })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>