更新依赖

package.json

@@ -18,7 +18,7 @@
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.10",
         "echarts": "^5.5.0",
-        "element-plus": "2.6.3",
+        "element-plus": "2.7.0",
         "hc-vue3-ui": "^3.8.5",
         "js-base64": "^3.7.7",
         "js-fast-way": "0.4.9",
@@ -38,7 +38,7 @@
         "archiver": "^7.0.1",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.24.0",
-        "sass": "^1.74.1",
+        "sass": "^1.75.0",
         "unocss": "^0.58.9",
         "unocss-preset-extra": "^0.5.3",
         "vite": "^4.5.0"

public/plugins/element-plus/theme-chalk/src/common/var.scss

@@ -832,6 +832,25 @@ $anchor: map.merge(
   $anchor
 );
 
+// Segmented
+// css3 var in packages/theme-chalk/src/segmented.scss
+$segmented: () !default;
+$segmented: map.merge(
+  (
+    'color': getCssVar('text-color', 'regular'),
+    'bg-color': getCssVar('fill-color', 'light'),
+    'padding': 2px,
+    'item-selected-color': getCssVar('color-white'),
+    'item-selected-bg-color': getCssVar('color-primary'),
+    'item-selected-disabled-bg-color': getCssVar('color-primary', 'light-5'),
+    'item-hover-color': getCssVar('text-color', 'primary'),
+    'item-hover-bg-color': getCssVar('fill-color', 'dark'),
+    'item-active-bg-color': getCssVar('fill-color', 'darker'),
+    'item-disabled-color': getCssVar('text-color', 'placeholder'),
+  ),
+  $segmented
+);
+
 // Table
 // css3 var in packages/theme-chalk/src/table.scss
 $table: () !default;

public/plugins/element-plus/theme-chalk/src/index.scss

@@ -44,8 +44,8 @@
 @use './image-viewer.scss';
 @use './image.scss';
 @use './infinite-scroll.scss';
-@use './input-number.scss';
 @use './input.scss';
+@use './input-number.scss';
 @use './link.scss';
 @use './loading.scss';
 @use './main.scss';
@@ -106,3 +106,4 @@
 @use './tour.scss';
 @use './anchor.scss';
 @use './anchor-link.scss';
+@use './segmented.scss';

public/plugins/element-plus/theme-chalk/src/input-number.scss

@@ -102,9 +102,11 @@
         font-size: map.get($input-font-size, $size);
       }
 
-      .#{$namespace}-input__wrapper {
-        padding-left: #{map.get($input-height, $size) + 7};
-        padding-right: #{map.get($input-height, $size) + 7};
+      .#{$namespace}-input--#{$size} {
+        .#{$namespace}-input__wrapper {
+          padding-left: #{map.get($input-height, $size) + 7};
+          padding-right: #{map.get($input-height, $size) + 7};
+        }
       }
     }
   }

public/plugins/element-plus/theme-chalk/src/segmented.scss

