zx/hazardousWaste_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
zx
2026-03-11 08:22:15 +08:00
parent 97b070a1a4
commit 882558c511
65 changed files with 1104 additions and 1747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.env.development
View File

@@ -1,8 +1,7 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 智汇管理系统11
# 开发环境配置
VITE_APP_ENV = 'development'
# 若依管理系统/开发环境
# 智汇管理系统/开发环境
VITE_APP_BASE_API = 'http://192.168.1.5:8082'

4
.env.production
View File

@@ -1,10 +1,10 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 智汇管理系统
# 生产环境配置
VITE_APP_ENV = 'production'
# 若依管理系统/生产环境
# 智汇管理系统/生产环境
VITE_APP_BASE_API = 'http://192.168.1.5:8082'
# 是否在打包时开启压缩，支持 gzip 和 brotli

4
.env.staging
View File

@@ -1,10 +1,10 @@
# 页面标题
VITE_APP_TITLE = 若依管理系统
VITE_APP_TITLE = 智汇管理系统
# 生产环境配置
VITE_APP_ENV = 'staging'
# 若依管理系统/生产环境
# 智汇管理系统/生产环境
VITE_APP_BASE_API = '/stage-api'
# 是否在打包时开启压缩，支持 gzip 和 brotli

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "ruoyi",
"version": "3.9.1",
"description": "若依管理系统",
"description": "智汇管理系统",
"author": "若依",
"license": "MIT",
"type": "module",

2
src/api/system/user.js
View File

@@ -1,5 +1,5 @@
import request from '@/utils/request'
import { parseStrEmpty } from "@/utils/ruoyi";
import { parseStrEmpty } from "@/utils/manage";
// 查询用户列表
export function listUser(query) {

2
src/assets/styles/btn.scss
View File

@@ -1,4 +1,4 @@
@use './variables.module.scss' as *;
@import './variables.module.scss';
@mixin colorBtn($color) {
background: $color;

21
src/assets/styles/common.css Normal file
View File

@@ -0,0 +1,21 @@
:root {
--mineTable-notFinish-bg-color: #c7ffa5;
--mineTable-click-bg-color: #d2f0ff;
}
.el-table .success-row {
background-color: var(--mineTable-notFinish-bg-color) !important;
}
.el-table__body tr.current-row>td.el-table__cell {
background-color: var(--mineTable-click-bg-color) !important;
}
/* :deep(.el-table__body tr.hover-row>td.el-table__cell){
background-color: unset !important;
}
.el-table {
--el-table-row-hover-bg-color: transparent;
} */

23
src/assets/styles/index.scss
View File

@@ -1,9 +1,10 @@
@use './mixin.scss';
@use './transition.scss';
@use './element-ui.scss';
@use './sidebar.scss';
@use './btn.scss';
@use './ruoyi.scss';
@import './variables.module.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import './manage.scss';
body {
height: 100%;
@@ -123,6 +124,16 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
margin: 24px;
.el-form{
.el-form-item__label{
color:rgba(0, 0, 0, .9);
font-weight: 500;
}
}
}
.components-container {

20
src/assets/styles/ruoyi.scss → src/assets/styles/manage.scss
View File

@@ -1,6 +1,6 @@
/**
* 通用css样式布局处理
* Copyright (c) 2019 ruoyi
* Copyright (c) 2019
*/
/** 基础通用 **/
@@ -60,14 +60,6 @@
color: inherit;
}
.el-form--inline {
.el-form-item {
.el-input, .el-cascader, .el-select, .el-autocomplete {
width: 200px;
}
}
}
.el-form .el-form-item__label {
font-weight: 700;
}
@@ -156,16 +148,6 @@
width: inherit;
}
/* horizontal el menu */
.el-menu--horizontal .el-menu-item .svg-icon + span,
.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
margin-left: 3px;
}
.el-menu--horizontal .el-menu--popup {
min-width: 120px !important;
}
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link {
cursor: pointer;

27
src/assets/styles/sidebar.scss
View File

@@ -1,11 +1,9 @@
@use './variables.module.scss' as vars;
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: vars.$base-sidebar-width;
margin-left: $base-sidebar-width;
position: relative;
}
@@ -15,7 +13,7 @@
.sidebar-container {
transition: width 0.28s;
width: vars.$base-sidebar-width !important;
width: $base-sidebar-width !important;
height: 100%;
position: fixed;
font-size: 0px;
@@ -24,8 +22,9 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
// box-shadow: 2px 0 6px rgba(0,21,41,.35);
border-right: 1px solid #e4e4e7;
// reset element-ui css
.horizontal-collapse-transition {
@@ -61,7 +60,7 @@
}
.svg-icon {
margin-right: 10px !important;
margin-right: 16px;
}
.el-menu {
@@ -89,12 +88,12 @@
}
& .theme-dark .is-active > .el-sub-menu__title {
color: vars.$base-menu-color-active !important;
color: $base-menu-color-active !important;
}
& .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: vars.$base-sidebar-width !important;
min-width: $base-sidebar-width !important;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
@@ -103,10 +102,10 @@
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: vars.$base-sub-menu-background;
background-color: $base-sub-menu-background;
&:hover {
background-color: vars.$base-sub-menu-hover !important;
background-color: $base-sub-menu-hover !important;
}
}
}
@@ -169,7 +168,7 @@
}
.el-menu--collapse .el-menu .el-sub-menu {
min-width: vars.$base-sidebar-width !important;
min-width: $base-sidebar-width !important;
}
// mobile responsive
@@ -180,14 +179,14 @@
.sidebar-container {
transition: transform .28s;
width: vars.$base-sidebar-width !important;
width: $base-sidebar-width !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-(vars.$base-sidebar-width), 0, 0);
transform: translate3d(-$base-sidebar-width, 0, 0);
}
}
}

37
src/assets/styles/transition.scss
View File

