feat(我的绩效): 开发我的绩效功能。

fix(加班申请、工作报告): 重构加班申请在审批时的样式，工作报告在新增时的对话框、报告详情页的样式。
2026-06-21 18:22:44 +08:00
parent cd64cf42cc
commit 9a5845708d
35 changed files with 4211 additions and 924 deletions
--- a/src/views/personal-center/work-report/monthly/index.vue
+++ b/src/views/personal-center/work-report/monthly/index.vue
@@ -123,12 +123,8 @@ const table = useUIPaginatedTable<
  ]
 });

-const summaryPeriod = computed(() =>
-  resolveWorkReportSummaryPeriod('monthly', {
-    currentRow: table.data.value[0],
-    periodRange: searchParams.periodStartDate
-  })
-);
+// 团队统计始终使用当前周期（本月），不跟随列表第一条数据的周期
+const summaryPeriod = computed(() => resolveWorkReportSummaryPeriod('monthly'));

 function getRowActions(row: Api.WorkReport.Monthly.MonthlyReport): BusinessTableAction[] {
  const actions: BusinessTableAction[] = [
--- a/src/views/personal-center/work-report/monthly/modules/approval-page.vue
+++ b/src/views/personal-center/work-report/monthly/modules/approval-page.vue
@@ -801,7 +801,7 @@ watch(

    <div class="form-actions approval-form-actions">
      <ElButton @click="emit('back')">退出审批</ElButton>
-      <ElButton type="primary" class="btn-submit" @click="openAuditDialog">开始审批</ElButton>
+      <ElButton type="primary" @click="openAuditDialog">开始审批</ElButton>
    </div>

    <BusinessFormDialog
@@ -915,8 +915,8 @@ watch(
  place-items: center;
  flex-shrink: 0;
  border-radius: 16px;
-  background: #ccfbf1;
-  color: #0f766e;
+  background: var(--el-color-primary-light-8);
+  color: var(--el-color-primary);
  font-weight: 900;
 }

@@ -1009,12 +1009,12 @@ watch(
 }

 .radio-group-full :deep(.el-radio.is-checked) {
-  border-color: #0f766e;
-  background: #f0fdfa;
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
 }

 .radio-group-full :deep(.el-radio__input.is-checked + .el-radio__label) {
-  color: #0f766e;
+  color: var(--el-color-primary);
 }

 .review-grid,
@@ -1123,7 +1123,7 @@ watch(
  display: grid;
  place-items: center;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
@@ -1292,7 +1292,7 @@ watch(
  position: relative;
  min-width: 0;
  padding-left: 14px;
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 800;
  white-space: normal;
@@ -1308,10 +1308,10 @@ watch(
  width: 4px;
  height: 16px;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
 }

-.rich-editor :deep(.rich-section-tasks) {
+.rich-editor :deep(.rich-section-task) {
  display: grid;
  gap: 6px;
  padding-left: 14px;
@@ -1324,7 +1324,7 @@ watch(
 }

 .rich-editor :deep(.rich-category-line) {
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
@@ -1454,7 +1454,7 @@ watch(
 .structured-section-title {
  position: relative;
  padding-left: 14px;
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 800;
 }
@@ -1467,7 +1467,7 @@ watch(
  width: 4px;
  height: 16px;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
 }

 .structured-section-tasks {
@@ -1551,14 +1551,14 @@ watch(
 }

 .conclusion-btn:hover {
-  border-color: #0f766e;
-  color: #0f766e;
+  border-color: var(--el-color-primary);
+  color: var(--el-color-primary);
 }

 .conclusion-btn.active.pass {
-  border-color: #0f766e;
-  background: #f0fdfa;
-  color: #0f766e;
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
 }

 .conclusion-btn.active.reject {
@@ -1689,9 +1689,9 @@ watch(
 }

 .feedback-tag.success {
-  background: #ecfdf5;
-  color: #059669;
-  border: 1px solid #d1fae5;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  border: 1px solid var(--el-color-primary-light-7);
 }

 .feedback-tag.warning {
@@ -1838,16 +1838,6 @@ watch(
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
 }

-.btn-submit {
-  background: #0f766e !important;
-  border-color: #0f766e !important;
-}
-
-.btn-submit:hover {
-  background: #0d9488 !important;
-  border-color: #0d9488 !important;
-}
-
@media (max-width: 1180px) {
  .form-head,
  .compose-grid,
--- a/src/views/personal-center/work-report/monthly/modules/fill-page.vue
+++ b/src/views/personal-center/work-report/monthly/modules/fill-page.vue
@@ -1077,7 +1077,6 @@ function syncRichSupport(item: PlanItem, event: Event) {
            <ElButton
              size="small"
              type="primary"
-              class="btn-submit"
              :disabled="
                !planForm.workItem.trim() ||
                !planForm.sections.some(section => section.category.trim() && section.tasks.length)
@@ -1094,7 +1093,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
    <div v-if="!isReadonly" class="form-actions">
      <!--      <ElButton>重置表单</ElButton>-->
      <ElButton @click="emit('save')">保存草稿</ElButton>
-      <ElButton type="primary" class="btn-submit" @click="emit('submit')">提交审批</ElButton>
+      <ElButton type="primary" @click="emit('submit')">提交审批</ElButton>
    </div>

    <BusinessFormDialog
@@ -1327,8 +1326,8 @@ function syncRichSupport(item: PlanItem, event: Event) {
  place-items: center;
  flex-shrink: 0;
  border-radius: 16px;
-  background: #ccfbf1;
-  color: #0f766e;
+  background: var(--el-color-primary-light-8);
+  color: var(--el-color-primary);
  font-weight: 900;
 }

@@ -1421,12 +1420,12 @@ function syncRichSupport(item: PlanItem, event: Event) {
 }

 .radio-group-full :deep(.el-radio.is-checked) {
-  border-color: #0f766e;
-  background: #f0fdfa;
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
 }

 .radio-group-full :deep(.el-radio__input.is-checked + .el-radio__label) {
-  color: #0f766e;
+  color: var(--el-color-primary);
 }

 .review-grid,
@@ -1546,7 +1545,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
  display: grid;
  place-items: center;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
@@ -1744,8 +1743,8 @@ function syncRichSupport(item: PlanItem, event: Event) {
 }

 .rich-editor:focus {
-  border-color: #0f766e;
-  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
+  border-color: var(--el-color-primary);
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
 }

 .rich-editor:empty::before {
@@ -1769,7 +1768,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
  position: relative;
  min-width: 0;
  padding-left: 14px;
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 800;
  white-space: normal;
@@ -1785,10 +1784,10 @@ function syncRichSupport(item: PlanItem, event: Event) {
  width: 4px;
  height: 16px;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
 }

-.rich-editor :deep(.rich-section-tasks) {
+.rich-editor :deep(.rich-section-task) {
  display: grid;
  gap: 6px;
  padding-left: 14px;
@@ -1828,7 +1827,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
 }

 .rich-editor :deep(.rich-category-line) {
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
@@ -1899,7 +1898,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
 .structured-section-title {
  position: relative;
  padding-left: 14px;
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 800;
 }
@@ -1912,7 +1911,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
  width: 4px;
  height: 16px;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
 }

 .structured-task {
@@ -1928,7 +1927,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
 .structured-task-category {
  position: relative;
  padding-left: 14px;
-  color: #0f766e;
+  color: var(--el-color-primary);
  font-size: 13px;
  font-weight: 800;
 }
@@ -1941,7 +1940,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
  width: 4px;
  height: 16px;
  border-radius: 999px;
-  background: #0f766e;
+  background: var(--el-color-primary);
 }

 .structured-task-title {
@@ -1988,9 +1987,9 @@ function syncRichSupport(item: PlanItem, event: Event) {
 }

 .plan-section.active {
-  border-color: #cfe3e0;
-  background: #f7fbfa;
-  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.06);
+  border-color: var(--el-color-primary-light-7);
+  background: var(--el-color-primary-light-9);
+  box-shadow: inset 0 0 0 1px var(--el-color-primary-light-9);
 }

 .plan-section-head {
@@ -2124,7 +2123,7 @@ function syncRichSupport(item: PlanItem, event: Event) {
 }

 .inline-plan-card {
-  border-color: rgba(15, 118, 110, 0.42);
+  border-color: var(--el-color-primary-light-5);
  background: #f8fbfc;
 }

@@ -2171,14 +2170,14 @@ function syncRichSupport(item: PlanItem, event: Event) {
 .inline-plan-card :deep(.el-input__wrapper.is-focus),
 .inline-plan-card :deep(.el-select__wrapper.is-focused) {
  box-shadow:
-    0 0 0 1px #0f766e inset,
-    0 0 0 2px rgba(15, 118, 110, 0.1);
+    0 0 0 1px var(--el-color-primary) inset,
+    0 0 0 2px var(--el-color-primary-light-8);
 }

 .inline-plan-card :deep(.el-textarea__inner:focus) {
  box-shadow:
-    0 0 0 1px #0f766e inset,
-    0 0 0 2px rgba(15, 118, 110, 0.1);
+    0 0 0 1px var(--el-color-primary) inset,
+    0 0 0 2px var(--el-color-primary-light-8);
 }

 .inline-plan-card .inline-task-row :deep(.el-select__selected-item),
@@ -2216,8 +2215,8 @@ function syncRichSupport(item: PlanItem, event: Event) {
 .inline-plan-card .inline-task-row :deep(.el-input-number:focus-within .el-input__wrapper) {
  overflow: hidden;
  box-shadow:
-    0 0 0 1px #0f766e inset,
-    0 0 0 2px rgba(15, 118, 110, 0.1) !important;
+    0 0 0 1px var(--el-color-primary) inset,
+    0 0 0 2px var(--el-color-primary-light-8) !important;
 }

 .form-actions {
@@ -2237,16 +2236,6 @@ function syncRichSupport(item: PlanItem, event: Event) {
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
 }

-.btn-submit {
-  background: #0f766e !important;
-  border-color: #0f766e !important;
-}
-
-.btn-submit:hover {
-  background: #0d9488 !important;
-  border-color: #0d9488 !important;
-}
-
@media (max-width: 1180px) {
  .form-head,
  .compose-grid,