3 |
6 |
7 |
8 |
23 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 | 404 page not found
4 |
3 |
5 |
6 |
7 |
25 |
26 |
29 |
--------------------------------------------------------------------------------
/src/assets/style/animate/vue-transition.scss:
--------------------------------------------------------------------------------
1 | // 过渡动画 横向渐变
2 | .fade-transverse-leave-active,
3 | .fade-transverse-enter-active {
4 | transition: all .5s;
5 | }
6 | .fade-transverse-enter {
7 | opacity: 0;
8 | transform: translateX(-30px);
9 | }
10 | .fade-transverse-leave-to {
11 | opacity: 0;
12 | transform: translateX(30px);
13 | }
14 |
15 | // 过渡动画 缩放渐变
16 | .fade-scale-leave-active,
17 | .fade-scale-enter-active {
18 | transition: all .3s;
19 | }
20 | .fade-scale-enter {
21 | opacity: 0;
22 | transform: scale(1.2);
23 | }
24 | .fade-scale-leave-to {
25 | opacity: 0;
26 | transform: scale(0.8);
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/d2-export-table/component.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
3 |
15 |
16 |
17 |
26 |
--------------------------------------------------------------------------------
/src/locales/mixin.js:
--------------------------------------------------------------------------------
1 | export default {
2 | methods: {
3 | onChangeLocale (command) {
4 | this.$i18n.locale = command
5 | let message = `当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`
6 | if (this.$env.VUE_APP_BUILD_MODE === 'PREVIEW') {
7 | message = [
8 | `当前语言：${this.$t('_name')} [ ${this.$i18n.locale} ]`,
9 | `仅提供切换功能，没有配置具体的语言数据 `,
10 | `文档参考：《国际化 | D2Admin》`
11 | ].join('
4 |
6 |
7 |
11 |
14 |
8 |
10 | ') 12 | } 13 | this.$notify({ 14 | title: '语言变更', 15 | dangerouslyUseHTMLString: true, 16 | message 17 | }) 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/mixins/crud-permission.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data () { 3 | return { 4 | // 默认有四个权限设置 在页面中可以覆盖 5 | permission: { 6 | query: '', 7 | add: '', 8 | edit: '', 9 | remove: '' 10 | } 11 | } 12 | }, 13 | methods: { 14 | /** 15 | * @description 没有设置权限或者具有权限 返回 true 16 | * @description 设置了权限但是没有权限 返回 false 17 | * @param {String} name 权限名称 18 | * @param {Boolean} trueReturn 有权限时返回的值 19 | * @param {Boolean} falseReturn 没有权限时返回的值 20 | */ 21 | p (name, trueReturn = true, falseReturn = false) { 22 | if (this.permission[name] && !this.$permission(this.permission[name])) return falseReturn 23 | return trueReturn 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/layout/header-aside/components/header-fullscreen/index.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |
19 |
20 |
21 |
30 |
--------------------------------------------------------------------------------
/src/components/d2-container/components/d2-container-ghost.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
15 |
18 |
12 |
14 |
3 |
13 |
14 |
15 |
32 |
--------------------------------------------------------------------------------
/src/components/d2-table/snippets.json:
--------------------------------------------------------------------------------
1 | {
2 | "d2-table": {
3 | "scope": "vue,vue-html",
4 | "prefix": "component d2-table",
5 | "body": [
6 | "
4 |
6 |
7 |
9 |
12 | { row.id }
",
25 | " }",
26 | " ]",
27 | "}"
28 | ],
29 | "description": "# D2Admin 内置组件\n# 配置式表格 数据模板
4 |
5 |
9 |
10 |
6 |
8 |
3 |
21 |
22 |
23 |
32 |
--------------------------------------------------------------------------------
/src/components/d2-container/components/d2-container-full.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
17 |
20 |
8 |
16 |
13 |
15 |
3 |
18 |
19 |
20 |
37 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import i18n from './i18n'
3 | import App from './App'
4 | import store from '@/store'
5 | import d2Admin from '@/plugin/d2admin'
6 |
7 | import router, { constantRoutes } from './router'
8 |
9 | import './permission'
10 |
11 | Vue.use(d2Admin)
12 |
13 | new Vue({
14 | router,
15 | store,
16 | i18n,
17 | render: h => h(App),
18 | async created () {
19 | // 处理路由 得到每一级的路由设置
20 | this.$store.commit('d2admin/page/init', constantRoutes)
21 | // 加载接口配置
22 | await this.$store.dispatch('d2admin/api/load')
23 | },
24 | async mounted () {
25 | // 展示系统信息
26 | this.$store.commit('d2admin/releases/versionShow')
27 | // 用户登录后从数据库加载一系列的设置
28 | await this.$store.dispatch('d2admin/sys/load')
29 | // 获取并记录用户 UA
30 | this.$store.commit('d2admin/ua/get')
31 | // 初始化全屏监听
32 | this.$store.commit('d2admin/fullscreen/listen')
33 | }
34 | }).$mount('#app')
35 |
--------------------------------------------------------------------------------
/src/api/modules/upload.js:
--------------------------------------------------------------------------------
1 | export default ({ request }) => ({
2 | /**
3 | * @description 上传图片
4 | * @description http://yapi.xiya.vip/project/11/interface/api/235
5 | */
6 | UPLOAD_IMAGE (image) {
7 | const data = new FormData()
8 | data.append('file', image)
9 | return request({
10 | url: '/api/upload/image',
11 | method: 'post',
12 | header: {
13 | 'Content-Type': 'multipart/form-data'
14 | },
15 | data
16 | })
17 | },
18 | /**
19 | * @description 上传图片到百度 OOS
20 | * @description http://yapi.xiya.vip/project/11/interface/api/460
21 | */
22 | UPLOAD_IMAGE_OOS (image) {
23 | const data = new FormData()
24 | data.append('file', image)
25 | return request({
26 | url: '/api/upload/head_image',
27 | method: 'post',
28 | header: {
29 | 'Content-Type': 'multipart/form-data'
30 | },
31 | data
32 | })
33 | }
34 | })
35 |
--------------------------------------------------------------------------------
/src/components/d2-drawer-container/component.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
4 |
6 |
12 |
14 |
17 |
19 |
30 |
31 |
32 |
37 |
--------------------------------------------------------------------------------
/src/layout/header-aside/components/header-theme/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
20 |
21 |
25 |
26 |
29 |
22 |
24 |
3 |
7 |
11 |
15 |
16 |
21 |
23 |
24 |
25 |
26 |
39 |
--------------------------------------------------------------------------------
/src/plugin/error/index.js:
--------------------------------------------------------------------------------
1 | import store from '@/store'
2 | import utils from '@/utils'
3 | import env from '@/env'
4 |
5 | export default {
6 | install (Vue) {
7 | Vue.config.errorHandler = function (error, instance, info) {
8 | Vue.nextTick(() => {
9 | // store 追加 log
10 | store.dispatch('d2admin/log/push', {
11 | message: `${info}: ${error.message}`,
12 | type: 'danger',
13 | meta: {
14 | error,
15 | instance
16 | }
17 | })
18 | // 只在开发模式下打印 log
19 | if (env.NODE_ENV === 'development') {
20 | utils.log.capsule('D2Admin', 'ErrorHandler', 'danger')
21 | utils.log.danger('>>>>>> 错误信息 >>>>>>')
22 | console.log(info)
23 | utils.log.danger('>>>>>> Vue 实例 >>>>>>')
24 | console.log(instance)
25 | utils.log.danger('>>>>>> Error >>>>>>')
26 | console.log(error)
27 | }
28 | })
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/d2-container/components/d2-container-card.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
21 |
38 |
--------------------------------------------------------------------------------
/src/mixins/component-multiple.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | // 多选
4 | multiple: { type: Boolean, default: false, required: false },
5 | // 是否序列为字符串
6 | stringify: { type: Boolean, default: false, required: false }
7 | },
8 | methods: {
9 | tryParseMultipleString (value) {
10 | if (this.multiple) {
11 | // 最后总应该返回数组
12 | if (this._.isArray(value)) {
13 | return value
14 | } else if (this.stringify && this._.isString(value)) {
15 | return value.split(',').filter(e => e !== '').map(Number)
16 | } else {
17 | return [ value ]
18 | }
19 | } else {
20 | // 最后总应该返回单个值
21 | if (this._.isArray(value)) {
22 | return value.join(',')
23 | } else {
24 | return value
25 | }
26 | }
27 | },
28 | tryStringify (value) {
29 | if (this._.isArray(value) && this.multiple && this.stringify) {
30 | return value.join(',')
31 | } else {
32 | return value
33 | }
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/utils/modules/fn.js:
--------------------------------------------------------------------------------
1 | import shortid from 'shortid'
2 | import { get, cloneDeep } from 'lodash'
3 |
4 | /**
5 | * @description 尝试在一个数据上取值 可以有多个备选 keyName
6 | * @param {Object} parent 被取值的数据
7 | * @param {Array} paths 可供选择的取值路径
8 | * @param {*} defaultValue 默认值
9 | */
10 | export function getFromMulti (parent = {}, paths = [], defaultValue = '') {
11 | let result = defaultValue
12 | for (let pathIndex = 0; pathIndex < paths.length; pathIndex++) {
13 | const path = paths[pathIndex]
14 | const value = get(parent, path, defaultValue)
15 | if (value !== defaultValue) {
16 | result = value
17 | break
18 | }
19 | }
20 | return result
21 | }
22 |
23 | /**
24 | * @description 给指定的数组添加唯一 id 字段
25 | * @description https://github.com/dylang/shortid
26 | * @param {Array} source 数据源
27 | * @param {String} idKeyName 字段名
28 | */
29 | export function arrayAddUniqueId (source = [], idKeyName = 'id') {
30 | return source.map(item => {
31 | let currentItem = cloneDeep(item)
32 | currentItem[idKeyName] = shortid.generate()
33 | return currentItem
34 | })
35 | }
36 |
--------------------------------------------------------------------------------
/src/utils/modules/cookies.js:
--------------------------------------------------------------------------------
1 | import Cookies from 'js-cookie'
2 | import env from '@/env'
3 |
4 | /**
5 | * @description 存储 cookie 值
6 | * @param {String} name cookie name
7 | * @param {String} value cookie value
8 | * @param {Object} setting cookie setting
9 | */
10 | export function set (name = 'default', value = '', cookieSetting = {}) {
11 | let currentCookieSetting = {
12 | expires: 1
13 | }
14 | Object.assign(currentCookieSetting, cookieSetting)
15 | Cookies.set(`d2admin-${env.VUE_APP_VERSION}-${name}`, value, currentCookieSetting)
16 | }
17 |
18 | /**
19 | * @description 拿到 cookie 值
20 | * @param {String} name cookie name
21 | */
22 | export function get (name = 'default') {
23 | return Cookies.get(`d2admin-${env.VUE_APP_VERSION}-${name}`)
24 | }
25 |
26 | /**
27 | * @description 拿到 cookie 全部的值
28 | */
29 | export function getAll () {
30 | return Cookies.get()
31 | }
32 |
33 | /**
34 | * @description 删除 cookie
35 | * @param {String} name cookie name
36 | */
37 | export function remove (name = 'default') {
38 | return Cookies.remove(`d2admin-${env.VUE_APP_VERSION}-${name}`)
39 | }
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 李杨
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/store/snippets/snippets.js:
--------------------------------------------------------------------------------
1 | exports.default = function () {
2 | let result = {}
3 |
4 | const scope = 'javascript,typescript,vue,vue-html'
5 |
6 | const helpers = [
7 | 'mapState',
8 | 'mapGetters',
9 | 'mapMutations',
10 | 'mapActions'
11 | ]
12 |
13 | // 在文件中导入 store
14 | result['store import at .js'] = {
15 | scope,
16 | prefix: 'store import',
17 | body: [
18 | `import store from '@/store'`
19 | ],
20 | description: `# D2Admin 状态管理 | store\n# 在 js 文件中导入 store`
21 | }
22 |
23 | // 在组件中导入全部辅助方法
24 | result['store import all'] = {
25 | scope,
26 | prefix: 'store import all',
27 | body: [
28 | `import { ${helpers.join(', ')} } from 'vuex'`
29 | ],
30 | description: `# D2Admin 状态管理 | store\n# 在组件中导入 store`
31 | }
32 |
33 | // 在组件中导入某个辅助方法
34 | helpers.forEach(helper => {
35 | result[helper] = {
36 | scope,
37 | prefix: helper,
38 | body: [
39 | `import { ${helper} } from 'vuex'`
40 | ],
41 | description: `# D2Admin 状态管理 | store\n# 在组件中导入 ${helper} 辅助方法`
42 | }
43 | })
44 |
45 | return result
46 | }
47 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/modules/transition.js:
--------------------------------------------------------------------------------
1 | // 设置文件
2 | import setting from '@/setting.js'
3 |
4 | export default context => ({
5 | namespaced: true,
6 | state: {
7 | // 是否开启页面过度动画
8 | active: setting.transition.active
9 | },
10 | actions: {
11 | /**
12 | * @description 设置开启状态
13 | * @param {Object} vuex context
14 | * @param {Boolean} active 新的状态
15 | */
16 | async set ({ state, dispatch }, active) {
17 | // store 赋值
18 | state.active = active
19 | // 持久化
20 | await dispatch('d2admin/db/set', {
21 | dbName: 'sys',
22 | path: 'transition.active',
23 | value: state.active,
24 | user: true
25 | }, { root: true })
26 | },
27 | /**
28 | * 从数据库读取页面过渡动画设置
29 | * @param {Object} vuex context
30 | */
31 | async load ({ state, dispatch }) {
32 | // store 赋值
33 | state.active = await dispatch('d2admin/db/get', {
34 | dbName: 'sys',
35 | path: 'transition.active',
36 | defaultValue: setting.transition.active,
37 | user: true
38 | }, { root: true })
39 | }
40 | }
41 | })
42 |
--------------------------------------------------------------------------------
/src/i18n.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueI18n from 'vue-i18n'
3 | import utils from '@/utils'
4 | import env from '@/env'
5 |
6 | Vue.use(VueI18n)
7 |
8 | function loadLocaleMessages () {
9 | const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
10 | const messages = {}
11 | for (const key of locales.keys()) {
12 | const matched = key.match(/([A-Za-z0-9-_]+)\./i)
13 | if (matched && matched.length > 1) {
14 | const locale = matched[1]
15 | const localeElementUI = require(`element-ui/lib/locale/lang/${locales(key)._element}`)
16 | messages[locale] = {
17 | ...locales(key),
18 | ...localeElementUI ? localeElementUI.default : {}
19 | }
20 | }
21 | }
22 | return messages
23 | }
24 |
25 | const messages = loadLocaleMessages()
26 |
27 | Vue.prototype.$languages = Object.keys(messages).map(langlage => ({
28 | label: messages[langlage]._name,
29 | value: langlage
30 | }))
31 |
32 | const i18n = new VueI18n({
33 | locale: utils.cookies.get('lang') || env.VUE_APP_I18N_LOCALE,
34 | fallbackLocale: env.VUE_APP_I18N_FALLBACK_LOCALE,
35 | messages
36 | })
37 |
38 | export default i18n
39 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import env from '@/env'
2 | import * as cookies from './modules/cookies'
3 | import * as db from './modules/db'
4 | import * as fn from './modules/fn'
5 | import * as helper from './modules/helper'
6 | import * as log from './modules/log'
7 | import * as time from './modules/time'
8 |
9 | const utils = {
10 | cookies,
11 | time,
12 | db,
13 | fn,
14 | helper,
15 | log,
16 | import: require('./modules/import-' + env.NODE_ENV)
17 | }
18 |
19 | /**
20 | * @description 更新标题
21 | * @param {String} title 标题
22 | */
23 | utils.title = function (titleText) {
24 | const processTitle = env.VUE_APP_TITLE || 'D2Admin'
25 | window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
26 | }
27 |
28 | /**
29 | * @description 打开新页面
30 | * @param {String} url 地址
31 | */
32 | utils.open = function (url) {
33 | var a = document.createElement('a')
34 | a.setAttribute('href', url)
35 | a.setAttribute('target', '_blank')
36 | a.setAttribute('id', 'd2admin-link-temp')
37 | document.body.appendChild(a)
38 | a.click()
39 | document.body.removeChild(document.getElementById('d2admin-link-temp'))
40 | }
41 |
42 | export default utils
43 |
--------------------------------------------------------------------------------
/src/plugin/d2admin/index.js:
--------------------------------------------------------------------------------
1 | // Element
2 | import ElementUI from 'element-ui'
3 | import 'element-ui/lib/theme-chalk/index.css'
4 | // flex 布局库
5 | import 'flex.css'
6 | // 组件
7 | import '@/components'
8 | // 过滤器
9 | import '@/filters'
10 | // svg 图标
11 | import '@/assets/svg-icons'
12 | // 国际化
13 | import i18n from '@/i18n'
14 |
15 | // 功能插件
16 | import pluginApi from '@/plugin/api'
17 | import pluginEnv from '@/plugin/env'
18 | import pluginError from '@/plugin/error'
19 | import pluginLodash from '@/plugin/lodash'
20 | import pluginLog from '@/plugin/log'
21 | import pluginOpen from '@/plugin/open'
22 | import pluginPermission from '@/plugin/permission'
23 |
24 | export default {
25 | install (Vue) {
26 | // 设置为 false 以阻止 vue 在启动时生成生产提示
27 | // https://cn.vuejs.org/v2/api/#productionTip
28 | Vue.config.productionTip = false
29 | // Element
30 | Vue.use(ElementUI, {
31 | i18n: (key, value) => i18n.t(key, value)
32 | })
33 | // 插件
34 | Vue.use(pluginApi)
35 | Vue.use(pluginEnv)
36 | Vue.use(pluginError)
37 | Vue.use(pluginLodash)
38 | Vue.use(pluginLog)
39 | Vue.use(pluginOpen)
40 | Vue.use(pluginPermission)
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/snippets/snippets.js:
--------------------------------------------------------------------------------
1 | exports.default = function () {
2 | let result = {}
3 |
4 | const scope = 'javascript,typescript,vue,vue-html'
5 |
6 | const helpers = [
7 | 'mapState',
8 | 'mapGetters',
9 | 'mapMutations',
10 | 'mapActions'
11 | ]
12 |
13 | const d2adminModules = [
14 | 'account',
15 | 'fullscreen',
16 | 'page',
17 | 'theme',
18 | 'api',
19 | 'gray',
20 | 'releases',
21 | 'transition',
22 | 'color',
23 | 'log',
24 | 'search',
25 | 'ua',
26 | 'db',
27 | 'dict',
28 | 'menu',
29 | 'size',
30 | 'user'
31 | ]
32 |
33 | // 在组件中导入某个模块
34 | helpers.forEach(helper => {
35 | d2adminModules.forEach(d2adminModule => {
36 | const name = `${helper} d2:${d2adminModule}`
37 | result[name] = {
38 | scope,
39 | prefix: name,
40 | body: [
41 | `...${helper}('d2admin/${d2adminModule}', [`,
42 | ` '\$\{1:${helper.replace('map', '').toLowerCase()} name\}'`,
43 | `])\$\{2:,\}`
44 | ],
45 | description: `# D2Admin 状态管理 | store\n# 在组件中使用 ${helper} 导入 d2admin ${d2adminModule} 模块`
46 | }
47 | })
48 | })
49 |
50 | return result
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/d2-throttle/component.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'd2-throttle',
3 | functional: true,
4 | render (createElement, context) {
5 | // [options.leading=true] (boolean): 指定调用在节流开始前
6 | // [options.trailing=true] (boolean): 指定调用在节流结束后
7 | const options = ({ leading = true, trailing = true } = {}) => ({ leading, trailing })(context.props)
8 | const wait = context.props.wait
9 | const vnodeList = context.slots().default
10 | if (vnodeList === undefined) {
11 | console.warn('
4 |
6 |
7 |
15 |
18 |
12 |
14 | 需要具有某项权限
5 |v-permission="'system:user:remove'"
6 |需要具有至少一项权限
8 |v-permission="['system:user:remove', 'system:user:edit']"
9 |需要具有给出的全部权限
11 |v-permission.all="['system:user:remove', 'system:user:edit']"
12 |不允许具有某项权限
16 |v-permission.not="'system:user:remove'"
17 |不允许具有其中任意一项权限
19 |v-permission.not="['system:user:remove', 'system:user:edit']"
20 |至少不具有其中一项权限
22 |v-permission.not.all="['system:user:remove', 'system:user:edit']"
23 |
18 |
19 |
7 |
9 |
10 |
11 |
48 |
49 |
81 |
--------------------------------------------------------------------------------
/src/mixins/crud-status.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data () {
3 | return {
4 | status: {
5 | isLoadingData: false,
6 | isLoadingDict: false,
7 | isSubmitting: false
8 | }
9 | }
10 | },
11 | computed: {
12 | // 表单 loading 状态
13 | // 正在加载原始数据 || 正在加载字典
14 | isFormLoading () {
15 | return this.status.isLoadingData || this.status.isLoadingDict
16 | },
17 | // 表单 禁用 状态
18 | // 正在加载原始数据 || 正在加载字典 || 正在提交
19 | isFormDisabled () {
20 | return this.status.isLoadingData || this.status.isLoadingDict || this.status.isSubmitting
21 | },
22 | // 提交按钮 禁用 状态
23 | // 正在加载原始数据 || 正在加载字典 || 表单没有发生修改
24 | isSubmitButtonDisabled () {
25 | return this.status.isLoadingData || this.status.isLoadingDict || !this.isFormChanged
26 | },
27 | // 表单是否发生变化
28 | isFormChanged () {
29 | return true
30 | },
31 | // 提交按钮 loading 状态
32 | // 正在提交
33 | isSubmitButtonLoading () {
34 | return this.status.isSubmitting
35 | }
36 | },
37 | methods: {
38 | /**
39 | * @description 请求表单数据
40 | * @param {Function} fn 请求函数 需要返回 Promise
41 | */
42 | async doLoadData (fn = () => {}) {
43 | this.status.isLoadingData = true
44 | try {
45 | const data = await fn()
46 | this.status.isLoadingData = false
47 | return Promise.resolve(data)
48 | } catch (error) {
49 | console.log(error)
50 | this.status.isLoadingData = false
51 | return Promise.reject(error)
52 | }
53 | },
54 | /**
55 | * @description 发送数据
56 | * @param {Function} fn 请求函数 需要返回 Promise
57 | */
58 | async doSubmit (fn = () => {}) {
59 | this.status.isSubmitting = true
60 | try {
61 | const data = await fn()
62 | this.status.isSubmitting = false
63 | return Promise.resolve(data)
64 | } catch (error) {
65 | console.log(error)
66 | this.status.isSubmitting = false
67 | return Promise.reject(error)
68 | }
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/modules/size.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import router from '@/router'
3 |
4 | export default context => ({
5 | namespaced: true,
6 | state: {
7 | // 尺寸
8 | value: '' // medium small mini
9 | },
10 | actions: {
11 | /**
12 | * @description 将当前的设置应用到 element
13 | * @param {Object} vuex context
14 | * @param {Boolean} refresh 是否在设置之后刷新页面
15 | */
16 | apply ({ state, commit }, refresh) {
17 | Vue.prototype.$ELEMENT.size = state.value
18 | if (refresh) {
19 | commit('d2admin/page/keepAliveClean', undefined, { root: true })
20 | router.replace('/refresh')
21 | }
22 | },
23 | /**
24 | * @description 确认已经加载组件尺寸设置 https://github.com/d2-projects/d2-admin/issues/198
25 | * @param {Object} vuex context
26 | */
27 | isLoaded ({ state }) {
28 | if (state.value) return Promise.resolve()
29 | return new Promise(resolve => {
30 | const timer = setInterval(() => {
31 | if (state.value) {
32 | resolve(clearInterval(timer))
33 | }
34 | }, 10)
35 | })
36 | },
37 | /**
38 | * @description 设置尺寸
39 | * @param {Object} vuex context
40 | * @param {String} size 尺寸
41 | */
42 | async set ({ state, dispatch }, size) {
43 | // store 赋值
44 | state.value = size
45 | // 应用
46 | dispatch('apply', true)
47 | // 持久化
48 | await dispatch('d2admin/db/set', {
49 | dbName: 'sys',
50 | path: 'size.value',
51 | value: state.value,
52 | user: true
53 | }, { root: true })
54 | },
55 | /**
56 | * @description 从持久化数据读取尺寸设置
57 | * @param {Object} vuex context
58 | */
59 | async load ({ state, dispatch }) {
60 | // store 赋值
61 | state.value = await dispatch('d2admin/db/get', {
62 | dbName: 'sys',
63 | path: 'size.value',
64 | defaultValue: 'mini',
65 | user: true
66 | }, { root: true })
67 | // 应用
68 | dispatch('apply')
69 | }
70 | }
71 | })
72 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/modules/log.js:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs'
2 | import { get } from 'lodash'
3 | import utils from '@/utils'
4 |
5 | export default context => ({
6 | namespaced: true,
7 | state: {
8 | // 错误日志
9 | // + 日志条目的属性
10 | // - message 必须 日志信息
11 | // - type 非必须 类型 success | warning | info(默认) | danger
12 | // - time 必须 日志记录时间
13 | // - meta 非必须 其它携带信息
14 | log: []
15 | },
16 | getters: {
17 | /**
18 | * @description 返回现存 log (all) 的条数
19 | * @param {*} state vuex state
20 | */
21 | length (state) {
22 | return state.log.length
23 | },
24 | /**
25 | * @description 返回现存 log (error) 的条数
26 | * @param {*} state vuex state
27 | */
28 | lengthError (state) {
29 | return state.log.filter(log => log.type === 'danger').length
30 | }
31 | },
32 | actions: {
33 | /**
34 | * @description 添加一个日志
35 | * @param {Object} vuex context
36 | * @param {String} param message {String} 信息
37 | * @param {String} param type {String} 类型
38 | * @param {Object} payload meta {Object} 附带的信息
39 | */
40 | push ({ rootState, commit }, { message, type = 'info', meta }) {
41 | commit('push', {
42 | message,
43 | type,
44 | time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
45 | meta: {
46 | // 当前用户信息
47 | user: rootState.d2admin.user.info,
48 | // 当前用户的 uuid
49 | uuid: utils.cookies.get('uuid'),
50 | // 当前的 token
51 | token: utils.cookies.get('token'),
52 | // 当前地址
53 | url: get(window, 'location.href', ''),
54 | // 用户设置
55 | ...meta
56 | }
57 | })
58 | }
59 | },
60 | mutations: {
61 | /**
62 | * @description 添加日志
63 | * @param {Object} state state
64 | * @param {Object} log data
65 | */
66 | push (state, log) {
67 | state.log.push(log)
68 | },
69 | /**
70 | * @description 清空日志
71 | * @param {Object} state state
72 | */
73 | clean (state) {
74 | // store 赋值
75 | state.log = []
76 | }
77 | }
78 | })
79 |
--------------------------------------------------------------------------------
/src/assets/style/public-class.scss:
--------------------------------------------------------------------------------
1 | @import 'public';
2 |
3 | // 补丁 base
4 | @import '~@/assets/style/fixed/base.scss';
5 | // 补丁 element
6 | @import '~@/assets/style/fixed/element.scss';
7 |
8 | // 动画
9 | @import '~@/assets/style/animate/vue-transition.scss';
10 |
11 | // 在这里写公用的class
12 | // 注意 这个文件里只写class
13 | // mixin等内容请在 public.scss 里书写
14 |
15 | // 文字相关
16 | .#{$prefix}-text-center {
17 | text-align: center;
18 | }
19 |
20 | // 浮动相关
21 | .#{$prefix}-fl {
22 | float: left;
23 | }
24 | .#{$prefix}-fr {
25 | float: right;
26 | }
27 |
28 | // 边距相关
29 | $sizes: (0, 5, 10, 15, 20);
30 |
31 | @for $index from 1 to 6 {
32 | .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
33 | .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
34 | .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
35 | .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
36 | .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
37 |
38 | .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
39 | .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
40 | .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
41 | .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
42 | .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
43 | }
44 |
45 | // 快速使用
46 |
47 | .#{$prefix}-m { margin: 20px !important; }
48 | .#{$prefix}-mt { margin-top: 20px !important; }
49 | .#{$prefix}-mr { margin-right: 20px !important; }
50 | .#{$prefix}-mb { margin-bottom: 20px !important; }
51 | .#{$prefix}-ml { margin-left: 20px !important; }
52 |
53 | .#{$prefix}-p { padding: 20px !important; }
54 | .#{$prefix}-pt { padding-top: 20px !important; }
55 | .#{$prefix}-pr { padding-right: 20px !important; }
56 | .#{$prefix}-pb { padding-bottom: 20px !important; }
57 | .#{$prefix}-pl { padding-left: 20px !important; }
58 |
59 | @for $index from 1 to 9 {
60 | .#{$prefix}-opacity-#{$index} {
61 | opacity: $index / 10;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/api/modules/menu.js:
--------------------------------------------------------------------------------
1 | import utils from '@/utils'
2 |
3 | export default ({ request }) => ({
4 | /**
5 | * @description 菜单列表 只获取某级菜单下的数据
6 | * @description http://yapi.xiya.vip/project/11/interface/api/190
7 | * @param {Object} data {Number} parent 父级菜单 id
8 | */
9 | MENU_FIND (id = 0) {
10 | return request({
11 | url: '/api/menu/find_menus',
12 | method: 'post',
13 | data: {
14 | parent_id: id
15 | }
16 | })
17 | },
18 | /**
19 | * @description 菜单列表
20 | * @description 获取所有菜单的层级关系
21 | * @description http://yapi.xiya.vip/project/11/interface/api/170
22 | */
23 | MENU_ALL (query = {}) {
24 | return request({
25 | url: '/api/menu/menus',
26 | method: 'post',
27 | data: query
28 | })
29 | },
30 | /**
31 | * @description 菜单列表
32 | * @description 当前用的的菜单列表
33 | * @description http://yapi.xiya.vip/project/11/interface/api/560
34 | */
35 | MENU_USER (userId) {
36 | return request({
37 | url: '/api/menu/find_all_menu',
38 | method: 'post',
39 | data: {
40 | uuid: userId
41 | }
42 | })
43 | },
44 | /**
45 | * @description 菜单创建
46 | * @description http://yapi.xiya.vip/project/11/interface/api/100
47 | */
48 | MENU_CREATE (data) {
49 | return request({
50 | url: '/api/menu/create',
51 | method: 'put',
52 | data
53 | })
54 | },
55 | /**
56 | * @description 菜单详情
57 | * @description http://yapi.xiya.vip/project/11/interface/api/165
58 | */
59 | MENU_DETAIL (id) {
60 | return request({
61 | url: '/api/menu/update',
62 | method: 'post',
63 | data: {
64 | id
65 | }
66 | })
67 | },
68 | /**
69 | * @description 菜单编辑
70 | * @description http://yapi.xiya.vip/project/11/interface/api/165
71 | */
72 | MENU_UPDATE (data) {
73 | return request({
74 | url: '/api/menu/update',
75 | method: 'put',
76 | data
77 | })
78 | },
79 | /**
80 | * @description 菜单删除
81 | * @description http://yapi.xiya.vip/project/11/interface/api/110
82 | */
83 | MENU_DELETE (id) {
84 | return request({
85 | url: '/api/menu/delete',
86 | method: 'delete',
87 | data: {
88 | id
89 | }
90 | })
91 | }
92 | })
93 |
--------------------------------------------------------------------------------
/src/mixins/crud-dict.js:
--------------------------------------------------------------------------------
1 | import { mapMutations } from 'vuex'
2 |
3 | export default {
4 | data () {
5 | return {
6 | status: {
7 | isLoadingDict: false
8 | }
9 | }
10 | },
11 | methods: {
12 | ...mapMutations('d2admin/dict', {
13 | dictSet: 'set'
14 | }),
15 | /**
16 | * @description 加载需要的字典数据
17 | * @description 这个方法一般在页面上需要再次实现
18 | * @description 在此方法内使用 loadDictOne
19 | * @description loadDict 会自动以 doLoadDict(loadDict) 的形式被调用
20 | * @description doLoadDict -> loadDict -> loadDictOne
21 | * @description 在 d2-dict-x 类组件上使用的普通的字典会自动加载 无需再次使用此方法
22 | */
23 | loadDict () {},
24 | /**
25 | * @description 加载一个字典
26 | * @param {Object} config {String} name 字典名称
27 | * @param {Object} config {Function} method 请求方法
28 | * @param {Object} config {String} fields 需要的字段
29 | * @param {Object} config {Object} query 请求参数
30 | * @param {Object} config {String} path 返回数据的列表字段位置
31 | * @param {Object} config {String} label 字典 label 字段名
32 | * @param {Object} config {String} value 字典 value 字段名
33 | */
34 | async loadDictOne ({
35 | name = '',
36 | method = () => {},
37 | fields = '',
38 | query = {},
39 | path = '',
40 | label = 'label',
41 | value = 'id'
42 | }) {
43 | try {
44 | const result = await method(
45 | Object.assign(
46 | { page_size: 9999 },
47 | fields ? { fields } : {},
48 | query
49 | )
50 | )
51 | let dictValue = (path ? this._.get(result, path, []) : result).map(e => ({ label: e[label], value: e[value] }))
52 | this.dictSet({ name, value: dictValue })
53 | } catch (error) {
54 | console.log(error)
55 | }
56 | },
57 | /**
58 | * @description 请求字典数据
59 | * @param {Function} fn 请求函数 需要返回 Promise
60 | */
61 | async doLoadDict (fn = () => {}) {
62 | this.status.isLoadingDict = true
63 | try {
64 | const data = await fn()
65 | this.status.isLoadingDict = false
66 | return Promise.resolve(data)
67 | } catch (error) {
68 | console.log(error)
69 | this.status.isLoadingDict = false
70 | return Promise.reject(error)
71 | }
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/modules/theme.js:
--------------------------------------------------------------------------------
1 | // 设置文件
2 | import setting from '@/setting.js'
3 |
4 | export default context => ({
5 | namespaced: true,
6 | state: {
7 | // 主题
8 | list: setting.theme.list,
9 | // 现在激活的主题 这应该是一个名字 不是对象
10 | activeName: setting.theme.list[0].name
11 | },
12 | getters: {
13 | /**
14 | * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
15 | * @param {Object} state state
16 | */
17 | activeSetting (state) {
18 | return state.list.find(theme => theme.name === state.activeName)
19 | }
20 | },
21 | actions: {
22 | /**
23 | * @description 激活一个主题
24 | * @param {String} themeValue 需要激活的主题名称
25 | */
26 | async set ({ state, commit, dispatch }, themeName) {
27 | // 检查这个主题在主题列表里是否存在
28 | state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
29 | // 将 vuex 中的主题应用到 dom
30 | commit('dom')
31 | // 持久化
32 | await dispatch('d2admin/db/set', {
33 | dbName: 'sys',
34 | path: 'theme.activeName',
35 | value: state.activeName,
36 | user: true
37 | }, { root: true })
38 | },
39 | /**
40 | * @description 从持久化数据加载主题设置
41 | * @param {Object} vuex context
42 | */
43 | async load ({ state, commit, dispatch }) {
44 | // store 赋值
45 | let activeName = await dispatch('d2admin/db/get', {
46 | dbName: 'sys',
47 | path: 'theme.activeName',
48 | defaultValue: state.list[0].name,
49 | user: true
50 | }, { root: true })
51 | // 检查这个主题在主题列表里是否存在
52 | if (state.list.find(e => e.name === activeName)) {
53 | state.activeName = activeName
54 | } else {
55 | state.activeName = state.list[0].name
56 | // 持久化
57 | await dispatch('d2admin/db/set', {
58 | dbName: 'sys',
59 | path: 'theme.activeName',
60 | value: state.activeName,
61 | user: true
62 | }, { root: true })
63 | }
64 | // 将 vuex 中的主题应用到 dom
65 | commit('dom')
66 | }
67 | },
68 | mutations: {
69 | /**
70 | * @description 将 vuex 中的主题应用到 dom
71 | * @param {Object} state state
72 | */
73 | dom (state) {
74 | document.body.className = `theme-${state.activeName}`
75 | }
76 | }
77 | })
78 |
--------------------------------------------------------------------------------
/src/store/modules/d2admin/modules/dict.js:
--------------------------------------------------------------------------------
1 | import { throttle } from 'lodash'
2 | import api from '@/api'
3 |
4 | const doFetch = throttle(async function ({ state, commit }) {
5 | const names = Array.from(new Set(state.fetchList))
6 | commit('fetchListClean')
7 | const dictsData = await Promise.all(names.map(name => api.DICTDATA_ALL({
8 | page_size: 9999,
9 | dict_type: name
10 | })))
11 | dictsData.forEach((dictDataSource, dictDataIndex) => {
12 | const dictName = names[dictDataIndex]
13 | let dictData = []
14 | if (dictDataSource.list.length > 0) {
15 | dictData = dictDataSource.list.map(e => ({
16 | label: e.dict_label,
17 | value: e[dictDataSource.list[0].dict_value === '' ? 'dict_number' : 'dict_value']
18 | }))
19 | }
20 | commit('set', {
21 | name: dictName,
22 | value: dictData
23 | })
24 | })
25 | }, 1000, {
26 | leading: false
27 | })
28 |
29 | export default context => ({
30 | namespaced: true,
31 | state: {
32 | // 字典数据
33 | dicts: [],
34 | // 请求队列
35 | fetchList: []
36 | },
37 | actions: {
38 | /**
39 | * @description 获取字典
40 | * @param {Object} vuex context
41 | * @param {String} name 字典名称
42 | */
43 | get ({ state }, name) {
44 | const dict = state.dicts.find(e => e.name === name)
45 | return (dict && dict.value) || []
46 | },
47 | /**
48 | * @description 加载一个字典
49 | * @param {Object} vuex context
50 | * @param {String} name 字典名称
51 | */
52 | fetch (payload, name = '') {
53 | payload.commit('fetchListPush', name)
54 | doFetch(payload)
55 | }
56 | },
57 | mutations: {
58 | /**
59 | * @description 设置字典
60 | * @param {Object} vuex context
61 | * @param {Object} payload {String} name 字典名称
62 | * @param {Object} payload {Array} value 字典数据
63 | */
64 | set (state, { name = '', value = [] } = {}) {
65 | const dictIndex = state.dicts.findIndex(e => e.name === name)
66 | if (dictIndex < 0) {
67 | state.dicts.push({ name, value })
68 | } else {
69 | state.dicts.splice(dictIndex, 1, { name, value })
70 | }
71 | },
72 | fetchListPush (state, item) {
73 | state.fetchList.push(item)
74 | },
75 | fetchListClean (state) {
76 | state.fetchList = []
77 | }
78 | }
79 | })
80 |
--------------------------------------------------------------------------------
/src/assets/style/theme/star/setting.scss:
--------------------------------------------------------------------------------
1 | // 主题名称
2 | $theme-name: 'star';
3 | // 主题背景颜色
4 | $theme-bg-color: #EFF4F8;
5 | // 主题背景图片遮罩
6 | $theme-bg-mask: rgba(#000, .3);
7 |
8 | // container组件
9 | $theme-container-background-color: rgba(#FFF, .9);
10 | $theme-container-header-footer-background-color: #FFF;
11 | $theme-container-border-inner: 1px solid $color-border-1;
12 | $theme-container-border-outer: 1px solid #114450;
13 |
14 | $theme-multiple-page-control-color: #FFF;
15 | $theme-multiple-page-control-color-active: $color-text-normal;
16 | $theme-multiple-page-control-nav-prev-color: #FFF;
17 | $theme-multiple-page-control-nav-next-color: #FFF;
18 | $theme-multiple-page-control-border-color: #114450;
19 | $theme-multiple-page-control-border-color-active: #FFF;
20 | $theme-multiple-page-control-background-color: rgba(#FFF, .5);
21 | $theme-multiple-page-control-background-color-active: #FFF;
22 |
23 | // 顶栏和侧边栏中展开的菜单 hover 状态下
24 | $theme-menu-item-color-hover: #293849;
25 | $theme-menu-item-background-color-hover: #ecf5ff;
26 |
27 | // 顶栏上的文字颜色
28 | $theme-header-item-color: #FFF;
29 | $theme-header-item-background-color: transparent;
30 | // 顶栏上的项目在 hover 时
31 | $theme-header-item-color-hover: #FFF;
32 | $theme-header-item-background-color-hover: rgba(#000, .2);
33 | // 顶栏上的项目在 focus 时
34 | $theme-header-item-color-focus: #FFF;
35 | $theme-header-item-background-color-focus: rgba(#000, .2);
36 | // 顶栏上的项目在 active 时
37 | $theme-header-item-color-active: #FFF;
38 | $theme-header-item-background-color-active: rgba(#000, .3);
39 |
40 | // 侧边栏上的文字颜色
41 | $theme-aside-item-color: #FFF;
42 | $theme-aside-item-background-color: transparent;
43 | // 侧边栏上的项目在 hover 时
44 | $theme-aside-item-color-hover: #FFF;
45 | $theme-aside-item-background-color-hover: rgba(#000, .2);
46 | // 侧边栏上的项目在 focus 时
47 | $theme-aside-item-color-focus: #FFF;
48 | $theme-aside-item-background-color-focus: rgba(#000, .2);
49 | // 侧边栏上的项目在 active 时
50 | $theme-aside-item-color-active: #FFF;
51 | $theme-aside-item-background-color-active: rgba(#000, .3);
52 |
53 | // 侧边栏菜单为空的时候显示的元素
54 | $theme-aside-menu-empty-icon-color: #FFF;
55 | $theme-aside-menu-empty-text-color: #FFF;
56 | $theme-aside-menu-empty-background-color: rgba(#FFF, .2);
57 | $theme-aside-menu-empty-icon-color-hover: #FFF;
58 | $theme-aside-menu-empty-text-color-hover: #FFF;
59 | $theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);
--------------------------------------------------------------------------------
/src/api/modules/user.js:
--------------------------------------------------------------------------------
1 | export default ({ request }) => ({
2 | /**
3 | * @description 登录
4 | * @description http://yapi.xiya.vip/project/11/interface/api/10
5 | */
6 | USER_LOGIN ({
7 | username = '',
8 | password = ''
9 | }) {
10 | return request({
11 | url: '/api/user/login',
12 | method: 'post',
13 | data: {
14 | username: username,
15 | password: password
16 | }
17 | })
18 | },
19 | /**
20 | * @description 注销
21 | * @description http://yapi.xiya.vip/project/11/interface/api/40
22 | */
23 | USER_LOGOUT () {
24 | return request({
25 | url: '/api/user/logout',
26 | method: 'post'
27 | })
28 | },
29 | /**
30 | * @description Token 校验
31 | * @description http://yapi.xiya.vip/project/11/interface/api/15
32 | */
33 | USER_CHECK_TOKEN () {
34 | return request({
35 | url: '/api/user/check_token',
36 | method: 'post'
37 | })
38 | },
39 | /**
40 | * @description 查询所有用户
41 | * @description http://yapi.xiya.vip/project/11/interface/api/30
42 | */
43 | USER_ALL (query = {}) {
44 | return request({
45 | url: '/api/user/index',
46 | method: 'post',
47 | data: query
48 | })
49 | },
50 | /**
51 | * @description 用户创建
52 | * @description http://yapi.xiya.vip/project/11/interface/api/25
53 | */
54 | USER_CREATE (data) {
55 | return request({
56 | url: '/api/user/create',
57 | method: 'put',
58 | data
59 | })
60 | },
61 | /**
62 | * @description 用户详情
63 | * @description http://yapi.xiya.vip/project/11/interface/api/240
64 | */
65 | USER_DETAIL (id) {
66 | return request({
67 | url: '/api/user/update',
68 | method: 'post',
69 | data: {
70 | id
71 | }
72 | })
73 | },
74 | /**
75 | * @description 用户编辑
76 | * @description http://yapi.xiya.vip/project/11/interface/api/240
77 | */
78 | USER_UPDATE (data) {
79 | return request({
80 | url: '/api/user/update',
81 | method: 'put',
82 | data
83 | })
84 | },
85 | /**
86 | * @description 用户删除
87 | * @description http://yapi.xiya.vip/project/11/interface/api/155
88 | */
89 | USER_DELETE (id) {
90 | return request({
91 | url: '/api/user/delete',
92 | method: 'delete',
93 | data: {
94 | id
95 | }
96 | })
97 | }
98 | })
99 |
--------------------------------------------------------------------------------
/src/assets/style/theme/tomorrow-night-blue/setting.scss:
--------------------------------------------------------------------------------
1 | // 主题名称
2 | $theme-name: 'tomorrow-night-blue';
3 | // 主题背景颜色
4 | $theme-bg-color: #002253;
5 | // 主题背景图片遮罩
6 | $theme-bg-mask: rgba(#000, 0);
7 |
8 | // container组件
9 | $theme-container-background-color: rgba(#FFF, 1);
10 | $theme-container-header-footer-background-color: #FFF;
11 | $theme-container-border-inner: 1px solid $color-border-1;
12 | $theme-container-border-outer: 1px solid #002253;
13 |
14 | $theme-multiple-page-control-color: #FFF;
15 | $theme-multiple-page-control-color-active: $color-text-normal;
16 | $theme-multiple-page-control-nav-prev-color: #FFF;
17 | $theme-multiple-page-control-nav-next-color: #FFF;
18 | $theme-multiple-page-control-border-color: #002253;
19 | $theme-multiple-page-control-border-color-active: #FFF;
20 | $theme-multiple-page-control-background-color: rgba(#FFF, .2);
21 | $theme-multiple-page-control-background-color-active: #FFF;
22 |
23 | // 顶栏和侧边栏中展开的菜单 hover 状态下
24 | $theme-menu-item-color-hover: #293849;
25 | $theme-menu-item-background-color-hover: #ecf5ff;
26 |
27 | // 顶栏上的文字颜色
28 | $theme-header-item-color: #FF929A;
29 | $theme-header-item-background-color: transparent;
30 | // 顶栏上的项目在 hover 时
31 | $theme-header-item-color-hover: #FFEBA4;
32 | $theme-header-item-background-color-hover: rgba(#FFF, .05);
33 | // 顶栏上的项目在 focus 时
34 | $theme-header-item-color-focus: #FFB870;
35 | $theme-header-item-background-color-focus: rgba(#FFF, .05);
36 | // 顶栏上的项目在 active 时
37 | $theme-header-item-color-active: #FFB870;
38 | $theme-header-item-background-color-active: rgba(#FFF, .05);
39 |
40 | // 侧边栏上的文字颜色
41 | $theme-aside-item-color: #FF929A;
42 | $theme-aside-item-background-color: transparent;
43 | // 侧边栏上的项目在 hover 时
44 | $theme-aside-item-color-hover: #FFEBA4;
45 | $theme-aside-item-background-color-hover: rgba(#FFF, .05);
46 | // 侧边栏上的项目在 focus 时
47 | $theme-aside-item-color-focus: #FFB870;
48 | $theme-aside-item-background-color-focus: rgba(#FFF, .05);
49 | // 侧边栏上的项目在 active 时
50 | $theme-aside-item-color-active: #FFB870;
51 | $theme-aside-item-background-color-active: rgba(#FFF, .05);
52 |
53 | // 侧边栏菜单为空的时候显示的元素
54 | $theme-aside-menu-empty-icon-color: #FFB870;
55 | $theme-aside-menu-empty-text-color: #FFB870;
56 | $theme-aside-menu-empty-background-color: rgba(#FFF, .1);
57 | $theme-aside-menu-empty-icon-color-hover: #FFEBA4;
58 | $theme-aside-menu-empty-text-color-hover: #FFEBA4;
59 | $theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);
--------------------------------------------------------------------------------
/src/views/management/dept/form.js:
--------------------------------------------------------------------------------
1 | import form from '@/mixins/crud-form'
2 | import utils from '@/utils/index'
3 |
4 | export default {
5 | mixins: [ form ],
6 | data () {
7 | return {
8 | api: {
9 | detail: 'DEPT_DETAIL',
10 | create: 'DEPT_CREATE',
11 | update: 'DEPT_UPDATE'
12 | }
13 | }
14 | },
15 | computed: {
16 | setting () {
17 | return [
18 | {
19 | prop: 'dept_name',
20 | default: '',
21 | label: '部门名称',
22 | rule: { required: true, message: '必填', trigger: 'change' },
23 | render: () =>
29 |
48 |
30 |
32 |
45 |
47 |
49 |
51 |
40 |
56 |
57 | <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
58 |
59 | <% } %>
60 |
61 |
62 |
--------------------------------------------------------------------------------
/src/layout/header-aside/components/menu-side/index.js:
--------------------------------------------------------------------------------
1 | import { mapState } from 'vuex'
2 | import menuMixin from '../mixin/menu'
3 | import { elMenuItem, elSubmenu } from '../utils/menu'
4 | import BScroll from 'better-scroll'
5 |
6 | export default {
7 | name: 'd2-layout-header-aside-menu-side',
8 | mixins: [
9 | menuMixin
10 | ],
11 | render (createElement) {
12 | return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
13 | createElement('el-menu', {
14 | props: { collapse: this.asideCollapse, uniqueOpened: true },
15 | ref: 'menu',
16 | on: { select: this.handleMenuSelect }
17 | }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
18 | ...this.aside.length === 0 && !this.asideCollapse ? [
19 | createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
20 | createElement('d2-icon', { props: { name: 'inbox' } }),
21 | createElement('span', {}, '没有侧栏菜单')
22 | ])
23 | ] : []
24 | ])
25 | },
26 | data () {
27 | return {
28 | BS: null
29 | }
30 | },
31 | computed: {
32 | ...mapState('d2admin/menu', [
33 | 'aside',
34 | 'asideCollapse'
35 | ])
36 | },
37 | watch: {
38 | // 折叠和展开菜单的时候销毁 better scroll
39 | asideCollapse (val) {
40 | this.scrollDestroy()
41 | setTimeout(() => {
42 | this.scrollInit()
43 | }, 500)
44 | },
45 | // 侧边栏数据发生变化时重新计算侧边栏展开状态
46 | aside: 'initOpenedMenu',
47 | // 路由变化时控制侧边栏激活状态
48 | '$route.fullPath': {
49 | handler () {
50 | this.$nextTick(() => {
51 | if (this.$refs.menu) this.$refs.menu.updateActiveIndex(this.$route.fullPath)
52 | })
53 | },
54 | immediate: true
55 | }
56 | },
57 | mounted () {
58 | this.scrollInit()
59 | },
60 | beforeDestroy () {
61 | this.scrollDestroy()
62 | },
63 | methods: {
64 | /**
65 | * @description 将之前保存的展开状态恢复到侧边栏上
66 | */
67 | initOpenedMenu () {
68 | this.$nextTick(() => {
69 | if (this.$refs.menu) this.$refs.menu.initOpenedMenu()
70 | })
71 | },
72 | /**
73 | * @description 初始化 betterscroll
74 | */
75 | scrollInit () {
76 | this.BS = new BScroll(this.$el, {
77 | mouseWheel: true,
78 | click: true
79 | // 如果你愿意可以打开显示滚动条
80 | // scrollbar: {
81 | // fade: true,
82 | // interactive: false
83 | // }
84 | })
85 | },
86 | /**
87 | * @description 销毁 betterscroll
88 | */
89 | scrollDestroy () {
90 | // https://github.com/d2-projects/d2-admin/issues/75
91 | try {
92 | this.BS.destroy()
93 | } catch (e) {
94 | delete this.BS
95 | this.BS = null
96 | }
97 | }
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/src/mixins/crud-pagination.js:
--------------------------------------------------------------------------------
1 | export default {
2 | data () {
3 | return {
4 | // 分页
5 | pagination: {
6 | current: 1,
7 | size: 10,
8 | total: 0
9 | }
10 | }
11 | },
12 | computed: {
13 | // 为搜索参数提供数据
14 | paginationSearchData () {
15 | return {
16 | page: this.pagination.current,
17 | page_size: this.pagination.size
18 | }
19 | },
20 | // vNode
21 | // 小型分页
22 | vNodePaginationMini () {
23 | const node =
24 |
41 |
55 |
42 | 
46 |
47 |
54 |
46 |
33 |
39 | ![]()
44 |
48 |
49 |
50 |
51 |
52 |
118 |
--------------------------------------------------------------------------------
/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
22 |
23 |
24 |
36 |
37 |
105 |
--------------------------------------------------------------------------------
/src/api/service.js:
--------------------------------------------------------------------------------
1 | import store from '@/store'
2 | import axios from 'axios'
3 | import { get } from 'lodash'
4 | import { Message, Notification } from 'element-ui'
5 | import utils from '@/utils'
6 | import env from '@/env'
7 |
8 | // 记录和显示错误
9 | function log (error) {
10 | store.dispatch('d2admin/log/push', {
11 | message: '数据请求异常',
12 | type: 'danger',
13 | meta: {
14 | error
15 | }
16 | })
17 | if (env.NODE_ENV === 'development') {
18 | utils.log.danger('>>>>>> Error >>>>>>')
19 | console.error(error)
20 | }
21 | Message({
22 | message: error.message,
23 | type: 'error',
24 | duration: 5 * 1000
25 | })
26 | }
27 |
28 | const service = axios.create()
29 |
30 | //返回值code=1
31 | service.interceptors.response.use(
32 | async response => {
33 | const dataAxios = response.data
34 | if (dataAxios.code === 0) {
35 | // 正常返回数据
36 | return dataAxios.data
37 | } else {
38 | const error = new Error(dataAxios.msg)
39 | // 需要重新登录
40 | // 50008 - 无效的 token
41 | // 50012 - 其它客户端登录
42 | // 50014 - token 过期
43 | if ([
44 | 50008,
45 | 50012,
46 | 50014
47 | ].indexOf(dataAxios.code) >= 0) {
48 | Notification.error({
49 | title: dataAxios.msg,
50 | message: '请重新登录'
51 | })
52 | await store.dispatch('d2admin/user/logout', { focus: true, remote: false, back: true })
53 | } else {
54 | log(error)
55 | }
56 | return Promise.reject(error)
57 | }
58 | },
59 | error => {
60 | if (error && error.response) {
61 | switch (error.response.status) {
62 | case 400:
63 | error.message = '请求错误'
64 | break
65 | case 401:
66 | error.message = '未授权，请登录'
67 | break
68 | case 403:
69 | error.message = '拒绝访问'
70 | break
71 | case 404:
72 | error.message = `请求地址出错: ${error.response.config.url}`
73 | break
74 | case 408:
75 | error.message = '请求超时'
76 | break
77 | case 500:
78 | error.message = '服务器内部错误'
79 | break
80 | case 501:
81 | error.message = '服务未实现'
82 | break
83 | case 502:
84 | error.message = '网关错误'
85 | break
86 | case 503:
87 | error.message = '服务不可用'
88 | break
89 | case 504:
90 | error.message = '网关超时'
91 | break
92 | case 505:
93 | error.message = 'HTTP版本不受支持'
94 | break
95 | default:
96 | break
97 | }
98 | }
99 | log(error)
100 | return Promise.reject(error)
101 | }
102 | )
103 |
104 | export function request (config) {
105 | const token = utils.cookies.get('token')
106 | let configDefault = {
107 | headers: {
108 | 'Authorization': token,
109 | 'Content-Type': get(config, 'headers.Content-Type', 'application/json')
110 | },
111 | timeout: 5000,
112 | baseURL: store.state.d2admin.api.base,
113 | data: {}
114 | }
115 | return service(Object.assign(configDefault, config))
116 | }
117 |
--------------------------------------------------------------------------------
4 |
10 |
5 |
9 |
11 |
21 |
12 | {{item.title}}
13 |
14 |
15 | {{item.fullTitle}}
16 |
17 |
18 | {{item.path}}
19 |
20 |