lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

特性: 增加 husky

This commit is contained in:
yuanzbz 2023-12-22 17:46:27 +08:00
parent 3c1001dd76
commit 7103c121f3
200 changed files with 9186 additions and 8380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
.eslintrc.js
View File

@ -16,11 +16,51 @@ module.exports = {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['vue', '@typescript-eslint'],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
},
rules: {},
rules: {
'no-console': 'off', // 禁止调用console对象的方法。
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-empty-function': ['off'], // 关闭空函数警告
'@typescript-eslint/no-inferrable-types': 'off', // 可以轻松推断的显式类型可能会增加不必要的冗长
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间
'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/no-v-html': 'off', // 禁止使用 v-html
'no-undef': 'off',
'no-redeclare': 'off',
'no-self-assign': 'off',
'no-sparse-arrays': 'off',
'vue/valid-v-for': 'off',
'vue/no-unused-vars': 'off',
'vue/require-v-for-key': 'off',
'no-useless-escape': 'off',
'vue/require-explicit-emits': 'off',
'no-case-declarations': 'off', // 不允许在 case 子句中使用词法声明
//禁止非空断言非空断言是在变量后面添加一个感叹号（!），表示该变量一定存在，不会为 null 或 undefined
'@typescript-eslint/no-non-null-assertion': 'off',
'vue/require-prop-types': 'off',
'@typescript-eslint/no-this-alias': 'off',
'no-async-promise-executor': 'off',
'vue/no-template-shadow': 'off',
'vue/require-default-prop': 'off', // 此规则要求为每个 prop 为必填时，必须提供默认值
'@typescript-eslint/no-unused-vars': [
// // 禁止定义未使用的变量
'off',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
},
}

4
.prettierrc.js
View File

@ -1,6 +1,8 @@
module.exports = {
// 一行的字符数，如果超过会进行换行，默认为80
printWidth: 100,
printWidth: 140,
// 缩进制表符宽度 | 空格数
tabWidth: 2,
// 行位是否使用分号，默认为true
semi: false,
vueIndentScriptAndStyle: true,

155
commitlint.config.js
View File

@ -2,82 +2,83 @@
// cz.config.js kk
/** @type {import('cz-git').CommitizenGitOptions} */
module.exports = {
ignores: [commit => commit.includes("init")],
extends: ["@commitlint/config-conventional"],
// alias: { fd: 'docs: fix typos' },
// messages: {
// type: 'Select the type of change that you\'re committing:',
// scope: 'Denote the SCOPE of this change (optional):',
// customScope: 'Denote the SCOPE of this chang e:',
// subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
// body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
// breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
// footerPrefixsSelect: 'Select the ISSUES type of changeList by this change (optional):',
// customFooterPrefixs: 'Input ISSUES prefix:',
// footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
// confirmCommit: 'Are you sure you want to proceed with the commit above?'
// },
prompt: {
// 中英文对照版
messages: {
type: '选择你要提交的类型 :',
scope: '选择一个提交范围（可选）:',
customScope: '请输入自定义的提交范围 :',
subject: '填写简短精炼的变更描述 :\n',
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixesSelect: '选择关联issue前缀（可选）:',
customFooterPrefix: '输入自定义issue前缀 :',
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
confirmCommit: '是否提交或修改commit ?'
},
types: [
{ value: '特性', name: '特性: 新增功能' },
{ value: '修复', name: '修复: 修复缺陷' },
{ value: '文档', name: '文档: 文档变更' },
{ value: '格式', name: '格式: 代码格式（不影响功能，例如空格、分号等格式修正）' },
{ value: '重构', name: '重构: 代码重构（不包括 bug 修复、功能新增）' },
{ value: '性能', name: '性能: 性能优化' },
{ value: '测试', name: '测试: 添加疏漏测试或已有测试改动' },
{ value: '构建', name: '构建: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
{ value: '集成', name: '集成: 修改 CI 配置、脚本' },
{ value: '回退', name: '回退: 回滚 commit' },
{ value: '其他', name: '其他: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
],
// emptyScopesAlias: 'empty: 不填写',
// customScopesAlias: 'custom: 自定义',
useEmoji: true,
// emojiAlign: 'center',
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
markBreakingChangeMode: false,
allowBreakingChanges: ['feat', 'fix'],
breaklineNumber: 100,
breaklineChar: '|',
skipQuestions: [],
issuePrefixs: [{ value: 'closed', name: 'closed: ISSUES has been processed' }],
customIssuePrefixsAlign: 'top',
emptyIssuePrefixsAlias: 'skip',
customIssuePrefixsAlias: 'custom',
allowCustomIssuePrefixs: true,
allowEmptyIssuePrefixs: true,
confirmColorize: true,
maxHeaderLength: Infinity,
maxSubjectLength: Infinity,
minSubjectLength: 0,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: ''
}
ignores: [(commit) => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
// alias: { fd: 'docs: fix typos' },
// messages: {
// type: 'Select the type of change that you\'re committing:',
// scope: 'Denote the SCOPE of this change (optional):',
// customScope: 'Denote the SCOPE of this chang e:',
// subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
// body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
// breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
// footerPrefixsSelect: 'Select the ISSUES type of changeList by this change (optional):',
// customFooterPrefixs: 'Input ISSUES prefix:',
// footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
// confirmCommit: 'Are you sure you want to proceed with the commit above?'
// },
prompt: {
// 中英文对照版
messages: {
type: '选择你要提交的类型 :',
scope: '选择一个提交范围（可选）:',
customScope: '请输入自定义的提交范围 :',
subject: '填写简短精炼的变更描述 :\n',
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixesSelect: '选择关联issue前缀（可选）:',
customFooterPrefix: '输入自定义issue前缀 :',
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
confirmCommit: '是否提交或修改commit ?',
},
types: [
{ value: '特性', name: '特性: 新增功能' },
{ value: '修复', name: '修复: 修复缺陷' },
{ value: '文档', name: '文档: 文档变更' },
{ value: '格式', name: '格式: 代码格式（不影响功能，例如空格、分号等格式修正）' },
{ value: '重构', name: '重构: 代码重构（不包括 bug 修复、功能新增）' },
{ value: '性能', name: '性能: 性能优化' },
{ value: '测试', name: '测试: 添加疏漏测试或已有测试改动' },
{
value: '构建',
name: '构建: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）',
},
{ value: '集成', name: '集成: 修改 CI 配置、脚本' },
{ value: '回退', name: '回退: 回滚 commit' },
{ value: '其他', name: '其他: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
],
// emptyScopesAlias: 'empty: 不填写',
// customScopesAlias: 'custom: 自定义',
useEmoji: true,
// emojiAlign: 'center',
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
markBreakingChangeMode: false,
allowBreakingChanges: ['feat', 'fix'],
breaklineNumber: 100,
breaklineChar: '|',
skipQuestions: [],
issuePrefixs: [{ value: 'closed', name: 'closed: ISSUES has been processed' }],
customIssuePrefixsAlign: 'top',
emptyIssuePrefixsAlias: 'skip',
customIssuePrefixsAlias: 'custom',
allowCustomIssuePrefixs: true,
allowEmptyIssuePrefixs: true,
confirmColorize: true,
maxHeaderLength: Infinity,
maxSubjectLength: Infinity,
minSubjectLength: 0,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: '',
},
}

9
package.json
View File

@ -12,7 +12,7 @@
"preview": "vite preview",
"build:ts": "vue-tsc --noEmit --skipLibCheck && vite build",
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx",
"lint:fix": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"lint:fix": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"prepare": "husky install"
},
@ -61,6 +61,7 @@
"devDependencies": {
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@element-plus/icons-vue": "^2.3.1",
"@typescript-eslint/eslint-plugin": "^5.32.0",
"@typescript-eslint/parser": "^5.32.0",
"@vitejs/plugin-vue": "^3.0.0",
@ -96,6 +97,10 @@
}
},
"lint-staged": {
"*.{vue,js,ts,jsx,tsx}": ["npm run lint","git add"]
"src/s*.{vue,js,ts,jsx,tsx}": [
"npm run lint:prettier",
"npm run lint:fix",
"git add ."
]
}
}

33
pnpm-lock.yaml
View File

@ -133,6 +133,9 @@ devDependencies:
'@commitlint/config-conventional':
specifier: ^17.3.0
version: 17.8.1
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.3.13)
'@typescript-eslint/eslint-plugin':
specifier: ^5.32.0
version: 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.56.0)(typescript@4.9.5)
@ -201,7 +204,7 @@ devDependencies:
version: 0.7.3(vite@3.2.7)(vue@3.3.13)
vite:
specifier: ^3.0.0
version: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
version: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
vite-plugin-compression:
specifier: ^0.5.1
version: 0.5.1(vite@3.2.7)
@ -397,7 +400,7 @@ packages:
lodash.merge: 4.6.2
lodash.uniq: 4.5.0
resolve-from: 5.0.0
ts-node: 10.9.2(@types/node@18.19.3)(typescript@4.9.5)
ts-node: 10.9.2(@types/node@20.5.1)(typescript@4.9.5)
typescript: 4.9.5
transitivePeerDependencies:
- '@swc/core'
@ -534,7 +537,6 @@ packages:
vue: ^3.2.0
dependencies:
vue: 3.3.13(typescript@4.9.5)
dev: false
/@esbuild/android-arm@0.15.18:
resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
@ -774,6 +776,7 @@ packages:
dependencies:
undici-types: 5.26.5
dev: true
optional: true
/@types/node@20.10.5:
resolution: {integrity: sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==}
@ -1121,7 +1124,7 @@ packages:
vite: ^3.0.0
vue: ^3.2.25
dependencies:
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
vue: 3.3.13(typescript@4.9.5)
dev: true
@ -2350,7 +2353,7 @@ packages:
dependencies:
'@types/node': 20.5.1
cosmiconfig: 8.3.6(typescript@4.9.5)
ts-node: 10.9.2(@types/node@18.19.3)(typescript@4.9.5)
ts-node: 10.9.2(@types/node@20.5.1)(typescript@4.9.5)
typescript: 4.9.5
dev: true
@ -6672,7 +6675,7 @@ packages:
typescript: 4.9.5
dev: true
/ts-node@10.9.2(@types/node@18.19.3)(typescript@4.9.5):
/ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5):
resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
hasBin: true
peerDependencies:
@ -6691,7 +6694,7 @@ packages:
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 18.19.3
'@types/node': 20.5.1
acorn: 8.11.2
acorn-walk: 8.3.1
arg: 4.1.3
@ -6937,7 +6940,7 @@ packages:
dependencies:
acorn: 8.11.2
chokidar: 3.5.3
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.6
dev: true
@ -6961,7 +6964,7 @@ packages:
dependencies:
acorn: 8.11.2
chokidar: 3.5.3
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.6
dev: true
@ -7135,7 +7138,7 @@ packages:
chalk: 4.1.2
debug: 4.3.4(supports-color@9.4.0)
fs-extra: 10.1.0
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
transitivePeerDependencies:
- supports-color
dev: true
@ -7152,7 +7155,7 @@ packages:
fs-extra: 10.1.0
magic-string: 0.25.9
pathe: 0.2.0
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
dev: true
/vite-plugin-svg-icons@2.0.1(vite@3.2.7):
@ -7168,7 +7171,7 @@ packages:
pathe: 0.2.0
svg-baker: 1.7.0
svgo: 2.8.0
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
transitivePeerDependencies:
- supports-color
dev: true
@ -7180,10 +7183,10 @@ packages:
dependencies:
'@vue/compiler-sfc': 3.3.13
magic-string: 0.25.9
vite: 3.2.7(@types/node@18.19.3)(sass@1.69.5)
vite: 3.2.7(@types/node@20.5.1)(sass@1.69.5)
dev: true
/vite@3.2.7(@types/node@18.19.3)(sass@1.69.5):
/vite@3.2.7(@types/node@20.5.1)(sass@1.69.5):
resolution: {integrity: sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@ -7208,7 +7211,7 @@ packages:
terser:
optional: true
dependencies:
'@types/node': 18.19.3
'@types/node': 20.5.1
esbuild: 0.15.18
postcss: 8.4.32
resolve: 1.22.8

6
src/App.vue
View File

@ -5,14 +5,14 @@
</template>
<script lang="ts" setup>
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
// 配置element中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const SettingStore = useSettingStore()
// 配置全局组件大小
const globalComSize = computed(():string=>SettingStore.themeConfig.globalComSize)
const globalComSize = computed((): string => SettingStore.themeConfig.globalComSize)
</script>
<style lang="scss">

86
src/api/errorCodeType.ts
View File

@ -1,44 +1,44 @@
export const errorCodeType = function(code:string):string{
let errMessage:string = "未知错误"
switch (code) {
case 400:
errMessage = '请求失败！请您稍后重试'
break
case 401:
errMessage = '未授权，请重新登录'
break
case 403:
errMessage = '当前账号无权限访问！'
break
case 404:
errMessage = '你所访问的资源不存在！'
break
case 405:
errMessage = '请求方式错误！请您稍后重试'
break
case 408:
errMessage = '请求超时！请您稍后重试'
break
case 500:
errMessage = '服务器端出错'
break
case 501:
errMessage = '网络未实现'
break
case 502:
errMessage = '网络错误'
break
case 503:
errMessage = '服务不可用'
break
case 504:
errMessage = '网络超时'
break
case 505:
errMessage = 'http版本不支持该请求'
break
default:
errMessage = `其他连接错误 --${code}`
}
return errMessage
export const errorCodeType = function (code: string): string {
let errMessage = '未知错误'
switch (code) {
case 400:
errMessage = '请求失败！请您稍后重试'
break
case 401:
errMessage = '未授权，请重新登录'
break
case 403:
errMessage = '当前账号无权限访问！'
break
case 404:
errMessage = '你所访问的资源不存在！'
break
case 405:
errMessage = '请求方式错误！请您稍后重试'
break
case 408:
errMessage = '请求超时！请您稍后重试'
break
case 500:
errMessage = '服务器端出错'
break
case 501:
errMessage = '网络未实现'
break
case 502:
errMessage = '网络错误'
break
case 503:
errMessage = '服务不可用'
break
case 504:
errMessage = '网络超时'
break
case 505:
errMessage = 'http版本不支持该请求'
break
default:
errMessage = `其他连接错误 --${code}`
}
return errMessage
}

77
src/api/request.ts
View File

@ -1,57 +1,62 @@
import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElMessage } from "element-plus";
import {useUserStore} from "@/store/modules/user"
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
// 创建axios实例 进行基本参数配置
const service = axios.create({
// 默认请求地址，根据环境的不同可在.env 文件中进行修改
baseURL: import.meta.env.VUE_APP_BASE_API,
// 设置接口访问超时时间
timeout: 3000000, // request timeout，
// 跨域时候允许携带凭证
withCredentials: true
// 默认请求地址，根据环境的不同可在.env 文件中进行修改
baseURL: import.meta.env.VUE_APP_BASE_API,
// 设置接口访问超时时间
timeout: 3000000, // request timeout，
// 跨域时候允许携带凭证
withCredentials: true,
})
// request interceptor 接口请求拦截
service.interceptors.request.use((config:AxiosRequestConfig)=>{
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
/**
* 用户登录之后获取服务端返回的token,后面每次请求都在请求头中带上token进行JWT校验
* token 存储在本地储存中（storage）、vuex、pinia
*/
const userStore = useUserStore();
const token: string = userStore.token;
const userStore = useUserStore()
const token: string = userStore.token
// 自定义请求头
if(token){ config.headers['Authorization'] = token}
if (token) {
config.headers['Authorization'] = token
}
return config
},(error: AxiosError) => {
},
(error: AxiosError) => {
// 请求错误，这里可以用全局提示框进行提示
return Promise.reject(error);
})
return Promise.reject(error)
},
)
// response interceptor 接口响应拦截
service.interceptors.response.use((response: AxiosResponse) =>{
service.interceptors.response.use(
(response: AxiosResponse) => {
// 直接返回res，当然你也可以只返回res.data
// 系统如果有自定义code也可以在这里处理
return response
},(error: AxiosError) => {
},
(error: AxiosError) => {
return Promise.reject(error)
})
},
)
/**
* @description 显示错误消息
* opt 传入参数
* err 错误信息
* type 消息类型
* duration 消息持续时间
*/
function showErrMessage (opt, err, type:any= 'error', duration:number = 5000){
ElMessage({
message: err.msg,
type:type,
duration: duration
})
}
// /**
// * @description 显示错误消息
// * opt 传入参数
// * err 错误信息
// * type 消息类型
// * duration 消息持续时间
// */
// function showErrMessage(opt, err, type: any = 'error', duration = 5000) {
// ElMessage({
// message: err.msg,
// type: type,
// duration: duration,
// });
// }
export default service

10
src/api/user.ts
View File

@ -1,9 +1,9 @@
import request from './request'
export function login(data) {
return request({
url: '/vue-element-perfect/user/login',
method: 'post',
data
})
return request({
url: '/vue-element-perfect/user/login',
method: 'post',
data,
})
}

60
src/assets/iconfont/iconfont.css
View File

@ -1,12 +1,11 @@
@font-face {
font-family: "iconfont"; /* Project id 3641732 */
src: url('./iconfont.woff2?t=1663216428515') format('woff2'),
url('./iconfont.woff?t=1663216428515') format('woff'),
url('./iconfont.ttf?t=1663216428515') format('truetype');
font-family: 'iconfont'; /* Project id 3641732 */
src: url('./iconfont.woff2?t=1663216428515') format('woff2'), url('./iconfont.woff?t=1663216428515') format('woff'),
url('./iconfont.ttf?t=1663216428515') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
@ -14,102 +13,101 @@
}
.icon-yin:before {
content: "\e6a0";
content: '\e6a0';
}
.icon-dabaoyu:before {
content: "\e6a7";
content: '\e6a7';
}
.icon-shuaxin1:before {
content: "\e627";
content: '\e627';
}
.icon-shuaxin:before {
content: "\e629";
content: '\e629';
}
.icon-duoyun-2-copy:before {
content: "\e68d";
content: '\e68d';
}
.icon-duoyun-1:before {
content: "\e679";
content: '\e679';
}
.icon-daxue:before {
content: "\e67a";
content: '\e67a';
}
.icon-dayu:before {
content: "\e67b";
content: '\e67b';
}
.icon-feng:before {
content: "\e67c";
content: '\e67c';
}
.icon-duoyun-3:before {
content: "\e67d";
content: '\e67d';
}
.icon-duoyun-2:before {
content: "\e67e";
content: '\e67e';
}
.icon-leiyujiaojia:before {
content: "\e67f";
content: '\e67f';
}
.icon-duoyun:before {
content: "\e680";
content: '\e680';
}
.icon-zhongyu:before {
content: "\e681";
content: '\e681';
}
.icon-wu:before {
content: "\e682";
content: '\e682';
}
.icon-xiaoyu:before {
content: "\e683";
content: '\e683';
}
.icon-xiaoxue:before {
content: "\e684";
content: '\e684';
}
.icon-shandian:before {
content: "\e685";
content: '\e685';
}
.icon-xue:before {
content: "\e686";
content: '\e686';
}
.icon-zhongxue:before {
content: "\e687";
content: '\e687';
}
.icon-yangchen:before {
content: "\e688";
content: '\e688';
}
.icon-yueliang:before {
content: "\e689";
content: '\e689';
}
.icon-yujiaxue:before {
content: "\e68a";
content: '\e68a';
}
.icon-qing:before {
content: "\e68b";
content: '\e68b';
}
.icon-mai:before {
content: "\e68c";
content: '\e68c';
}

67
src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

143
src/components/AvatarCropper/index.vue
View File

@ -1,86 +1,85 @@
<template>
<vue-cropper
ref="cropper"
:img="avatarUrl"
:output-size="defaultOptions.outputSize"
:output-type="defaultOptions.outputType"
:info="defaultOptions.info"
:full="defaultOptions.full"
:fixed="defaultOptions.fixed"
:autoCropWidth="defaultOptions.autoCropWidth"
:autoCropHeight="defaultOptions.autoCropHeight"
:fixed-box="defaultOptions.fixedBox"
:auto-crop="defaultOptions.autoCrop"
:center-box="defaultOptions.centerBox"
@real-time="realTime"
ref="cropper"
:img="avatarUrl"
:output-size="defaultOptions.outputSize"
:output-type="defaultOptions.outputType"
:info="defaultOptions.info"
:full="defaultOptions.full"
:fixed="defaultOptions.fixed"
:auto-crop-width="defaultOptions.autoCropWidth"
:auto-crop-height="defaultOptions.autoCropHeight"
:fixed-box="defaultOptions.fixedBox"
:auto-crop="defaultOptions.autoCrop"
:center-box="defaultOptions.centerBox"
@real-time="realTime"
/>
</template>
<script lang="ts" setup>
import {defineExpose, reactive, ref} from 'vue'
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
import { defineExpose, reactive, ref } from 'vue'
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
const emit = defineEmits(['change'])
let props = defineProps({
avatarUrl:{
type:String
},
options:{
type:Object,
default:()=>{}
}
})
let cropper = ref()
const defaultOptions = reactive({
outputSize:0.8, // 裁剪生成图片的质量
outputType: 'png', // 生成图片的格式
info: true, // 裁剪框的大小信息
fixed: true, // 是否开启截图框宽高固定比例
autoCrop: true, // 是否默认生成截图框
anMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
autoCropWidth: 300, // 默认生成截图框宽度
autoCropHeight: 300, // 默认生成截图框高度
// 只有自动截图开启 宽度高度才生效
centerBox: false, // 截图框是否被限制在图片里面
high: true, // 是否按照dpr设备比例图片
fixedBox: false, // 固定截图框大小 不允许改变
full: false, // 是否输出原图比例的截图
...props.options
})
const getBase64 = ()=>{
return new Promise(resolve => {
cropper.value.getCropData((data) => {
resolve(data)
})
const emit = defineEmits(['change'])
let props = defineProps({
avatarUrl: {
type: String,
},
options: {
type: Object,
default: () => {},
},
})
}
const rotateLeft = () => {
cropper.value.rotateLeft()
}
const rotateRight = () => {
cropper.value.rotateRight()
}
let cropper = ref()
const zoom = (percent) => {
cropper.value.changeScale(percent)
}
const defaultOptions = reactive({
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'png', // 生成图片的格式
info: true, // 裁剪框的大小信息
fixed: true, // 是否开启截图框宽高固定比例
autoCrop: true, // 是否默认生成截图框
anMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
autoCropWidth: 300, // 默认生成截图框宽度
autoCropHeight: 300, // 默认生成截图框高度
// 只有自动截图开启 宽度高度才生效
centerBox: false, // 截图框是否被限制在图片里面
high: true, // 是否按照dpr设备比例图片
fixedBox: false, // 固定截图框大小 不允许改变
full: false, // 是否输出原图比例的截图
...props.options,
})
// 实时预览图片
const realTime = (data)=>{
emit('change',data)
}
const getBase64 = () => {
return new Promise((resolve) => {
cropper.value.getCropData((data) => {
resolve(data)
})
})
}
const rotateLeft = () => {
cropper.value.rotateLeft()
}
const rotateRight = () => {
cropper.value.rotateRight()
}
defineExpose({
getBase64,
rotateLeft,
rotateRight,
zoom
})
const zoom = (percent) => {
cropper.value.changeScale(percent)
}
// 实时预览图片
const realTime = (data) => {
emit('change', data)
}
defineExpose({
getBase64,
rotateLeft,
rotateRight,
zoom,
})
</script>

207
src/components/CodeMirror/index.vue
View File

@ -1,121 +1,120 @@
<template>
<textarea ref="codeEditor" placeholder="请输入..." ></textarea>
<textarea ref="codeEditor" placeholder="请输入..."></textarea>
</template>
<script>
import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
// codemirror基础资源引入
import _CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
// language
import 'codemirror/mode/javascript/javascript.js'
import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
// codemirror基础资源引入
import _CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
// language
import 'codemirror/mode/javascript/javascript.js'
// theme css
import 'codemirror/theme/monokai.css'
// 折叠资源引入:开始
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/foldgutter.js";
// 折叠资源引入:结束
// theme css
import 'codemirror/theme/monokai.css'
// 折叠资源引入:开始
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/foldgutter.js'
// 折叠资源引入:结束
// 搜索资源引入:开始
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
import "codemirror/addon/search/jump-to-line.js";
// 搜索资源引入:开始
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
import 'codemirror/addon/search/jump-to-line.js'
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
// 搜索资源引入:结束
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
// 搜索资源引入:结束
// 启用placeholder
import "codemirror/addon/display/placeholder.js";
// 启用placeholder
import 'codemirror/addon/display/placeholder.js'
import "codemirror/addon/selection/active-line.js"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
import 'codemirror/addon/selection/active-line.js' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
const CodeMirror = window.CodeMirror || _CodeMirror;
const CodeMirror = window.CodeMirror || _CodeMirror
export default defineComponent({
props: {
modelValue: String,
defaultValue: String,
readOnly: {
type: Boolean,
default: false
}
},
setup(props, context) {
const { modelValue, defaultValue, readOnly } = toRefs(props);
const codeEditor = ref();
let editor;
watch(modelValue, () => {
if (null != editor && modelValue.value && modelValue.value !== editor.getValue()) {
// 触发v-model的双向绑定
editor.setValue(modelValue.value);
}
});
watch(readOnly, () => {
if (null != editor) {
editor.setOption("readOnly", readOnly.value);
}
});
onMounted(() => {
editor = CodeMirror.fromTextArea(codeEditor.value, {
value: modelValue.value,
// mime: "text/javascript",
mode: "application/json",
indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
lineNumbers: true, // 是否在编辑器左侧显示行号
matchBrackets: true, // 括号匹配
readOnly: readOnly.value,
// 启用代码折叠相关功能:开始
foldGutter: true,
lineWrapping: true, //是否自动换行
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
// 启用代码折叠相关功能:结束
styleActiveLine: false // 光标行高亮
});
// 监听编辑器的change事件
editor.on("change", () => {
// 触发v-model的双向绑定
context.emit("update:modelValue", editor.getValue());
});
if (defaultValue.value) {
editor.setValue(defaultValue.value);
}
});
onBeforeUnmount(() => {
if (null !== editor) {
editor.toTextArea();
editor = null;
}
});
return { codeEditor };
}
});
export default defineComponent({
props: {
modelValue: String,
defaultValue: String,
readOnly: {
type: Boolean,
default: false,
},
},
setup(props, context) {
const { modelValue, defaultValue, readOnly } = toRefs(props)
const codeEditor = ref()
let editor
watch(modelValue, () => {
if (null != editor && modelValue.value && modelValue.value !== editor.getValue()) {
// 触发v-model的双向绑定
editor.setValue(modelValue.value)
}
})
watch(readOnly, () => {
if (null != editor) {
editor.setOption('readOnly', readOnly.value)
}
})
onMounted(() => {
editor = CodeMirror.fromTextArea(codeEditor.value, {
value: modelValue.value,
// mime: "text/javascript",
mode: 'application/json',
indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
lineNumbers: true, // 是否在编辑器左侧显示行号
matchBrackets: true, // 括号匹配
readOnly: readOnly.value,
// 启用代码折叠相关功能:开始
foldGutter: true,
lineWrapping: true, //是否自动换行
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
// 启用代码折叠相关功能:结束
styleActiveLine: false, // 光标行高亮
})
// 监听编辑器的change事件
editor.on('change', () => {
// 触发v-model的双向绑定
context.emit('update:modelValue', editor.getValue())
})
if (defaultValue.value) {
editor.setValue(defaultValue.value)
}
})
onBeforeUnmount(() => {
if (null !== editor) {
editor.toTextArea()
editor = null
}
})
return { codeEditor }
},
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.CodeMirror-wrap{
height: 100%;
}
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
white-space: nowrap;
background-color: transparent;
border-right: 1px solid #ddd;
}
.CodeMirror-wrap {
height: 100%;
}
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
white-space: nowrap;
background-color: transparent;
border-right: 1px solid #ddd;
}
</style>

25
src/components/CountTo/index.vue
View File

@ -103,6 +103,9 @@
}
this.$emit('mountedCallback')
},
unmounted() {
cancelAnimationFrame(this.rAF)
},
methods: {
start() {
this.localStartVal = this.startVal
@ -142,26 +145,15 @@
if (this.useEasing) {
if (this.countDown) {
this.printVal =
this.localStartVal -
this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
} else {
this.printVal = this.easingFn(
progress,
this.localStartVal,
this.endVal - this.localStartVal,
this.localDuration,
)
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)
}
} else {
if (this.countDown) {
this.printVal =
this.localStartVal -
(this.localStartVal - this.endVal) * (progress / this.localDuration)
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration)
} else {
this.printVal =
this.localStartVal +
(this.endVal - this.localStartVal) * (progress / this.localDuration)
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)
}
}
if (this.countDown) {
@ -195,8 +187,5 @@
return this.prefix + x1 + x2 + this.suffix
},
},
destroyed() {
cancelAnimationFrame(this.rAF)
},
}
</script>

