This commit is contained in:
15683799673
@@ -1,24 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { buildingAdd, buildingInfo, buildingUpdate } from '#/api/property/building';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
@@ -36,6 +42,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
@@ -46,13 +53,16 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await buildingInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
@@ -64,6 +74,7 @@ async function handleConfirm() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? buildingUpdate(data) : buildingAdd(data));
|
||||
resetInitialized();
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'communityCode',
|
||||
label: '小区/园区',
|
||||
fieldName: 'communityName',
|
||||
label: '社区',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
@@ -16,114 +14,62 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'buildingCode',
|
||||
label: '建筑编码',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_cqxz'),
|
||||
},
|
||||
fieldName: 'cqxz',
|
||||
label: '产权性质',
|
||||
fieldName: 'unitCount',
|
||||
label: '单元数',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '小区/园区',
|
||||
field: 'communityCode',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '建筑名称',
|
||||
field: 'buildingName',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '建筑编码',
|
||||
field: 'buildingCode',
|
||||
width: 'auto'
|
||||
title: '省',
|
||||
field: 'province',
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
field: 'city',
|
||||
},
|
||||
{
|
||||
title: '区',
|
||||
field: 'district',
|
||||
},
|
||||
{
|
||||
title: '总层数',
|
||||
field: 'floorCount',
|
||||
},
|
||||
{
|
||||
title: '单元数',
|
||||
field: 'unitCount',
|
||||
},
|
||||
{
|
||||
title: '建筑类型',
|
||||
field: 'buildType',
|
||||
},
|
||||
{
|
||||
title: '电梯数量',
|
||||
field: 'elevatorCount',
|
||||
},
|
||||
{
|
||||
title: '竣工日期',
|
||||
field: 'completionDate',
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
field: 'addr',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '产权性质',
|
||||
field: 'cqxz',
|
||||
width: 'auto',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.cqxz, 'wy_cqxz');
|
||||
},
|
||||
},
|
||||
title: '经度',
|
||||
field: 'lon',
|
||||
},
|
||||
{
|
||||
title: '不动产编号',
|
||||
field: 'bdcbh',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
title: '产权编号',
|
||||
field: 'cqbh',
|
||||
width: 'auto'
|
||||
},
|
||||
{
|
||||
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: 'modifyTime',
|
||||
width: 'auto'
|
||||
title: '维度',
|
||||
field: 'lat',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@@ -145,8 +91,8 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '小区/园区',
|
||||
fieldName: 'communityCode',
|
||||
label: '园区编码',
|
||||
fieldName: 'communityId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
@@ -156,12 +102,6 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '建筑编码',
|
||||
fieldName: 'buildingCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '省',
|
||||
fieldName: 'province',
|
||||
@@ -180,6 +120,37 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '总层数',
|
||||
fieldName: 'floorCount',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '单元数',
|
||||
fieldName: 'unitCount',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '建筑类型',
|
||||
fieldName: 'buildType',
|
||||
component: 'Select',
|
||||
componentProps: {},
|
||||
},
|
||||
{
|
||||
label: '电梯数量',
|
||||
fieldName: 'elevatorCount',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '竣工日期',
|
||||
fieldName: 'completionDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
fieldName: 'addr',
|
||||
@@ -198,78 +169,9 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '产权性质',
|
||||
fieldName: 'cqxz',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_cqxz'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '不动产编号',
|
||||
fieldName: 'bdcbh',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '产权编号',
|
||||
fieldName: 'cqbh',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '土地编号',
|
||||
fieldName: 'tdbh',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '建筑面积',
|
||||
fieldName: 'jzmj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '产权面积',
|
||||
fieldName: 'cqmj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '可租面积',
|
||||
fieldName: 'kzmj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '自用面积',
|
||||
fieldName: 'zymj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '配套面积',
|
||||
fieldName: 'ptmj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '车位面积',
|
||||
fieldName: 'cwmj',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '标准层高',
|
||||
fieldName: 'bzcg',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '排序字段',
|
||||
fieldName: 'sort',
|
||||
component: 'Input',
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
<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 {
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
buildingExport,
|
||||
buildingList,
|
||||
@@ -14,8 +22,8 @@ import {
|
||||
} from '#/api/property/building';
|
||||
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';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
@@ -27,13 +35,28 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -52,6 +75,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-building-index'
|
||||
};
|
||||
|
||||
@@ -64,15 +88,6 @@ 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();
|
||||
@@ -103,7 +118,7 @@ function handleMultiDelete() {
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(buildingExport, '建筑管理数据', tableApi.formApi.form.values, {
|
||||
commonDownloadExcel(buildingExport, '建筑数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
@@ -111,7 +126,7 @@ function handleDownloadExcel() {
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="建筑管理列表">
|
||||
<BasicTable table-title="建筑列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
@@ -123,8 +138,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>
|
||||
@@ -139,11 +154,6 @@ function handleDownloadExcel() {
|
||||
</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)"
|
||||
@@ -168,6 +178,5 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
</BasicTable>
|
||||
<BuildingModal @reload="tableApi.query()" />
|
||||
<buildingDetailModal/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { communityAdd, communityInfo, communityUpdate } from '#/api/property/community';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
@@ -36,6 +42,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
@@ -46,13 +53,16 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await communityInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
@@ -64,6 +74,7 @@ async function handleConfirm() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? communityUpdate(data) : communityAdd(data));
|
||||
resetInitialized();
|
||||
|
||||
@@ -1,56 +1,41 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'communityName',
|
||||
label: '小区名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'communityCode',
|
||||
label: '小区编码',
|
||||
label: '社区',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_sqlx'),
|
||||
},
|
||||
componentProps: {},
|
||||
fieldName: 'communityType',
|
||||
label: '小区类型',
|
||||
}
|
||||
label: '社区类型',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'propertyCompany',
|
||||
label: '物业公司',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'contactPhone',
|
||||
label: '联系电话',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '小区名称',
|
||||
title: '社区名称',
|
||||
field: 'communityName',
|
||||
},
|
||||
{
|
||||
title: '小区编码',
|
||||
field: 'communityCode',
|
||||
},
|
||||
{
|
||||
title: '小区类型',
|
||||
title: '社区类型',
|
||||
field: 'communityType',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.communityType, 'wy_sqlx');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '省',
|
||||
@@ -77,12 +62,28 @@ export const columns: VxeGridProps['columns'] = [
|
||||
field: 'lat',
|
||||
},
|
||||
{
|
||||
title: '小图图片',
|
||||
field: 'img',
|
||||
title: '占地面积(平方米)',
|
||||
field: 'area',
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
field: 'modifyTime',
|
||||
title: '',
|
||||
field: 'builtYear',
|
||||
},
|
||||
{
|
||||
title: '物业公司',
|
||||
field: 'propertyCompany',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
field: 'contactPhone',
|
||||
},
|
||||
{
|
||||
title: '社区描述',
|
||||
field: 'description',
|
||||
},
|
||||
{
|
||||
title: '小图图片',
|
||||
field: 'img',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@@ -95,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键',
|
||||
label: '',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
@@ -104,24 +105,16 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '小区名称',
|
||||
label: '社区名称',
|
||||
fieldName: 'communityName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '小区编码',
|
||||
fieldName: 'communityCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '小区类型',
|
||||
label: '社区类型',
|
||||
fieldName: 'communityType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_sqlx'),
|
||||
},
|
||||
componentProps: {},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
@@ -160,11 +153,39 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '占地面积(平方米)',
|
||||
fieldName: 'area',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
fieldName: 'builtYear',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '物业公司',
|
||||
fieldName: 'propertyCompany',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '联系电话',
|
||||
fieldName: 'contactPhone',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '社区描述',
|
||||
fieldName: 'description',
|
||||
component: 'Textarea',
|
||||
},
|
||||
{
|
||||
label: '小图图片',
|
||||
fieldName: 'img',
|
||||
component: 'ImageUpload',
|
||||
componentProps: {
|
||||
},
|
||||
}
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
<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 {
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
communityExport,
|
||||
communityList,
|
||||
@@ -14,10 +22,9 @@ import {
|
||||
} from '#/api/property/community';
|
||||
import type { CommunityForm } from '#/api/property/community/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import communityModal from './community-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import communityDetail from "#/views/property/community/community-detail.vue";
|
||||
import type {BuildingForm} from "#/api/property/building/model";
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
@@ -28,13 +35,28 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -53,6 +75,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-community-index'
|
||||
};
|
||||
|
||||
@@ -65,15 +88,6 @@ const [CommunityModal, modalApi] = useVbenModal({
|
||||
connectedComponent: communityModal,
|
||||
});
|
||||
|
||||
const [communityDetailModal, communityDetailApi] = useVbenModal({
|
||||
connectedComponent: communityDetail,
|
||||
});
|
||||
|
||||
async function handleInfo(row: Required<CommunityForm>) {
|
||||
communityDetailApi.setData({ id: row.id });
|
||||
communityDetailApi.open();
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
@@ -104,7 +118,7 @@ function handleMultiDelete() {
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(communityExport, '小区管理数据', tableApi.formApi.form.values, {
|
||||
commonDownloadExcel(communityExport, '小区数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
@@ -112,7 +126,7 @@ function handleDownloadExcel() {
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="小区管理列表">
|
||||
<BasicTable table-title="小区列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
@@ -124,8 +138,8 @@ function handleDownloadExcel() {
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:community:remove']"
|
||||
type="primary"
|
||||
v-access:code="['property:community:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
@@ -140,11 +154,6 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['property:community:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
@@ -169,6 +178,5 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
</BasicTable>
|
||||
<CommunityModal @reload="tableApi.query()" />
|
||||
<communityDetailModal/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,64 +1,42 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'communityCode',
|
||||
label: '小区/园区',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'buildingCode',
|
||||
label: '建筑名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'floorName',
|
||||
label: '楼层名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'floorCode',
|
||||
label: '楼层编码',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orgCode',
|
||||
label: '组织编码',
|
||||
fieldName: 'communityName',
|
||||
label: '社区',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
title: '单元编码',
|
||||
field: 'unitId',
|
||||
},
|
||||
{
|
||||
title: '小区/园区',
|
||||
field: 'communityCode',
|
||||
},
|
||||
{
|
||||
title: '建筑名称',
|
||||
field: 'buildingCode',
|
||||
},
|
||||
{
|
||||
title: '楼层名称',
|
||||
title: '楼层数名称',
|
||||
field: 'floorName',
|
||||
},
|
||||
{
|
||||
title: '楼层编码',
|
||||
field: 'floorCode',
|
||||
title: '楼层号',
|
||||
field: 'floorNumber',
|
||||
},
|
||||
{
|
||||
title: '组织编码',
|
||||
field: 'orgCode',
|
||||
title: '楼层类型',
|
||||
field: 'floorType',
|
||||
},
|
||||
{
|
||||
title: '房间数量',
|
||||
field: 'roomCount',
|
||||
},
|
||||
{
|
||||
title: '层高',
|
||||
field: 'floorHeight',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@@ -71,7 +49,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: 'ID',
|
||||
label: '',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
@@ -80,39 +58,38 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '小区/园区',
|
||||
fieldName: 'communityCode',
|
||||
label: '单元编码',
|
||||
fieldName: 'unitId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '建筑名称',
|
||||
fieldName: 'buildingCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '单元名称',
|
||||
fieldName: 'buildingCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '楼层名称',
|
||||
label: '楼层数名称',
|
||||
fieldName: 'floorName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '楼层编码',
|
||||
fieldName: 'floorCode',
|
||||
label: '楼层号',
|
||||
fieldName: 'floorNumber',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '组织编码',
|
||||
fieldName: 'orgCode',
|
||||
label: '楼层类型',
|
||||
fieldName: 'floorType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '房间数量',
|
||||
fieldName: 'roomCount',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '层高',
|
||||
fieldName: 'floorHeight',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { floorAdd, floorInfo, floorUpdate } from '#/api/property/floor';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
@@ -36,6 +42,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
@@ -46,13 +53,16 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await floorInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
@@ -64,6 +74,7 @@ async function handleConfirm() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? floorUpdate(data) : floorAdd(data));
|
||||
resetInitialized();
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
<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 {
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
floorExport,
|
||||
floorList,
|
||||
@@ -14,6 +22,7 @@ import {
|
||||
} from '#/api/property/floor';
|
||||
import type { FloorForm } from '#/api/property/floor/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import floorModal from './floor-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
@@ -26,13 +35,28 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -51,6 +75,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-floor-index'
|
||||
};
|
||||
|
||||
@@ -93,7 +118,7 @@ function handleMultiDelete() {
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(floorExport, '楼层管理数据', tableApi.formApi.form.values, {
|
||||
commonDownloadExcel(floorExport, '楼层数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
@@ -101,7 +126,7 @@ function handleDownloadExcel() {
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="楼层管理列表">
|
||||
<BasicTable table-title="楼层列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
@@ -113,8 +138,8 @@ function handleDownloadExcel() {
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:floor:remove']"
|
||||
type="primary"
|
||||
v-access:code="['property:floor:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
|
||||
@@ -1,74 +1,37 @@
|
||||
import type {FormSchemaGetter} from '#/adapter/form';
|
||||
import type {VxeGridProps} from '#/adapter/vxe-table';
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'floorCode',
|
||||
label: '所属社区',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'floorCode1',
|
||||
label: '所属建筑',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'floorCode2',
|
||||
label: '所属单元',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'floorCode3',
|
||||
label: '所属楼层',
|
||||
component: 'Input',
|
||||
fieldName: 'communityName',
|
||||
label: '社区',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'roomNumber',
|
||||
label: '房间号',
|
||||
fieldName: 'orientation',
|
||||
label: '朝向',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'roomCode',
|
||||
label: '房间编码',
|
||||
fieldName: 'isForSale',
|
||||
label: '是否可售',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('room_type'),
|
||||
},
|
||||
fieldName: 'roomType',
|
||||
label: '房间类型',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_fjzt'),
|
||||
},
|
||||
componentProps: {},
|
||||
fieldName: 'status',
|
||||
label: '房间状态',
|
||||
label: '状态',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属楼层',
|
||||
field: 'floorCode',
|
||||
},
|
||||
{
|
||||
title: '房间编码',
|
||||
field: 'roomCode',
|
||||
title: '所属楼层ID',
|
||||
field: 'floorId',
|
||||
},
|
||||
{
|
||||
title: '房间号',
|
||||
@@ -79,7 +42,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
field: 'roomType',
|
||||
},
|
||||
{
|
||||
title: '面积(㎡)',
|
||||
title: '面积(平方米)',
|
||||
field: 'area',
|
||||
},
|
||||
{
|
||||
@@ -95,7 +58,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
field: 'isForSale',
|
||||
},
|
||||
{
|
||||
title: '房间状态',
|
||||
title: '状态',
|
||||
field: 'status',
|
||||
},
|
||||
{
|
||||
@@ -109,7 +72,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键',
|
||||
label: '',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
@@ -118,51 +81,25 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '所属社区',
|
||||
fieldName: 'floorCode',
|
||||
label: '所属楼层ID',
|
||||
fieldName: 'floorId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '所属建筑',
|
||||
fieldName: 'floorCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '所属单元',
|
||||
fieldName: 'floorCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '所属楼层',
|
||||
fieldName: 'floorCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '房间号',
|
||||
label: '房间号(如101,202)',
|
||||
fieldName: 'roomNumber',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '房间编码',
|
||||
fieldName: 'roomCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '房间类型',
|
||||
fieldName: 'roomType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('room_type'),
|
||||
},
|
||||
componentProps: {},
|
||||
},
|
||||
{
|
||||
label: '面积(㎡)',
|
||||
label: '面积(平方米)',
|
||||
fieldName: 'area',
|
||||
component: 'Input',
|
||||
},
|
||||
@@ -174,22 +111,17 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '朝向',
|
||||
fieldName: 'orientation',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('direction_towards'),
|
||||
},
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '是否可售',
|
||||
fieldName: 'isForSale',
|
||||
component: 'Select',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '房间状态',
|
||||
label: '状态',
|
||||
fieldName: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_fjzt'),
|
||||
},
|
||||
componentProps: {},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,12 +1,20 @@
|
||||
<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 {
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
roomExport,
|
||||
roomList,
|
||||
@@ -14,6 +22,7 @@ import {
|
||||
} from '#/api/property/room';
|
||||
import type { RoomForm } from '#/api/property/room/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import roomModal from './room-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
@@ -26,13 +35,28 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -51,6 +75,7 @@ const gridOptions: VxeGridProps = {
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-room-index'
|
||||
};
|
||||
|
||||
@@ -113,8 +138,8 @@ function handleDownloadExcel() {
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:room:remove']"
|
||||
type="primary"
|
||||
v-access:code="['property:room:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { roomAdd, roomInfo, roomUpdate } from '#/api/property/room';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
@@ -36,6 +42,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
@@ -46,13 +53,16 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await roomInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
@@ -64,6 +74,7 @@ async function handleConfirm() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? roomUpdate(data) : roomAdd(data));
|
||||
resetInitialized();
|
||||
|
||||
@@ -1,68 +1,22 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import {communityList} from "#/api/property/community";
|
||||
import {buildingList} from "#/api/property/building";
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
fieldName: 'communityCode',
|
||||
label: '所属区域',
|
||||
componentProps: (formModel, formActionType) => ({
|
||||
api: getCommunityList,
|
||||
resultField: 'data',
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
immediate: true,
|
||||
debounceTime: 500,
|
||||
allowClear: true,
|
||||
placeholder: '请选择区域',
|
||||
onChange: () => {
|
||||
// 清空建筑字段
|
||||
formModel.buildingCode = undefined;
|
||||
// 更新表单值
|
||||
formActionType.setFieldValue('buildingCode', undefined);
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
fieldName: 'buildingCode',
|
||||
label: '所属建筑',
|
||||
componentProps:{
|
||||
api: getBuildingList,
|
||||
resultField: 'data',
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
immediate: true,
|
||||
debounceTime: 500,
|
||||
allowClear: true,
|
||||
placeholder: '请选择建筑',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'unitCode',
|
||||
label: '单元编码',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'unitName',
|
||||
label: '单元名称',
|
||||
fieldName: 'communityName',
|
||||
label: '社区',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '建筑名称',
|
||||
field: 'buildingCode',
|
||||
},
|
||||
{
|
||||
title: '单元编码',
|
||||
field: 'unitCode',
|
||||
field: 'buildingId',
|
||||
},
|
||||
{
|
||||
title: '单元名称',
|
||||
@@ -100,46 +54,8 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
fieldName: 'communityCode',
|
||||
label: '所属区域',
|
||||
componentProps: (formModel, formActionType) => ({
|
||||
api: getCommunityList,
|
||||
resultField: 'data',
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
immediate: true,
|
||||
debounceTime: 500,
|
||||
allowClear: true,
|
||||
placeholder: '请选择区域',
|
||||
onChange: () => {
|
||||
// 清空建筑字段
|
||||
formModel.buildingCode = undefined;
|
||||
// 更新表单值
|
||||
formActionType.setFieldValue('buildingCode', undefined);
|
||||
},
|
||||
}),
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
fieldName: 'buildingCode',
|
||||
label: '所属建筑',
|
||||
componentProps: {
|
||||
api: getBuildingList,
|
||||
resultField: 'data',
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
immediate: true,
|
||||
debounceTime: 500,
|
||||
allowClear: true,
|
||||
placeholder: '请选择建筑',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '单元编码',
|
||||
fieldName: 'unitCode',
|
||||
label: '建筑名称',
|
||||
fieldName: 'buildingId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
@@ -152,69 +68,16 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '单元层数',
|
||||
fieldName: 'floorCount',
|
||||
component: 'InputNumber',
|
||||
rules: 'required',
|
||||
componentProps:{
|
||||
defaultValue:0,
|
||||
precision:0,
|
||||
min:0
|
||||
}
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '单元户数',
|
||||
fieldName: 'householdCount',
|
||||
component: 'InputNumber',
|
||||
rules: 'required',
|
||||
componentProps:{
|
||||
defaultValue:0,
|
||||
precision:0,
|
||||
min:0
|
||||
}
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '楼梯数量',
|
||||
fieldName: 'stairCount',
|
||||
component: 'InputNumber',
|
||||
rules: 'required',
|
||||
componentProps:{
|
||||
defaultValue:0,
|
||||
precision:0,
|
||||
min:0
|
||||
}
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
//获取区域数据
|
||||
async function getCommunityList(): Promise<{ value: number; label: string }[]> {
|
||||
const queryParam = {
|
||||
pageNum: 1000,
|
||||
pageSize: 1,
|
||||
};
|
||||
const res = await communityList(queryParam);
|
||||
const data: { value: number; label: string }[] = [];
|
||||
res.rows.forEach((r: any) => {
|
||||
data.push({
|
||||
value: r.communityName,
|
||||
label: r.id,
|
||||
});
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
//获取建筑数据
|
||||
export async function getBuildingList(): Promise<{ value: number; label: string }[]> {
|
||||
const queryParam = {
|
||||
pageNum: 1000,
|
||||
pageSize: 1,
|
||||
};
|
||||
const res = await buildingList(queryParam);
|
||||
const data: { value: number; label: string }[] = [];
|
||||
|
||||
res.rows.forEach((r: any) => {
|
||||
data.push({
|
||||
value: r.buildingName,
|
||||
label: r.id,
|
||||
});
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
<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 {
|
||||
@@ -31,6 +35,15 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
@@ -42,6 +55,8 @@ const gridOptions: VxeGridProps = {
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
@@ -123,8 +138,8 @@ function handleDownloadExcel() {
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:unit:remove']"
|
||||
type="primary"
|
||||
v-access:code="['property:unit:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
|
||||
Reference in New Issue
Block a user