按UI调整系统管理界面
This commit is contained in:
wangchengming
parent
30e176fbda
commit
8b74ce11db
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/otherbg.png
Normal file
BIN
src/assets/images/otherbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
BIN
src/assets/images/search_bg.png
Normal file
BIN
src/assets/images/search_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -18,6 +18,7 @@
|
|||
.cell {
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,9 @@ aside {
|
|||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
width: 1840px;
|
||||
margin: 0 auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
|
|
|
|||
|
|
@ -7,53 +7,79 @@
|
|||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
|
|
@ -63,6 +89,7 @@
|
|||
.el-form .el-form-item__label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
|
@ -75,20 +102,35 @@
|
|||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
font-family: Microsoft YaHei !important;
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9 !important;
|
||||
color: #515a6e;
|
||||
height: 40px !important;
|
||||
font-size: 13px;
|
||||
background-color: #f4f4f3 !important;
|
||||
color: #3B3B3B;
|
||||
height: 50px !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*="el-icon-"]+span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置行单元格样式
|
||||
.el-table__cell {
|
||||
font-family: Microsoft YaHei !important;
|
||||
// font-weight: 400 !important;
|
||||
font-size: 16px !important;
|
||||
color: #1E1E1E !important;
|
||||
padding: 4px 0px !important;
|
||||
height: 54px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
|
|
@ -126,6 +168,7 @@
|
|||
>.el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
>.el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -155,7 +198,8 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown, .el-icon-arrow-down {
|
||||
.el-table .el-dropdown,
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -201,6 +245,10 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
|
|
@ -288,3 +336,432 @@
|
|||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background-color: var(--splitpanes-default-bg) !important;
|
||||
}
|
||||
|
||||
// 自定义行样式
|
||||
.my_row {
|
||||
padding: 0px;
|
||||
margin: 17px 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.primaryBtn {
|
||||
height: 30px;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
background: #1a75e6;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
padding: 7px 25px 8px 24px;
|
||||
}
|
||||
|
||||
.primaryBtn:hover {
|
||||
background: #1a75e6;
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before,
|
||||
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before {
|
||||
color: #FF2A00;
|
||||
}
|
||||
|
||||
// 确认消息框
|
||||
.el-message-box__header {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
// 查询条件表单样式覆盖
|
||||
.searchPanel {
|
||||
width: 1840px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-form-item--default {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-form--inline .el-form-item {
|
||||
display: inline-flex;
|
||||
margin-right: 26px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-form-item__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
min-width: 34px;
|
||||
}
|
||||
|
||||
// 文本输入框样式
|
||||
.searchPanelForm .el-input__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-input__clear {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-input__clear:hover {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-input__inner::placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 选择框样式
|
||||
.searchPanelForm .el-select__wrapper {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-select__wrapper.is-hovering:not(.is-focused) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-select__placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-select__caret {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
// 查询日期框样式
|
||||
.searchPanelForm .el-date-editor .el-range__icon {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-date-editor .el-range-separator {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-date-editor .el-range-input {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-date-editor .el-range-input::placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-date-editor .el-range__close-icon {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.searchPanelForm .el-date-editor.el-input__wrapper:hover {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 分页器
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.my-pagination .el-pagination__sizes,
|
||||
.el-pagination__total {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000001;
|
||||
}
|
||||
|
||||
.my-pagination .el-pagination__jump {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000001;
|
||||
}
|
||||
|
||||
.my-pagination .el-select__placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000001;
|
||||
}
|
||||
|
||||
.my-pagination .el-pagination__editor.el-input {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.my-pagination .el-input__wrapper {
|
||||
height: 28px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.my-pagination .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.my-pagination .el-select__wrapper {
|
||||
height: 28px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.my-pagination.is-background .btn-prev,
|
||||
.my-pagination.is-background .el-pager li,
|
||||
.my-pagination.is-background .btn-next {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #f4f4f5;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.my-pagination.is-background .btn-next.is-active,
|
||||
.my-pagination.is-background .btn-prev.is-active,
|
||||
.my-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #467CF6;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.my-pagination .btn-next .el-icon,
|
||||
.my-pagination .btn-prev .el-icon {
|
||||
fill: #C2CAD6;
|
||||
}
|
||||
|
||||
// 主内容显示面板
|
||||
.el-card {
|
||||
border: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 0px 20px 20px 20px !important;
|
||||
}
|
||||
|
||||
.el-card.is-always-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
height: 60px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 30px !important;
|
||||
}
|
||||
|
||||
.subHeaderTitle {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
// 弹窗样式覆盖
|
||||
.my_dialog {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__header {
|
||||
border-bottom: 1px solid #D4DAE1 !important;
|
||||
padding: 16px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__headerbtn {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__headerbtn .el-dialog__close {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__body {
|
||||
// font-family: Microsoft YaHei;
|
||||
// font-weight: 400;
|
||||
// font-size: 16px;
|
||||
// color: #3B3B3B;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__footer {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #D4DAE1 !important;
|
||||
}
|
||||
|
||||
// 表单录入样式
|
||||
.myInsertForm .el-form-item--default {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.myInsertForm .el-form--inline .el-form-item {
|
||||
display: inline-flex;
|
||||
margin-right: 26px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.myInsertForm .el-form-item__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #3B3B3B;
|
||||
// min-width: 34px;
|
||||
}
|
||||
|
||||
// 文本输入框样式
|
||||
.myInsertForm .el-input__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.myInsertForm .el-input__clear {
|
||||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
.myInsertForm .el-input__clear:hover {
|
||||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
.myInsertForm .el-input__inner::placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
.myInsertForm .el-input__wrapper {
|
||||
// background-color: transparent;
|
||||
// border-radius: 0;
|
||||
// box-shadow: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
// 选择框样式
|
||||
.myInsertForm .el-select__wrapper {
|
||||
// background-color: transparent;
|
||||
// border-radius: 0;
|
||||
// box-shadow: none;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
.myInsertForm .el-select__wrapper.is-hovering:not(.is-focused) {
|
||||
// box-shadow: none;
|
||||
}
|
||||
|
||||
.myInsertForm .el-select__placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.myInsertForm .el-select__caret {
|
||||
color: #B8B8B8;
|
||||
}
|
||||
|
||||
// 单选框
|
||||
.myInsertForm .el-radio__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.myInsertForm .el-radio__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
// 复选框
|
||||
.myInsertForm .el-checkbox__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.myInsertForm .el-checkbox__label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
// 树选择
|
||||
.myInsertForm .el-text--default {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
// 多文本输入框
|
||||
.myInsertForm .el-textarea__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.myInsertForm .el-textarea__inner::placeholder {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #B8B8B8;
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: vars.$base-sidebar-width;
|
||||
// margin-left: vars.$base-sidebar-width;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -128,9 +128,12 @@ html.dark {
|
|||
|
||||
/* 侧边栏菜单覆盖 */
|
||||
.sidebar-container {
|
||||
.el-menu-item, .menu-title {
|
||||
|
||||
.el-menu-item,
|
||||
.menu-title {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
|
|
@ -141,6 +144,7 @@ html.dark {
|
|||
.el-menu--horizontal {
|
||||
.el-menu-item {
|
||||
&:not(.is-disabled) {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--navbar-hover) !important;
|
||||
|
|
@ -180,14 +184,20 @@ html.dark {
|
|||
--el-table-border-color: var(--el-border-color-light) !important;
|
||||
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
|
||||
|
||||
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
|
||||
color: var(--el-text-color-regular, #515a6e);
|
||||
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 树组件高亮样式覆盖 */
|
||||
.el-tree {
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
|
|
@ -201,7 +211,8 @@ html.dark {
|
|||
}
|
||||
|
||||
/* 下拉菜单样式覆盖 */
|
||||
.el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
|
||||
.el-dropdown-menu__item:not(.is-disabled):focus,
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
background-color: var(--navbar-hover) !important;
|
||||
}
|
||||
|
||||
|
|
@ -218,4 +229,3 @@ html.dark {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div :class="{ 'hidden': hidden }" class="pagination-container">
|
||||
<el-pagination
|
||||
class="my-pagination"
|
||||
:background="background"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
|
|
|
|||
|
|
@ -1,22 +1,27 @@
|
|||
<template>
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" @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 v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon" />
|
||||
{{ item.meta.title }}
|
||||
<el-menu-item v-if="!item.children" :style="{ '--theme': theme }" :index="item.path">
|
||||
<svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"
|
||||
class="navIcon" />
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<el-sub-menu v-else :style="{ '--theme': theme }" :index="item.path">
|
||||
|
||||
<!-- 顶部菜单超出数量折叠 -->
|
||||
<el-sub-menu :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
|
||||
<template #title>更多菜单</template>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
|
||||
<svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon" />
|
||||
{{ item.meta.title }}
|
||||
<template #title>
|
||||
<svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"
|
||||
class="navIcon" />
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="(subItem, index) in item.children">
|
||||
<el-menu-item :style="{ '--theme': theme }" :index="subItem.path">
|
||||
<svg-icon v-if="subItem.meta && subItem.meta.icon && subItem.meta.icon !== '#'"
|
||||
:icon-class="subItem.meta.icon" />
|
||||
{{ subItem.meta.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
|
|
@ -43,212 +48,7 @@ const router = useRouter()
|
|||
// 主题颜色
|
||||
const theme = computed(() => settingsStore.theme)
|
||||
// 所有的路由信息
|
||||
// const routers = computed(() => permissionStore.topbarRouters)
|
||||
const routers = ref([
|
||||
{
|
||||
path: "/",
|
||||
hidden: false,
|
||||
component: "Layout",
|
||||
children: [
|
||||
{
|
||||
name: "工作台",
|
||||
path: "index",
|
||||
hidden: false,
|
||||
component: "index",
|
||||
meta: {
|
||||
title: "工作台",
|
||||
noCache: false,
|
||||
link: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
hidden: false,
|
||||
component: "Layout",
|
||||
children: [
|
||||
{
|
||||
name: "媒体库管理",
|
||||
path: "mediaLibrary",
|
||||
hidden: false,
|
||||
component: "index",
|
||||
meta: {
|
||||
title: "媒体库管理",
|
||||
noCache: false,
|
||||
link: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
hidden: false,
|
||||
component: "Layout",
|
||||
children: [
|
||||
{
|
||||
name: "户外媒介数据",
|
||||
path: "outdoorMedia",
|
||||
hidden: false,
|
||||
component: "index",
|
||||
meta: {
|
||||
title: "户外媒介数据",
|
||||
noCache: false,
|
||||
link: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
hidden: false,
|
||||
component: "Layout",
|
||||
children: [
|
||||
{
|
||||
name: "供应商",
|
||||
path: "supplier",
|
||||
hidden: false,
|
||||
component: "index",
|
||||
meta: {
|
||||
title: "供应商",
|
||||
noCache: false,
|
||||
link: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
hidden: false,
|
||||
component: "Layout",
|
||||
children: [
|
||||
{
|
||||
name: "问题反馈",
|
||||
path: "problemFeedback",
|
||||
hidden: false,
|
||||
component: "index",
|
||||
meta: {
|
||||
title: "问题反馈",
|
||||
noCache: false,
|
||||
link: null
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "System",
|
||||
"path": "/system",
|
||||
"hidden": false,
|
||||
"redirect": "noRedirect",
|
||||
"component": "Layout",
|
||||
"alwaysShow": true,
|
||||
"meta": {
|
||||
"title": "系统管理",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"name": "Menu",
|
||||
"path": "menu",
|
||||
"hidden": false,
|
||||
"component": "system/menu/index",
|
||||
"meta": {
|
||||
"title": "菜单管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Dept",
|
||||
"path": "dept",
|
||||
"hidden": false,
|
||||
"component": "system/dept/index",
|
||||
"meta": {
|
||||
"title": "部门管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Role",
|
||||
"path": "role",
|
||||
"hidden": false,
|
||||
"component": "system/role/index",
|
||||
"meta": {
|
||||
"title": "角色管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "User",
|
||||
"path": "user",
|
||||
"hidden": false,
|
||||
"component": "system/user/index",
|
||||
"meta": {
|
||||
"title": "用户管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Locality",
|
||||
"path": "locality",
|
||||
"hidden": false,
|
||||
"component": "system/locality/index",
|
||||
"meta": {
|
||||
"title": "属地管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Section",
|
||||
"path": "section",
|
||||
"hidden": false,
|
||||
"component": "system/section/index",
|
||||
"meta": {
|
||||
"title": "科室管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "UserApproval",
|
||||
"path": "userApproval",
|
||||
"hidden": false,
|
||||
"component": "system/userApproval/index",
|
||||
"meta": {
|
||||
"title": "新用户审批",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Dict",
|
||||
"path": "dict",
|
||||
"hidden": false,
|
||||
"component": "system/dict/index",
|
||||
"meta": {
|
||||
"title": "字典管理",
|
||||
"icon": "#",
|
||||
"noCache": false,
|
||||
"link": null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
console.log('routers', routers.value)
|
||||
const routers = computed(() => permissionStore.topbarRouters)
|
||||
|
||||
// 顶部显示菜单
|
||||
const topMenus = computed(() => {
|
||||
|
|
@ -266,8 +66,6 @@ const topMenus = computed(() => {
|
|||
return topMenus
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 设置子路由
|
||||
const childrenMenus = computed(() => {
|
||||
let childrenMenus = []
|
||||
|
|
@ -297,20 +95,18 @@ const activeMenu = computed(() => {
|
|||
const tmpPath = path.substring(1, path.length)
|
||||
if (!route.meta.link) {
|
||||
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
|
||||
appStore.toggleSideBarHide(false)
|
||||
// appStore.toggleSideBarHide(false)
|
||||
}
|
||||
} else if (!route.children) {
|
||||
activePath = path
|
||||
appStore.toggleSideBarHide(true)
|
||||
// appStore.toggleSideBarHide(true)
|
||||
}
|
||||
activeRoutes(activePath)
|
||||
return activePath
|
||||
})
|
||||
|
||||
function setVisibleNumber() {
|
||||
console.log('sdfsda')
|
||||
const width = document.body.getBoundingClientRect().width / 3
|
||||
console.log('sdfsda', width)
|
||||
visibleNumber.value = parseInt(width / 85)
|
||||
}
|
||||
|
||||
|
|
@ -329,11 +125,11 @@ function handleSelect(key, keyPath) {
|
|||
} else {
|
||||
router.push({ path: key })
|
||||
}
|
||||
appStore.toggleSideBarHide(true)
|
||||
// appStore.toggleSideBarHide(true)
|
||||
} else {
|
||||
// 显示左侧联动菜单
|
||||
activeRoutes(key)
|
||||
appStore.toggleSideBarHide(false)
|
||||
// appStore.toggleSideBarHide(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -349,7 +145,7 @@ function activeRoutes(key) {
|
|||
if (routes.length > 0) {
|
||||
permissionStore.setSidebarRouters(routes)
|
||||
} else {
|
||||
appStore.toggleSideBarHide(true)
|
||||
// appStore.toggleSideBarHide(true)
|
||||
}
|
||||
return routes
|
||||
}
|
||||
|
|
@ -405,57 +201,70 @@ onMounted(() => {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 带有二级菜单的 item */
|
||||
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
padding: 0px !important;
|
||||
margin: 0 36px !important;
|
||||
}
|
||||
|
||||
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
|
||||
border-bottom: 2px solid #FFFFFF;
|
||||
color: #FFFFFF !important;
|
||||
background-color: transparent !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
/* 背景色隐藏 */
|
||||
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||
color: #FFFFFF !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
// 悬浮子菜单样式
|
||||
.el-menu--horizontal.el-menu--popup-container {
|
||||
border-radius: 4px 4px 4px 4px !important;
|
||||
border: 0px solid #3672eb;
|
||||
}
|
||||
|
||||
.el-menu--popup {
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 8px 0 #00328214;
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.el-popper.is-light,
|
||||
.el-popper.is-light>.el-popper__arrow:before {
|
||||
border: 0px solid #3672eb !important;
|
||||
}
|
||||
|
||||
// 二级菜单未选中样式
|
||||
.el-menu--horizontal .el-menu .el-menu-item,
|
||||
.el-menu--horizontal .el-menu .el-sub-menu__title {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1E1E1E;
|
||||
}
|
||||
|
||||
// 二级菜单悬浮和选中样式
|
||||
.el-menu--horizontal .el-menu .el-menu-item:hover {
|
||||
color: #ffffff !important;
|
||||
background: #545454 !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
color: #1A75E6 !important;
|
||||
}
|
||||
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active {
|
||||
color: #ffffff !important;
|
||||
background: #545454 !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
color: #1A75E6 !important;
|
||||
}
|
||||
|
||||
// .topmenu-container.el-menu--horizontal>.el-menu-item {
|
||||
// float: left;
|
||||
// height: 50px !important;
|
||||
// line-height: 50px !important;
|
||||
// color: #999093 !important;
|
||||
// padding: 0 5px !important;
|
||||
// margin: 0 10px !important;
|
||||
// }
|
||||
|
||||
// .topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
|
||||
// .el-menu--horizontal>.el-sub-menu.is-active .el-submenu__title {
|
||||
// border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||
// color: #303133;
|
||||
// }
|
||||
|
||||
// /* sub-menu item */
|
||||
// .topmenu-container.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
|
||||
// float: left;
|
||||
// height: 50px !important;
|
||||
// line-height: 50px !important;
|
||||
// color: #999093 !important;
|
||||
// padding: 0 5px !important;
|
||||
// margin: 0 10px !important;
|
||||
// }
|
||||
|
||||
// /* 背景色隐藏 */
|
||||
// .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
|
||||
// .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
|
||||
// .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||
// background-color: #ffffff;
|
||||
// }
|
||||
|
||||
// /* 图标右间距 */
|
||||
// .topmenu-container .svg-icon {
|
||||
// margin-right: 4px;
|
||||
// }
|
||||
|
||||
// /* topmenu more arrow */
|
||||
// .topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
|
||||
// position: static;
|
||||
// vertical-align: middle;
|
||||
// margin-left: 8px;
|
||||
// margin-top: 0px;
|
||||
// }</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ const logout = () => {
|
|||
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
userStore.logOut().then(() => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<div :class="classObj" class="app-wrapper"
|
||||
:style="{ '--current-color': theme, 'backgroundImage': `url(${bgStore.bgImage})` }">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar @setLayout="setLayout" />
|
||||
|
|
@ -19,6 +20,8 @@ import Sidebar from './components/Sidebar/index.vue'
|
|||
import { AppMain, Navbar, Settings, TagsView } from './components'
|
||||
import useAppStore from '@/store/modules/app'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const theme = computed(() => settingsStore.theme)
|
||||
|
|
@ -28,6 +31,7 @@ const device = computed(() => useAppStore().device)
|
|||
const needTagsView = computed(() => settingsStore.tagsView)
|
||||
const fixedHeader = computed(() => settingsStore.fixedHeader)
|
||||
|
||||
|
||||
const classObj = computed(() => ({
|
||||
hideSidebar: !sidebar.value.opened,
|
||||
openSidebar: sidebar.value.opened,
|
||||
|
|
@ -70,8 +74,14 @@ function setLayout() {
|
|||
.app-wrapper {
|
||||
@include mix.clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-position: top;
|
||||
/* 顶部对齐 */
|
||||
background-repeat: no-repeat;
|
||||
/* 禁止平铺 */
|
||||
background-size: cover;
|
||||
/* 完全覆盖容器 */
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
|
|
@ -94,7 +104,8 @@ function setLayout() {
|
|||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - #{vars.$base-sidebar-width});
|
||||
// width: calc(100% - #{vars.$base-sidebar-width});
|
||||
width: 100%;
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export default {
|
|||
return ElMessageBox.confirm(content, "系统提示", {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
||||
type: "warning",
|
||||
})
|
||||
},
|
||||
|
|
@ -64,6 +65,7 @@ export default {
|
|||
return ElMessageBox.prompt(content, "系统提示", {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
||||
type: "warning",
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { fa } from "element-plus/es/locales.mjs";
|
||||
|
||||
export default {
|
||||
/**
|
||||
* 网页标题
|
||||
|
|
|
|||
15
src/store/modules/background.js
Normal file
15
src/store/modules/background.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// stores/background.js
|
||||
import { defineStore } from 'pinia'
|
||||
import bigBackgroud from '@/assets/images/bigBackgroud.png'
|
||||
|
||||
export const useBackgroundStore = defineStore('background', {
|
||||
state: () => ({
|
||||
bgImage: bigBackgroud
|
||||
}),
|
||||
actions: {
|
||||
setBgImage(newImage) {
|
||||
console.log('接收', newImage)
|
||||
this.bgImage = newImage
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -57,12 +57,20 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Index">
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import mediaMap from '@/assets/images/mediaMap.png'
|
||||
import supplierManage from '@/assets/images/supplierManage.png'
|
||||
import mediaLibary from '@/assets/images/mediaLibary.png'
|
||||
import outdoorMediaMap from '@/assets/images/outdoorMediaMap.png'
|
||||
import notic_icon from '@/assets/images/notic-icon.png'
|
||||
import {useBackgroundStore} from '@/store/modules/background'
|
||||
import bigBackgroud from '@/assets/images/bigBackgroud.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(bigBackgroud)
|
||||
});
|
||||
|
||||
const notices = ref([
|
||||
{ date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
|
||||
|
|
@ -253,14 +261,3 @@ const notices = ref([
|
|||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.app-wrapper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: url("../assets/images/bigBackgroud.png");
|
||||
background-repeat: no-repeat;
|
||||
/* 禁止平铺 */
|
||||
background-size: cover;
|
||||
/* 完全覆盖容器 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,39 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" class="searchPanelForm" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable style="width: 200px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
|
||||
<el-option
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 部门管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增</el-button>
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:dept:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="Sort"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="deptList"
|
||||
row-key="deptId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table v-if="refreshTable" v-loading="loading" height="calc(100vh - 310px)" :data="deptList"
|
||||
row-key="deptId" :default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
||||
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
|
|
@ -69,27 +48,27 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
|
||||
<el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dept:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:dept:add']">新增</el-button>
|
||||
<el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete"
|
||||
@click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
||||
<el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="deptRef" :model="form" :rules="rules" label-width="100px" class="myInsertForm">
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
:data="deptOptions"
|
||||
:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
|
||||
value-key="deptId"
|
||||
placeholder="选择上级部门"
|
||||
check-strictly
|
||||
/>
|
||||
<el-tree-select v-model="form.parentId" :data="deptOptions"
|
||||
:props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
|
||||
placeholder="选择上级部门" check-strictly />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -120,11 +99,8 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="部门状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -141,7 +117,11 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Dept">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
|
||||
|
|
@ -279,5 +259,9 @@ function handleDelete(row) {
|
|||
}).catch(() => { })
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,98 +1,59 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
|
||||
<el-form-item label="字典名称" prop="dictType">
|
||||
<el-select v-model="queryParams.dictType" style="width: 200px">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.dictId"
|
||||
:label="item.dictName"
|
||||
:value="item.dictType"
|
||||
/>
|
||||
<el-select v-model="queryParams.dictType" style="width: 140px">
|
||||
<el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName"
|
||||
:value="item.dictType" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典标签" prop="dictLabel">
|
||||
<el-input
|
||||
v-model="queryParams.dictLabel"
|
||||
placeholder="请输入字典标签"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable style="width: 140px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
|
||||
<el-option
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
<el-select v-model="queryParams.status" placeholder="数据状态" clearable style="min-width: 86px">
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 字典管理 - 字典明细</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dict:add']"
|
||||
>新增</el-button>
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport"
|
||||
v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleClose">关闭</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:dict:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:dict:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Close"
|
||||
@click="handleClose"
|
||||
>关闭</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" :data="dataList" height="calc(100vh - 362px)"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编码" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典编码" width="100" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||
<template #default="scope">
|
||||
<span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
|
||||
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
|
||||
<span
|
||||
v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{
|
||||
scope.row.dictLabel }}</span>
|
||||
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
|
||||
:class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||
|
|
@ -103,30 +64,33 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="210">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="dataRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
|
||||
<el-form-item label="字典类型">
|
||||
<el-input v-model="form.dictType" :disabled="true" />
|
||||
</el-form-item>
|
||||
|
|
@ -144,21 +108,14 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="回显样式" prop="listClass">
|
||||
<el-select v-model="form.listClass">
|
||||
<el-option
|
||||
v-for="item in listClassOptions"
|
||||
:key="item.value"
|
||||
:label="item.label + '(' + item.value + ')'"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
<el-option v-for="item in listClassOptions" :key="item.value"
|
||||
:label="item.label + '(' + item.value + ')'" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
|
|
@ -176,9 +133,13 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Data">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useDictStore from '@/store/modules/dict'
|
||||
import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type"
|
||||
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
|
||||
|
|
@ -357,6 +318,11 @@ function handleExport() {
|
|||
}, `dict_data_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getTypes(route.params && route.params.dictId)
|
||||
getTypeList()
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,109 +1,56 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input
|
||||
v-model="queryParams.dictName"
|
||||
placeholder="请输入字典名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 140px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input
|
||||
v-model="queryParams.dictType"
|
||||
placeholder="请输入字典类型"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable style="width: 140px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="字典状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
<el-select v-model="queryParams.status" placeholder="字典状态" clearable style="min-width: 86px">
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dict:add']"
|
||||
>新增</el-button>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 字典管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport"
|
||||
v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleRefreshCache"
|
||||
v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:dict:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:dict:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Refresh"
|
||||
@click="handleRefreshCache"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>刷新缓存</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" :data="typeList" height="calc(100vh - 362px)"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编号" align="center" prop="dictId" />
|
||||
<el-table-column label="字典编号" width="100" align="center" prop="dictId" />
|
||||
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
|
|
@ -118,30 +65,29 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="210">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="dictRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input v-model="form.dictName" placeholder="请输入字典名称" />
|
||||
</el-form-item>
|
||||
|
|
@ -150,11 +96,8 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
|
|
@ -172,8 +115,12 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Dict">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useDictStore from '@/store/modules/dict'
|
||||
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
|
||||
|
|
@ -319,5 +266,9 @@ function handleRefreshCache() {
|
|||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,46 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input
|
||||
v-model="queryParams.menuName"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" class="searchPanelForm" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="菜单名称:" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 200px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
|
||||
<el-option
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="min-width: 70px">
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:menu:add']"
|
||||
>新增</el-button>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 菜单管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:menu:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="Sort"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="menuList"
|
||||
row-key="menuId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table v-if="refreshTable" v-loading="loading" height="calc(100vh - 310px)" :data="menuList"
|
||||
row-key="menuId" :default-expand-all="isExpandAll"
|
||||
: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="100">
|
||||
<!-- <el-table-column prop="icon" label="图标" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="orderNum" label="排序" width="60"></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>
|
||||
|
|
@ -69,34 +49,36 @@
|
|||
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" width="160" prop="createTime">
|
||||
<el-table-column label="创建时间" align="center" width="230" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:menu:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:menu:add']">新增</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:menu:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
<!-- 添加或修改菜单对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="680px" append-to-body>
|
||||
<el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="menuRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
:data="menuOptions"
|
||||
:props="{ value: 'menuId', label: 'menuName', children: 'children' }"
|
||||
value-key="menuId"
|
||||
placeholder="选择上级菜单"
|
||||
check-strictly
|
||||
/>
|
||||
<el-tree-select v-model="form.parentId" :data="menuOptions"
|
||||
:props="{ value: 'menuId', label: 'menuName', children: 'children' }" value-key="menuId"
|
||||
placeholder="选择上级菜单" check-strictly />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
|
|
@ -110,21 +92,15 @@
|
|||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType != 'F'">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="540"
|
||||
trigger="click"
|
||||
>
|
||||
<el-popover placement="bottom-start" :width="540" trigger="click">
|
||||
<template #reference>
|
||||
<el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
|
||||
<template #prefix>
|
||||
<svg-icon
|
||||
v-if="form.icon"
|
||||
:icon-class="form.icon"
|
||||
class="el-input__icon"
|
||||
style="height: 32px;width: 16px;"
|
||||
/>
|
||||
<el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
|
||||
<svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
|
||||
style="height: 32px;width: 16px;" />
|
||||
<el-icon v-else style="height: 32px;width: 16px;">
|
||||
<search />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
|
@ -146,7 +122,9 @@
|
|||
<el-form-item prop="routeName">
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
|
||||
<el-tooltip
|
||||
content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）"
|
||||
placement="top">
|
||||
<el-icon><question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
路由名称
|
||||
|
|
@ -201,7 +179,8 @@
|
|||
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
|
||||
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
|
||||
placement="top">
|
||||
<el-icon><question-filled /></el-icon>
|
||||
</el-tooltip>
|
||||
权限字符
|
||||
|
|
@ -249,11 +228,8 @@
|
|||
</span>
|
||||
</template>
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio
|
||||
v-for="dict in sys_show_hide"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_show_hide" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -268,11 +244,8 @@
|
|||
</span>
|
||||
</template>
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -289,9 +262,13 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Menu">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"
|
||||
import SvgIcon from "@/components/SvgIcon"
|
||||
import IconSelect from "@/components/IconSelect"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
|
||||
|
|
@ -448,5 +425,10 @@ function handleDelete(row) {
|
|||
}).catch(() => { })
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1,63 +1,39 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" class="searchPanelForm" v-show="showSearch" :inline="true">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input
|
||||
v-model="queryParams.phonenumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="openSelectUser"
|
||||
v-hasPermi="['system:role:add']"
|
||||
>添加用户</el-button>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 角色管理 - 分配用户</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="openSelectUser"
|
||||
v-hasPermi="['system:role:add']">添加用户</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="multiple" @click="cancelAuthUserAll"
|
||||
v-hasPermi="['system:role:remove']">批量取消授权</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleClose">关闭</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="CircleClose"
|
||||
:disabled="multiple"
|
||||
@click="cancelAuthUserAll"
|
||||
v-hasPermi="['system:role:remove']"
|
||||
>批量取消授权</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Close"
|
||||
@click="handleClose"
|
||||
>关闭</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" :data="userList" height="calc(100vh - 362px)"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
|
||||
|
|
@ -75,25 +51,29 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
|
||||
<el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)"
|
||||
v-hasPermi="['system:role:remove']">取消授权</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="AuthUser">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import selectUser from "./selectUser"
|
||||
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const route = useRoute()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
|
@ -175,5 +155,9 @@ function cancelAuthUserAll(row) {
|
|||
}).catch(() => { })
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,111 +1,61 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" class="searchPanelForm" :inline="true">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="min-width: 60px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限字符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入权限字符"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="min-width: 60px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="角色状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
<el-select v-model="queryParams.status" placeholder="角色状态" clearable style="min-width: 86px">
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:role:add']"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 角色管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:role:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['system:role:edit']">修改</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:role:remove']">删除</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport"
|
||||
v-hasPermi="['system:role:export']">导出</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:role:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:role:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:role:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" :data="roleList" height="calc(100vh - 362px)"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="角色编号" prop="roleId" width="120" />
|
||||
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="显示顺序" prop="roleSort" width="100" />
|
||||
<el-table-column label="状态" align="center" width="100">
|
||||
<el-table-column label="角色编号" prop="roleId" />
|
||||
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="显示顺序" prop="roleSort" />
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-value="0"
|
||||
inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
|
|
@ -116,32 +66,33 @@
|
|||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:role:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:role:remove']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
|
||||
<el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
|
||||
<el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)"
|
||||
v-hasPermi="['system:role:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
|
||||
<el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
|
||||
<el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)"
|
||||
v-hasPermi="['system:role:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
|
||||
<!-- 添加或修改角色配置对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form ref="roleRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
|
@ -161,27 +112,18 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单权限">
|
||||
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
|
||||
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
|
||||
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
ref="menuRef"
|
||||
node-key="id"
|
||||
:check-strictly="!form.menuCheckStrictly"
|
||||
empty-text="加载中，请稍候"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
></el-tree>
|
||||
<el-checkbox v-model="form.menuCheckStrictly"
|
||||
@change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
|
||||
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id"
|
||||
:check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
|
||||
:props="{ label: 'label', children: 'children' }"></el-tree>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
|
|
@ -196,8 +138,9 @@
|
|||
</el-dialog>
|
||||
|
||||
<!-- 分配角色数据权限对话框 -->
|
||||
<el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-dialog :title="title" v-model="openDataScope" width="650px" class="my_dialog" append-to-body
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-form :model="form" label-width="80px" class="myInsertForm">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.roleName" :disabled="true" />
|
||||
</el-form-item>
|
||||
|
|
@ -206,29 +149,18 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="权限范围">
|
||||
<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
|
||||
<el-option
|
||||
v-for="item in dataScopeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
<el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" v-show="form.dataScope == 2">
|
||||
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
|
||||
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
|
||||
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="deptOptions"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
ref="deptRef"
|
||||
node-key="id"
|
||||
:check-strictly="!form.deptCheckStrictly"
|
||||
empty-text="加载中，请稍候"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
></el-tree>
|
||||
<el-checkbox v-model="form.deptCheckStrictly"
|
||||
@change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
|
||||
<el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id"
|
||||
:check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候"
|
||||
:props="{ label: 'label', children: 'children' }"></el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -242,8 +174,12 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Role">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
|
||||
import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
|
@ -580,5 +516,9 @@ function cancelDataScope() {
|
|||
reset()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,24 @@
|
|||
<template>
|
||||
<!-- 授权用户 -->
|
||||
<el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
||||
<el-dialog title="选择用户" v-model="visible" width="900px" top="5vh" class="my_dialog" append-to-body
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="myInsertForm">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 180px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 180px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input
|
||||
v-model="queryParams.phonenumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
style="width: 180px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 180px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange" height="260px">
|
||||
<el-table @row-click="clickRow" ref="refTable" :data="userList" @selection-change="handleSelectionChange"
|
||||
height="260px">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
|
||||
|
|
@ -43,13 +35,8 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,19 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 用户管理 - 分配角色</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="submitForm()">提交</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="close()">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<h4 class="form-header h4">基本信息</h4>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-row>
|
||||
|
|
@ -17,17 +31,19 @@
|
|||
</el-form>
|
||||
|
||||
<h4 class="form-header h4">角色信息</h4>
|
||||
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
|
||||
<el-table-column label="序号" width="55" type="index" align="center">
|
||||
<el-table v-loading="loading" height="calc(100vh - 450px)" :row-key="getRowKey" @row-click="clickRow" ref="roleRef"
|
||||
@selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
|
||||
<el-table-column label="序号" width="70" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable" width="55"></el-table-column>
|
||||
<el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable"
|
||||
width="55"></el-table-column>
|
||||
<el-table-column label="角色编号" align="center" prop="roleId" />
|
||||
<el-table-column label="角色名称" align="center" prop="roleName" />
|
||||
<el-table-column label="权限字符" align="center" prop="roleKey" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
|
|
@ -36,17 +52,17 @@
|
|||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
|
||||
|
||||
<el-form label-width="100px">
|
||||
<div style="text-align: center;margin-left:-120px;margin-top:30px;">
|
||||
<el-button type="primary" @click="submitForm()">提交</el-button>
|
||||
<el-button @click="close()">返回</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="AuthRole">
|
||||
import { getAuthRole, updateAuthRole } from "@/api/system/user"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const route = useRoute()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
|
@ -102,6 +118,7 @@ function submitForm() {
|
|||
}
|
||||
|
||||
(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
const userId = route.params && route.params.userId
|
||||
if (userId) {
|
||||
loading.value = true
|
||||
|
|
|
|||
|
|
@ -1,79 +1,75 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
|
||||
<!--部门数据-->
|
||||
<pane size="16">
|
||||
<el-col>
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
|
||||
</div>
|
||||
</el-col>
|
||||
</pane>
|
||||
<!--用户数据-->
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
|
||||
<el-form-item label="部门">
|
||||
<el-tree-select v-model="queryParams.deptId" :data="deptOptions" clearable
|
||||
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门"
|
||||
check-strictly style="width: 140px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 140px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 140px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
|
||||
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="min-width: 86px">
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统管理</span> <span class="subHeaderTitle">- 用户管理</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="24">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleAdd"
|
||||
v-hasPermi="['system:user:add']">新增</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['system:user:edit']">修改</el-button>
|
||||
<el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:user:remove']">删除</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleImport"
|
||||
v-hasPermi="['system:user:import']">导入</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExport"
|
||||
v-hasPermi="['system:user:export']">导出</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" height="calc(100vh - 362px)" :data="userList"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
||||
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
|
||||
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible"
|
||||
width="120" />
|
||||
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-value="0"
|
||||
inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="210">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
|
|
@ -81,29 +77,34 @@
|
|||
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:user:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:user:remove']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
|
||||
<el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)"
|
||||
v-hasPermi="['system:user:resetPwd']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
|
||||
<el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"
|
||||
v-hasPermi="['system:user:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
</el-card>
|
||||
|
||||
|
||||
<!-- 添加或修改用户配置对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
||||
<el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
|
||||
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form :model="form" :rules="rules" ref="userRef" label-width="120px" class="myInsertForm">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
|
|
@ -112,7 +113,9 @@
|
|||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
|
||||
<el-tree-select v-model="form.deptId" :data="enabledDeptOptions"
|
||||
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
|
||||
check-strictly />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -144,14 +147,16 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="用户性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择">
|
||||
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -160,14 +165,16 @@
|
|||
<el-col :span="12">
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="form.postIds" multiple placeholder="请选择">
|
||||
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
|
||||
<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"
|
||||
:disabled="item.status == 1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="form.roleIds" multiple placeholder="请选择">
|
||||
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
|
||||
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
|
||||
:disabled="item.status == 1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -189,8 +196,11 @@
|
|||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" append-to-body
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
|
|
@ -199,7 +209,8 @@
|
|||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
||||
</div>
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
|
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
|
@ -219,6 +230,9 @@ import useAppStore from '@/store/modules/app'
|
|||
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
|
||||
import { Splitpanes, Pane } from "splitpanes"
|
||||
import "splitpanes/dist/splitpanes.css"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
|
|
@ -534,6 +548,7 @@ function submitForm() {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getDeptTree()
|
||||
getList()
|
||||
proxy.getConfigKey("sys.user.initPassword").then(response => {
|
||||
|
|
@ -541,3 +556,24 @@ onMounted(() => {
|
|||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-checkbox__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.el-upload-dragger .el-upload__text,
|
||||
.el-upload__tip {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.el-link__inner {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user