@@ -6,7 +6,7 @@
transition: opacity 0.28s;
}
.fade-enter-from,
.fade-enter,
.fade-leave-active {
opacity: 0;
}
@@ -18,7 +18,7 @@
transition: all .5s;
}
.fade-transform-enter-from {
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
@@ -34,7 +34,7 @@
transition: all .5s;
}
.breadcrumb-enter-from,
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
@@ -47,34 +47,3 @@
.breadcrumb-leave-active {
position: absolute;
}
/* 黑暗模式下过渡效果 */
::view-transition-new(root), ::view-transition-old(root) {
animation: none !important;
backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dark::view-transition-old(root) {
z-index: 2147483646;
background: var(--bg-color-dark);
}
.dark::view-transition-new(root) {
z-index: 1;
background: var(--bg-color);
}
::view-transition-old(root) {
z-index: 1;
background: var(--bg-color);
}
::view-transition-new(root) {
z-index: 2147483646;
background: var(--bg-color-dark);
}

54
src/assets/styles/variables.module.scss
View File

@@ -90,9 +90,6 @@ html.dark {
--el-border-color: #434343;
--el-border-color-light: #434343;
/* primary */
--primary-bg: #18212b;
/* 侧边栏 */
--sidebar-bg: #141414;
--sidebar-text: #ffffff;
@@ -131,7 +128,7 @@ html.dark {
/* 侧边栏菜单覆盖 */
.sidebar-container {
.el-menu-item:not(.is-active), .menu-title {
.el-menu-item, .menu-title {
color: var(--el-text-color-regular);
}
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
@@ -140,27 +137,13 @@ html.dark {
}
}
.topmenu-container {
.el-menu-item,
.el-sub-menu .el-sub-menu__title {
color: var(--el-text-color-regular) !important;
}
}
.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title{
color: var(--el-text-color-regular) !important;
}
/* 顶部栏栏菜单覆盖 */
.el-menu--horizontal {
.el-menu-item, .el-sub-menu {
.el-menu-item {
&:not(.is-disabled) {
&:hover,
&:focus {
background-color: var(--navbar-hover) !important;
.el-sub-menu__title {
background-color: var(--navbar-hover) !important;
}
}
}
}
@@ -190,33 +173,6 @@ html.dark {
}
}
/* 按钮样式覆盖 */
.el-button--primary.is-plain {
background-color: var(--primary-bg);
border: 1px solid var(--el-color-primary-light-2);
color: var(--el-color-primary-light-2);
&:hover {
background-color: var(--el-button-hover-bg-color);
border-color: var(--el-button-hover-border-color);
color: var(--el-button-hover-text-color);
}
&.is-disabled {
background-color: var(--link-active-bg-color);
border-color: var(--el-color-primary-light-3);
color: var(--el-color-primary-light-3);
opacity: 0.5;
}
}
/* primary tag 样式覆盖 */
.el-tag--primary {
background-color: var(--primary-bg);
border: 1px solid var(--el-border-color-light);
color: var(--el-color-primary);
}
/* 表格样式覆盖 */
.el-table {
--el-table-header-bg-color: var(--el-bg-color-overlay) !important;
@@ -261,11 +217,5 @@ html.dark {
background: var(--cron-border);
}
/* 底部版权样式覆盖 */
.copyright {
background-color: var(--el-bg-color) !important;
color: var(--el-text-color-regular) !important;
border-top: 1px solid var(--el-bg-color) !important;
}
}

1
src/components/Breadcrumb/index.vue
View File

@@ -88,6 +88,7 @@ getBreadcrumb()
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #97a8be;

4
src/components/Crontab/hour.vue
View File

@@ -78,10 +78,10 @@ watch(() => props.cron.hour, value => changeRadioValue(value))
watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
function changeRadioValue(value) {
if (props.cron.min === '*') {
emit('update', 'min', '0', 'hour')
emit('update', 'min', '0', 'hour');
}
if (props.cron.second === '*') {
emit('update', 'second', '0', 'hour')
emit('update', 'second', '0', 'hour');
}
if (value === '*') {
radioValue.value = 1

4
src/components/Crontab/index.vue
View File

@@ -70,13 +70,10 @@
<p class="title">时间表达式</p>
<table>
<thead>
<tr>
<th v-for="item of tabTitles" :key="item">{{item}}</th>
<th>Cron 表达式</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span v-if="crontabValueObj.second.length < 10">{{crontabValueObj.second}}</span>
<el-tooltip v-else :content="crontabValueObj.second" placement="top"><span>{{crontabValueObj.second}}</span></el-tooltip>
@@ -109,7 +106,6 @@
<span v-if="crontabValueString.length < 90">{{crontabValueString}}</span>
<el-tooltip v-else :content="crontabValueString" placement="top"><span>{{crontabValueString}}</span></el-tooltip>
</td>
</tr>
</tbody>
</table>
</div>

374
src/components/Crontab/result.vue
View File

@@ -26,289 +26,289 @@ watch(() => props.ex, () => expressionChange())
// 表达式值变化时，开始去计算结果
function expressionChange() {
// 计算开始-隐藏结果
isShow.value = false
isShow.value = false;
// 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
let ruleArr = props.ex.split(' ')
let ruleArr = props.ex.split(' ');
// 用于记录进入循环的次数
let nums = 0
let nums = 0;
// 用于暂时存符号时间规则结果的数组
let resultArr = []
let resultArr = [];
// 获取当前时间精确至[年、月、日、时、分、秒]
let nTime = new Date()
let nYear = nTime.getFullYear()
let nMonth = nTime.getMonth() + 1
let nDay = nTime.getDate()
let nHour = nTime.getHours()
let nMin = nTime.getMinutes()
let nSecond = nTime.getSeconds()
let nTime = new Date();
let nYear = nTime.getFullYear();
let nMonth = nTime.getMonth() + 1;
let nDay = nTime.getDate();
let nHour = nTime.getHours();
let nMin = nTime.getMinutes();
let nSecond = nTime.getSeconds();
// 根据规则获取到近100年可能年数组、月数组等等
getSecondArr(ruleArr[0])
getMinArr(ruleArr[1])
getHourArr(ruleArr[2])
getDayArr(ruleArr[3])
getMonthArr(ruleArr[4])
getWeekArr(ruleArr[5])
getYearArr(ruleArr[6], nYear)
getSecondArr(ruleArr[0]);
getMinArr(ruleArr[1]);
getHourArr(ruleArr[2]);
getDayArr(ruleArr[3]);
getMonthArr(ruleArr[4]);
getWeekArr(ruleArr[5]);
getYearArr(ruleArr[6], nYear);
// 将获取到的数组赋值-方便使用
let sDate = dateArr.value[0]
let mDate = dateArr.value[1]
let hDate = dateArr.value[2]
let DDate = dateArr.value[3]
let MDate = dateArr.value[4]
let YDate = dateArr.value[5]
let sDate = dateArr.value[0];
let mDate = dateArr.value[1];
let hDate = dateArr.value[2];
let DDate = dateArr.value[3];
let MDate = dateArr.value[4];
let YDate = dateArr.value[5];
// 获取当前时间在数组中的索引
let sIdx = getIndex(sDate, nSecond)
let mIdx = getIndex(mDate, nMin)
let hIdx = getIndex(hDate, nHour)
let DIdx = getIndex(DDate, nDay)
let MIdx = getIndex(MDate, nMonth)
let YIdx = getIndex(YDate, nYear)
let sIdx = getIndex(sDate, nSecond);
let mIdx = getIndex(mDate, nMin);
let hIdx = getIndex(hDate, nHour);
let DIdx = getIndex(DDate, nDay);
let MIdx = getIndex(MDate, nMonth);
let YIdx = getIndex(YDate, nYear);
// 重置月日时分秒的函数(后面用的比较多)
const resetSecond = function () {
sIdx = 0
sIdx = 0;
nSecond = sDate[sIdx]
}
const resetMin = function () {
mIdx = 0
mIdx = 0;
nMin = mDate[mIdx]
resetSecond()
resetSecond();
}
const resetHour = function () {
hIdx = 0
hIdx = 0;
nHour = hDate[hIdx]
resetMin()
resetMin();
}
const resetDay = function () {
DIdx = 0
DIdx = 0;
nDay = DDate[DIdx]
resetHour()
resetHour();
}
const resetMonth = function () {
MIdx = 0
MIdx = 0;
nMonth = MDate[MIdx]
resetDay()
resetDay();
}
// 如果当前年份不为数组中当前值
if (nYear !== YDate[YIdx]) {
resetMonth()
resetMonth();
}
// 如果当前月份不为数组中当前值
if (nMonth !== MDate[MIdx]) {
resetDay()
resetDay();
}
// 如果当前“日”不为数组中当前值
if (nDay !== DDate[DIdx]) {
resetHour()
resetHour();
}
// 如果当前“时”不为数组中当前值
if (nHour !== hDate[hIdx]) {
resetMin()
resetMin();
}
// 如果当前“分”不为数组中当前值
if (nMin !== mDate[mIdx]) {
resetSecond()
resetSecond();
}
// 循环年份数组
goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
let YY = YDate[Yi]
let YY = YDate[Yi];
// 如果到达最大值时
if (nMonth > MDate[MDate.length - 1]) {
resetMonth()
continue
resetMonth();
continue;
}
// 循环月份数组
goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
// 赋值、方便后面运算
let MM = MDate[Mi];
MM = MM < 10 ? '0' + MM : MM
MM = MM < 10 ? '0' + MM : MM;
// 如果到达最大值时
if (nDay > DDate[DDate.length - 1]) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue
continue;
}
// 循环日期数组
goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
// 赋值、方便后面运算
let DD = DDate[Di]
let thisDD = DD < 10 ? '0' + DD : DD
let DD = DDate[Di];
let thisDD = DD < 10 ? '0' + DD : DD;
// 如果到达最大值时
if (nHour > hDate[hDate.length - 1]) {
resetHour()
resetHour();
if (Di === DDate.length - 1) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue goMonth
continue goMonth;
}
continue
continue;
}
// 判断日期的合法性，不合法的话也是跳出当前循环
if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true && dayRule.value !== 'workDay' && dayRule.value !== 'lastWeek' && dayRule.value !== 'lastDay') {
resetDay()
continue goMonth
resetDay();
continue goMonth;
}
// 如果日期规则中有值时
if (dayRule.value === 'lastDay') {
// 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
DD--
thisDD = DD < 10 ? '0' + DD : DD
DD--;
thisDD = DD < 10 ? '0' + DD : DD;
}
}
} else if (dayRule.value === 'workDay') {
// 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
DD--
thisDD = DD < 10 ? '0' + DD : DD
DD--;
thisDD = DD < 10 ? '0' + DD : DD;
}
}
// 获取达到条件的日期是星期X
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
// 当星期日时
if (thisWeek === 1) {
// 先找下一个日，并判断是否为月底
DD++
thisDD = DD < 10 ? '0' + DD : DD
DD++;
thisDD = DD < 10 ? '0' + DD : DD;
// 判断下一日已经不是合法日期
if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
DD -= 3
DD -= 3;
}
} else if (thisWeek === 7) {
// 当星期6时只需判断不是1号就可进行操作
if (dayRuleSup.value !== 1) {
DD--
DD--;
} else {
DD += 2
DD += 2;
}
}
} else if (dayRule.value === 'weekDay') {
// 如果指定了是星期几
// 获取当前日期是属于星期几
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
// 校验当前星期是否在星期池（dayRuleSup）中
if (dayRuleSup.value.indexOf(thisWeek) < 0) {
// 如果到达最大值时
if (Di === DDate.length - 1) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue goMonth
continue goMonth;
}
continue
continue;
}
} else if (dayRule.value === 'assWeek') {
// 如果指定了是第几周的星期几
// 获取每月1号是属于星期几
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
if (dayRuleSup.value[1] >= thisWeek) {
DD = (dayRuleSup.value[0] - 1) * 7 + dayRuleSup.value[1] - thisWeek + 1
DD = (dayRuleSup.value[0] - 1) * 7 + dayRuleSup.value[1] - thisWeek + 1;
} else {
DD = dayRuleSup.value[0] * 7 + dayRuleSup.value[1] - thisWeek + 1
DD = dayRuleSup.value[0] * 7 + dayRuleSup.value[1] - thisWeek + 1;
}
} else if (dayRule.value === 'lastWeek') {
// 如果指定了每月最后一个星期几
// 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
DD--
thisDD = DD < 10 ? '0' + DD : DD
DD--;
thisDD = DD < 10 ? '0' + DD : DD;
}
}
// 获取月末最后一天是星期几
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
// 找到要求中最近的那个星期几
if (dayRuleSup.value < thisWeek) {
DD -= thisWeek - dayRuleSup.value
DD -= thisWeek - dayRuleSup.value;
} else if (dayRuleSup.value > thisWeek) {
DD -= 7 - (dayRuleSup.value - thisWeek)
}
}
// 判断时间值是否小于10置换成“05”这种格式
DD = DD < 10 ? '0' + DD : DD
DD = DD < 10 ? '0' + DD : DD;
// 循环“时”数组
goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
let hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi]
// 如果到达最大值时
if (nMin > mDate[mDate.length - 1]) {
resetMin()
resetMin();
if (hi === hDate.length - 1) {
resetHour()
resetHour();
if (Di === DDate.length - 1) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue goMonth
continue goMonth;
}
continue goDay
continue goDay;
}
continue
continue;
}
// 循环"分"数组
goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi]
let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi];
// 如果到达最大值时
if (nSecond > sDate[sDate.length - 1]) {
resetSecond()
resetSecond();
if (mi === mDate.length - 1) {
resetMin()
resetMin();
if (hi === hDate.length - 1) {
resetHour()
resetHour();
if (Di === DDate.length - 1) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue goMonth
continue goMonth;
}
continue goDay
continue goDay;
}
continue goHour
continue goHour;
}
continue
continue;
}
// 循环"秒"数组
goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si]
let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si];
// 添加当前时间（时间合法性在日期循环时已经判断）
if (MM !== '00' && DD !== '00') {
resultArr.push(YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss)
nums++
nums++;
}
// 如果条数满了就退出循环
if (nums === 5) break goYear
if (nums === 5) break goYear;
// 如果到达最大值时
if (si === sDate.length - 1) {
resetSecond()
resetSecond();
if (mi === mDate.length - 1) {
resetMin()
resetMin();
if (hi === hDate.length - 1) {
resetHour()
resetHour();
if (Di === DDate.length - 1) {
resetDay()
resetDay();
if (Mi === MDate.length - 1) {
resetMonth()
continue goYear
resetMonth();
continue goYear;
}
continue goMonth
continue goMonth;
}
continue goDay
continue goDay;
}
continue goHour
continue goHour;
}
continue goMin
continue goMin;
}
} //goSecond
} //goMin
@@ -318,31 +318,31 @@ function expressionChange() {
}
// 判断100年内的结果条数
if (resultArr.length === 0) {
resultList.value = ['没有达到条件的结果！']
resultList.value = ['没有达到条件的结果！'];
} else {
resultList.value = resultArr
resultList.value = resultArr;
if (resultArr.length !== 5) {
resultList.value.push('最近100年内只有上面' + resultArr.length + '条结果！')
}
}
// 计算完成-显示结果
isShow.value = true
isShow.value = true;
}
// 用于计算某位数字在数组中的索引
function getIndex(arr, value) {
if (value <= arr[0] || value > arr[arr.length - 1]) {
return 0
return 0;
} else {
for (let i = 0; i < arr.length - 1; i++) {
if (value > arr[i] && value <= arr[i + 1]) {
return i + 1
return i + 1;
}
}
}
}
// 获取"年"数组
function getYearArr(rule, year) {
dateArr.value[5] = getOrderArr(year, year + 100)
dateArr.value[5] = getOrderArr(year, year + 100);
if (rule !== undefined) {
if (rule.indexOf('-') >= 0) {
dateArr.value[5] = getCycleArr(rule, year + 100, false)
@@ -355,7 +355,7 @@ function getYearArr(rule, year) {
}
// 获取"月"数组
function getMonthArr(rule) {
dateArr.value[4] = getOrderArr(1, 12)
dateArr.value[4] = getOrderArr(1, 12);
if (rule.indexOf('-') >= 0) {
dateArr.value[4] = getCycleArr(rule, 12, false)
} else if (rule.indexOf('/') >= 0) {
@@ -369,58 +369,58 @@ function getWeekArr(rule) {
// 只有当日期规则的两个值均为“”时则表达日期是有选项的
if (dayRule.value === '' && dayRuleSup.value === '') {
if (rule.indexOf('-') >= 0) {
dayRule.value = 'weekDay'
dayRule.value = 'weekDay';
dayRuleSup.value = getCycleArr(rule, 7, false)
} else if (rule.indexOf('#') >= 0) {
dayRule.value = 'assWeek'
let matchRule = rule.match(/[0-9]{1}/g)
dayRuleSup.value = [Number(matchRule[1]), Number(matchRule[0])]
dateArr.value[3] = [1]
dayRule.value = 'assWeek';
let matchRule = rule.match(/[0-9]{1}/g);
dayRuleSup.value = [Number(matchRule[1]), Number(matchRule[0])];
dateArr.value[3] = [1];
if (dayRuleSup.value[1] === 7) {
dayRuleSup.value[1] = 0
dayRuleSup.value[1] = 0;
}
} else if (rule.indexOf('L') >= 0) {
dayRule.value = 'lastWeek'
dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
dateArr.value[3] = [31]
dayRule.value = 'lastWeek';
dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0]);
dateArr.value[3] = [31];
if (dayRuleSup.value === 7) {
dayRuleSup.value = 0
dayRuleSup.value = 0;
}
} else if (rule !== '*' && rule !== '?') {
dayRule.value = 'weekDay'
dayRule.value = 'weekDay';
dayRuleSup.value = getAssignArr(rule)
}
}
}
// 获取"日"数组-少量为日期规则
function getDayArr(rule) {
dateArr.value[3] = getOrderArr(1, 31)
dayRule.value = ''
dayRuleSup.value = ''
dateArr.value[3] = getOrderArr(1, 31);
dayRule.value = '';
dayRuleSup.value = '';
if (rule.indexOf('-') >= 0) {
dateArr.value[3] = getCycleArr(rule, 31, false)
dayRuleSup.value = 'null'
dayRuleSup.value = 'null';
} else if (rule.indexOf('/') >= 0) {
dateArr.value[3] = getAverageArr(rule, 31)
dayRuleSup.value = 'null'
dayRuleSup.value = 'null';
} else if (rule.indexOf('W') >= 0) {
dayRule.value = 'workDay'
dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
dateArr.value[3] = [dayRuleSup.value]
dayRule.value = 'workDay';
dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0]);
dateArr.value[3] = [dayRuleSup.value];
} else if (rule.indexOf('L') >= 0) {
dayRule.value = 'lastDay'
dayRuleSup.value = 'null'
dateArr.value[3] = [31]
dayRule.value = 'lastDay';
dayRuleSup.value = 'null';
dateArr.value[3] = [31];
} else if (rule !== '*' && rule !== '?') {
dateArr.value[3] = getAssignArr(rule)
dayRuleSup.value = 'null'
dayRuleSup.value = 'null';
} else if (rule === '*') {
dayRuleSup.value = 'null'
dayRuleSup.value = 'null';
}
}
// 获取"时"数组
function getHourArr(rule) {
dateArr.value[2] = getOrderArr(0, 23)
dateArr.value[2] = getOrderArr(0, 23);
if (rule.indexOf('-') >= 0) {
dateArr.value[2] = getCycleArr(rule, 24, true)
} else if (rule.indexOf('/') >= 0) {
@@ -431,7 +431,7 @@ function getHourArr(rule) {
}
// 获取"分"数组
function getMinArr(rule) {
dateArr.value[1] = getOrderArr(0, 59)
dateArr.value[1] = getOrderArr(0, 59);
if (rule.indexOf('-') >= 0) {
dateArr.value[1] = getCycleArr(rule, 60, true)
} else if (rule.indexOf('/') >= 0) {
@@ -442,7 +442,7 @@ function getMinArr(rule) {
}
// 获取"秒"数组
function getSecondArr(rule) {
dateArr.value[0] = getOrderArr(0, 59)
dateArr.value[0] = getOrderArr(0, 59);
if (rule.indexOf('-') >= 0) {
dateArr.value[0] = getCycleArr(rule, 60, true)
} else if (rule.indexOf('/') >= 0) {
@@ -453,86 +453,86 @@ function getSecondArr(rule) {
}
// 根据传进来的min-max返回一个顺序的数组
function getOrderArr(min, max) {
let arr = []
let arr = [];
for (let i = min; i <= max; i++) {
arr.push(i)
arr.push(i);
}
return arr
return arr;
}
// 根据规则中指定的零散值返回一个数组
function getAssignArr(rule) {
let arr = []
let assiginArr = rule.split(',')
let arr = [];
let assiginArr = rule.split(',');
for (let i = 0; i < assiginArr.length; i++) {
arr[i] = Number(assiginArr[i])
}
arr.sort(compare)
return arr
return arr;
}
// 根据一定算术规则计算返回一个数组
function getAverageArr(rule, limit) {
let arr = []
let agArr = rule.split('/')
let min = Number(agArr[0])
let step = Number(agArr[1])
let arr = [];
let agArr = rule.split('/');
let min = Number(agArr[0]);
let step = Number(agArr[1]);
while (min <= limit) {
arr.push(min)
min += step
arr.push(min);
min += step;
}
return arr
return arr;
}
// 根据规则返回一个具有周期性的数组
function getCycleArr(rule, limit, status) {
// status--表示是否从0开始（则从1开始）
let arr = []
let cycleArr = rule.split('-')
let min = Number(cycleArr[0])
let max = Number(cycleArr[1])
let arr = [];
let cycleArr = rule.split('-');
let min = Number(cycleArr[0]);
let max = Number(cycleArr[1]);
if (min > max) {
max += limit
max += limit;
}
for (let i = min; i <= max; i++) {
let add = 0
let add = 0;
if (status === false && i % limit === 0) {
add = limit
add = limit;
}
arr.push(Math.round(i % limit + add))
}
arr.sort(compare)
return arr
return arr;
}
// 比较数字大小（用于Array.sort）
function compare(value1, value2) {
if (value2 - value1 > 0) {
return -1
return -1;
} else {
return 1
return 1;
}
}
// 格式化日期格式如：2017-9-19 18:04:33
function formatDate(value, type) {
// 计算日期相关值
let time = typeof value == 'number' ? new Date(value) : value
let Y = time.getFullYear()
let M = time.getMonth() + 1
let D = time.getDate()
let h = time.getHours()
let m = time.getMinutes()
let s = time.getSeconds()
let week = time.getDay()
let time = typeof value == 'number' ? new Date(value) : value;
let Y = time.getFullYear();
let M = time.getMonth() + 1;
let D = time.getDate();
let h = time.getHours();
let m = time.getMinutes();
let s = time.getSeconds();
let week = time.getDay();
// 如果传递了type的话
if (type === undefined) {
return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s)
return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
} else if (type === 'week') {
// 在quartz中 1为星期日
return week + 1
return week + 1;
}
}
// 检查日期是否存在
function checkDate(value) {
let time = new Date(value)
let time = new Date(value);
let format = formatDate(time)
return value === format
return value === format;
}
onMounted(() => {
expressionChange()

32
src/components/Crontab/year.vue
View File

@@ -61,24 +61,22 @@ const props = defineProps({
}
}
})
const fullYear = Number(new Date().getFullYear())
const maxFullYear = fullYear + 10
const fullYear = ref(0)
const maxFullYear = ref(0)
const radioValue = ref(1)
const cycle01 = ref(fullYear)
const cycle02 = ref(fullYear + 1)
const average01 = ref(fullYear)
const cycle01 = ref(0)
const cycle02 = ref(0)
const average01 = ref(0)
const average02 = ref(1)
const checkboxList = ref([])
const checkCopy = ref([fullYear])
const checkCopy = ref([])
const cycleTotal = computed(() => {
cycle01.value = props.check(cycle01.value, fullYear, maxFullYear - 1)
cycle02.value = props.check(cycle02.value, cycle01.value + 1, maxFullYear)
cycle01.value = props.check(cycle01.value, fullYear.value, maxFullYear.value - 1)
cycle02.value = props.check(cycle02.value, cycle01.value + 1, maxFullYear.value)
return cycle01.value + '-' + cycle02.value
})
const averageTotal = computed(() => {
average01.value = props.check(average01.value, fullYear, maxFullYear - 1)
average01.value = props.check(average01.value, fullYear.value, maxFullYear.value - 1)
average02.value = props.check(average02.value, 1, 10)
return average01.value + '/' + average02.value
})
@@ -99,8 +97,8 @@ function changeRadioValue(value) {
radioValue.value = 3
} else if (value.indexOf("/") > -1) {
const indexArr = value.split('/')
average01.value = Number(indexArr[0])
average02.value = Number(indexArr[1])
average01.value = Number(indexArr[1])
average02.value = Number(indexArr[0])
radioValue.value = 4
} else {
checkboxList.value = [...new Set(value.split(',').map(item => Number(item)))]
@@ -131,6 +129,14 @@ function onRadioChange() {
break
}
}
onMounted(() => {
fullYear.value = Number(new Date().getFullYear())
maxFullYear.value = fullYear.value + 10
cycle01.value = fullYear.value
cycle02.value = cycle01.value + 1
average01.value = fullYear.value
checkCopy.value = [fullYear.value]
})
</script>
<style lang="scss" scoped>

29
src/components/DictTag/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<template v-for="(item, index) in options">
<template v-if="isValueMatch(item.value)">
<template v-if="values.includes(item.value)">
<span
v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
:key="item.value"
@@ -26,7 +26,7 @@
<script setup>
// 记录未匹配的项
const unmatchArray = ref([])
const unmatchArray = ref([]);
const props = defineProps({
// 数据
@@ -45,38 +45,33 @@ const props = defineProps({
type: String,
default: ",",
}
})
});
const values = computed(() => {
if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value]
return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
})
if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [];
return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
});
const unmatch = computed(() => {
unmatchArray.value = []
unmatchArray.value = [];
// 没有value不显示
if (props.value === null || typeof props.value === 'undefined' || props.value === '' || !Array.isArray(props.options) || props.options.length === 0) return false
// 传入值为数组
let unmatch = false // 添加一个标志来判断是否有未匹配项
values.value.forEach(item => {
if (!props.options.some(v => v.value == item)) {
if (!props.options.some(v => v.value === item)) {
unmatchArray.value.push(item)
unmatch = true // 如果有未匹配项，将标志设置为true
}
})
return unmatch // 返回标志的值
})
});
function handleArray(array) {
if (array.length === 0) return ""
if (array.length === 0) return "";
return array.reduce((pre, cur) => {
return pre + " " + cur
})
}
function isValueMatch(itemValue) {
return values.value.some(val => val == itemValue)
return pre + " " + cur;
});
}
</script>