@@ -0,0 +1,160 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$segmented-border-radius: () !default;
+$segmented-border-radius: map.merge(
+  (
+    'large': map.get($button-border-radius, 'large'),
+    'default': map.get($button-border-radius, 'default'),
+    'small': map.get($button-border-radius, 'small'),
+  ),
+  $segmented-border-radius
+);
+
+$segmented-font-size: () !default;
+$segmented-font-size: map.merge(
+  (
+    'large': 16px,
+    'default': 14px,
+    'small': 14px,
+  ),
+  $segmented-font-size
+);
+
+$segmented-item-padding: () !default;
+$segmented-item-padding: map.merge(
+  (
+    'large': 0 11px,
+    'default':0 11px,
+    'small': 0 7px,
+  ),
+  $segmented-item-padding
+);
+
+@include b(segmented) {
+  @include set-component-css-var('segmented', $segmented);
+}
+
+@include b(segmented) {
+  display: inline-flex;
+  align-items: stretch;
+  min-height: map.get($input-height, 'default');
+  background: getCssVar('segmented-bg-color');
+  padding: getCssVar('segmented-padding');
+  border-radius: map.get($segmented-border-radius, 'default');
+  font-size: map.get($segmented-font-size, 'default');
+  color: getCssVar('segmented-color');
+  box-sizing: border-box;
+
+  @include e(group) {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    width: 100%;
+  }
+
+  @include e(item-selected) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: getCssVar('segmented-item-selected-bg-color');
+    height: 100%;
+    width: 10px;
+    border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px);
+    transition: all 0.3s;
+    pointer-events: none;
+
+    @include when(disabled) {
+      background: getCssVar('segmented-item-selected-disabled-bg-color');
+    }
+
+    @include when(focus-visible) {
+      &:before {
+        position: absolute;
+        content: '';
+        inset: 0;
+        border-radius: inherit;
+        outline: 2px solid getCssVar('segmented-item-selected-bg-color');
+        outline-offset: 1px;
+      }
+    }
+  }
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    cursor: pointer;
+    border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px);
+    padding: map.get($segmented-item-padding, 'default');
+
+    &:not(.is-disabled):not(.is-selected):hover {
+      color: getCssVar('segmented-item-hover-color');
+      background: getCssVar('segmented-item-hover-bg-color');
+    }
+
+    &:not(.is-disabled):not(.is-selected):active {
+      background: getCssVar('segmented-item-active-bg-color');
+    }
+
+    @include when(selected) {
+      color: getCssVar('segmented-item-selected-color');
+
+      &.is-disabled {
+        color: getCssVar('segmented-item-selected-color');
+      }
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+      color: getCssVar('segmented-item-disabled-color');
+    }
+  }
+
+  @include e(item-input) {
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @include e(item-label) {
+    flex: 1;
+    text-align: center;
+    line-height: normal;
+    @include utils-ellipsis;
+    transition: color 0.3s;
+    z-index: 1;
+  }
+
+  @include when(block) {
+    display: flex;
+
+    .#{$namespace}-segmented__item {
+      min-width: 0;
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      min-height: map.get($input-height, $size);
+      border-radius: map.get($segmented-border-radius, $size);
+      font-size: map.get($segmented-font-size, $size);
+
+      @include e(item-selected) {
+        border-radius: calc(#{map.get($segmented-border-radius, $size)} - 2px);
+      }
+
+      @include e(item) {
+        border-radius: calc(#{map.get($segmented-border-radius, $size)} - 2px);
+        padding: map.get($segmented-item-padding, $size);
+      }
+    }
+  }
+}

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240415104214"
+  "value": "20240415111250"
 }

src/views/project/modules/project-list.vue

@@ -21,7 +21,7 @@
                 <template #header>
                     <div class="flex-1 text-center text-[24px] font-bold">项目详情</div>
                 </template>
-                <hc-info-table>
+                <HcInfoTable>
                     <tr>
                         <hc-info-table-td is-title width="30px" center>项目阶段</hc-info-table-td>
                         <hc-info-table-td center>{{ rowDetail?.projectStageName }}</hc-info-table-td>
@@ -62,7 +62,7 @@
                         <hc-info-table-td is-title width="30px" center>责任单位</hc-info-table-td>
                         <hc-info-table-td center>{{ rowDetail?.dutyUnit }}</hc-info-table-td>
                     </tr>
-                </hc-info-table>
+                </HcInfoTable>
                 <div class="hc-project-list-drawer-year">
                     <el-scrollbar>
                         <div class="relative p-2 pt-3">
@@ -92,7 +92,7 @@
                                     <el-table-column prop="workProgress" label="工作计划进展计划" align="center" />
                                     <el-table-column prop="planRatio" label="形象进度百分比(%)" width="100" align="center" />
                                 </el-table>
-                                <hc-info-table v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
+                                <HcInfoTable v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
                                     <tr>
                                         <hc-info-table-td is-title width="130px" center>该年累计完成投资(亿元)</hc-info-table-td>
                                         <hc-info-table-td center>{{ yearData.list[yearIndex].yearFinishInvest || "-" }}</hc-info-table-td>
@@ -101,8 +101,8 @@
                                         <hc-info-table-td is-title width="130px" center>该年累计未完成投资(亿元)</hc-info-table-td>
                                         <hc-info-table-td center>{{ yearData.list[yearIndex]?.yearUnfinishedInvest || "-" }}</hc-info-table-td>
                                     </tr>
-                                </hc-info-table>
-                                <hc-info-table v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
+                                </HcInfoTable>
+                                <HcInfoTable v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
                                     <tr>
                                         <hc-info-table-td is-title width="30px" center>存在问题</hc-info-table-td>
                                         <hc-info-table-td center>{{ yearData.list[yearIndex]?.questionable || '-' }}</hc-info-table-td>
