feat: 升级stylelint依赖并修复相关问题
- 更新stylelint到16.x版本 - 修复postcss版本冲突 - 解决循环依赖问题 - 优化代码类型定义
This commit is contained in:
@@ -1,71 +1,119 @@
|
||||
<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>
|
||||
<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>
|
||||
<template #rate="{ record }">
|
||||
<a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
|
||||
{{ $t('table.filter') }}
|
||||
</a-button>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
<template #operate>
|
||||
<a-space>
|
||||
<a-button>查看</a-button>
|
||||
<a-button type="primary">编辑</a-button>
|
||||
<a-button>更多</a-button>
|
||||
</a-space>
|
||||
{{ $t('table.export') }}
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
{{ $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 = {
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, reactive, watch, nextTick } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Pagination } from '@/types/global';
|
||||
import {
|
||||
ProjectRecord,
|
||||
ProjectType,
|
||||
PROJECT_TYPE,
|
||||
PROJECT_TYPE_COLORS,
|
||||
PROJECT_TYPE_LABELS,
|
||||
} from '@/types/business';
|
||||
|
||||
const { loading, setLoading } = useLoading(false);
|
||||
const renderData = ref<ProjectRecord[]>([
|
||||
{
|
||||
name: '星河商务中心',
|
||||
type: PROJECT_TYPE.COMMERCIAL_COMPLEX,
|
||||
size: '1200m²',
|
||||
kezu: '1000m²',
|
||||
rate: 0.2,
|
||||
count: '90',
|
||||
create_time: '2025-06-24 00:51',
|
||||
},
|
||||
{
|
||||
name: '南山科学科学院',
|
||||
type: PROJECT_TYPE.OFFICE_BUILDING,
|
||||
size: '120m²',
|
||||
kezu: '100m²',
|
||||
rate: 0.6,
|
||||
count: '10',
|
||||
create_time: '2025-06-24 00:58',
|
||||
},
|
||||
{
|
||||
name: '前海科学科学院',
|
||||
type: PROJECT_TYPE.INDUSTRIAL_PARK,
|
||||
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 = [
|
||||
total: 3,
|
||||
};
|
||||
const projectColumn = [
|
||||
{ title: '项目信息', dataIndex: 'name' },
|
||||
{ title: '项目类型', dataIndex: 'type', slotName: 'type' },
|
||||
{ title: '管理面积', dataIndex: 'size' },
|
||||
@@ -74,24 +122,20 @@ const projectColumn = [
|
||||
{ title: '房源数量', dataIndex: 'count' },
|
||||
{ title: '创建时间', dataIndex: 'create_time' },
|
||||
{ title: '操作', dataIndex: 'operate', slotName: 'operate' },
|
||||
];
|
||||
const pagination = reactive({
|
||||
];
|
||||
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>
|
||||
const getTypeColor = (type: ProjectType): string => {
|
||||
return PROJECT_TYPE_COLORS[type] || 'default';
|
||||
};
|
||||
|
||||
const getTypeText = (type: ProjectType): string => {
|
||||
return PROJECT_TYPE_LABELS[type] || '未知';
|
||||
};
|
||||
const onPageChange = (current: number) => {
|
||||
pagination.current = current;
|
||||
// TODO: 这里应该调用API获取对应页码的数据
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user