项目资料收集

src/components/dropdown/dropdown.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="hc-dropdown-box relative">
+        <el-dropdown trigger="click">
+            <span class="dropdown-label">{{ label }}</span>
+            <hc-icon name="arrow-down-s" />
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <template v-for="(item, index) in menuData" :key="index">
+                        <el-dropdown-item @click="itemClick(item)">{{ item[propsa.label] }}</el-dropdown-item>
+                    </template>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+
+const define_props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
+    props: {
+        type: Object,
+        default: () => ({
+            key: 'key',
+            label: 'label',
+        }),
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+
+defineOptions({
+    name: 'HcDropdown',
+})
+
+//双向绑定
+const label = ref('')
+const curKey = defineModel('modelValue', {
+    default: -1,
+})
+
+//监听数据
+const menuData = ref(define_props.datas)
+watch(() => define_props.datas, (data) => {
+    menuData.value = data
+}, { deep: true })
+
+//监听数据
+watch(() => define_props.props, (obj) => {
+    setPropsa(obj)
+}, { deep: true })
+
+//监听
+watch(curKey, (key) => {
+    if (key.value) {
+        console.log(key.value)
+        getItemLabel()
+    }
+})
+
+//渲染完成
+onMounted(() => {
+    setPropsa(define_props.props)
+    getItemLabel()
+})
+
+//设置参数配置
+const propsa = ref({})
+const setPropsa = (obj) => {
+    propsa.value = {
+        key: obj.key || 'key',
+        label: obj.label || 'label',
+    }
+}
+
+//获取名称
+const getItemLabel = () => {
+    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]
+        }
+    }
+}
+
+//被点击
+const itemClick = (item) => {
+    const { key, label } = propsa.value
+    label.value = item[label]
+    curKey.value = item[key]
+    emit('change', item)
+}
+</script>
+
+<style scoped lang="scss">
+.hc-dropdown-box {
+    .dropdown-label {
+
+    }
+}
+</style>

src/components/index.js

@@ -2,6 +2,9 @@ import { setupDirective } from './directive/index'
 import HcMenuIcon from './menu-icon/menu-icon.vue'
 import HcIconInput from './icon-input/icon-input.vue'
 import HcDateYear from './date-year/date-year.vue'
+import HcInfoTable from './info-table/info-table.vue'
+import HcInfoTableTd from './info-table/info-table-td.vue'
+import HcDropdown from './dropdown/dropdown.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -12,4 +15,7 @@ export const setupComponents = (App) => {
     App.component('HcMenuIcon', HcMenuIcon)
     App.component('HcIconInput', HcIconInput)
     App.component('HcDateYear', HcDateYear)
+    App.component('HcInfoTable', HcInfoTable)
+    App.component('HcInfoTableTd', HcInfoTableTd)
+    App.component('HcDropdown', HcDropdown)
 }

src/components/info-table/info-table-td.vue

@@ -0,0 +1,56 @@
+<template>
+    <td
+        class="hc-info-table-td p-2"
+        :class="[center ? 'text-center' : '', isTitle ? 'title-name' : '', ui]"
+        :style="width ? `width: ${width};` : ''"
+        hc-border="1 solid #ddd"
+        :colspan="colspan"
+        :rowspan="rowspan"
+    >
+        <slot />
+    </td>
+</template>
+
+<script setup>
+defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
+    center: {
+        type: Boolean,
+        default: false,
+    },
+    isTitle: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        type: [String, Number],
+        default: '180px',
+    },
+    colspan: {
+        type: [String, Number],
+        default: '1',
+    },
+    rowspan: {
+        type: [String, Number],
+        default: '1',
+    },
+})
+
+defineOptions({
+    name: 'HcInfoTableTd',
+})
+</script>
+
+<style scoped lang="scss">
+.hc-info-table-td {
+    position: relative;
+    color: #333333;
+    background-color: white;
+    &.title-name {
+        background: #f9f9f9;
+    }
+}
+</style>

src/components/info-table/info-table.vue

@@ -0,0 +1,20 @@
+<template>
+    <table class="hc-info-table relative w-full text-[13px]">
+        <tbody>
+            <slot />
+        </tbody>
+    </table>
+</template>
+
+<script setup>
+defineOptions({
+    name: 'HcInfoTable',
+})
+</script>
+
+<style scoped lang="scss">
+.hc-info-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+</style>

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

@@ -20,7 +20,50 @@
                 <template #header>
                     <div class="flex-1 text-center text-[24px] font-bold">项目详情</div>
                 </template>
-                11111
+                <hc-info-table>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>项目阶段</hc-info-table-td>
+                        <hc-info-table-td center>开工项目</hc-info-table-td>
+                        <hc-info-table-td is-title width="30px" center>项目类型</hc-info-table-td>
+                        <hc-info-table-td center>高速公路</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>项目名称</hc-info-table-td>
+                        <hc-info-table-td center>成渝高速</hc-info-table-td>
+                        <hc-info-table-td is-title width="30px" center>建设规模</hc-info-table-td>
+                        <hc-info-table-td center>你猜</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>开 工 年</hc-info-table-td>
+                        <hc-info-table-td center>2023</hc-info-table-td>
+                        <hc-info-table-td is-title width="30px" center>完 工 年</hc-info-table-td>
+                        <hc-info-table-td center>2024</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>牵头单位</hc-info-table-td>
+                        <hc-info-table-td center>重庆建设集团</hc-info-table-td>
+                        <hc-info-table-td is-title width="30px" center rowspan="2">配合单位</hc-info-table-td>
+                        <hc-info-table-td center rowspan="2">你猜</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="30px" center>责任单位</hc-info-table-td>
+                        <hc-info-table-td center>你猜啊</hc-info-table-td>
+                    </tr>
+                </hc-info-table>
+                <div class="hc-project-list-drawer-year">
+                    <el-scrollbar>
+                        <div class="relative p-3">
+                            <hc-card contents>
+                                <template #header>
+                                    <div class="flex-1 text-center text-[14px]">
+                                        <HcDropdown />
+                                    </div>
+                                </template>
+                                1111
+                            </hc-card>
+                        </div>
+                    </el-scrollbar>
+                </div>
             </hc-card>
         </hc-drawer>
     </div>
@@ -315,4 +358,10 @@ defineExpose({
         background-color: var(--el-table-current-row-bg-color) !important;
     }
 }
+.hc-project-list-drawer-year {
+    position: relative;
+    border: 1px solid #dddddd;
+    border-top: 0;
+    height: calc(100% - 170px);
+}
 </style>