按UI调整系统管理界面

src/assets/styles/element-ui.scss

@@ -18,6 +18,7 @@
 .cell {
   .el-tag {
     margin-right: 0px;
+    font-size: 16px !important;
   }
 }
 

src/assets/styles/index.scss

@@ -122,7 +122,9 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  width: 1840px;
+  margin: 0 auto;
+  padding: 0 !important;
 }
 
 .components-container {
@@ -176,4 +178,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}

src/assets/styles/ruoyi.scss

@@ -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,29 +102,44 @@
 }
 
 .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;
+      background-color: #f4f4f3 !important;
-      color: #515a6e;
+      color: #3B3B3B;
-      height: 40px !important;
+      height: 50px !important;
-      font-size: 13px;
+      font-size: 16px;
     }
   }
+
   .el-table__body-wrapper {
-    .el-button [class*="el-icon-"] + span {
+    .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;
+  }
+
 }
 
 /** 表单布局 **/
 .form-header {
-  font-size:15px;
+  font-size: 15px;
-  color:#6379bb;
+  color: #6379bb;
-  border-bottom:1px solid #ddd;
+  border-bottom: 1px solid #ddd;
-  margin:8px 10px 25px 10px;
+  margin: 8px 10px 25px 10px;
-  padding-bottom:5px
+  padding-bottom: 5px
 }
 
 /** 表格布局 **/
@@ -113,7 +155,7 @@
   position: static !important;
   margin: 10px 0 0 0;
   padding: 0 !important;
-  
+
   .el-pagination {
     position: static;
   }
