diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png index 3a48fd8..4640a10 100644 Binary files a/src/assets/imgs/logo.png and b/src/assets/imgs/logo.png differ diff --git a/src/assets/imgs/编组 3.png b/src/assets/imgs/编组 3.png index 9205239..4640a10 100644 Binary files a/src/assets/imgs/编组 3.png and b/src/assets/imgs/编组 3.png differ diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index 5d2e3c8..32e0af1 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -1,18 +1,5 @@ @use 'sass:math'; -// @font-face { -// font-family: AliPuHui; -// /*这里是说明调用来的字体名字*/ -// src: url('../font/Alibaba-PuHuiTi/Alibaba-PuHuiTi-Regular.ttf'); -// /*这里是字体文件路径*/ -// } - -// @font-face { -// font-family: AliPuHuiBold; -// /*这里是说明调用来的字体名字*/ -// src: url('../font/Alibaba-PuHuiTi/Alibaba-PuHuiTi-Bold.ttf'); -// /*这里是字体文件路径*/ -// } * { box-sizing: border-box; @@ -117,76 +104,11 @@ body { .aifs { align-items: flex-start; } -// 按钮内边距 -.pd8-15 { - padding: 0.08rem 0.15rem; -} -.pd8-23 { - padding: 0.08rem 0.23rem; -} -.w300-h30 { - width: 70%; - height: 32px; - flex-shrink: 0; - flex-grow: 0; -} -:deep(.w300-h30) { - width: 70%; - height: 32px; - flex-shrink: 0; - flex-grow: 0; -} -.h100 { - height: 100px; -} -.h200 { - height: 200px; -} -.h300 { - height: 300px; -} -.w100-h30 { - width: 1rem; - height: 30px; -} -.w200-h30 { - width: 70% !important; - height: 30px; - flex-shrink: 0; - flex-grow: 0; -} -:deep(.w200-h30) { - width: 70% !important; - height: 30px; - flex-shrink: 0; - flex-grow: 0; -} -.w200-h20 { - width: 2rem; - height: 20px; -} -.w140-h30 { - width: 1.4rem; - height: 30px; -} -.w150-h30 { - width: 150px; - height: 30px; -} -.w90-h40 { - width: 90px; - height: 40px; -} - -.w75-h30 { - width: 75px; - height: 30px; -} //外边距 .ml10 { @@ -256,18 +178,8 @@ body { .no_wrap { white-space: nowrap; } -.no-data { - // color: #000; - width: 100%; - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -// .theme-color { -// color: $lightThemColor; -// } + + /* 竖向弹性盒子 */ .flex-col { @include flex-row-vc; @@ -351,14 +263,6 @@ body { } } -@mixin scroll-none { - scrollbar-width: none; - /* firefox */ - -ms-overflow-style: none; - /* IE 10+ */ - overflow-x: hidden; - overflow-y: scroll; -} // dialog弹出给body加了该类名,导致页面右侧偏移 .el-popup-parent--hidden { @@ -412,67 +316,8 @@ body { // color: #ffffff; // } } -// 公共dialog -.center-dialog { - display: flex; - justify-content: center; - align-items: center; - // overflow: hidden; - :deep(.el-dialog) { - margin: 0 !important; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - .el-dialog__header { - border-bottom: 1px solid #d8d8d8; - } - .el-dialog__body { - // overflow: hidden; - overflow: auto; - // height: 70vh; //最大高度为视口高度的90% - } - } -} -.common-dialog { - display: flex; - justify-content: center; - align-items: center; - // overflow: hidden; - :deep(.el-dialog) { - margin: 0 !important; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - .el-dialog__header { - border-bottom: 1px solid #d8d8d8; - height: 38px; - font-weight: bold; - font-size: 14px; - line-height: 38px; - padding: 0; - padding-left: 16px; - text-align: left; - .el-dialog__title { - color: #333333; - font-size: 14px !important; - } - } - .el-dialog__body { - // overflow: hidden; - overflow: auto; - max-height: 90vh; //最大高度为视口高度的90% - // height: auto; - } - .el-dialog__headerbtn { - height: 36px; - } - .table-container { - min-height: 30vh; - } - } -} + + :deep(.el-form-item__content) { align-items: flex-start !important; } @@ -491,35 +336,8 @@ body { .pr15 { padding-right: 15px; } -.image-slot-error { - height: 100%; - width: 100%; - background-color: #f7f5f5; - align-items: center; - justify-content: center; - display: flex; -} -.no-data { - // color: #000; - width: 100%; - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -// 蓝色文字下划线可点击 -.text_underline { - font-family: MicrosoftYaHei; - font-size: 14px; - color: #5584ff; - line-height: 22px; - text-align: center; - font-style: normal; - text-decoration-line: underline; - -moz-text-decoration-line: underline; - cursor: pointer; -} + + :deep(.el-button--primary:not(.is-text)) { background-color: #5584ff !important ; color: #fff !important; @@ -531,18 +349,7 @@ body { padding: 10px 0; background: #f5f5f5; } -.optionTitle { - background-color: #f7f7f7; - height: 40px; - line-height: 40px; - padding-left: 10px; -} -// :deep(.el-radio-button__inner){ -// width: 120px; -// } -// :deep(*:not(.el-dialog__body) .is-active .el-radio-button__inner){ -// background: #5584FF; -// } + :deep(.el-dialog--center .el-dialog__body) { padding: 32px !important; } diff --git a/src/assets/styles/pagecss.scss b/src/assets/styles/pagecss.scss new file mode 100644 index 0000000..1f409e7 --- /dev/null +++ b/src/assets/styles/pagecss.scss @@ -0,0 +1,95 @@ + +/* 适用于所有页面的通用样式 */ +:root { + --primary-color: #1890ff; + --secondary-color: #f0f2f5; + --text-color: #333333; + --border-color: #e8e8e8; +} + +.page-container { + background-color: var(--secondary-color); + padding: 24px; + min-height: 100vh; +} + +.content-card { + background-color: #ffffff; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 24px; +} + +.page-title { + font-size: 20px; + font-weight: 500; + color: var(--text-color); + margin-bottom: 24px; +} + +/* 表格样式优化 */ +:deep(.el-table) { + border: 1px solid var(--border-color); + border-radius: 4px; +} + +:deep(.el-table__header) { + background-color: #fafafa; +} + +:deep(.el-table__header th) { + background-color: #fafafa; + color: var(--text-color); + font-weight: 500; +} + +:deep(.el-table__body td) { + color: var(--text-color); +} + +/* 按钮样式优化 */ +.el-button { + border-radius: 4px; +} + +.el-button--primary { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +/* 表单样式优化 */ +.el-form-item__label { + color: var(--text-color); +} + +.el-input__wrapper, +.el-select .el-input__wrapper { + border-radius: 4px; +} + +/* 对话框样式优化 */ +:deep(.el-dialog) { + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +:deep(.el-dialog__header) { + background-color: #fafafa; + padding: 16px 24px; + border-bottom: 1px solid var(--border-color); +} + +:deep(.el-dialog__title) { + font-size: 16px; + font-weight: 500; + color: var(--text-color); +} + +:deep(.el-dialog__body) { + padding: 24px; +} + +:deep(.el-dialog__footer) { + padding: 16px 24px; + border-top: 1px solid var(--border-color); +} \ No newline at end of file diff --git a/src/components/selectUser.vue b/src/components/selectUser.vue new file mode 100644 index 0000000..a937732 --- /dev/null +++ b/src/components/selectUser.vue @@ -0,0 +1,254 @@ + + + + + \ No newline at end of file diff --git a/src/components/table.vue b/src/components/table.vue index 9ff5ffc..cf38883 100644 --- a/src/components/table.vue +++ b/src/components/table.vue @@ -1,144 +1,163 @@ - - - - \ No newline at end of file +} + +// 暴露 el-table 的方法 +defineExpose({ + clearSelection: () => elTableRef.value?.clearSelection(), + toggleRowSelection: (row, selected) => elTableRef.value?.toggleRowSelection(row, selected), + setCurrentRow: row => elTableRef.value?.setCurrentRow(row), + // 可以根据需要暴露更多的方法 +}) + +onMounted(() => { + updateTableHeight() + window.addEventListener('resize', updateTableHeight) +}) + +onUnmounted(() => { + window.removeEventListener('resize', updateTableHeight) +}) + + + diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index fbeb393..fb718ce 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -24,7 +24,7 @@ - + @@ -47,7 +47,7 @@ import editPassWordCom from './components/editPassWordCom.vue' import { useMenu } from '@/layout/hook/hook.aside.js' import Aside from './components/Aside.vue' import MainContent from './components/MainContent.vue' -import RouteTab from './components/routeTab.vue' +// import RouteTab from './components/routeTab.vue' import { loginApi } from '@/utils/api' import { removeToken } from '@/utils/auth' import { useUserStore } from '@/stores/user' diff --git a/src/main.js b/src/main.js index c06a7f3..60587fb 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,7 @@ window.$api = $api import { createPinia } from 'pinia' // 重置css import '@/assets/styles/reset.scss' +import '@/assets/styles/pagecss.scss' // 使用svg图标组件 import 'virtual:svg-icons-register' // 防止Xss攻击的v-html diff --git a/src/router/routes.js b/src/router/routes.js index de97744..6eaf732 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -5,7 +5,18 @@ * @LastEditTime: 2023-07-07 16:09:00 * @Description :路由配置文件 routes静态路由 asyncRoutes异步路由 */ -import RouterView from './RouterView.vue' +import { + HomeFilled, + Briefcase, + User, + Calendar, + Document, + Setting, + PieChart, + List, + Tickets, + Monitor +} from '@element-plus/icons-vue' import Login from '@/views/Login/Login.vue' import layout from '@/layout/Layout.vue' import { shallowRef } from 'vue' @@ -33,16 +44,26 @@ export const asyncRoutes = [ path: '/project', name: 'project', authKey: 'Workorder', - redirect: '/project/detail', + redirect: '/project/list', meta: { title: '项目管理', imgSrc: 'slider/system' }, component: shallowRef(layout), children: [ + { + path: '/project/list', + name: 'projectList', + authKey: 'Workorder', + meta: { + title: '项目列表', + }, + component: () => import('@/views/project/list.vue'), + }, { path: '/project/detail', - name: 'userWork', + name: 'projectDetail', authKey: 'Workorder', meta: { title: '项目详情', + menuHide: true, // 添加这个属性来隐藏菜单项 }, component: () => import('@/views/project/detail.vue'), }, @@ -75,4 +96,59 @@ export const asyncRoutes = [ // }, ], }, + { + path: '/worklog', + name: 'worklog', + authKey: 'Workorder', + meta: { title: '工作日志', imgSrc: 'slider/worklog' }, // 您可能需要为工作日志添加一个图标 + component: shallowRef(layout), + children: [ + { + path: '/worklog/list', + name: 'worklogList', + authKey: 'Workorder', + meta: { + title: '日志列表', + }, + component: () => import('@/views/workLog/list.vue'), + }, + // 如果需要其他工作日志相关的子路由,可以在这里添加 + ], + }, + { + path: '/projectBank', + name: 'projectBank', + authKey: 'Workorder', + meta: { title: '项目看板', imgSrc: 'slider/worklog' }, // 您可能需要为工作日志添加一个图标 + component: shallowRef(layout), + children: [ + { + path: '/projectBank/projectProgress', + name: 'projectProgress', + authKey: 'Workorder', + meta: { + title: '项目执行表', + }, + component: () => import('@/views/projectBank/projectProgress.vue'), + }, + { + path: '/projectBank/userProject', + name: 'userProject', + authKey: 'Workorder', + meta: { + title: '人员项目表', + }, + component: () => import('@/views/projectBank/userProject.vue'), + }, + { + path: '/projectBank/projectUser', + name: 'projectUser', + authKey: 'Workorder', + meta: { + title: '项目人员表', + }, + component: () => import('@/views/projectBank/projectUser.vue'), + }, + ], + }, ] diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 70efaa8..44f16d2 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -246,7 +246,7 @@ const codeShadow = ref(false) position: relative; flex: 1; box-shadow: 0px 10px 20px 0px #2860b5; - background: #3e8bff; + background: #fff; border-bottom-left-radius: 40px; background: url('@/assets/imgs/编组 3.png') no-repeat; background-position: center center; diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue index f4dc89b..ee01c20 100644 --- a/src/views/project/detail.vue +++ b/src/views/project/detail.vue @@ -1,34 +1,32 @@ @@ -169,38 +333,118 @@ const updateTableHeight = () => { .project-management { padding: 20px; background-color: white; - min-height: 100vh; + height: 88vh; box-sizing: border-box; display: flex; flex-direction: column; + align-items: center; } -.table-actions { +.custom-form { + width: 80%; +} +.form-container { + width: 100%; + border: 1px solid #dcdfe6; + border-radius: 4px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); margin-bottom: 20px; } -.full-width { + +.custom-form :deep(.el-form-item) { + margin-bottom: 25px; /* 增加表单行间距 */ +} + +.custom-form :deep(.el-form-item__content) { + margin-left: auto !important; + width: 80%; +} +.custom-form :deep(.el-input) { + height: 42px; /* 调高输入框高度 */ +} +:deep(.el-form-item__label) { + height: 42px; /* 调高输入框高度 */ + line-height: 42px; +} +.custom-form :deep(.el-input__wrapper), +.custom-form :deep(.el-date-editor.el-input), +.custom-form :deep(.el-input-number) { + height: 42px; /* 调高输入框高度 */ +} +.custom-form :deep(.el-select) { width: 100%; } -:deep(.el-input-number) { - width: 100%; +.custom-form :deep(.el-input__wrapper), +.custom-form :deep(.el-select .el-input__wrapper), +.custom-form :deep(.el-date-editor.el-input .el-input__wrapper), +.custom-form :deep(.el-input-number .el-input__wrapper) { + height: 100%; } -:deep(.el-input-number .el-input__wrapper) { + +.content-container { width: 100%; + display: flex; + flex-direction: column; } + +.table-actions { + margin-bottom: 20px; + align-self: flex-start; +} + :deep(.el-table) { - flex: 1; - overflow: auto; + width: 100%; } + .operation-buttons { display: flex; justify-content: flex-start; align-items: center; } + :deep(.operation-buttons .el-button) { padding: 4px 8px; margin: 0 2px; } + :deep(.operation-column) { background-color: #fff; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); } + +/* 添加以下样式以使日期选择器宽度一致 */ +:deep(.el-date-editor.el-input) { + width: 100%; +} + +:deep(.el-date-editor.el-input .el-input__wrapper) { + width: 100%; +} +:deep(.longInput) { + width: 100% !important; +} +.el-button.is-text { + min-width: 32px !important; +} + +:deep(.el-select) { + width: 100%; +} + +:deep(.el-select .el-input__wrapper) { + height: 32px; +} + +.delete-confirm { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.warning-icon { + width: 64px; + height: 64px; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/src/views/project/list.vue b/src/views/project/list.vue new file mode 100644 index 0000000..daa1547 --- /dev/null +++ b/src/views/project/list.vue @@ -0,0 +1,281 @@ + + + + + diff --git a/src/views/projectBank/projectProgress.vue b/src/views/projectBank/projectProgress.vue new file mode 100644 index 0000000..6bb541f --- /dev/null +++ b/src/views/projectBank/projectProgress.vue @@ -0,0 +1,336 @@ + + + + + \ No newline at end of file diff --git a/src/views/projectBank/projectUser.vue b/src/views/projectBank/projectUser.vue new file mode 100644 index 0000000..9f96e9f --- /dev/null +++ b/src/views/projectBank/projectUser.vue @@ -0,0 +1,316 @@ + + + + + \ No newline at end of file diff --git a/src/views/projectBank/userProject.vue b/src/views/projectBank/userProject.vue new file mode 100644 index 0000000..765d812 --- /dev/null +++ b/src/views/projectBank/userProject.vue @@ -0,0 +1,380 @@ + + + + + diff --git a/src/views/workLog/list.vue b/src/views/workLog/list.vue new file mode 100644 index 0000000..5e15113 --- /dev/null +++ b/src/views/workLog/list.vue @@ -0,0 +1,576 @@ + + + + +