leaser_front/src/views/business/project/index.vue

<template>
    <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>