@@ -123,10 +165,11 @@
 @media (max-width: 768px) {
   .pagination-container {
     .el-pagination {
-      > .el-pagination__jump {
+      >.el-pagination__jump {
         display: none !important;
       }
-      > .el-pagination__sizes {
+
+      >.el-pagination__sizes {
         display: none !important;
       }
     }
@@ -138,7 +181,7 @@
   margin-top: 5px;
   border: 1px solid var(--el-border-color-light, #e5e6e7);
   background: var(--el-bg-color, #FFFFFF) none;
-  border-radius:4px;
+  border-radius: 4px;
   width: 100%;
 }
 
@@ -155,15 +198,16 @@
   margin-left: 10px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
+.el-table .el-dropdown,
+.el-icon-arrow-down {
   font-size: 12px;
 }
 
-.el-tree-node__content > .el-checkbox {
+.el-tree-node__content>.el-checkbox {
   margin-right: 8px;
 }
 
-.list-group-striped > .list-group-item {
+.list-group-striped>.list-group-item {
   border-left: 0;
   border-right: 0;
   border-radius: 0;
@@ -201,6 +245,10 @@
   margin-bottom: 10px;
 }
 
+.el-button {
+  font-size: 16px !important;
+}
+
 /* button color */
 .el-button--cyan.is-active,
 .el-button--cyan:active {
@@ -273,10 +321,10 @@
 }
 
 /* 拖拽列样式 */
-.sortable-ghost{
+.sortable-ghost {
   opacity: .8;
-  color: #fff!important;
+  color: #fff !important;
-  background: #42b983!important;
+  background: #42b983 !important;
 }
 
 /* 表格右侧工具栏样式 */
@@ -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;
+}

src/assets/styles/sidebar.scss

@@ -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;
   }
 

src/assets/styles/variables.module.scss

@@ -71,10 +71,10 @@ $--color-info: #909399;
   --sidebar-bg: #{$menuBg};
   --sidebar-text: #{$menuText};
   --menu-hover: #{$menuHover};
-  
+
   --navbar-bg: #ffffff;
   --navbar-text: #303133;
-  
+
   /* splitpanes default-theme 变量 */
   --splitpanes-default-bg: #ffffff;
 
@@ -119,7 +119,7 @@ html.dark {
   --blockquote-bg: #1d1e1f;
   --blockquote-border: #303030;
   --blockquote-text: #d0d0d0;
-  
+
   /* Cron 时间表达式 模式变量 */
   --cron-border: #303030;
 
@@ -127,10 +127,13 @@ html.dark {
   --splitpanes-default-bg: #141414;
 
   /* 侧边栏菜单覆盖 */
-   .sidebar-container {
+  .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,17 +184,23 @@ 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 {
+    .el-tree-node.is-current>.el-tree-node__content {
       background-color: var(--el-bg-color-overlay) !important;
       color: var(--el-color-primary);
     }
@@ -199,9 +209,10 @@ html.dark {
       background-color: var(--el-bg-color-overlay);
     }
   }
-  
+
   /* 下拉菜单样式覆盖 */
-  .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;
   }
 
@@ -211,11 +222,10 @@ html.dark {
     border-left-color: var(--blockquote-border) !important;
     color: var(--blockquote-text) !important;
   }
-  
+
   /* 时间表达式标题样式覆盖 */
   .popup-result .title {
     background: var(--cron-border);
   }
 
-}
+}
-

src/components/Pagination/index.vue

@@ -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"

src/components/TopNav/index.vue

@@ -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">
+      <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" />
+        <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"
-        {{ item.meta.title }}
+          class="navIcon" />
+        <span>{{ item.meta.title }}</span>
       </el-menu-item>
-    </template>
+      <el-sub-menu v-else :style="{ '--theme': theme }" :index="item.path">
 
-    <!-- 顶部菜单超出数量折叠 -->
+        <template #title>
-    <el-sub-menu :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
+          <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"
-      <template #title>更多菜单</template>
+            class="navIcon" />
-      <template v-for="(item, index) in topMenus">
+          <span>{{ item.meta.title }}</span>
-        <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
+        </template>
-          <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon" />
+        <template v-for="(subItem, index) in item.children">
-          {{ item.meta.title }}
+          <el-menu-item :style="{ '--theme': theme }" :index="subItem.path">
-        </el-menu-item>
+            <svg-icon v-if="subItem.meta && subItem.meta.icon && subItem.meta.icon !== '#'"
-      </template>
+              :icon-class="subItem.meta.icon" />
-    </el-sub-menu>
+            {{ 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 = 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 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
 }
@@ -386,7 +182,7 @@ onMounted(() => {
   margin: 0 36px !important;
 }
 
-// 一级菜单选中
+// 一级菜单选中 
 .el-menu--horizontal>.el-menu-item.is-active,
 .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
   border-bottom: 2px solid #FFFFFF;
@@ -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;
+  font-weight: 600 !important;
-  background: #545454 !important;
+  font-size: 16px !important;
+  color: #1A75E6 !important;
 }
 
 .el-menu--horizontal .el-menu .el-menu-item.is-active {
-  color: #ffffff !important;
+  font-weight: 600 !important;
-  background: #545454 !important;
+  font-size: 16px !important;
+  color: #1A75E6 !important;
 }
-
+</style>
-// .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>

src/layout/components/Navbar.vue

@@ -54,6 +54,7 @@ const logout = () => {
   ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
+    closeOnClickModal: false, // 禁止点击遮罩层关闭
     type: 'warning'
   }).then(() => {
     userStore.logOut().then(() => {

src/layout/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div :class="classObj" class="app-wrapper"
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    :style="{ '--current-color': theme, 'backgroundImage': `url(${bgStore.bgImage})` }">
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <!-- <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;
 }
 

src/plugins/modal.js

@@ -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",
     })
   },

src/settings.js

@@ -1,5 +1,3 @@
-import { fa } from "element-plus/es/locales.mjs";
-
 export default {
   /**
    * 网页标题

src/store/modules/background.js

@@ -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
+    }
+  }
+})

src/views/index.vue

@@ -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供应商信息记不全，请完善！' },
@@ -90,7 +98,7 @@ const notices = ref([
   { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
   { date: 'XXXXX供应商信息记不全，请完善！', content: 'XXXXX供应商信息记不全，请完善！' },
 ]);
-</script>
+</script> 
 <style scoped lang="scss">
 .flex-container {
   display: flex;
@@ -123,7 +131,7 @@ const notices = ref([
   /* 禁止平铺 */
   background-size: cover;
 }
- 
+
 .dashboard-4grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -238,7 +246,7 @@ const notices = ref([
   margin-bottom: 20px;
 }
 
-.resource-list { 
+.resource-list {
   font-family: Microsoft YaHei;
   font-weight: 400;
   font-size: 16px;
@@ -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>

src/views/system/dept/index.vue

@@ -1,95 +1,74 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <div class="searchPanel">
-         <el-form-item label="部门名称" prop="deptName">
+         <el-form :model="queryParams" ref="queryRef" class="searchPanelForm" :inline="true" v-show="showSearch">
-            <el-input
+            <el-form-item label="部门名称" prop="deptName">
-               v-model="queryParams.deptName"
+               <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable style="width: 200px"
-               placeholder="请输入部门名称"
+                  @keyup.enter="handleQuery" />
-               clearable
+            </el-form-item>
-               style="width: 200px"
+            <el-form-item label="状态" prop="status">
-               @keyup.enter="handleQuery"
+               <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"
-         </el-form-item>
+                     :value="dict.value" />
-         <el-form-item label="状态" prop="status">
+               </el-select>
-            <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
+            </el-form-item>
-               <el-option
+         </el-form>
-                  v-for="dict in sys_normal_disable"
+      </div>
-                  :key="dict.value"
+      <el-card>
-                  :label="dict.label"
+         <template #header>
-                  :value="dict.value"
+            <div class="card-header">
-               />
+               <span>系统管理</span> <span class="subHeaderTitle">- 部门管理</span>
-            </el-select>
+            </div>
-         </el-form-item>
+         </template>
-         <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>
 
-      <el-row :gutter="10" class="mb8">
+         <el-row :gutter="10" class="my_row">
-         <el-col :span="1.5">
+            <el-col :span="24">
-            <el-button
+               <el-button type="primary" class="primaryBtn" @click="handleAdd"
-               type="primary"
+                  v-hasPermi="['system:dept:add']">新增</el-button>
-               plain
+               <el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button>
-               icon="Plus"
+               <el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
-               @click="handleAdd"
+               <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
-               v-hasPermi="['system:dept:add']"
+            </el-col>
-            >新增</el-button>
+         </el-row>
-         </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
+         <el-table v-if="refreshTable" v-loading="loading" height="calc(100vh - 310px)" :data="deptList"
-         v-if="refreshTable"
+            row-key="deptId" :default-expand-all="isExpandAll"
-         v-loading="loading"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-         :data="deptList"
+            <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-         row-key="deptId"
+            <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
-         :default-expand-all="isExpandAll"
+            <el-table-column prop="status" label="状态" width="100">
-         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+               <template #default="scope">
-      >
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-         <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+               </template>
-         <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+            </el-table-column>
-         <el-table-column prop="status" label="状态" width="100">
+            <el-table-column label="创建时间" align="center" prop="createTime" width="200">
-            <template #default="scope">
+               <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
+               </template>
-         </el-table-column>
+            </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
+               <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-            </template>
+                     v-hasPermi="['system:dept:edit']">修改</el-button>
-         </el-table-column>
+                  <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                     v-hasPermi="['system:dept:add']">新增</el-button>
-            <template #default="scope">
+                  <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete"
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
+                     @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
+               </template>
-               <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-table-column>
-            </template>
+         </el-table>
-         </el-table-column>
+      </el-card>
-      </el-table>
 
       <!-- 添加或修改部门对话框 -->
-      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-         <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
+         :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
+                     <el-tree-select v-model="form.parentId" :data="deptOptions"
-                        v-model="form.parentId"
+                        :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
-                        :data="deptOptions"
+                        placeholder="选择上级部门" check-strictly />
-                        :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
+                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
-                           v-for="dict in sys_normal_disable"
+                           }}</el-radio>
-                           :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")
@@ -156,128 +136,132 @@ const isExpandAll = ref(true)
 const refreshTable = ref(true)
 
 const data = reactive({
-  form: {},
+   form: {},
-  queryParams: {
+   queryParams: {
-    deptName: undefined,
+      deptName: undefined,
-    status: undefined
+      status: undefined
-  },
+   },
-  rules: {
+   rules: {
-    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+      parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
-    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+      deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+      orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+      email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+      phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  },
+   },
 })
 
 const { queryParams, form, rules } = toRefs(data)
 
 /** 查询部门列表 */
 function getList() {
-  loading.value = true
+   loading.value = true
-  listDept(queryParams.value).then(response => {
+   listDept(queryParams.value).then(response => {
-    deptList.value = proxy.handleTree(response.data, "deptId")
+      deptList.value = proxy.handleTree(response.data, "deptId")
-    loading.value = false
+      loading.value = false
-  })
+   })
 }
 
 /** 取消按钮 */
 function cancel() {
-  open.value = false
+   open.value = false
-  reset()
+   reset()
 }
 
 /** 表单重置 */
 function reset() {
-  form.value = {
+   form.value = {
-    deptId: undefined,
+      deptId: undefined,
-    parentId: undefined,
+      parentId: undefined,
-    deptName: undefined,
+      deptName: undefined,
-    orderNum: 0,
+      orderNum: 0,
-    leader: undefined,
+      leader: undefined,
-    phone: undefined,
+      phone: undefined,
-    email: undefined,
+      email: undefined,
-    status: "0"
+      status: "0"
-  }
+   }
-  proxy.resetForm("deptRef")
+   proxy.resetForm("deptRef")
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  getList()
+   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  handleQuery()
+   handleQuery()
 }
 
 /** 新增按钮操作 */
 function handleAdd(row) {
-  reset()
+   reset()
-  listDept().then(response => {
+   listDept().then(response => {
-    deptOptions.value = proxy.handleTree(response.data, "deptId")
+      deptOptions.value = proxy.handleTree(response.data, "deptId")
-  })
+   })
-  if (row != undefined) {
+   if (row != undefined) {
-    form.value.parentId = row.deptId
+      form.value.parentId = row.deptId
-  }
+   }
-  open.value = true
+   open.value = true
-  title.value = "添加部门"
+   title.value = "添加部门"
 }
 
 /** 展开/折叠操作 */
 function toggleExpandAll() {
-  refreshTable.value = false
+   refreshTable.value = false
-  isExpandAll.value = !isExpandAll.value
+   isExpandAll.value = !isExpandAll.value
-  nextTick(() => {
+   nextTick(() => {
-    refreshTable.value = true
+      refreshTable.value = true
-  })
+   })
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset()
+   reset()
-  listDeptExcludeChild(row.deptId).then(response => {
+   listDeptExcludeChild(row.deptId).then(response => {
-    deptOptions.value = proxy.handleTree(response.data, "deptId")
+      deptOptions.value = proxy.handleTree(response.data, "deptId")
-  })
+   })
-  getDept(row.deptId).then(response => {
+   getDept(row.deptId).then(response => {
-    form.value = response.data
+      form.value = response.data
-    open.value = true
+      open.value = true
-    title.value = "修改部门"
+      title.value = "修改部门"
-  })
+   })
 }
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["deptRef"].validate(valid => {
+   proxy.$refs["deptRef"].validate(valid => {
-    if (valid) {
+      if (valid) {
-      if (form.value.deptId != undefined) {
+         if (form.value.deptId != undefined) {
-        updateDept(form.value).then(response => {
+            updateDept(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
+               proxy.$modal.msgSuccess("修改成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
-      } else {
+         } else {
-        addDept(form.value).then(response => {
+            addDept(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
+               proxy.$modal.msgSuccess("新增成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
+         }
       }
-    }
+   })
-  })
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
+   proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function () {
-    return delDept(row.deptId)
+      return delDept(row.deptId)
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("删除成功")
+      proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
-getList()
+// 初始化
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getList()
+}); 
 </script>

src/views/system/dict/data.vue

@@ -1,132 +1,96 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <div class="searchPanel">
-         <el-form-item label="字典名称" prop="dictType">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
-            <el-select v-model="queryParams.dictType" style="width: 200px">
+            <el-form-item label="字典名称" prop="dictType">
-               <el-option
+               <el-select v-model="queryParams.dictType" style="width: 140px">
-                  v-for="item in typeOptions"
+                  <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName"
-                  :key="item.dictId"
+                     :value="item.dictType" />
-                  :label="item.dictName"
+               </el-select>
-                  :value="item.dictType"
+            </el-form-item>
-               />
+            <el-form-item label="字典标签" prop="dictLabel">
-            </el-select>
+               <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable style="width: 140px"
-         </el-form-item>
+                  @keyup.enter="handleQuery" />
-         <el-form-item label="字典标签" prop="dictLabel">
+            </el-form-item>
-            <el-input
+            <el-form-item label="状态" prop="status">
-               v-model="queryParams.dictLabel"
+               <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="min-width: 86px">
-               placeholder="请输入字典标签"
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
-               clearable
+                     :value="dict.value" />
-               style="width: 200px"
+               </el-select>
-               @keyup.enter="handleQuery"
+            </el-form-item>
-            />
+         </el-form>
-         </el-form-item>
+      </div>
-         <el-form-item label="状态" prop="status">
+      <el-card>
-            <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
+         <template #header>
-               <el-option
+            <div class="card-header">
-                  v-for="dict in sys_normal_disable"
+               <span>系统管理</span> <span class="subHeaderTitle">- 字典管理 - 字典明细</span>
-                  :key="dict.value"
+            </div>
-                  :label="dict.label"
+         </template>
-                  :value="dict.value"
+
-               />
+         <el-row :gutter="10" class="my_row">
-            </el-select>
+            <el-col :span="24">
-         </el-form-item>
+               <el-button type="primary" class="primaryBtn" @click="handleAdd"
-         <el-form-item>
+                  v-hasPermi="['system:dict:add']">新增</el-button>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  v-hasPermi="['system:dict:edit']">修改</el-button>
-         </el-form-item>
+               <el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
-      </el-form>
+                  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-row>
+
+         <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="字典编码" 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>
+               </template>
+            </el-table-column>
+            <el-table-column label="字典键值" align="center" prop="dictValue" />
+            <el-table-column label="字典排序" align="center" prop="dictSort" />
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </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="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>
+               </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-card>
 
-      <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-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-column type="selection" width="55" align="center" />
-         <el-table-column label="字典编码" 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>
-            </template>
-         </el-table-column>
-         <el-table-column label="字典键值" align="center" prop="dictValue" />
-         <el-table-column label="字典排序" align="center" prop="dictSort" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </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">
-            <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>
-            </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-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-         <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
+         :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
+                  <el-option v-for="item in listClassOptions" :key="item.value"
-                     v-for="item in listClassOptions"
+                     :label="item.label + '(' + item.value + ')'" :value="item.value"></el-option>
-                     :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
+                  <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
-                     v-for="dict in sys_normal_disable"
+                  }}</el-radio>
-                     :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")
@@ -197,166 +158,171 @@ const typeOptions = ref([])
 const route = useRoute()
 // 数据标签回显样式
 const listClassOptions = ref([
-  { value: "default", label: "默认" }, 
+   { value: "default", label: "默认" },
-  { value: "primary", label: "主要" }, 
+   { value: "primary", label: "主要" },
-  { value: "success", label: "成功" },
+   { value: "success", label: "成功" },
-  { value: "info", label: "信息" },
+   { value: "info", label: "信息" },
-  { value: "warning", label: "警告" },
+   { value: "warning", label: "警告" },
-  { value: "danger", label: "危险" }
+   { value: "danger", label: "危险" }
 ])
 
 const data = reactive({
-  form: {},
+   form: {},
-  queryParams: {
+   queryParams: {
-    pageNum: 1,
+      pageNum: 1,
-    pageSize: 10,
+      pageSize: 10,
-    dictType: undefined,
+      dictType: undefined,
-    dictLabel: undefined,
+      dictLabel: undefined,
-    status: undefined
+      status: undefined
-  },
+   },
-  rules: {
+   rules: {
-    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+      dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
-    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+      dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
-    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+      dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
-  }
+   }
 })
 
 const { queryParams, form, rules } = toRefs(data)
 
 /** 查询字典类型详细 */
 function getTypes(dictId) {
-  getType(dictId).then(response => {
+   getType(dictId).then(response => {
-    queryParams.value.dictType = response.data.dictType
+      queryParams.value.dictType = response.data.dictType
-    defaultDictType.value = response.data.dictType
+      defaultDictType.value = response.data.dictType
-    getList()
+      getList()
-  })
+   })
 }
 
 /** 查询字典类型列表 */
 function getTypeList() {
-  getDictOptionselect().then(response => {
+   getDictOptionselect().then(response => {
-    typeOptions.value = response.data
+      typeOptions.value = response.data
-  })
+   })
 }
 
 /** 查询字典数据列表 */
 function getList() {
-  loading.value = true
+   loading.value = true
-  listData(queryParams.value).then(response => {
+   listData(queryParams.value).then(response => {
-    dataList.value = response.rows
+      dataList.value = response.rows
-    total.value = response.total
+      total.value = response.total
-    loading.value = false
+      loading.value = false
-  })
+   })
 }
 
 /** 取消按钮 */
 function cancel() {
-  open.value = false
+   open.value = false
-  reset()
+   reset()
 }
 
 /** 表单重置 */
 function reset() {
-  form.value = {
+   form.value = {
-    dictCode: undefined,
+      dictCode: undefined,
-    dictLabel: undefined,
+      dictLabel: undefined,
-    dictValue: undefined,
+      dictValue: undefined,
-    cssClass: undefined,
+      cssClass: undefined,
-    listClass: "default",
+      listClass: "default",
-    dictSort: 0,
+      dictSort: 0,
-    status: "0",
+      status: "0",
-    remark: undefined
+      remark: undefined
-  }
+   }
-  proxy.resetForm("dataRef")
+   proxy.resetForm("dataRef")
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.value.pageNum = 1
+   queryParams.value.pageNum = 1
-  getList()
+   getList()
 }
 
 /** 返回按钮操作 */
 function handleClose() {
-  const obj = { path: "/system/dict" }
+   const obj = { path: "/system/dict" }
-  proxy.$tab.closeOpenPage(obj)
+   proxy.$tab.closeOpenPage(obj)
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  queryParams.value.dictType = defaultDictType.value
+   queryParams.value.dictType = defaultDictType.value
-  handleQuery()
+   handleQuery()
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
-  reset()
+   reset()
-  open.value = true
+   open.value = true
-  title.value = "添加字典数据"
+   title.value = "添加字典数据"
-  form.value.dictType = queryParams.value.dictType
+   form.value.dictType = queryParams.value.dictType
 }
 
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictCode)
+   ids.value = selection.map(item => item.dictCode)
-  single.value = selection.length != 1
+   single.value = selection.length != 1
-  multiple.value = !selection.length
+   multiple.value = !selection.length
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset()
+   reset()
-  const dictCode = row.dictCode || ids.value
+   const dictCode = row.dictCode || ids.value
-  getData(dictCode).then(response => {
+   getData(dictCode).then(response => {
-    form.value = response.data
+      form.value = response.data
-    open.value = true
+      open.value = true
-    title.value = "修改字典数据"
+      title.value = "修改字典数据"
-  })
+   })
 }
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["dataRef"].validate(valid => {
+   proxy.$refs["dataRef"].validate(valid => {
-    if (valid) {
+      if (valid) {
-      if (form.value.dictCode != undefined) {
+         if (form.value.dictCode != undefined) {
-        updateData(form.value).then(response => {
+            updateData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType)
+               useDictStore().removeDict(queryParams.value.dictType)
-          proxy.$modal.msgSuccess("修改成功")
+               proxy.$modal.msgSuccess("修改成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
-      } else {
+         } else {
-        addData(form.value).then(response => {
+            addData(form.value).then(response => {
-          useDictStore().removeDict(queryParams.value.dictType)
+               useDictStore().removeDict(queryParams.value.dictType)
-          proxy.$modal.msgSuccess("新增成功")
+               proxy.$modal.msgSuccess("新增成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
+         }
       }
-    }
+   })
-  })
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const dictCodes = row.dictCode || ids.value
+   const dictCodes = row.dictCode || ids.value
-  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+   proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function () {
-    return delData(dictCodes)
+      return delData(dictCodes)
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("删除成功")
+      proxy.$modal.msgSuccess("删除成功")
-    useDictStore().removeDict(queryParams.value.dictType)
+      useDictStore().removeDict(queryParams.value.dictType)
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download("system/dict/data/export", {
+   proxy.download("system/dict/data/export", {
-    ...queryParams.value
+      ...queryParams.value
-  }, `dict_data_${new Date().getTime()}.xlsx`)
+   }, `dict_data_${new Date().getTime()}.xlsx`)
 }
 
-getTypes(route.params && route.params.dictId)
+// 初始化
-getTypeList()
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getTypes(route.params && route.params.dictId)
+   getTypeList()
+});
+
 </script>

src/views/system/dict/index.vue

@@ -1,147 +1,93 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <div class="searchPanel">
-         <el-form-item label="字典名称" prop="dictName">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
-            <el-input
+            <el-form-item label="字典名称" prop="dictName">
-               v-model="queryParams.dictName"
+               <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 140px"
-               placeholder="请输入字典名称"
+                  @keyup.enter="handleQuery" />
-               clearable
+            </el-form-item>
-               style="width: 240px"
+            <el-form-item label="字典类型" prop="dictType">
-               @keyup.enter="handleQuery"
+               <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable style="width: 140px"
-            />
+                  @keyup.enter="handleQuery" />
-         </el-form-item>
+            </el-form-item>
-         <el-form-item label="字典类型" prop="dictType">
+            <el-form-item label="状态" prop="status">
-            <el-input
+               <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="min-width: 86px">
-               v-model="queryParams.dictType"
+                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
-               placeholder="请输入字典类型"
+                     :value="dict.value" />
-               clearable
+               </el-select>
-               style="width: 240px"
+            </el-form-item>
-               @keyup.enter="handleQuery"
+            <el-form-item label="创建时间" style="width: 308px">
-            />
+               <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
-         </el-form-item>
+                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-         <el-form-item label="状态" prop="status">
+            </el-form-item>
-            <el-select
+         </el-form>
-               v-model="queryParams.status"
+      </div>
-               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>
-         </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-form-item>
-      </el-form>
 
-      <el-row :gutter="10" class="mb8">
+      <el-card>
-         <el-col :span="1.5">
+         <template #header>
-            <el-button
+            <div class="card-header">
-               type="primary"
+               <span>系统管理</span> <span class="subHeaderTitle">- 字典管理</span>
-               plain
+            </div>
-               icon="Plus"
+         </template>
-               @click="handleAdd"
-               v-hasPermi="['system:dict:add']"
-            >新增</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-row :gutter="10" class="my_row">
-         <el-table-column type="selection" width="55" align="center" />
+            <el-col :span="24">
-         <el-table-column label="字典编号" align="center" prop="dictId" />
+               <el-button type="primary" class="primaryBtn" @click="handleAdd"
-         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
+                  v-hasPermi="['system:dict:add']">新增</el-button>
-         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+               <el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
-            <template #default="scope">
+                  v-hasPermi="['system:dict:edit']">修改</el-button>
-               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+               <el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
-                  <span>{{ scope.row.dictType }}</span>
+                  v-hasPermi="['system:dict:remove']">删除</el-button>
-               </router-link>
+               <el-button type="primary" class="primaryBtn" @click="handleExport"
-            </template>
+                  v-hasPermi="['system:dict:export']">导出</el-button>
-         </el-table-column>
+               <el-button type="primary" class="primaryBtn" @click="handleRefreshCache"
-         <el-table-column label="状态" align="center" prop="status">
+                  v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
-            <template #default="scope">
+               <el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
-            </template>
+            </el-col>
-         </el-table-column>
+         </el-row>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <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>
-            </template>
-         </el-table-column>
-      </el-table>
 
-      <pagination
+         <el-table v-loading="loading" :data="typeList" height="calc(100vh - 362px)"
-         v-show="total > 0"
+            @selection-change="handleSelectionChange">
-         :total="total"
+            <el-table-column type="selection" width="55" align="center" />
-         v-model:page="queryParams.pageNum"
+            <el-table-column label="字典编号" width="100" align="center" prop="dictId" />
-         v-model:limit="queryParams.pageSize"
+            <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
-         @pagination="getList"
+            <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-      />
+               <template #default="scope">
+                  <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+                     <span>{{ scope.row.dictType }}</span>
+                  </router-link>
+               </template>
+            </el-table-column>
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </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="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>
+               </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-card>
 
       <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-         <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
+         :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
+                  <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
-                     v-for="dict in sys_normal_disable"
+                     }}</el-radio>
-                     :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")
@@ -190,134 +137,138 @@ const title = ref("")
 const dateRange = ref([])
 
 const data = reactive({
-  form: {},
+   form: {},
-  queryParams: {
+   queryParams: {
-    pageNum: 1,
+      pageNum: 1,
-    pageSize: 10,
+      pageSize: 10,
-    dictName: undefined,
+      dictName: undefined,
-    dictType: undefined,
+      dictType: undefined,
-    status: undefined
+      status: undefined
-  },
+   },
-  rules: {
+   rules: {
-    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+      dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+      dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
-  },
+   },
 })
 
 const { queryParams, form, rules } = toRefs(data)
 
 /** 查询字典类型列表 */
 function getList() {
-  loading.value = true
+   loading.value = true
-  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+   listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    typeList.value = response.rows
+      typeList.value = response.rows
-    total.value = response.total
+      total.value = response.total
-    loading.value = false
+      loading.value = false
-  })
+   })
 }
 
 /** 取消按钮 */
 function cancel() {
-  open.value = false
+   open.value = false
-  reset()
+   reset()
 }
 
 /** 表单重置 */
 function reset() {
-  form.value = {
+   form.value = {
-    dictId: undefined,
+      dictId: undefined,
-    dictName: undefined,
+      dictName: undefined,
-    dictType: undefined,
+      dictType: undefined,
-    status: "0",
+      status: "0",
-    remark: undefined
+      remark: undefined
-  }
+   }
-  proxy.resetForm("dictRef")
+   proxy.resetForm("dictRef")
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.value.pageNum = 1
+   queryParams.value.pageNum = 1
-  getList()
+   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  dateRange.value = []
+   dateRange.value = []
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  handleQuery()
+   handleQuery()
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
-  reset()
+   reset()
-  open.value = true
+   open.value = true
-  title.value = "添加字典类型"
+   title.value = "添加字典类型"
 }
 
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictId)
+   ids.value = selection.map(item => item.dictId)
-  single.value = selection.length != 1
+   single.value = selection.length != 1
-  multiple.value = !selection.length
+   multiple.value = !selection.length
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset()
+   reset()
-  const dictId = row.dictId || ids.value
+   const dictId = row.dictId || ids.value
-  getType(dictId).then(response => {
+   getType(dictId).then(response => {
-    form.value = response.data
+      form.value = response.data
-    open.value = true
+      open.value = true
-    title.value = "修改字典类型"
+      title.value = "修改字典类型"
-  })
+   })
 }
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["dictRef"].validate(valid => {
+   proxy.$refs["dictRef"].validate(valid => {
-    if (valid) {
+      if (valid) {
-      if (form.value.dictId != undefined) {
+         if (form.value.dictId != undefined) {
-        updateType(form.value).then(response => {
+            updateType(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
+               proxy.$modal.msgSuccess("修改成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
-      } else {
+         } else {
-        addType(form.value).then(response => {
+            addType(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
+               proxy.$modal.msgSuccess("新增成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
+         }
       }
-    }
+   })
-  })
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const dictIds = row.dictId || ids.value
+   const dictIds = row.dictId || ids.value
-  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+   proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function () {
-    return delType(dictIds)
+      return delType(dictIds)
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("删除成功")
+      proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download("system/dict/type/export", {
+   proxy.download("system/dict/type/export", {
-    ...queryParams.value
+      ...queryParams.value
-  }, `dict_${new Date().getTime()}.xlsx`)
+   }, `dict_${new Date().getTime()}.xlsx`)
 }
 
 /** 刷新缓存按钮操作 */
 function handleRefreshCache() {
-  refreshCache().then(() => {
+   refreshCache().then(() => {
-    proxy.$modal.msgSuccess("刷新成功")
+      proxy.$modal.msgSuccess("刷新成功")
-    useDictStore().cleanDict()
+      useDictStore().cleanDict()
-  })
+   })
 }
 
-getList()
+// 初始化
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getList()
+}); 
 </script>

src/views/system/menu/index.vue

@@ -1,102 +1,84 @@
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <div class="searchPanel">
-         <el-form-item label="菜单名称" prop="menuName">
+         <el-form :model="queryParams" ref="queryRef" class="searchPanelForm" :inline="true" v-show="showSearch">
-            <el-input
+            <el-form-item label="菜单名称:" prop="menuName">
-               v-model="queryParams.menuName"
+               <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 200px"
-               placeholder="请输入菜单名称"
+                  @keyup.enter="handleQuery" />
-               clearable
+            </el-form-item>
-               style="width: 200px"
+            <el-form-item label="状态:" prop="status">
-               @keyup.enter="handleQuery"
+               <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"
-         </el-form-item>
+                     :value="dict.value" />
-         <el-form-item label="状态" prop="status">
+               </el-select>
-            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
+            </el-form-item>
-               <el-option
+         </el-form>
-                  v-for="dict in sys_normal_disable"
+      </div>
-                  :key="dict.value"
+
-                  :label="dict.label"
+      <el-card>
-                  :value="dict.value"
+         <template #header>
-               />
+            <div class="card-header">
-            </el-select>
+               <span>系统管理</span> <span class="subHeaderTitle">- 菜单管理</span>
-         </el-form-item>
+            </div>
-         <el-form-item>
+         </template>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+         <el-row :gutter="10" class="my_row">
-         </el-form-item>
+            <el-col :span="24">
-      </el-form>
+               <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-row>
+
+         <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">
+               <template #default="scope">
+                  <svg-icon :icon-class="scope.row.icon" />
+               </template>
+            </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>
+            <el-table-column prop="status" label="状态" width="80">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <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="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>
+               </template>
+            </el-table-column>
+         </el-table>
+      </el-card>
 
-      <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-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-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-         <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 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>
-         <el-table-column prop="status" label="状态" width="80">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" width="160" 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">
-            <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>
-            </template>
-         </el-table-column>
-      </el-table>
 
       <!-- 添加或修改菜单对话框 -->
-      <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+      <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-         <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
+         :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
+                     <el-tree-select v-model="form.parentId" :data="menuOptions"
-                        v-model="form.parentId"
+                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }" value-key="menuId"
-                        :data="menuOptions"
+                        placeholder="选择上级菜单" check-strictly />
-                        :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
+                     <el-popover placement="bottom-start" :width="540" trigger="click">
-                        placement="bottom-start"
-                        :width="540"
-                        trigger="click"
-                     >
                         <template #reference>
                            <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                               <template #prefix>
-                                 <svg-icon
+                                 <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
-                                    v-if="form.icon"
+                                    style="height: 32px;width: 16px;" />
-                                    :icon-class="form.icon"
+                                 <el-icon v-else style="height: 32px;width: 16px;">
-                                    class="el-input__icon"
+                                    <search />
-                                    style="height: 32px;width: 16px;"
+                                 </el-icon>
-                                 />
-                                 <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
+                        <el-radio v-for="dict in sys_show_hide" :key="dict.value" :value="dict.value">{{ dict.label
-                           v-for="dict in sys_show_hide"
+                           }}</el-radio>
-                           :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
+                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
-                           v-for="dict in sys_normal_disable"
+                           }}</el-radio>
-                           :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")
@@ -307,146 +284,151 @@ const refreshTable = ref(true)
 const iconSelectRef = ref(null)
 
 const data = reactive({
-  form: {},
+   form: {},
-  queryParams: {
+   queryParams: {
-    menuName: undefined,
+      menuName: undefined,
-    visible: undefined
+      visible: undefined
-  },
+   },
-  rules: {
+   rules: {
-    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+      menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
+      orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
-    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
+      path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
-  },
+   },
 })
 
 const { queryParams, form, rules } = toRefs(data)
 
 /** 查询菜单列表 */
 function getList() {
-  loading.value = true
+   loading.value = true
-  listMenu(queryParams.value).then(response => {
+   listMenu(queryParams.value).then(response => {
-    menuList.value = proxy.handleTree(response.data, "menuId")
+      menuList.value = proxy.handleTree(response.data, "menuId")
-    loading.value = false
+      loading.value = false
-  })
+   })
 }
 
 /** 查询菜单下拉树结构 */
 function getTreeselect() {
-  menuOptions.value = []
+   menuOptions.value = []
-  listMenu().then(response => {
+   listMenu().then(response => {
-    const menu = { menuId: 0, menuName: "主类目", children: [] }
+      const menu = { menuId: 0, menuName: "主类目", children: [] }
-    menu.children = proxy.handleTree(response.data, "menuId")
+      menu.children = proxy.handleTree(response.data, "menuId")
-    menuOptions.value.push(menu)
+      menuOptions.value.push(menu)
-  })
+   })
 }
 
 /** 取消按钮 */
 function cancel() {
-  open.value = false
+   open.value = false
-  reset()
+   reset()
 }
 
 /** 表单重置 */
 function reset() {
-  form.value = {
+   form.value = {
-    menuId: undefined,
+      menuId: undefined,
-    parentId: 0,
+      parentId: 0,
-    menuName: undefined,
+      menuName: undefined,
-    icon: undefined,
+      icon: undefined,
-    menuType: "M",
+      menuType: "M",
-    orderNum: undefined,
+      orderNum: undefined,
-    isFrame: "1",
+      isFrame: "1",
-    isCache: "0",
+      isCache: "0",
-    visible: "0",
+      visible: "0",
-    status: "0"
+      status: "0"
-  }
+   }
-  proxy.resetForm("menuRef")
+   proxy.resetForm("menuRef")
 }
 
 /** 展示下拉图标 */
 function showSelectIcon() {
-  iconSelectRef.value.reset()
+   iconSelectRef.value.reset()
 }
 
 /** 选择图标 */
 function selected(name) {
-  form.value.icon = name
+   form.value.icon = name
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  getList()
+   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  handleQuery()
+   handleQuery()
 }
 
 /** 新增按钮操作 */
 function handleAdd(row) {
-  reset()
+   reset()
-  getTreeselect()
+   getTreeselect()
-  if (row != null && row.menuId) {
+   if (row != null && row.menuId) {
-    form.value.parentId = row.menuId
+      form.value.parentId = row.menuId
-  } else {
+   } else {
-    form.value.parentId = 0
+      form.value.parentId = 0
-  }
+   }
-  open.value = true
+   open.value = true
-  title.value = "添加菜单"
+   title.value = "添加菜单"
 }
 
 /** 展开/折叠操作 */
 function toggleExpandAll() {
-  refreshTable.value = false
+   refreshTable.value = false
-  isExpandAll.value = !isExpandAll.value
+   isExpandAll.value = !isExpandAll.value
-  nextTick(() => {
+   nextTick(() => {
-    refreshTable.value = true
+      refreshTable.value = true
-  })
+   })
 }
 
 /** 修改按钮操作 */
 async function handleUpdate(row) {
-  reset()
+   reset()
-  await getTreeselect()
+   await getTreeselect()
-  getMenu(row.menuId).then(response => {
+   getMenu(row.menuId).then(response => {
-    form.value = response.data
+      form.value = response.data
-    open.value = true
+      open.value = true
-    title.value = "修改菜单"
+      title.value = "修改菜单"
-  })
+   })
 }
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["menuRef"].validate(valid => {
+   proxy.$refs["menuRef"].validate(valid => {
-    if (valid) {
+      if (valid) {
-      if (form.value.menuId != undefined) {
+         if (form.value.menuId != undefined) {
-        updateMenu(form.value).then(response => {
+            updateMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
+               proxy.$modal.msgSuccess("修改成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
-      } else {
+         } else {
-        addMenu(form.value).then(response => {
+            addMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
+               proxy.$modal.msgSuccess("新增成功")
-          open.value = false
+               open.value = false
-          getList()
+               getList()
-        })
+            })
+         }
       }
-    }
+   })
-  })
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
+   proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function () {
-    return delMenu(row.menuId)
+      return delMenu(row.menuId)
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("删除成功")
+      proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
-getList()
+// 初始化
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getList()
+});
 </script>
+ 

src/views/system/role/authUser.vue

@@ -1,99 +1,79 @@
-
 <template>
    <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
+      <div class="searchPanel">
-         <el-form-item label="用户名称" prop="userName">
+         <el-form :model="queryParams" ref="queryRef" class="searchPanelForm" v-show="showSearch" :inline="true">
-            <el-input
+            <el-form-item label="用户名称" prop="userName">
-               v-model="queryParams.userName"
+               <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
-               placeholder="请输入用户名称"
+                  @keyup.enter="handleQuery" />
-               clearable
+            </el-form-item>
-               style="width: 240px"
+            <el-form-item label="手机号码" prop="phonenumber">
-               @keyup.enter="handleQuery"
+               <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
-            />
+                  @keyup.enter="handleQuery" />
-         </el-form-item>
+            </el-form-item>
-         <el-form-item label="手机号码" prop="phonenumber">
+         </el-form>
-            <el-input
+      </div>
-               v-model="queryParams.phonenumber"
+
-               placeholder="请输入手机号码"
+      <el-card>
-               clearable
+         <template #header>
-               style="width: 240px"
+            <div class="card-header">
-               @keyup.enter="handleQuery"
+               <span>系统管理</span> <span class="subHeaderTitle">- 角色管理 - 分配用户</span>
-            />
+            </div>
-         </el-form-item>
+         </template>
-         <el-form-item>
+
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+         <el-row :gutter="10" class="my_row">
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-col :span="24">
-         </el-form-item>
+               <el-button type="primary" class="primaryBtn" @click="openSelectUser"
-      </el-form>
+                  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-row>
+
+         <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" />
+            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+            <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+            <el-table-column label="状态" align="center" prop="status">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </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>
+               </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" />
+         <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
+      </el-card>
 
-      <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-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-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" />
-         <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-         <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-         <el-table-column label="状态" align="center" prop="status">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </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>
-            </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"
-      />
-      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
    </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()
@@ -107,73 +87,77 @@ const total = ref(0)
 const userIds = ref([])
 
 const queryParams = reactive({
-  pageNum: 1,
+   pageNum: 1,
-  pageSize: 10,
+   pageSize: 10,
-  roleId: route.params.roleId,
+   roleId: route.params.roleId,
-  userName: undefined,
+   userName: undefined,
-  phonenumber: undefined,
+   phonenumber: undefined,
 })
 
 /** 查询授权用户列表 */
 function getList() {
-  loading.value = true
+   loading.value = true
-  allocatedUserList(queryParams).then(response => {
+   allocatedUserList(queryParams).then(response => {
-    userList.value = response.rows
+      userList.value = response.rows
-    total.value = response.total
+      total.value = response.total
-    loading.value = false
+      loading.value = false
-  })
+   })
 }
 
 /** 返回按钮 */
 function handleClose() {
-  const obj = { path: "/system/role" }
+   const obj = { path: "/system/role" }
-  proxy.$tab.closeOpenPage(obj)
+   proxy.$tab.closeOpenPage(obj)
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.pageNum = 1
+   queryParams.pageNum = 1
-  getList()
+   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  handleQuery()
+   handleQuery()
 }
 
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  userIds.value = selection.map(item => item.userId)
+   userIds.value = selection.map(item => item.userId)
-  multiple.value = !selection.length
+   multiple.value = !selection.length
 }
 
 /** 打开授权用户表弹窗 */
 function openSelectUser() {
-  proxy.$refs["selectRef"].show()
+   proxy.$refs["selectRef"].show()
 }
 
 /** 取消授权按钮操作 */
 function cancelAuthUser(row) {
-  proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
+   proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
-    return authUserCancel({ userId: row.userId, roleId: queryParams.roleId })
+      return authUserCancel({ userId: row.userId, roleId: queryParams.roleId })
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("取消授权成功")
+      proxy.$modal.msgSuccess("取消授权成功")
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
 /** 批量取消授权按钮操作 */
 function cancelAuthUserAll(row) {
-  const roleId = queryParams.roleId
+   const roleId = queryParams.roleId
-  const uIds = userIds.value.join(",")
+   const uIds = userIds.value.join(",")
-  proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
+   proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
-    return authUserCancelAll({ roleId: roleId, userIds: uIds })
+      return authUserCancelAll({ roleId: roleId, userIds: uIds })
-  }).then(() => {
+   }).then(() => {
-    getList()
+      getList()
-    proxy.$modal.msgSuccess("取消授权成功")
+      proxy.$modal.msgSuccess("取消授权成功")
-  }).catch(() => {})
+   }).catch(() => { })
 }
 
-getList()
+// 初始化
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getList()
+});
 </script>

src/views/system/role/index.vue

@@ -1,249 +1,185 @@
 <template>
-   <div class="app-container">
+  <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
+    <div class="searchPanel">
-         <el-form-item label="角色名称" prop="roleName">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" class="searchPanelForm" :inline="true">
-            <el-input
+        <el-form-item label="角色名称" prop="roleName">
-               v-model="queryParams.roleName"
+          <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="min-width: 60px"
-               placeholder="请输入角色名称"
+            @keyup.enter="handleQuery" />
-               clearable
+        </el-form-item>
-               style="width: 240px"
+        <el-form-item label="权限字符" prop="roleKey">
-               @keyup.enter="handleQuery"
+          <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="min-width: 60px"
-            />
+            @keyup.enter="handleQuery" />
-         </el-form-item>
+        </el-form-item>
-         <el-form-item label="权限字符" prop="roleKey">
+        <el-form-item label="状态" prop="status">
-            <el-input
+          <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="min-width: 86px">
-               v-model="queryParams.roleKey"
+            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-               placeholder="请输入权限字符"
+          </el-select>
-               clearable
+        </el-form-item>
-               style="width: 240px"
+        <el-form-item label="创建时间" style="width: 308px">
-               @keyup.enter="handleQuery"
+          <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-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>
-         </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-form-item>
       </el-form>
-      <el-row :gutter="10" class="mb8">
+    </div>
-         <el-col :span="1.5">
+
-            <el-button
+    <el-card>
-               type="primary"
+      <template #header>
-               plain
+        <div class="card-header">
-               icon="Plus"
+          <span>系统管理</span> <span class="subHeaderTitle">- 角色管理</span>
-               @click="handleAdd"
+        </div>
-               v-hasPermi="['system:role:add']"
+      </template>
-            >新增</el-button>
+
-         </el-col>
+      <el-row :gutter="10" class="my_row">
-         <el-col :span="1.5">
+        <el-col :span="24">
-            <el-button
+          <el-button type="primary" class="primaryBtn" @click="handleAdd"
-               type="success"
+            v-hasPermi="['system:role:add']">新增</el-button>
-               plain
+          <el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
-               icon="Edit"
+            v-hasPermi="['system:role:edit']">修改</el-button>
-               :disabled="single"
+          <el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
-               @click="handleUpdate"
+            v-hasPermi="['system:role:remove']">删除</el-button>
-               v-hasPermi="['system:role:edit']"
+          <el-button type="primary" class="primaryBtn" @click="handleExport"
-            >修改</el-button>
+            v-hasPermi="['system:role:export']">导出</el-button>
-         </el-col>
+          <el-button type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
-         <el-col :span="1.5">
+          <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
-            <el-button
+        </el-col>
-               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)"
-         <el-table-column type="selection" width="55" align="center" />
+        @selection-change="handleSelectionChange">
-         <el-table-column label="角色编号" prop="roleId" width="120" />
+        <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="角色编号" prop="roleId" />
-         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" />
-         <el-table-column label="显示顺序" prop="roleSort" width="100" />
+        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" />
-         <el-table-column label="状态" align="center" width="100">
+        <el-table-column label="显示顺序" prop="roleSort" />
-            <template #default="scope">
+        <el-table-column label="状态" align="center">
-               <el-switch
+          <template #default="scope">
-                  v-model="scope.row.status"
+            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
-                  active-value="0"
+              @change="handleStatusChange(scope.row)"></el-switch>
-                  inactive-value="1"
+          </template>
-                  @change="handleStatusChange(scope.row)"
+        </el-table-column>
-               ></el-switch>
+        <el-table-column label="创建时间" align="center" prop="createTime">
-            </template>
+          <template #default="scope">
-         </el-table-column>
+            <span>{{ parseTime(scope.row.createTime) }}</span>
-         <el-table-column label="创建时间" align="center" prop="createTime">
+          </template>
-            <template #default="scope">
+        </el-table-column>
-               <span>{{ parseTime(scope.row.createTime) }}</span>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            </template>
+          <template #default="scope">
-         </el-table-column>
+            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-            <template #default="scope">
+                v-hasPermi="['system:role:edit']"></el-button>
-              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
+            </el-tooltip>
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-              </el-tooltip>
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
+                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>
+            <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
+              <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)"
-                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
+            </el-tooltip>
-              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
+            <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)"
-              </el-tooltip>
+                v-hasPermi="['system:role:edit']"></el-button>
-            </template>
+            </el-tooltip>
-         </el-table-column>
+          </template>
+        </el-table-column>
       </el-table>
 
-      <pagination
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-         v-show="total > 0"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
-         :total="total"
+    </el-card>
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
 
-      <!-- 添加或修改角色配置对话框 -->
+    <!-- 添加或修改角色配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
+      :close-on-click-modal="false">
-            <el-form-item label="角色名称" prop="roleName">
+      <el-form ref="roleRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
-               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        <el-form-item label="角色名称" prop="roleName">
-            </el-form-item>
+          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-            <el-form-item prop="roleKey">
+        </el-form-item>
-               <template #label>
+        <el-form-item prop="roleKey">
-                  <span>
+          <template #label>
-                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+            <span>
-                        <el-icon><question-filled /></el-icon>
+              <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-                     </el-tooltip>
+                <el-icon><question-filled /></el-icon>
-                     权限字符
+              </el-tooltip>
-                  </span>
+              权限字符
-               </template>
+            </span>
-               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+          </template>
-            </el-form-item>
+          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-            <el-form-item label="角色顺序" prop="roleSort">
+        </el-form-item>
-               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        <el-form-item label="角色顺序" prop="roleSort">
-            </el-form-item>
+          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-            <el-form-item label="状态">
+        </el-form-item>
-               <el-radio-group v-model="form.status">
+        <el-form-item label="状态">
-                  <el-radio
+          <el-radio-group v-model="form.status">
-                     v-for="dict in sys_normal_disable"
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
-                     :key="dict.value"
+            }}</el-radio>
-                     :value="dict.value"
+          </el-radio-group>
-                  >{{ dict.label }}</el-radio>
+        </el-form-item>
-               </el-radio-group>
+        <el-form-item label="菜单权限">
-            </el-form-item>
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-            <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly"
-               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+            @change="handleCheckedTreeConnect($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"
-               <el-tree
+            :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
-                  class="tree-border"
+            :props="{ label: 'label', children: 'children' }"></el-tree>
-                  :data="menuOptions"
+        </el-form-item>
-                  show-checkbox
+        <el-form-item label="备注">
-                  ref="menuRef"
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-                  node-key="id"
+        </el-form-item>
-                  :check-strictly="!form.menuCheckStrictly"
+      </el-form>
-                  empty-text="加载中，请稍候"
+      <template #footer>
-                  :props="{ label: 'label', children: 'children' }"
+        <div class="dialog-footer">
-               ></el-tree>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
-            </el-form-item>
+          <el-button @click="cancel">取 消</el-button>
-            <el-form-item label="备注">
+        </div>
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+      </template>
-            </el-form-item>
+    </el-dialog>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
 
-      <!-- 分配角色数据权限对话框 -->
+    <!-- 分配角色数据权限对话框 -->
-      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
+    <el-dialog :title="title" v-model="openDataScope" width="650px" class="my_dialog" append-to-body
-         <el-form :model="form" label-width="80px">
+      :destroy-on-close="true" :close-on-click-modal="false">
-            <el-form-item label="角色名称">
+      <el-form :model="form" label-width="80px" class="myInsertForm">
-               <el-input v-model="form.roleName" :disabled="true" />
+        <el-form-item label="角色名称">
-            </el-form-item>
+          <el-input v-model="form.roleName" :disabled="true" />
-            <el-form-item label="权限字符">
+        </el-form-item>
-               <el-input v-model="form.roleKey" :disabled="true" />
+        <el-form-item label="权限字符">
-            </el-form-item>
+          <el-input v-model="form.roleKey" :disabled="true" />
-            <el-form-item label="权限范围">
+        </el-form-item>
-               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+        <el-form-item label="权限范围">
-                  <el-option
+          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                     v-for="item in dataScopeOptions"
+            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label"
-                     :key="item.value"
+              :value="item.value"></el-option>
-                     :label="item.label"
+          </el-select>
-                     :value="item.value"
+        </el-form-item>
-                  ></el-option>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
-               </el-select>
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-            </el-form-item>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-            <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="form.deptCheckStrictly"
-               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+            @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id"
-               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+            :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候"
-               <el-tree
+            :props="{ label: 'label', children: 'children' }"></el-tree>
-                  class="tree-border"
+        </el-form-item>
-                  :data="deptOptions"
+      </el-form>
-                  show-checkbox
+      <template #footer>
-                  default-expand-all
+        <div class="dialog-footer">
-                  ref="deptRef"
+          <el-button type="primary" @click="submitDataScope">确 定</el-button>
-                  node-key="id"
+          <el-button @click="cancelDataScope">取 消</el-button>
-                  :check-strictly="!form.deptCheckStrictly"
+        </div>
-                  empty-text="加载中，请稍候"
+      </template>
-                  :props="{ label: 'label', children: 'children' }"
+    </el-dialog>
-               ></el-tree>
+  </div>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitDataScope">确 定</el-button>
-               <el-button @click="cancelDataScope">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
 </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()
@@ -327,7 +263,7 @@ function handleDelete(row) {
   }).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+  }).catch(() => { })
 }
 
 /** 导出按钮操作 */
