Skip to content

P
psa-web
Commit 474c077a authored by 高滢's avatar 高滢
Browse files
Options

feat(页面): 布局

parent 0159581a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1055 additions and 593 deletions
src/assets/styles/element-ui.scss
View file @ 474c077a
......@@ -116,3 +116,6 @@ $base-font-size: 16px;
.el-select__wrapper{
min-height:36px;
}
.el-date-editor .el-range-input{
font-size: 14px;
}
src/assets/styles/index.scss
View file @ 474c077a
......@@ -124,6 +124,8 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
background: #FAFAFB;
min-height: calc(100vh - 100px);
}
.components-container {
......
src/assets/styles/sidebar.scss
View file @ 474c077a
......@@ -44,7 +44,8 @@
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
height: calc(100% - 300px);
margin-top:80px;
}
}
......@@ -82,7 +83,7 @@
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: #1B51B4 !important;
}
}
......@@ -95,7 +96,7 @@
min-width: $base-sidebar-width !important;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: #1B51B4 !important;
}
}
......@@ -211,7 +212,7 @@
.el-menu-item {
&:hover {
// you can use $sub-menuHover
background-color: rgba(0, 0, 0, 0.06) !important;
background-color: #1B51B4 !important;
}
}
......
src/assets/styles/variables.module.scss
View file @ 474c077a
......@@ -10,9 +10,9 @@ $panGreen: #30B08F;
// 默认主题变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;
$menuActiveText: #FFFFFF;
$menuBg: #143468;
$menuHover: #1B51B4;
// 浅色主题theme-light
$menuLightBg: #ffffff;
......@@ -27,9 +27,9 @@ $sideBarWidth: 200px;
// 菜单暗色变量
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
$base-menu-background: #143468;
$base-sub-menu-background: #143468;
$base-sub-menu-hover: #1B51B4;
// 组件变量
$--color-primary: #409EFF;
......
src/components/Breadcrumb/index.vue
View file @ 474c077a
......@@ -95,4 +95,4 @@ getBreadcrumb()
cursor: text;
}
}
</style>
\ No newline at end of file
</style>
src/layout/components/AppMain.vue
View file @ 474c077a
......@@ -36,7 +36,7 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
min-height: calc(100vh - 100px);
width: 100%;
position: relative;
overflow: hidden;
......@@ -49,7 +49,7 @@ function addIframe() {
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
min-height: calc(100vh - 134px);
}
.fixed-header + .app-main {
......
src/layout/components/Navbar.vue
View file @ 474c077a
......@@ -5,44 +5,64 @@
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" />
<!-- <template v-if="appStore.device !== 'mobile'">-->
<!-- <div class="todo">-->
<div class="todo hover-effect">
<div class="todo-logo"><img :src="todo" class="img-logo"/></div>
<div class="todo-title">待办</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="send" class="todo-logo"/></div>
<div class="todo-title">发起</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="handle" class="todo-logo"/></div>
<div class="todo-title">处理</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="initiate" class="todo-logo"/></div>
<div class="todo-title">抄送</div>
</div>
<!-- </div>-->
<!-- <header-search id="header-search" class="right-menu-item" />-->
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
<!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
<el-tooltip content="主题模式" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
</div>
</el-tooltip>
<!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
<!-- <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">-->
<!-- <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
<!-- <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
<!-- </div>-->
<!-- </el-tooltip>-->
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
<!-- </template>-->
<el-divider direction="vertical" style="height: 50px"/>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon>
<img :src="exit" class="user-exit" />
<!-- <img :src="userStore.avatar" class="user-avatar" />-->
<!-- <el-icon><caret-bottom /></el-icon>-->
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<span>布局设置</span>
</el-dropdown-item>
<!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
<!-- <span>布局设置</span>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
......@@ -67,11 +87,14 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import todo from '@/assets/icons/common/todo.png'
import send from '@/assets/icons/common/send2.png'
import handle from '@/assets/icons/common/handle.png'
import initiate from '@/assets/icons/common/initiate.png'
import exit from '@/assets/icons/common/exit.png'
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
function toggleSideBar() {
appStore.toggleSideBar()
}
......@@ -113,12 +136,11 @@ function toggleTheme() {
<style lang='scss' scoped>
.navbar {
height: 50px;
height: 100px;
overflow: hidden;
position: relative;
background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
......@@ -126,7 +148,8 @@ function toggleTheme() {
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
......@@ -134,6 +157,8 @@ function toggleTheme() {
.breadcrumb-container {
float: left;
display: flex;
height: 100%;
}
.topmenu-container {
......@@ -151,7 +176,32 @@ function toggleTheme() {
height: 100%;
line-height: 50px;
display: flex;
align-items: center;
.todo{
margin-right: 30px;
.todo-logo{
height:28px;
width: 28px;
.img-logo{
height:28px;
width: 28px;
}
}
.todo-title{
height: 20px;
font-weight: 500;
font-size: 14px;
color: #282D35;
}
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
&:focus {
outline: none;
}
......@@ -179,7 +229,7 @@ function toggleTheme() {
svg {
transition: transform 0.3s;
&:hover {
transform: scale(1.15);
}
......@@ -188,12 +238,16 @@ function toggleTheme() {
}
.avatar-container {
margin-left: 22px;
margin-right: 40px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-exit{
width: 28px;
height: 28px;
}
.user-avatar {
cursor: pointer;
width: 40px;
......
src/layout/components/Sidebar/index.vue
View file @ 474c077a
<template>
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" />
<img :src="toplogo" class="toplogo">
<div class="avatar">
<img :src="userStore.avatar" class="user-avatar" />
<div style="color:#FFFFFF;font-size: 20px;font-weight: 600;">{{userStore.name}}</div>
</div>
<!-- <logo v-if="showLogo" :collapse="isCollapse" />-->
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
......@@ -21,6 +26,9 @@
/>
</el-menu>
</el-scrollbar>
<div style="display: flex;justify-content: center">
<img :src="comlogo" class="comlogo">
</div>
</div>
</template>
......@@ -31,12 +39,14 @@ import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import toplogo from '@/assets/icons/common/toplogo.png'
import comlogo from '@/assets/icons/common/comlogo.png'
import useUserStore from "@/store/modules/user.js";
const route = useRoute();
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const userStore = useUserStore()
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme);
......@@ -71,7 +81,24 @@ const activeMenu = computed(() => {
<style lang="scss" scoped>
.sidebar-container {
background-color: v-bind(getMenuBackground);
.avatar{
position: absolute;
top: 40px;
left: 90px;
}
.user-avatar{
width: 70px;
height: 70px;
border-radius: 50%;
}
.comlogo{
width: 170px;
height:50px;
}
.toplogo{
height: 81px;
width: 100%;
}
.scrollbar-wrapper {
background-color: v-bind(getMenuBackground);
}
......@@ -80,7 +107,7 @@ const activeMenu = computed(() => {
border: none;
height: 100%;
width: 100% !important;
.el-menu-item, .el-sub-menu__title {
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
......@@ -89,7 +116,7 @@ const activeMenu = computed(() => {
.el-menu-item {
color: v-bind(getMenuTextColor);
&.is-active {
color: var(--menu-active-text, #409eff);
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
......
src/layout/index.vue
View file @ 474c077a
......@@ -5,7 +5,7 @@
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
<!-- <tags-view v-if="needTagsView" />-->
</div>
<app-main />
<settings ref="settingRef" />
......@@ -111,4 +111,4 @@ function setLayout() {
.mobile .fixed-header {
width: 100%;
}
</style>
\ No newline at end of file
</style>
src/views/attendance/application/overtimeApplication.vue
View file @ 474c077a
<template >
<template>
<div id="app">
<el-container>
<el-container>
......
src/views/material/index.vue
View file @ 474c077a
......@@ -14,22 +14,40 @@
<el-row>
<el-col :span="24">
<label class="input-label">物品编号</label>
<el-input v-model="form.itemCode" disabled style="width: 20%;"></el-input>
<el-input
v-model="form.itemCode"
disabled
style="width: 20%"
></el-input>
</el-col>
</el-row>
<!-- 物品名称 -->
<el-row>
<el-col :span="24">
<label class="input-label">物品名称</label>
<el-input v-model="form.itemName" placeholder="请输入物品名称" style="width: 20%;"></el-input>
<el-input
v-model="form.itemName"
placeholder="请输入物品名称"
style="width: 20%"
></el-input>
</el-col>
</el-row>
<!-- 物品类型 -->
<el-row>
<el-col :span="24">
<label class="input-label">物品类型</label>
<el-select v-model="form.itemType" filterable placeholder="请选择或输入" style="width: 20%;">
<el-option v-for="item in itemTypes" :key="item" :label="item" :value="item"></el-option>
<el-select
v-model="form.itemType"
filterable
placeholder="请选择或输入"
style="width: 20%"
>
<el-option
v-for="item in itemTypes"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-col>
</el-row>
......@@ -37,22 +55,28 @@
<el-row>
<el-col :span="24">
<label class="input-label">单位</label>
<el-input v-model="form.unit" placeholder="请输入单位" style="width: 20%;"></el-input>
<el-input
v-model="form.unit"
placeholder="请输入单位"
style="width: 20%"
></el-input>
</el-col>
</el-row>
</el-form>
<!-- 提交和保存草稿按钮 -->
<div class="button-container">
<el-button type="primary" @click="handleSubmit" style="margin-right: 20px;">提交</el-button>
<el-button type="primary" style="margin-right: 20px" @click="handleSubmit"
>提交</el-button
>
<el-button @click="saveDraft">保存草稿</el-button>
</div>
</div>
</template>
<script>
import { addMaterial } from '@/api/material/material.js';
import { ElMessage } from 'element-plus';
import { addMaterial } from '@/api/material/material.js'
import { ElMessage } from 'element-plus'
export default {
data() {
......@@ -64,36 +88,52 @@ export default {
unit: ''
},
itemTypes: ['办公家具', '办公设备', '日杂百货']
};
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialDraft')
if (draft) {
this.form = JSON.parse(draft)
ElMessage.info('已加载草稿')
}
},
mounted() {
// 页面加载时生成物品编号
if (!this.form.itemCode) {
this.form.itemCode = this.generateItemCode()
}
},
methods: {
generateItemCode() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `WP${year}${month}${day}${hours}${minutes}${seconds}`;
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
return `WP${year}${month}${day}${hours}${minutes}${seconds}`
},
handleSubmit() {
if (this.form.itemName && this.form.itemType && this.form.unit) {
addMaterial(this.form).then(response => {
ElMessage.success('物品信息提交成功');
// 清空表单
this.resetForm();
}).catch(error => {
ElMessage.error('物品信息提交失败: ' + error.message);
});
addMaterial(this.form)
.then(response => {
ElMessage.success('物品信息提交成功')
// 清空表单
this.resetForm()
})
.catch(error => {
ElMessage.error('物品信息提交失败: ' + error.message)
})
} else {
ElMessage.warning('请填写所有必填项');
ElMessage.warning('请填写所有必填项')
}
},
saveDraft() {
// 保存草稿到本地存储
localStorage.setItem('materialDraft', JSON.stringify(this.form));
ElMessage.info('草稿已保存');
localStorage.setItem('materialDraft', JSON.stringify(this.form))
ElMessage.info('草稿已保存')
},
resetForm() {
this.form = {
......@@ -101,26 +141,12 @@ export default {
itemName: '',
itemType: '',
unit: ''
};
}
// 清除草稿
localStorage.removeItem('materialDraft');
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialDraft');
if (draft) {
this.form = JSON.parse(draft);
ElMessage.info('已加载草稿');
}
},
mounted() {
// 页面加载时生成物品编号
if (!this.form.itemCode) {
this.form.itemCode = this.generateItemCode();
localStorage.removeItem('materialDraft')
}
}
};
}
</script>
<style scoped>
......@@ -149,7 +175,7 @@ export default {
border-bottom: 4px solid;
border-color: rgb(0, 137, 127);
height: 2px;
opacity: .2;
opacity: 0.2;
margin-top: 6px;
}
......
src/views/material/materialApply.vue
View file @ 474c077a
This diff is collapsed.
src/views/material/materialEntry.vue
View file @ 474c077a
This diff is collapsed.
src/views/material/materialReturn.vue
View file @ 474c077a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment