Merge branch 'main' of https://gitee.com/izory/zradmin-vue3 into main
This commit is contained in:
zory
commit
d2d7f70fa6
@ -31,10 +31,10 @@
|
||||
"md-editor-v3": "^1.11.11",
|
||||
"nprogress": "0.2.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "3.2.26",
|
||||
"vue": "^3.2.36",
|
||||
"vue-cropper": "1.0.2",
|
||||
"vue-i18n": "^9.1.10",
|
||||
"vue-router": "4.0.12",
|
||||
"vue-router": "^4.0.15",
|
||||
"vue3-seamless-scroll": "^1.2.0",
|
||||
"vuex": "4.0.2",
|
||||
"wangeditor": "^4.7.15"
|
||||
|
||||
@ -20,7 +20,7 @@ const lang = computed(() => {
|
||||
return store.getters.language
|
||||
})
|
||||
const locale = ref(zh)
|
||||
const size = ref('default')
|
||||
const size = ref('small')
|
||||
size.value = store.getters.size
|
||||
watch(
|
||||
token,
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
// cover some element-ui styles
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
// .el-upload {
|
||||
// input[type="file"] {
|
||||
// display: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
@ -21,10 +10,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
// table 里面操作按钮样式覆盖
|
||||
.el-table__cell .cell {
|
||||
.el-button.is-text{
|
||||
padding: 8px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +39,7 @@
|
||||
|
||||
.el-header {
|
||||
--el-header-padding: 0 0px !important;
|
||||
--el-header-height: 50px !important;
|
||||
// --el-header-height: 50px !important;
|
||||
}
|
||||
// el 2.2.0 text button
|
||||
.el-button.is-text {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
@import './sidebar.scss';
|
||||
@import './btn.scss';
|
||||
@import './waves.scss';
|
||||
@import './black.scss';
|
||||
// @import './black.scss';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
#app {
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
z-index: 1001;
|
||||
transition: width 0.28s ease;
|
||||
background-color: var(--base-menu-background);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 0px;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
|
||||
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
@ -29,8 +22,11 @@
|
||||
|
||||
// 展开sidebar状态设置svg-icon边距
|
||||
.openSidebar {
|
||||
.layout-sidebar__container .svg-icon {
|
||||
margin-right: 10px;
|
||||
.sidebar {
|
||||
transform: translate(0);
|
||||
}
|
||||
.sidebar .svg-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,13 +72,14 @@
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
transition: transform 0.28s;
|
||||
position: fixed;
|
||||
// background: var(--base-menu-background, #fff);
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,31 +10,31 @@ $panGreen: #30b08f;
|
||||
|
||||
// 默认菜单主题风格
|
||||
:root {
|
||||
--base-menu-background: #ffffff;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
--base-topBar-color: #5a5e66;
|
||||
--base-text-color-rgba: rgba(0, 0, 0, 0.85);
|
||||
--base-sidebar-width: 220px;
|
||||
--base-sidebar-left: 64px;
|
||||
|
||||
--el-aside-width: 220px;
|
||||
--base-footer-height: 40px;
|
||||
--base-tags-height: 34px;
|
||||
--base-header-height: 50px;
|
||||
}
|
||||
/***默认主题颜色配置***/
|
||||
[data-theme='theme-light'] {
|
||||
// 菜单背景
|
||||
--base-menu-background: #ffffff;
|
||||
// logo部分文字颜色
|
||||
--base-logo-title-color: #001529;
|
||||
// 顶部导航栏背景色
|
||||
--base-topBar-background: #ffffff;
|
||||
}
|
||||
/***深色主题颜色配置***/
|
||||
|
||||
/***侧边栏深色配置***/
|
||||
[data-theme='theme-dark'] {
|
||||
--base-menu-background: #304156;
|
||||
--base-logo-title-color: #ffffff;
|
||||
--base-topBar-background: #ffffff;
|
||||
|
||||
// el-ement ui 设置
|
||||
--el-fill-color-blank: #304156;
|
||||
--el-text-color-primary: #bfcbd9;
|
||||
// // el-ement ui 设置
|
||||
// --el-fill-color-blank: #304156;
|
||||
--el-text-color-primary: #e5eaf3;
|
||||
}
|
||||
html.dark {
|
||||
/* custom dark bg color */
|
||||
// --el-bg-color: #141414;
|
||||
--base-color-white: #ffffff;
|
||||
--base-text-color-rgba: #ffffff;
|
||||
}
|
||||
html.cafe {
|
||||
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
|
||||
}
|
||||
html.contrast {
|
||||
filter: contrast(2);
|
||||
}
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<!-- <transition-group name="breadcrumb"> -->
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
<!-- </transition-group> -->
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const levelList = ref([])
|
||||
|
||||
function getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = route.matched.filter(item => item.meta && item.meta.title);
|
||||
const first = matched[0]
|
||||
let matched = route.matched.filter((item) => item.meta && item.meta.title)
|
||||
// const first = matched[0]
|
||||
// 判断是否为首页
|
||||
// if (!isDashboard(first)) {
|
||||
// matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
|
||||
// }
|
||||
|
||||
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
}
|
||||
|
||||
function isDashboard(route) {
|
||||
const name = route && route.name
|
||||
if (!name) {
|
||||
@ -48,10 +49,10 @@ watchEffect(() => {
|
||||
}
|
||||
getBreadcrumb()
|
||||
})
|
||||
getBreadcrumb();
|
||||
getBreadcrumb()
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
<div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// import("echarts/theme/macarons"); // echarts theme
|
||||
import { debounce } from "@/utils";
|
||||
// import { debounce } from '@/utils'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: "业务指标",
|
||||
default: '',
|
||||
},
|
||||
min: {
|
||||
type: [Object, Number],
|
||||
@ -26,74 +28,63 @@ export default {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
value: "",
|
||||
name: "占比",
|
||||
value: '',
|
||||
name: '占比',
|
||||
},
|
||||
],
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "300px",
|
||||
default: '300px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize();
|
||||
}
|
||||
}, 100);
|
||||
window.addEventListener("resize", this.__resizeHandler);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
window.removeEventListener("resize", this.__resizeHandler);
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
})
|
||||
let chart = null
|
||||
const chartRef = ref()
|
||||
|
||||
this.chart.setOption({
|
||||
//重绘图表函数
|
||||
const resizeHandler = () => {
|
||||
chart.resize()
|
||||
}
|
||||
function initChart() {
|
||||
chart = echarts.init(proxy.$refs.chartRef, 'macarons')
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{b} : {c}",
|
||||
formatter: '{a} <br/>{b} : {c}',
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: this.name,
|
||||
type: "gauge",
|
||||
min: this.min,
|
||||
max: this.max,
|
||||
name: props.name,
|
||||
type: 'gauge',
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
detail: {
|
||||
formatter: "{value}%",
|
||||
formatter: '{value}%',
|
||||
},
|
||||
data: this.data,
|
||||
data: props.data,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
})
|
||||
}
|
||||
const debouncedFn = useDebounceFn(() => {
|
||||
// do something
|
||||
resizeHandler()
|
||||
}, 500)
|
||||
|
||||
document.addEventListener('resize', debouncedFn)
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', debouncedFn)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -75,7 +75,7 @@ const uploadList = ref([])
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const uploadImgUrl = ref(baseUrl + import.meta.env.VITE_APP_UPLOAD_URL ?? '/Common/UploadFile') // 上传的图片服务器地址
|
||||
const uploadImgUrl = ref(baseUrl + import.meta.env.VITE_APP_UPLOAD_URL) // 上传的图片服务器地址
|
||||
const headers = ref({ Authorization: 'Bearer ' + getToken() })
|
||||
const fileList = ref([])
|
||||
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
|
||||
@ -89,11 +89,11 @@ watch(
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
if (typeof item === 'string') {
|
||||
if (item.indexOf(baseUrl) === -1) {
|
||||
item = { name: baseUrl + item, url: baseUrl + item }
|
||||
} else {
|
||||
// if (item.indexOf(baseUrl) === -1) {
|
||||
// item = { name: baseUrl + item, url: baseUrl + item }
|
||||
// } else {
|
||||
item = { name: item, url: item }
|
||||
}
|
||||
// }
|
||||
}
|
||||
return item
|
||||
})
|
||||
|
||||
@ -29,7 +29,7 @@ export default defineComponent({
|
||||
},
|
||||
[h(resolveComponent(props.name.replace('ele-', '')))],
|
||||
)
|
||||
} else {
|
||||
} else if (props.name != undefined && props.name != '') {
|
||||
return () =>
|
||||
h(
|
||||
'svg',
|
||||
@ -44,6 +44,8 @@ export default defineComponent({
|
||||
fill: `${props.color}`,
|
||||
}),
|
||||
)
|
||||
} else {
|
||||
return () => h('i')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<el-menu :default-active="activeMenu" :active-text-color="theme" mode="horizontal" background-color="transparent" @select="handleSelect" :ellipsis="false">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:active-text-color="theme"
|
||||
mode="horizontal"
|
||||
background-color="transparent"
|
||||
@select="handleSelect"
|
||||
:ellipsis="false">
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
|
||||
<svg-icon :name="item.meta.icon" />
|
||||
@ -24,6 +30,7 @@
|
||||
import { constantRoutes } from '@/router'
|
||||
import { isHttp } from '@/utils/validate'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getNormalPath } from '@/utils/ruoyi'
|
||||
|
||||
// 顶部栏初始数
|
||||
const visibleNumber = ref(5)
|
||||
@ -64,10 +71,10 @@ const childrenMenus = computed(() => {
|
||||
for (let item in router.children) {
|
||||
if (router.children[item].parentPath === undefined) {
|
||||
if (router.path === '/') {
|
||||
router.children[item].path = '/redirect/' + router.children[item].path
|
||||
router.children[item].path = getNormalPath('/redirect/' + 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 = getNormalPath(router.path + '/' + router.children[item].path)
|
||||
}
|
||||
}
|
||||
router.children[item].parentPath = router.path
|
||||
@ -96,7 +103,6 @@ const activeMenu = computed(() => {
|
||||
if (routes.length === 0) {
|
||||
activePath = currentIndex.value || defaultRouter.value
|
||||
|
||||
console.log('activePath', activePath)
|
||||
activeRoutes(activePath)
|
||||
}
|
||||
return activePath
|
||||
@ -170,12 +176,6 @@ onMounted(() => {
|
||||
.el-menu--horizontal > .el-menu-item .svg-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
// .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
|
||||
// .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
|
||||
// border-bottom: 0px solid #{"var(--theme)"} !important;
|
||||
// color: #303133;
|
||||
// }
|
||||
|
||||
/* sub-menu item */
|
||||
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
||||
height: 50px !important;
|
||||
|
||||
@ -13,6 +13,10 @@ import pageLangSetCn from './pages/langSet/zh-cn'
|
||||
import pageLangSetEn from './pages/langSet/en'
|
||||
import pageLangSetTw from './pages/langSet/zh-tw'
|
||||
|
||||
import pagemenuCn from './pages/menu/zh-cn'
|
||||
import pagemenuEn from './pages/menu/en'
|
||||
import pagemenuTw from './pages/menu/zh-tw'
|
||||
|
||||
const i18n = createI18n({
|
||||
// 全局注入 $t 函数
|
||||
globalInjection: true,
|
||||
@ -20,9 +24,9 @@ const i18n = createI18n({
|
||||
locale: store.getters.language, //默认选择的语言
|
||||
legacy: false, // 使用 Composition API 模式，则需要将其设置为false
|
||||
messages: {
|
||||
'zh-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn },
|
||||
'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw },
|
||||
'en': { ...en, ...pageLoginEn, ...pageLangSetEn }
|
||||
'zh-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn, ...pagemenuCn },
|
||||
'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw, ...pagemenuTw },
|
||||
'en': { ...en, ...pageLoginEn, ...pageLangSetEn, ...pagemenuEn }
|
||||
}
|
||||
})
|
||||
console.log('lang=' + store.getters.language)
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
system: 'System',
|
||||
monitoring: 'Monitoring',
|
||||
systemTools: 'Tools',
|
||||
externalOpen: 'ExternalOpen',
|
||||
externalOpen: 'External open',
|
||||
icon: 'Icon',
|
||||
systemMenu: 'Menu',
|
||||
systemRole: 'Role',
|
||||
@ -20,32 +20,34 @@ export default {
|
||||
loginLog: 'Login log',
|
||||
systemNotice: 'Notice',
|
||||
systemLang: 'Language set',
|
||||
timedTask: 'TimedTask',
|
||||
serviceMonitor: 'ServiceMonitor',
|
||||
codeGeneration: 'CodeGeneration',
|
||||
systemInterface: 'SystemInterface',
|
||||
timedTask: 'Timed task',
|
||||
serviceMonitor: 'Service monitoring',
|
||||
codeGeneration: 'Code generation',
|
||||
systemInterface: 'System interface',
|
||||
sendEmail: 'Email',
|
||||
systemArticle: 'Article',
|
||||
articleList: 'Article list',
|
||||
formBuild: 'Form building',
|
||||
officialWebsite: 'Official website',
|
||||
fileStorage: 'File Storage',
|
||||
fileStorage: 'File storage',
|
||||
personalCenter: 'Personal',
|
||||
menuPermi: 'Menu permi',
|
||||
assignUsers: 'Assign users',
|
||||
menuPermi: 'Menu permissions',
|
||||
assignUsers: 'Authorized user',
|
||||
cacheMonitor: 'Cache monitoring',
|
||||
},
|
||||
tagsView: {
|
||||
refresh: 'refresh',
|
||||
close: 'close',
|
||||
closeOther: 'closeOther',
|
||||
closeLeft: 'closeLeft',
|
||||
closeRight: 'closeRight',
|
||||
closeAll: 'closeAll',
|
||||
closeOther: 'close other',
|
||||
closeLeft: 'close left',
|
||||
closeRight: 'close right',
|
||||
closeAll: 'close all',
|
||||
fullscreen: 'fullscreen',
|
||||
closeFullscreen: 'closeFullscreen',
|
||||
closeFullscreen: 'close fullscreen',
|
||||
},
|
||||
layout: {
|
||||
tip1: 'If you feel good, welcome to ⭐ Star ⭐ Collect it so that the author can continue to be free. Thank you!',
|
||||
rewardUser: 'Reward the author with a cup of coffee to express encouragement',
|
||||
contactUs: 'contact us',
|
||||
donationSupport: 'donation support',
|
||||
officialWebsite: 'Official website',
|
||||
@ -65,13 +67,24 @@ export default {
|
||||
fixed: 'fixed',
|
||||
show: 'show',
|
||||
dynamicTitle: 'dynamic title',
|
||||
darkMode: 'dark mode',
|
||||
darkMode: 'dark',
|
||||
lightMode: 'light',
|
||||
saveConfig: 'save',
|
||||
resetConfig: 'reset',
|
||||
logOutConfirm: 'Are you sure you want to exit the current login?',
|
||||
large: 'Large',
|
||||
default: 'Default',
|
||||
small: 'Small'
|
||||
small: 'Small',
|
||||
myWorkbench: 'My workbench',
|
||||
onlineUsers: 'Online user',
|
||||
message: 'Message',
|
||||
amount: 'Amount',
|
||||
order: 'Order',
|
||||
modifyInformation: 'Modify information',
|
||||
technicalSelection: 'Technical selection',
|
||||
frontendTechnology: 'Front-end technology',
|
||||
backendTechnology: 'Backend technology',
|
||||
BackstageManagement: 'Backstage management',
|
||||
},
|
||||
common: {
|
||||
ok: 'Ok',
|
||||
@ -82,7 +95,11 @@ export default {
|
||||
traditionalChinese: 'TraditionalChinese',
|
||||
name: 'Name',
|
||||
content: 'Content',
|
||||
addTime: 'AddTime'
|
||||
addTime: 'AddTime',
|
||||
nickName: 'NickName',
|
||||
time: 'Time',
|
||||
yes: '是',
|
||||
no: '否',
|
||||
},
|
||||
btn: {
|
||||
add: 'Add',
|
||||
|
||||
@ -33,6 +33,7 @@ export default {
|
||||
personalCenter: '个人中心',
|
||||
menuPermi: '菜单权限',
|
||||
assignUsers: '分配用户',
|
||||
cacheMonitor: '缓存监控',
|
||||
},
|
||||
tagsView: {
|
||||
refresh: '刷新页面',
|
||||
@ -46,6 +47,7 @@ export default {
|
||||
},
|
||||
layout: {
|
||||
tip1: '如果觉得不错欢迎给个⭐Star⭐收藏一下，这样作者才有继续免费下去的动力，谢谢！',
|
||||
rewardUser: '打赏作者喝杯咖啡表示鼓励',
|
||||
contactUs: '联系信息',
|
||||
donationSupport: '捐贈支持',
|
||||
officialWebsite: '官网',
|
||||
@ -65,13 +67,24 @@ export default {
|
||||
fixed: '固定',
|
||||
show: '显示',
|
||||
dynamicTitle: '动态标题',
|
||||
darkMode: '深色模式',
|
||||
darkMode: '深色',
|
||||
lightMode: '明亮',
|
||||
saveConfig: '保存配置',
|
||||
resetConfig: '重置配置',
|
||||
logOutConfirm: '你確定要退出当前登录吗？',
|
||||
large: '较大',
|
||||
default: '默认',
|
||||
small: '较小'
|
||||
small: '较小',
|
||||
myWorkbench: '我的工作台',
|
||||
onlineUsers: '在线用户',
|
||||
message: '消息',
|
||||
amount: '金额',
|
||||
order: '订单',
|
||||
modifyInformation: '修改信息',
|
||||
technicalSelection: '技术选型',
|
||||
frontendTechnology: '前端技术',
|
||||
backendTechnology: '后端技术',
|
||||
BackstageManagement: '后台管理',
|
||||
},
|
||||
common: {
|
||||
ok: '确定',
|
||||
@ -82,7 +95,11 @@ export default {
|
||||
traditionalChinese: '繁体',
|
||||
name: '名称',
|
||||
content: '内容',
|
||||
addTime: '添加时间'
|
||||
addTime: '添加时间',
|
||||
nickName: '昵称',
|
||||
time: '时间',
|
||||
yes: '是',
|
||||
no: '否',
|
||||
},
|
||||
btn: {
|
||||
add: '新增',
|
||||
|
||||
@ -33,6 +33,7 @@ export default {
|
||||
personalCenter: '個人中心',
|
||||
menuPermi: '菜單權限',
|
||||
assignUsers: '分配用戶',
|
||||
cacheMonitor: '緩存監控',
|
||||
},
|
||||
tagsView: {
|
||||
refresh: '重繪',
|
||||
@ -65,13 +66,24 @@ export default {
|
||||
fixed: '固定',
|
||||
show: '顯示',
|
||||
dynamicTitle: '動態標題',
|
||||
darkMode: '深色模式',
|
||||
darkMode: '深色',
|
||||
lightMode: '明亮',
|
||||
saveConfig: '保存配置',
|
||||
resetConfig: '重置配置',
|
||||
logOutConfirm: '你確定要退出当前登录吗？',
|
||||
large: '較大',
|
||||
default: '默認',
|
||||
small: '較小'
|
||||
small: '較小',
|
||||
myWorkbench: '我的工作台',
|
||||
onlineUsers: '在線用戶',
|
||||
message: '消息',
|
||||
amount: '金額',
|
||||
order: '訂單',
|
||||
modifyInformation: '修改信息',
|
||||
technicalSelection: '技術選型',
|
||||
frontendTechnology: '前端技術',
|
||||
backendTechnology: '後端技術',
|
||||
BackstageManagement: '後台管理',
|
||||
},
|
||||
common: {
|
||||
ok: '確定',
|
||||
@ -82,7 +94,11 @@ export default {
|
||||
traditionalChinese: '繁體',
|
||||
name: '名稱',
|
||||
content: '內容',
|
||||
addTime: '添加時間'
|
||||
addTime: '添加時間',
|
||||
nickName: '暱稱',
|
||||
time: '時間',
|
||||
yes: '是',
|
||||
no: '否',
|
||||
},
|
||||
btn: {
|
||||
add: '新增',
|
||||
|
||||
22
src/i18n/pages/menu/en.js
Normal file
22
src/i18n/pages/menu/en.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
m: {
|
||||
menuName: 'menuName',
|
||||
menuState: 'menuState',
|
||||
icon: 'icon',
|
||||
menuid: 'menuid',
|
||||
menuType: 'menuType',
|
||||
sort: 'sort',
|
||||
authorityID: 'authorityID',
|
||||
componentPath: 'componentPath',
|
||||
isShow: 'isShow',
|
||||
parentMenu: 'parentMenu',
|
||||
directory: 'directory',
|
||||
menu: 'menu',
|
||||
button: 'button',
|
||||
link: 'link',
|
||||
isFrame: 'isFrame',
|
||||
routePath: 'routePath',
|
||||
permissionStr: 'permission',
|
||||
isCache: 'isCache',
|
||||
}
|
||||
}
|
||||
22
src/i18n/pages/menu/zh-cn.js
Normal file
22
src/i18n/pages/menu/zh-cn.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
m: {
|
||||
menuName: '菜单名称',
|
||||
menuState: '菜单状态',
|
||||
icon: '图标',
|
||||
menuid: '菜单id',
|
||||
menuType: '菜单类型',
|
||||
sort: '排序',
|
||||
authorityID: '权限标识',
|
||||
componentPath: '组件路径',
|
||||
isShow: '是否显示',
|
||||
parentMenu: '上级菜单',
|
||||
directory: '目录',
|
||||
menu: '菜单',
|
||||
button: '按钮',
|
||||
link: '链接',
|
||||
isFrame: '是否外链',
|
||||
routePath: '路由地址',
|
||||
permissionStr: '权限字符',
|
||||
isCache: '是否缓存',
|
||||
}
|
||||
}
|
||||
22
src/i18n/pages/menu/zh-tw.js
Normal file
22
src/i18n/pages/menu/zh-tw.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
m: {
|
||||
menuName: '菜單名稱',
|
||||
menuState: '菜單狀態',
|
||||
icon: '圖標',
|
||||
menuid: '菜單id',
|
||||
menuType: '菜單類型',
|
||||
sort: '排序',
|
||||
authorityID: '權限標識',
|
||||
componentPath: '組件路徑',
|
||||
isShow: '是否顯示',
|
||||
parentMenu: '上級菜單',
|
||||
directory: '目錄',
|
||||
menu: '菜單',
|
||||
button: '按鈕',
|
||||
link: '鏈接',
|
||||
isFrame: '是否外鏈',
|
||||
routePath: '路由地址',
|
||||
permissionStr: '權限字符',
|
||||
isCache: '是否緩存',
|
||||
}
|
||||
}
|
||||
18
src/layout/components/AppMain.vue
Normal file
18
src/layout/components/AppMain.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<el-main class="app-main">
|
||||
<router-view v-slot="{ Component, route }" :key="route.path">
|
||||
<transition appear name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</template>
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
const cachedViews = computed(() => {
|
||||
return store.state.tagsView.cachedViews
|
||||
})
|
||||
</script>
|
||||
@ -40,7 +40,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
@ -74,9 +73,10 @@ function handleCommand(command) {
|
||||
}
|
||||
|
||||
function logout() {
|
||||
ElMessageBox.confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
|
||||
confirmButtonText: proxy.$t('common.ok'),
|
||||
cancelButtonText: proxy.$t('common.cancel'),
|
||||
proxy
|
||||
.$confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
@ -94,21 +94,23 @@ function setLayout() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .el-menu {
|
||||
// // display: inline-table;
|
||||
// .el-menu-item {
|
||||
// vertical-align: center;
|
||||
// }
|
||||
// }
|
||||
.el-menu {
|
||||
// display: inline-table;
|
||||
border-bottom: none;
|
||||
.el-menu-item {
|
||||
vertical-align: center;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
height: 50px;
|
||||
height: var(--base-header-height);
|
||||
line-height: var(--base-header-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--base-topBar-background);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
line-height: var(--base-header-height);
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
@ -134,8 +136,6 @@ function setLayout() {
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
@ -4,26 +4,33 @@
|
||||
<h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
|
||||
</div>
|
||||
<div class="setting-drawer-block-checbox">
|
||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
|
||||
<div class="item" @click="handleTheme('theme-dark')">
|
||||
<img src="@/assets/images/dark.svg" alt="dark" />
|
||||
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
|
||||
<div class="item" @click="handleTheme('theme-light')">
|
||||
<img src="@/assets/images/light.svg" alt="light" />
|
||||
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
|
||||
<div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<el-icon><Check /></el-icon>
|
||||
</div>
|
||||
<el-icon><moon /></el-icon>
|
||||
{{ $t('layout.darkMode') }}
|
||||
</div>
|
||||
<div class="drawer-item">
|
||||
<el-radio-group v-model="mode" size="small">
|
||||
<el-radio label="dark">{{ $t('layout.darkMode') }}</el-radio>
|
||||
<el-radio label="light">{{ $t('layout.lightMode') }}</el-radio>
|
||||
<el-radio label="cafe">cafe</el-radio>
|
||||
<!-- <el-radio label="contrast">contrast</el-radio> -->
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!-- <div class="drawer-item">
|
||||
<span>暗黑模式</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="isDark" class="mt-2" inline-prompt />
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="drawer-item">
|
||||
<span>{{ $t('layout.themeColor') }}</span>
|
||||
<span class="comp-style">
|
||||
@ -46,7 +53,12 @@
|
||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>显示底部栏</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="showFooter" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="drawer-item">
|
||||
<span>{{ $t('layout.fixed') }} Header</span>
|
||||
<span class="comp-style">
|
||||
@ -76,9 +88,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import originElementPlus from 'element-plus/theme-chalk/index.css'
|
||||
|
||||
import 'element-plus/theme-chalk/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import { useDark, useCycleList, useColorMode } from '@vueuse/core'
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||
import { getLightColor } from '@/utils/index'
|
||||
|
||||
@ -90,7 +102,16 @@ const sideTheme = ref(store.state.settings.sideTheme)
|
||||
const storeSettings = computed(() => store.state.settings)
|
||||
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
|
||||
|
||||
const blackTheme = ref(false)
|
||||
// 可以手动更改当前值 model.value = 'cafe'
|
||||
const mode = useColorMode({
|
||||
modes: {
|
||||
// custom colors
|
||||
contrast: 'dark contrast',
|
||||
cafe: 'cafe',
|
||||
},
|
||||
})
|
||||
const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
|
||||
const isDark = useDark()
|
||||
|
||||
/** 是否需要topnav */
|
||||
const topNav = computed({
|
||||
@ -103,6 +124,8 @@ const topNav = computed({
|
||||
if (!val) {
|
||||
store.dispatch('app/toggleSideBarHide', false)
|
||||
store.commit('SET_SIDEBAR_ROUTERS', store.state.permission.defaultRoutes)
|
||||
// TODO 临时解决切换topnav路由跳转问题
|
||||
setTimeout('window.location.reload()', 100)
|
||||
}
|
||||
},
|
||||
})
|
||||
@ -126,6 +149,16 @@ const fixedHeader = computed({
|
||||
})
|
||||
},
|
||||
})
|
||||
// 是否显示底部
|
||||
const showFooter = computed({
|
||||
get: () => storeSettings.value.showFooter,
|
||||
set: (val) => {
|
||||
store.dispatch('settings/changeSetting', {
|
||||
key: 'showFooter',
|
||||
value: val,
|
||||
})
|
||||
},
|
||||
})
|
||||
/**是否需要侧边栏的logo */
|
||||
const sidebarLogo = computed({
|
||||
get: () => storeSettings.value.sidebarLogo,
|
||||
@ -161,15 +194,26 @@ watch(
|
||||
watch(
|
||||
() => sideTheme,
|
||||
(val) => {
|
||||
console.log(val.value)
|
||||
const body = document.documentElement
|
||||
if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
|
||||
else body.setAttribute('data-theme', '')
|
||||
body.setAttribute('data-theme', '')
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
)
|
||||
watch(
|
||||
() => mode,
|
||||
(val) => {
|
||||
console.log(val.value)
|
||||
if (val.value === 'dark') {
|
||||
handleTheme('')
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
)
|
||||
/**
|
||||
* 改变主题颜色
|
||||
*/
|
||||
@ -195,9 +239,7 @@ function handleTheme(val) {
|
||||
sideTheme.value = val
|
||||
const body = document.documentElement
|
||||
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
|
||||
else body.setAttribute('data-theme', '')
|
||||
console.log('change ' + val)
|
||||
blackTheme.value = val === 'theme-black'
|
||||
else body.removeAttribute('data-theme')
|
||||
}
|
||||
function saveSetting() {
|
||||
proxy.$modal.loading('正在保存到本地，请稍候...')
|
||||
@ -209,9 +251,10 @@ function saveSetting() {
|
||||
dynamicTitle: storeSettings.value.dynamicTitle,
|
||||
sideTheme: storeSettings.value.sideTheme,
|
||||
theme: storeSettings.value.theme,
|
||||
showFooter: storeSettings.value.showFooter,
|
||||
}
|
||||
localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
|
||||
setTimeout(proxy.$modal.closeLoading(), 1000)
|
||||
setTimeout(proxy.$modal.closeLoading(), 500)
|
||||
}
|
||||
function resetSetting() {
|
||||
proxy.$modal.loading('正在清除设置缓存并刷新，请稍候...')
|
||||
@ -230,7 +273,7 @@ defineExpose({
|
||||
<style lang="scss" scoped>
|
||||
.setting-drawer-title {
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: var(--base-text-color-rgba);
|
||||
line-height: 22px;
|
||||
font-weight: bold;
|
||||
.drawer-title {
|
||||
@ -244,7 +287,7 @@ defineExpose({
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.setting-drawer-block-checbox-item {
|
||||
.item {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
border-radius: 2px;
|
||||
@ -278,7 +321,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.drawer-item {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
color: var(--base-text-color-rgba);
|
||||
padding: 12px 0;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
|
||||
defineProps({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-aside :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
|
||||
<el-aside :data-theme="sideTheme" class="sidebar" :class="{ 'has-logo': showLogo }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
|
||||
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
|
||||
@ -20,7 +20,6 @@
|
||||
<script setup>
|
||||
import Logo from './Logo'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
@ -40,7 +39,3 @@ const activeMenu = computed(() => {
|
||||
return path
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
</style>
|
||||
|
||||
@ -10,18 +10,19 @@
|
||||
class="tags-view-item"
|
||||
:style="activeStyle(tag)"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
@contextmenu.prevent="openMenu(tag, $event)">
|
||||
<span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
|
||||
<span v-else>{{ tag.title }}</span>
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" style="width: 10px; height: 10px; display: inline-block">
|
||||
<close class="el-icon-close close" style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{ $t('tagsView.refresh') }}</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}
|
||||
</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{ $t('tagsView.closeOther') }}</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{ $t('tagsView.closeLeft') }}</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{ $t('tagsView.closeRight') }}</li>
|
||||
@ -225,7 +226,7 @@ function handleScroll() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 34px;
|
||||
height: var(--base-tags-height);
|
||||
width: 100%;
|
||||
background: var(--base-topBar-background);
|
||||
// border-bottom: 1px solid #d8dce5;
|
||||
@ -237,22 +238,35 @@ function handleScroll() {
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #ccc;
|
||||
// border: 1px solid #ccc;
|
||||
color: var(--el-text-color-regular);
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
.close {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
color: #fff;
|
||||
.close {
|
||||
display: inline-block !important;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
|
||||
<!-- 移动端打开菜单遮罩 -->
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar v-if="!sidebar.hide" />
|
||||
<el-drawer v-if="device === 'mobile'" v-model="menuDrawer" :with-header="false" modal-class="sidebar-mobile" direction="ltr">
|
||||
<sidebar />
|
||||
</el-drawer>
|
||||
<sidebar v-else-if="!sidebar.hide" />
|
||||
|
||||
<el-container class="main-container flex-center" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
|
||||
<el-header :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar @setLayout="setLayout" />
|
||||
@ -17,6 +20,9 @@
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
<el-footer v-if="showFooter">
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</el-footer>
|
||||
<settings ref="settingRef" />
|
||||
</el-container>
|
||||
</el-container>
|
||||
@ -27,14 +33,19 @@ import { useWindowSize } from '@vueuse/core'
|
||||
import Sidebar from './components/Sidebar/index.vue'
|
||||
import { Navbar, Settings, TagsView } from './components'
|
||||
import defaultSettings from '@/settings'
|
||||
|
||||
const menuDrawer = computed({
|
||||
get: () => store.state.app.sidebar.opened,
|
||||
set: (val) => {
|
||||
store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
})
|
||||
const store = useStore()
|
||||
const theme = computed(() => store.state.settings.theme)
|
||||
// const sideTheme = computed(() => store.state.settings.sideTheme)
|
||||
const sidebar = computed(() => store.state.app.sidebar)
|
||||
const device = computed(() => store.state.app.device)
|
||||
const needTagsView = computed(() => store.state.settings.tagsView)
|
||||
const fixedHeader = computed(() => store.state.settings.fixedHeader)
|
||||
const showFooter = computed(() => store.state.settings.showFooter)
|
||||
|
||||
const route = useRoute()
|
||||
store.dispatch('tagsView/addCachedView', route)
|
||||
@ -53,18 +64,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||
|
||||
watchEffect(() => {
|
||||
if (device.value === 'mobile' && sidebar.value.opened) {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
// store.dispatch('app/closeSideBar')
|
||||
}
|
||||
if (width.value - 1 < WIDTH) {
|
||||
store.dispatch('app/toggleDevice', 'mobile')
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||
// store.dispatch('app/closeSideBar')
|
||||
} else {
|
||||
store.dispatch('app/toggleDevice', 'desktop')
|
||||
}
|
||||
})
|
||||
|
||||
function handleClickOutside() {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
store.dispatch('app/closeSideBar')
|
||||
}
|
||||
|
||||
const settingRef = ref(null)
|
||||
@ -75,7 +86,6 @@ function setLayout() {
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/mixin.scss';
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
@ -98,15 +108,7 @@ function setLayout() {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
// 移动端打开菜单背景遮罩
|
||||
.drawer-bg {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
// 固定header
|
||||
.fixed-header {
|
||||
position: sticky;
|
||||
@ -124,19 +126,33 @@ function setLayout() {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-mobile {
|
||||
.el-drawer__body {
|
||||
padding: 0;
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.el-drawer {
|
||||
width: var(--base-sidebar-width) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-header {
|
||||
--el-header-padding: 0 0px !important;
|
||||
--el-header-height: 50px !important;
|
||||
// --el-header-height: 50px !important;
|
||||
}
|
||||
.el-footer {
|
||||
--el-footer-height: var(--base-footer-height);
|
||||
line-height: var(--base-footer-height);
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
// .app-main {
|
||||
// min-height: calc(100vh - 84px - var(--base-footer-height));
|
||||
// }
|
||||
.el-header {
|
||||
--el-header-height: 84px !important;
|
||||
--el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,6 @@ import { createApp } from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import elZhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
|
||||
import 'dayjs/locale/zh-cn'
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
|
||||
|
||||
@ -64,7 +64,22 @@ const localCache = {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
const cookie = {
|
||||
set(key, data, expires) {
|
||||
Cookies.set(key, data, { expires: expires })
|
||||
},
|
||||
set(key, data) {
|
||||
Cookies.set(key, data)
|
||||
},
|
||||
remove(key) {
|
||||
Cookies.remove(key)
|
||||
},
|
||||
get(key) {
|
||||
Cookies.get(key)
|
||||
}
|
||||
}
|
||||
export default {
|
||||
/**
|
||||
* 会话级缓存
|
||||
@ -73,5 +88,9 @@ export default {
|
||||
/**
|
||||
* 本地缓存
|
||||
*/
|
||||
local: localCache
|
||||
local: localCache,
|
||||
/**
|
||||
* cookie存储
|
||||
*/
|
||||
cookie: cookie
|
||||
}
|
||||
@ -55,5 +55,5 @@ export default {
|
||||
/**
|
||||
* 版权信息
|
||||
*/
|
||||
copyright: 'Copyright ©2022 izhaorui.cn All Rights Reserved.'
|
||||
copyright: 'Copyright ©2022 <a target="_black" href="http://www.izhaorui.cn">izhaorui.cn</a> All Rights Reserved.',
|
||||
}
|
||||
@ -7,7 +7,7 @@ const state = {
|
||||
hide: false
|
||||
},
|
||||
device: 'desktop',
|
||||
size: Cookies.get('size') || 'default',
|
||||
size: Cookies.get('size') || 'small',
|
||||
lang: Cookies.get('lang') || 'zh-cn'
|
||||
}
|
||||
|
||||
@ -50,8 +50,8 @@ const actions = {
|
||||
toggleSideBar({ commit }) {
|
||||
commit('TOGGLE_SIDEBAR')
|
||||
},
|
||||
closeSideBar({ commit }, { withoutAnimation }) {
|
||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||
closeSideBar({ commit }) {
|
||||
commit('CLOSE_SIDEBAR', '')
|
||||
},
|
||||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
|
||||
@ -13,7 +13,8 @@ const state = {
|
||||
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
|
||||
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
|
||||
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
|
||||
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
|
||||
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
|
||||
showFooter: storageSetting.showFooter === undefined ? true : storageSetting.showFooter
|
||||
}
|
||||
const mutations = {
|
||||
CHANGE_SETTING: (state, { key, value }) => {
|
||||
|
||||
@ -1,49 +1,57 @@
|
||||
const baseURL =
|
||||
import.meta.env.VITE_APP_BASE_API
|
||||
import dayjs from 'dayjs'
|
||||
/**
|
||||
* 通用js方法封装处理
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
|
||||
// 日期格式化
|
||||
export function parseTime(time, pattern) {
|
||||
/**
|
||||
* 日期格式化
|
||||
* @param {*} time
|
||||
* @param {* } pattern 'YYYY-MM-DD HH:mm:ss'
|
||||
* @returns
|
||||
*/
|
||||
export function parseTime(time, pattern = 'YYYY-MM-DD HH:mm:ss') {
|
||||
if (arguments.length === 0 || !time) {
|
||||
return null
|
||||
}
|
||||
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
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), '');
|
||||
}
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||
let value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
|
||||
if (result.length > 0 && value < 10) {
|
||||
value = '0' + value
|
||||
}
|
||||
return value || 0
|
||||
})
|
||||
return time_str
|
||||
|
||||
return dayjs(time).format(pattern)
|
||||
// const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
// let date
|
||||
// if (typeof time === 'object') {
|
||||
// date = time
|
||||
// } else {
|
||||
// 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), '');
|
||||
// }
|
||||
// if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
// time = time * 1000
|
||||
// }
|
||||
// date = new Date(time)
|
||||
// }
|
||||
// const formatObj = {
|
||||
// y: date.getFullYear(),
|
||||
// m: date.getMonth() + 1,
|
||||
// d: date.getDate(),
|
||||
// h: date.getHours(),
|
||||
// i: date.getMinutes(),
|
||||
// s: date.getSeconds(),
|
||||
// a: date.getDay()
|
||||
// }
|
||||
// const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||
// let value = formatObj[key]
|
||||
// // Note: getDay() returns 0 on Sunday
|
||||
// if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
|
||||
// if (result.length > 0 && value < 10) {
|
||||
// value = '0' + value
|
||||
// }
|
||||
// return value || 0
|
||||
// })
|
||||
// return time_str
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
export const cookie = {
|
||||
set(key, data, expires) {
|
||||
Cookies.set(key, data, { expires: expires })
|
||||
},
|
||||
set(key, data) {
|
||||
Cookies.set(key, data)
|
||||
},
|
||||
remove(key) {
|
||||
Cookies.remove(key)
|
||||
},
|
||||
get(key) {
|
||||
Cookies.get(key)
|
||||
}
|
||||
}
|
||||
|
||||
export const local = {
|
||||
set(key, data) {
|
||||
return localStorage.setItem(key, data)
|
||||
},
|
||||
remove(key) {
|
||||
return localStorage.removeItem(key)
|
||||
},
|
||||
get(key) {
|
||||
return localStorage.getItem(key)
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
<svg-icon name="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text" v-waves>在线用户</div>
|
||||
<div class="card-panel-text" v-waves>{{$t('layout.onlineUsers')}}</div>
|
||||
<div id="onlineNum" class="card-panel-num">{{ state.onlineUserNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -17,7 +17,7 @@
|
||||
<svg-icon name="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text" v-waves>消息</div>
|
||||
<div class="card-panel-text" v-waves>{{$t('layout.message')}}</div>
|
||||
<div class="card-panel-num" id="messageNum">{{ state.chatNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -28,7 +28,7 @@
|
||||
<svg-icon name="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text" v-waves>金额</div>
|
||||
<div class="card-panel-text" v-waves>{{$t('layout.amount')}}</div>
|
||||
<div id="amount" class="card-panel-num">{{ state.amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,7 +39,7 @@
|
||||
<svg-icon name="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text" v-waves>订单</div>
|
||||
<div class="card-panel-text" v-waves>{{$t('layout.order')}}</div>
|
||||
<div id="order" class="card-panel-num">{{ state.order }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :lg="16" :sm="24">
|
||||
<h2>ZRAdmin.NET后台管理框架</h2>
|
||||
<h2>ZRAdmin.NET {{ $t('layout.BackstageManagement') }}</h2>
|
||||
<p>
|
||||
ZRAdmin.NET借鉴了很多开源项目的优点，让你开发Web管理系统更简单，所以我也把它给开源了（前端
|
||||
<code>vue页面</code>主要参考若依，在此表示感谢.)
|
||||
@ -53,9 +53,7 @@
|
||||
</el-link>
|
||||
</p>
|
||||
<p>
|
||||
<el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')"
|
||||
>访问码云
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')">Gitee </el-button>
|
||||
<el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://github.com/izhaorui/ZrAdmin.NET')"
|
||||
>Github
|
||||
</el-button>
|
||||
@ -64,9 +62,9 @@
|
||||
<h3>{{ $t('layout.tip1') }}</h3>
|
||||
</el-col>
|
||||
<el-col :lg="8" :sm="24">
|
||||
<h2>技术选型</h2>
|
||||
<h2>{{ $t('layout.technicalSelection') }}</h2>
|
||||
<el-col :span="10">
|
||||
<h4>后端技术</h4>
|
||||
<h4>{{ $t('layout.backendTechnology') }}</h4>
|
||||
<ul>
|
||||
<li>NET6</li>
|
||||
<li>JWT</li>
|
||||
@ -81,7 +79,7 @@
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<h4>前端技术</h4>
|
||||
<h4>{{ $t('layout.frontendTechnology') }}</h4>
|
||||
<ul>
|
||||
<li>Vue3</li>
|
||||
<li>Vuex</li>
|
||||
@ -106,7 +104,7 @@
|
||||
</template>
|
||||
|
||||
<div class="body">
|
||||
<div style="color: red">打赏作者喝杯咖啡表示鼓励</div>
|
||||
<div style="color: red">{{ $t('layout.rewardUser') }}</div>
|
||||
<img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
|
||||
</div>
|
||||
</el-card>
|
||||
@ -122,7 +120,7 @@
|
||||
<el-link href="http://www.izhaorui.cn/doc" target="_blank"> http://www.izhaorui.cn/doc </el-link>
|
||||
</p>
|
||||
<p>
|
||||
<el-icon> <UserFilled /> </el-icon>QQ群：
|
||||
<el-icon> <UserFilled /> </el-icon>{{ $t('layout.qqGroup') }}：
|
||||
<el-link
|
||||
target="_black"
|
||||
href="https://qm.qq.com/cgi-bin/qm/qr?k=Y__-fTGo_K2UIo3nWz7QnvS8LoRfPWKm&authKey=/ldXxiuolv80PF4yC8VtLk/TvAYbIhm2LKP8YVHCxAk+x2I+iqPAM1H/IsxQ+0gC&noverify=0">
|
||||
@ -140,7 +138,6 @@
|
||||
</el-card> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-col :md="24" :lg="16" :xl="16" class="mb10">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>我的工作台</span>
|
||||
<span>{{$t('layout.myWorkbench')}}</span>
|
||||
</template>
|
||||
<div class="user-item">
|
||||
<div class="user-item-left">
|
||||
@ -20,7 +20,7 @@
|
||||
<el-col :xs="24" :sm="24" :md="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :lg="8" class="right-l-v">
|
||||
<div class="right-label">昵称：</div>
|
||||
<div class="right-label">{{$t('common.nickName')}}：</div>
|
||||
<div class="right-value">{{ userInfo.nickName }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :lg="16" class="right-l-v">
|
||||
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="16" class="right-l-v">
|
||||
<div class="right-label one-text-overflow">时间：</div>
|
||||
<div class="right-label one-text-overflow">{{$t('common.time')}}：</div>
|
||||
<div class="right-value one-text-overflow">
|
||||
{{ currentTime }}
|
||||
</div>
|
||||
@ -51,7 +51,7 @@
|
||||
</el-col>
|
||||
<el-col :lg="24" class="mt10">
|
||||
<el-button size="small" icon="edit">
|
||||
<router-link to="/user/profile">修改信息</router-link>
|
||||
<router-link to="/user/profile">{{$t('layout.modifyInformation')}}</router-link>
|
||||
</el-button>
|
||||
<!-- <el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button> -->
|
||||
</el-col>
|
||||
@ -64,8 +64,8 @@
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>在线用户</span>
|
||||
<el-button class="home-card-more" text @click="onOpenGitee">更多</el-button>
|
||||
<span>{{$t('layout.onlineUsers')}}</span>
|
||||
<el-button class="home-card-more" text @click="onOpenGitee">{{$t('btn.more')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info">
|
||||
@ -75,6 +75,7 @@
|
||||
<ul class="info-ul">
|
||||
<li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
|
||||
<div class="info-item-left" v-text="v.name"></div>
|
||||
<div>{{v.userIP}}</div>
|
||||
<div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
|
||||
</li>
|
||||
</ul></div
|
||||
@ -165,7 +166,6 @@ function onOpenGitee() {}
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
width: 97%;
|
||||
overflow: hidden;
|
||||
.home-card-more {
|
||||
float: right;
|
||||
@ -198,7 +198,7 @@ function onOpenGitee() {}
|
||||
display: flex;
|
||||
.right-label {
|
||||
color: gray;
|
||||
width: 40px;
|
||||
width: 75px;
|
||||
}
|
||||
.right-value {
|
||||
flex: 1;
|
||||
@ -244,7 +244,6 @@ function onOpenGitee() {}
|
||||
}
|
||||
}
|
||||
.dashboard-editor-container {
|
||||
padding: 18px;
|
||||
background-color: var(--base-bg-main);
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>{{ defaultSettings.copyright }}</span>
|
||||
<div v-html="defaultSettings.copyright"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -231,9 +231,5 @@ getCookie()
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
|
||||
.svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
23
src/views/monitor/cache/index.vue
vendored
23
src/views/monitor/cache/index.vue
vendored
@ -22,7 +22,7 @@
|
||||
<div class="cell">运行模式</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode == 'standalone' ? '单机' : '集群' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">端口</div>
|
||||
@ -68,7 +68,7 @@
|
||||
<div class="cell">AOF是否开启</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == '0' ? '否' : '是' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">RDB是否成功</div>
|
||||
@ -86,7 +86,9 @@
|
||||
<div class="cell">网络入口/出口</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div>
|
||||
<div class="cell" v-if="cache.info">
|
||||
{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -116,8 +118,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<gauge name="内存消耗" :max="100"
|
||||
:data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
|
||||
<gauge
|
||||
name="内存消耗"
|
||||
:max="100"
|
||||
:data="[
|
||||
{
|
||||
value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2),
|
||||
name: '内存消耗',
|
||||
},
|
||||
]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -140,7 +149,7 @@
|
||||
<script setup name="cache">
|
||||
import { getCache } from '@/api/monitor/cache'
|
||||
import * as echarts from 'echarts'
|
||||
// import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
import Gauge from '@/components/Echarts/Gauge.vue'
|
||||
|
||||
// 统计命令信息
|
||||
const commandstats = ref(null)
|
||||
@ -180,5 +189,7 @@ function getList() {
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -4,12 +4,10 @@
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<span>状态</span>
|
||||
</template>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div class="content" v-if="server.cpu">
|
||||
@ -18,20 +16,14 @@
|
||||
</el-tooltip>
|
||||
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-if="server.cpu">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ server.cpu.totalRAM }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ server.cpu.usedRam }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ server.cpu.freeRam }}
|
||||
</div>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ server.cpu.totalRAM }}</div>
|
||||
<div style="padding: 3px">已使用：{{ server.cpu.usedRam }}</div>
|
||||
<div style="padding: 3px">空闲：{{ server.cpu.freeRam }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -41,28 +33,32 @@
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
|
||||
</el-col>
|
||||
<!--
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>磁盘状态</span>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName">
|
||||
<div class="title">{{ sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ 1 }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ 1 }}
|
||||
</div>
|
||||
<template #content>
|
||||
<div style="font-size: 12px">
|
||||
<div style="padding: 3px">总量：{{ sysFile.totalSize }}GB</div>
|
||||
<div style="padding: 3px">空闲：{{ sysFile.availableFreeSpace }}GB</div>
|
||||
<div style="padding: 3px">已用：{{ sysFile.used }}GB</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(3)" />
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ 1 }} / {{ 100 }}</div>
|
||||
</el-col> -->
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
@ -74,7 +70,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;" v-if="server.sys">
|
||||
<table cellspacing="0" style="width: 100%" v-if="server.sys">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@ -124,49 +120,13 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
|
||||
<div class="title">{{sysFile.diskName }}盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<template #content>
|
||||
<div style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ sysFile.totalSize }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ sysFile.availableFreeSpace }}GB
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已用：{{ sysFile.used }}GB
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div>
|
||||
<span>.NET Core信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<table cellspacing="0" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
@ -229,7 +189,6 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page="queryParams.pageNum" :limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-model:total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-form-item :label="$t('m.menuName')" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-form-item :label="$t('m.menuState')" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
@ -33,23 +33,23 @@
|
||||
:default-expand-all="isExpandAll"
|
||||
border
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
||||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60">
|
||||
<el-table-column prop="menuName" :label="$t('m.menuName')" :show-overflow-tooltip="true" width="160"></el-table-column>
|
||||
<el-table-column prop="icon" :label="$t('m.icon')" align="center" width="60">
|
||||
<template #default="scope">
|
||||
<svg-icon :name="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="60" align="center"></el-table-column>
|
||||
<el-table-column prop="menuType" label="类型" align="center" width="80">
|
||||
<el-table-column prop="menuId" :label="$t('m.menuid')" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="menuType" :label="$t('m.menuType')" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">链接</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType == 'C'">菜单</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.menuType == 'M'">目录</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row.menuType == 'F'">按钮</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">{{ $t('m.link') }}</el-tag>
|
||||
<el-tag v-else-if="scope.row.menuType == 'C'">{{ $t('m.menu') }}</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.menuType == 'M'">{{ $t('m.directory') }}</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row.menuType == 'F'">{{ $t('m.button') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column> -->
|
||||
<el-table-column prop="orderNum" label="排序" width="90" sortable align="center">
|
||||
<el-table-column prop="orderNum" :label="$t('m.sort')" width="90" sortable align="center">
|
||||
<template #default="scope">
|
||||
<span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index)">{{ scope.row.orderNum }}</span>
|
||||
<el-input
|
||||
@ -59,24 +59,24 @@
|
||||
@blur="handleChangeSort(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="visible" label="显示" width="70" align="center">
|
||||
<el-table-column prop="perms" :label="$t('m.authorityID')" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="component" :label="$t('m.componentPath')" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="visible" :label="$t('m.isShow')" width="70" align="center">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_show_hide" :value="scope.row.visible" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<el-table-column prop="status" :label="$t('m.menuState')" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
<el-table-column :label="$t('common.addTime')" align="center" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="170" class-name="small-padding fixed-width">
|
||||
<el-table-column :label="$t('btn.operate')" align="center" width="170" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button text size="small" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']"></el-button>
|
||||
<el-button text size="small" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']"></el-button>
|
||||
@ -90,7 +90,7 @@
|
||||
<el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :lg="24">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-form-item :label="$t('m.parentMenu')">
|
||||
<el-cascader
|
||||
class="w100"
|
||||
:options="menuOptions"
|
||||
@ -106,16 +106,16 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24">
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-form-item :label="$t('m.menuType')" prop="menuType">
|
||||
<el-radio-group v-model="form.menuType">
|
||||
<el-radio label="M">目录</el-radio>
|
||||
<el-radio label="C">菜单</el-radio>
|
||||
<el-radio label="F">按钮</el-radio>
|
||||
<el-radio label="M">{{ $t('m.directory') }}</el-radio>
|
||||
<el-radio label="C">{{ $t('m.menu') }}</el-radio>
|
||||
<el-radio label="F">{{ $t('m.button') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-form-item :label="$t('m.menuName')" prop="menuName">
|
||||
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -127,18 +127,18 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
多语言key
|
||||
{{ $t('languageKey') }}
|
||||
</template>
|
||||
<el-input v-model="form.menuNameKey" placeholder="请输入多语言菜单key" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="显示排序" prop="orderNum">
|
||||
<el-form-item :label="$t('m.sort')" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" v-if="form.menuType != 'F'">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<el-form-item :label="$t('m.icon')" prop="icon">
|
||||
<el-popover placement="bottom-start" :width="540" v-model:visible="showChooseIcon" trigger="click" @show="showSelectIcon">
|
||||
<template #reference>
|
||||
<el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
|
||||
@ -162,11 +162,11 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
是否外链
|
||||
{{ $t('m.isFrame') }}
|
||||
</template>
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
<el-radio label="1">{{ $t('common.yes') }}</el-radio>
|
||||
<el-radio label="0">{{ $t('common.no') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -178,7 +178,7 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
路由地址
|
||||
{{ $t('m.routePath') }}
|
||||
</template>
|
||||
<el-input v-model="form.path" placeholder="请输入路由地址" />
|
||||
</el-form-item>
|
||||
@ -191,7 +191,7 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
组件路径
|
||||
{{ $t('m.componentPath') }}
|
||||
</template>
|
||||
<el-input v-model="form.component" placeholder="请输入组件路径" />
|
||||
</el-form-item>
|
||||
@ -205,7 +205,7 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
权限字符
|
||||
{{ $t('m.permissionStr') }}
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -230,11 +230,11 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
是否缓存
|
||||
{{ $t('m.isCache') }}
|
||||
</template>
|
||||
<el-radio-group v-model="form.isCache">
|
||||
<el-radio label="0">缓存</el-radio>
|
||||
<el-radio label="1">不缓存</el-radio>
|
||||
<el-radio label="0">{{ $t('common.yes') }}</el-radio>
|
||||
<el-radio label="1">{{ $t('common.no') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -246,7 +246,7 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
显示状态
|
||||
{{ $t('m.isShow') }}
|
||||
</template>
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio v-for="dict in sys_show_hide" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
|
||||
@ -261,7 +261,7 @@
|
||||
<questionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
菜单状态
|
||||
{{ $t('m.menuState') }}
|
||||
</template>
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
|
||||
@ -393,7 +393,7 @@ function handleAdd(row) {
|
||||
form.value.parentId = 0
|
||||
}
|
||||
open.value = true
|
||||
title.value = '添加菜单'
|
||||
title.value = proxy.$t('btn.add')
|
||||
}
|
||||
/** 展开/折叠操作 */
|
||||
function toggleExpandAll() {
|
||||
@ -410,7 +410,7 @@ async function handleUpdate(row) {
|
||||
getMenu(row.menuId).then((response) => {
|
||||
form.value = response.data
|
||||
open.value = true
|
||||
title.value = '修改菜单'
|
||||
title.value = proxy.$t('btn.edit')
|
||||
})
|
||||
}
|
||||
/** 提交按钮 */
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
<el-table-column label="创建者" align="center" prop="createBy" width="100" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||
<span>{{ parseTime(scope.row.createTime, 'YYYY-MM-DD') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
|
||||
@ -8,16 +8,16 @@
|
||||
<gen-info-form ref="genInfo" :info="info" :tables="tables" :columns="columns" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="cloum">
|
||||
<el-table ref="dragTableRef" v-loading="loading" :data="columns" row-key="columnId" min-height="100px" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" class-name="allowDrag" />
|
||||
<el-table-column label="字段列名" prop="columnName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字段描述">
|
||||
<el-table ref="dragTableRef" v-loading="loading" :data="columns" row-key="columnId" min-height="80px" :max-height="tableHeight">
|
||||
<el-table-column label="#" type="index" class-name="allowDrag" width="60" fixed />
|
||||
<el-table-column label="字段列名" prop="columnName" :show-overflow-tooltip="true" width="90" fixed />
|
||||
<el-table-column label="字段描述" fixed width="120">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.columnComment" :ref="setColumnsRef" @keydown="nextFocus(scope.row, scope.$index, $event)"> </el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物理类型" prop="columnType" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="C#类型">
|
||||
<el-table-column label="物理类型" prop="columnType" :show-overflow-tooltip="true" width="90" />
|
||||
<el-table-column label="C#类型" width="140">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.csharpType">
|
||||
<el-option label="int" value="int" />
|
||||
@ -30,33 +30,40 @@
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="C#属性">
|
||||
<el-table-column label="C#属性" width="100">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.csharpField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="插入" width="50" align="center" v-if="info.tplCategory != 'select'">
|
||||
<el-table-column label="插入" width="60" align="center" v-if="info.tplCategory != 'select'">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.isInsert" :disabled="scope.row.isIncrement"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编辑" width="50" align="center" v-if="info.tplCategory != 'select'">
|
||||
<el-table-column label="编辑" width="60" align="center" v-if="info.tplCategory != 'select'">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.isEdit" :disabled="scope.row.isPk || scope.row.isIncrement"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" width="50" align="center">
|
||||
<el-table-column label="排序" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox
|
||||
v-model="scope.row.isSort"
|
||||
:disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.isList"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" width="50" align="center">
|
||||
<el-table-column label="查询" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.isQuery" :disabled="scope.row.htmlType == 'imageUpload' || scope.row.htmlType == 'fileUpload'">
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式">
|
||||
<el-table-column label="查询方式" width="90" align="center">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.queryType" :disabled="scope.row.htmlType == 'datetime'" v-if="scope.row.isQuery">
|
||||
<el-option label="=" value="EQ" />
|
||||
@ -70,12 +77,12 @@
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填" width="60">
|
||||
<el-table-column label="必填" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.isRequired"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单显示类型">
|
||||
<el-table-column label="表单显示类型" width="140">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.htmlType">
|
||||
<el-option label="文本框" value="input" />
|
||||
@ -92,15 +99,14 @@
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型">
|
||||
<el-table-column label="字典类型" min-width="140">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.dictType"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType == 'checkbox'"
|
||||
>
|
||||
v-if="scope.row.htmlType == 'select' || scope.row.htmlType == 'radio' || scope.row.htmlType == 'checkbox'">
|
||||
<el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
|
||||
<span style="float: left">{{ dict.dictName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
|
||||
@ -108,6 +114,11 @@
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.remark"> </el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@ -129,7 +140,7 @@ import Sortable from 'sortablejs'
|
||||
// 选中选项卡的 name
|
||||
const activeName = ref('cloum')
|
||||
// 表格的高度
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 275 + 'px')
|
||||
// 表信息
|
||||
const tables = ref([])
|
||||
// 表列信息
|
||||
@ -151,7 +162,7 @@ function handleQuery() {
|
||||
getGenTable(tableId).then((res) => {
|
||||
loading.value = false
|
||||
columns.value = res.data.info.columns
|
||||
info.value = res.data.info
|
||||
info.value = { ...res.data.info, ...res.data.info.options }
|
||||
tables.value = res.data.tables // 子表
|
||||
})
|
||||
}
|
||||
@ -176,8 +187,9 @@ function submitForm() {
|
||||
parentMenuId: info.value.parentMenuId,
|
||||
sortField: info.value.sortField,
|
||||
sortType: info.value.sortType,
|
||||
checkedBtn: info.value.checkedBtn?.toString(),
|
||||
checkedBtn: info.value.checkedBtn,
|
||||
permissionPrefix: info.value.permissionPrefix,
|
||||
colNum: info.value.colNum,
|
||||
}
|
||||
console.log('genForm', genTable)
|
||||
|
||||
|
||||
@ -87,8 +87,7 @@
|
||||
:props="{ checkStrictly: true, value: 'menuId', label: 'menuName', emitPath: false }"
|
||||
placeholder="请选择上级菜单"
|
||||
clearable
|
||||
v-model="info.parentMenuId"
|
||||
>
|
||||
v-model="info.parentMenuId">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.menuName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
@ -97,7 +96,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-form-item label="查询排序字段">
|
||||
<el-form-item label="默认查询排序字段">
|
||||
<el-select v-model="info.sortField" placeholder="请选择字段" class="mr10" clearable="">
|
||||
<el-option v-for="item in columns" :key="item.columnId" :label="item.csharpField" :value="item.csharpField"> </el-option>
|
||||
</el-select>
|
||||
@ -164,6 +163,17 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :lg="12">
|
||||
<el-form-item prop="vuePath" label="Vue路径">
|
||||
<el-input v-model="info.vuePath" placeholder="Vue项目所在绝对路径到项目根目录，eg：D:/ZRAdmin-vue"></el-input>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :lg="12">
|
||||
<el-form-item prop="colNum" label="一行显示列">
|
||||
<el-radio v-model="info.colNum" :label="12">2列</el-radio>
|
||||
<el-radio v-model="info.colNum" :label="24">1列</el-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" v-show="info.tplCategory != 'select'">
|
||||
<el-form-item label="显示按钮">
|
||||
<el-checkbox-group v-model="info.checkedBtn" @change="checkedBtnSelect">
|
||||
@ -201,8 +211,7 @@
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
:label="column.csharpField + '：' + column.columnComment"
|
||||
:value="column.csharpField"
|
||||
></el-option>
|
||||
:value="column.csharpField"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -221,8 +230,7 @@
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
:label="column.csharpField + '：' + column.columnComment"
|
||||
:value="column.csharpField"
|
||||
></el-option>
|
||||
:value="column.csharpField"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -241,8 +249,7 @@
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
:label="column.csharpField + '：' + column.columnComment"
|
||||
:value="column.csharpField"
|
||||
></el-option>
|
||||
:value="column.csharpField"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -279,12 +286,7 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select v-model="info.subTableFkName">
|
||||
<el-option
|
||||
v-for="(column, index) in subColumns"
|
||||
:key="index"
|
||||
:label="column.csharpField"
|
||||
:value="column.csharpField"
|
||||
>
|
||||
<el-option v-for="(column, index) in subColumns" :key="index" :label="column.csharpField" :value="column.csharpField">
|
||||
<span style="float: left">{{ column.csharpField }}</span>
|
||||
<span style="float: right">{{ column.columnComment }}</span>
|
||||
</el-option>
|
||||
@ -301,7 +303,6 @@ import { queryColumnInfo } from '@/api/tool/gen'
|
||||
|
||||
const subColumns = ref([])
|
||||
const menuOptions = ref([])
|
||||
// const checkedBtn = ref([])
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
@ -361,7 +362,6 @@ function setSubTableColumns(value) {
|
||||
for (var item in props.tables) {
|
||||
const obj = props.tables[item]
|
||||
if (value === obj.tableName) {
|
||||
// subColumns.value = props.tables[item].columns
|
||||
queryColumnInfo(obj.tableId).then((res) => {
|
||||
if (res.code == 200) {
|
||||
subColumns.value = res.data.columns
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination :page="queryParams.pageNum" v-model:limit="queryParams.pageSize" v-model:total="total" @pagination="getList" />
|
||||
<pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" v-model:total="total" @pagination="getList" />
|
||||
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body>
|
||||
@ -173,7 +173,7 @@ function openImportTable() {
|
||||
function handlePreview(row) {
|
||||
proxy.$refs['codeform'].validate((valid) => {
|
||||
if (!valid) {
|
||||
proxy.$modal.msgError('请先完成表格')
|
||||
proxy.$modal.msgError('请先完成表格内容')
|
||||
return
|
||||
}
|
||||
proxy.$modal.loading('请稍后...')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user