@@ -580,5 +516,9 @@ function cancelDataScope() {
   reset()
 }
 
-getList()
+// 初始化
+onMounted(() => {
+   bgStore.setBgImage(otherbg)
+   getList()
+});
 </script>

src/views/system/role/selectUser.vue

@@ -1,32 +1,24 @@
 <template>
    <!-- 授权用户 -->
-   <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
+   <el-dialog title="选择用户" v-model="visible" width="900px" top="5vh" class="my_dialog" append-to-body
-      <el-form :model="queryParams" ref="queryRef" :inline="true">
+      :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
+            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 180px"
-               v-model="queryParams.userName"
+               @keyup.enter="handleQuery" />
-               placeholder="请输入用户名称"
-               clearable
-               style="width: 180px"
-               @keyup.enter="handleQuery"
-            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
+            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 180px"
-               v-model="queryParams.phonenumber"
+               @keyup.enter="handleQuery" />
-               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 type="primary" class="primaryBtn" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</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
+         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            v-show="total > 0"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
-            :total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="getList"
-         />
       </el-row>
       <template #footer>
          <div class="dialog-footer">
@@ -64,9 +51,9 @@
 import { authUserSelectAll, unallocatedUserList } from "@/api/system/role"
 
 const props = defineProps({
-  roleId: {
+   roleId: {
-    type: [Number, String]
+      type: [Number, String]
-  }
+   }
 })
 
 const { proxy } = getCurrentInstance()