@@ -115,7 +115,7 @@
                                         <hc-info-table-td is-title width="30px" center>联系人</hc-info-table-td>
                                         <hc-info-table-td center>{{ yearData.list[yearIndex]?.linkman || '-' }}</hc-info-table-td>
                                     </tr>
-                                </hc-info-table>
+                                </HcInfoTable>
                             </hc-card-item>
                         </div>
                     </el-scrollbar>
@@ -129,14 +129,14 @@
                 <template #header>
                     <div class="flex-1 text-center text-[24px] font-bold">项目完成情况</div>
                 </template>
-                <hc-info-table>
+                <HcInfoTable>
                     <tr>
                         <hc-info-table-td is-title width="30px" center>项目名称</hc-info-table-td>
                         <hc-info-table-td center>{{ rowDetail?.name }}</hc-info-table-td>
                         <hc-info-table-td is-title width="30px" center>项目类型</hc-info-table-td>
                         <hc-info-table-td center>{{ rowDetail?.projectTypeName }}</hc-info-table-td>
                     </tr>
-                </hc-info-table>
+                </HcInfoTable>
                 <div class="hc-project-list-drawer-year detail">
                     <el-scrollbar>
                         <div class="relative p-2 pt-3">
@@ -208,7 +208,7 @@
                                         </template>
                                     </el-table-column>
                                 </el-table>
-                                <hc-info-table v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
+                                <HcInfoTable v-if="yearData.list && yearData.list.length > 0" class="mt-[-1px]">
                                     <tr>
                                         <hc-info-table-td is-title width="30px" center>存在问题</hc-info-table-td>
                                         <hc-info-table-td center>
@@ -229,7 +229,7 @@
                                             <el-input v-model="yearData.list[yearIndex].linkman" :disabled="yearData.list[yearIndex].isCanFill === 1 ? false : true" />
                                         </hc-info-table-td>
                                     </tr>
-                                </hc-info-table>
+                                </HcInfoTable>
                             </hc-card-item>
                         </div>
                     </el-scrollbar>
@@ -246,8 +246,9 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue'
 import mainApi from '~api/project/project'
-import { deepClone, getArrValue, getObjValue, isNullES, newDownBlob } from 'js-fast-way'
+import { getArrValue, getObjValue } from 'js-fast-way'
 import BigNumber from 'bignumber.js'
+
 const props = defineProps({
     isAdmin: {
         type: Boolean,

yarn.lock

@@ -1578,10 +1578,10 @@ electron-to-chromium@^1.4.668:
   resolved "http://39.108.216.210:9000/electron-to-chromium/-/electron-to-chromium-1.4.685.tgz#3ce988e4dfbb3aa984840394b1d7064c01ad74c1"
   integrity sha512-yDYeobbTEe4TNooEzOQO6xFqg9XnAkVy2Lod1C1B2it8u47JNLYvl9nLDWBamqUakWB8Jc1hhS1uHUNYTNQdfw==
 
-element-plus@2.6.3:
-  version "2.6.3"
-  resolved "http://39.108.216.210:9000/element-plus/-/element-plus-2.6.3.tgz#15e82e7dc0646c5d1e01b508d0e577d764829b1c"
-  integrity sha512-U4L/mr+1r+EmAUYUHrs0V/8hHMdBGP07rPymSC72LZCN4jK1UwygQYICegTQ5us4mxeqBvW6wfoEfo003fwCqw==
+element-plus@2.7.0:
+  version "2.7.0"
+  resolved "http://39.108.216.210:9000/element-plus/-/element-plus-2.7.0.tgz#1d72b06946c46a6f18e5315610b7f0147b8efb24"
+  integrity sha512-WAiaFLavuWFxof9qwkC27jvkh9nRcNnB506g1vvJSiVaVqjCBWUFCIyJKeN11M1qcv2cS5VV5PfSLjTIkrw87A==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.3.1"
@@ -2690,10 +2690,10 @@ safe-buffer@~5.2.0:
   resolved "http://39.108.216.210:9000/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-sass@^1.74.1:
-  version "1.74.1"
-  resolved "http://39.108.216.210:9000/sass/-/sass-1.74.1.tgz#686fc227d3707dd25cb2925e1db8e4562be29319"
-  integrity sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==
+sass@^1.75.0:
+  version "1.75.0"
+  resolved "http://39.108.216.210:9000/sass/-/sass-1.75.0.tgz#91bbe87fb02dfcc34e052ddd6ab80f60d392be6c"
+  integrity sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"