120
src/components/Editor/index.vue
View File

@@ -27,18 +27,17 @@
</template>
<script setup>
import axios from 'axios'
import { QuillEditor } from "@vueup/vue-quill"
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import { getToken } from "@/utils/auth"
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance()
const { proxy } = getCurrentInstance();
const quillEditorRef = ref()
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload") // 上传的图片服务器地址
const quillEditorRef = ref();
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const headers = ref({
Authorization: "Bearer " + getToken()
})
});
const props = defineProps({
/* 编辑器的内容 */
@@ -69,8 +68,12 @@ const props = defineProps({
type: {
type: String,
default: "url",
},
showToolbar:{
type: Boolean,
default: true,
}
})
});
const options = ref({
theme: "snow",
@@ -91,62 +94,74 @@ const options = ref({
["link", "image", "video"] // 链接、图片、视频
],
},
placeholder: "请输入内容",
placeholder: "",
readOnly: props.readOnly
})
});
const styles = computed(() => {
let style = {}
let style = {};
if (props.minHeight) {
style.minHeight = `${props.minHeight}px`
style.minHeight = `${props.minHeight}px`;
}
if (props.height) {
style.height = `${props.height}px`
style.height = `${props.height}px`;
}
return style
})
return style;
});
const content = ref("")
const content = ref("");
watch(() => props.modelValue, (v) => {
if (v !== content.value) {
content.value = v == undefined ? "<p></p>" : v
content.value = v == undefined ? "<p></p>" : v;
}
}, { immediate: true })
}, { immediate: true });
watch(() => props.readOnly, (v) => {
if(props.readOnly){
options.value.readOnly = true
}
}, { immediate: true });
watch(() => props.showToolbar, (v) => {
if(!props.showToolbar){
options.value.modules.toolbar = false
}
}, { immediate: true });
// 如果设置了上传地址则自定义图片上传事件
onMounted(() => {
if (props.type == 'url') {
let quill = quillEditorRef.value.getQuill()
let toolbar = quill.getModule("toolbar")
if (props.type == 'url' && props.showToolbar) {
let quill = quillEditorRef.value.getQuill();
let toolbar = quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
if (value) {
proxy.$refs.uploadRef.click()
proxy.$refs.uploadRef.click();
} else {
quill.format("image", false)
quill.format("image", false);
}
})
quill.root.addEventListener('paste', handlePasteCapture, true)
});
}
})
});
// 上传前校检格式和大小
function handleBeforeUpload(file) {
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]
const isJPG = type.includes(file.type)
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
const isJPG = type.includes(file.type);
//检验文件格式
if (!isJPG) {
proxy.$modal.msgError(`图片格式错误!`)
return false
proxy.$modal.msgError(`图片格式错误!`);
return false;
}
// 校检文件大小
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
return false
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
return true
return true;
}
// 上传成功处理
@@ -154,44 +169,21 @@ function handleUploadSuccess(res, file) {
// 如果上传成功
if (res.code == 200) {
// 获取富文本实例
let quill = toRaw(quillEditorRef.value).getQuill()
let quill = toRaw(quillEditorRef.value).getQuill();
// 获取光标位置
let length = quill.selection.savedRange.index
let length = quill.selection.savedRange.index;
// 插入图片，res.url为服务器返回的图片链接地址
quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName)
quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
// 调整光标到最后
quill.setSelection(length + 1)
quill.setSelection(length + 1);
} else {
proxy.$modal.msgError("图片插入失败")
proxy.$modal.msgError("图片插入失败");
}
}
// 上传失败处理
function handleUploadError() {
proxy.$modal.msgError("图片插入失败")
}
// 复制粘贴图片处理
function handlePasteCapture(e) {
const clipboard = e.clipboardData || window.clipboardData
if (clipboard && clipboard.items) {
for (let i = 0; i < clipboard.items.length; i++) {
const item = clipboard.items[i]
if (item.type.indexOf('image') !== -1) {
e.preventDefault()
const file = item.getAsFile()
insertImage(file)
}
}
}
}
function insertImage(file) {
const formData = new FormData()
formData.append("file", file)
axios.post(uploadUrl.value, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: headers.value.Authorization } }).then(res => {
handleUploadSuccess(res.data)
})
proxy.$modal.msgError("图片插入失败");
}
</script>

154
src/components/FileUpload/index.vue
View File