@@ -78,67 +65,67 @@ const total = ref(0)
 const userIds = ref([])
 
 const queryParams = reactive({
-  pageNum: 1,
+   pageNum: 1,
-  pageSize: 10,
+   pageSize: 10,
-  roleId: undefined,
+   roleId: undefined,
-  userName: undefined,
+   userName: undefined,
-  phonenumber: undefined
+   phonenumber: undefined
 })
 
 // 显示弹框
 function show() {
-  queryParams.roleId = props.roleId
+   queryParams.roleId = props.roleId
-  getList()
+   getList()
-  visible.value = true
+   visible.value = true
 }
 
 /**选择行 */
 function clickRow(row) {
-  proxy.$refs["refTable"].toggleRowSelection(row)
+   proxy.$refs["refTable"].toggleRowSelection(row)
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
-  userIds.value = selection.map(item => item.userId)
+   userIds.value = selection.map(item => item.userId)
 }
 
 // 查询表数据
 function getList() {
-  unallocatedUserList(queryParams).then(res => {
+   unallocatedUserList(queryParams).then(res => {
-    userList.value = res.rows
+      userList.value = res.rows
-    total.value = res.total
+      total.value = res.total
-  })
+   })
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.pageNum = 1
+   queryParams.pageNum = 1
-  getList()
+   getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef")
+   proxy.resetForm("queryRef")
-  handleQuery()
+   handleQuery()
 }
 
 const emit = defineEmits(["ok"])
 /** 选择授权用户操作 */
 function handleSelectUser() {
-  const roleId = queryParams.roleId
+   const roleId = queryParams.roleId
-  const uIds = userIds.value.join(",")
+   const uIds = userIds.value.join(",")
-  if (uIds == "") {
+   if (uIds == "") {
-    proxy.$modal.msgError("请选择要分配的用户")
+      proxy.$modal.msgError("请选择要分配的用户")
-    return
+      return
-  }
+   }
-  authUserSelectAll({ roleId: roleId, userIds: uIds }).then(res => {
+   authUserSelectAll({ roleId: roleId, userIds: uIds }).then(res => {
-    proxy.$modal.msgSuccess(res.msg)
+      proxy.$modal.msgSuccess(res.msg)
-    visible.value = false
+      visible.value = false
-    emit("ok")
+      emit("ok")
-  })
+   })
 }
 
 defineExpose({
-  show,
+   show,
 })
 </script>