5
src/components/CountTo/requestAnimationFrame.js
View File

@ -23,10 +23,7 @@ if (isServer) {
}
prefix = prefixes[i]
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
cancelAnimationFrame =
cancelAnimationFrame ||
window[prefix + 'CancelAnimationFrame'] ||
window[prefix + 'CancelRequestAnimationFrame']
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
}
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout

478
src/components/DataScreen/Multiline/index.vue
View File

@ -1,269 +1,269 @@
<template>
<div ref="chartsRef" class="echarts"/>
<div ref="chartsRef" class="echarts" />
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement | null>()
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement | null>()
let colorList = ['#46ea91', '#2ba0ff', '#ed593b', '#7357ff', '#f2d750'];
const options = {
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 5,
textStyle: {
color: '#fff',
padding: [3, 0, 0, 0],
let colorList = ['#46ea91', '#2ba0ff', '#ed593b', '#7357ff', '#f2d750']
const options = {
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 5,
textStyle: {
color: '#fff',
padding: [3, 0, 0, 0],
},
},
},
tooltip: {
trigger: 'axis',
},
grid: {
top: '14%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8'],
axisLine: {
lineStyle: {
color: '#33BBFF',
tooltip: {
trigger: 'axis',
},
grid: {
top: '14%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8'],
axisLine: {
lineStyle: {
color: '#33BBFF',
},
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
textStyle: {
color: '#5FBBEB',
axisTick: {
show: false,
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 10,
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 0, 0],
// 这里的margin和axisLabel的margin要一致!
margin: 10,
// 移入时的字体大小
axisLabel: {
interval: 0,
textStyle: {
color: '#5FBBEB',
},
// 默认x轴字体大小
fontSize: 12,
backgroundColor: 'rgba(0,0,0,0)',
// margin:文字到x轴的距离
margin: 10,
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 0, 0],
// 这里的margin和axisLabel的margin要一致!
margin: 10,
// 移入时的字体大小
fontSize: 12,
backgroundColor: 'rgba(0,0,0,0)',
},
},
boundaryGap: false,
},
],
yAxis: [
{
name: '单位/件',
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#05D5FF',
},
},
axisLabel: {
textStyle: {
color: '#5FBBEB',
},
},
splitLine: {
show: false,
},
},
boundaryGap: false,
},
],
yAxis: [
{
name: '单位/件',
axisTick: {
show: false,
},
axisLine: {
show: true,
],
series: [
{
name: '咨询',
type: 'line',
data: [100, 20, 30, 102, 15, 30, 20, 18],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
color: '#05D5FF',
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#90ffc6',
},
{
offset: 1,
color: '#46ea91',
},
]),
shadowColor: 'rgba(144, 255, 198, .3)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0],
},
},
},
axisLabel: {
textStyle: {
color: '#5FBBEB',
{
name: '求助',
type: 'line',
data: [20, 12, 11, 14, 25, 16, 10, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#67bcfc',
},
{
offset: 1,
color: '#2ba0ff',
},
]),
shadowColor: 'rgba(105, 188, 252,.3)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[1],
borderColor: colorList[1],
},
},
},
splitLine: {
show: false,
},
},
],
series: [
{
name: '咨询',
type: 'line',
data: [100, 20, 30, 102, 15, 30, 20, 18],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#90ffc6',
{
name: '无效',
type: 'line',
data: [150, 120, 170, 140, 100, 160, 110, 110],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#fc937e ',
},
{
offset: 1,
color: '#ed593b',
},
]),
shadowColor: 'rgb(252, 147, 126,.3)',
shadowBlur: 2,
shadowOffsetY: 2,
},
itemStyle: {
normal: {
color: colorList[2],
borderColor: colorList[2],
},
{
offset: 1,
color: '#46ea91',
},
]),
shadowColor: 'rgba(144, 255, 198, .3)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0],
},
},
},
{
name: '求助',
type: 'line',
data: [20, 12, 11, 14, 25, 16, 10, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#67bcfc',
{
name: '投诉举报',
type: 'line',
data: [200, 80, 100, 30, 60, 50, 110, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#a390ff',
},
{
offset: 1,
color: '#7357ff',
},
]),
shadowColor: 'rgba(115, 87, 255, .1)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[3],
borderColor: colorList[3],
},
{
offset: 1,
color: '#2ba0ff',
},
]),
shadowColor: 'rgba(105, 188, 252,.3)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[1],
borderColor: colorList[1],
},
},
},
{
name: '无效',
type: 'line',
data: [150, 120, 170, 140, 100, 160, 110, 110],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#fc937e ',
{
name: '建议',
type: 'line',
data: [20, 80, 150, 30, 60, 50, 50, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#ffeb86',
},
{
offset: 1,
color: '#f2d750',
},
]),
shadowColor: 'rgba(255, 235, 134, .5)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[4],
borderColor: colorList[4],
},
{
offset: 1,
color: '#ed593b',
},
]),
shadowColor: 'rgb(252, 147, 126,.3)',
shadowBlur: 2,
shadowOffsetY: 2,
},
itemStyle: {
normal: {
color: colorList[2],
borderColor: colorList[2],
},
},
},
{
name: '投诉举报',
type: 'line',
data: [200, 80, 100, 30, 60, 50, 110, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#a390ff',
},
{
offset: 1,
color: '#7357ff',
},
]),
shadowColor: 'rgba(115, 87, 255, .1)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[3],
borderColor: colorList[3],
},
},
},
{
name: '建议',
type: 'line',
data: [20, 80, 150, 30, 60, 50, 50, 20],
symbolSize: 1,
symbol: 'circle',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{
offset: 0,
color: '#ffeb86',
},
{
offset: 1,
color: '#f2d750',
},
]),
shadowColor: 'rgba(255, 235, 134, .5)',
shadowBlur: 5,
shadowOffsetY: 5,
},
itemStyle: {
normal: {
color: colorList[4],
borderColor: colorList[4],
},
},
},
],
};
],
}
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>
<style lang="scss" scoped>
.echarts{
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;
}
</style>

6
src/components/DataScreen/barEcharts/index.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="echarts" ref="chartsRef" />
<div ref="chartsRef" class="echarts" />
</template>
<script setup lang="ts">
import BarCharts from './components/bar.vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref,reactive } from 'vue'
import { onMounted, ref, reactive } from 'vue'
const chartsRef = ref<HTMLElement | null>()
const data = [154, 230, 224, 218, 135, 147, 260]
const color = ['#fa796f', '#54c1fb', '#ca6cd4', '#59dcc1', '#09a4ea', '#e98f4d', '#ea8e49']
@ -21,7 +21,6 @@
dataOptions.push(obj)
})
const options = {
color,
grid: {
@ -95,7 +94,6 @@
},
},
],
}
let chart: EChartsType

184
src/components/DataScreen/lineEcharts/index.vue
View File