@@ -5,7 +5,6 @@
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:data="data"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
@@ -27,13 +26,13 @@
的文件
</div>
<!-- 文件列表 -->
<transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;删除</el-link>
<el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>
</div>
</li>
</transition-group>
@@ -41,20 +40,10 @@
</template>
<script setup>
import { getToken } from "@/utils/auth"
import Sortable from 'sortablejs'
import { getToken } from "@/utils/auth";
const props = defineProps({
modelValue: [String, Object, Array],
// 上传接口地址
action: {
type: String,
default: "/common/upload"
},
// 上传携带的参数
data: {
type: Object
},
// 数量限制
limit: {
type: Number,
@@ -79,114 +68,108 @@ const props = defineProps({
disabled: {
type: Boolean,
default: false
},
// 拖动排序
drag: {
type: Boolean,
default: true
}
})
});
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const number = ref(0)
const uploadList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传文件服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() })
const fileList = ref([])
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });
const fileList = ref([]);
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
)
);
watch(() => props.modelValue, val => {
if (val) {
let temp = 1
let temp = 1;
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',')
const list = Array.isArray(val) ? val : props.modelValue.split(',');
// 然后将数组转为对象数组
fileList.value = list.map(item => {
if (typeof item === "string") {
item = { name: item, url: item }
item = { name: item, url: item };
}
item.uid = item.uid || new Date().getTime() + temp++
return item
})
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
fileList.value = []
return []
fileList.value = [];
return [];
}
},{ deep: true, immediate: true })
},{ deep: true, immediate: true });
// 上传前校检格式和大小
function handleBeforeUpload(file) {
// 校检文件类型
if (props.fileType.length) {
const fileName = file.name.split('.')
const fileExt = fileName[fileName.length - 1]
const isTypeOk = props.fileType.indexOf(fileExt) >= 0
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`)
return false
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件名是否包含特殊字符
if (file.name.includes(',')) {
proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
return false
proxy.$modal.msgError('文件名不正确，不能包含英文逗号!');
return false;
}
// 校检文件大小
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
return false
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
proxy.$modal.loading("正在上传文件，请稍候...")
number.value++
return true
proxy.$modal.loading("正在上传文件，请稍候...");
number.value++;
return true;
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
}
// 上传失败
function handleUploadError(err) {
proxy.$modal.msgError("上传文件失败")
proxy.$modal.closeLoading()
proxy.$modal.msgError("上传文件失败");
}
// 上传成功回调
function handleUploadSuccess(res, file) {
if (res.code === 200) {
uploadList.value.push({ name: res.fileName, url: res.fileName })
uploadedSuccessfully()
uploadList.value.push({ name: res.fileName, url: res.fileName });
uploadedSuccessfully();
} else {
number.value--
proxy.$modal.closeLoading()
proxy.$modal.msgError(res.msg)
proxy.$refs.fileUpload.handleRemove(file)
uploadedSuccessfully()
number.value--;
proxy.$modal.closeLoading();
proxy.$modal.msgError(res.msg);
proxy.$refs.fileUpload.handleRemove(file);
uploadedSuccessfully();
}
}
// 删除文件
function handleDelete(index) {
fileList.value.splice(index, 1)
emit("update:modelValue", listToString(fileList.value))
fileList.value.splice(index, 1);
emit("update:modelValue", listToString(fileList.value));
}
// 上传结束处理
function uploadedSuccessfully() {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
uploadList.value = []
number.value = 0
emit("update:modelValue", listToString(fileList.value))
proxy.$modal.closeLoading()
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
number.value = 0;
emit("update:modelValue", listToString(fileList.value));
proxy.$modal.closeLoading();
}
}
@@ -194,46 +177,26 @@ function uploadedSuccessfully() {
function getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1)
return name.slice(name.lastIndexOf("/") + 1);
} else {
return name
return name;
}
}
// 对象转成指定字符串分隔
function listToString(list, separator) {
let strs = ""
separator = separator || ","
let strs = "";
separator = separator || ",";
for (let i in list) {
if (list[i].url) {
strs += list[i].url + separator
strs += list[i].url + separator;
}
}
return strs != '' ? strs.substr(0, strs.length - 1) : ''
return strs != '' ? strs.substr(0, strs.length - 1) : '';
}
// 初始化拖拽排序
onMounted(() => {
if (props.drag && !props.disabled) {
nextTick(() => {
const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
Sortable.create(element, {
ghostClass: 'file-upload-darg',
onEnd: (evt) => {
const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
fileList.value.splice(evt.newIndex, 0, movedItem)
emit('update:modelValue', listToString(fileList.value))
}
})
})
}
})
</script>
<style scoped lang="scss">
.file-upload-darg {
opacity: 0.5;
background: #c8ebfb;
}
.upload-file-uploader {
margin-bottom: 5px;
}
@@ -242,7 +205,6 @@ onMounted(() => {
line-height: 2;
margin-bottom: 10px;
position: relative;
transition: none !important;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;

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

@@ -24,7 +24,7 @@ defineProps({
const emit = defineEmits()
const toggleClick = () => {
emit('toggleClick')
emit('toggleClick');
}
</script>

201
src/components/HeaderSearch/index.vue
View File

@@ -1,93 +1,58 @@
<template>
<div class="header-search">
<div :class="{ 'show': show }" class="header-search">
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
<el-dialog
v-model="show"
width="600"
@close="close"
:show-close="false"
append-to-body
>
<el-input
v-model="search"
<el-select
ref="headerSearchSelectRef"
size="large"
@input="querySearch"
prefix-icon="Search"
placeholder="菜单搜索，支持标题、URL模糊查询"
clearable
@keyup.enter="selectActiveResult"
@keydown.up.prevent="navigateResult('up')"
@keydown.down.prevent="navigateResult('down')"
v-model="search"
:remote-method="querySearch"
filterable
default-first-option
remote
placeholder="Search"
class="header-search-select"
@change="change"
>
</el-input>
<div class="result-wrap">
<el-scrollbar>
<div class="search-item" tabindex="1" v-for="(item, index) in options" :key="item.path" :style="activeStyle(index)" @mouseenter="activeIndex = index" @mouseleave="activeIndex = -1">
<div class="left">
<svg-icon class="menu-icon" :icon-class="item.icon" />
</div>
<div class="search-info" @click="change(item)">
<div class="menu-title">
{{ item.title.join(" / ") }}
</div>
<div class="menu-path">
{{ item.path }}
</div>
</div>
<svg-icon icon-class="enter" v-show="index === activeIndex"/>
</div>
</el-scrollbar>
</div>
</el-dialog>
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
</el-select>
</div>
</template>
<script setup>
import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi'
import { getNormalPath } from '@/utils/manage'
import { isHttp } from '@/utils/validate'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const search = ref('')
const options = ref([])
const searchPool = ref([])
const activeIndex = ref(-1)
const show = ref(false)
const fuse = ref(undefined)
const headerSearchSelectRef = ref(null)
const router = useRouter()
const theme = computed(() => useSettingsStore().theme)
const routes = computed(() => usePermissionStore().defaultRoutes)
const search = ref('');
const options = ref([]);
const searchPool = ref([]);
const show = ref(false);
const fuse = ref(undefined);
const headerSearchSelectRef = ref(null);
const router = useRouter();
const routes = computed(() => usePermissionStore().defaultRoutes);
function click() {
show.value = !show.value
if (show.value) {
headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
options.value = searchPool.value
}
}
};
function close() {
headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
search.value = ''
options.value = []
show.value = false
activeIndex.value = -1
}
function change(val) {
const path = val.path
const query = val.query
const path = val.path;
const query = val.query;
if (isHttp(path)) {
// http(s):// 路径新窗口打开
const pindex = path.indexOf("http")
window.open(path.substr(pindex, path.length), "_blank")
const pindex = path.indexOf("http");
window.open(path.substr(pindex, path.length), "_blank");
} else {
if (query) {
router.push({ path: path, query: JSON.parse(query) })
router.push({ path: path, query: JSON.parse(query) });
} else {
router.push(path)
}
@@ -99,7 +64,6 @@ function change(val) {
show.value = false
})
}
function initFuse(list) {
fuse.value = new Fuse(list, {
shouldSort: true,
@@ -116,7 +80,6 @@ function initFuse(list) {
}]
})
}
// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
function generateRoutes(routes, basePath = '', prefixTitle = []) {
@@ -125,17 +88,16 @@ function generateRoutes(routes, basePath = '', prefixTitle = []) {
for (const r of routes) {
// skip hidden router
if (r.hidden) { continue }
const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path
const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
const data = {
path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
title: [...prefixTitle],
icon: ''
title: [...prefixTitle]
}
if (r.meta && r.meta.title) {
data.title = [...data.title, r.meta.title]
data.icon = r.meta.icon
if (r.redirect !== "noRedirect") {
if (r.redirect !== 'noRedirect') {
// only push the routes with title
// special case: need to exclude parent router without redirect
res.push(data)
@@ -155,42 +117,30 @@ function generateRoutes(routes, basePath = '', prefixTitle = []) {
}
return res
}
function querySearch(query) {
activeIndex.value = -1
if (query !== '') {
options.value = fuse.value.search(query).map((item) => item.item) ?? searchPool.value
options.value = fuse.value.search(query)
} else {
options.value = searchPool.value
}
}
function activeStyle(index) {
if (index !== activeIndex.value) return {}
return {
"background-color": theme.value,
"color": "#fff"
}
}
function navigateResult(direction) {
if (direction === "up") {
activeIndex.value = activeIndex.value <= 0 ? options.value.length - 1 : activeIndex.value - 1
} else if (direction === "down") {
activeIndex.value = activeIndex.value >= options.value.length - 1 ? 0 : activeIndex.value + 1
}
}
function selectActiveResult() {
if (options.value.length > 0 && activeIndex.value >= 0) {
change(options.value[activeIndex.value])
options.value = []
}
}
onMounted(() => {
searchPool.value = generateRoutes(routes.value);
})
watchEffect(() => {
searchPool.value = generateRoutes(routes.value)
})
watch(show, (value) => {
if (value) {
document.body.addEventListener('click', close)
} else {
document.body.removeEventListener('click', close)
}
})
watch(searchPool, (list) => {
initFuse(list)
})
@@ -198,55 +148,40 @@ watch(searchPool, (list) => {
<style lang='scss' scoped>
.header-search {
font-size: 0 !important;
.search-icon {
cursor: pointer;
font-size: 18px;
vertical-align: middle;
}
}
.result-wrap {
height: 280px;
margin: 6px 0;
.header-search-select {
font-size: 18px;
transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
.search-item {
display: flex;
height: 48px;
align-items: center;
padding-right: 10px;
.left {
width: 60px;
text-align: center;
.menu-icon {
width: 18px;
height: 18px;
:deep(.el-input__inner) {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
}
}
.search-info {
padding-left: 5px;
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
.menu-title,
.menu-path {
height: 20px;
&.show {
.header-search-select {
width: 210px;
margin-left: 10px;
}
.menu-path {
color: #ccc;
font-size: 10px;
}
}
}
.search-item:hover {
cursor: pointer;
}
}
</style>

8
src/components/IconSelect/index.vue
View File

@@ -30,11 +30,11 @@ const props = defineProps({
activeIcon: {
type: String
}
})
});
const iconName = ref('')
const iconList = ref(icons)
const emit = defineEmits(['selected'])
const iconName = ref('');
const iconList = ref(icons);
const emit = defineEmits(['selected']);
function filterIcons() {
iconList.value = icons

6
src/components/IconSelect/requireIcons.js
View File

@@ -1,8 +1,8 @@
let icons = []
const modules = import.meta.glob('./../../assets/icons/svg/*.svg')
const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
for (const path in modules) {
const p = path.split('assets/icons/svg/')[1].split('.svg')[0]
icons.push(p)
const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
icons.push(p);
}
export default icons

34
src/components/ImagePreview/index.vue
View File

@@ -15,7 +15,7 @@
</template>
<script setup>
import { isExternal } from "@/utils/validate"
import { isExternal } from "@/utils/validate";
const props = defineProps({
src: {
@@ -30,41 +30,41 @@ const props = defineProps({
type: [Number, String],
default: ""
}
})
});
const realSrc = computed(() => {
if (!props.src) {
return
return;
}
let real_src = props.src.split(",")[0]
let real_src = props.src.split(",")[0];
if (isExternal(real_src)) {
return real_src
return real_src;
}
return import.meta.env.VITE_APP_BASE_API + real_src
})
return import.meta.env.VITE_APP_BASE_API + real_src;
});
const realSrcList = computed(() => {
if (!props.src) {
return
return;
}
let real_src_list = props.src.split(",")
let srcList = []
let real_src_list = props.src.split(",");
let srcList = [];
real_src_list.forEach(item => {
if (isExternal(item)) {
return srcList.push(item)
return srcList.push(item);
}
return srcList.push(import.meta.env.VITE_APP_BASE_API + item)
})
return srcList
})
return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
});
return srcList;
});
const realWidth = computed(() =>
typeof props.width == "string" ? props.width : `${props.width}px`
)
);
const realHeight = computed(() =>
typeof props.height == "string" ? props.height : `${props.height}px`
)
);
</script>
<style lang="scss" scoped>

178
src/components/ImageUpload/index.vue
View File

@@ -2,12 +2,10 @@
<div class="component-upload-image">
<el-upload
multiple
:disabled="disabled"
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:data="data"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
@@ -22,7 +20,7 @@
<el-icon class="avatar-uploader-icon"><plus /></el-icon>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip && !disabled">
<div class="el-upload__tip" v-if="showTip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -48,202 +46,166 @@
</template>
<script setup>
import { getToken } from "@/utils/auth"
import { isExternal } from "@/utils/validate"
import Sortable from 'sortablejs'
import { getToken } from "@/utils/auth";
import { isExternal } from "@/utils/validate";
const props = defineProps({
modelValue: [String, Object, Array],
// 上传接口地址
action: {
type: String,
default: "/common/upload"
},
// 上传携带的参数
data: {
type: Object
},
// 图片数量限制
limit: {
type: Number,
default: 5
default: 5,
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"]
default: () => ["png", "jpg", "jpeg"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
},
// 禁用组件（仅查看图片）
disabled: {
type: Boolean,
default: false
},
// 拖动排序
drag: {
type: Boolean,
default: true
}
})
});
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const number = ref(0)
const uploadList = ref([])
const dialogImageUrl = ref("")
const dialogVisible = ref(false)
const baseUrl = import.meta.env.VITE_APP_BASE_API
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传的图片服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() })
const fileList = ref([])
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const number = ref(0);
const uploadList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });
const fileList = ref([]);
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
)
);
watch(() => props.modelValue, val => {
if (val) {
// 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(",")
const list = Array.isArray(val) ? val : props.modelValue.split(",");
// 然后将数组转为对象数组
fileList.value = list.map(item => {
if (typeof item === "string") {
if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
item = { name: baseUrl + item, url: baseUrl + item }
item = { name: baseUrl + item, url: baseUrl + item };
} else {
item = { name: item, url: item }
item = { name: item, url: item };
}
}
return item
})
return item;
});
} else {
fileList.value = []
return []
fileList.value = [];
return [];
}
},{ deep: true, immediate: true })
},{ deep: true, immediate: true });
// 上传前loading加载
function handleBeforeUpload(file) {
let isImg = false
let isImg = false;
if (props.fileType.length) {
let fileExtension = ""
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1)
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
isImg = props.fileType.some(type => {
if (file.type.indexOf(type) > -1) return true
if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false
})
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
} else {
isImg = file.type.indexOf("image") > -1
isImg = file.type.indexOf("image") > -1;
}
if (!isImg) {
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`)
return false
proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`);
return false;
}
if (file.name.includes(',')) {
proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
return false
proxy.$modal.msgError('文件名不正确，不能包含英文逗号!');
return false;
}
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
return false
proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
proxy.$modal.loading("正在上传图片，请稍候...")
number.value++
proxy.$modal.loading("正在上传图片，请稍候...");
number.value++;
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
}
// 上传成功回调
function handleUploadSuccess(res, file) {
if (res.code === 200) {
uploadList.value.push({ name: res.fileName, url: res.fileName })
uploadedSuccessfully()
uploadList.value.push({ name: res.fileName, url: res.fileName });
uploadedSuccessfully();
} else {
number.value--
proxy.$modal.closeLoading()
proxy.$modal.msgError(res.msg)
proxy.$refs.imageUpload.handleRemove(file)
uploadedSuccessfully()
number.value--;
proxy.$modal.closeLoading();
proxy.$modal.msgError(res.msg);
proxy.$refs.imageUpload.handleRemove(file);
uploadedSuccessfully();
}
}
// 删除图片
function handleDelete(file) {
const findex = fileList.value.map(f => f.name).indexOf(file.name)
const findex = fileList.value.map(f => f.name).indexOf(file.name);
if (findex > -1 && uploadList.value.length === number.value) {
fileList.value.splice(findex, 1)
emit("update:modelValue", listToString(fileList.value))
return false
fileList.value.splice(findex, 1);
emit("update:modelValue", listToString(fileList.value));
return false;
}
}
// 上传结束处理
function uploadedSuccessfully() {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
uploadList.value = []
number.value = 0
emit("update:modelValue", listToString(fileList.value))
proxy.$modal.closeLoading()
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
number.value = 0;
emit("update:modelValue", listToString(fileList.value));
proxy.$modal.closeLoading();
}
}
// 上传失败
function handleUploadError() {
proxy.$modal.msgError("上传图片失败")
proxy.$modal.closeLoading()
proxy.$modal.msgError("上传图片失败");
proxy.$modal.closeLoading();
}
// 预览
function handlePictureCardPreview(file) {
dialogImageUrl.value = file.url
dialogVisible.value = true
dialogImageUrl.value = file.url;
dialogVisible.value = true;
}
// 对象转成指定字符串分隔
function listToString(list, separator) {
let strs = ""
separator = separator || ","
let strs = "";
separator = separator || ",";
for (let i in list) {
if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
strs += list[i].url.replace(baseUrl, "") + separator
strs += list[i].url.replace(baseUrl, "") + separator;
}
}
return strs != "" ? strs.substr(0, strs.length - 1) : ""
return strs != "" ? strs.substr(0, strs.length - 1) : "";
}
// 初始化拖拽排序
onMounted(() => {
if (props.drag && !props.disabled) {
nextTick(() => {
const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
Sortable.create(element, {
onEnd: (evt) => {
const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
fileList.value.splice(evt.newIndex, 0, movedItem)
emit('update:modelValue', listToString(fileList.value))
}
})
})
}
})
</script>
<style scoped lang="scss">
@@ -251,8 +213,4 @@ onMounted(() => {
:deep(.hide .el-upload--picture-card) {
display: none;
}
:deep(.el-upload.el-upload--picture-card.is-disabled) {
display: none !important;
}
</style>

5
src/components/Pagination/index.vue
View File

@@ -59,7 +59,7 @@ const props = defineProps({
}
})
const emit = defineEmits()
const emit = defineEmits();
const currentPage = computed({
get() {
return props.page
@@ -76,7 +76,6 @@ const pageSize = computed({
emit('update:limit', val)
}
})
function handleSizeChange(val) {
if (currentPage.value * val > props.total) {
currentPage.value = 1
@@ -86,13 +85,13 @@ function handleSizeChange(val) {
scrollTo(0, 800)
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize.value })
if (props.autoScroll) {
scrollTo(0, 800)
}
}
</script>
<style scoped>

105
src/components/RightToolbar/index.vue
View File

@@ -7,20 +7,15 @@
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button circle icon="Refresh" @click="refresh()" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="Object.keys(columns).length > 0">
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
<el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
<el-button circle icon="Menu" />
<template #dropdown>
<el-dropdown-menu>
<!-- 全选/反选 按钮 -->
<template v-for="item in columns" :key="item.key">
<el-dropdown-item>
<el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 列展示 </el-checkbox>
</el-dropdown-item>
<div class="check-line"></div>
<template v-for="(item, key) in columns" :key="item.key">
<el-dropdown-item>
<el-checkbox v-model="item.visible" @change="checkboxChange($event, key)" :label="item.label" />
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
</el-dropdown-item>
</template>
</el-dropdown-menu>
@@ -32,7 +27,7 @@
<el-transfer
:titles="['显示', '隐藏']"
v-model="value"
:data="transferData"
:data="columns"
@change="dataChange"
></el-transfer>
</el-dialog>
@@ -44,119 +39,83 @@ const props = defineProps({
/* 是否显示检索条件 */
showSearch: {
type: Boolean,
default: true
default: true,
},
/* 显隐列信息（数组格式、对象格式） */
/* 显隐列信息 */
columns: {
type: [Array, Object],
default: () => ({})
type: Array,
},
/* 是否显示检索图标 */
search: {
type: Boolean,
default: true
default: true,
},
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
showColumnsType: {
type: String,
default: "checkbox"
default: "checkbox",
},
/* 右外边距 */
gutter: {
type: Number,
default: 10
default: 10,
},
})
const emits = defineEmits(['update:showSearch', 'queryTable'])
const emits = defineEmits(['update:showSearch', 'queryTable']);
// 显隐数据
const value = ref([])
const value = ref([]);
// 弹出层标题
const title = ref("显示/隐藏")
const title = ref("显示/隐藏");
// 是否显示弹出层
const open = ref(false)
const open = ref(false);
const style = computed(() => {
const ret = {}
const ret = {};
if (props.gutter) {
ret.marginRight = `${props.gutter / 2}px`
ret.marginRight = `${props.gutter / 2}px`;
}
return ret
})
// 是否全选/半选 状态
const isChecked = computed({
get: () => Array.isArray(props.columns) ? props.columns.every(col => col.visible) : Object.values(props.columns).every((col) => col.visible),
set: () => {}
})
const isIndeterminate = computed(() => Array.isArray(props.columns) ? props.columns.some((col) => col.visible) && !isChecked.value : Object.values(props.columns).some((col) => col.visible) && !isChecked.value)
const transferData = computed(() => Array.isArray(props.columns) ? props.columns.map((item, index) => ({ key: index, label: item.label })) : Object.keys(props.columns).map((key, index) => ({ key: index, label: props.columns[key].label })))
return ret;
});
// 搜索
function toggleSearch() {
emits("update:showSearch", !props.showSearch)
emits("update:showSearch", !props.showSearch);
}
// 刷新
function refresh() {
emits("queryTable")
emits("queryTable");
}
// 右侧列表元素变化
function dataChange(data) {
if (Array.isArray(props.columns)) {
for (let item in props.columns) {
const key = props.columns[item].key
props.columns[item].visible = !data.includes(key)
}
} else {
Object.keys(props.columns).forEach((key, index) => {
props.columns[key].visible = !data.includes(index)
})
const key = props.columns[item].key;
props.columns[item].visible = !data.includes(key);
}
}
// 打开显隐列dialog
function showColumn() {
open.value = true
open.value = true;
}
if (props.showColumnsType == "transfer") {
// transfer穿梭显隐列初始默认隐藏列
if (Array.isArray(props.columns)) {
if (props.showColumnsType == 'transfer') {
// 显隐列初始默认隐藏列
for (let item in props.columns) {
if (props.columns[item].visible === false) {
value.value.push(parseInt(item))
value.value.push(parseInt(item));
}
}
} else {
Object.keys(props.columns).forEach((key, index) => {
if (props.columns[key].visible === false) {
value.value.push(index)
}
})
}
}
// 单勾选
function checkboxChange(event, key) {
if (Array.isArray(props.columns)) {
props.columns.filter(item => item.key == key)[0].visible = event
} else {
props.columns[key].visible = event
}
// 勾选
function checkboxChange(event, label) {
props.columns.filter(item => item.label == label)[0].visible = event;
}
// 切换全选/反选
function toggleCheckAll() {
const newValue = !isChecked.value
if (Array.isArray(props.columns)) {
props.columns.forEach((col) => (col.visible = newValue))
} else {
Object.values(props.columns).forEach((col) => (col.visible = newValue))
}
}
</script>
<style lang='scss' scoped>
@@ -172,10 +131,4 @@ function toggleCheckAll() {
line-height: 30px;
padding: 0 17px;
}
.check-line {
width: 90%;
height: 1px;
background-color: #ccc;
margin: 3px auto;
}
</style>

13
src/components/RuoYi/Doc/index.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<svg-icon icon-class="question" @click="goto" />
</div>
</template>
<script setup>
const url = ref('http://doc.ruoyi.vip/ruoyi-vue')
function goto() {
window.open(url.value)
}
</script>

13
src/components/RuoYi/Git/index.vue
View File

@@ -1,13 +0,0 @@
<template>
<div>
<svg-icon icon-class="github" @click="goto" />
</div>
</template>
<script setup>
const url = ref('https://gitee.com/y_project/RuoYi-Vue')
function goto() {
window.open(url.value)
}
</script>

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

@@ -7,7 +7,7 @@
<script setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
const { isFullscreen, enter, exit, toggle } = useFullscreen();
</script>
<style lang='scss' scoped>

20
src/components/SizeSelect/index.vue
View File

@@ -16,23 +16,23 @@
</template>
<script setup>
import useAppStore from "@/store/modules/app"
import useAppStore from "@/store/modules/app";
const appStore = useAppStore()
const size = computed(() => appStore.size)
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const appStore = useAppStore();
const size = computed(() => appStore.size);
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const sizeOptions = ref([
{ label: "较大", value: "large" },
{ label: "默认", value: "default" },
{ label: "稍小", value: "small" },
])
]);
function handleSetSize(size) {
proxy.$modal.loading("正在设置布局大小，请稍候...")
appStore.setSize(size)
setTimeout("window.location.reload()", 1000)
proxy.$modal.loading("正在设置布局大小，请稍候...");
appStore.setSize(size);
setTimeout("window.location.reload()", 1000);
}
</script>

8
src/components/SvgIcon/svgicon.js
View File

@@ -3,8 +3,8 @@ import * as components from '@element-plus/icons-vue'
export default {
install: (app) => {
for (const key in components) {
const componentConfig = components[key]
app.component(componentConfig.name, componentConfig)
const componentConfig = components[key];
app.component(componentConfig.name, componentConfig);
}
}
}
},
};

97
src/components/TopNav/index.vue
View File

@@ -40,127 +40,126 @@ import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
// 顶部栏初始数
const visibleNumber = ref(null)
const visibleNumber = ref(null);
// 当前激活菜单的 index
const currentIndex = ref(null)
const currentIndex = ref(null);
// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile']
const hideList = ['/index', '/user/profile'];
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute()
const router = useRouter()
const route = useRoute();
const router = useRouter();
// 主题颜色
const theme = computed(() => settingsStore.theme)
const theme = computed(() => settingsStore.theme);
// 所有的路由信息
const routers = computed(() => permissionStore.topbarRouters)
const routers = computed(() => permissionStore.topbarRouters);
// 顶部显示菜单
const topMenus = computed(() => {
let topMenus = []
let topMenus = [];
routers.value.map((menu) => {
if (menu.hidden !== true) {
// 兼容顶部栏一级菜单内部跳转
if (menu.path === '/' && menu.children) {
topMenus.push(menu.children[0])
if (menu.path === "/") {
topMenus.push(menu.children[0]);
} else {
topMenus.push(menu)
topMenus.push(menu);
}
}
})
return topMenus
return topMenus;
})
// 设置子路由
const childrenMenus = computed(() => {
let childrenMenus = []
let childrenMenus = [];
routers.value.map((router) => {
for (let item in router.children) {
if (router.children[item].parentPath === undefined) {
if(router.path === "/") {
router.children[item].path = "/" + router.children[item].path
router.children[item].path = "/" + router.children[item].path;
} else {
if(!isHttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path
router.children[item].path = router.path + "/" + router.children[item].path;
}
}
router.children[item].parentPath = router.path
router.children[item].parentPath = router.path;
}
childrenMenus.push(router.children[item])
childrenMenus.push(router.children[item]);
}
})
return constantRoutes.concat(childrenMenus)
return constantRoutes.concat(childrenMenus);
})
// 默认激活的菜单
const activeMenu = computed(() => {
const path = route.path
let activePath = path
const path = route.path;
let activePath = path;
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
const tmpPath = path.substring(1, path.length)
const tmpPath = path.substring(1, path.length);
if (!route.meta.link) {
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
appStore.toggleSideBarHide(false)
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
appStore.toggleSideBarHide(false);
}
} else if(!route.children) {
activePath = path
appStore.toggleSideBarHide(true)
activePath = path;
appStore.toggleSideBarHide(true);
}
activeRoutes(activePath)
return activePath
activeRoutes(activePath);
return activePath;
})
function setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3
visibleNumber.value = parseInt(width / 85)
const width = document.body.getBoundingClientRect().width / 3;
visibleNumber.value = parseInt(width / 85);
}
function handleSelect(key, keyPath) {
currentIndex.value = key
const route = routers.value.find(item => item.path === key)
currentIndex.value = key;
const route = routers.value.find(item => item.path === key);
if (isHttp(key)) {
// http(s):// 路径新窗口打开
window.open(key, "_blank")
window.open(key, "_blank");
} else if (!route || !route.children) {
// 没有子路由路径内部打开
const routeMenu = childrenMenus.value.find(item => item.path === key)
const routeMenu = childrenMenus.value.find(item => item.path === key);
if (routeMenu && routeMenu.query) {
let query = JSON.parse(routeMenu.query)
router.push({ path: key, query: query })
let query = JSON.parse(routeMenu.query);
router.push({ path: key, query: query });
} else {
router.push({ path: key })
router.push({ path: key });
}
appStore.toggleSideBarHide(true)
appStore.toggleSideBarHide(true);
} else {
// 显示左侧联动菜单
activeRoutes(key)
appStore.toggleSideBarHide(false)
activeRoutes(key);
appStore.toggleSideBarHide(false);
}
}
function activeRoutes(key) {
let routes = []
let routes = [];
if (childrenMenus.value && childrenMenus.value.length > 0) {
childrenMenus.value.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) {
routes.push(item)
routes.push(item);
}
})
});
}
if(routes.length > 0) {
permissionStore.setSidebarRouters(routes)
permissionStore.setSidebarRouters(routes);
} else {
appStore.toggleSideBarHide(true)
appStore.toggleSideBarHide(true);
}
return routes
return routes;
}
onMounted(() => {
window.addEventListener('resize', setVisibleNumber)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', setVisibleNumber)
})
@@ -175,7 +174,7 @@ onMounted(() => {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #303133 !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
@@ -190,7 +189,7 @@ onMounted(() => {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #303133 !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
@@ -212,4 +211,6 @@ onMounted(() => {
margin-left: 8px;
margin-top: 0px;
}
</style>

8
src/components/iFrame/index.vue
View File

@@ -22,10 +22,10 @@ const url = computed(() => props.src)
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 300)
loading.value = false;
}, 300);
window.onresize = function temp() {
height.value = document.documentElement.clientHeight - 94.5 + "px;"
}
height.value = document.documentElement.clientHeight - 94.5 + "px;";
};
})
</script>

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

@@ -8,12 +8,10 @@
</transition>
</router-view>
<iframe-toggle />
<copyright />
</section>
</template>
<script setup>
import copyright from "./Copyright/index"
import iframeToggle from "./IframeToggle/index"
import useTagsViewStore from '@/store/modules/tagsView'
@@ -24,7 +22,7 @@ onMounted(() => {
addIframe()
})
watchEffect(() => {
watch((route) => {
addIframe()
})
@@ -42,21 +40,11 @@ function addIframe() {
width: 100%;
position: relative;
overflow: hidden;
background: #eeeeee;
}
.fixed-header + .app-main {
overflow-y: auto;
scrollbar-gutter: auto;
height: calc(100vh - 50px);
min-height: 0px;
}
.app-main:has(.copyright) {
padding-bottom: 36px;
}
.fixed-header + .app-main {
margin-top: 50px;
padding-top: 50px;
}
.hasTagsView {
@@ -66,47 +54,19 @@ function addIframe() {
}
.fixed-header + .app-main {
margin-top: 84px;
height: calc(100vh - 84px);
min-height: 0px;
}
}
/* 移动端fixed-header优化 */
@media screen and (max-width: 991px) {
.fixed-header + .app-main {
padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
overscroll-behavior-y: none;
}
.hasTagsView .fixed-header + .app-main {
padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
overscroll-behavior-y: none;
}
}
@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 991px) {
.fixed-header + .app-main {
padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
height: calc(100svh - 50px);
height: calc(100dvh - 50px);
}
.hasTagsView .fixed-header + .app-main {
padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
height: calc(100svh - 84px);
height: calc(100dvh - 84px);
}
padding-top: 84px;
}
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 6px;
}
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
@@ -121,3 +81,4 @@ function addIframe() {
border-radius: 3px;
}
</style>

31
src/layout/components/Copyright/index.vue
View File

@@ -1,31 +0,0 @@
<template>
<footer v-if="visible" class="copyright">
<span>{{ content }}</span>
</footer>
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
const visible = computed(() => settingsStore.footerVisible)
const content = computed(() => settingsStore.footerContent)
</script>
<style scoped>
.copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 36px;
padding: 10px 20px;
text-align: right;
background-color: #f8f8f8;
color: #666;
font-size: 14px;
border-top: 1px solid #e7e7e7;
z-index: 999;
}
</style>

14
src/layout/components/IframeToggle/index.vue
View File

@@ -9,17 +9,17 @@
</template>
<script setup>
import InnerLink from "../InnerLink/index"
import useTagsViewStore from "@/store/modules/tagsView"
import InnerLink from "../InnerLink/index";
import useTagsViewStore from "@/store/modules/tagsView";
const route = useRoute()
const tagsViewStore = useTagsViewStore()
const route = useRoute();
const tagsViewStore = useTagsViewStore();
function iframeUrl(url, query) {
if (Object.keys(query).length > 0) {
let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&")
return url + "?" + params
let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
return url + "?" + params;
}
return url
return url;
}
</script>

17
src/layout/components/InnerLink/index.vue
View File

@@ -1,10 +1,9 @@
<template>
<div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
<div :style="'height:' + height">
<iframe
:id="iframeId"
style="width: 100%; height: 100%"
:src="src"
ref="iframeRef"
frameborder="no"
></iframe>
</div>
@@ -19,17 +18,7 @@ const props = defineProps({
iframeId: {
type: String
}
})
});
const loading = ref(true)
const height = ref(document.documentElement.clientHeight - 94.5 + 'px')
const iframeRef = ref(null)
onMounted(() => {
if (iframeRef.value) {
iframeRef.value.onload = () => {
loading.value = false
}
}
})
const height = ref(document.documentElement.clientHeight - 94.5 + "px");
</script>

135
src/layout/components/Navbar.vue
View File

@@ -1,25 +1,13 @@
<template>
<div class="navbar" :class="'nav' + settingsStore.navType">
<div class="navbar">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb v-if="settingsStore.navType == 1" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="settingsStore.navType == 2" id="topmenu-container" class="topmenu-container" />
<template v-if="settingsStore.navType == 3">
<logo v-show="settingsStore.sidebarLogo" :collapse="false"></logo>
<top-bar id="topbar-container" class="topbar-container" />
</template>
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="主题模式" effect="dark" placement="bottom">
@@ -33,11 +21,11 @@
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<span class="user-nickname"> {{ userStore.nickName }} </span>
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
@@ -55,20 +43,17 @@
</el-dropdown>
</div>
</div>
</div>
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import TopBar from './TopBar'
import Logo from './Sidebar/Logo'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
@@ -84,13 +69,13 @@ function toggleSideBar() {
function handleCommand(command) {
switch (command) {
case "setLayout":
setLayout()
break
setLayout();
break;
case "logout":
logout()
break
logout();
break;
default:
break
break;
}
}
@@ -101,85 +86,36 @@ function logout() {
type: 'warning'
}).then(() => {
userStore.logOut().then(() => {
location.href = '/index'
location.href = '/index';
})
}).catch(() => { })
}).catch(() => { });
}
const emits = defineEmits(['setLayout'])
function setLayout() {
emits('setLayout')
emits('setLayout');
}
async function toggleTheme(event) {
const x = event?.clientX || window.innerWidth / 2
const y = event?.clientY || window.innerHeight / 2
const wasDark = settingsStore.isDark
const isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
const isSupported = document.startViewTransition && !isReducedMotion
if (!isSupported) {
function toggleTheme() {
settingsStore.toggleTheme()
return
}
try {
const transition = document.startViewTransition(async () => {
await new Promise((resolve) => setTimeout(resolve, 10))
settingsStore.toggleTheme()
await nextTick()
})
await transition.ready
const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y))
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
document.documentElement.animate(
{
clipPath: !wasDark ? [...clipPath].reverse() : clipPath
}, {
duration: 650,
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
fill: "forwards",
pseudoElement: !wasDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
}
)
await transition.finished
} catch (error) {
console.warn("View transition failed, falling back to immediate toggle:", error)
settingsStore.toggleTheme()
}
}
</script>
<style lang='scss' scoped>
.navbar.nav3 {
.hamburger-container {
display: none !important;
}
}
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
display: flex;
align-items: center;
// padding: 0 8px;
box-sizing: border-box;
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 8px;
&:hover {
background: rgba(0, 0, 0, 0.025);
@@ -187,7 +123,7 @@ async function toggleTheme(event) {
}
.breadcrumb-container {
flex-shrink: 0;
float: left;
}
.topmenu-container {
@@ -195,26 +131,16 @@ async function toggleTheme(event) {
left: 50px;
}
.topbar-container {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
overflow: hidden;
margin-left: 8px;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
align-items: center;
margin-left: auto;
&:focus {
outline: none;
@@ -225,7 +151,7 @@ async function toggleTheme(event) {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: var(--navbar-text);
vertical-align: text-bottom;
&.hover-effect {
@@ -252,28 +178,17 @@ async function toggleTheme(event) {
}
.avatar-container {
margin-right: 0px;
padding-right: 0px;
margin-right: 40px;
.avatar-wrapper {
margin-top: 10px;
right: 8px;
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 30px;
height: 30px;
margin-right: 8px;
border-radius: 50%;
}
.user-nickname{
position: relative;
left: 0px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
width: 40px;
height: 40px;
border-radius: 10px;
}
i {

177
src/layout/components/Settings/index.vue
View File

@@ -1,26 +1,5 @@
<template>
<el-drawer v-model="showSettings" :withHeader="false" :lock-scroll="false" direction="rtl" size="300px">
<div class="setting-drawer-title">
<h3 class="drawer-title">菜单导航设置</h3>
</div>
<div class="nav-wrap">
<el-tooltip content="左侧菜单" placement="bottom">
<div class="item left" @click="handleNavType(1)" :class="{ activeItem: navType == 1 }">
<b></b><b></b>
</div>
</el-tooltip>
<el-tooltip content="混合菜单" placement="bottom">
<div class="item mix" @click="handleNavType(2)" :class="{ activeItem: navType == 2 }">
<b></b><b></b>
</div>
</el-tooltip>
<el-tooltip content="顶部菜单" placement="bottom">
<div class="item top" @click="handleNavType(3)" :class="{ activeItem: navType == 3 }">
<b></b><b></b>
</div>
</el-tooltip>
</div>
<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
<div class="setting-drawer-title">
<h3 class="drawer-title">主题风格设置</h3>
</div>
@@ -57,16 +36,16 @@
<h3 class="drawer-title">系统布局配置</h3>
<div class="drawer-item">
<span>开启 Tags-Views</span>
<span>开启 TopNav</span>
<span class="comp-style">
<el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
<el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
</span>
</div>
<div class="drawer-item">
<span>显示页签图标</span>
<span>开启 Tags-Views</span>
<span class="comp-style">
<el-switch v-model="settingsStore.tagsIcon" :disabled="!settingsStore.tagsView" class="drawer-switch" />
<el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
</span>
</div>
@@ -87,14 +66,7 @@
<div class="drawer-item">
<span>动态标题</span>
<span class="comp-style">
<el-switch v-model="settingsStore.dynamicTitle" @change="dynamicTitleChange" class="drawer-switch" />
</span>
</div>
<div class="drawer-item">
<span>底部版权</span>
<span class="comp-style">
<el-switch v-model="settingsStore.footerVisible" class="drawer-switch" />
<el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" />
</span>
</div>
@@ -107,90 +79,70 @@
</template>
<script setup>
import variables from '@/assets/styles/variables.module.scss'
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import { handleThemeStyle } from '@/utils/theme'
const { proxy } = getCurrentInstance()
const { proxy } = getCurrentInstance();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const showSettings = ref(false)
const navType = ref(settingsStore.navType)
const theme = ref(settingsStore.theme)
const sideTheme = ref(settingsStore.sideTheme)
const storeSettings = computed(() => settingsStore)
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
const showSettings = ref(false);
const theme = ref(settingsStore.theme);
const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
/** 是否需要dynamicTitle */
function dynamicTitleChange() {
useSettingsStore().setTitle(useSettingsStore().title)
/** 是否需要topnav */
function topNavChange(val) {
if (!val) {
appStore.toggleSideBarHide(false);
permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
}
}
function themeChange(val) {
settingsStore.theme = val
handleThemeStyle(val)
settingsStore.theme = val;
handleThemeStyle(val);
}
function handleTheme(val) {
settingsStore.sideTheme = val
sideTheme.value = val
settingsStore.sideTheme = val;
sideTheme.value = val;
}
function handleNavType(val) {
settingsStore.navType = val
navType.value = val
}
/** 菜单导航设置 */
watch(() => navType, val => {
if (val.value == 1) {
appStore.sidebar.opened = true
appStore.toggleSideBarHide(false)
}
if (val.value == 2) {
appStore.sidebar.opened = true
}
if (val.value == 3) {
appStore.sidebar.opened = false
appStore.toggleSideBarHide(true)
}
if ([1, 3].includes(val.value)) {
permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
}
}, { immediate: true, deep: true }
)
function saveSetting() {
proxy.$modal.loading("正在保存到本地，请稍候...")
proxy.$modal.loading("正在保存到本地，请稍候...");
let layoutSetting = {
"navType": storeSettings.value.navType,
"topNav": storeSettings.value.topNav,
"tagsView": storeSettings.value.tagsView,
"tagsIcon": storeSettings.value.tagsIcon,
"fixedHeader": storeSettings.value.fixedHeader,
"sidebarLogo": storeSettings.value.sidebarLogo,
"dynamicTitle": storeSettings.value.dynamicTitle,
"footerVisible": storeSettings.value.footerVisible,
"sideTheme": storeSettings.value.sideTheme,
"theme": storeSettings.value.theme
}
localStorage.setItem("layout-setting", JSON.stringify(layoutSetting))
};
localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
setTimeout(proxy.$modal.closeLoading(), 1000)
}
function resetSetting() {
proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...")
proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
localStorage.removeItem("layout-setting")
setTimeout("window.location.reload()", 1000)
}
function openSetting() {
showSettings.value = true
showSettings.value = true;
}
defineExpose({
openSetting
openSetting,
})
</script>
@@ -249,67 +201,4 @@ defineExpose({
margin: -3px 8px 0px 0px;
}
}
// 导航模式
.nav-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
.activeItem {
border: 2px solid var(--el-color-primary) !important;
}
.item {
position: relative;
margin-right: 16px;
cursor: pointer;
width: 56px;
height: 48px;
border-radius: 4px;
background: #f0f2f5;
border: 2px solid transparent;
}
.left {
b:first-child {
display: block;
height: 30%;
background: #fff;
}
b:last-child {
width: 30%;
background: #1b2a47;
position: absolute;
height: 100%;
top: 0;
border-radius: 4px 0 0 4px;
}
}
.mix {
b:first-child {
border-radius: 4px 4px 0 0;
display: block;
height: 30%;
background: #1b2a47;
}
b:last-child {
width: 30%;
background: #1b2a47;
position: absolute;
height: 70%;
border-radius: 0 0 0 4px;
}
}
.top {
b:first-child {
display: block;
height: 30%;
background: #1b2a47;
border-radius: 4px 4px 0 0;
}
}
}
</style>

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

@@ -25,34 +25,30 @@ defineProps({
}
})
const title = import.meta.env.VITE_APP_TITLE
const settingsStore = useSettingsStore()
const sideTheme = computed(() => settingsStore.sideTheme)
const title = import.meta.env.VITE_APP_TITLE;
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
// 获取Logo背景色
const getLogoBackground = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-bg)'
return 'var(--sidebar-bg)';
}
if (settingsStore.navType == 3) {
return variables.menuLightBg
}
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
})
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
});
// 获取Logo文字颜色
const getLogoTextColor = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-text)'
return 'var(--sidebar-text)';
}
if (settingsStore.navType == 3) {
return variables.menuLightText
}
return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
})
return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
@@ -64,6 +60,7 @@ const getLogoTextColor = computed(() => {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: v-bind(getLogoBackground);

14
src/layout/components/Sidebar/SidebarItem.vue
View File

@@ -30,7 +30,7 @@
<script setup>
import { isExternal } from '@/utils/validate'
import AppLink from './Link'
import { getNormalPath } from '@/utils/ruoyi'
import { getNormalPath } from '@/utils/manage'
const props = defineProps({
// route object
@@ -48,11 +48,11 @@ const props = defineProps({
}
})
const onlyOneChild = ref({})
const onlyOneChild = ref({});
function hasOneShowingChild(children = [], parent) {
if (!children) {
children = []
children = [];
}
const showingChildren = children.filter(item => {
if (item.hidden) {
@@ -74,7 +74,7 @@ function hasOneShowingChild(children = [], parent) {
}
return false
}
};
function resolvePath(routePath, routeQuery) {
if (isExternal(routePath)) {
@@ -84,7 +84,7 @@ function resolvePath(routePath, routeQuery) {
return props.basePath
}
if (routeQuery) {
let query = JSON.parse(routeQuery)
let query = JSON.parse(routeQuery);
return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
}
return getNormalPath(props.basePath + '/' + routePath)
@@ -92,9 +92,9 @@ function resolvePath(routePath, routeQuery) {
function hasTitle(title){
if (title.length > 5) {
return title
return title;
} else {
return ""
return "";
}
}
</script>

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

@@ -32,40 +32,40 @@ import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const route = useRoute()
const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);
// 获取菜单背景色
const getMenuBackground = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-bg)'
return 'var(--sidebar-bg)';
}
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
})
return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
});
// 获取菜单文字颜色
const getMenuTextColor = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-text)'
return 'var(--sidebar-text)';
}
return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
})
return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText;
});
const activeMenu = computed(() => {
const { meta, path } = route
const { meta, path } = route;
if (meta.activeMenu) {
return meta.activeMenu
return meta.activeMenu;
}
return path
})
return path;
});
</script>
<style lang="scss" scoped>

18
src/layout/components/TagsView/ScrollPane.vue
View File

@@ -12,10 +12,10 @@
<script setup>
import useTagsViewStore from '@/store/modules/tagsView'
const tagAndTagSpacing = ref(4)
const { proxy } = getCurrentInstance()
const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance();
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef)
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
@@ -27,7 +27,7 @@ onBeforeUnmount(() => {
function handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = scrollWrapper.value
const $scrollWrapper = scrollWrapper.value;
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}
@@ -37,12 +37,12 @@ const emitScroll = () => {
}
const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => tagsViewStore.visitedViews)
const visitedViews = computed(() => tagsViewStore.visitedViews);
function moveToTarget(currentTag) {
const $container = proxy.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value
const $scrollWrapper = scrollWrapper.value;
let firstTag = null
let lastTag = null
@@ -58,17 +58,17 @@ function moveToTarget(currentTag) {
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
const tagListDom = document.getElementsByClassName('tags-view-item')
const tagListDom = document.getElementsByClassName('tags-view-item');
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
let prevTag = null
let nextTag = null
for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
prevTag = tagListDom[k]
prevTag = tagListDom[k];
}
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
nextTag = tagListDom[k]
nextTag = tagListDom[k];
}
}
}

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

@@ -1,23 +1,42 @@
<template>
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
<router-link
<div
v-for="tag in visitedViews"
:key="tag.path"
class="tags-view-box"
>
<svg
class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
height="7"
width="7"
:style="activeFill(tag)"
>
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg>
<router-link
:data-path="tag.path"
:class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
class="tags-view-item"
:style="activeStyle(tag)"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
>
<svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
{{ tag.title }}
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
</span>
</router-link>
<svg
class="tabs-chrome__background-after group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
height="7"
width="7"
:style="activeFill(tag)"
>
<path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
</svg>
</div>
</scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">
@@ -44,26 +63,25 @@
<script setup>
import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi'
import { getNormalPath } from '@/utils/manage'
import useTagsViewStore from '@/store/modules/tagsView'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const visible = ref(false)
const top = ref(0)
const left = ref(0)
const selectedTag = ref({})
const affixTags = ref([])
const scrollPaneRef = ref(null)
const visible = ref(false);
const top = ref(0);
const left = ref(0);
const selectedTag = ref({});
const affixTags = ref([]);
const scrollPaneRef = ref(null);
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
const theme = computed(() => useSettingsStore().theme)
const tagsIcon = computed(() => useSettingsStore().tagsIcon)
const visitedViews = computed(() => useTagsViewStore().visitedViews);
const routes = computed(() => usePermissionStore().routes);
const theme = computed(() => useSettingsStore().theme);
watch(route, () => {
addTags()
@@ -88,11 +106,18 @@ function isActive(r) {
}
function activeStyle(tag) {
if (!isActive(tag)) return {}
if (!isActive(tag)) return {};
return {
"background-color": theme.value,
"border-color": theme.value
}
};
}
function activeFill(tag) {
if (!isActive(tag)) return {};
return {
"fill": theme.value,
};
}
function isAffix(tag) {
@@ -138,8 +163,8 @@ function filterAffixTags(routes, basePath = '') {
}
function initTags() {
const res = filterAffixTags(routes.value)
affixTags.value = res
const res = filterAffixTags(routes.value);
affixTags.value = res;
for (const tag of res) {
// Must have tag name
if (tag.name) {
@@ -159,7 +184,7 @@ function moveToCurrentTag() {
nextTick(() => {
for (const r of visitedViews.value) {
if (r.path === route.path) {
scrollPaneRef.value.moveToTarget(r)
scrollPaneRef.value.moveToTarget(r);
// when query is different then update
if (r.fullPath !== route.fullPath) {
useTagsViewStore().updateVisitedView(route)
@@ -170,9 +195,9 @@ function moveToCurrentTag() {
}
function refreshSelectedTag(view) {
proxy.$tab.refreshPage(view)
proxy.$tab.refreshPage(view);
if (route.meta.link) {
useTagsViewStore().delIframeView(route)
useTagsViewStore().delIframeView(route);
}
}
@@ -201,7 +226,7 @@ function closeLeftTags() {
}
function closeOthersTags() {
router.push(selectedTag.value).catch(() => { })
router.push(selectedTag.value).catch(() => { });
proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
moveToCurrentTag()
})
@@ -268,20 +293,14 @@ function handleScroll() {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.tags-view-item {
.tags-view-box{
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid var(--tags-item-border, #d8dce5);
color: var(--tags-item-text, #495060);
background: var(--tags-item-bg, #fff);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
.tabs-chrome__background-before,.tabs-chrome__background-after{
vertical-align: bottom;
fill: var(--tags-item-bg, #fff);
}
&:first-of-type {
margin-left: 15px;
}
@@ -289,11 +308,27 @@ function handleScroll() {
&:last-of-type {
margin-right: 15px;
}
}
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
// border: 1px solid var(--tags-item-border, #d8dce5);
color: var(--tags-item-text, #495060);
background: var(--tags-item-bg, #fff);
padding: 0 8px;
font-size: 12px;
margin-top: 7px;
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
border-radius: 4px 4px 0 0;
&::before {
content: '';
@@ -309,10 +344,6 @@ function handleScroll() {
}
}
.tags-view-item.active.has-icon::before {
content: none !important;
}
.contextmenu {
margin: 0;
background: var(--el-bg-color-overlay, #fff);

99
src/layout/components/TopBar/index.vue
View File

@@ -1,99 +0,0 @@
<template>
<el-menu class="topbar-menu" :ellipsis="false" :default-active="activeMenu" :active-text-color="theme" mode="horizontal">
<sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" />
<el-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
<template #title>
<span>更多菜单</span>
</template>
<sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
</el-sub-menu>
</el-menu>
</template>
<script setup>
import SidebarItem from '../Sidebar/SidebarItem'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const theme = computed(() => settingsStore.theme)
const device = computed(() => appStore.device)
const activeMenu = computed(() => {
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
const visibleNumber = ref(5)
const topMenus = computed(() => {
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
})
const moreRoutes = computed(() => {
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value, sidebarRouters.value.length - visibleNumber.value)
})
function setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3
visibleNumber.value = parseInt(width / 85)
}
onMounted(() => {
window.addEventListener('resize', setVisibleNumber)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', setVisibleNumber)
})
onMounted(() => {
setVisibleNumber()
})
</script>
<style lang="scss">
/* menu item */
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
padding: 0 10px !important;
}
.topbar-menu.el-menu--horizontal > .el-menu-item {
float: left;
height: 50px !important;
line-height: 50px !important;
color: #303133 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
.el-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
color: v-bind(theme);
}
/* sub-menu item */
.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
float: left;
line-height: 50px !important;
color: #303133 !important;
margin: 0 15px -3px!important;
}
/* topbar more arrow */
.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
position: static;
margin-left: 8px;
margin-top: 0px;
display: block !important;
}
/* menu__title el-menu-item */
.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
height: 60px;
}
</style>

35
src/layout/index.vue
View File

@@ -17,16 +17,18 @@
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme)
const sideTheme = computed(() => settingsStore.sideTheme)
const sidebar = computed(() => useAppStore().sidebar)
const device = computed(() => useAppStore().device)
const needTagsView = computed(() => settingsStore.tagsView)
const fixedHeader = computed(() => settingsStore.fixedHeader)
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);
const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened,
@@ -35,8 +37,8 @@ const classObj = computed(() => ({
mobile: device.value === 'mobile'
}))
const { width, height } = useWindowSize()
const WIDTH = 992 // refer to Bootstrap's responsive design
const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design
watch(() => device.value, () => {
if (device.value === 'mobile' && sidebar.value.opened) {
@@ -57,18 +59,18 @@ function handleClickOutside() {
useAppStore().closeSideBar({ withoutAnimation: false })
}
const settingRef = ref(null)
const settingRef = ref(null);
function setLayout() {
settingRef.value.openSetting()
settingRef.value.openSetting();
}
</script>
<style lang="scss" scoped>
@use "@/assets/styles/mixin.scss" as mix;
@use "@/assets/styles/variables.module.scss" as vars;
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
.app-wrapper {
@include mix.clearfix;
@include clearfix;
position: relative;
height: 100%;
width: 100%;
@@ -79,11 +81,6 @@ function setLayout() {
}
}
.main-container:has(.fixed-header) {
height: 100vh;
overflow: hidden;
}
.drawer-bg {
background: #000;
opacity: 0.3;
@@ -99,7 +96,7 @@ function setLayout() {
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{vars.$base-sidebar-width});
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}

2
src/main.js
View File

@@ -27,7 +27,7 @@ import './permission' // permission control
import { useDict } from '@/utils/dict'
import { getConfigKey } from "@/api/system/config"
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/manage'
// 分页组件
import Pagination from '@/components/Pagination'

2
src/plugins/download.js
View File

@@ -3,7 +3,7 @@ import { ElLoading, ElMessage } from 'element-plus'
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { blobValidate } from '@/utils/ruoyi'
import { blobValidate } from '@/utils/manage'
const baseURL = import.meta.env.VITE_APP_BASE_API
let downloadLoadingInstance

4
src/settings.js
View File

@@ -3,6 +3,10 @@ export default {
* 网页标题
*/
title: import.meta.env.VITE_APP_TITLE,
/**
* 顶部标题
*/
topNav: true,
/**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light

3
src/store/modules/settings.js
View File

@@ -5,7 +5,7 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
const isDark = useDark()
const toggleDark = useToggle(isDark)
const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
const { sideTheme, showSettings, navType, tagsView,topNav, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
@@ -14,6 +14,7 @@ const useSettingsStore = defineStore(
{
state: () => ({
title: '',
topNav: storageSetting.topNav ===undefined ? topNav:storageSetting.topNav,
theme: storageSetting.theme || '#409EFF',
sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings,

7
src/utils/auth.js
View File

@@ -1,6 +1,7 @@
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
const userIdKey = 'Admin-UserId'
export function getToken() {
return Cookies.get(TokenKey)
@@ -13,3 +14,9 @@ export function setToken(token) {
export function removeToken() {
return Cookies.remove(TokenKey)
}
export function setUserId(userId){
return Cookies.set(userIdKey, userId)
}
export function getUserId(){
return Cookies.get(userIdKey)
}

12
src/utils/dict.js
View File

@@ -5,20 +5,20 @@ import { getDicts } from '@/api/system/dict/data'
* 获取字典数据
*/
export function useDict(...args) {
const res = ref({})
const res = ref({});
return (() => {
args.forEach((dictType, index) => {
res.value[dictType] = []
const dicts = useDictStore().getDict(dictType)
res.value[dictType] = [];
const dicts = useDictStore().getDict(dictType);
if (dicts) {
res.value[dictType] = dicts
res.value[dictType] = dicts;
} else {
getDicts(dictType).then(resp => {
res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
useDictStore().setDict(dictType, res.value[dictType])
useDictStore().setDict(dictType, res.value[dictType]);
})
}
})
return toRefs(res.value)
return toRefs(res.value);
})()
}

7
src/utils/dynamicTitle.js
View File

@@ -1,3 +1,4 @@
import store from '@/store'
import defaultSettings from '@/settings'
import useSettingsStore from '@/store/modules/settings'
@@ -5,10 +6,10 @@ import useSettingsStore from '@/store/modules/settings'
* 动态修改标题
*/
export function useDynamicTitle() {
const settingsStore = useSettingsStore()
const settingsStore = useSettingsStore();
if (settingsStore.dynamicTitle) {
document.title = settingsStore.title + ' - ' + defaultSettings.title
document.title = settingsStore.title + ' - ' + defaultSettings.title;
} else {
document.title = defaultSettings.title
document.title = defaultSettings.title;
}
}

29
src/utils/generator/drawingDefalut.js Normal file
View File

@@ -0,0 +1,29 @@
export default [
{
layout: 'colFormItem',
tagIcon: 'input',
label: '手机号',
vModel: 'mobile',
formId: 6,
tag: 'el-input',
placeholder: '请输入手机号',
defaultValue: '',
span: 24,
style: { width: '100%' },
clearable: true,
prepend: '',
append: '',
'prefix-icon': 'Cellphone',
'suffix-icon': '',
maxlength: 11,
'show-word-limit': true,
readonly: false,
disabled: false,
required: true,
changeTag: true,
regList: [{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误'
}]
}
]

37
src/utils/generator/drawingDefault.js
View File

@@ -1,37 +0,0 @@
export const drawingDefaultValue = []
export function initDrawingDefaultValue() {
if (drawingDefaultValue.length === 0) {
drawingDefaultValue.push({
layout: 'colFormItem',
tagIcon: 'input',
label: '手机号',
vModel: 'mobile',
formId: 6,
tag: 'el-input',
placeholder: '请输入手机号',
defaultValue: '',
span: 24,
style: {width: '100%'},
clearable: true,
prepend: '',
append: '',
'prefix-icon': 'Cellphone',
'suffix-icon': '',
maxlength: 11,
'show-word-limit': true,
readonly: false,
disabled: false,
required: true,
changeTag: true,
regList: [{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误'
}]
})
}
}
export function cleanDrawingDefaultValue() {
drawingDefaultValue.splice(0, drawingDefaultValue.length)
}

4
src/utils/generator/html.js
View File

@@ -318,7 +318,7 @@ function buildElRadioGroupChild(conf) {
if (conf.options && conf.options.length) {
const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio'
const border = conf.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :value="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
}
return children.join('\n')
}
@@ -328,7 +328,7 @@ function buildElCheckboxGroupChild(conf) {
if (conf.options && conf.options.length) {
const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
const border = conf.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :value="item.label" :disabled="item.disabled" ${border} />`)
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
}
return children.join('\n')
}