src/views/system/user/authRole.vue

@@ -1,52 +1,68 @@
 <template>
-   <div class="app-container">
+  <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>
+        <el-row>
-            <el-col :span="8" :offset="2">
+          <el-col :span="8" :offset="2">
-               <el-form-item label="用户昵称" prop="nickName">
+            <el-form-item label="用户昵称" prop="nickName">
-                  <el-input v-model="form.nickName" disabled />
+              <el-input v-model="form.nickName" disabled />
-               </el-form-item>
+            </el-form-item>
-            </el-col>
+          </el-col>
-            <el-col :span="8" :offset="2">
+          <el-col :span="8" :offset="2">
-               <el-form-item label="登录账号" prop="userName">
+            <el-form-item label="登录账号" prop="userName">
-                  <el-input v-model="form.userName" disabled />
+              <el-input v-model="form.userName" disabled />
-               </el-form-item>
+            </el-form-item>
-            </el-col>
+          </el-col>
-         </el-row>
+        </el-row>
       </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 v-loading="loading"  height="calc(100vh - 450px)" :row-key="getRowKey" @row-click="clickRow" ref="roleRef"
-         <el-table-column label="序号" width="55" type="index" align="center">
+        @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
-            <template #default="scope">
+        <el-table-column label="序号" width="70" type="index" align="center">
-               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+          <template #default="scope">
-            </template>
+            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-         </el-table-column>
+          </template>
-         <el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable" width="55"></el-table-column>
+        </el-table-column>
-         <el-table-column label="角色编号" align="center" prop="roleId" />
+        <el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable"
-         <el-table-column label="角色名称" align="center" prop="roleName" />
+          width="55"></el-table-column>
-         <el-table-column label="权限字符" align="center" prop="roleKey" />
+        <el-table-column label="角色编号" align="center" prop="roleId" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <el-table-column label="角色名称" align="center" prop="roleName" />
-            <template #default="scope">
+        <el-table-column label="权限字符" align="center" prop="roleKey" />
-               <span>{{ parseTime(scope.row.createTime) }}</span>
+        <el-table-column label="创建时间" align="center" prop="createTime">
-            </template>
+          <template #default="scope">
-         </el-table-column>
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
+ 
+    </el-card>
 
