feat：项目管理静态ui完成80%

2025-06-24 01:24:43 +08:00
parent ac0d6dd5cc
commit d1c2d332ab
8 changed files with 127 additions and 4 deletions
@@ -1,3 +1,97 @@
 <template>
-    <div>project</div>
+    <div class="business_project_wrap">
+        <Breadcrumb :items="['menu.business', 'menu.business.project']" />
+        <a-card class="general-card">
+            <template #title>
+                <div class="card-title_between">
+                    <p class="title">{{ $t('menu.business.project') }}</p>
+                    <div class="flex_center_between">
+                        <a-space>
+                            <a-input-search :style="{ width: '320px' }" :placeholder="$t('search.placeholder')" />
+                            <a-button>
+                                <template #icon>
+                                    <icon-filter />
+                                </template>
+                                {{ $t('table.filter') }}
+                            </a-button>
+                            <a-button>
+                                <template #icon>
+                                    <icon-download />
+                                </template>
+                                {{ $t('table.export') }}
+                            </a-button>
+                            <a-button type="primary">
+                                <template #icon>
+                                    <icon-plus />
+                                </template>
+                                {{ $t('add-project') }}
+                            </a-button>
+                        </a-space>
+                    </div>
+                </div>
+            </template>
+            <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="projectColumn"
+                :data="renderData" :bordered="false" @page-change="onPageChange">
+                <template #type="{ record }">
+                    <a-tag checkable :color="getTypeColor(record.type)">{{ getTypeText(record.type) }}</a-tag>
+                </template>
+                <template #rate="{ record }">
+                    <a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
+                </template>
+                <template #operate>
+                    <a-space>
+                        <a-button>查看</a-button>
+                        <a-button type="primary">编辑</a-button>
+                        <a-button>更多</a-button>
+                    </a-space>
+                </template>
+            </a-table>
+        </a-card>
+    </div>
 </template>
+<script lang="ts" setup>
+import { computed, ref, reactive, watch, nextTick } from 'vue';
+import useLoading from '@/hooks/loading';
+import { Pagination } from '@/types/global';
+
+const { loading, setLoading } = useLoading(false);
+const renderData = ref<any[]>([
+    { name: '星河商务中心', type: '1', size: '1200m²', kezu: '1000m²', rate: 0.2, count: '90', create_time: '2025-06-24 00:51' },
+    { name: '南山科学科学院', type: '2', size: '120m²', kezu: '100m²', rate: 0.6, count: '10', create_time: '2025-06-24 00:58' },
+    { name: '前海科学科学院', type: '3', size: '1520m²', kezu: '1500m²', rate: 0.91, count: '120', create_time: '2025-06-24 01:16' },
+]);
+const basePagination: Pagination = {
+    current: 1,
+    pageSize: 20,
+    total:3,
+};
+const projectColumn = [
+    { title: '项目信息', dataIndex: 'name' },
+    { title: '项目类型', dataIndex: 'type', slotName: 'type' },
+    { title: '管理面积', dataIndex: 'size' },
+    { title: '可租面积', dataIndex: 'kezu' },
+    { title: '出租率', dataIndex: 'rate', slotName: 'rate' },
+    { title: '房源数量', dataIndex: 'count' },
+    { title: '创建时间', dataIndex: 'create_time' },
+    { title: '操作', dataIndex: 'operate', slotName: 'operate' },
+];
+const pagination = reactive({
+    ...basePagination,
+});
+
+const getTypeColor = (type: number | string) => {
+    const projectMap: any = {
+        1: 'orangered', 2: 'green', 3: 'gold'
+    }
+    return projectMap[type]
+}
+const getTypeText = (type: number | string) => {
+    const projectMap: any = {
+        1: '商业综合体', 2: '写字楼', 3: '园区'
+    }
+    return projectMap[type]
+}
+const onPageChange = (current: number) => {
+    console.log(current, 'current');
+};
+</script>