4
src/utils/index.js
View File

@@ -1,10 +1,10 @@
import { parseTime } from './ruoyi'
import { parseTime } from './manage'
/**
* 表格时间格式化
*/
export function formatDate(cellValue) {
if (cellValue == null || cellValue == "") return ""
if (cellValue == null || cellValue == "") return "";
var date = new Date(cellValue)
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1

112
src/utils/ruoyi.js → src/utils/manage.js
View File

@@ -1,6 +1,6 @@
/**
* 通用js方法封装处理
* Copyright (c) 2019 ruoyi
* Copyright (c) 2019
*/
// 日期格式化
@@ -16,7 +16,7 @@ export function parseTime(time, pattern) {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '')
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
@@ -47,89 +47,89 @@ export function parseTime(time, pattern) {
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields()
this.$refs[refName].resetFields();
}
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
let search = params
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
dateRange = Array.isArray(dateRange) ? dateRange : []
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0]
search.params['endTime'] = dateRange[1]
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0]
search.params['end' + propName] = dateRange[1]
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search
return search;
}
// 回显数据字典
export function selectDictLabel(datas, value) {
if (value === undefined) {
return ""
return "";
}
var actions = []
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label)
return true
actions.push(datas[key].label);
return true;
}
})
if (actions.length === 0) {
actions.push(value)
actions.push(value);
}
return actions.join('')
return actions.join('');
}
// 回显数据字典（字符串、数组）
export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) {
return ""
return "";
}
if (Array.isArray(value)) {
value = value.join(",")
value = value.join(",");
}
var actions = []
var currentSeparator = undefined === separator ? "," : separator
var temp = value.split(currentSeparator)
var actions = [];
var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false
var match = false;
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) {
actions.push(datas[key].label + currentSeparator)
match = true
actions.push(datas[key].label + currentSeparator);
match = true;
}
})
if (!match) {
actions.push(temp[val] + currentSeparator)
actions.push(temp[val] + currentSeparator);
}
})
return actions.join('').substring(0, actions.join('').length - 1)
return actions.join('').substring(0, actions.join('').length - 1);
}
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++]
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false
return ''
flag = false;
return '';
}
return arg
})
return flag ? str : ''
return arg;
});
return flag ? str : '';
}
// 转换字符串，undefined,null等转化为""
export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return ""
return "";
}
return str
return str;
}
// 数据合并
@@ -137,16 +137,16 @@ export function mergeRecursive(source, target) {
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p])
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p]
source[p] = target[p];
}
} catch (e) {
source[p] = target[p]
source[p] = target[p];
}
}
return source
}
return source;
};
/**
* 构造树型结构数据
@@ -160,15 +160,15 @@ export function handleTree(data, id, parentId, children) {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
}
};
var childrenListMap = {}
var tree = []
var childrenListMap = {};
var tree = [];
for (let d of data) {
let id = d[config.id]
childrenListMap[id] = d
let id = d[config.id];
childrenListMap[id] = d;
if (!d[config.childrenList]) {
d[config.childrenList] = []
d[config.childrenList] = [];
}
}
@@ -176,12 +176,12 @@ export function handleTree(data, id, parentId, children) {
let parentId = d[config.parentId]
let parentObj = childrenListMap[parentId]
if (!parentObj) {
tree.push(d)
tree.push(d);
} else {
parentObj[config.childrenList].push(d)
}
}
return tree
return tree;
}
/**
@@ -191,19 +191,19 @@ export function handleTree(data, id, parentId, children) {
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName]
var part = encodeURIComponent(propName) + "="
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']'
var subPart = encodeURIComponent(params) + "="
result += subPart + encodeURIComponent(value[key]) + "&"
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&"
result += part + encodeURIComponent(value) + "&";
}
}
}
@@ -214,7 +214,7 @@ export function tansParams(params) {
export function getNormalPath(p) {
if (p.length === 0 || !p || p == 'undefined') {
return p
}
};
let res = p.replace('//', '/')
if (res[res.length - 1] === '/') {
return res.slice(0, res.length - 1)

4
src/utils/permission.js
View File

@@ -9,7 +9,7 @@ export function checkPermi(value) {
if (value && value instanceof Array && value.length > 0) {
const permissions = useUserStore().permissions
const permissionDatas = value
const all_permission = "*:*:*"
const all_permission = "*:*:*";
const hasPermission = permissions.some(permission => {
return all_permission === permission || permissionDatas.includes(permission)
@@ -34,7 +34,7 @@ export function checkRole(value) {
if (value && value instanceof Array && value.length > 0) {
const roles = useUserStore().roles
const permissionRoles = value
const super_admin = "admin"
const super_admin = "admin";
const hasRole = roles.some(role => {
return super_admin === role || permissionRoles.includes(role)

67
src/utils/request.js
View File

@@ -2,14 +2,14 @@ import axios from 'axios'
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi'
import { tansParams, blobValidate } from '@/utils/manage'
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'
let downloadLoadingInstance
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false }
export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
@@ -17,7 +17,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 10000
timeout: 100000
})
// request拦截器
@@ -29,12 +29,15 @@ service.interceptors.request.use(config => {
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
if(config.isUpload){
config.headers['Content-Type'] = 'multipart/form-data'
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params)
url = url.slice(0, -1)
config.params = {}
config.url = url
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
@@ -42,22 +45,22 @@ service.interceptors.request.use(config => {
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
if (requestSize >= limitSize) {
console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
return config
return config;
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url // 请求地址
const s_data = sessionObj.data // 请求数据
const s_time = sessionObj.time // 请求时间
const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理，请勿重复提交'
const message = '数据正在处理，请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
@@ -74,7 +77,7 @@ service.interceptors.request.use(config => {
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
@@ -83,15 +86,15 @@ service.interceptors.response.use(res => {
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true
isRelogin.show = true;
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
isRelogin.show = false
isRelogin.show = false;
useUserStore().logOut().then(() => {
location.href = '/index'
location.href = '/index';
})
}).catch(() => {
isRelogin.show = false
})
isRelogin.show = false;
});
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) {
@@ -109,13 +112,13 @@ service.interceptors.response.use(res => {
},
error => {
console.log('err' + error)
let { message } = error
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常"
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时"
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常"
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
@@ -131,21 +134,21 @@ export function download(url, params, filename, config) {
responseType: 'blob',
...config
}).then(async (data) => {
const isBlob = blobValidate(data)
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
ElMessage.error(errMsg)
ElMessage.error(errMsg);
}
downloadLoadingInstance.close()
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
ElMessage.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close()
downloadLoadingInstance.close();
})
}

4
src/utils/tableHelper.js Normal file
View File

@@ -0,0 +1,4 @@
export const tableInfoRowClick = (row, ref) => {
console.log(row, ref);
ref.setCurrentRow(row);
};

2
src/views/index.vue
View File

@@ -4,7 +4,7 @@
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>若依后台管理框架</h2>
<p>
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了智汇管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
</p>
<p>
<b>当前版本:</b> <span>v{{ version }}</span>

17
src/views/tool/build/index.vue
View File

@@ -102,7 +102,7 @@ import beautifier from 'js-beautify'
import logo from '@/assets/logo/logo.png'
import { inputComponents, selectComponents, layoutComponents, formConf as formConfData } from '@/utils/generator/config'
import { beautifierConf } from '@/utils/index'
import { drawingDefaultValue, initDrawingDefaultValue, cleanDrawingDefaultValue } from '@/utils/generator/drawingDefault'
import drawingDefalut from '@/utils/generator/drawingDefalut'
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css'
@@ -113,16 +113,14 @@ import RightPanel from './RightPanel'
import CodeTypeDialog from './CodeTypeDialog'
import { onMounted, watch } from 'vue'
initDrawingDefaultValue()
const drawingList = ref(drawingDefaultValue)
const drawingList = ref(drawingDefalut)
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)
const showFileName = ref(false)
const operationType = ref('')
const idGlobal = ref(100)
const activeData = ref(drawingDefaultValue[0])
const activeId = ref(drawingDefaultValue[0].formId)
const activeData = ref(drawingDefalut[0])
const activeId = ref(drawingDefalut[0].formId)
const generateConf = ref(null)
const formData = ref({})
const formConf = ref(formConfData)
@@ -147,7 +145,6 @@ function empty() {
proxy.$modal.confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(() => {
idGlobal.value = 100
drawingList.value = []
cleanDrawingDefaultValue()
}
)
}
@@ -295,9 +292,8 @@ watch(activeId, (val) => {
oldActiveId = val
}, { immediate: true })
let clipboard = null
onMounted(() => {
clipboard = new ClipboardJS('#copyNode', {
const clipboard = new ClipboardJS('#copyNode', {
text: trigger => {
const codeStr = generateCode()
ElNotification({ title: '成功', message: '代码已复制到剪切板，可粘贴。', type: 'success' })
@@ -308,9 +304,6 @@ onMounted(() => {
proxy.$modal.msgError('代码复制失败')
})
})
onUnmounted(() => {
clipboard.destroy()
})
</script>
<style lang='scss'>