This commit is contained in:
109
apps/web-antd/src/views/property/building/building-detail.vue
Normal file
109
apps/web-antd/src/views/property/building/building-detail.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import type {Building} from '#/api/property/building/model';
|
||||
import {shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
|
||||
import {buildingInfo} from '#/api/property/building';
|
||||
import {renderDict} from "#/utils/render";
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
buildingDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const buildingDetail = shallowRef<null | Building>(null);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
const response = await buildingInfo(id);
|
||||
// 赋值
|
||||
buildingDetail.value = response;
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="建筑管理信息" class="w-[70%]">
|
||||
<Descriptions v-if="buildingDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
|
||||
<DescriptionsItem label="园区编码">
|
||||
{{ buildingDetail.communityCode }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="建筑编码">
|
||||
{{ buildingDetail.buildingCode }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="建筑名称">
|
||||
{{ buildingDetail.buildingName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="省">
|
||||
{{ buildingDetail.province }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="市">
|
||||
{{ buildingDetail.city }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="区">
|
||||
{{ buildingDetail.district }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="地址">
|
||||
{{ buildingDetail.addr }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="经度">
|
||||
{{ buildingDetail.lon }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="维度">
|
||||
{{ buildingDetail.lat }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="产权性质" v-if="buildingDetail.cqxz!=null">
|
||||
<component
|
||||
:is="renderDict(buildingDetail.cqxz,'wy_cqxz')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="不动产编号">
|
||||
{{ buildingDetail.bdcbh }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="产权编号">
|
||||
{{ buildingDetail.cqbh }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="土地编号">
|
||||
{{ buildingDetail.tdbh }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="建筑面积">
|
||||
{{ buildingDetail.jzmj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="产权面积">
|
||||
{{ buildingDetail.cqmj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="可租面积">
|
||||
{{ buildingDetail.kzmj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="自用面积">
|
||||
{{ buildingDetail.zymj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="配套面积">
|
||||
{{ buildingDetail.ptmj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="车位面积">
|
||||
{{ buildingDetail.cwmj }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="标准层高">
|
||||
{{ buildingDetail.bzcg }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="组织编码">
|
||||
{{ buildingDetail.orgCode }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="数据状态" v-if="buildingDetail.dataState!=null">
|
||||
<component
|
||||
:is="renderDict(buildingDetail.dataState,'wy_qylx')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="修改时间">
|
||||
{{ buildingDetail.modifyTime }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -20,36 +20,6 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'buildingName',
|
||||
label: '建筑名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'province',
|
||||
label: '省',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'city',
|
||||
label: '市',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'district',
|
||||
label: '区',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'addr',
|
||||
label: '地址',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'lon',
|
||||
label: '经度',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'lat',
|
||||
label: '维度',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
@@ -57,137 +27,43 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('wy_cqxz'),
|
||||
},
|
||||
fieldName: 'cqxz',
|
||||
label: '产权性质(1:自持，2：承租，3：自持+承租,4：政府免费使用)',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'bdcbh',
|
||||
label: '不动产编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'cqbh',
|
||||
label: '产权编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'tdbh',
|
||||
label: '图地编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'jzmj',
|
||||
label: '建筑面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'cqmj',
|
||||
label: '产权面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'kzmj',
|
||||
label: '可租面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'zymj',
|
||||
label: '自用面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'ptmj',
|
||||
label: '配套面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'cwmj',
|
||||
label: '车位面积',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'bzcg',
|
||||
label: '标准层高',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'sort',
|
||||
label: '排序字段',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orgCode',
|
||||
label: '组织编码',
|
||||
label: '产权性质',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'dataState',
|
||||
label: '数据状态：1有效，0无效',
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
fieldName: 'modifyTime',
|
||||
label: '修改时间',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'searchValue',
|
||||
label: '搜索值',
|
||||
},
|
||||
label: '数据状态',
|
||||
}
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '园区编码',
|
||||
field: 'communityCode',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '建筑编码',
|
||||
field: 'buildingCode',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '建筑名称',
|
||||
field: 'buildingName',
|
||||
},
|
||||
{
|
||||
title: '省',
|
||||
field: 'province',
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
field: 'city',
|
||||
},
|
||||
{
|
||||
title: '区',
|
||||
field: 'district',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
field: 'addr',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '经度',
|
||||
field: 'lon',
|
||||
},
|
||||
{
|
||||
title: '维度',
|
||||
field: 'lat',
|
||||
},
|
||||
{
|
||||
title: '产权性质(1:自持，2：承租，3：自持+承租,4：政府免费使用)',
|
||||
title: '产权性质',
|
||||
field: 'cqxz',
|
||||
width: 'auto',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_CQXZ 便于维护
|
||||
@@ -198,62 +74,62 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '不动产编号',
|
||||
field: 'bdcbh',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '产权编号',
|
||||
field: 'cqbh',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '图地编号',
|
||||
title: '土地编号',
|
||||
field: 'tdbh',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '建筑面积',
|
||||
field: 'jzmj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '产权面积',
|
||||
field: 'cqmj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '可租面积',
|
||||
field: 'kzmj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '自用面积',
|
||||
field: 'zymj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '配套面积',
|
||||
field: 'ptmj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '车位面积',
|
||||
field: 'cwmj',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '标准层高',
|
||||
field: 'bzcg',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '排序字段',
|
||||
field: 'sort',
|
||||
},
|
||||
{
|
||||
title: '组织编码',
|
||||
field: 'orgCode',
|
||||
},
|
||||
{
|
||||
title: '数据状态：1有效，0无效',
|
||||
title: '数据状态',
|
||||
field: 'dataState',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
field: 'modifyTime',
|
||||
},
|
||||
{
|
||||
title: '搜索值',
|
||||
field: 'searchValue',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@@ -292,6 +168,12 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '组织编码',
|
||||
fieldName: 'orgCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '省',
|
||||
fieldName: 'province',
|
||||
@@ -329,7 +211,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '产权性质(1:自持，2：承租，3：自持+承租,4：政府免费使用)',
|
||||
label: '产权性质',
|
||||
fieldName: 'cqxz',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
@@ -404,13 +286,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '组织编码',
|
||||
fieldName: 'orgCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '数据状态：1有效，0无效',
|
||||
label: '数据状态',
|
||||
fieldName: 'dataState',
|
||||
component: 'Input',
|
||||
},
|
||||
@@ -423,10 +299,5 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '搜索值',
|
||||
fieldName: 'searchValue',
|
||||
component: 'Input',
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
@@ -24,7 +18,10 @@ import type { BuildingForm } from '#/api/property/building/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import buildingModal from './building-modal.vue';
|
||||
import buildingDetail from './building-detail.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import unitInfoModal from "#/views/property/resident/unit/unit-detail.vue";
|
||||
import type {Resident_unitForm} from "#/api/property/resident/unit/model";
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
@@ -87,7 +84,13 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
const [BuildingModal, modalApi] = useVbenModal({
|
||||
connectedComponent: buildingModal,
|
||||
});
|
||||
|
||||
const [buildingDetailModal, buildingDetailApi] = useVbenModal({
|
||||
connectedComponent: buildingDetail,
|
||||
});
|
||||
async function handleInfo(row: Required<BuildingForm>) {
|
||||
// buildingDetailApi.setData({ id: row.id });
|
||||
buildingDetailApi.open();
|
||||
}
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
@@ -138,8 +141,8 @@ function handleDownloadExcel() {
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:building:remove']"
|
||||
type="primary"
|
||||
v-access:code="['property:building:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
@@ -150,10 +153,21 @@ function handleDownloadExcel() {
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleInfo"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['property:building:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
@@ -178,5 +192,6 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
</BasicTable>
|
||||
<BuildingModal @reload="tableApi.query()" />
|
||||
<buildingDetailModal/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user