-      <el-form label-width="100px">
+
-         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
+  </div>
-            <el-button type="primary" @click="submitForm()">提交</el-button>
-            <el-button @click="close()">返回</el-button>
-         </div>
-      </el-form>
-   </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()
@@ -101,7 +117,8 @@ function submitForm() {
   })
 }
 
-(() => {
+(() => { 
+  bgStore.setBgImage(otherbg)
   const userId = route.params && route.params.userId
   if (userId) {
     loading.value = true

src/views/system/user/index.vue

@@ -1,109 +1,110 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <div class="searchPanel">
-      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="searchPanelForm">
-        <!--部门数据-->
+        <el-form-item label="部门">
-        <pane size="16">
+          <el-tree-select v-model="queryParams.deptId" :data="deptOptions" clearable
-          <el-col>
+            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门"
-            <div class="head-container">
+            check-strictly style="width: 140px" />
-              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
+        </el-form-item>
-            </div>
+        <el-form-item label="用户名称" prop="userName">
-            <div class="head-container">
+          <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 140px"
-              <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" />
+            @keyup.enter="handleQuery" />
-            </div>
+        </el-form-item>
-          </el-col>
+        <el-form-item label="手机号码" prop="phonenumber">
-        </pane>
+          <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 140px"
-        <!--用户数据-->
+            @keyup.enter="handleQuery" />
-        <pane size="84">
+        </el-form-item>
-          <el-col>
+        <el-form-item label="状态" prop="status">
-            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+          <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="min-width: 86px">
-              <el-form-item label="用户名称" prop="userName">
+            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+          </el-select>
-              </el-form-item>
+        </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
+        <el-form-item label="创建时间" style="width: 308px">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
+          <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
-              </el-form-item>
+            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              <el-form-item label="状态" prop="status">
+        </el-form-item>
-                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+      </el-form>
-                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+    </div>
-                </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-form-item>
-            </el-form>
 
-            <el-row :gutter="10" class="mb8">
+    <el-card>
-              <el-col :span="1.5">
+      <template #header>
-                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+        <div class="card-header">
-              </el-col>
+          <span>系统管理</span> <span class="subHeaderTitle">- 用户管理</span>
-              <el-col :span="1.5">
+        </div>
-                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
+      </template>
-              </el-col>
+
-              <el-col :span="1.5">
+      <el-row :gutter="10" class="my_row">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
+        <el-col :span="24">
-              </el-col>
+          <el-button type="primary" class="primaryBtn" @click="handleAdd"
-              <el-col :span="1.5">
+            v-hasPermi="['system:user:add']">新增</el-button>
-                <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+          <el-button type="primary" class="primaryBtn" :disabled="single" @click="handleUpdate"
-              </el-col>
+            v-hasPermi="['system:user:edit']">修改</el-button>
-              <el-col :span="1.5">
+          <el-button type="primary" class="primaryBtn" :disabled="multiple" @click="handleDelete"
-                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+            v-hasPermi="['system:user:remove']">删除</el-button>
-              </el-col>
+          <el-button type="primary" class="primaryBtn" @click="handleImport"
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+            v-hasPermi="['system:user:import']">导入</el-button>
-            </el-row>
+          <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-row>
+
+      <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="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>
+          </template>
+        </el-table-column>
+        <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>
+        </el-table-column>
+        <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-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-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-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-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-card>
 
-            <el-table v-loading="loading" :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="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>
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-                <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-              </el-table-column>
-              <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-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-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-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-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>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="800px" class="my_dialog" append-to-body :destroy-on-close="true"
-      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
+      :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-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" 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>
+      :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()
@@ -359,14 +373,14 @@ function handleDelete(row) {
   }).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
+  }).catch(() => { })
 }
 
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download("system/user/export", {
     ...queryParams.value,
-  },`user_${new Date().getTime()}.xlsx`)
+  }, `user_${new Date().getTime()}.xlsx`)
 }
 
 /** 用户状态修改  */
@@ -418,7 +432,7 @@ function handleResetPwd(row) {
     resetUserPwd(row.userId, value).then(response => {
       proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
     })
-  }).catch(() => {})
+  }).catch(() => { })
 }
 
 /** 选择条数  */
@@ -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>