@ -1,113 +1,111 @@
<template>
<div class="echarts" ref="chartsRef" />
<div ref="chartsRef" class="echarts" />
</template>
<script setup lang="ts">
import BarCharts from './components/bar.vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref,reactive } from 'vue'
const chartsRef = ref<HTMLElement | null>()
import BarCharts from './components/bar.vue'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref, reactive } from 'vue'
const chartsRef = ref<HTMLElement | null>()
const options = {
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0.7)',
formatter: (name, val) => {
const tipHtml = `
const options = {
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.7)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0.7)',
formatter: (name, val) => {
const tipHtml = `
<div class="m-info" style=" opacity: 0.95;font-size: 12px; color: white;" >
<div class="title" ></div>
<div class="title" >完成占比${name[0].data}</div>
</div>`
return tipHtml
},
},
yAxis: {
// 设置坐标轴的 文字样式
axisLabel: {
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
// 坐标轴轴线相关设置。
splitLine: {
lineStyle: {
color: '#2d5baf',
return tipHtml
},
},
},
xAxis: {
splitLine: {
show: false,
},
// 坐标轴轴线相关设置。
axisLine: {
lineStyle: {
color: '#2d5baf',
},
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
yAxis: {
// 设置坐标轴的 文字样式
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
axisTick: {
// 取消坐标轴刻度线
show: false,
},
},
series: [
{
data: [154, 230, 224, 218, 135, 147, 260],
type: 'line',
// smooth:false, //关键点，为true是不支持虚线的，实线就用true
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
markLine: {
silent: true,
axisLabel: {
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
itemStyle: {
normal: {
color: '#920783', // 设置 symbol的颜色
lineStyle: {
width: 3,
color: '#920783',
type: 'solid', // 'dotted'虚线 'solid'实线
},
// 坐标轴轴线相关设置。
splitLine: {
lineStyle: {
color: '#2d5baf',
},
},
},
],
xAxis: {
splitLine: {
show: false,
},
// 坐标轴轴线相关设置。
axisLine: {
lineStyle: {
color: '#2d5baf',
},
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
// 设置坐标轴的 文字样式
color: '#bbdaff',
margin: 20, // 刻度标签与轴线之间的距离。
},
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
axisTick: {
// 取消坐标轴刻度线
show: false,
},
},
series: [
{
data: [154, 230, 224, 218, 135, 147, 260],
type: 'line',
// smooth:false, //关键点，为true是不支持虚线的，实线就用true
symbolSize: 12, // 拐点圆的大小
symbol: 'circle',
markLine: {
silent: true,
},
itemStyle: {
normal: {
color: '#920783', // 设置 symbol的颜色
lineStyle: {
width: 3,
color: '#920783',
type: 'solid', // 'dotted'虚线 'solid'实线
},
},
},
},
],
}
}
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>
<style lang="scss" scoped>
.echarts {
height: 100%;
width: 100%;
}
.echarts {
height: 100%;
width: 100%;
}
</style>

6
src/components/DataScreen/migrationEcharts/index.vue
View File

@ -5,7 +5,7 @@
import { geoJson } from './map.js'
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, onUnmounted } from "vue";
import { onMounted, onUnmounted } from 'vue'
import { cityIconData } from './data.js'
import logo from '@/assets/image/logo.png'
const props = defineProps({
@ -319,8 +319,8 @@
return chart
}
onUnmounted(()=>{
chart&&chart.dispose()
onUnmounted(() => {
chart && chart.dispose()
})
onMounted(() => {

272
src/components/DataScreen/pie/index.vue
View File

@ -1,36 +1,36 @@
<template>
<div ref="chartsRef" class="echarts"/>
<div ref="chartsRef" class="echarts" />
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement | null>()
var trafficWay = [
{
name: 'Ⅰ类',
value: 20,
},
{
name: 'Ⅱ类',
value: 20,
},
{
name: 'Ⅲ类',
value: 20,
},
{
name: 'Ⅳ类',
value: 20,
},
{ name: 'Ⅴ类', value: 20 },
{ name: '劣Ⅴ类', value: 20 },
];
import * as echarts from 'echarts'
import { EChartsType } from 'echarts/core'
import { onMounted, ref } from 'vue'
const chartsRef = ref<HTMLElement | null>()
var trafficWay = [
{
name: 'Ⅰ类',
value: 20,
},
{
name: 'Ⅱ类',
value: 20,
},
{
name: 'Ⅲ类',
value: 20,
},
{
name: 'Ⅳ类',
value: 20,
},
{ name: 'Ⅴ类', value: 20 },
{ name: '劣Ⅴ类', value: 20 },
]
var data = [];
var color = ['#fd566a', '#9787ff', '#fdb36a', '#fdd56a', '#6da7ff', '#63e1f2', '#ff3000'];
for (var i = 0; i < trafficWay.length; i++) {
data.push(
var data = []
var color = ['#fd566a', '#9787ff', '#fdb36a', '#fdd56a', '#6da7ff', '#63e1f2', '#ff3000']
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
@ -59,121 +59,125 @@ for (var i = 0; i < trafficWay.length; i++) {
borderWidth: 0,
},
},
}
);
}
var seriesOption = [
{
name: '',
type: 'pie',
clockWise: false,
radius: [105, 109],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
},
)
}
var seriesOption = [
{
name: '',
type: 'pie',
clockWise: false,
radius: [105, 109],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
formatter: function (params) {
var percent = 0;
var total = 0;
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
return params.name + '\t' + percent + '%';
} else {
return '';
}
formatter: function (params) {
var percent = 0
var total = 0
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value
}
percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== '') {
return params.name + '\t' + percent + '%'
} else {
return ''
}
},
},
labelLine: {
length: 10,
length2: 20,
show: true,
color: '#00ffff',
},
},
labelLine: {
length: 10,
length2: 20,
show: true,
color: '#00ffff',
},
data: data,
},
]
let options = {
color: color,
title: [
{
text: '水质监测',
top: '44%',
textAlign: 'center',
left: '49.50%',
backgroundColor: '#163253',
borderRadius: 100,
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '400',
},
},
{
text: '水环境监测站',
top: '49%',
textAlign: 'center',
left: '49.50%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '400',
},
},
{
text: '9',
top: '53%',
textAlign: 'center',
left: '48%',
textStyle: {
color: '#f6ea2f',
fontSize: 25,
fontWeight: '800',
fontStyle: 'italic',
},
},
{
text: '个',
top: '53.5%',
textAlign: 'center',
left: '50.5%',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: '400',
},
},
],
tooltip: {
show: false,
},
data: data,
},
];
let options = {
color: color,
title: [{
text: '水质监测',
top: '44%',
textAlign: 'center',
left: '49.50%',
backgroundColor: '#163253',
borderRadius: 100,
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '400',
},
}, {
text: '水环境监测站',
top: '49%',
textAlign: 'center',
left: '49.50%',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight: '400',
},
}, {
text: '9',
top: '53%',
textAlign: 'center',
left: '48%',
textStyle: {
color: '#f6ea2f',
fontSize: 25,
fontWeight: '800',
fontStyle: 'italic'
},
}, {
text: '个',
top: '53.5%',
textAlign: 'center',
left: '50.5%',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: '400',
},
}],
tooltip: {
show: false,
},
toolbox: {
show: false,
},
series: seriesOption,
};
toolbox: {
show: false,
},
series: seriesOption,
}
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
let chart: EChartsType
const initChart = () => {
const chart = echarts.init(chartsRef.value)
chart.setOption(options)
return chart
}
onMounted(() => {
chart = initChart()
window.addEventListener('resize', function () {
chart && chart.resize()
})
})
})
</script>
<style lang="scss" scoped>
.echarts{
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;
}
</style>

2
src/components/PageWrapLayout/index.vue
View File

@ -9,5 +9,5 @@
<script lang="ts" setup></script>
<style lang="scss" scoped>
@import "./index.scss";
@import './index.scss';
</style>

58
src/components/RightClickMenu/index.vue
View File

@ -1,12 +1,8 @@
<template>
<div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
<div
v-for="(item, index) in data"
:key="index"
class="operating"
@click.stop="operatingRightAction($event, item)"
>{{ item.label }}</div
>
<div v-if="isShow" ref="rightMenu" class="g-right-click-menu" :style="style">
<div v-for="(item, index) in data" :key="index" class="operating" @click.stop="operatingRightAction($event, item)">{{
item.label
}}</div>
</div>
</template>
<script lang="ts">
@ -37,16 +33,10 @@
default: true,
},
},
watch: {
left: {
handler(newName, oldName) {
if (newName) {
this.isShow = true
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
// immediate: true
},
data() {
return {
isShow: false,
}
},
computed: {
style() {
@ -59,19 +49,15 @@
}
},
},
data() {
return {
isShow: false,
}
},
methods: {
/**
* @func 点击操作
* @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
*/
operatingRightAction($event, val) {
this.$emit('ok', $event, val)
this.isShow = false
watch: {
left: {
handler(newName, oldName) {
if (newName) {
this.isShow = true
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
// immediate: true
},
},
mounted() {
@ -85,6 +71,16 @@
}
})
},
methods: {
/**
* @func 点击操作
* @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
*/
operatingRightAction($event, val) {
this.$emit('ok', $event, val)
this.isShow = false
},
},
}
</script>
<style lang="scss" scoped>

18
src/components/SearchForm/components/BaseFormItem.vue
View File

@ -1,24 +1,19 @@
<template>
<el-form-item :label="config?.label" v-if="config.valueType === 'input'" style="width: 100%">
<el-form-item v-if="config.valueType === 'input'" :label="config?.label" style="width: 100%">
<el-input v-model="value" v-bind="$attrs" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.valueType === 'select'" style="width: 100%">
<el-form-item v-if="config.valueType === 'select'" :label="config?.label" style="width: 100%">
<el-select v-model="value" v-bind="$attrs" style="width: 100%">
<el-option
v-for="item in config.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in config.options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="config?.label" v-if="config.valueType === 'date-picker'" style="width: 100%">
<el-form-item v-if="config.valueType === 'date-picker'" :label="config?.label" style="width: 100%">
<el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.valueType === 'cascader'" style="width: 100%">
<el-form-item v-if="config.valueType === 'cascader'" :label="config?.label" style="width: 100%">
<el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
<el-form-item :label="config?.label" v-if="config.valueType === 'time-select'" style="width: 100%">
<el-form-item v-if="config.valueType === 'time-select'" :label="config?.label" style="width: 100%">
<el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
</el-form-item>
</template>
@ -36,7 +31,6 @@
(e: 'update:modelValue', value: any): void
}>()
const value = computed({
get() {
return props?.modelValue

18
src/components/SearchForm/index.vue
View File

@ -1,20 +1,10 @@
<template>
<div class="advancedForm">
<el-form
ref="ruleFormRef"
:inline="true"
:label-position="'right'"
:model="formParams"
class="form-inline"
>
<el-form ref="ruleFormRef" :inline="true" :label-position="'right'" :model="formParams" class="form-inline">
<el-row :class="{ 'not-show': byHeight && !isExpand }" :gutter="gutterWidth">
<template v-for="(item, index) in columns">
<el-col
v-if="item.valueType"
:span="item.span"
v-show="byHeight ? true : index < showRow * 3 || isExpand"
>
<BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
<el-col v-if="item.valueType" v-show="byHeight ? true : index < showRow * 3 || isExpand" :span="item.span">
<BaseFormItem :key="index" v-bind="item.attrs" v-model="item.value" :config="item" />
</el-col>
</template>
</el-row>
@ -22,7 +12,7 @@
<div class="search-btn">
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
<el-button link type="primary" @click="isExpand = !isExpand" v-if="columns.length > 3">
<el-button v-if="columns.length > 3" link type="primary" @click="isExpand = !isExpand">
{{ isExpand ? '合并' : '展开' }}
<el-icon>
<arrow-down v-if="!isExpand" />

2
src/components/SvgIcon/index.vue
View File

@ -7,7 +7,7 @@
<script lang="ts">
import { computed } from 'vue'
export default {
name: 'baseSvgIcon',
name: 'BaseSvgIcon',
props: {
iconClass: { type: String },
className: { type: String },

32
src/components/SwitchDark/index.vue
View File

@ -1,26 +1,20 @@
<template>
<el-switch
@change="switchDark"
inline-prompt
v-model="themeConfig.isDark"
:active-icon="Sunny"
:inactive-icon="Moon"
/>
<el-switch v-model="themeConfig.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @change="switchDark" />
</template>
<script setup lang="ts" name="switchDark">
import { Sunny, Moon } from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {useSettingStore} from "@/store/modules/setting"
import { Sunny, Moon } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
// 设置信息
const themeConfig = computed(()=>SettingStore.themeConfig)
const SettingStore = useSettingStore()
// 设置信息
const themeConfig = computed(() => SettingStore.themeConfig)
// 切换暗黑模式
const switchDark = () => {
const body = document.documentElement as HTMLElement;
if (themeConfig.value.isDark) body.setAttribute("class", "dark");
else body.setAttribute("class", "");
};
// 切换暗黑模式
const switchDark = () => {
const body = document.documentElement as HTMLElement
if (themeConfig.value.isDark) body.setAttribute('class', 'dark')
else body.setAttribute('class', '')
}
</script>

361
src/components/Table/EditableProTable/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="m-edit-table">
<div style="margin-top: 15px; margin-bottom: 15px" v-if="mode !== 'hide' && mode !== 'bottom'">
<div v-if="mode !== 'hide' && mode !== 'bottom'" style="margin-top: 15px; margin-bottom: 15px">
<el-button style="width: 100%" @click="add">
<el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button
>
@ -8,61 +8,39 @@
<el-table :data="transData" style="width: 100%" row-key="id" border>
<template v-for="item in columns">
<el-table-column
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
v-if="item.type"
:type="item.type"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
/>
<el-table-column
v-else
:prop="item.name"
:width="item.width"
:align="item.align"
:fixed="item.fixed"
:label="item.label"
>
<el-table-column v-else :prop="item.name" :width="item.width" :align="item.align" :fixed="item.fixed" :label="item.label">
<template #default="scope">
<template v-if="!item.slot">
<template v-if="item.readonly">
{{ scope.row[item.name] }}
</template>
<template v-else-if="item.valueType === 'select'">
<el-select
clearable
:placeholder="`请选择`"
v-model="scope.row[item.name]"
v-if="scope.row.edit"
>
<el-option
v-for="ite in item.options"
:key="ite.value"
:label="ite.label"
:value="ite.value"
/>
<el-select v-if="scope.row.edit" v-model="scope.row[item.name]" clearable :placeholder="`请选择`">
<el-option v-for="ite in item.options" :key="ite.value" :label="ite.label" :value="ite.value" />
</el-select>
<span v-else>{{ filterOption(item, scope) }}</span>
</template>
<template v-else-if="item.valueType === 'date'">
<el-date-picker
v-model="scope.row[item.name]"
type="date"
value-format="YYYY-MM-DD"
clearable
placeholder="请选择"
v-if="scope.row.edit"
v-if="scope.row.edit"
v-model="scope.row[item.name]"
type="date"
value-format="YYYY-MM-DD"
clearable
placeholder="请选择"
/>
<span v-else>{{ scope.row[item.name] || '--' }}</span>
</template>
<template v-else>
<el-input
clearable
placeholder="请输入"
v-model="scope.row[item.name]"
v-if="scope.row.edit"
></el-input>
<el-input v-if="scope.row.edit" v-model="scope.row[item.name]" clearable placeholder="请输入"></el-input>
<span v-else>{{ scope.row[item.name] || '--' }}</span>
</template>
</template>
@ -72,59 +50,28 @@
</template>
<el-table-column prop="operator" label="操作" width="250px" fixed="right">
<template #default="scope">
<el-button
v-if="scope.row.edit"
type="primary"
size="small"
icon="CircleCheckFilled"
@click="confirmEdit(scope.row)"
>
<el-button v-if="scope.row.edit" type="primary" size="small" icon="CircleCheckFilled" @click="confirmEdit(scope.row)">
保存
</el-button>
<el-button
v-else
type="primary"
size="small"
icon="Edit"
@click="scope.row.edit = !scope.row.edit"
>
编辑
</el-button>
<el-popover
trigger="click"
v-model:visible="scope.row.visible"
placement="top"
:width="160"
>
<el-button v-else type="primary" size="small" icon="Edit" @click="scope.row.edit = !scope.row.edit"> 编辑 </el-button>
<el-popover v-model:visible="scope.row.visible" trigger="click" placement="top" :width="160">
<p style="display: flex; align-items: center; margin-bottom: 10px">
<el-icon color="#faad14" style="margin-right: 10px"><warning-filled /></el-icon>
删除此行？</p
>
<div style="text-align: right; margin: 0">
<el-button size="small" @click="scope.row.visible = false">取消</el-button>
<el-button size="small" type="primary" @click="deleteAction(scope.row)"
>确定</el-button
>
<el-button size="small" type="primary" @click="deleteAction(scope.row)">确定</el-button>
</div>
<template #reference>
<el-button icon="Delete" @click="deleteCurrent(scope.row)" type="danger" size="small"
>删除</el-button
>
<el-button icon="Delete" type="danger" size="small" @click="deleteCurrent(scope.row)">删除</el-button>
</template>
</el-popover>
<el-button
v-if="scope.row.edit"
type="primary"
size="small"
icon="Edit"
@click="cancelEdit(scope.row)"
>
取消
</el-button>
<el-button v-if="scope.row.edit" type="primary" size="small" icon="Edit" @click="cancelEdit(scope.row)"> 取消 </el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 15px" v-if="mode !== 'hide' && mode !== 'top'">
<div v-if="mode !== 'hide' && mode !== 'top'" style="margin-top: 15px">
<el-button style="width: 100%" @click="add">
<el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button
>
@ -132,72 +79,72 @@
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { deepObjClone } from '@/utils/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue'
const emit = defineEmits(['del', 'add', 'onChange'])
let transData = ref([])
import { computed, onMounted, ref, watch } from 'vue'
import { deepObjClone } from '@/utils/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue'
const emit = defineEmits(['del', 'add', 'onChange'])
let transData = ref([])
let props = defineProps({
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
editableKeys: {
type: Array,
default: () => [],
},
mode: {
type: String,
default: 'bottom',
},
})
let props = defineProps({
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
editableKeys: {
type: Array,
default: () => [],
},
mode: {
type: String,
default: 'bottom',
},
})
// 删除当前此行
const deleteCurrent = (row)=>{
// console.log('----------',row)
// row.visible = true
}
// 删除当前此行
const deleteCurrent = (row) => {
// console.log('----------',row)
// row.visible = true
}
const getData = () => {
let arr = deepObjClone(transData.value)
for (let item of arr) {
for (let attr in item) {
if (attr.includes('te__mp')) {
delete item[attr]
const getData = () => {
let arr = deepObjClone(transData.value)
for (let item of arr) {
for (let attr in item) {
if (attr.includes('te__mp')) {
delete item[attr]
}
}
}
emit('onChange', arr)
}
emit('onChange', arr)
}
let obj = {}
for (let item of props.columns) {
props.data.forEach((it) => {
if (!obj[item.name]) {
obj[item.name] = null
}
})
}
// 重置数据
const reset = () => {
transData.value = props.data
for (let item of transData.value) {
if (props.editableKeys.includes(item.id)) {
item.edit = true
}
let obj = {}
for (let item of props.columns) {
props.data.forEach((it) => {
if (!obj[item.name]) {
obj[item.name] = null
}
})
}
getData()
}
onMounted(() => {
watch(
// 重置数据
const reset = () => {
transData.value = props.data
for (let item of transData.value) {
if (props.editableKeys.includes(item.id)) {
item.edit = true
}
}
getData()
}
onMounted(() => {
watch(
() => props.data,
(val) => {
// // 转换数据
@ -217,88 +164,88 @@ onMounted(() => {
immediate: true,
deep: true,
},
)
})
)
})
const visible = ref(false)
const visible = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const listLoading = ref(false)
// 保存
const confirmEdit = (row) => {
row.edit = false
for (let attr in row) {
if (attr.includes('te__mp')) {
row[attr] = row[attr.replace('te__mp', '')]
}
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
getData()
}
// 取消
const cancelEdit = (row) => {
row.edit = !row.edit
for (let attr in row) {
if (attr !== 'edit') {
if (!attr.includes('te__mp')) {
row[attr] = row[attr + 'te__mp']
const listLoading = ref(false)
// 保存
const confirmEdit = (row) => {
row.edit = false
for (let attr in row) {
if (attr.includes('te__mp')) {
row[attr] = row[attr.replace('te__mp', '')]
}
}
getData()
}
// 取消
const cancelEdit = (row) => {
row.edit = !row.edit
for (let attr in row) {
if (attr !== 'edit') {
if (!attr.includes('te__mp')) {
row[attr] = row[attr + 'te__mp']
}
}
}
}
}
const deleteAction = (row) => {
row.visible = false
transData.value = transData.value.filter((item) => item.id !== row.id)
emit('del', row)
}
const deleteAction = (row) => {
row.visible = false
transData.value = transData.value.filter((item) => item.id !== row.id)
emit('del', row)
}
// 添加
const add = () => {
let id = ~~(Math.random() * 1000000).toFixed(0)
let obj1 = Object.assign({}, obj, {
id: id,
edit: true,
visible: false,
// 添加
const add = () => {
let id = ~~(Math.random() * 1000000).toFixed(0)
let obj1 = Object.assign({}, obj, {
id: id,
edit: true,
visible: false,
})
for (let attr in obj1) {
let temp = `${attr}te__mp`
obj1[temp] = obj1[attr]
}
if (props.mode === 'bottom') {
transData.value.push(obj1)
}
if (props.mode === 'top') {
transData.value.unshift(obj1)
}
}
const filterOption = (item, scope) => {
let obj = item.options.find((ite) => ite.value === scope.row[item.name])
if (obj) {
return obj.label
}
return '--'
}
defineExpose({
reset,
})
for (let attr in obj1) {
let temp = `${attr}te__mp`
obj1[temp] = obj1[attr]
}
if (props.mode === 'bottom') {
transData.value.push(obj1)
}
if (props.mode === 'top') {
transData.value.unshift(obj1)
}
}
const filterOption = (item, scope) => {
let obj = item.options.find((ite) => ite.value === scope.row[item.name])
if (obj) {
return obj.label
}
return '--'
}
defineExpose({
reset,
})
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.inline-edit-table {
width: 100%;
}
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
.inline-edit-table {
width: 100%;
}
</style>

8
src/components/Table/PropTable/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="zb-pro-table">
<div class="header">
<SearchForm @submit="onSubmit" :columns="baseFormColumns" />
<SearchForm :columns="baseFormColumns" @submit="onSubmit" />
</div>
<!----------底部---------------------->
@ -14,14 +14,14 @@
<!-- ------------表格--------------->
<div class="table">
<el-table
class="zb-table"
v-loading="loading"
@selection-change="(val) => emit('selection-change', val)"
class="zb-table"
:data="list"
:border="true"
@selection-change="(val) => emit('selection-change', val)"
>
<template v-for="item in columns">
<el-table-column v-bind="{ ...item, ...{ prop: item.name } }" v-if="item.slot">
<el-table-column v-if="item.slot" v-bind="{ ...item, ...{ prop: item.name } }">
<template #default="scope">
<slot :name="item.name" :item="item" :row="scope.row"></slot>
</template>

108
src/components/Theme/index.vue
View File

@ -12,16 +12,10 @@
</div>
</div>
</div>
<el-drawer
v-model="drawer" title="主题配置" size="300px">
<el-drawer v-model="drawer" title="主题配置" size="300px">
<div class="theme-item">
<label>导航栏布局</label>
<el-select
v-model="layout"
placeholder="请选择"
style="width: 150px"
@change="(val) => changeSwitch('mode',val)"
>
<el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val) => changeSwitch('mode', val)">
<el-option label="纵向" value="vertical"></el-option>
<el-option label="横向" value="horizontal"></el-option>
<el-option label="分栏" value="columns"></el-option>
@ -37,39 +31,39 @@
</div>
<div class="theme-item">
<label>灰色模式</label>
<el-switch v-model="gray" @change="(val) => changeGrayWeak('gray',val)" />
<el-switch v-model="gray" @change="(val) => changeGrayWeak('gray', val)" />
</div>
<div class="theme-item">
<label>色弱模式</label>
<el-switch v-model="weak" @change="(val) => changeGrayWeak('weak',val)" />
<el-switch v-model="weak" @change="(val) => changeGrayWeak('weak', val)" />
</div>
<div class="theme-item">
<label>标签栏</label>
<el-switch v-model="showTag" @change="(val) => changeSwitch('showTag',val)" />
<el-switch v-model="showTag" @change="(val) => changeSwitch('showTag', val)" />
</div>
<div class="theme-item">
<label>侧边栏 Logo</label>
<el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo',val)" />
<el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo', val)" />
</div>
<div class="theme-item">
<label>保持一个子菜单的展开</label>
<el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened',val)" />
<el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened', val)" />
</div>
<div class="theme-item">
<label>固定header</label>
<el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader',val)" />
<el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader', val)" />
</div>
</el-drawer>
</div>
</template>
<script lang="ts" setup>
import {computed, ref,watch} from 'vue'
import {ElMessage} from "element-plus";
import {openLoading,closeLoading} from "@/utils/element"
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { openLoading, closeLoading } from '@/utils/element'
import SwitchDark from '@/components/SwitchDark/index.vue'
import {PRIMARY_COLOR} from "@/config/index";
import {useSettingStore} from "@/store/modules/setting"
import { PRIMARY_COLOR } from '@/config/index'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
const layout = ref(SettingStore.themeConfig.mode)
@ -83,17 +77,15 @@
const drawer = computed({
get() {
return SettingStore.themeConfig.showSetting;
return SettingStore.themeConfig.showSetting
},
set() {
changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
}
changeSwitch('showSetting', !SettingStore.themeConfig.showSetting)
},
})
// 预定义主题颜色
const predefineColor = [
'#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d'
];
const predefineColor = ['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d']
const operator = (type) => {
switch (type) {
@ -107,53 +99,52 @@
}
// 进行配置
const changeSwitch = (key,val) => {
SettingStore.setThemeConfig({key, val})
if(key==='mode'){
const changeSwitch = (key, val) => {
SettingStore.setThemeConfig({ key, val })
if (key === 'mode') {
openLoading()
setTimeout(()=>{
setTimeout(() => {
closeLoading()
},600)
}, 600)
}
}
// 监听布局变化
watch(
() => layout.value,
() => {
const body = document.body as HTMLElement;
body.setAttribute("class", `layout-${layout.value}`);
},
{ immediate: true }
);
() => layout.value,
() => {
const body = document.body as HTMLElement
body.setAttribute('class', `layout-${layout.value}`)
},
{ immediate: true },
)
// 修改主题颜色
const changePrimary = (val)=>{
const changePrimary = (val) => {
if (!val) {
primary.value = val = PRIMARY_COLOR;
ElMessage({ type: "success", message: `主题颜色已重置为 ${PRIMARY_COLOR}` });
primary.value = val = PRIMARY_COLOR
ElMessage({ type: 'success', message: `主题颜色已重置为 ${PRIMARY_COLOR}` })
}
document.documentElement.style.setProperty("--el-color-primary", val);
changeSwitch('primary',val)
document.documentElement.style.setProperty('--el-color-primary', val)
changeSwitch('primary', val)
}
// 修改灰色模式
const changeGrayWeak = (type,val)=>{
const body = document.documentElement as HTMLElement;
if (!val) return body.setAttribute("style", "");
if (type === "gray") body.setAttribute("style", "filter: grayscale(1)");
if (type === "weak") body.setAttribute("style", "filter: invert(80%)");
changeSwitch(type,val)
const changeGrayWeak = (type, val) => {
const body = document.documentElement as HTMLElement
if (!val) return body.setAttribute('style', '')
if (type === 'gray') body.setAttribute('style', 'filter: grayscale(1)')
if (type === 'weak') body.setAttribute('style', 'filter: invert(80%)')
changeSwitch(type, val)
}
</script>
<style lang="scss" scoped>
::v-deep(.el-drawer__header){
border-bottom: 1px solid #ebeef5;
padding: 15px 20px 14px;
margin-bottom: 0;
}
::v-deep(.el-drawer__header) {
border-bottom: 1px solid #ebeef5;
padding: 15px 20px 14px;
margin-bottom: 0;
}
.m-setting-fix {
position: fixed;
top: 50%;
@ -193,19 +184,17 @@
border-radius: 5.5px;
font-size: 12px;
background: #ebf5ff;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.item-child2 {
margin-top: 10px;
color: #b37feb;
background: #f7f2fd;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
}
:deep(.el-drawer__title) {
:deep(.el-drawer__title) {
font-weight: bold;
color: black;
}
@ -217,6 +206,5 @@
font-size: 14px;
color: black;
justify-content: space-between;
}
</style>

53
src/components/WangEdior/index.vue
View File

@ -1,26 +1,21 @@
<template>
<div class="m-wangEditor">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
<Editor
class="editor-content'"
style="height: 300px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
v-model="valueHtml"
class="editor-content'"
style="height: 300px; overflow-y: hidden"
:default-config="editorConfig"
:mode="mode"
@on-created="handleCreated"
/>
</div>
</template>
<script lang="ts" setup>
// 引入 wangEditor
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, onMounted, watch, shallowRef, ref, computed} from 'vue'
import { onBeforeUnmount, onMounted, watch, shallowRef, ref, computed } from 'vue'
let editors = null
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
@ -45,18 +40,18 @@
}
const valueHtml = computed({
get(){
get() {
return props.modelValue
},
set(val){
set(val) {
// 防止富文本内容为空时，校验失败
if (editorRef.value.isEmpty()) val = "";
if (editorRef.value.isEmpty()) val = ''
emit('update:modelValue', val)
}
},
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(()=>{
onBeforeUnmount(() => {
// 调用销毁 API 对当前编辑器实例进行销毁
const editor = editorRef.value
if (editor == null) {
@ -66,15 +61,15 @@
})
</script>
<style lang="scss" scoped>
.m-wangEditor{
z-index: 99;
width: 100%;
border: 1px solid #cccccc;
.editor-toolbar {
border-bottom: 1px solid #cccccc;
.m-wangEditor {
z-index: 99;
width: 100%;
border: 1px solid #cccccc;
.editor-toolbar {
border-bottom: 1px solid #cccccc;
}
.editor-content {
overflow-y: hidden;
}
}
.editor-content {
overflow-y: hidden;
}
}
</style>

6
src/components/pipeline/zb-pipeline-start.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="zb-pipeline-start-wrapper">
<div
class="zb-pipeline-start"
v-bind:class="control === value ? 'active' : ''"
v-on:click="handleClick"
>
<div class="zb-pipeline-start" :class="control === value ? 'active' : ''" @click="handleClick">
<div class="zb-pipeline-start-header">
<zb-icon type="play-filled" />
</div>

2
src/config/index.ts
View File

@ -1,2 +1,2 @@
// * 默认主题颜色
export const PRIMARY_COLOR: string = "#409eff";
export const PRIMARY_COLOR = '#409eff'

197
src/hooks/useFullscreen.ts
View File

@ -4,120 +4,109 @@
* 它原理原理实现如下：
*/
import { ElMessage } from "element-plus";
import {onMounted} from "vue";
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
export const useFullscreen = () => {
/**
* @description: 是否支持全屏+判断浏览器前缀
*/
const isFullscreen = ()=> {
let prefixName = ""; // 浏览器前缀
let fullscreenEnabled = false;
// 判断浏览器前缀
if (document.fullscreenEnabled) {
fullscreenEnabled = document.fullscreenEnabled;
// webkit
} else if (document.webkitFullscreenEnabled) {
fullscreenEnabled = document.webkitFullscreenEnabled;
prefixName = "webkit";
// moz
} else if (document.mozFullScreenEnabled) {
fullscreenEnabled = document.mozFullScreenEnabled;
prefixName = "moz";
// ms
} else if (document.msFullscreenEnabled) {
fullscreenEnabled = document.msFullscreenEnabled;
prefixName = "ms";
}
return {
fullscreenEnabled,
prefixName
}
/**
* @description: 是否支持全屏+判断浏览器前缀
*/
const isFullscreen = () => {
let prefixName = '' // 浏览器前缀
let fullscreenEnabled = false
// 判断浏览器前缀
if (document.fullscreenEnabled) {
fullscreenEnabled = document.fullscreenEnabled
// webkit
} else if (document.webkitFullscreenEnabled) {
fullscreenEnabled = document.webkitFullscreenEnabled
prefixName = 'webkit'
// moz
} else if (document.mozFullScreenEnabled) {
fullscreenEnabled = document.mozFullScreenEnabled
prefixName = 'moz'
// ms
} else if (document.msFullscreenEnabled) {
fullscreenEnabled = document.msFullscreenEnabled
prefixName = 'ms'
}
/**
* @description: 检测有没有元素处于全屏状态
* @return 布尔值
*/
const isElementFullScreen = ()=> {
const fullscreenElement =
document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
if (fullscreenElement === null) {
return false; // 当前没有元素在全屏状态
} else {
return true; // 有元素在全屏状态
}
return {
fullscreenEnabled,
prefixName,
}
}
/**
* @description: 将传进来的元素全屏
* @param {String} domName 要全屏的dom名称
*/
const Fullscreen = (target)=> {
const targetRef = target || (document == null ? void 0 : document.querySelector("html"));
const {prefixName} = isFullscreen()
const methodName =
prefixName === ""
? "requestFullscreen"
: `${prefixName}RequestFullScreen`;
targetRef[methodName]();
/**
* @description: 检测有没有元素处于全屏状态
* @return 布尔值
*/
const isElementFullScreen = () => {
const fullscreenElement =
document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
if (fullscreenElement === null) {
return false // 当前没有元素在全屏状态
} else {
return true // 有元素在全屏状态
}
}
// 退出全屏
const exitFullscreen =()=> {
const {prefixName} = isFullscreen()
const methodName =
prefixName === ""
? "exitFullscreen"
: `${prefixName}ExitFullscreen`;
document[methodName]();
/**
* @description: 将传进来的元素全屏
* @param {String} domName 要全屏的dom名称
*/
const Fullscreen = (target) => {
const targetRef = target || (document == null ? void 0 : document.querySelector('html'))
const { prefixName } = isFullscreen()
const methodName = prefixName === '' ? 'requestFullscreen' : `${prefixName}RequestFullScreen`
targetRef[methodName]()
}
// 退出全屏
const exitFullscreen = () => {
const { prefixName } = isFullscreen()
const methodName = prefixName === '' ? 'exitFullscreen' : `${prefixName}ExitFullscreen`
document[methodName]()
}
/**
* @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
* @param {Function} enterErrorFn 回调
*/
const screenError = () => {
const { prefixName } = isFullscreen()
const methodName = `on${prefixName}fullscreenerror`
document[methodName] = (e) => {
ElMessage.error('进入全屏失败')
}
}
/**
* @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
* @param {Function} enterErrorFn 回调
*/
const screenError = ()=> {
const {prefixName} = isFullscreen()
const methodName = `on${prefixName}fullscreenerror`;
document[methodName] = e => {
ElMessage.error('进入全屏失败')
};
/**
* @description: 监听进入/离开全屏
* @param {Function} enter 进入全屏的回调
* @param {Function} quit 离开全屏的回调
*/
const screenChange = (enter, quit) => {
const { fullscreenEnabled, prefixName } = isFullscreen()
if (!fullscreenEnabled) return
const methodName = `on${prefixName}fullscreenchange`
document[methodName] = (e) => {
if (isElementFullScreen()) {
enter && enter(e) // 进入全屏回调
} else {
quit && quit(e) // 离开全屏的回调
}
}
}
/**
* @description: 监听进入/离开全屏
* @param {Function} enter 进入全屏的回调
* @param {Function} quit 离开全屏的回调
*/
const screenChange = (enter, quit)=> {
const {fullscreenEnabled,prefixName} = isFullscreen()
if (!fullscreenEnabled) return;
const methodName = `on${prefixName}fullscreenchange`;
document[methodName] = e => {
if (isElementFullScreen()) {
enter && enter(e); // 进入全屏回调
} else {
quit && quit(e); // 离开全屏的回调
}
};
}
onMounted(() => {
screenError()
})
onMounted(()=>{
screenError()
})
return{
isFullscreen,
isElementFullScreen,
Fullscreen,
exitFullscreen,
screenChange
}
return {
isFullscreen,
isElementFullScreen,
Fullscreen,
exitFullscreen,
screenChange,
}
}

42
src/hooks/useResizeElement.ts
View File

@ -1,39 +1,39 @@
import ResizeObserver from "resize-observer-polyfill";
import { onBeforeUnmount } from "vue";
import requestAnimationFrameThrottle from "@/utils/requestAnimationFrameThrottle"
export const useResizeElement = (chart, chartsRef)=>{
let observer = null ;
let widthW = 0;
let heightW = 0;
const handleResize = (entries )=>{
const { contentRect } = entries[0];
let {width,height} = contentRect
width = Math.floor(width);
height = Math.floor(height);
if(widthW!==width|| heightW !== height){
import ResizeObserver from 'resize-observer-polyfill'
import { onBeforeUnmount } from 'vue'
import requestAnimationFrameThrottle from '@/utils/requestAnimationFrameThrottle'
export const useResizeElement = (chart, chartsRef) => {
let observer = null
let widthW = 0
let heightW = 0
const handleResize = (entries) => {
const { contentRect } = entries[0]
let { width, height } = contentRect
width = Math.floor(width)
height = Math.floor(height)
if (widthW !== width || heightW !== height) {
widthW = width
heightW = height
chart && chart.resize()
}
}
const addObserver = ()=>{
const addObserver = () => {
observer = new ResizeObserver(requestAnimationFrameThrottle(handleResize))
observer.observe(chartsRef)
}
const removeObserver = ()=>{
const removeObserver = () => {
if (observer) {
observer.disconnect();
observer = null;
observer.disconnect()
observer = null
}
chart&&chart.dispose()
chart && chart.dispose()
}
onBeforeUnmount(()=>{
onBeforeUnmount(() => {
removeObserver()
})
return{
addObserver
return {
addObserver,
}
}

104
src/hooks/useResizeHandler.ts
View File

@ -1,70 +1,66 @@
import {useSettingStore} from "@/store/modules/setting"
import {computed, onMounted, onUnmounted, watch} from "vue";
import {useRoute} from "vue-router";
import { useSettingStore } from '@/store/modules/setting'
import { computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'
const { body } = document
const WIDTH = 800 // refer to Bootstrap's responsive design
const MAX_WIDTH = 1200
export const useResizeHandler = ()=>{
const SettingStore = useSettingStore()
const route = useRoute()
const device = computed(()=>{
return SettingStore.device
})
function $_isMobile(){
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
export const useResizeHandler = () => {
const SettingStore = useSettingStore()
const route = useRoute()
const device = computed(() => {
return SettingStore.device
})
function $_isMobile() {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
}
function collapse() {
const rect = body.getBoundingClientRect()
if (rect.width - 1 > MAX_WIDTH) {
return true
} else {
return false
}
}
function collapse(){
const rect = body.getBoundingClientRect()
if(rect.width - 1 > MAX_WIDTH){
return true
}else {
return false
}
function $_resizeHandler() {
if (!document.hidden) {
// bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
const isMobile = $_isMobile()
const isCollapse = collapse()
SettingStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
if (isMobile) {
SettingStore.closeSideBar({ withoutAnimation: true })
}
if (!isMobile) {
SettingStore.setCollapse(isCollapse)
}
}
function $_resizeHandler(){
if (!document.hidden) { // bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
const isMobile = $_isMobile()
const isCollapse = collapse()
SettingStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
if (isMobile) {
SettingStore.closeSideBar({ withoutAnimation: true })
}
if(!isMobile){
SettingStore.setCollapse(isCollapse)
}
}
}
onMounted(() => {
const isMobile = $_isMobile()
if (isMobile) {
SettingStore.toggleDevice('mobile')
SettingStore.closeSideBar({ withoutAnimation: true })
}
onMounted(()=>{
const isMobile = $_isMobile()
if (isMobile) {
SettingStore.toggleDevice('mobile')
SettingStore.closeSideBar({ withoutAnimation: true })
}
window.addEventListener('resize', $_resizeHandler)
window.addEventListener('resize', $_resizeHandler)
watch(route,()=>{
if (device.value === 'mobile' && SettingStore.isCollapse) {
SettingStore.closeSideBar({ withoutAnimation: false })
}
})
watch(route, () => {
if (device.value === 'mobile' && SettingStore.isCollapse) {
SettingStore.closeSideBar({ withoutAnimation: false })
}
})
})
onUnmounted(()=>{
window.removeEventListener('resize', $_resizeHandler)
})
onUnmounted(() => {
window.removeEventListener('resize', $_resizeHandler)
})
return {device}
return { device }
}

34
src/hooks/useWrapComponents.ts
View File

@ -1,23 +1,23 @@
// 自定义name的壳的集合
import {h} from "vue";
import { h } from 'vue'
const wrapperMap = new Map()
export const useWrapComponents = (Component,route)=>{
let wrapper
if (Component) {
const wrapperName = route.name
if (wrapperMap.has(wrapperName)) {
wrapper = wrapperMap.get(wrapperName)
} else {
wrapper = {
name: wrapperName,
render() {
return h("div", {className: "app-main-inner"}, Component)
},
}
wrapperMap.set(wrapperName, wrapper)
}
return h(wrapper)
export const useWrapComponents = (Component, route) => {
let wrapper
if (Component) {
const wrapperName = route.name
if (wrapperMap.has(wrapperName)) {
wrapper = wrapperMap.get(wrapperName)
} else {
wrapper = {
name: wrapperName,
render() {
return h('div', { className: 'app-main-inner' }, Component)
},
}
wrapperMap.set(wrapperName, wrapper)
}
return h(wrapper)
}
}

1
src/icons/index.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg component
// const req = require.context('./svg', false, /\.svg$/)
const req = import.meta.globEager('./svg/*.svg')

297
src/layout/LayoutColumns/index.vue
View File

@ -7,12 +7,12 @@
<el-scrollbar>
<div class="menu-wrap">
<div
class="item-menu-wrap"
:class="{
'active-menu':activeCurrentMenu===item.path
}"
v-for="item in menusRoutes"
:key="item.path"
class="item-menu-wrap"
:class="{
'active-menu': activeCurrentMenu === item.path,
}"
@click="handleChangeMenu(item)"
>
<el-icon :size="20">
@ -26,9 +26,9 @@
<div class="layout-columns-sub" :style="{ width: isCollapse ? '60px' : '210px' }">
<div class="logo flex-center">
<span v-show="subMenus.length">{{ isCollapse ? "Vue" : "Vue Admin Perfect" }}</span>
<span v-show="subMenus.length">{{ isCollapse ? 'Vue' : 'Vue Admin Perfect' }}</span>
</div>
<el-scrollbar >
<el-scrollbar>
<el-menu
:collapse="isCollapse"
:router="false"
@ -37,7 +37,7 @@
:collapse-transition="false"
class="menu-columns"
>
<SubMenu :menuList="subMenus" />
<SubMenu :menu-list="subMenus" />
</el-menu>
</el-scrollbar>
</div>
@ -45,171 +45,174 @@
<div class="container">
<div class="layout-header">
<div class="header-tool">
<HeaderToolLeft/>
<HeaderToolRight/>
<HeaderToolLeft />
<HeaderToolRight />
</div>
<TagsView v-if="themeConfig.showTag"/>
<TagsView v-if="themeConfig.showTag" />
</div>
<Main/>
<Footer/>
<Main />
<Footer />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {usePermissionStore} from "@/store/modules/permission"
import { useSettingStore } from "@/store/modules/setting";
import Footer from '../components/Footer/index.vue'
import SubMenu from '../components/SubMenu/SubMenu.vue'
import TagsView from '../components/TagsView/index.vue'
const PermissionStore = usePermissionStore()
const SettingStore = useSettingStore()
const route = useRoute()
const router = useRouter();
import HeaderToolRight from '../components/Header/ToolRight.vue'
import HeaderToolLeft from '../components/Header/ToolLeft.vue'
import Main from '../components/Main/index.vue'
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
import { useSettingStore } from '@/store/modules/setting'
import Footer from '../components/Footer/index.vue'
import SubMenu from '../components/SubMenu/SubMenu.vue'
import TagsView from '../components/TagsView/index.vue'
const PermissionStore = usePermissionStore()
const SettingStore = useSettingStore()
const route = useRoute()
const router = useRouter()
import HeaderToolRight from '../components/Header/ToolRight.vue'
import HeaderToolLeft from '../components/Header/ToolLeft.vue'
import Main from '../components/Main/index.vue'
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
// 获取路由
const menusRoutes = computed(()=>{
return PermissionStore.permission_routes.filter(item=>!item.hidden)
})
// 获取路由
const menusRoutes = computed(() => {
return PermissionStore.permission_routes.filter((item) => !item.hidden)
})
const activeCurrentMenu = ref('')
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
const activeMenu = computed(() => {
const { meta, path } = route
return path
})
const basePath = ref<string>('/')
const subMenus = ref([])
const activeCurrentMenu = ref('')
// 主题配置
const themeConfig = computed(() => SettingStore.themeConfig)
const isCollapse = computed(() => !SettingStore.isCollapse)
const activeMenu = computed(() => {
const { meta, path } = route
return path
})
const basePath = ref<string>('/')
const subMenus = ref([])
watch(()=>[route],()=>{
if (!menusRoutes.value.length) return;
const [firstMenu] = route.matched
activeCurrentMenu.value = firstMenu.path;
let menuItem = menusRoutes.value.find(item=>firstMenu.path === item.path)
if(menuItem&&menuItem.children?.length) {
subMenus.value = menuItem.children
}else {
subMenus.value = []
}
basePath.value = firstMenu.path
},{
deep: true,
immediate:true
})
watch(
() => [route],
() => {
if (!menusRoutes.value.length) return
const [firstMenu] = route.matched
activeCurrentMenu.value = firstMenu.path
let menuItem = menusRoutes.value.find((item) => firstMenu.path === item.path)
if (menuItem && menuItem.children?.length) {
subMenus.value = menuItem.children
} else {
subMenus.value = []
}
basePath.value = firstMenu.path
},
{
deep: true,
immediate: true,
},
)
const handleChangeMenu = (item)=>{
router.push(item.path);
}
const handleChangeMenu = (item) => {
router.push(item.path)
}
</script>
<style lang="scss" scoped>
.main-columns{
display: flex;
flex-direction: row!important;
height: 100%;
width: 100%;
}
.layout-columns-aside{
flex-shrink: 0;
width: 80px;
height: 100%;
background-color: #304156;
.el-scrollbar{
height: calc(100% - 55px);
}
.logo {
box-sizing: border-box;
height: 50px;
img {
width: 32px;
object-fit: contain;
}
}
.menu-wrap{
.main-columns {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.item-menu-wrap{
flex-direction: row !important;
height: 100%;
width: 100%;
}
.layout-columns-aside {
flex-shrink: 0;
width: 80px;
height: 100%;
background-color: #304156;
.el-scrollbar {
height: calc(100% - 55px);
}
.logo {
box-sizing: border-box;
height: 50px;
img {
width: 32px;
object-fit: contain;
}
}
.menu-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
width: 70px;
cursor: pointer;
transition: all .3s ease;
}
.active-menu{
background: $primaryColor;
border-radius: 5px;
}
.title{
color: #e5eaf3;
}
.el-icon{
color: #e5eaf3;
.item-menu-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
width: 70px;
cursor: pointer;
transition: all 0.3s ease;
}
.active-menu {
background: $primaryColor;
border-radius: 5px;
}
.title {
color: #e5eaf3;
}
.el-icon {
color: #e5eaf3;
}
}
}
}
.layout-columns-sub{
flex-shrink: 0;
width:200px;
box-sizing: border-box;
flex-direction: column;
overflow: hidden;
transition: all 0.3s ease;
background: white;
border-right: 1px solid #eee;
.el-scrollbar{
height: calc(100vh - 50px);
}
.logo {
width: 100%;
.layout-columns-sub {
flex-shrink: 0;
width: 200px;
box-sizing: border-box;
height: 50px;
border-bottom: 1px solid #eee;
span{
font-weight: bold;
white-space: nowrap;
flex-direction: column;
overflow: hidden;
transition: all 0.3s ease;
background: white;
border-right: 1px solid #eee;
.el-scrollbar {
height: calc(100vh - 50px);
}
.logo {
width: 100%;
box-sizing: border-box;
height: 50px;
border-bottom: 1px solid #eee;
span {
font-weight: bold;
white-space: nowrap;
}
}
::v-deep(.menu-columns) {
border-right: none;
}
}
::v-deep(.menu-columns){
border-right: none;
}
}
.container{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.layout-header{
background: white;
transition: width 0.28s;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.header-tool{
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
.container {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
flex-direction: column;
}
.layout-header {
background: white;
transition: width 0.28s;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.header-tool {
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
}
}
}
</style>

11
src/layout/LayoutHorizontal/HeaderHorizontal/index.scss
View File

@ -9,29 +9,26 @@
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
background-color:$menuBg;
background-color: $menuBg;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
}
}
.fixed-header{
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.menu-horizontal{
.menu-horizontal {
flex: 1;
overflow: hidden;
height: 100%;
:deep(.el-menu-item){
:deep(.el-menu-item) {
height: 100%;
}
}

94
src/layout/LayoutHorizontal/HeaderHorizontal/index.vue
View File

@ -1,69 +1,61 @@
<template>
<!--纵向布局-->
<Height/>
<div
class="m-layout-header"
:class="{
'fixed-header':themeConfig.fixedHeader,
}">
<div class="header-inner">
<el-menu
mode="horizontal"
:default-active="activeMenu"
background-color="#304156"
text-color="#bfcbd9"
:unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false"
class="menu-horizontal"
>
<SubItem
v-for="route in permission_routes"
:key="route.path"
:item="route"
/>
</el-menu>
<HeaderToolRight/>
</div>
<TagsView v-if="themeConfig.showTag"/>
<Height />
<div
class="m-layout-header"
:class="{
'fixed-header': themeConfig.fixedHeader,
}"
>
<div class="header-inner">
<el-menu
mode="horizontal"
:default-active="activeMenu"
background-color="#304156"
text-color="#bfcbd9"
:unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false"
class="menu-horizontal"
>
<SubItem v-for="route in permission_routes" :key="route.path" :item="route" />
</el-menu>
<HeaderToolRight />
</div>
<TagsView v-if="themeConfig.showTag" />
</div>
</template>
<script lang="ts" setup>
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import TagsView from '../../components/TagsView/index.vue'
import SubItem from '../../components/SubMenu/SubItem.vue'
import { useRoute } from 'vue-router'
import {usePermissionStore} from "@/store/modules/permission"
const PermissionStore = usePermissionStore()
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import TagsView from '../../components/TagsView/index.vue'
import SubItem from '../../components/SubMenu/SubItem.vue'
import { useRoute } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
const PermissionStore = usePermissionStore()
const route = useRoute()
const route = useRoute()
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
const activeMenu = computed(() => {
const activeMenu = computed(() => {
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
return meta.activeMenu
}
return path
})
})
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
// 主题配置
const themeConfig = computed(() => SettingStore.themeConfig)
const isCollapse = computed(() => !SettingStore.isCollapse)
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import './index.scss';
</style>

28
src/layout/LayoutHorizontal/index.vue
View File

@ -1,24 +1,24 @@
<template>
<div class="main-container">
<UHeader/>
<Main/>
<Footer/>
<UHeader />
<Main />
<Footer />
</div>
</template>
<script lang="ts" setup>
import Sidebar from '../components/Sidebar/index.vue'
import UHeader from './HeaderHorizontal/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
import Sidebar from '../components/Sidebar/index.vue'
import UHeader from './HeaderHorizontal/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
</script>
<style lang="scss" scoped>
.main-container{
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
min-height: 100%;
}
.main-container {
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
min-height: 100%;
}
</style>

27
src/layout/LayoutVertical/HeaderVertical/index.scss
View File

@ -1,16 +1,15 @@
.mobile {
.m-layout-header {
left: 0 !important;
width: 100%!important;
width: 100% !important;
}
}
.show-tag{
.show-tag {
height: 90px;
}
.zb-no-fixed-header{
width: 100%!important;;
.zb-no-fixed-header {
width: 100% !important;
}
.m-layout-header {
@ -32,39 +31,37 @@
justify-content: space-between;
}
}
.fixed-header{
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.collapse{
.collapse {
width: calc(100% - 60px);
}
.no-collapse{
.no-collapse {
width: calc(100% - 210px);
}
.el-dropdown {
display: flex;
height: 100%;
align-items: center;
}
.transverseMenu{
.transverseMenu {
display: flex;
.el-menu{
.el-menu {
overflow: hidden;
}
:deep(.el-menu-item){
:deep(.el-menu-item) {
height: 100% !important;
}
.tool-bar-right{
.tool-bar-right {
display: flex;
justify-content: flex-end;
min-width:300px ;
min-width: 300px;
flex-shrink: 0;
}
}

47
src/layout/LayoutVertical/HeaderVertical/index.vue
View File

@ -1,39 +1,38 @@
<template>
<!--纵向布局-->
<Height/>
<Height />
<div
class="m-layout-header"
:class="{
'fixed-header':themeConfig.fixedHeader,
'collapse':themeConfig.fixedHeader&&isCollapse,
'no-collapse':themeConfig.fixedHeader&&!isCollapse
}">
class="m-layout-header"
:class="{
'fixed-header': themeConfig.fixedHeader,
collapse: themeConfig.fixedHeader && isCollapse,
'no-collapse': themeConfig.fixedHeader && !isCollapse,
}"
>
<div class="header-inner">
<HeaderToolLeft/>
<HeaderToolRight/>
<HeaderToolLeft />
<HeaderToolRight />
</div>
<TagsView v-if="themeConfig.showTag"/>
<TagsView v-if="themeConfig.showTag" />
</div>
</template>
<script lang="ts" setup>
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import HeaderToolLeft from '../../components/Header/ToolLeft.vue'
import TagsView from '../../components/TagsView/index.vue'
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import HeaderToolLeft from '../../components/Header/ToolLeft.vue'
import TagsView from '../../components/TagsView/index.vue'
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
// 主题配置
const themeConfig = computed(() => SettingStore.themeConfig)
const isCollapse = computed(() => !SettingStore.isCollapse)
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import './index.scss';
</style>

60
src/layout/LayoutVertical/index.vue
View File

@ -1,46 +1,46 @@
<template>
<!--纵向布局-->
<Sidebar/>
<Sidebar />
<div class="main-container">
<HeaderVertical/>
<Main/>
<Footer/>
<HeaderVertical />
<Main />
<Footer />
</div>
</template>
<script lang="ts" setup>
import Sidebar from '../components/Sidebar/index.vue'
import HeaderVertical from './HeaderVertical/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
import Sidebar from '../components/Sidebar/index.vue'
import HeaderVertical from './HeaderVertical/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
</script>
<style lang="scss" scoped>
.g-container-layout {
height: 100%;
width: 100%;
.main-container {
.g-container-layout {
height: 100%;
width: 100%;
.main-container {
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
}
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.sidebar-container {
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
}
&.mobile.openSidebar {
position: fixed;
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 90;
}
}
.sidebar-container {
display: flex;
flex-direction: column;
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 90;
}
</style>

28
src/layout/components/Footer/index.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="footer-layout">
<span href="/" target="_blank"> 2022 © VUE-ADMIN-PERFECT By ZB Technology. </span>
</div>
<div class="footer-layout">
<span href="/" target="_blank"> 2022 © VUE-ADMIN-PERFECT By ZB Technology. </span>
</div>
</template>
<style scoped lang="scss">
.footer-layout{
height: 40px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-top: 1px solid #e4e7ed;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.45);
}
.footer-layout {
height: 40px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-top: 1px solid #e4e7ed;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.45);
}
</style>

16
src/layout/components/Header/ToolLeft.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="m-tool-left">
<CollapseIcon/>
<CollapseIcon />
<Hamburger />
</div>
</template>
<script lang="ts" setup>
import CollapseIcon from './components/CollapseIcon.vue'
import Hamburger from './components/Hamburger.vue'
import CollapseIcon from './components/CollapseIcon.vue'
import Hamburger from './components/Hamburger.vue'
</script>
<style lang="scss" scoped>
.m-tool-left{
display: flex;
align-items: center;
height: 100%;
}
.m-tool-left {
display: flex;
align-items: center;
height: 100%;
}
</style>

36
src/layout/components/Header/ToolRight.vue
View File

@ -1,29 +1,29 @@
<template>
<div class="m-tool-right">
<GlobalComSize class="item-children"/>
<HeaderSearch class="item-children"/>
<Remind class="item-children"/>
<ScreenFull class="item-children"/>
<Setting class="item-children"/>
<Avatar/>
<GlobalComSize class="item-children" />
<HeaderSearch class="item-children" />
<Remind class="item-children" />
<ScreenFull class="item-children" />
<Setting class="item-children" />
<Avatar />
</div>
</template>
<script lang="ts" setup>
import GlobalComSize from './components/globalComSize.vue'
import HeaderSearch from './components/HeaderSearch.vue'
import Remind from './components/Remind.vue'
import ScreenFull from './components/ScreenFull.vue'
import Setting from './components/Setting.vue'
import Avatar from './components/Avatar.vue'
import GlobalComSize from './components/globalComSize.vue'
import HeaderSearch from './components/HeaderSearch.vue'
import Remind from './components/Remind.vue'
import ScreenFull from './components/ScreenFull.vue'
import Setting from './components/Setting.vue'
import Avatar from './components/Avatar.vue'
</script>
<style lang="scss" scoped>
.m-tool-right{
display: flex;
align-items: center;
.item-children{
margin-right: 22px;
.m-tool-right {
display: flex;
align-items: center;
.item-children {
margin-right: 22px;
}
}
}
</style>

140
src/layout/components/Header/components/Avatar.vue
View File

@ -1,104 +1,104 @@
<template>
<el-dropdown >
<span class="el-dropdown-link">
<el-avatar :size="30" class="avatar" :src="AvatarLogo"/>
{{userInfo.username}}
<el-icon class="header-icon el-icon--right">
<arrow-down />
</el-icon>
</span>
<el-dropdown>
<span class="el-dropdown-link">
<el-avatar :size="30" class="avatar" :src="AvatarLogo" />
{{ userInfo.username }}
<el-icon class="header-icon el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="0" @click="switchRolesAction('admin')">
{{currentRoles==='admin'?'当前角色':'切换角色'}}：管理员
{{ currentRoles === 'admin' ? '当前角色' : '切换角色' }}：管理员
</el-dropdown-item>
<el-dropdown-item :command="0" divided @click="switchRolesAction('other')">
{{currentRoles==='other'?'当前角色':'切换角色'}}：普通用户
{{ currentRoles === 'other' ? '当前角色' : '切换角色' }}：普通用户
</el-dropdown-item>
<el-dropdown-item :command="3" divided @click="modifyPassword">
<el-icon><Edit /></el-icon>修改密码
</el-dropdown-item>
<el-dropdown-item :command="4" divided @click="logOut" >
<el-dropdown-item :command="4" divided @click="logOut">
<el-icon><SwitchButton /></el-icon>退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<PersonalDialog ref="person"/>
<PersonalDialog ref="person" />
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import {computed, ref} from "vue";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, ref } from 'vue'
import AvatarLogo from '@/assets/image/avatar.png'
import {useUserStore} from "@/store/modules/user"
import {useTagsViewStore} from "@/store/modules/tagsView"
import {usePermissionStore} from "@/store/modules/permission"
import PersonalDialog from './PersonalDialog.vue'
import AvatarLogo from '@/assets/image/avatar.png'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { usePermissionStore } from '@/store/modules/permission'
import PersonalDialog from './PersonalDialog.vue'
const router = useRouter()
const UserStore = useUserStore()
const TagsViewStore = useTagsViewStore()
const PermissionStore = usePermissionStore()
const router = useRouter()
const UserStore = useUserStore()
const TagsViewStore = useTagsViewStore()
const PermissionStore = usePermissionStore()
const currentRoles = computed({
get() {
return UserStore.roles[0]
},
set(val) {
;(async () => {
await UserStore.getInfo([val])
router.push({
path:'/'
})
location.reload()
})()
},
})
const currentRoles = computed({
get() {
return UserStore.roles[0]
},
set(val) {
;(async () => {
await UserStore.getInfo([val])
router.push({
path: '/',
})
location.reload()
})()
},
})
const switchRolesAction = (type:string)=>{
if(type===currentRoles.value) return
currentRoles.value = currentRoles.value==='admin'?'other':'admin'
}
const switchRolesAction = (type: string) => {
if (type === currentRoles.value) return
currentRoles.value = currentRoles.value === 'admin' ? 'other' : 'admin'
}
// 用户信息
const userInfo = computed(() => UserStore.userInfo)
const person = ref()
// 用户信息
const userInfo = computed(() => UserStore.userInfo)
const person = ref()
const logOut = async () => {
const logOut = async () => {
ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await UserStore.logout()
await router.push({path: '/login'})
TagsViewStore.clearVisitedView()
PermissionStore.clearRoutes()
ElMessage({
type: "success",
message: "退出登录成功！"
});
})
.catch(() => {})
}
const modifyPassword = ()=>{
person.value.show()
}
.then(async () => {
await UserStore.logout()
await router.push({ path: '/login' })
TagsViewStore.clearVisitedView()
PermissionStore.clearRoutes()
ElMessage({
type: 'success',
message: '退出登录成功！',
})
})
.catch(() => {})
}
const modifyPassword = () => {
person.value.show()
}
</script>
<style lang="scss" scoped>
.avatar{
margin-right: 6px
}
.el-dropdown-link {
cursor: pointer;
//color: var(--el-color-primary);
display: flex;
align-items: center;
}
.avatar {
margin-right: 6px;
}
.el-dropdown-link {
cursor: pointer;
//color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>

42
src/layout/components/Header/components/CollapseIcon.vue
View File

@ -1,30 +1,30 @@
<template>
<div class="hamburger-container" @click="handleCollapse">
<el-icon class="icon" v-if="isCollapse" ><expand /></el-icon>
<el-icon class="icon" v-else><fold /></el-icon>
<el-icon v-if="isCollapse" class="icon"><expand /></el-icon>
<el-icon v-else class="icon"><fold /></el-icon>
</div>
</template>
<script lang="ts" setup>
import {useSettingStore} from "@/store/modules/setting"
import {computed} from "vue";
const SettingStore = useSettingStore()
const isCollapse = computed(() =>!SettingStore.isCollapse)
const handleCollapse = () => {
SettingStore.setCollapse(isCollapse.value)
}
import { useSettingStore } from '@/store/modules/setting'
import { computed } from 'vue'
const SettingStore = useSettingStore()
const isCollapse = computed(() => !SettingStore.isCollapse)
const handleCollapse = () => {
SettingStore.setCollapse(isCollapse.value)
}
</script>
<style lang="scss" scoped>
.hamburger-container{
padding: 0px 15px;
height: 100%;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, .025)
.hamburger-container {
padding: 0px 15px;
height: 100%;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
.icon {
font-size: 24px;
cursor: pointer;
}
}
.icon {
font-size: 24px;
cursor: pointer;
}
}
</style>

27
src/layout/components/Header/components/Hamburger.vue
View File

@ -1,7 +1,7 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb" >
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-if="matched[0].meta.title !== '首页'" key="home" :to="{ path: '/' }">
<div class="breadcrumb-item">
<span class="breadcrumb-title">首页</span>
</div>
@ -15,20 +15,17 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute ,useRouter} from 'vue-router'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const handleLink = (item)=>{
router.push({
path:item.path
})
}
const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
const route = useRoute()
const router = useRouter()
const handleLink = (item) => {
router.push({
path: item.path,
})
}
const matched = computed(() => route.matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false))
</script>

284
src/layout/components/Header/components/HeaderSearch.vue
View File

@ -1,23 +1,27 @@
<template>
<div class="m-headerSearch">
<el-tooltip effect="dark" content="菜单搜索" placement="bottom">
<el-icon class="bell header-icon" style="font-size: 22px;" @click="handleSearch"><Search /></el-icon>
<el-icon class="bell header-icon" style="font-size: 22px" @click="handleSearch"><Search /></el-icon>
</el-tooltip>
<el-dialog v-model="isShowSearch" width="600px" destroy-on-close :show-close="false">
<el-dialog v-model="isShowSearch" width="600px" destroy-on-close :show-close="false">
<el-select
style="width: 100%"
ref="headerSearchSelect"
v-model="search"
:remote-method="querySearch"
filterable
default-first-option
remote
placeholder="菜单搜索 ：支持菜单名称、路径"
class="header-search-select"
@change="change"
ref="headerSearchSelect"
v-model="search"
style="width: 100%"
:remote-method="querySearch"
filterable
default-first-option
remote
placeholder="菜单搜索 ：支持菜单名称、路径"
class="header-search-select"
@change="change"
>
<el-option v-for="item in options" :key="item.item.path" :value="item.item.path" :label="item&&item.item.title&&item.item.title.length&&item.item.title.join(' > ') " >
<el-option
v-for="item in options"
:key="item.item.path"
:value="item.item.path"
:label="item && item.item.title && item.item.title.length && item.item.title.join(' > ')"
>
</el-option>
</el-select>
</el-dialog>
@ -25,147 +29,149 @@
</template>
<script lang="ts" setup>
import {computed, onMounted, ref, watch} from 'vue'
import path from 'path-browserify'
import Fuse from 'fuse.js'
import { useVueFuse } from 'vue-fuse'
import {useRouter} from "vue-router";
const router = useRouter()
const isShowSearch = ref(false);
const options = ref([]);
const searchPool = ref([]);
const search = ref('');
const fuse = ref(null);
import {usePermissionStore} from "@/store/modules/permission"
const PermissionStore = usePermissionStore()
const routes = computed(() => PermissionStore.routes)
import { computed, onMounted, ref, watch } from 'vue'
import path from 'path-browserify'
import Fuse from 'fuse.js'
import { useVueFuse } from 'vue-fuse'
import { useRouter } from 'vue-router'
const router = useRouter()
const isShowSearch = ref(false)
const options = ref([])
const searchPool = ref([])
const search = ref('')
const fuse = ref(null)
import { usePermissionStore } from '@/store/modules/permission'
const PermissionStore = usePermissionStore()
const routes = computed(() => PermissionStore.routes)
const handleSearch = () => {
isShowSearch.value = true
}
const initFuse = (list)=> {
fuse.value = new Fuse(list, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [{
name: 'title',
weight: 0.7
}, {
name: 'path',
weight: 0.3
}]
})
}
watch(searchPool,(list)=>{
initFuse(list)
})
// 筛选出可以在侧栏中显示的路线 生成标题
const generateRoutes = (routes, basePath = '/', prefixTitle = [])=>{
let res = []
for (const router of routes) {
// 忽略隐藏的路由
if (router.hidden) { continue }
const data = {
path: path.resolve(basePath, router.path),
title: [...prefixTitle]
}
if (router.meta && router.meta.title) {
data.title = [...data.title, router.meta.title]
if (router.redirect !== 'noRedirect') {
// 仅推送带有标题的路由
// 特殊情况：需要排除无重定向的父路由器
res.push(data)
}
}
// 递归子路由
if (router.children) {
const tempRoutes = generateRoutes(router.children, data.path, data.title)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
const handleSearch = () => {
isShowSearch.value = true
}
return res
}
const change=(val)=> {
if(val){
router.push({
path: val,
const initFuse = (list) => {
fuse.value = new Fuse(list, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
{
name: 'title',
weight: 0.7,
},
{
name: 'path',
weight: 0.3,
},
],
})
}
options.value = []
search.value = ''
isShowSearch.value = false
}
onMounted(()=>{
searchPool.value = generateRoutes(JSON.parse(JSON.stringify(routes.value)))
})
const querySearch=(query)=> {
if (query !== '') {
options.value = fuse.value.search(query)
} else {
options.value = []
watch(searchPool, (list) => {
initFuse(list)
})
// 筛选出可以在侧栏中显示的路线 生成标题
const generateRoutes = (routes, basePath = '/', prefixTitle = []) => {
let res = []
for (const router of routes) {
// 忽略隐藏的路由
if (router.hidden) {
continue
}
const data = {
path: path.resolve(basePath, router.path),
title: [...prefixTitle],
}
if (router.meta && router.meta.title) {
data.title = [...data.title, router.meta.title]
if (router.redirect !== 'noRedirect') {
// 仅推送带有标题的路由
// 特殊情况：需要排除无重定向的父路由器
res.push(data)
}
}
// 递归子路由
if (router.children) {
const tempRoutes = generateRoutes(router.children, data.path, data.title)
if (tempRoutes.length >= 1) {
res = [...res, ...tempRoutes]
}
}
}
return res
}
const change = (val) => {
if (val) {
router.push({
path: val,
})
}
options.value = []
search.value = ''
isShowSearch.value = false
}
onMounted(() => {
searchPool.value = generateRoutes(JSON.parse(JSON.stringify(routes.value)))
})
const querySearch = (query) => {
if (query !== '') {
options.value = fuse.value.search(query)
} else {
options.value = []
}
}
}
</script>
<style lang="scss" scoped>
.m-headerSearch {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
.m-headerSearch {
display: flex;
align-items: center;
}
.bell{
color: black;
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
}
}
.transverseMenu {
.bell {
color: white;
}
}
.header-search-select{
}
/* 菜单搜索样式 */
.m-headerSearch {
:deep(.el-dialog) {
.el-dialog__header {
display: none;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
display: flex;
align-items: center;
}
.el-dialog__body{
padding: 0;
.bell {
color: black;
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
}
}
.header-search-select{
height: 50px;
:deep(.el-input__wrapper){
.transverseMenu {
.bell {
color: white;
}
}
.header-search-select {
}
/* 菜单搜索样式 */
.m-headerSearch {
:deep(.el-dialog) {
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
}
}
.header-search-select {
height: 50px;
:deep(.el-input__wrapper) {
height: 50px;
}
}
}
}
</style>

14
src/layout/components/Header/components/Height.vue
View File

@ -1,14 +1,10 @@
<template>
<div
:style="{ height:`${themeConfig.showTag?90:50}px`}"
v-if="themeConfig.fixedHeader">
</div>
<div v-if="themeConfig.fixedHeader" :style="{ height: `${themeConfig.showTag ? 90 : 50}px` }"> </div>
</template>
<script lang="ts" setup>
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
const themeConfig = computed(()=>SettingStore.themeConfig)
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
const themeConfig = computed(() => SettingStore.themeConfig)
</script>

11
src/layout/components/Header/components/PersonalDialog.vue
View File

@ -1,13 +1,6 @@
<template>
<el-dialog v-model="dialogVisible" title="修改密码" width="40%">
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize">
<el-form-item label="姓名">
<el-input v-model="ruleForm.name" disabled></el-input>
</el-form-item>
@ -31,7 +24,7 @@
import { ref, defineExpose, reactive } from 'vue'
import type { ElForm } from 'element-plus'
const dialogVisible = ref(false)
import {useUserStore} from "@/store/modules/user"
import { useUserStore } from '@/store/modules/user'
const UserStore = useUserStore()
const show = () => {
dialogVisible.value = true

82
src/layout/components/Header/components/Remind.vue
View File

@ -3,22 +3,28 @@
<el-popover width="200px" placement="bottom">
<template #reference>
<el-badge :value="3" class="item-info-pop">
<el-icon class="bell header-icon" style="font-size: 20px;"><Bell /></el-icon>
<el-icon class="bell header-icon" style="font-size: 20px"><Bell /></el-icon>
</el-badge>
</template>
<div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="通知" name="first">
<div class="item-child">
GitHub开源地址：<el-button type="primary" link @click="toGitHub('https://github.com/zouzhibin/vue-admin-perfect')">点我</el-button></div
GitHub开源地址：<el-button type="primary" link @click="toGitHub('https://github.com/zouzhibin/vue-admin-perfect')"
>点我</el-button
></div
>
<el-divider style="margin-bottom: 15px"/>
<el-divider style="margin-bottom: 15px" />
<div class="item-child">
Gitee开源地址：<el-button type="primary" link @click="toGitHub('https://gitee.com/yuanzbz/vue-admin-perfect')">点我</el-button></div
Gitee开源地址：<el-button type="primary" link @click="toGitHub('https://gitee.com/yuanzbz/vue-admin-perfect')"
>点我</el-button
></div
>
<el-divider />
<div class="item-child">
github开源地址：<el-button type="primary" link @click="toGitHub('https://github.com/zouzhibin/vue-admin-perfect')">点我</el-button></div
github开源地址：<el-button type="primary" link @click="toGitHub('https://github.com/zouzhibin/vue-admin-perfect')"
>点我</el-button
></div
>
</el-tab-pane>
</el-tabs>
@ -28,45 +34,45 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const toGitHub = (link) => {
window.open(link)
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
const activeName = ref('first')
const toGitHub = (link) => {
window.open(link)
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>
<style lang="scss" scoped>
.m-info {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
display: flex;
.m-info {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
display: flex;
align-items: center;
}
.bell {
color: black;
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
}
}
.bell{
color: black;
::v-deep(.el-divider--horizontal) {
margin-bottom: 10px;
margin-top: 10px;
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
.transverseMenu {
.bell {
color: white;
}
}
}
::v-deep(.el-divider--horizontal){
margin-bottom: 10px;
margin-top: 10px;
}
.transverseMenu {
.bell {
color: white;
}
}
</style>

24
src/layout/components/Header/components/ScreenFull.vue
View File

@ -1,25 +1,23 @@
<template>
<div class="m-screenful">
<el-tooltip effect="dark" content="全屏" placement="bottom">
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggle"
className="header-icon"
/>
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" class-name="header-icon" @click="toggle" />
</el-tooltip>
</div>
</template>
<script lang="ts" setup>
import { useFullscreen } from "@vueuse/core";
const { toggle, isFullscreen } = useFullscreen();
import { useFullscreen } from '@vueuse/core'
const { toggle, isFullscreen } = useFullscreen()
</script>
<style lang="scss" scoped>
.m-screenful {
display: flex;
align-items: center;
padding-right: 0;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.m-screenful {
display: flex;
align-items: center;
padding-right: 0;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
</style>

51
src/layout/components/Header/components/Setting.vue
View File

@ -1,45 +1,42 @@
<template>
<div class="m-setting">
<el-tooltip effect="dark" content="主题设置" placement="bottom">
<el-icon style="font-size: 20px;" class="bell header-icon"><Setting @click="changeSwitch('showSetting',true)"/></el-icon>
<el-icon style="font-size: 20px" class="bell header-icon"><Setting @click="changeSwitch('showSetting', true)" /></el-icon>
</el-tooltip>
</div>
</template>
<script lang="ts" setup>
import {useSettingStore} from "@/store/modules/setting"
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
const changeSwitch = (key,val) => {
SettingStore.setThemeConfig({key, val})
const changeSwitch = (key, val) => {
SettingStore.setThemeConfig({ key, val })
}
</script>
<style lang="scss" scoped>
.m-setting {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
.m-setting {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
.item-info-pop {
display: flex;
align-items: center;
}
.bell {
color: black;
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
}
}
.bell{
color: black;
.transverseMenu {
.bell {
color: white;
}
}
.item-child {
display: flex;
align-items: center;
font-size: 13px;
}
}
.transverseMenu {
.bell {
color: white;
}
}
</style>

38
src/layout/components/Header/components/globalComSize.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dropdown trigger="hover" @command="setAssemblySize">
<svg-icon class-name="size-icon header-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
<svg-icon class-name="size-icon header-icon" icon-class="size" style="font-size: 20px; cursor: pointer" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">
@ -12,30 +12,30 @@
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
import { reactive, computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
const SettingStore = useSettingStore()
const globalComSize = computed(():string=>SettingStore.themeConfig.globalComSize)
const globalComSize = computed((): string => SettingStore.themeConfig.globalComSize)
const assemblySizeListCh = reactive<{ [key: string]: any }>({
default: "默认",
large: "大型",
small: "小型"
});
const assemblySizeListCh = reactive<{ [key: string]: any }>({
default: '默认',
large: '大型',
small: '小型',
})
const assemblySizeList = reactive<string[]>(["default", "large", "small"]);
const assemblySizeList = reactive<string[]>(['default', 'large', 'small'])
const setAssemblySize = (item: string) => {
if (globalComSize.value === item) return;
SettingStore.setThemeConfig({key:'globalComSize', val:item})
};
const setAssemblySize = (item: string) => {
if (globalComSize.value === item) return
SettingStore.setThemeConfig({ key: 'globalComSize', val: item })
}
</script>
<style scoped lang="scss">
.transverseMenu {
.size-icon {
color: white;
.transverseMenu {
.size-icon {
color: white;
}
}
}
</style>

2
src/layout/components/Main/index.vue
View File

@ -2,7 +2,7 @@
<div class="app-main">
<router-view v-slot="{ Component, route }">
<transition name="fade-slide" mode="out-in" appear>
<keep-alive :include="cacheRoutes" v-if="isReload">
<keep-alive v-if="isReload" :include="cacheRoutes">
<component :is="useWrapComponents(Component, route)" :key="route.path" />
</keep-alive>
</transition>

26
src/layout/components/Mobile/index.vue
View File

@ -3,22 +3,20 @@
</template>
<script lang="ts" setup>
import {computed} from "vue";
import { useResizeHandler } from '@/hooks/useResizeHandler'
import {useSettingStore} from "@/store/modules/setting"
import { computed } from 'vue'
import { useResizeHandler } from '@/hooks/useResizeHandler'
import { useSettingStore } from '@/store/modules/setting'
let { device } = useResizeHandler()
const SettingStore = useSettingStore()
let { device } = useResizeHandler()
const SettingStore = useSettingStore()
// 是否折叠
const isCollapse = computed(() => !SettingStore.isCollapse)
// 是否折叠
const isCollapse = computed(() => !SettingStore.isCollapse)
// 移动端点击
const handleClickOutside = () => {
SettingStore.closeSideBar({ withoutAnimation: false })
}
// 移动端点击
const handleClickOutside = () => {
SettingStore.closeSideBar({ withoutAnimation: false })
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

7
src/layout/components/Sidebar/components/Logo.vue
View File

@ -2,10 +2,10 @@
<div class="sidebar-logo-container">
<transition name="sidebarLogoFadeCl">
<router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
<img src="@/assets/image/logo.png" class="sidebar-logo">
<img src="@/assets/image/logo.png" class="sidebar-logo" />
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img src="@/assets/image/logo.png" class="sidebar-logo">
<img src="@/assets/image/logo.png" class="sidebar-logo" />
<h1 class="sidebar-title">Vue Admin Perfect</h1>
</router-link>
</transition>
@ -13,7 +13,7 @@
</template>
<script lang="ts" setup>
defineProps<{ isCollapse: boolean }>();
defineProps<{ isCollapse: boolean }>()
</script>
<style lang="scss" scoped>
@ -41,7 +41,6 @@ defineProps<{ isCollapse: boolean }>();
width: 32px;
height: 32px;
vertical-align: middle;
}
& .sidebar-title {
display: inline-block;

2
src/layout/components/Sidebar/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
<Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo" />
<Logo v-if="themeConfig.showLogo" :is-collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"

40
src/layout/components/SubMenu/MenuItem.vue
View File

@ -1,7 +1,5 @@
<template>
<el-menu-item
:index="subItem.path"
@click="handleClickMenu(subItem)">
<el-menu-item :index="subItem.path" @click="handleClickMenu(subItem)">
<el-icon>
<component :is="subItem?.meta?.icon"></component>
</el-icon>
@ -12,24 +10,24 @@
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { isExternal } from "@/utils/validate";
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { isExternal } from '@/utils/validate'
const router = useRouter();
let props = defineProps({
menuList:{
type:Array,
default:()=>[]
},
subItem:{
type:Object,
default:()=>{}
},
})
const router = useRouter()
let props = defineProps({
menuList: {
type: Array,
default: () => [],
},
subItem: {
type: Object,
default: () => {},
},
})
const handleClickMenu = (subItem) => {
if (isExternal(subItem.path)) return window.open(subItem.path, "_blank");
router.push(subItem.path);
};
const handleClickMenu = (subItem) => {
if (isExternal(subItem.path)) return window.open(subItem.path, '_blank')
router.push(subItem.path)
}
</script>

99
src/layout/components/SubMenu/SubItem.vue
View File

@ -10,70 +10,65 @@
</el-menu-item>
</app-link>
</template>
<el-sub-menu :index="item.path" v-else teleported >
<el-sub-menu v-else :index="item.path" teleported>
<template #title>
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
<span>{{ item.meta && item.meta.title }}</span>
</template>
<sub-item
v-for="child in item.children"
:key="child.path"
:item="child"
/>
<sub-item v-for="child in item.children" :key="child.path" :item="child" />
</el-sub-menu>
</template>
</template>
<script lang="ts" setup>
import { isExternal } from '@/utils/validate.js'
import AppLink from './Link.vue'
import path from 'path-browserify'
import { ref, computed } from 'vue'
const props = defineProps({
item: {
type: Object,
required: true,
},
basePath: {
type: String,
default: '',
},
})
const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
return false
} else {
// 临时设置（如果只有一个显示子项，则将使用）
onlyOneChild.value = item
return true
}
import { isExternal } from '@/utils/validate.js'
import AppLink from './Link.vue'
import path from 'path-browserify'
import { ref, computed } from 'vue'
const props = defineProps({
item: {
type: Object,
required: true,
},
basePath: {
type: String,
default: '',
},
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
return true
}
// 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, noShowingChildren: true }
return true
const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
return false
} else {
// 临时设置（如果只有一个显示子项，则将使用）
onlyOneChild.value = item
return true
}
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
return true
}
// 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, noShowingChildren: true }
return true
}
return false
}
return false
}
const resolvePath = (routePath) => {
if (isExternal(routePath)) {
return routePath
const resolvePath = (routePath) => {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(props.basePath)) {
return props.basePath
}
return path.resolve(props.basePath, routePath)
}
if (isExternal(props.basePath)) {
return props.basePath
}
return path.resolve(props.basePath, routePath)
}
</script>

63
src/layout/components/SubMenu/SubMenu.vue
View File

@ -1,10 +1,8 @@
<template>
<template v-for="subItem in menuList" :key="subItem.path">
<template v-if="!subItem.hidden">
<template v-if="!subItem.alwaysShow&&hasOneChild(subItem.children, subItem)">
<MenuItem
:subItem="hasOneChild(subItem.children, subItem)"
/>
<template v-if="!subItem.alwaysShow && hasOneChild(subItem.children, subItem)">
<MenuItem :sub-item="hasOneChild(subItem.children, subItem)" />
</template>
<el-sub-menu v-else :index="subItem.path">
<template #title>
@ -13,42 +11,41 @@
</el-icon>
<span>{{ subItem?.meta?.title }}</span>
</template>
<SubMenu :menuList="subItem.children" />
<SubMenu :menu-list="subItem.children" />
</el-sub-menu>
</template>
</template>
</template>
<script setup lang="ts">
import { ref } from "vue";
import MenuItem from './MenuItem.vue'
import { ref } from 'vue'
import MenuItem from './MenuItem.vue'
let props = defineProps({
menuList:{
type:Array,
default:()=>[]
},
})
const hasOneChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
return false
} else {
return true
}
let props = defineProps({
menuList: {
type: Array,
default: () => [],
},
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
// （如果只有一个显示子项，则将使用）
return showingChildren[0]
}
// 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) {
return parent
}
return false
}
const hasOneChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
return false
} else {
return true
}
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
// （如果只有一个显示子项，则将使用）
return showingChildren[0]
}
// 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) {
return parent
}
return false
}
</script>

83
src/layout/components/TagsView/components/MoreButton.vue
View File

@ -6,51 +6,58 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refresh"><el-icon :size="14"><Refresh /></el-icon> 刷新当页</el-dropdown-item>
<el-dropdown-item @click="closeCurrentTab"><el-icon :size="14"><FolderRemove/></el-icon> 关闭当前</el-dropdown-item>
<el-dropdown-item @click="closeOtherTab"><el-icon :size="14"><Close /></el-icon>关闭其他</el-dropdown-item>
<el-dropdown-item @click="closeAllTab"><el-icon :size="14"><FolderDelete /></el-icon>关闭所有</el-dropdown-item>
<el-dropdown-item @click="refresh"
><el-icon :size="14"><Refresh /></el-icon> 刷新当页</el-dropdown-item
>
<el-dropdown-item @click="closeCurrentTab"
><el-icon :size="14"><FolderRemove /></el-icon> 关闭当前</el-dropdown-item
>
<el-dropdown-item @click="closeOtherTab"
><el-icon :size="14"><Close /></el-icon>关闭其他</el-dropdown-item
>
<el-dropdown-item @click="closeAllTab"
><el-icon :size="14"><FolderDelete /></el-icon>关闭所有</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts" setup>
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
import {useTagsViewStore} from "@/store/modules/tagsView"
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const SettingStore = useSettingStore()
const TagsViewStore = useTagsViewStore()
const visitedViews = computed(() => TagsViewStore.visitedViews)
const refresh = () => {
SettingStore.setReload()
}
// 关闭当前
const closeCurrentTab = (event)=>{
TagsViewStore.toLastView(route.path)
TagsViewStore.delView(route.path)
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const SettingStore = useSettingStore()
const TagsViewStore = useTagsViewStore()
const visitedViews = computed(() => TagsViewStore.visitedViews)
const refresh = () => {
SettingStore.setReload()
}
// 关闭当前
const closeCurrentTab = (event) => {
TagsViewStore.toLastView(route.path)
TagsViewStore.delView(route.path)
}
// 关闭其他
const closeOtherTab = async () => {
TagsViewStore.delOtherViews(route.path)
}
}
// 关闭其他
const closeOtherTab= async ()=>{
TagsViewStore.delOtherViews(route.path)
}
// 关闭所有 去首页
const closeAllTab = async ()=>{
await TagsViewStore.delAllViews()
TagsViewStore.goHome()
}
// 关闭所有 去首页
const closeAllTab = async () => {
await TagsViewStore.delAllViews()
TagsViewStore.goHome()
}
</script>
<style lang="scss" scoped>
.more{
background-color: $primaryColor;
color: white;
.tags-view-item{
display: flex;
align-items: center;
.more {
background-color: $primaryColor;
color: white;
.tags-view-item {
display: flex;
align-items: center;
}
}
}
</style>

255
src/layout/components/TagsView/index.vue
View File

@ -1,22 +1,17 @@
<template>
<div class="m-tags-view">
<div class="tags-view">
<el-tabs
v-model="activeTabsValue"
type="card"
@tab-click="tabClick"
@tab-remove="removeTab"
>
<el-tabs v-model="activeTabsValue" type="card" @tab-click="tabClick" @tab-remove="removeTab">
<el-tab-pane
v-for="item in visitedViews"
:key="item.path"
:path="item.path"
:label="item.title"
:name="item.path"
:closable="!(item.meta&&item.meta.affix)"
v-for="item in visitedViews"
:key="item.path"
:path="item.path"
:label="item.title"
:name="item.path"
:closable="!(item.meta && item.meta.affix)"
>
<template #label>
<el-icon class="tabs-icon" v-if="item.icon">
<el-icon v-if="item.icon" class="tabs-icon">
<component :is="item.icon"></component>
</el-icon>
{{ item.title }}
@ -25,143 +20,143 @@
</el-tabs>
</div>
<div class="right-btn">
<MoreButton/>
<MoreButton />
</div>
</div>
</template>
<script lang="ts" setup>
import {computed, watch, ref, onMounted} from "vue";
import { useRoute, useRouter } from "vue-router";
import { TabsPaneContext } from "element-plus";
import MoreButton from './components/MoreButton'
import path from 'path-browserify'
import {useTagsViewStore} from "@/store/modules/tagsView"
import {usePermissionStore} from "@/store/modules/permission"
import { computed, watch, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { TabsPaneContext } from 'element-plus'
import MoreButton from './components/MoreButton'
import path from 'path-browserify'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { usePermissionStore } from '@/store/modules/permission'
const route = useRoute()
const router = useRouter()
const TagsViewStore = useTagsViewStore()
const PermissionStore = usePermissionStore()
const visitedViews = computed(() => TagsViewStore.visitedViews)
const routes = computed(() => PermissionStore.routes)
const route = useRoute()
const router = useRouter()
const TagsViewStore = useTagsViewStore()
const PermissionStore = usePermissionStore()
const visitedViews = computed(() => TagsViewStore.visitedViews)
const routes = computed(() => PermissionStore.routes)
const addTags = () => {
const { name } = route
if (name === 'Login') {
return
}
if (name) {
TagsViewStore.addView(route)
}
return false
}
let affixTags = ref([])
function filterAffixTags(routes, basePath = '/') {
let tags = []
routes.forEach((route) => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta },
})
const addTags = () => {
const { name } = route
if (name === 'Login') {
return
}
if (route.children) {
const tempTags = filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
if (name) {
TagsViewStore.addView(route)
}
return false
}
let affixTags = ref([])
function filterAffixTags(routes, basePath = '/') {
let tags = []
routes.forEach((route) => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta },
})
}
if (route.children) {
const tempTags = filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
return tags
}
const initTags = () => {
let routesNew = routes.value
let affixTag = (affixTags.value = filterAffixTags(routesNew))
for (const tag of affixTag) {
if (tag.name) {
TagsViewStore.addVisitedView(tag)
}
}
}
onMounted(() => {
initTags()
addTags()
})
return tags
}
const initTags = () => {
let routesNew = routes.value
let affixTag = (affixTags.value = filterAffixTags(routesNew))
for (const tag of affixTag) {
if (tag.name) {
TagsViewStore.addVisitedView(tag)
}
watch(route, () => {
addTags()
})
let tabIndex = 2
const activeTabsValue = computed({
get: () => {
return TagsViewStore.activeTabsValue
},
set: (val) => {
TagsViewStore.setTabsMenuValue(val)
},
})
function toLastView(activeTabPath) {
let index = visitedViews.value.findIndex((item) => item.path === activeTabPath)
const nextTab = visitedViews.value[index + 1] || visitedViews.value[index - 1]
if (!nextTab) return
router.push(nextTab.path)
TagsViewStore.addVisitedView(nextTab)
}
}
onMounted(()=>{
initTags()
addTags()
})
watch(route, () => {
addTags()
})
let tabIndex = 2
const activeTabsValue = computed({
get: () => {
return TagsViewStore.activeTabsValue;
},
set: val => {
TagsViewStore.setTabsMenuValue(val);
const tabClick = (tabItem: TabsPaneContext) => {
let path = tabItem.props.name as string
router.push(path)
}
});
function toLastView(activeTabPath) {
let index = visitedViews.value.findIndex(item=>item.path===activeTabPath)
const nextTab = visitedViews.value[index + 1] || visitedViews.value[index - 1];
if (!nextTab) return;
router.push(nextTab.path);
TagsViewStore.addVisitedView(nextTab)
}
const tabClick = (tabItem: TabsPaneContext) => {
let path = tabItem.props.name as string;
router.push(path);
};
const isActive = (path) => {
return path === route.path
}
const removeTab = async (activeTabPath: string) => {
if (isActive(activeTabPath)) {
toLastView(activeTabPath)
const isActive = (path) => {
return path === route.path
}
const removeTab = async (activeTabPath: string) => {
if (isActive(activeTabPath)) {
toLastView(activeTabPath)
}
await TagsViewStore.delView(activeTabPath)
}
await TagsViewStore.delView(activeTabPath)
}
</script>
<style lang="scss" scoped>
.m-tags-view{
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
background: white;
.right-btn{
height: 100%;
flex-shrink: 0;
.m-tags-view {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
background: white;
.right-btn {
height: 100%;
flex-shrink: 0;
}
}
}
.tags-view {
flex: 1;
overflow: hidden;
box-sizing: border-box;
}
.tags-view{
.el-tabs--card :deep(.el-tabs__header){
.tags-view {
flex: 1;
overflow: hidden;
box-sizing: border-box;
height: 40px;
padding: 0 10px;
margin: 0;
}
:deep(.el-tabs){
.el-tabs__nav {
border: none;
.tags-view {
.el-tabs--card :deep(.el-tabs__header) {
box-sizing: border-box;
height: 40px;
padding: 0 10px;
margin: 0;
}
.el-tabs__header .el-tabs__item {
border: none;
color: #cccccc;
}
.el-tabs__header .el-tabs__item.is-active {
color: $primaryColor;
border-bottom:2px solid $primaryColor;
:deep(.el-tabs) {
.el-tabs__nav {
border: none;
}
.el-tabs__header .el-tabs__item {
border: none;
color: #cccccc;
}
.el-tabs__header .el-tabs__item.is-active {
color: $primaryColor;
border-bottom: 2px solid $primaryColor;
}
}
}
}
</style>

16
src/main.ts
View File

@ -1,32 +1,32 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './routers'
import pinia from "./store";
import pinia from './store'
import {registerElIcons} from "@/plugins/ElIcons"
import { registerElIcons } from '@/plugins/ElIcons'
// 引入全局组件布局
import PageWrapLayout from '@/components/PageWrapLayout/index.vue'
// 权限路由
import './permission'
// svg-icons注册导入
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component
// UI框架 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入暗黑模式 element-plus 2.2 内置暗黑模式
import 'element-plus/theme-chalk/dark/css-vars.css'
// 自定义暗黑模式
import "@/styles/element-dark.scss";
import '@/styles/element-dark.scss'
// 引入阿里图标库
import "@/assets/iconfont/iconfont.css";
import "@/assets/iconfont/iconfont.js";
import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'
const app = createApp(App)
registerElIcons(app)
app.component('svg-icon',SvgIcon)
app.component('PageWrapLayout',PageWrapLayout)
app.component('SvgIcon', SvgIcon)
app.component('PageWrapLayout', PageWrapLayout)
app.use(pinia)
app.use(router)

937
src/mock/system.ts
View File

@ -1,476 +1,487 @@
export const userData =[
{
username:'zzb',
nickname:'林峰',
sex:'男',
role:'超级管理员',
status:true,
photo:'15333333333',
describe:'超级管理员不可删除',
createTime:'2022-09-02 15:30:20',
},
{
username:'zhangsan',
nickname:'张三',
sex:'女',
role:'管理员',
status:true,
photo:'15311111111',
describe:'管理员不可删除',
createTime:'2022-09-02 15:30:20',
},
{
username:'lisi',
nickname:'李四',
sex:'男',
role:'管理员',
status:true,
photo:'13823456789',
describe:'测试账户',
createTime:'2022-09-02 15:30:20',
},
{
username:'wangwu',
nickname:'王五',
sex:'男',
role:'超级管理员',
status:false,
photo:'13923456789',
describe:'超级管理员不可删除',
createTime:'2022-09-02 15:30:20',
},
{
username:'zhaoliu',
nickname:'赵柳',
sex:'男',
role:'普通用户',
status:false,
photo:'14523456789',
describe:'普通测试用户',
createTime:'2022-09-02 15:30:20',
},
export const userData = [
{
username: 'zzb',
nickname: '林峰',
sex: '男',
role: '超级管理员',
status: true,
photo: '15333333333',
describe: '超级管理员不可删除',
createTime: '2022-09-02 15:30:20',
},
{
username: 'zhangsan',
nickname: '张三',
sex: '女',
role: '管理员',
status: true,
photo: '15311111111',
describe: '管理员不可删除',
createTime: '2022-09-02 15:30:20',
},
{
username: 'lisi',
nickname: '李四',
sex: '男',
role: '管理员',
status: true,
photo: '13823456789',
describe: '测试账户',
createTime: '2022-09-02 15:30:20',
},
{
username: 'wangwu',
nickname: '王五',
sex: '男',
role: '超级管理员',
status: false,
photo: '13923456789',
describe: '超级管理员不可删除',
createTime: '2022-09-02 15:30:20',
},
{
username: 'zhaoliu',
nickname: '赵柳',
sex: '男',
role: '普通用户',
status: false,
photo: '14523456789',
describe: '普通测试用户',
createTime: '2022-09-02 15:30:20',
},
]
export const deptData =[
{
"id": "0",
"deptName": "华东分部",
"orderNo": 1,
"createTime": "2011-02-25 18:37:39",
"remark": "世上无难事，只要肯登攀",
"status": false,
"children": [{
"id": "0-0",
"deptName": "研发部",
"orderNo": 1,
"createTime": "1995-10-07 03:22:40",
"remark": "不曾扬帆，何以至远方",
"status": true,
"parentDept": "0"
}, {
"id": "0-1",
"deptName": "市场部",
"orderNo": 2,
"createTime": "1972-06-20 09:33:40",
"remark": "努力到无能为力，拼搏到感动自己",
"status": false,
"parentDept": "0"
}, {
"id": "0-2",
"deptName": "商务部",
"orderNo": 3,
"createTime": "1992-10-31 02:54:45",
"remark": "没有过不了的坎，就怕自己不奋斗",
"status": false,
"parentDept": "0"
}, {
"id": "0-3",
"deptName": "财务部",
"orderNo": 4,
"createTime": "1971-07-06 13:01:49",
"remark": "没有口水与汗水，就没有成功的泪水。",
"status": true,
"parentDept": "0"
}]
}, {
"id": "1",
"deptName": "华南分部",
"orderNo": 2,
"createTime": "1995-12-24 06:36:26",
"remark": "这个世界从来不缺乏机遇，而是缺少抓住机遇的手。",
"status": false,
"children": [{
"id": "1-0",
"deptName": "研发部",
"orderNo": 1,
"createTime": "2022-05-10 12:44:05",
"remark": "奋斗令我们的生活充满生机，责任让我们的生命充满意义！",
"status": true,
"parentDept": "1"
}, {
"id": "1-1",
"deptName": "市场部",
"orderNo": 2,
"createTime": "2022-07-15 02:53:29",
"remark": "学习之心不可无，懒惰之心不可有。",
"status": true,
"parentDept": "1"
},
{
"id": "1-2",
"deptName": "商务部",
"orderNo": 3,
"createTime": "2022-08-11 22:44:55",
"remark": "学会等待，学会坚持，成功是一个循序渐进的过程。",
"status": true,
"parentDept": "1"
}, {
"id": "1-3",
"deptName": "财务部",
"orderNo": 4,
"createTime": "2022-10-26 19:38:29",
"remark": "能克服困难的人，可使困难化为良机",
"status": false,
"parentDept": "1"
}
]
}, {
"id": "2",
"deptName": "西北分部",
"orderNo": 3,
"createTime": "2022-08-27 16:49:21",
"remark": "行为决定性格，性格决定命运",
"status": false,
"children": [{
"id": "2-0",
"deptName": "研发部",
"orderNo": 1,
"createTime": "2022-12-11 03:49:33",
"remark": "带着自己的梦，以一种骄傲的姿态走下去",
"status": false,
"parentDept": "2"
}, {
"id": "2-1",
"deptName": "市场部",
"orderNo": 2,
"createTime": "2022-06-18 20:15:34",
"remark": "当世界都在说放弃的时候，轻轻的告诉自己：再试一次",
"status": true,
"parentDept": "2"
}, {
"id": "2-2",
"deptName": "商务部",
"orderNo": 3,
"createTime": "2022-07-17 09:37:41",
"remark": "不怕万人阻挡在前方，只怕自己先行投降",
"status": true,
"parentDept": "2"
}, {
"id": "2-3",
"deptName": "财务部",
"orderNo": 4,
"createTime": "2022-11-23 04:34:33",
"remark": "胸怀临云志，莫负少年时",
"status": false,
"parentDept": "2"
}]
}]
export const roleData =[
{
roleName:'超级管理员',
roleId:'admin',
roleIdentification:'admin',
describe:'这是超级管理员，拥有一切权限',
createTime:'2022-09-02 15:30:20',
},
{
roleName:'管理员',
roleId:'role',
roleIdentification:'admin',
describe:'普通管理员',
createTime:'2022-09-02 15:30:20',
},
{
roleName:'普通用户',
roleId:'other',
describe:'测试用户',
roleIdentification:'other',
createTime:'2022-09-02 15:30:20',
},
export const deptData = [
{
id: '0',
deptName: '华东分部',
orderNo: 1,
createTime: '2011-02-25 18:37:39',
remark: '世上无难事，只要肯登攀',
status: false,
children: [
{
id: '0-0',
deptName: '研发部',
orderNo: 1,
createTime: '1995-10-07 03:22:40',
remark: '不曾扬帆，何以至远方',
status: true,
parentDept: '0',
},
{
id: '0-1',
deptName: '市场部',
orderNo: 2,
createTime: '1972-06-20 09:33:40',
remark: '努力到无能为力，拼搏到感动自己',
status: false,
parentDept: '0',
},
{
id: '0-2',
deptName: '商务部',
orderNo: 3,
createTime: '1992-10-31 02:54:45',
remark: '没有过不了的坎，就怕自己不奋斗',
status: false,
parentDept: '0',
},
{
id: '0-3',
deptName: '财务部',
orderNo: 4,
createTime: '1971-07-06 13:01:49',
remark: '没有口水与汗水，就没有成功的泪水。',
status: true,
parentDept: '0',
},
],
},
{
id: '1',
deptName: '华南分部',
orderNo: 2,
createTime: '1995-12-24 06:36:26',
remark: '这个世界从来不缺乏机遇，而是缺少抓住机遇的手。',
status: false,
children: [
{
id: '1-0',
deptName: '研发部',
orderNo: 1,
createTime: '2022-05-10 12:44:05',
remark: '奋斗令我们的生活充满生机，责任让我们的生命充满意义！',
status: true,
parentDept: '1',
},
{
id: '1-1',
deptName: '市场部',
orderNo: 2,
createTime: '2022-07-15 02:53:29',
remark: '学习之心不可无，懒惰之心不可有。',
status: true,
parentDept: '1',
},
{
id: '1-2',
deptName: '商务部',
orderNo: 3,
createTime: '2022-08-11 22:44:55',
remark: '学会等待，学会坚持，成功是一个循序渐进的过程。',
status: true,
parentDept: '1',
},
{
id: '1-3',
deptName: '财务部',
orderNo: 4,
createTime: '2022-10-26 19:38:29',
remark: '能克服困难的人，可使困难化为良机',
status: false,
parentDept: '1',
},
],
},
{
id: '2',
deptName: '西北分部',
orderNo: 3,
createTime: '2022-08-27 16:49:21',
remark: '行为决定性格，性格决定命运',
status: false,
children: [
{
id: '2-0',
deptName: '研发部',
orderNo: 1,
createTime: '2022-12-11 03:49:33',
remark: '带着自己的梦，以一种骄傲的姿态走下去',
status: false,
parentDept: '2',
},
{
id: '2-1',
deptName: '市场部',
orderNo: 2,
createTime: '2022-06-18 20:15:34',
remark: '当世界都在说放弃的时候，轻轻的告诉自己：再试一次',
status: true,
parentDept: '2',
},
{
id: '2-2',
deptName: '商务部',
orderNo: 3,
createTime: '2022-07-17 09:37:41',
remark: '不怕万人阻挡在前方，只怕自己先行投降',
status: true,
parentDept: '2',
},
{
id: '2-3',
deptName: '财务部',
orderNo: 4,
createTime: '2022-11-23 04:34:33',
remark: '胸怀临云志，莫负少年时',
status: false,
parentDept: '2',
},
],
},
]
export const roleData = [
{
roleName: '超级管理员',
roleId: 'admin',
roleIdentification: 'admin',
describe: '这是超级管理员，拥有一切权限',
createTime: '2022-09-02 15:30:20',
},
{
roleName: '管理员',
roleId: 'role',
roleIdentification: 'admin',
describe: '普通管理员',
createTime: '2022-09-02 15:30:20',
},
{
roleName: '普通用户',
roleId: 'other',
describe: '测试用户',
roleIdentification: 'other',
createTime: '2022-09-02 15:30:20',
},
]
export const menuData =[
{
menuName:'首页',
menuType:'菜单',
menuRouter:'/home',
identification:'menu:home',
parentId:0,
level:1,
id:0,
createTime:'2022-09-02',
},
{
menuName:'表格',
menuType:'目录',
menuRouter:'/table',
identification:'menu:table',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/table',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/table',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
export const menuData = [
{
menuName: '首页',
menuType: '菜单',
menuRouter: '/home',
identification: 'menu:home',
parentId: 0,
level: 1,
id: 0,
createTime: '2022-09-02',
},
{
menuName: '表格',
menuType: '目录',
menuRouter: '/table',
identification: 'menu:table',
parentId: 0,
level: 1,
id: 1,
createTime: '2022-09-02',
children: [
{
menuName: '菜单1',
menuType: '菜单',
menuRouter: '/table',
identification: 'menu1:view',
parentId: 1,
level: 2,
id: 10,
createTime: '2022-09-02',
children: [
{
menuName: '按钮1',
menuType: '按钮',
menuRouter: '/table',
identification: 'menu1:view:btn1',
parentId: 10,
id: 20,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮2',
menuType: '按钮',
menuRouter: '/table',
identification: 'menu1:view:btn2',
parentId: 10,
id: 21,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮3',
menuType: '按钮',
menuRouter: '/table',
identification: 'menu1:view:btn2',
parentId: 10,
id: 22,
level: 3,
createTime: '2022-09-02',
},
],
},
],
},
{
menuName:'可视化图表',
menuType:'目录',
menuRouter:'/charts',
identification:'menu:charts',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/charts',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/charts',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
{
menuName:'基础组件',
menuType:'目录',
menuRouter:'/components',
identification:'menu:components',
parentId:0,
level:1,
id:1,
createTime:'2022-09-02',
children:[
{
menuName:'菜单1',
menuType:'菜单',
menuRouter:'/components',
identification:'menu1:view',
parentId:1,
level:2,
id:10,
createTime:'2022-09-02',
children:[
{
menuName:'按钮1',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn1',
parentId:10,
id:20,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮2',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn2',
parentId:10,
id:21,
level:3,
createTime:'2022-09-02',
},
{
menuName:'按钮3',
menuType:'按钮',
menuRouter:'/components',
identification:'menu1:view:btn2',
parentId:10,
id:22,
level:3,
createTime:'2022-09-02',
}
]
}
]
},
{
menuName: '可视化图表',
menuType: '目录',
menuRouter: '/charts',
identification: 'menu:charts',
parentId: 0,
level: 1,
id: 1,
createTime: '2022-09-02',
children: [
{
menuName: '菜单1',
menuType: '菜单',
menuRouter: '/charts',
identification: 'menu1:view',
parentId: 1,
level: 2,
id: 10,
createTime: '2022-09-02',
children: [
{
menuName: '按钮1',
menuType: '按钮',
menuRouter: '/charts',
identification: 'menu1:view:btn1',
parentId: 10,
id: 20,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮2',
menuType: '按钮',
menuRouter: '/charts',
identification: 'menu1:view:btn2',
parentId: 10,
id: 21,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮3',
menuType: '按钮',
menuRouter: '/charts',
identification: 'menu1:view:btn2',
parentId: 10,
id: 22,
level: 3,
createTime: '2022-09-02',
},
],
},
],
},
{
menuName: '基础组件',
menuType: '目录',
menuRouter: '/components',
identification: 'menu:components',
parentId: 0,
level: 1,
id: 1,
createTime: '2022-09-02',
children: [
{
menuName: '菜单1',
menuType: '菜单',
menuRouter: '/components',
identification: 'menu1:view',
parentId: 1,
level: 2,
id: 10,
createTime: '2022-09-02',
children: [
{
menuName: '按钮1',
menuType: '按钮',
menuRouter: '/components',
identification: 'menu1:view:btn1',
parentId: 10,
id: 20,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮2',
menuType: '按钮',
menuRouter: '/components',
identification: 'menu1:view:btn2',
parentId: 10,
id: 21,
level: 3,
createTime: '2022-09-02',
},
{
menuName: '按钮3',
menuType: '按钮',
menuRouter: '/components',
identification: 'menu1:view:btn2',
parentId: 10,
id: 22,
level: 3,
createTime: '2022-09-02',
},
],
},
],
},
]
export const dictionaryData = [
{
"id": 1,
"name": "性别",
"keyCode":'sex',
"createTime": "2011-02-25 18:37:39",
"remark": "性别",
},
{
"id": 2,
"name": "证件类型",
"keyCode":'idType',
"createTime": "2011-02-25 18:37:39",
"remark": "证件类型",
}
{
id: 1,
name: '性别',
keyCode: 'sex',
createTime: '2011-02-25 18:37:39',
remark: '性别',
},
{
id: 2,
name: '证件类型',
keyCode: 'idType',
createTime: '2011-02-25 18:37:39',
remark: '证件类型',
},
]
export const dictionaryDetailData = [
{
"id": 1,
"keyCode":'sex',
"name": "性别",
"createTime": "2011-02-25 18:37:39",
"remark": "性别",
"children":[
{
"id": 11,
"name": "男",
"key":1,
"pid":1,
"createTime": "2011-02-25 18:37:39",
"remark": "男",
},
{
"id": 12,
"name": "女",
"key":0,
"pid":1,
"createTime": "2011-02-25 18:37:39",
"remark": "女",
}
]
},
{
"id": 2,
"keyCode":'idType',
"name": "证件类型",
"createTime": "2011-02-25 18:37:39",
"remark": "证件类型",
"children":[
{
"id": 21,
"name": "身份证",
"key":1,
"pid":2,
"createTime": "2011-02-25 18:37:39",
"remark": "身份证",
},
{
"id": 22,
"name": "社保卡",
"key":2,
"pid":2,
"createTime": "2011-02-25 18:37:39",
"remark": "社保卡",
},
{
"id": 23,
"name": "驾驶证",
"key":3,
"pid":2,
"createTime": "2011-02-25 18:37:39",
"remark": "驾驶证",
},
{
"id": 24,
"name": "护照",
"key":4,
"pid":2,
"createTime": "2011-02-25 18:37:39",
"remark": "护照",
},
{
"id": 25,
"name": "工作证",
"key":5,
"pid":2,
"createTime": "2011-02-25 18:37:39",
"remark": "工作证",
}
]
}
{
id: 1,
keyCode: 'sex',
name: '性别',
createTime: '2011-02-25 18:37:39',
remark: '性别',
children: [
{
id: 11,
name: '男',
key: 1,
pid: 1,
createTime: '2011-02-25 18:37:39',
remark: '男',
},
{
id: 12,
name: '女',
key: 0,
pid: 1,
createTime: '2011-02-25 18:37:39',
remark: '女',
},
],
},
{
id: 2,
keyCode: 'idType',
name: '证件类型',
createTime: '2011-02-25 18:37:39',
remark: '证件类型',
children: [
{
id: 21,
name: '身份证',
key: 1,
pid: 2,
createTime: '2011-02-25 18:37:39',
remark: '身份证',
},
{
id: 22,
name: '社保卡',
key: 2,
pid: 2,
createTime: '2011-02-25 18:37:39',
remark: '社保卡',
},
{
id: 23,
name: '驾驶证',
key: 3,
pid: 2,
createTime: '2011-02-25 18:37:39',
remark: '驾驶证',
},
{
id: 24,
name: '护照',
key: 4,
pid: 2,
createTime: '2011-02-25 18:37:39',
remark: '护照',
},
{
id: 25,
name: '工作证',
key: 5,
pid: 2,
createTime: '2011-02-25 18:37:39',
remark: '工作证',
},
],
},
]

260
src/mock/table.ts
View File

@ -1,132 +1,132 @@
export const tableList = [
{
date: '2016-05-02',
name: '王五',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 1,
age: 18,
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2018-06-11',
name: '梦琪',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 2,
age: 22,
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
},
{
date: '2022-05-23',
name: '忆柳',
price: 22,
province: '上海',
admin: 'admin',
sex: 0,
id: 3,
age: 23,
city: '普陀区',
address: '上海市普陀区金沙江路 1520 弄',
zip: 200333,
},
{
date: '2022-01-24',
name: '之桃',
price: 33,
province: '上海',
admin: 'admin',
sex: 1,
id: 4,
age: 24,
city: '普陀区',
address: '上海市普陀区金沙江路 2222 弄',
zip: 200333,
},
{
date: '2022-07-22',
name: '慕青',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 5,
age: 25,
city: '普陀区',
address: '上海市普陀区金沙江路 2223 弄',
zip: 200333,
},
{
date: '2016-05-02',
name: '问兰',
price: 47,
province: '上海',
admin: 'admin',
sex: 1,
id: 6,
age: 26,
city: '普陀区',
address: '上海市普陀区金沙江路 2224 弄',
zip: 200333,
},
{
date: '2016-08-02',
name: '元香',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 7,
age: 27,
city: '普陀区',
address: '上海市普陀区金沙江路 2225 弄',
zip: 200333,
},
{
date: '2019-11-11',
name: '初夏',
price: 23,
province: '上海',
admin: 'admin',
sex: 1,
id: 8,
age: 28,
city: '普陀区',
address: '上海市普陀区金沙江路 2226 弄',
zip: 200333,
},
{
date: '2018-08-02',
name: '沛菡',
price: 33,
province: '上海',
admin: 'other',
sex: 0,
id: 9,
age: 29,
city: '普陀区',
address: '上海市普陀区金沙江路 2227 弄',
zip: 200339,
},
{
date: '2022-11-03',
name: '傲珊',
price: 222,
province: '浙江',
admin: 'admin',
sex: 1,
id: 10,
age: 30,
city: '杭州',
address: '杭州市滨江区建业路228号',
zip: 200433,
}
{
date: '2016-05-02',
name: '王五',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 1,
age: 18,
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
},
{
date: '2018-06-11',
name: '梦琪',
price: 20,
province: '上海',
admin: 'admin',
sex: 1,
id: 2,
age: 22,
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
},
{
date: '2022-05-23',
name: '忆柳',
price: 22,
province: '上海',
admin: 'admin',
sex: 0,
id: 3,
age: 23,
city: '普陀区',
address: '上海市普陀区金沙江路 1520 弄',
zip: 200333,
},
{
date: '2022-01-24',
name: '之桃',
price: 33,
province: '上海',
admin: 'admin',
sex: 1,
id: 4,
age: 24,
city: '普陀区',
address: '上海市普陀区金沙江路 2222 弄',
zip: 200333,
},
{
date: '2022-07-22',
name: '慕青',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 5,
age: 25,
city: '普陀区',
address: '上海市普陀区金沙江路 2223 弄',
zip: 200333,
},
{
date: '2016-05-02',
name: '问兰',
price: 47,
province: '上海',
admin: 'admin',
sex: 1,
id: 6,
age: 26,
city: '普陀区',
address: '上海市普陀区金沙江路 2224 弄',
zip: 200333,
},
{
date: '2016-08-02',
name: '元香',
price: 45,
province: '上海',
admin: 'admin',
sex: 0,
id: 7,
age: 27,
city: '普陀区',
address: '上海市普陀区金沙江路 2225 弄',
zip: 200333,
},
{
date: '2019-11-11',
name: '初夏',
price: 23,
province: '上海',
admin: 'admin',
sex: 1,
id: 8,
age: 28,
city: '普陀区',
address: '上海市普陀区金沙江路 2226 弄',
zip: 200333,
},
{
date: '2018-08-02',
name: '沛菡',
price: 33,
province: '上海',
admin: 'other',
sex: 0,
id: 9,
age: 29,
city: '普陀区',
address: '上海市普陀区金沙江路 2227 弄',
zip: 200339,
},
{
date: '2022-11-03',
name: '傲珊',
price: 222,
province: '浙江',
admin: 'admin',
sex: 1,
id: 10,
age: 30,
city: '杭州',
address: '杭州市滨江区建业路228号',
zip: 200433,
},
]

59
src/permission.ts
View File

@ -1,8 +1,8 @@
import router from '@/routers/index'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {useUserStore} from "@/store/modules/user"
import {usePermissionStore} from "@/store/modules/permission"
import { useUserStore } from '@/store/modules/user'
import { usePermissionStore } from '@/store/modules/permission'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
@ -10,51 +10,48 @@ const whiteList = ['/login', '/auth-redirect'] // 设置白名单
// 记录路由
let hasRoles = true
router.beforeEach(async(to, from, next) => {
router.beforeEach(async (to, from, next) => {
// 开启进度条
NProgress.start()
// 设置标题
if(typeof(to.meta.title) === 'string'){
document.title = to.meta.title ||'vue-admin-perfect'
if (typeof to.meta.title === 'string') {
document.title = to.meta.title || 'vue-admin-perfect'
}
const UserStore = useUserStore();
const UserStore = useUserStore()
// 确定用户是否已登录过，存在Token
const hasToken = UserStore.token
if (hasToken) {
if (to.path === '/login') {
// 如果已登录，请重定向到主页
next({ path: '/' })
} else {
try {
const PermissionStore = usePermissionStore()
// 路由添加进去了没有及时更新 需要重新进去一次拦截
if(!PermissionStore.routes.length){
// 获取权限列表进行接口访问 因为这里页面要切换权限
const accessRoutes = await PermissionStore.generateRoutes(UserStore.roles)
hasRoles = false
accessRoutes.forEach(item => router.addRoute(item)) // 动态添加访问路由表
next({ ...to, replace: true }) // // 这里相当于push到一个页面 不在进入路由拦截
}else {
next() // // 如果不传参数就会重新执行路由拦截，重新进到这里
}
} catch (error) {
next(`/login?redirect=${to.path}`)
try {
const PermissionStore = usePermissionStore()
// 路由添加进去了没有及时更新 需要重新进去一次拦截
if (!PermissionStore.routes.length) {
// 获取权限列表进行接口访问 因为这里页面要切换权限
const accessRoutes = await PermissionStore.generateRoutes(UserStore.roles)
hasRoles = false
accessRoutes.forEach((item) => router.addRoute(item)) // 动态添加访问路由表
next({ ...to, replace: true }) // // 这里相当于push到一个页面 不在进入路由拦截
} else {
next() // // 如果不传参数就会重新执行路由拦截，重新进到这里
}
}
}else{
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
} catch (error) {
next(`/login?redirect=${to.path}`)
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
router.afterEach(() => {
NProgress.done();
});
NProgress.done()
})

23
src/plugins/ElIcons.ts
View File

@ -1,16 +1,15 @@
// 注册icon组件
import * as ElIconsModules from '@element-plus/icons-vue'
export const registerElIcons = (app)=>{
// 全局注册element-plus icon图标组件
Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
app.component(key, ElIconsModules[key]);
} else {
app.component(key + "Icon", ElIconsModules[key]);
}
});
export const registerElIcons = (app) => {
// 全局注册element-plus icon图标组件
Object.keys(ElIconsModules).forEach((key) => {
//循环遍历组件名称
if ('Menu' !== key) {
//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
app.component(key, ElIconsModules[key])
} else {
app.component(key + 'Icon', ElIconsModules[key])
}
})
}

8
src/routers/index.ts
View File

@ -1,10 +1,4 @@
import {
createRouter,
createWebHistory,
RouteRecordRaw,
createWebHashHistory,
Router,
} from 'vue-router'
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory, Router } from 'vue-router'
import Layout from '@/layout/index.vue'
// 扩展继承属性
interface extendRoute {

26
src/routers/modules/chat.ts
View File

@ -1,24 +1,26 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const chartsRouter = [{
const chartsRouter = [
{
path: '/chat',
component: Layout,
redirect: '/chat/index',
name: 'chat',
meta: {
title: '聊天框',
icon: 'chat-square'
title: '聊天框',
icon: 'chat-square',
},
children: [
{
path: '/chat/index',
component: () => import('@/views/chat/index.vue'),
name: 'chatBox',
meta: { title: '聊天框', icon: 'chat-square' }
}
]
}]
{
path: '/chat/index',
component: () => import('@/views/chat/index.vue'),
name: 'chatBox',
meta: { title: '聊天框', icon: 'chat-square' },
},
],
},
]
export default chartsRouter

24
src/routers/modules/dataScreen.ts
View File

@ -1,12 +1,12 @@
const dataScreenRouter= [{
path: "/dataScreen",
name: "dataScreen",
meta: {
title: "可视化大屏",
icon:'Histogram'
},
component: () => import("@/views/dataScreen/index.vue")
}]
;
export default dataScreenRouter;
const dataScreenRouter = [
{
path: '/dataScreen',
name: 'dataScreen',
meta: {
title: '可视化大屏',
icon: 'Histogram',
},
component: () => import('@/views/dataScreen/index.vue'),
},
]
export default dataScreenRouter

77
src/routers/modules/echarts.ts
View File

@ -1,52 +1,53 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const echartsRouter = [{
const echartsRouter = [
{
path: '/echarts',
component: Layout,
redirect: '/echarts/migration',
name: 'echarts',
meta: {
title: 'Echarts',
icon: 'trend-charts',
roles:['other']
title: 'Echarts',
icon: 'trend-charts',
roles: ['other'],
},
children: [
{
path: '/echarts/migration',
component: () => import('@/views/echarts/migrationMap/index.vue'),
name: 'migration',
meta: { title: '迁徙图', roles:['other'] , icon: 'MenuIcon' }
},
{
path: '/echarts/migration',
component: () => import('@/views/echarts/migrationMap/index.vue'),
name: 'migration',
meta: { title: '迁徙图', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/echarts/bar',
component: () => import('@/views/echarts/barEcharts/index.vue'),
name: 'bar',
meta: { title: '柱状图', roles:['other'] , icon: 'MenuIcon'}
},
{
path: '/echarts/graph',
component: () => import('@/views/echarts/graphEcharts/index.vue'),
name: 'graph',
meta: { title: '雷达图', roles:['other'] , icon: 'MenuIcon'}
},
{
path: '/echarts/bar',
component: () => import('@/views/echarts/barEcharts/index.vue'),
name: 'bar',
meta: { title: '柱状图', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/echarts/graph',
component: () => import('@/views/echarts/graphEcharts/index.vue'),
name: 'graph',
meta: { title: '雷达图', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/echarts/pie',
component: () => import('@/views/echarts/pieEcharts/index.vue'),
name: 'pie',
meta: { title: '饼图', roles:['other'] , icon: 'MenuIcon'}
},
{
path: '/echarts/simple',
component: () => import('@/views/echarts/simple/index.vue'),
name: 'echarts-simple',
meta: { title: '简单图表', roles:['other'] , icon: 'MenuIcon'}
},
]
}]
{
path: '/echarts/pie',
component: () => import('@/views/echarts/pieEcharts/index.vue'),
name: 'pie',
meta: { title: '饼图', roles: ['other'], icon: 'MenuIcon' },
},
{
path: '/echarts/simple',
component: () => import('@/views/echarts/simple/index.vue'),
name: 'echarts-simple',
meta: { title: '简单图表', roles: ['other'], icon: 'MenuIcon' },
},
],
},
]
export default echartsRouter

76
src/routers/modules/excel.ts
View File

@ -1,48 +1,48 @@
import Layout from '@/layout/index.vue'
import Layout from "@/layout/index.vue";
const excelRouter = [{
const excelRouter = [
{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
meta: {
title: 'Excel&Zip',
icon: 'School'
title: 'Excel&Zip',
icon: 'School',
},
children: [
{
path: '/excel/export-excel',
component: () => import('@/views/excel/exportExcel/index.vue'),
name: 'export-excel',
meta: { title: '导出 Excel', icon: 'MenuIcon'}
},
{
path: '/excel/export-merge-header',
component: () => import('@/views/excel/exportMergeHeader/index.vue'),
name: 'export-merge-header',
meta: { title: '导出 多级表头', icon: 'MenuIcon' }
},
{
path: '/excel/upload-style-excel',
component: () => import('@/views/excel/exportStyleExcel/index.vue'),
name: 'upload-style-excel',
meta: { title: '自定义样式导出 Excel', icon: 'MenuIcon' }
},
{
path: '/excel/upload-excel',
component: () => import('@/views/excel/uploadExcel/index.vue'),
name: 'upload-excel',
meta: { title: '上传 Excel', icon: 'MenuIcon' }
},
{
path: '/excel/zip',
component: () => import('@/views/excel/zip/index.vue'),
name: 'Zip',
meta: { title: '导出 Zip', roles:['other'] ,icon: 'MenuIcon',}
},
]
}]
{
path: '/excel/export-excel',
component: () => import('@/views/excel/exportExcel/index.vue'),
name: 'export-excel',
meta: { title: '导出 Excel', icon: 'MenuIcon' },
},
{
path: '/excel/export-merge-header',
component: () => import('@/views/excel/exportMergeHeader/index.vue'),
name: 'export-merge-header',
meta: { title: '导出 多级表头', icon: 'MenuIcon' },
},
{
path: '/excel/upload-style-excel',
component: () => import('@/views/excel/exportStyleExcel/index.vue'),
name: 'upload-style-excel',
meta: { title: '自定义样式导出 Excel', icon: 'MenuIcon' },
},
{
path: '/excel/upload-excel',
component: () => import('@/views/excel/uploadExcel/index.vue'),
name: 'upload-excel',
meta: { title: '上传 Excel', icon: 'MenuIcon' },
},
{
path: '/excel/zip',
component: () => import('@/views/excel/zip/index.vue'),
name: 'Zip',
meta: { title: '导出 Zip', roles: ['other'], icon: 'MenuIcon' },
},
],
},
]
export default excelRouter

72
src/routers/modules/externalLink.ts
View File

@ -1,46 +1,46 @@
import Layout from '@/layout/index.vue'
import Layout from "@/layout/index.vue";
const externalLink = [{
const externalLink = [
{
path: '/external-link',
component: Layout,
redirect: '/external-link/wechat',
name: 'external-link',
meta: {
title: '外部链接',
icon: 'link'
title: '外部链接',
icon: 'link',
},
children: [
// {
// path: '/external-link/wechat',
// name: 'wechat',
// component: () => import('@/views/externalLinks/wechat/index.vue'),
// meta: { title: '加微信群', icon: 'MenuIcon' }
// },
{
path: 'https://github.com/zouzhibin/vue-admin-perfect',
name: 'github',
meta: { title: 'Github 地址', icon: 'MenuIcon' }
},
{
path: 'https://gitee.com/yuanzbz/vue-admin-perfect?_from=gitee_search',
name: 'github',
meta: { title: 'Gitee 地址', icon: 'MenuIcon' }
},
{
path: 'https://yuanzbz.gitee.io/vue-admin-simple',
name: 'simple',
meta: { title: '简易版本', icon: 'MenuIcon' },
component: () => import('@/views/externalLinks/simple/index.vue'),
},
{
path: '/external-link/iframe',
component: () => import('@/views/externalLinks/iframe/index.vue'),
name: 'iframe',
meta: { title: '内嵌 iframe', icon: 'MenuIcon' }
},
]
}]
// {
// path: '/external-link/wechat',
// name: 'wechat',
// component: () => import('@/views/externalLinks/wechat/index.vue'),
// meta: { title: '加微信群', icon: 'MenuIcon' }
// },
{
path: 'https://github.com/zouzhibin/vue-admin-perfect',
name: 'github',
meta: { title: 'Github 地址', icon: 'MenuIcon' },
},
{
path: 'https://gitee.com/yuanzbz/vue-admin-perfect?_from=gitee_search',
name: 'github',
meta: { title: 'Gitee 地址', icon: 'MenuIcon' },
},
{
path: 'https://yuanzbz.gitee.io/vue-admin-simple',
name: 'simple',
meta: { title: '简易版本', icon: 'MenuIcon' },
component: () => import('@/views/externalLinks/simple/index.vue'),
},
{
path: '/external-link/iframe',
component: () => import('@/views/externalLinks/iframe/index.vue'),
name: 'iframe',
meta: { title: '内嵌 iframe', icon: 'MenuIcon' },
},
],
},
]
export default externalLink

75
src/routers/modules/functionPage.ts
View File

@ -1,49 +1,50 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const functionPageRouter = [{
const functionPageRouter = [
{
path: '/function-page',
component: Layout,
redirect: '/function-page/404',
name: 'function-page',
meta: {
title: '功能页面',
icon: 'ElementPlus'
title: '功能页面',
icon: 'ElementPlus',
},
children: [
{
path: '/function-page/tools',
component: () => import('@/views/functionPage/tools/index.vue'),
name: 'tools',
meta: { title: '工具链集合', keepAlive: true , icon: 'MenuIcon'}
},
{
path: '/function-page/404',
component: () => import('@/views/errorPages/404.vue'),
name: 'function-404',
meta: { title: '404 页面', keepAlive: true , icon: 'MenuIcon'}
},
{
path: '/function-page/403',
component: () => import('@/views/errorPages/403.vue'),
name: 'function-403',
meta: { title: '403 页面', keepAlive: true , icon: 'MenuIcon'}
},
{
path: '/function-page/fullscreen',
component: () => import('@/views/functionPage/fullscreen/index.vue'),
name: 'fullscreen',
meta: { title: '元素 全屏', keepAlive: true , icon: 'MenuIcon'}
},
{
path: '/function-page/information-list',
component: () => import('@/views/functionPage/informationList/index.vue'),
name: 'informationList',
meta: { title: '信息列表', keepAlive: true , icon: 'MenuIcon'}
},
]
}]
{
path: '/function-page/tools',
component: () => import('@/views/functionPage/tools/index.vue'),
name: 'tools',
meta: { title: '工具链集合', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/function-page/404',
component: () => import('@/views/errorPages/404.vue'),
name: 'function-404',
meta: { title: '404 页面', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/function-page/403',
component: () => import('@/views/errorPages/403.vue'),
name: 'function-403',
meta: { title: '403 页面', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/function-page/fullscreen',
component: () => import('@/views/functionPage/fullscreen/index.vue'),
name: 'fullscreen',
meta: { title: '元素 全屏', keepAlive: true, icon: 'MenuIcon' },
},
{
path: '/function-page/information-list',
component: () => import('@/views/functionPage/informationList/index.vue'),
name: 'informationList',
meta: { title: '信息列表', keepAlive: true, icon: 'MenuIcon' },
},
],
},
]
export default functionPageRouter

49
src/routers/modules/nested.ts
View File

@ -1,17 +1,16 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
import Layout from '@/layout/index.vue'
const nestedRouter = [{
const nestedRouter = [
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
name: 'nested',
meta: {
title: '路由嵌套',
icon: 'HelpFilled'
title: '路由嵌套',
icon: 'HelpFilled',
},
children: [
{
@ -19,52 +18,52 @@ const nestedRouter = [{
component: () => import('@/views/nested/menu1/index.vue'),
name: 'menu1',
meta: { title: '菜单1', icon: 'MenuIcon' },
alwaysShow:true,
alwaysShow: true,
redirect: '/nested/menu1/menu1-1',
children: [
{
path: '/nested/menu1/menu1-1',
component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
name: 'menu1-1',
meta: { title: '菜单 1-1' , icon: 'MenuIcon'}
meta: { title: '菜单 1-1', icon: 'MenuIcon' },
},
{
path: '/nested/menu1/menu1-2',
component: () => import('@/views/nested/menu1/menu1-2/index.vue'),
name: 'menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: '菜单 1-2' , icon: 'MenuIcon'},
meta: { title: '菜单 1-2', icon: 'MenuIcon' },
children: [
{
path: '/nested/menu1/menu1-2/menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
name: 'menu1-2-1',
meta: { title: '菜单 1-2-1' , icon: 'MenuIcon'}
meta: { title: '菜单 1-2-1', icon: 'MenuIcon' },
},
{
path: '/nested/menu1/menu1-2/menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
name: 'menu1-2-2',
meta: { title: '菜单 1-2-2' , icon: 'MenuIcon'}
}
]
meta: { title: '菜单 1-2-2', icon: 'MenuIcon' },
},
],
},
{
path: '/nested/menu1/menu1-3',
component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
name: 'menu1-3',
meta: { title: '菜单 1-3' , icon: 'MenuIcon'}
}
]
meta: { title: '菜单 1-3', icon: 'MenuIcon' },
},
],
},
{
path: '/nested/menu2',
component: () => import('@/views/nested/menu2/index.vue'),
name: 'nested-menu2',
meta: { title: '菜单2', icon: 'MenuIcon'}
},
]
}]
{
path: '/nested/menu2',
component: () => import('@/views/nested/menu2/index.vue'),
name: 'nested-menu2',
meta: { title: '菜单2', icon: 'MenuIcon' },
},
],
},
]
export default nestedRouter

72
src/routers/modules/system.ts
View File

@ -2,47 +2,49 @@
import Layout from '@/layout/index.vue'
const systemRouter = [{
const systemRouter = [
{
path: '/system',
component: Layout,
redirect: '/system/user',
name: 'system',
meta: {
title: '系统管理',
icon: 'Setting',
title: '系统管理',
icon: 'Setting',
},
children: [
{
path: '/system/user',
component: () => import('@/views/system/user/index.vue'),
name: 'user',
meta: { title: '用户管理' , icon: 'MenuIcon'}
},
{
path: '/system/dept',
component: () => import('@/views/system/dept/index.vue'),
name: 'dept',
meta: { title: '部门管理' , icon: 'MenuIcon'}
},
{
path: '/system/role',
component: () => import('@/views/system/role/index.vue'),
name: 'role',
meta: { title: '角色管理', icon: 'MenuIcon' }
},
{
path: '/system/menu',
component: () => import('@/views/system/menu/index.vue'),
name: 'menu',
meta: { title: '菜单管理', icon: 'MenuIcon'}
},
{
path: '/system/dictionary',
component: () => import('@/views/system/dictionary/index.vue'),
name: 'dictionary',
meta: { title: '字典管理', icon: 'MenuIcon'}
},
]
}]
{
path: '/system/user',
component: () => import('@/views/system/user/index.vue'),
name: 'user',
meta: { title: '用户管理', icon: 'MenuIcon' },
},
{
path: '/system/dept',
component: () => import('@/views/system/dept/index.vue'),
name: 'dept',
meta: { title: '部门管理', icon: 'MenuIcon' },
},
{
path: '/system/role',
component: () => import('@/views/system/role/index.vue'),
name: 'role',
meta: { title: '角色管理', icon: 'MenuIcon' },
},
{
path: '/system/menu',
component: () => import('@/views/system/menu/index.vue'),
name: 'menu',
meta: { title: '菜单管理', icon: 'MenuIcon' },
},
{
path: '/system/dictionary',
component: () => import('@/views/system/dictionary/index.vue'),
name: 'dictionary',
meta: { title: '字典管理', icon: 'MenuIcon' },
},
],
},
]
export default systemRouter

35
src/store/index.ts
View File

@ -1,26 +1,23 @@
import {defineStore,createPinia} from 'pinia'
import { defineStore, createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export const Store = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'globalState',
// state: 返回对象的函数
state: ()=>({
}),
getters: {},
actions:{},
persist: {
// 本地存储的名称
key: "globalState",
//保存的位置
storage: window.sessionStorage,//localstorage
},
// id: 必须的，在所有 Store 中唯一
id: 'globalState',
// state: 返回对象的函数
state: () => ({}),
getters: {},
actions: {},
persist: {
// 本地存储的名称
key: 'globalState',
//保存的位置
storage: window.sessionStorage, //localstorage
},
})
const pinia = createPinia();
const pinia = createPinia()
//pinia使用
pinia.use(piniaPluginPersistedstate);
pinia.use(piniaPluginPersistedstate)
export default pinia

104
src/store/modules/permission.ts
View File

@ -1,58 +1,54 @@
import {defineStore} from 'pinia'
import { asyncRoutes, constantRoutes,routerArray,notFoundRouter } from '@/routers/index'
import {hasPermission,filterAsyncRoutes} from "@/utils/routers"
import {filterKeepAlive,filterRoutes} from "@/utils/routers";
import { defineStore } from 'pinia'
import { asyncRoutes, constantRoutes, routerArray, notFoundRouter } from '@/routers/index'
import { hasPermission, filterAsyncRoutes } from '@/utils/routers'
import { filterKeepAlive, filterRoutes } from '@/utils/routers'
export const usePermissionStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'permissionState',
// state: 返回对象的函数
state: ()=>({
// 路由
routes:[],
// 动态路由
addRoutes:[],
// 缓存路由
cacheRoutes:{},
}),
getters: {
permission_routes:state=> {
return state.routes
},
keepAliveRoutes: state=>{
return filterKeepAlive(asyncRoutes)
}
// id: 必须的，在所有 Store 中唯一
id: 'permissionState',
// state: 返回对象的函数
state: () => ({
// 路由
routes: [],
// 动态路由
addRoutes: [],
// 缓存路由
cacheRoutes: {},
}),
getters: {
permission_routes: (state) => {
return state.routes
},
// 可以同步 也可以异步
actions:{
// 生成路由
generateRoutes(roles){
return new Promise(resolve => {
// 在这判断是否有权限，哪些角色拥有哪些权限
let accessedRoutes
if (roles&&roles.length&&!roles.includes('admin')) {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
} else {
accessedRoutes = asyncRoutes || []
}
accessedRoutes = accessedRoutes.concat(notFoundRouter)
this.routes = constantRoutes.concat(accessedRoutes)
this.addRoutes = accessedRoutes
resolve(accessedRoutes)
})
},
// 清楚路由
clearRoutes(){
this.routes = []
this.addRoutes = []
this.cacheRoutes = []
},
getCacheRoutes(){
this.cacheRoutes = filterKeepAlive(asyncRoutes)
return this.cacheRoutes
}
keepAliveRoutes: (state) => {
return filterKeepAlive(asyncRoutes)
},
},
// 可以同步 也可以异步
actions: {
// 生成路由
generateRoutes(roles) {
return new Promise((resolve) => {
// 在这判断是否有权限，哪些角色拥有哪些权限
let accessedRoutes
if (roles && roles.length && !roles.includes('admin')) {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
} else {
accessedRoutes = asyncRoutes || []
}
accessedRoutes = accessedRoutes.concat(notFoundRouter)
this.routes = constantRoutes.concat(accessedRoutes)
this.addRoutes = accessedRoutes
resolve(accessedRoutes)
})
},
// 清楚路由
clearRoutes() {
this.routes = []
this.addRoutes = []
this.cacheRoutes = []
},
getCacheRoutes() {
this.cacheRoutes = filterKeepAlive(asyncRoutes)
return this.cacheRoutes
},
},
})

152
src/store/modules/setting.ts
View File

@ -1,81 +1,79 @@
import {defineStore} from 'pinia'
import {PRIMARY_COLOR} from "../../config";
import { defineStore } from 'pinia'
import { PRIMARY_COLOR } from '../../config'
export const useSettingStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'settingState',
// state: 返回对象的函数
state: ()=>({
// menu 是否收缩
isCollapse:true,
//
withoutAnimation:false,
device: 'desktop',
// 刷新当前页
isReload:true,
// 主题设置
themeConfig:{
// 显示设置
showSetting:false,
// 菜单展示模式 默认 vertical horizontal / vertical /columns
mode: 'vertical',
// tagsView 是否展示 默认展示
showTag:true,
// 页脚
footer: true,
// 深色模式 切换暗黑模式
isDark: false,
// 显示侧边栏Logo
showLogo:true,
// 主题颜色
primary:PRIMARY_COLOR,
// element组件大小
globalComSize:'default',
// 是否只保持一个子菜单的展开
uniqueOpened:true,
// 固定header
fixedHeader:true,
// 灰色模式
gray:false,
// 色弱模式
weak:false
},
}),
getters: {},
// 可以同步 也可以异步
actions:{
// 设置主题
setThemeConfig({key, val}){
this.themeConfig[key] = val
},
// 切换 Collapse
setCollapse(value){
this.isCollapse = value
this.withoutAnimation = false
},
// 关闭侧边栏
closeSideBar({withoutAnimation}){
this.isCollapse = false
this.withoutAnimation = withoutAnimation
},
toggleDevice(device){
this.device = device
},
// 刷新
setReload(){
this.isReload = false
setTimeout(()=>{
this.isReload = true
},50)
}
// id: 必须的，在所有 Store 中唯一
id: 'settingState',
// state: 返回对象的函数
state: () => ({
// menu 是否收缩
isCollapse: true,
//
withoutAnimation: false,
device: 'desktop',
// 刷新当前页
isReload: true,
// 主题设置
themeConfig: {
// 显示设置
showSetting: false,
// 菜单展示模式 默认 vertical horizontal / vertical /columns
mode: 'vertical',
// tagsView 是否展示 默认展示
showTag: true,
// 页脚
footer: true,
// 深色模式 切换暗黑模式
isDark: false,
// 显示侧边栏Logo
showLogo: true,
// 主题颜色
primary: PRIMARY_COLOR,
// element组件大小
globalComSize: 'default',
// 是否只保持一个子菜单的展开
uniqueOpened: true,
// 固定header
fixedHeader: true,
// 灰色模式
gray: false,
// 色弱模式
weak: false,
},
// 这部分数据不需要存储
// persist: {
// // 本地存储的名称
// key: "settingState",
// //保存的位置
// storage: window.localStorage,//localstorage
// },
}),
getters: {},
// 可以同步 也可以异步
actions: {
// 设置主题
setThemeConfig({ key, val }) {
this.themeConfig[key] = val
},
// 切换 Collapse
setCollapse(value) {
this.isCollapse = value
this.withoutAnimation = false
},
// 关闭侧边栏
closeSideBar({ withoutAnimation }) {
this.isCollapse = false
this.withoutAnimation = withoutAnimation
},
toggleDevice(device) {
this.device = device
},
// 刷新
setReload() {
this.isReload = false
setTimeout(() => {
this.isReload = true
}, 50)
},
},
// 这部分数据不需要存储
// persist: {
// // 本地存储的名称
// key: "settingState",
// //保存的位置
// storage: window.localStorage,//localstorage
// },
})

210
src/store/modules/tagsView.ts
View File

@ -1,113 +1,107 @@
import {defineStore} from 'pinia'
import router from "@/routers/index";
import { defineStore } from 'pinia'
import router from '@/routers/index'
export const useTagsViewStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'tagsViewState',
// state: 返回对象的函数
state: ()=>({
activeTabsValue:'/home',
visitedViews:[],
cachedViews:[],
}),
getters: {},
// 可以同步 也可以异步
actions:{
setTabsMenuValue(val){
this.activeTabsValue = val
},
addView(view){
this.addVisitedView(view)
},
removeView(routes){
return new Promise((resolve, reject) => {
this.visitedViews = this.visitedViews.filter(item=>!routes.includes(item.path))
resolve(null)
})
},
addVisitedView(view){
this.setTabsMenuValue(view.path);
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
})
)
if (view.meta.keepAlive) {
this.cachedViews.push(view.name)
}
},
delView(activeTabPath){
return new Promise(resolve => {
this.delVisitedView(activeTabPath)
this.delCachedView(activeTabPath)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
toLastView(activeTabPath){
let index = this.visitedViews.findIndex(item=>item.path===activeTabPath)
const nextTab = this.visitedViews[index + 1] || this.visitedViews[index - 1];
if (!nextTab) return;
router.push(nextTab.path);
this.addVisitedView(nextTab)
},
delVisitedView(path){
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v=>{
return (v.path !== path||v.meta.affix)
})
this.cachedViews = this.cachedViews.filter(v=>{
return (v.path !== path||v.meta.affix)
})
resolve([...this.visitedViews])
})
},
delCachedView(view){
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
clearVisitedView(){
this.delAllViews()
},
delAllViews(){
return new Promise((resolve) => {
this.visitedViews = this.visitedViews.filter(v=>v.meta.affix)
this.cachedViews = this.visitedViews.filter(v=>v.meta.affix)
resolve([...this.visitedViews])
})
},
delOtherViews(path){
this.visitedViews = this.visitedViews.filter(item => {
return item.path === path || item.meta.affix;
});
this.cachedViews = this.visitedViews.filter(item => {
return item.path === path || item.meta.affix;
});
},
goHome() {
this.activeTabsValue = '/home';
router.push({path: '/home'});
},
updateVisitedView(view){
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
}
// id: 必须的，在所有 Store 中唯一
id: 'tagsViewState',
// state: 返回对象的函数
state: () => ({
activeTabsValue: '/home',
visitedViews: [],
cachedViews: [],
}),
getters: {},
// 可以同步 也可以异步
actions: {
setTabsMenuValue(val) {
this.activeTabsValue = val
},
addView(view) {
this.addVisitedView(view)
},
removeView(routes) {
return new Promise((resolve, reject) => {
this.visitedViews = this.visitedViews.filter((item) => !routes.includes(item.path))
resolve(null)
})
},
addVisitedView(view) {
this.setTabsMenuValue(view.path)
if (this.visitedViews.some((v) => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name',
}),
)
if (view.meta.keepAlive) {
this.cachedViews.push(view.name)
}
},
delView(activeTabPath) {
return new Promise((resolve) => {
this.delVisitedView(activeTabPath)
this.delCachedView(activeTabPath)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews],
})
})
},
toLastView(activeTabPath) {
const index = this.visitedViews.findIndex((item) => item.path === activeTabPath)
const nextTab = this.visitedViews[index + 1] || this.visitedViews[index - 1]
if (!nextTab) return
router.push(nextTab.path)
this.addVisitedView(nextTab)
},
delVisitedView(path) {
return new Promise((resolve) => {
this.visitedViews = this.visitedViews.filter((v) => {
return v.path !== path || v.meta.affix
})
this.cachedViews = this.cachedViews.filter((v) => {
return v.path !== path || v.meta.affix
})
resolve([...this.visitedViews])
})
},
delCachedView(view) {
return new Promise((resolve) => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
clearVisitedView() {
this.delAllViews()
},
delAllViews() {
return new Promise((resolve) => {
this.visitedViews = this.visitedViews.filter((v) => v.meta.affix)
this.cachedViews = this.visitedViews.filter((v) => v.meta.affix)
resolve([...this.visitedViews])
})
},
delOtherViews(path) {
this.visitedViews = this.visitedViews.filter((item) => {
return item.path === path || item.meta.affix
})
this.cachedViews = this.visitedViews.filter((item) => {
return item.path === path || item.meta.affix
})
},
goHome() {
this.activeTabsValue = '/home'
router.push({ path: '/home' })
},
updateVisitedView(view) {
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
},
},
})

116
src/store/modules/user.ts
View File

@ -1,65 +1,61 @@
import {defineStore} from 'pinia'
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'userState',
// state: 返回对象的函数
state: ()=>({
// 登录token
token:null,
// 登录用户信息
userInfo:{},
// 角色
roles:localStorage.roles?JSON.parse(localStorage.roles):[]
}),
getters: {},
// 可以同步 也可以异步
actions:{
// 登录
login(userInfo){
const { username, password } = userInfo
return new Promise(async (resolve, reject) => {
this.token = username
this.userInfo = userInfo
await this.getRoles()
resolve(username)
})
},
// 获取用户授权角色信息，实际应用中 可以通过token通过请求接口在这里获取用户信息
getRoles(){
return new Promise((resolve, reject) =>{
// 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
this.roles = ['admin']
localStorage.roles = JSON.stringify(this.roles)
resolve(this.roles)
} )
},
// 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
getInfo(roles) {
return new Promise((resolve, reject) =>{
this.roles = roles
resolve(roles)
} )
},
// 退出
logout() {
return new Promise((resolve, reject) => {
this.token = null
this.userInfo = {}
this.roles = []
resolve(null)
})
},
// id: 必须的，在所有 Store 中唯一
id: 'userState',
// state: 返回对象的函数
state: () => ({
// 登录token
token: null,
// 登录用户信息
userInfo: {},
// 角色
roles: localStorage.roles ? JSON.parse(localStorage.roles) : [],
}),
getters: {},
// 可以同步 也可以异步
actions: {
// 登录
login(userInfo) {
const { username, password } = userInfo
return new Promise(async (resolve, reject) => {
this.token = username
this.userInfo = userInfo
await this.getRoles()
resolve(username)
})
},
// 进行持久化存储
persist: {
// 本地存储的名称
key: "userState",
//保存的位置
storage: window.localStorage,//localstorage
// 获取用户授权角色信息，实际应用中 可以通过token通过请求接口在这里获取用户信息
getRoles() {
return new Promise((resolve, reject) => {
// 获取权限列表 默认就是超级管理员，因为没有进行接口请求 写死
this.roles = ['admin']
localStorage.roles = JSON.stringify(this.roles)
resolve(this.roles)
})
},
// 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
getInfo(roles) {
return new Promise((resolve, reject) => {
this.roles = roles
resolve(roles)
})
},
// 退出
logout() {
return new Promise((resolve, reject) => {
this.token = null
this.userInfo = {}
this.roles = []
resolve(null)
})
},
},
// 进行持久化存储
persist: {
// 本地存储的名称
key: 'userState',
//保存的位置
storage: window.localStorage, //localstorage
},
})

30
src/styles/common.scss
View File

@ -8,11 +8,10 @@ body {
padding: 0;
font-size: 14px;
}
body{
body {
background: #f0f2f5;
}
/* 常用 flex */
.flex-center {
display: flex;
@ -30,20 +29,18 @@ body{
}
/* 移动端的时候由于屏幕变小隐藏头部导航栏 */
@media screen and ( max-width: 540px ) {
.app-breadcrumb{
display: none!important;
@media screen and (max-width: 540px) {
.app-breadcrumb {
display: none !important;
}
}
/** 设置滚动条 **/
::-webkit-scrollbar {
width: 7px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: rgb(0 0 0 / 5%);
}
@ -56,7 +53,6 @@ body{
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
}
/* nprogress样式 */
#nprogress .bar {
background: $primaryColor !important;
@ -77,7 +73,7 @@ body{
display: flex;
flex-direction: column;
}
.app-container-inner{
.app-container-inner {
height: 100%;
width: 100%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
@ -86,12 +82,12 @@ body{
box-sizing: border-box;
}
.layout-horizontal{
.header-icon{
color:#bfcbd9!important;
.layout-horizontal {
.header-icon {
color: #bfcbd9 !important;
}
.el-dropdown-link{
color:#bfcbd9!important;
.el-dropdown-link {
color: #bfcbd9 !important;
}
}
@ -100,9 +96,9 @@ body{
}
.el-dropdown:focus {
border: none;
outline: none!important;
outline: none !important;
}
.svg-icon:focus {
border: none!important;
outline: none!important;
border: none !important;
outline: none !important;
}

112
src/styles/element-dark.scss
View File

@ -7,24 +7,24 @@ html.dark {
--zb-border-light: 1px solid #4c4d4f;
body{
body {
background: none;
}
// 编辑器
.w-e-toolbar, .w-e-text-container, .w-e-menu-panel{
background: none!important;
.w-e-toolbar,
.w-e-text-container,
.w-e-menu-panel {
background: none !important;
}
// 富文本
.md{
background: none!important;
.md {
background: none !important;
}
#app{
.sidebar-container{
background: var(--el-bg-color)!important;
#app {
.sidebar-container {
background: var(--el-bg-color) !important;
& .el-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
background-color: var(--el-bg-color) !important;
@ -32,8 +32,8 @@ html.dark {
&:hover {
background-color: var(--el-bg-color) !important;
}
&.is-active{
background-color: #060708!important;
&.is-active {
background-color: #060708 !important;
}
}
.el-sub-menu__title {
@ -44,114 +44,106 @@ html.dark {
}
}
.sidebar-logo-container{
.sidebar-logo-container {
background: none;
box-sizing: border-box;
border:var(--zb-border-light);
border: var(--zb-border-light);
}
.el-drawer__header {
span {
color: var(--el-text-color-primary) !important;
}
}
.theme-item{
.theme-item {
color: var(--el-text-color-primary) !important;
}
.el-table__header th {
font-weight: bold;
color: white;
}
.footer-layout{
.footer-layout {
background: none;
color: white;
}
.zb-pro-table{
.header{
background: none!important;
.zb-pro-table {
.header {
background: none !important;
border: var(--zb-border-light);
}
.footer{
background: none!important;
.footer {
background: none !important;
border: var(--zb-border-light);
}
.el-table__header th{
color: white!important;
.el-table__header th {
color: white !important;
}
}
// header
.m-layout-header{
.m-layout-header {
color: var(--el-text-color-primary) !important;
.header-inner{
background-color: var(--el-bg-color)!important;
border-bottom:var(--zb-border-light);
.header-icon{
color:#bfcbd9!important;
.header-inner {
background-color: var(--el-bg-color) !important;
border-bottom: var(--zb-border-light);
.header-icon {
color: #bfcbd9 !important;
}
}
// tagviews
.m-tags-view{
background: var(--el-bg-color)!important;
.m-tags-view {
background: var(--el-bg-color) !important;
border: var(--zb-border-light);
border-top:none ;
border-top: none;
border-left: none;
box-sizing: border-box;
.el-tabs--card>.el-tabs__header{
border-bottom: none!important;
.el-tabs--card > .el-tabs__header {
border-bottom: none !important;
}
}
}
// 内容区
.app-main{
.echarts-map{
background: var(--el-bg-color)!important;
.app-main {
.echarts-map {
background: var(--el-bg-color) !important;
}
.app-echarts{
.app-echarts {
background: none;
}
.app-container{
.header{
.app-container {
.header {
background: none;
}
.footer{
.footer {
background: none;
}
}
.m-container-layout{
.m-container-layout-inner{
.m-container-layout {
.m-container-layout-inner {
background: none;
color: var(--el-text-color-primary) !important;
}
}
.item-group-item{
background: none!important;
.item-group-item {
background: none !important;
border: var(--zb-border-light);
color: #cccccc;
}
.app-container-inner{
.app-container-inner {
background: none;
}
}
// 底部
.footer-layout{
border-top:var(--zb-border-light);
.footer-layout {
border-top: var(--zb-border-light);
}
// 登录
.login-container {
background-color: #191919 !important;
@ -164,13 +156,13 @@ html.dark {
}
}
}
.info-qrcode{
.info-qrcode {
background: white;
}
}
.el-scrollbar{
border:var(--zb-border-light);
border-top:none ;
.el-scrollbar {
border: var(--zb-border-light);
border-top: none;
}
}

2
src/styles/element.scss
View File

@ -5,5 +5,5 @@
}
.el-table .el-table__header th {
background: var(--el-fill-color-light)!important;
background: var(--el-fill-color-light) !important;
}

6
src/styles/index.scss
View File

@ -1,7 +1,5 @@
@import './variables.scss';
@import './sidebar.scss';
@import './transition.scss';
@import "./common.scss";
@import "./element.scss";
@import './common.scss';
@import './element.scss';

4
src/styles/sidebar.scss
View File

@ -1,4 +1,4 @@
.layout-vertical{
.layout-vertical {
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
@ -57,7 +57,6 @@
overflow: hidden;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
@ -225,4 +224,3 @@
}
}
}

4
src/styles/transition.scss
View File

@ -31,15 +31,13 @@
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter-from{
.sidebarLogoFade-enter-from {
opacity: 0;
}
.sidebarLogoFade-leave-to {
opacity: 0;
}
// 面包屑动画 方案1
.breadcrumb-enter-active {
transition: all 0.25s;

109
src/utils/Print.js
View File

@ -2,60 +2,63 @@
* DH (http://denghao.me)
* 2017-7-14
*/
(function (window, document) {
;(function (window, document) {
var Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
if (!(this instanceof Print)) return new Print(dom, options)
this.options = this.extend({
noPrint: '.no-print',
onStart: function () { },
onEnd: function () { }
}, options);
this.options = this.extend(
{
noPrint: '.no-print',
onStart: function () {},
onEnd: function () {},
},
options,
)
if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
if (typeof dom === 'string') {
this.dom = document.querySelector(dom)
} else {
this.dom = dom;
this.dom = dom
}
this.init();
};
this.init()
}
Print.prototype = {
init: function () {
var content = this.getStyle() + this.getHtml();
this.writeIframe(content);
var content = this.getStyle() + this.getHtml()
this.writeIframe(content)
},
extend: function (obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
obj[k] = obj2[k]
}
return obj;
return obj
},
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
var str = '',
styles = document.querySelectorAll('style,link')
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
str += styles[i].outerHTML
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
str += '<style>' + (this.options.noPrint ? this.options.noPrint : '.no-print') + '{display:none;}</style>'
return str;
return str
},
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
var inputs = document.querySelectorAll('input')
var textareas = document.querySelectorAll('textarea')
var selects = document.querySelectorAll('select')
for (var k in inputs) {
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
if (inputs[k].type == 'checkbox' || inputs[k].type == 'radio') {
if (inputs[k].checked == true) {
inputs[k].setAttribute('checked', "checked")
inputs[k].setAttribute('checked', 'checked')
} else {
inputs[k].removeAttribute('checked')
}
} else if (inputs[k].type == "text") {
} else if (inputs[k].type == 'text') {
inputs[k].setAttribute('value', inputs[k].value)
}
}
@ -68,11 +71,11 @@
for (var k3 in selects) {
if (selects[k3].type == 'select-one') {
var child = selects[k3].children;
var child = selects[k3].children
for (var i in child) {
if (child[i].tagName == 'OPTION') {
if (child[i].selected == true) {
child[i].setAttribute('selected', "selected")
child[i].setAttribute('selected', 'selected')
} else {
child[i].removeAttribute('selected')
}
@ -81,44 +84,46 @@
}
}
return this.dom.outerHTML;
return this.dom.outerHTML
},
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
iframe.id = "myIframe";
iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
var w,
doc,
iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe)
iframe.id = 'myIframe'
iframe.style = 'position:absolute;width:0;height:0;top:-10px;left:-10px;'
w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
w = f.contentWindow || f.contentDocument
doc = f.contentDocument || f.contentWindow.document
doc.open()
doc.write(content)
doc.close()
this.toPrint(w, function () {
document.body.removeChild(iframe)
});
})
},
toPrint: function (w, cb) {
var _this = this;
var _this = this
w.onload = function () {
try {
setTimeout(function () {
w.focus();
typeof _this.options.onStart === 'function' && _this.options.onStart();
w.focus()
typeof _this.options.onStart === 'function' && _this.options.onStart()
if (!w.document.execCommand('print', false, null)) {
w.print();
w.print()
}
typeof _this.options.onEnd === 'function' && _this.options.onEnd();
w.close();
typeof _this.options.onEnd === 'function' && _this.options.onEnd()
w.close()
cb && cb()
});
})
} catch (err) {
console.log('err', err);
console.log('err', err)
}
}
}
};
window.Print = Print;
}(window, document));
},
}
window.Print = Print
})(window, document)

45
src/utils/clipboard.ts
View File

@ -1,33 +1,32 @@
import Clipboard from 'clipboard'
import { ElMessage } from 'element-plus'
import { ElMessage } from 'element-plus'
function clipboardSuccess() {
ElMessage({
message: '复制成功',
type: 'success',
duration: 1500
})
ElMessage({
message: '复制成功',
type: 'success',
duration: 1500,
})
}
function clipboardError() {
ElMessage({
message: '复制失败',
type: 'error'
})
ElMessage({
message: '复制失败',
type: 'error',
})
}
export default function handleClipboard(text, event) {
const clipboard:any = new Clipboard(event.target, {
text: () => text
})
clipboard.on('success', () => {
clipboardSuccess()
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError()
clipboard.destroy()
})
clipboard.onClick(event)
const clipboard: any = new Clipboard(event.target, {
text: () => text,
})
clipboard.on('success', () => {
clipboardSuccess()
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError()
clipboard.destroy()
})
clipboard.onClick(event)
}

342
src/utils/downloadzip.ts
View File

@ -1,76 +1,73 @@
// @ts-ignore
import {saveAs} from 'file-saver';
import * as ExcelJs from 'exceljs';
import {Workbook, Worksheet, Row, Cell} from 'exceljs';
import { saveAs } from 'file-saver'
import * as ExcelJs from 'exceljs'
import { Workbook, Worksheet, Row, Cell } from 'exceljs'
import JsZip from 'jszip'
export interface IDownloadFiles2Zip {
// 压缩包的文件名
zipName: string;
files: IDownloadExcel[];
// 压缩包的文件名
zipName: string
files: IDownloadExcel[]
}
export interface IDownloadFiles2ZipWithFolder {
zipName: string;
folders: IFolder[];
zipName: string
folders: IFolder[]
}
export interface IFolder {
folderName: string;
files: IDownloadExcel[];
folderName: string
files: IDownloadExcel[]
}
export interface IDownloadExcel {
filename: string;
sheets: ISheet[];
filename: string
sheets: ISheet[]
}
export interface ISheet {
// sheet 的名字
sheetName: string;
// 这个 sheet 中表格的 column，类型同 antd 的 column
columns: any[];
// 表格的数据
dataSource: any[];
// sheet 的名字
sheetName: string
// 这个 sheet 中表格的 column，类型同 antd 的 column
columns: any[]
// 表格的数据
dataSource: any[]
}
export interface ITableHeader {
header: string;
// 用于数据匹配的 key
key: string;
// 列宽
width: number;
// 父级的 key
parentKey?: string;
children?: ITableHeader[];
header: string
// 用于数据匹配的 key
key: string
// 列宽
width: number
// 父级的 key
parentKey?: string
children?: ITableHeader[]
}
export interface IStyleAttr {
color?: string;
fontSize?: number;
horizontal?: 'fill' | 'distributed' | 'justify' | 'center' | 'left' | 'right' | 'centerContinuous' | undefined;
bold?: boolean;
color?: string
fontSize?: number
horizontal?: 'fill' | 'distributed' | 'justify' | 'center' | 'left' | 'right' | 'centerContinuous' | undefined
bold?: boolean
}
// 默认的列宽
export const DEFAULT_COLUMN_WIDTH = 20;
export const DEFAULT_COLUMN_WIDTH = 20
// 默认行高
export const DEFAULT_ROW_HEIGHT = 20;
export const DEFAULT_ROW_HEIGHT = 20
/**
* 导出多个文件为zip压缩包
*/
export async function downloadFiles2Zip(params: IDownloadFiles2Zip) {
const zip = new JsZip();
// 待每个文件都写入完之后再生成 zip 文件
const promises = params?.files?.map(async param => await handleEachFile(param, zip, ''))
await Promise.all(promises);
zip.generateAsync({type: "blob"}).then(blob => {
saveAs(blob, `${params.zipName}.zip`)
})
const zip = new JsZip()
// 待每个文件都写入完之后再生成 zip 文件
const promises = params?.files?.map(async (param) => await handleEachFile(param, zip, ''))
await Promise.all(promises)
zip.generateAsync({ type: 'blob' }).then((blob) => {
saveAs(blob, `${params.zipName}.zip`)
})
}
/**
@ -78,61 +75,61 @@ export async function downloadFiles2Zip(params: IDownloadFiles2Zip) {
* @param params
*/
export async function downloadFiles2ZipWithFolder(params: IDownloadFiles2ZipWithFolder) {
const zip = new JsZip();
const outPromises = params?.folders?.map(async folder => await handleFolder(zip, folder))
await Promise.all(outPromises);
zip.generateAsync({type: "blob"}).then(blob => {
saveAs(blob, `${params.zipName}.zip`)
})
const zip = new JsZip()
const outPromises = params?.folders?.map(async (folder) => await handleFolder(zip, folder))
await Promise.all(outPromises)
zip.generateAsync({ type: 'blob' }).then((blob) => {
saveAs(blob, `${params.zipName}.zip`)
})
}
async function handleFolder(zip: JsZip, folder: IFolder) {
console.log({folder})
const folderPromises: Promise<any>[] = [];
const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName));
await Promise.all([...promises, ...folderPromises]);
console.log({ folder })
const folderPromises: Promise<any>[] = []
const promises = folder?.files?.map(async (param) => await handleEachFile(param, zip, folder.folderName))
await Promise.all([...promises, ...folderPromises])
}
async function handleEachFile(param: IDownloadExcel, zip: JsZip, folderName: string) {
// 创建工作簿
const workbook = new ExcelJs.Workbook();
param?.sheets?.forEach((sheet) => handleEachSheet(workbook, sheet));
// 生成 blob
const data = await workbook.xlsx.writeBuffer();
const blob = new Blob([data], {type: ''});
if (folderName) {
zip.folder(folderName)?.file(`${param.filename}.xlsx`, blob)
} else {
// 写入 zip 中一个文件
zip.file(`${param.filename}.xlsx`, blob);
}
// 创建工作簿
const workbook = new ExcelJs.Workbook()
param?.sheets?.forEach((sheet) => handleEachSheet(workbook, sheet))
// 生成 blob
const data = await workbook.xlsx.writeBuffer()
const blob = new Blob([data], { type: '' })
if (folderName) {
zip.folder(folderName)?.file(`${param.filename}.xlsx`, blob)
} else {
// 写入 zip 中一个文件
zip.file(`${param.filename}.xlsx`, blob)
}
}
function handleEachSheet(workbook: Workbook, sheet: ISheet) {
// 添加sheet
const worksheet = workbook.addWorksheet(sheet.sheetName);
// 设置 sheet 的默认行高。设置默认行高跟自动撑开单元格冲突
// worksheet.properties.defaultRowHeight = 20;
// 设置列
worksheet.columns = generateHeaders(sheet.columns);
// handleHeader(worksheet);
// handleData(worksheet, sheet);
handleDataWithRender(worksheet, sheet);
// 添加sheet
const worksheet = workbook.addWorksheet(sheet.sheetName)
// 设置 sheet 的默认行高。设置默认行高跟自动撑开单元格冲突
// worksheet.properties.defaultRowHeight = 20;
// 设置列
worksheet.columns = generateHeaders(sheet.columns)
// handleHeader(worksheet);
// handleData(worksheet, sheet);
handleDataWithRender(worksheet, sheet)
}
export function handleHeader(worksheet: Worksheet) {
// 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行
const headerRow = worksheet.getRow(1);
headerRow.height = 22;
// 通过 cell 设置样式，更精准
headerRow.eachCell((cell) => addCellStyle(cell, {color: 'dff8ff', fontSize: 12, horizontal: 'left'}));
// 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行
const headerRow = worksheet.getRow(1)
headerRow.height = 22
// 通过 cell 设置样式，更精准
headerRow.eachCell((cell) => addCellStyle(cell, { color: 'dff8ff', fontSize: 12, horizontal: 'left' }))
}
export function handleData(worksheet: Worksheet, sheet: ISheet) {
// 添加行
const rows = worksheet.addRows(sheet?.dataSource);
// 设置每行的样式
addStyleToData(rows);
// 添加行
const rows = worksheet.addRows(sheet?.dataSource)
// 设置每行的样式
addStyleToData(rows)
}
/**
@ -141,120 +138,119 @@ export function handleData(worksheet: Worksheet, sheet: ISheet) {
* @param sheet
*/
function handleDataWithRender(worksheet: Worksheet, sheet: ISheet) {
const {dataSource, columns} = sheet;
const rowsData = dataSource?.map(data => {
return columns?.map(column => {
// @ts-ignore
const renderResult = column?.render?.(data[column.name], data);
if (renderResult) {
// 如果不是 object 说明没包裹标签，是基本类型直接返回
if (typeof renderResult !== "object") {
return renderResult;
}
// 如果是 object 说明包裹了标签，逐级取出值
return getValueFromRender(renderResult);
}
// @ts-ignore
return data[column.name];
})
const { dataSource, columns } = sheet
const rowsData = dataSource?.map((data) => {
return columns?.map((column) => {
// @ts-ignore
const renderResult = column?.render?.(data[column.name], data)
if (renderResult) {
// 如果不是 object 说明没包裹标签，是基本类型直接返回
if (typeof renderResult !== 'object') {
return renderResult
}
// 如果是 object 说明包裹了标签，逐级取出值
return getValueFromRender(renderResult)
}
// @ts-ignore
return data[column.name]
})
console.log({rowsData})
// 添加行
const rows = worksheet.addRows(rowsData);
// 设置每行的样式
addStyleToData(rows);
})
console.log({ rowsData })
// 添加行
const rows = worksheet.addRows(rowsData)
// 设置每行的样式
addStyleToData(rows)
}
// 递归取出 render 里的值
// @ts-ignore
function getValueFromRender(renderResult: any) {
if (renderResult?.type) {
const children = renderResult?.props?.children;
if (children?.type) {
return getValueFromRender(children);
} else {
return children;
}
if (renderResult?.type) {
const children = renderResult?.props?.children
if (children?.type) {
return getValueFromRender(children)
} else {
return children
}
return ''
}
return ''
}
function addStyleToData(rows: Row[]) {
// 设置每行的样式
rows?.forEach((row) => {
// 设置字体
// eslint-disable-next-line no-param-reassign
row.font = {
size: 11,
name: '微软雅黑',
};
// 设置对齐方式
// eslint-disable-next-line no-param-reassign
row.alignment = {
vertical: 'middle',
horizontal: 'left',
wrapText: true,
};
});
// 设置每行的样式
rows?.forEach((row) => {
// 设置字体
// eslint-disable-next-line no-param-reassign
row.font = {
size: 11,
name: '微软雅黑',
}
// 设置对齐方式
// eslint-disable-next-line no-param-reassign
row.alignment = {
vertical: 'middle',
horizontal: 'left',
wrapText: true,
}
})
}
export function saveWorkbook(workbook: Workbook, fileName: string) {
// 导出文件
workbook.xlsx.writeBuffer().then((data: any) => {
const blob = new Blob([data], {type: ''});
saveAs(blob, fileName);
});
// 导出文件
workbook.xlsx.writeBuffer().then((data: any) => {
const blob = new Blob([data], { type: '' })
saveAs(blob, fileName)
})
}
// 根据 antd 的 column 生成 exceljs 的 column
export function generateHeaders(columns: any[]) {
return columns?.map((col) => {
const obj: ITableHeader = {
// 显示的 name
header: col.label,
// 用于数据匹配的 key
key: col.name,
// 列宽
width: col.width / 5 > DEFAULT_COLUMN_WIDTH ? col.width / 5 : DEFAULT_COLUMN_WIDTH,
};
if (col.children) {
obj.children = col.children?.map((item: any) => ({
key: item.name,
header: item.label,
width: item.width,
parentKey: col.name,
}));
}
return obj;
});
return columns?.map((col) => {
const obj: ITableHeader = {
// 显示的 name
header: col.label,
// 用于数据匹配的 key
key: col.name,
// 列宽
width: col.width / 5 > DEFAULT_COLUMN_WIDTH ? col.width / 5 : DEFAULT_COLUMN_WIDTH,
}
if (col.children) {
obj.children = col.children?.map((item: any) => ({
key: item.name,
header: item.label,
width: item.width,
parentKey: col.name,
}))
}
return obj
})
}
export function getColumnNumber(width: number) {
// 需要的列数，向上取整
return Math.ceil(width / DEFAULT_COLUMN_WIDTH);
// 需要的列数，向上取整
return Math.ceil(width / DEFAULT_COLUMN_WIDTH)
}
export function addCellStyle(cell: Cell, attr?: IStyleAttr) {
const {color, fontSize, horizontal, bold} = attr || {};
// eslint-disable-next-line no-param-reassign
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: color},
};
// eslint-disable-next-line no-param-reassign
cell.font = {
bold: bold ?? true,
size: fontSize ?? 11,
name: '微软雅黑',
};
// eslint-disable-next-line no-param-reassign
cell.alignment = {vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left'};
export function addCellStyle(cell: Cell, attr?: IStyleAttr) {
const { color, fontSize, horizontal, bold } = attr || {}
// eslint-disable-next-line no-param-reassign
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: color },
}
// eslint-disable-next-line no-param-reassign
cell.font = {
bold: bold ?? true,
size: fontSize ?? 11,
name: '微软雅黑',
}
// eslint-disable-next-line no-param-reassign
cell.alignment = { vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left' }
}
export function addHeaderStyle(row: Row, attr?: IStyleAttr) {
// eslint-disable-next-line no-param-reassign
row.height = DEFAULT_ROW_HEIGHT;
row.eachCell((cell) => addCellStyle(cell, attr));
// eslint-disable-next-line no-param-reassign
row.height = DEFAULT_ROW_HEIGHT
row.eachCell((cell) => addCellStyle(cell, attr))
}

18
src/utils/element.ts
View File

@ -1,16 +1,14 @@
import { ElLoading } from 'element-plus'
import {
Loading
} from '@element-plus/icons-vue'
import { Loading } from '@element-plus/icons-vue'
let loading = null
export const openLoading = (options={})=>{
const text = options.text||'加载中'
loading = ElLoading.service({
lock: true,
text: text,
})
export const openLoading = (options = {}) => {
const text = options.text || '加载中'
loading = ElLoading.service({
lock: true,
text: text,
})
}
export const closeLoading = () => {
loading&&loading.close()
loading && loading.close()
}

66
src/utils/emojis.ts
View File

@ -1,35 +1,35 @@
export default {
imgs: [
'爱你',
'爱情',
'爱心',
'傲慢',
'白眼',
'抱拳',
'鄙视',
'闭嘴',
'便便',
'擦汗',
'菜刀',
'差劲',
'呲牙',
'大哭',
'蛋糕',
'刀',
'得意',
'凋谢',
'发呆',
'NO',
'OK',
'发抖',
'发怒',
'饭',
'飞吻',
'奋斗',
'疯了',
'尴尬',
'勾引',
'鼓掌',
'哈欠',
],
imgs: [
'爱你',
'爱情',
'爱心',
'傲慢',
'白眼',
'抱拳',
'鄙视',
'闭嘴',
'便便',
'擦汗',
'菜刀',
'差劲',
'呲牙',
'大哭',
'蛋糕',
'刀',
'得意',
'凋谢',
'发呆',
'NO',
'OK',
'发抖',
'发怒',
'饭',
'飞吻',
'奋斗',
'疯了',
'尴尬',
'勾引',
'鼓掌',
'哈欠',
],
}

481
src/utils/exprotExcel.ts
View File

@ -1,279 +1,252 @@
import ExcelJS from 'exceljs'
const autoWidthAction = (val,width=10)=>{
if (val == null) {
width = 10;
} else if (val.toString().charCodeAt(0) > 255) {
/*if chinese*/
width = val.toString().length * 2;
} else {
width = val.toString().length;
const autoWidthAction = (val, width = 10) => {
if (val == null) {
width = 10
} else if (val.toString().charCodeAt(0) > 255) {
/*if chinese*/
width = val.toString().length * 2
} else {
width = val.toString().length
}
return width
}
export const exportExcel = async ({ column, data, filename, autoWidth, format }) => {
// 创建excel
const workbook = new ExcelJS.Workbook()
// 设置信息
workbook.creator = 'Me'
workbook.title = filename
workbook.created = new Date()
workbook.modified = new Date()
// 创建工作表
const worksheet = workbook.addWorksheet(filename)
// 设置列名
const columnsName = []
column.forEach((item, index) => {
const obj = {
header: item.label,
key: item.name,
width: null,
}
return width
}
export const exportExcel = async ({column,data,filename,autoWidth,format})=>{
// 创建excel
const workbook = new ExcelJS.Workbook();
// 设置信息
workbook.creator = "Me";
workbook.title = filename;
workbook.created = new Date();
workbook.modified = new Date();
// 创建工作表
const worksheet = workbook.addWorksheet(filename);
// 设置列名
const columnsName = [];
column.forEach((item,index)=>{
const obj = {
header: item.label, key:item.name, width: null
if (autoWidth) {
const maxArr = [autoWidthAction(item.label)]
data.forEach((ite) => {
const str = ite[item.name] || ''
if (str) {
maxArr.push(autoWidthAction(str))
}
if(autoWidth){
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
const str = ite[item.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
}
// 设置列名、键和宽度
columnsName.push(obj);
})
worksheet.columns = columnsName;
// 添加行
worksheet.addRows(data);
// 写入文件
const uint8Array =
format === "xlsx"
? await workbook.xlsx.writeBuffer()
: await workbook.csv.writeBuffer();
const blob = new Blob([uint8Array], { type: "application/octet-binary" });
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + `.${format}`);
// 本地保存
} else {
const link = document.createElement("a"); // a标签下载
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
link.download = filename + `.${format}`; // dowload属性指定文件名
link.click(); // click()事件触发下载
window.URL.revokeObjectURL(link.href); // 释放内存
})
obj.width = Math.max(...maxArr) + 5
}
// 设置列名、键和宽度
columnsName.push(obj)
})
worksheet.columns = columnsName
// 添加行
worksheet.addRows(data)
// 写入文件
const uint8Array = format === 'xlsx' ? await workbook.xlsx.writeBuffer() : await workbook.csv.writeBuffer()
const blob = new Blob([uint8Array], { type: 'application/octet-binary' })
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + `.${format}`)
// 本地保存
} else {
const link = document.createElement('a') // a标签下载
link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
link.download = filename + `.${format}` // dowload属性指定文件名
link.click() // click()事件触发下载
window.URL.revokeObjectURL(link.href) // 释放内存
}
}
export function addCellStyle(cell, attr) {
const {color, fontSize, horizontal, bold} = attr || {};
// eslint-disable-next-line no-param-reassign
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: color},
};
// eslint-disable-next-line no-param-reassign
cell.font = {
bold: bold ?? true,
size: fontSize ?? 11,
// italic: true,
// name: '微软雅黑',
color: {argb: 'ff0000'},
};
// eslint-disable-next-line no-param-reassign
cell.alignment = {vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left'};
export function addCellStyle(cell, attr) {
const { color, fontSize, horizontal, bold } = attr || {}
// eslint-disable-next-line no-param-reassign
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: color },
}
// eslint-disable-next-line no-param-reassign
cell.font = {
bold: bold ?? true,
size: fontSize ?? 11,
// italic: true,
// name: '微软雅黑',
color: { argb: 'ff0000' },
}
// eslint-disable-next-line no-param-reassign
cell.alignment = { vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left' }
}
export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>{
// 创建excel
const workbook = new ExcelJS.Workbook();
// 设置信息
workbook.creator = "Me";
workbook.title = filename;
workbook.created = new Date();
workbook.modified = new Date();
// 创建工作表
const worksheet = workbook.addWorksheet(filename);
// 设置列名
const columnsName = [];
column.forEach((item,index)=>{
const obj = {
header: item.label, key:item.name, width: null
}
if(autoWidth){
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
const str = ite[item.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
}
// 设置列名、键和宽度
columnsName.push(obj);
})
worksheet.columns = columnsName;
// 添加行
worksheet.addRows(data);
// 写入文件
// 设置表头颜色
// 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行
const headerRow = worksheet.getRow(1);
// 通过 cell 设置样式，更精准
headerRow.eachCell((cell) => addCellStyle(cell, {color: 'dff8ff', fontSize: 12, horizontal: 'left'}));
const uint8Array =
format === "xlsx"
? await workbook.xlsx.writeBuffer()
: await workbook.csv.writeBuffer();
const blob = new Blob([uint8Array], { type: "application/octet-binary" });
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + `.${format}`);
// 本地保存
} else {
const link = document.createElement("a"); // a标签下载
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
link.download = filename + `.${format}`; // dowload属性指定文件名
link.click(); // click()事件触发下载
window.URL.revokeObjectURL(link.href); // 释放内存
export const exportStyleExcel = async ({ column, data, filename, autoWidth, format }) => {
// 创建excel
const workbook = new ExcelJS.Workbook()
// 设置信息
workbook.creator = 'Me'
workbook.title = filename
workbook.created = new Date()
workbook.modified = new Date()
// 创建工作表
const worksheet = workbook.addWorksheet(filename)
// 设置列名
const columnsName = []
column.forEach((item, index) => {
const obj = {
header: item.label,
key: item.name,
width: null,
}
if (autoWidth) {
const maxArr = [autoWidthAction(item.label)]
data.forEach((ite) => {
const str = ite[item.name] || ''
if (str) {
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr) + 5
}
// 设置列名、键和宽度
columnsName.push(obj)
})
worksheet.columns = columnsName
// 添加行
worksheet.addRows(data)
// 写入文件
// 设置表头颜色
// 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行
const headerRow = worksheet.getRow(1)
// 通过 cell 设置样式，更精准
headerRow.eachCell((cell) => addCellStyle(cell, { color: 'dff8ff', fontSize: 12, horizontal: 'left' }))
const uint8Array = format === 'xlsx' ? await workbook.xlsx.writeBuffer() : await workbook.csv.writeBuffer()
const blob = new Blob([uint8Array], { type: 'application/octet-binary' })
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + `.${format}`)
// 本地保存
} else {
const link = document.createElement('a') // a标签下载
link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
link.download = filename + `.${format}` // dowload属性指定文件名
link.click() // click()事件触发下载
window.URL.revokeObjectURL(link.href) // 释放内存
}
}
// 默认的列宽
export const DEFAULT_COLUMN_WIDTH = 20;
export const DEFAULT_COLUMN_WIDTH = 20
function getColumnNumber(width: number) {
// 需要的列数，四舍五入
return Math.round(width / DEFAULT_COLUMN_WIDTH);
// 需要的列数，四舍五入
return Math.round(width / DEFAULT_COLUMN_WIDTH)
}
function addData(worksheet, headerKeys, headers, data) {}
function addData(worksheet,headerKeys,headers,data){
export const exportMultiHeaderExcel = ({ column, data, filename, autoWidth }) => {
// 创建excel
const workbook = new ExcelJS.Workbook()
// 创建工作表
const sheet = workbook.addWorksheet('sheet1')
}
export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
// 创建excel
const workbook = new ExcelJS.Workbook();
// 创建工作表
const sheet = workbook.addWorksheet("sheet1");
// 添加表头
sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息" ,,, ];
sheet.getRow(2).values = [
"序号",
"日期",
"地址",
"省份",
"城市",
"邮编"
];
const headers = [];
column.forEach((item,index)=>{
if(item.children){
item.children.forEach(itemChild=>{
const obj = {
key:itemChild.name, width: null
}
const maxArr = [autoWidthAction(itemChild.label)]
data.forEach(ite=>{
const str = ite[itemChild.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
// 设置列名、键和宽度
headers.push(obj);
})
}else {
const obj = {
key:item.name, width: null
}
const maxArr = [autoWidthAction(item.label)]
data.forEach(ite=>{
const str = ite[item.name] ||''
if(str){
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
// 设置列名、键和宽度
headers.push(obj);
// 添加表头
sheet.getRow(1).values = ['序号', '日期', '地址', '配送消息', , ,]
sheet.getRow(2).values = ['序号', '日期', '地址', '省份', '城市', '邮编']
const headers = []
column.forEach((item, index) => {
if (item.children) {
item.children.forEach((itemChild) => {
const obj = {
key: itemChild.name,
width: null,
}
})
sheet.columns = headers;
sheet.addRows(data);
// 合并单元格
sheet.mergeCells(`D1:F1`);
sheet.mergeCells("A1:A2");
sheet.mergeCells("B1:B2");
sheet.mergeCells("C1:C2");
// 写入文件
workbook.xlsx.writeBuffer().then((data) => {
const blob = new Blob([data, { type: "application/vnd.ms-excel" }]);
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + ".xlsx");
// 本地保存
} else {
const link = document.createElement("a"); // a标签下载
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
link.download = filename + ".xlsx"; // dowload属性指定文件名
link.click(); // click()事件触发下载
window.URL.revokeObjectURL(link.href); // 释放内存
const maxArr = [autoWidthAction(itemChild.label)]
data.forEach((ite) => {
const str = ite[itemChild.name] || ''
if (str) {
maxArr.push(autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr) + 5
// 设置列名、键和宽度
headers.push(obj)
})
} else {
const obj = {
key: item.name,
width: null,
}
const maxArr = [autoWidthAction(item.label)]
data.forEach((ite) => {
const str = ite[item.name] || ''
if (str) {
maxArr.push(autoWidthAction(str))
}
});
})
obj.width = Math.max(...maxArr) + 5
// 设置列名、键和宽度
headers.push(obj)
}
})
sheet.columns = headers
sheet.addRows(data)
// 合并单元格
sheet.mergeCells(`D1:F1`)
sheet.mergeCells('A1:A2')
sheet.mergeCells('B1:B2')
sheet.mergeCells('C1:C2')
// 写入文件
workbook.xlsx.writeBuffer().then((data) => {
const blob = new Blob([data, { type: 'application/vnd.ms-excel' }])
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + '.xlsx')
// 本地保存
} else {
const link = document.createElement('a') // a标签下载
link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
link.download = filename + '.xlsx' // dowload属性指定文件名
link.click() // click()事件触发下载
window.URL.revokeObjectURL(link.href) // 释放内存
}
})
}
function mergeColumnCell(headers, rowHeader1, rowHeader2, nameRow1, nameRow2, worksheet) {
// 当前 index 的指针
let pointer = -1
nameRow1.forEach((name, index) => {
// 当 index 小于指针时，说明这一列已经被合并过了，不能再合并
if (index <= pointer) return
// 是否应该列合并
const shouldVerticalMerge = name === nameRow2[index]
function mergeColumnCell(headers, rowHeader1, rowHeader2, nameRow1, nameRow2, worksheet){
// 当前 index 的指针
let pointer = -1;
nameRow1.forEach((name, index) => {
// 当 index 小于指针时，说明这一列已经被合并过了，不能再合并
if (index <= pointer) return;
// 是否应该列合并
const shouldVerticalMerge = name === nameRow2[index];
// 是否应该行合并
const shouldHorizontalMerge = index !== nameRow1.lastIndexOf(name)
console.log('==', name, nameRow2[index], index, nameRow1.lastIndexOf(name), shouldVerticalMerge, shouldHorizontalMerge)
// 是否应该行合并
const shouldHorizontalMerge = index !== nameRow1.lastIndexOf(name);
console.log('==',name,nameRow2[index],index,nameRow1.lastIndexOf(name),shouldVerticalMerge,shouldHorizontalMerge)
pointer = nameRow1.lastIndexOf(name);
if (shouldVerticalMerge && shouldHorizontalMerge) {
// 两个方向都合并
worksheet.mergeCells(
Number(rowHeader1.number),
index + 1,
Number(rowHeader2.number),
nameRow1.lastIndexOf(name) + 1,
);
console.log('==')
} else if (shouldVerticalMerge && !shouldHorizontalMerge) {
// 只在垂直方向上同一列的两行合并
worksheet.mergeCells(Number(rowHeader1.number), index + 1, Number(rowHeader2.number), index + 1);
} else if (!shouldVerticalMerge && shouldHorizontalMerge) {
// 只有水平方向同一行的多列合并
worksheet.mergeCells(
Number(rowHeader1.number),
index + 1,
Number(rowHeader1.number),
nameRow1.lastIndexOf(name) + 1,
);
// eslint-disable-next-line no-param-reassign
const cell = rowHeader1.getCell(index + 1);
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
}
});
pointer = nameRow1.lastIndexOf(name)
if (shouldVerticalMerge && shouldHorizontalMerge) {
// 两个方向都合并
worksheet.mergeCells(Number(rowHeader1.number), index + 1, Number(rowHeader2.number), nameRow1.lastIndexOf(name) + 1)
console.log('==')
} else if (shouldVerticalMerge && !shouldHorizontalMerge) {
// 只在垂直方向上同一列的两行合并
worksheet.mergeCells(Number(rowHeader1.number), index + 1, Number(rowHeader2.number), index + 1)
} else if (!shouldVerticalMerge && shouldHorizontalMerge) {
// 只有水平方向同一行的多列合并
worksheet.mergeCells(Number(rowHeader1.number), index + 1, Number(rowHeader1.number), nameRow1.lastIndexOf(name) + 1)
// eslint-disable-next-line no-param-reassign
const cell = rowHeader1.getCell(index + 1)
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }
}
})
}

61
src/utils/index.ts
View File

@ -1,4 +1,3 @@
/**
* Parse the time to string
* @param {(Object|string|number)} time
@ -79,9 +78,7 @@ export function formatTime(time, option) {
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
)
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
}
}
@ -111,7 +108,7 @@ export function getQueryObject(url) {
export function byteLength(str) {
// returns the byte length of an utf8 string
let s = str.length
for (var i = str.length - 1; i >= 0; i--) {
for (let i = str.length - 1; i >= 0; i--) {
const code = str.charCodeAt(i)
if (code > 0x7f && code <= 0x7ff) s++
else if (code > 0x7ff && code <= 0xffff) s += 2
@ -217,8 +214,7 @@ export function toggleClass(element, className) {
if (nameIndex === -1) {
classString += '' + className
} else {
classString =
classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
}
element.className = classString
}
@ -347,10 +343,10 @@ export function removeClass(ele, cls) {
}
export function getColor() {
var str = '#'
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * 16)
let str = '#'
const arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (let i = 0; i < 6; i++) {
const num = parseInt(Math.random() * 16)
str += arr[num]
}
return str
@ -360,14 +356,14 @@ export const isArray = function (value) {
return objToString.call(value) === '[object Array]'
}
let funProto = Function.prototype
let objProto = Object.prototype
const funProto = Function.prototype
const objProto = Object.prototype
let getPrototypeOf = Object.getPrototypeOf
const getPrototypeOf = Object.getPrototypeOf
let objToString = objProto.toString
let hasOwnProperty = objProto.hasOwnProperty
let funToString = funProto.toString
const objToString = objProto.toString
const hasOwnProperty = objProto.hasOwnProperty
const funToString = funProto.toString
// 检查给定的值是否是字符串
export const isString = function (value) {
return objToString.call(value) === '[object String]'
@ -378,22 +374,20 @@ export const isPlainObject = function (value) {
return false
}
let prototype = getPrototypeOf(value)
const prototype = getPrototypeOf(value)
if (prototype === null) {
return true
}
let constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
const constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
return (
typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
)
return typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
}
// // 深度克隆 array 数组或 json 对象，返回克隆后的副本
export const deepObjClone = function (obj) {
let weakMap = new WeakMap()
const weakMap = new WeakMap()
function clone(obj) {
if (obj == null) {
return obj
@ -409,11 +403,11 @@ export const deepObjClone = function (obj) {
if (weakMap.get(obj)) {
return weakMap.get(obj)
}
let copy = new obj.constructor()
const copy = new obj.constructor()
weakMap.set(obj, copy)
for (let key in obj) {
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
let value = obj[key]
const value = obj[key]
copy[key] = clone(value)
}
}
@ -422,13 +416,12 @@ export const deepObjClone = function (obj) {
return clone(obj)
}
export function getTimeStateStr() {
let timeNow = new Date();
let hours = timeNow.getHours();
if (hours >= 6 && hours <= 10) return `早上好`;
if (hours >= 10 && hours <= 14) return `中午好`;
if (hours >= 14 && hours <= 18) return `下午好`;
if (hours >= 18 && hours <= 24) return `晚上好`;
if (hours >= 0 && hours <= 6) return `凌晨好`;
const timeNow = new Date()
const hours = timeNow.getHours()
if (hours >= 6 && hours <= 10) return `早上好`
if (hours >= 10 && hours <= 14) return `中午好`
if (hours >= 14 && hours <= 18) return `下午好`
if (hours >= 18 && hours <= 24) return `晚上好`
if (hours >= 0 && hours <= 6) return `凌晨好`
}

30
src/utils/requestAnimationFrameThrottle.js
View File

@ -1,25 +1,25 @@
import raf from "raf";
import raf from 'raf'
/**
* requestAnimationFrame 节流
* scroll 和 touchmove 等事件触发很频繁，比屏幕刷新频率更快，将导致无效的渲染和重绘
* 这里使用 requestAnimationFrame 来优化滚动处理，在一帧中只进行一次有效重绘
*/
* requestAnimationFrame 节流
* scroll 和 touchmove 等事件触发很频繁，比屏幕刷新频率更快，将导致无效的渲染和重绘
* 这里使用 requestAnimationFrame 来优化滚动处理，在一帧中只进行一次有效重绘
*/
export default function requestAnimationFrameThrottle(callback) {
let id;
let id
const factory = args => () => {
id = null;
callback(...args);
};
const factory = (args) => () => {
id = null
callback(...args)
}
const throttled = (...args) => {
if (id == null) {
id = raf(factory(args));
id = raf(factory(args))
}
};
}
throttled.cancel = () => raf.cancel(id);
throttled.cancel = () => raf.cancel(id)
return throttled;
};
return throttled
}

6
src/utils/resize.js
View File

@ -40,15 +40,13 @@ export default {
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm &&
this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm &&
this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this

Some files were not shown because too many files have changed in this diff Show More