mirror of
http://183.237.82.114:10086/kilo/leaser_front.git
synced 2026-10-23 18:35:08 +00:00
304 lines
9.7 KiB
Vue
304 lines
9.7 KiB
Vue
<template>
|
|
<div class="business_project_wrap">
|
|
<Breadcrumb :items="['menu.business', 'menu.business.project']" />
|
|
<a-card class="general-card full_height">
|
|
<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
|
|
v-model="queryParams.keyword"
|
|
:style="{ width: '320px' }"
|
|
:placeholder="t('please.enter', { placeholder: t('content') })"
|
|
@search="handleSearch"
|
|
/>
|
|
<a-button @click="handleFilter">
|
|
<template #icon>
|
|
<icon-filter />
|
|
</template>
|
|
{{ t('table.filter') }}
|
|
</a-button>
|
|
<a-button>
|
|
<template #icon>
|
|
<icon-export />
|
|
</template>
|
|
{{ t('table.export') }}
|
|
</a-button>
|
|
<a-button type="primary" @click="handleAddProject">
|
|
<template #icon>
|
|
<icon-plus />
|
|
</template>
|
|
{{ t('add-project') }}
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 使用新的 DataTable 组件 -->
|
|
<DataTable
|
|
:data="renderData"
|
|
:columns="projectColumn"
|
|
:loading="loading"
|
|
:total="total"
|
|
:current="current"
|
|
:page-size="pageSize"
|
|
@page-change="onPageChange"
|
|
@page-size-change="onPageSizeChange"
|
|
>
|
|
<template #type="{ record }">
|
|
<a-tag checkable :color="getTypeColor(record.type)">
|
|
{{ record.typeName }}
|
|
</a-tag>
|
|
</template>
|
|
<template #rate="{ record }">
|
|
<a-progress
|
|
:percent="Number(record.rentRate)"
|
|
color="green"
|
|
:style="{ width: '100px' }"
|
|
/>
|
|
</template>
|
|
<template #operate="{ record }">
|
|
<a-space>
|
|
<a-button @click="handleDetail(record.id)">查看</a-button>
|
|
<a-button type="primary" @click="handleEditProject(record.id)"
|
|
>编辑</a-button
|
|
>
|
|
<a-popover trigger="click" position="bottom">
|
|
<a-button>{{ $t('more') }}</a-button>
|
|
<template #content>
|
|
<a-space direction="vertical">
|
|
<a-button @click="handleWatchHouse(record.id)">
|
|
查看房源
|
|
</a-button>
|
|
<a-popconfirm
|
|
:ok-text="$t('cancel')"
|
|
:cancel-text="$t('delete')"
|
|
:ok-button-props="{ type: 'outline' }"
|
|
:cancel-button-props="{
|
|
type: 'primary',
|
|
status: 'danger',
|
|
}"
|
|
content="确定删除该项目？"
|
|
type="error"
|
|
@cancel="handleDel(record?.id)"
|
|
>
|
|
<a-button status="danger">删除项目</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</a-popover>
|
|
</a-space>
|
|
</template>
|
|
</DataTable>
|
|
</a-card>
|
|
<projectFormDrawer
|
|
v-model:visible="showDrawer"
|
|
:is-edit="isEdit"
|
|
:record="currentProjectInfo"
|
|
@submitted="getProjectListData"
|
|
/>
|
|
<projectInfoDrawer
|
|
v-model:visible="showProjectInfoDrawer"
|
|
:project-id="currentProjectId"
|
|
:detail-info="currentProjectInfo"
|
|
:project-type-list="projectTypeList"
|
|
/>
|
|
<projectListFilterDrawer
|
|
v-model:visible="showListFilterDrawer"
|
|
:project-list="projectList"
|
|
@confirm="handleFilterConfirm"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import useLoading from '@/hooks/loading';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { TableColumnData } from '@arco-design/web-vue';
|
|
import useDataTable from '@/composables/useDataTable';
|
|
import { ProjectItem } from '@/types/business';
|
|
import { getProjectList, getProjectDetail, delProject } from '@/api/project';
|
|
import { getAllProjectTypeList } from '@/api/dictionary';
|
|
import { ProjectPaginationParams } from '@/types/comm';
|
|
import projectFormDrawer from './drawer/project-form-drawer.vue';
|
|
import projectInfoDrawer from './drawer/project-info-drawer.vue';
|
|
import projectListFilterDrawer from './drawer/project-list-filter-drawer.vue';
|
|
import { Message } from '@arco-design/web-vue';
|
|
const { t } = useI18n();
|
|
const { loading } = useLoading(false);
|
|
const showDrawer = ref<boolean>(false);
|
|
const showProjectInfoDrawer = ref<boolean>(false);
|
|
const showListFilterDrawer = ref<boolean>(false);
|
|
const currentProjectId = ref<number | null>(null);
|
|
const isLoadingEdit = ref<boolean>(false);
|
|
const isLoadingDetail = ref<boolean>(false);
|
|
const isEdit = ref<boolean>(false);
|
|
const currentProjectInfo = ref<ProjectItem | null>(null);
|
|
const projectList = ref<ProjectItem[]>([]);
|
|
const {
|
|
data: renderData,
|
|
columns: projectColumn,
|
|
total,
|
|
current,
|
|
pageSize,
|
|
setData,
|
|
setColumns,
|
|
setTotal,
|
|
setCurrent,
|
|
setPageSize,
|
|
setLoading,
|
|
} = useDataTable({
|
|
initialPage: 1,
|
|
initialPageSize: 10,
|
|
pageSizeOptions: [10, 20, 50, 100],
|
|
});
|
|
|
|
// 列配置
|
|
const columns: TableColumnData[] = [
|
|
{ title: '项目信息', dataIndex: 'name', key: 'name' },
|
|
{ title: '项目类型', dataIndex: 'type', key: 'type', slotName: 'type' },
|
|
{ title: '管理面积', dataIndex: 'RentAreaStr', key: 'RentAreaStr' },
|
|
{ title: '可租面积', dataIndex: 'RoomAreaStr', key: 'RoomAreaStr' },
|
|
{
|
|
title: '出租率',
|
|
dataIndex: 'RentRateStr',
|
|
key: 'RentRateStr',
|
|
slotName: 'rate',
|
|
},
|
|
{ title: '房源数量', dataIndex: 'roomNum', key: 'roomNum' },
|
|
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
|
|
{
|
|
title: '操作',
|
|
key: 'operate',
|
|
align: 'center',
|
|
slotName: 'operate',
|
|
width: 300,
|
|
},
|
|
];
|
|
const queryParams = ref<ProjectPaginationParams>({
|
|
page: current.value,
|
|
page_size: pageSize.value,
|
|
keyword: '',
|
|
type: null,
|
|
province_ids: null,
|
|
rent_rate_min: null,
|
|
rent_rate_max: null,
|
|
});
|
|
const getProjectListData = async () => {
|
|
setLoading(true);
|
|
const { code, data } = await getProjectList(queryParams.value);
|
|
if (code === 200 && data) {
|
|
const { projectsList, page } = data;
|
|
projectList.value = Array.isArray(projectsList) ? projectsList : [];
|
|
setData(projectList.value);
|
|
setTotal(page?.total ? page.total : 0);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
const getProjectDetailData = async (id: number, edit: boolean) => {
|
|
if (
|
|
currentProjectInfo.value &&
|
|
currentProjectInfo.value?.id === id &&
|
|
!edit
|
|
)
|
|
return;
|
|
if (edit) {
|
|
isLoadingEdit.value = true;
|
|
} else {
|
|
isLoadingDetail.value = true;
|
|
}
|
|
const { code, data } = await getProjectDetail(id);
|
|
if (code === 200 && data) {
|
|
currentProjectInfo.value = data.project;
|
|
}
|
|
isLoadingEdit.value = false;
|
|
isLoadingDetail.value = false;
|
|
};
|
|
const handleWatchHouse = async (id: number) => {
|
|
try {
|
|
// TODO: 实现查看房源功能
|
|
} catch (error) {
|
|
// 处理错误
|
|
}
|
|
};
|
|
const handleFilterConfirm = (payload: {
|
|
typeIds: number[] | null;
|
|
cityIds: number[] | null;
|
|
rentRate: number | number[];
|
|
filteredList: any[]; // 筛选后的列表数据
|
|
}) => {
|
|
// 更新查询参数（用于后端筛选）
|
|
queryParams.value.type = payload.typeIds;
|
|
queryParams.value.province_ids = payload.cityIds;
|
|
const rentRateArray = Array.isArray(payload.rentRate)
|
|
? payload.rentRate
|
|
: [0, 100];
|
|
queryParams.value.rent_rate_min = rentRateArray[0];
|
|
queryParams.value.rent_rate_max = rentRateArray[1];
|
|
|
|
// 使用筛选后的列表数据更新表格
|
|
if (payload.filteredList) {
|
|
setData(payload.filteredList);
|
|
setTotal(payload.filteredList.length);
|
|
} else {
|
|
// 如果没有筛选数据，重新加载列表数据
|
|
getProjectListData();
|
|
}
|
|
};
|
|
const handleDel = async (id: number) => {
|
|
const { code, message } = await delProject(id);
|
|
if (code === 200) {
|
|
Message.success(message);
|
|
getProjectListData();
|
|
}
|
|
};
|
|
// 分页事件处理
|
|
const onPageChange = (page: number) => {
|
|
setCurrent(page);
|
|
current.value = page;
|
|
};
|
|
const onPageSizeChange = (size: number) => {
|
|
setPageSize(size);
|
|
pageSize.value = size;
|
|
};
|
|
const handleAddProject = () => {
|
|
isEdit.value = false;
|
|
currentProjectInfo.value = null;
|
|
showDrawer.value = true;
|
|
};
|
|
const handleEditProject = async (id: number) => {
|
|
if (isLoadingEdit.value) return;
|
|
isEdit.value = true;
|
|
await getProjectDetailData(id, true);
|
|
showDrawer.value = true;
|
|
};
|
|
const handleDetail = async (id: number) => {
|
|
if (isLoadingDetail.value) return;
|
|
await getProjectDetailData(id, false);
|
|
showProjectInfoDrawer.value = true;
|
|
};
|
|
const handleSearch = () => {
|
|
getProjectListData();
|
|
};
|
|
const handleFilter = () => {
|
|
showListFilterDrawer.value = true;
|
|
};
|
|
const projectTypeList = ref<any[]>([]);
|
|
const getAllProjectTypeListData = async () => {
|
|
const { code, data } = await getAllProjectTypeList();
|
|
if (code === 200 && data) {
|
|
projectTypeList.value = data?.projectTypesList;
|
|
}
|
|
};
|
|
const getTypeColor = (type: number) => {
|
|
const color = projectTypeList.value.find((item) => item.id === type)?.color;
|
|
return color || '';
|
|
};
|
|
onMounted(async () => {
|
|
await setColumns(columns);
|
|
await getAllProjectTypeListData();
|
|
await getProjectListData();
|
|
});
|
|
</script>
|