项目资料收集

src/components/dropdown/dropdown.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="hc-dropdown-box relative">
         <el-dropdown trigger="click">
-            <span class="dropdown-label">{{ label }}</span>
-            <hc-icon name="arrow-down-s" />
+            <div class="hc-dropdown-body">
+                <span class="hc-dropdown-label">{{ labels || '请选择' }}</span>
+                <hc-icon name="arrow-down-s" class="ml-1" />
+            </div>
             <template #dropdown>
                 <el-dropdown-menu>
                     <template v-for="(item, index) in menuData" :key="index">
@@ -39,7 +41,7 @@ defineOptions({
 })
 
 //双向绑定
-const label = ref('')
+const labels = ref('')
 const curKey = defineModel('modelValue', {
     default: -1,
 })
@@ -57,8 +59,8 @@ watch(() => define_props.props, (obj) => {
 
 //监听
 watch(curKey, (key) => {
-    if (key.value) {
-        console.log(key.value)
+    if (key) {
+        console.log(key)
         getItemLabel()
     }
 })
@@ -80,11 +82,12 @@ const setPropsa = (obj) => {
 
 //获取名称
 const getItemLabel = () => {
+    if (!curKey.value) return
     const { key, label } = propsa.value
     const data = menuData.value
     for (let i = 0; i < data.length; i++) {
         if (data[i][key] === curKey.value) {
-            label.value = data[i][label]
+            labels.value = data[i][label]
         }
     }
 }
@@ -92,16 +95,14 @@ const getItemLabel = () => {
 //被点击
 const itemClick = (item) => {
     const { key, label } = propsa.value
-    label.value = item[label]
+    labels.value = item[label]
     curKey.value = item[key]
     emit('change', item)
 }
 </script>
 
 <style scoped lang="scss">
-.hc-dropdown-box {
-    .dropdown-label {
-
-    }
+.hc-dropdown-body {
+    cursor: pointer;
 }
 </style>

src/views/project/admin/create.vue

@@ -179,8 +179,9 @@ const yearFormRules = {}
 .hc-card-item-box.year-detail {
     padding: 20px;
     background: #f7f7f7;
+    border-radius: 5px;
     .hc-card-item-header {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid #ecebeb;
         padding-bottom: 16px;
         .item-header {
             justify-content: center;

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

@@ -52,15 +52,15 @@
                 </hc-info-table>
                 <div class="hc-project-list-drawer-year">
                     <el-scrollbar>
-                        <div class="relative p-3">
-                            <hc-card contents>
+                        <div class="relative p-2">
+                            <hc-card-item class="year-detail">
                                 <template #header>
                                     <div class="flex-1 text-center text-[14px]">
-                                        <HcDropdown />
+                                        <HcDropdown v-model="yearKey" :datas="yearData" />
                                     </div>
                                 </template>
-                                1111
-                            </hc-card>
+                                22222
+                            </hc-card-item>
                         </div>
                     </el-scrollbar>
                 </div>
@@ -332,6 +332,13 @@ const batchExport = () => {
     console.log('批量导出', rows)
 }
 
+//年数据
+const yearKey = ref('2023')
+const yearData = ref([
+    { key: '2023', label: '2023年' },
+    { key: '2024', label: '2024年' },
+])
+
 defineExpose({
     batchRemove,
     batchExport,
@@ -363,5 +370,17 @@ defineExpose({
     border: 1px solid #dddddd;
     border-top: 0;
     height: calc(100% - 170px);
+    .year-detail {
+        padding: 14px;
+        background: #f7f7f7;
+        border-radius: 5px;
+        .hc-card-item-header {
+            border-bottom: 1px solid #ecebeb;
+            padding-bottom: 10px;
+            .item-header {
+                justify-content: center;
+            }
+        }
+    }
 }
 </style>