by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5

Browse Source
This commit is contained in:
lxj
2025-09-12 17:43:25 +08:00
parent 831fcd98b2 d072976e6d
commit a876b665b2
14 changed files with 540 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/api/property/chargeManagement/model.d.ts vendored
View File

@@ -266,4 +266,8 @@ export interface orderChargeDetailForm extends BaseEntity {
* 收费状态
*/
chargeStatus?: string | number;
/**
* 租赁单位
*/
unitName?: string;
}

5
apps/web-antd/src/api/property/rentalOrder/model.d.ts vendored
View File

@@ -86,6 +86,10 @@ export interface RentalOrderVO {
*/
signTime: string;
/**
* 单位名称
*/
unitName: string;
}
export interface RentalOrderForm extends BaseEntity {
@@ -173,7 +177,6 @@ export interface RentalOrderForm extends BaseEntity {
* 签署时间
*/
signTime?: string;
}
export interface RentalOrderQuery extends PageQuery {

10
apps/web-antd/src/views/property/costManagement/costItemSetting/data.ts
View File

@@ -88,7 +88,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '状态',
field: 'state',
slots: {default: 'state'},
slots: { default: 'state' },
width: 100,
},
{
@@ -159,11 +159,11 @@ export const modalSchema: FormSchemaGetter = () => [
},
},
{
label: '手机缴费',
fieldName: 'isMobilePay',
label: '付费方式',
fieldName: 'paymentMode',
component: 'Select',
componentProps: {
options: getDictOptions('pro_mobile_payment'),
options: getDictOptions('wy_fffs'),
},
rules: 'selectRequired',
},
@@ -202,7 +202,7 @@ export const modalSchema: FormSchemaGetter = () => [
options: getDictOptions('pro_calculation_formula'),
},
rules: 'selectRequired',
formItemClass:'col-span-2',
formItemClass: 'col-span-2',
},
{
label: '计费单价',

78
apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
View File

@@ -1,17 +1,18 @@
import type {FormSchemaGetter} from '#/adapter/form';
import type {VxeGridProps} from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
import {renderDict} from "#/utils/render";
import {costItemSettingList} from "#/api/property/costManagement/costItemSetting";
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import { costItemSettingList } from '#/api/property/costManagement/costItemSetting';
import { h } from 'vue';
import { resident_unitList } from '#/api/property/resident/unit';
export const querySchema: FormSchemaGetter = () => [
{
component: 'ApiSelect',
componentProps: {
api:async ()=>{
return (await costItemSettingList({pageSize: 1000, pageNum: 1}))?.rows
api: async () => {
return (await costItemSettingList({ pageSize: 1000, pageNum: 1 }))
?.rows;
},
afterFetch: (data: { chargeItem: string; id: string }[]) => {
return data.map((item: any) => ({
@@ -28,12 +29,29 @@ export const querySchema: FormSchemaGetter = () => [
fieldName: 'chargeStatus',
label: '缴费状态',
componentProps: {
options: getDictOptions('wy_fyshzt')
options: getDictOptions('wy_fyshzt'),
},
},
{
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await resident_unitList({
pageSize: 1000000000,
pageNum: 1,
});
return rows;
},
resultField: 'rows',
labelField: 'name',
valueField: 'id',
},
fieldName: 'residentUnitId',
label: '单位',
},
];
export const columns: VxeGridProps['columns'] = [
{type: 'checkbox', width: 60},
{ type: 'checkbox', width: 60 },
{
title: '单位',
field: 'residentUnitText',
@@ -41,7 +59,7 @@ export const columns: VxeGridProps['columns'] = [
},
{
title: '收费项目',
field: 'costItemsId',
field: 'chargeItemText',
width: 150,
},
{
@@ -53,21 +71,23 @@ export const columns: VxeGridProps['columns'] = [
title: '计费开始时间',
field: 'startTime',
width: 150,
slots: { default: 'startTime' },
},
{
title: '计费结束时间',
field: 'endTime',
width: 150,
slots: { default: 'endTime' },
},
{
title: '缴费状态',
field: 'chargeStatus',
width: 150,
slots: {
default: ({row}) => {
return renderDict(row.chargeStatus, 'wy_fyshzt')
}
}
default: ({ row }) => {
return renderDict(row.chargeStatus, 'wy_fyshzt');
},
},
},
// {
// title: '状态',
@@ -87,7 +107,7 @@ export const columns: VxeGridProps['columns'] = [
{
field: 'action',
fixed: 'right',
slots: {default: 'action'},
slots: { default: 'action' },
title: '操作',
width: 180,
},
@@ -107,8 +127,7 @@ export const modalSchema: FormSchemaGetter = () => [
label: '单位',
fieldName: 'residentUnitId',
component: 'Select',
componentProps: {
},
componentProps: {},
rules: 'selectRequired',
formItemClass: 'col-span-2',
},
@@ -136,16 +155,14 @@ export const modalSchema: FormSchemaGetter = () => [
label: '业主',
fieldName: 'personId',
component: 'ApiSelect',
componentProps: {
},
componentProps: {},
rules: 'selectRequired',
},
{
label: '费用类型',
fieldName: 'costType',
component: 'Select',
componentProps: {
},
componentProps: {},
rules: 'selectRequired',
},
{
@@ -201,7 +218,7 @@ export const modalSchemaUpdate: FormSchemaGetter = () => [
fieldName: 'payType',
component: 'Select',
componentProps: {
options:getDictOptions('wy_zffs')
options: getDictOptions('wy_zffs'),
},
rules: 'selectRequired',
},
@@ -210,14 +227,15 @@ export const modalSchemaUpdate: FormSchemaGetter = () => [
fieldName: 'chargeCycle',
component: 'InputNumber',
componentProps: {
min:1,
precision:0,
placeholder:'请输入缴费周期（月）'
min: 1,
precision: 0,
placeholder: '请输入缴费周期（月）',
},
suffix: () => h('span', { style: {fontSize: '0.875rem',fontWeight:500,} }, '月'),
suffix: () =>
h('span', { style: { fontSize: '0.875rem', fontWeight: 500 } }, '月'),
rules: 'selectRequired',
},
]
];
export const modalSchemaRefund: FormSchemaGetter = () => [
{
label: '主键',
@@ -233,6 +251,6 @@ export const modalSchemaRefund: FormSchemaGetter = () => [
fieldName: 'reason',
component: 'Textarea',
formItemClass: 'col-span-2',
rules:'required'
rules: 'required',
},
]
];

7
apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
View File

@@ -39,6 +39,11 @@ async function handleOpenChange(open: boolean) {
}
modalApi.modalLoading(false);
}
function formatDate(dateString: string) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toISOString().split('T')[0];
}
</script>
<template>
@@ -57,7 +62,7 @@ async function handleOpenChange(open: boolean) {
/>
</DescriptionsItem>
<DescriptionsItem label="计费时间">
{{ houseChargeDetail.startTime + ' 至 ' + houseChargeDetail.endTime }}
{{ formatDate(houseChargeDetail.startTime) + ' 至 ' + formatDate(houseChargeDetail.endTime) }}
</DescriptionsItem>
<DescriptionsItem label="单位">
{{ houseChargeDetail?.residentUnitText }}

14
apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
View File

@@ -125,7 +125,11 @@ function handleMultiDelete() {
},
});
}
function formatDate(dateString: string) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toISOString().split('T')[0];
}
function handleDownloadExcel() {
commonDownloadExcel(houseChargeExport, '房屋收费数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
@@ -161,6 +165,14 @@ function handleDownloadExcel() {
</a-button>
</Space>
</template>
<template #startTime="{row}">
{{ formatDate(row.startTime) }}
</template>
<template #endTime="{row}">
{{ formatDate(row.endTime) }}
</template>
<template #action="{ row }">
<Space>
<ghost-button

80
apps/web-antd/src/views/property/greenPlantRentalManagement/chargeManagement/data.ts
View File

@@ -2,7 +2,8 @@ import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
import {rentalOrderList} from "#/api/property/rentalOrder";
import { rentalOrderList } from '#/api/property/rentalOrder';
import { resident_unitList } from '#/api/property/resident/unit';
export const querySchema: FormSchemaGetter = () => [
{
@@ -70,47 +71,47 @@ export const columns: VxeGridProps['columns'] = [
return (rowIndex + 1).toString();
},
},
minWidth: '120'
minWidth: '120',
},
{
title: '订单号',
field: 'orderId',
minWidth: '120'
minWidth: '120',
},
{
title: '租赁合同编号',
field: 'userId',
minWidth: '120'
minWidth: '120',
},
{
title: '租赁人',
field: 'userName',
minWidth: '120'
minWidth: '120',
},
{
title: '租金',
field: 'rent',
minWidth: '120'
minWidth: '120',
},
{
title: '押金',
field: 'deposit',
minWidth: '120'
minWidth: '120',
},
{
title: '违约金',
field: 'penalty',
minWidth: '120'
minWidth: '120',
},
{
title: '总金额',
field: 'totalAmount',
minWidth: '120'
minWidth: '120',
},
{
title: '收费日期',
field: 'chargeDate',
minWidth: '120'
minWidth: '120',
},
{
title: '支付方式',
@@ -120,7 +121,7 @@ export const columns: VxeGridProps['columns'] = [
return renderDict(row.paymentMethod, 'pro_payment_method');
},
},
minWidth: '120'
minWidth: '120',
},
{
title: '开票状态',
@@ -130,7 +131,7 @@ export const columns: VxeGridProps['columns'] = [
return renderDict(row.invoiceStatus, 'pro_invoice_status');
},
},
minWidth: '120'
minWidth: '120',
},
{
title: '发票类型',
@@ -140,7 +141,7 @@ export const columns: VxeGridProps['columns'] = [
return renderDict(row.invoiceType, 'pro_invoice_type');
},
},
minWidth: '120'
minWidth: '120',
},
{
title: '收费状态',
@@ -150,12 +151,12 @@ export const columns: VxeGridProps['columns'] = [
return renderDict(row.chargeStatus, 'pro_charging_status');
},
},
minWidth: '120'
minWidth: '120',
},
{
title: '创建时间',
field: 'createTime',
minWidth: '120'
minWidth: '120',
},
{
field: 'action',
@@ -203,7 +204,24 @@ export const modalSchema: FormSchemaGetter = () => [
{
label: '租赁人',
fieldName: 'userName',
component: "Select",
component: 'Select',
rules: 'selectRequired',
},
{
component: 'ApiSelect',
fieldName: 'unitId',
label: '租赁单位',
componentProps: {
api: getUnitList,
resultField: 'data',
labelField: 'label',
valueField: 'value',
immediate: true,
debounceTime: 500,
allowClear: true,
placeholder: '请选择租赁单位',
filterOption: true,
},
rules: 'selectRequired',
},
{
@@ -211,27 +229,27 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'rent',
component: 'InputNumber',
rules: 'required',
componentProps:{
componentProps: {
precision: 2,
}
},
},
{
label: '押金',
fieldName: 'deposit',
component: 'InputNumber',
rules: 'required',
componentProps:{
componentProps: {
precision: 2,
}
},
},
{
label: '违约金',
fieldName: 'penalty',
component: 'InputNumber',
rules: 'required',
componentProps:{
componentProps: {
precision: 2,
}
},
},
// {
// label: '总金额',
@@ -287,3 +305,21 @@ export const modalSchema: FormSchemaGetter = () => [
rules: 'required',
},
];
export async function getUnitList(): Promise<
{ value: number; label: string }[]
> {
const queryParam = {
pageNum: 1,
pageSize: 1000,
};
const res = await resident_unitList(queryParam);
const data: { value: number; label: string }[] = [];
res.rows.forEach((r: any) => {
data.push({
value: r.id,
label: r.name,
});
});
return data;
}

73
apps/web-antd/src/views/property/greenPlantRentalManagement/chargeManagement/orderCharge-detail.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import type {orderChargeDetailForm} from '#/api/property/chargeManagement/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import type { orderChargeDetailForm } from '#/api/property/chargeManagement/model';
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {orderChargeInfo} from '#/api/property/chargeManagement';
import {renderDict} from "#/utils/render";
import { orderChargeInfo } from '#/api/property/chargeManagement';
import { renderDict } from '#/utils/render';
dayjs.extend(duration);
dayjs.extend(relativeTime);
@@ -25,7 +25,7 @@ async function handleOpenChange(open: boolean) {
return null;
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
const { id } = modalApi.getData() as { id: number | string };
const response = await orderChargeInfo(id);
orderChargeDetail.value = response;
modalApi.modalLoading(false);
@@ -33,8 +33,19 @@ async function handleOpenChange(open: boolean) {
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="查看收费" class="w-[70%]">
<Descriptions v-if="orderChargeDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
<BasicModal
:footer="false"
:fullscreen-button="false"
title="查看收费"
class="w-[70%]"
>
<Descriptions
v-if="orderChargeDetail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '100px' }"
>
<DescriptionsItem label="订单号">
{{ orderChargeDetail.orderId }}
</DescriptionsItem>
@@ -42,7 +53,10 @@ async function handleOpenChange(open: boolean) {
{{ orderChargeDetail.rentalOrder.contractCode }}
</DescriptionsItem>
<DescriptionsItem label="租赁人">
{{ orderChargeDetail.userName}}
{{ orderChargeDetail.userName }}
</DescriptionsItem>
<DescriptionsItem label="租赁单位">
{{ orderChargeDetail.unitName }}
</DescriptionsItem>
<DescriptionsItem label="租金">
{{ orderChargeDetail.rent }}
@@ -53,32 +67,53 @@ async function handleOpenChange(open: boolean) {
<DescriptionsItem label="违约金">
{{ orderChargeDetail.penalty }}
</DescriptionsItem>
<DescriptionsItem label="开票状态" v-if="orderChargeDetail.invoiceStatus!=null">
<DescriptionsItem
label="开票状态"
v-if="orderChargeDetail.invoiceStatus != null"
>
<component
:is="renderDict(orderChargeDetail.invoiceStatus,'pro_invoice_status')"
:is="
renderDict(orderChargeDetail.invoiceStatus, 'pro_invoice_status')
"
/>
</DescriptionsItem>
<DescriptionsItem label="发票类型" v-if="orderChargeDetail.invoiceType!=null">
<DescriptionsItem
label="发票类型"
v-if="orderChargeDetail.invoiceType != null"
>
<component
:is="renderDict(orderChargeDetail.invoiceType,'pro_invoice_type')"
:is="renderDict(orderChargeDetail.invoiceType, 'pro_invoice_type')"
/>
</DescriptionsItem>
<DescriptionsItem label="收费状态" v-if="orderChargeDetail.chargeStatus!=null">
<DescriptionsItem
label="收费状态"
v-if="orderChargeDetail.chargeStatus != null"
>
<component
:is="renderDict(orderChargeDetail.chargeStatus,'pro_charging_status')"
:is="
renderDict(orderChargeDetail.chargeStatus, 'pro_charging_status')
"
/>
</DescriptionsItem>
<DescriptionsItem label="产品编号">
{{ orderChargeDetail.rentalOrder.productList.map(item => item.plantCode).join('、') }}
{{
orderChargeDetail.rentalOrder.productList
.map((item) => item.plantCode)
.join('、')
}}
</DescriptionsItem>
<DescriptionsItem label="购买植物">
{{ orderChargeDetail.rentalOrder.productList.map(item => item.plantName).join('、') }}
{{
orderChargeDetail.rentalOrder.productList
.map((item) => item.plantName)
.join('、')
}}
</DescriptionsItem>
<DescriptionsItem label="总金额">
{{ orderChargeDetail.totalAmount }}
</DescriptionsItem>
<DescriptionsItem label="产品图片">
<img :src="orderChargeDetail.createTime" alt="">
<img :src="orderChargeDetail.createTime" alt="" />
</DescriptionsItem>
</Descriptions>
</BasicModal>

106
apps/web-antd/src/views/property/greenPlantRentalManagement/orderManagement/order-detail.vue
View File

@@ -1,24 +1,23 @@
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import {ref, shallowRef} from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";
import type {RentalOrderVO} from "#/api/property/rentalOrder/model";
import {rentalOrderInfo} from "#/api/property/rentalOrder";
import {rentalColumns} from "./data";
import {Table} from "ant-design-vue";
import { renderDict } from '#/utils/render';
import type { RentalOrderVO } from '#/api/property/rentalOrder/model';
import { rentalOrderInfo } from '#/api/property/rentalOrder';
import { rentalColumns } from './data';
import { Table } from 'ant-design-vue';
dayjs.extend(duration);
dayjs.extend(relativeTime);
const planProducts=ref([]);
const planProducts = ref([]);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
@@ -27,7 +26,7 @@ const [BasicModal, modalApi] = useVbenModal({
},
});
const orderDetail = shallowRef<null |RentalOrderVO>(null);
const orderDetail = shallowRef<null | RentalOrderVO>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
@@ -35,73 +34,90 @@ async function handleOpenChange(open: boolean) {
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
const { id } = modalApi.getData() as { id: number | string };
// 赋值
orderDetail.value = await rentalOrderInfo(id);
planProducts.value=orderDetail.value?.productList
planProducts.value = orderDetail.value?.productList;
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="租赁订单信息" class="w-[70%]">
<Descriptions v-if="orderDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
<BasicModal
:footer="false"
:fullscreen-button="false"
title="租赁订单信息"
class="w-[70%]"
>
<Descriptions
v-if="orderDetail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '100px' }"
>
<DescriptionsItem label="订单号">
{{ orderDetail.orderNo }}
</DescriptionsItem>
<DescriptionsItem label="客户名称">
{{ orderDetail.customerName }}
</DescriptionsItem>
<DescriptionsItem label="客户类型" v-if="orderDetail.type!=null">
<component
:is="renderDict(orderDetail.customerType,'wy_khlx')"
/>
<DescriptionsItem label="客户类型" v-if="orderDetail.type != null">
<component :is="renderDict(orderDetail.customerType, 'wy_khlx')" />
</DescriptionsItem>
<DescriptionsItem label="租赁单位">
{{ orderDetail.unitName }}
</DescriptionsItem>
<DescriptionsItem label="租赁周期">
{{ orderDetail.rentalPeriod}}
{{ orderDetail.rentalPeriod }}
</DescriptionsItem>
<DescriptionsItem label="租赁时间" :span="2">
{{dayjs(orderDetail.startTime).format("YYYY-MM-DD")+' 至 '+dayjs(orderDetail.endTime).format("YYYY-MM-DD")}}
{{
dayjs(orderDetail.startTime).format('YYYY-MM-DD') +
' 至 ' +
dayjs(orderDetail.endTime).format('YYYY-MM-DD')
}}
</DescriptionsItem>
<DescriptionsItem label="总金额">
{{ orderDetail.totalAmount +"元"}}
{{ orderDetail.totalAmount + '元' }}
</DescriptionsItem>
<DescriptionsItem label="租赁方式">
<component
:is="renderDict(orderDetail.rentalType,'wy_zlfs')"
/>
<component :is="renderDict(orderDetail.rentalType, 'wy_zlfs')" />
</DescriptionsItem>
<!-- <DescriptionsItem label="支付状态">-->
<!-- <component-->
<!-- :is="renderDict(orderDetail.paymentStatus,'pro_charging_status')"-->
<!-- />-->
<!-- </DescriptionsItem>-->
<!-- <DescriptionsItem label="支付状态">-->
<!-- <component-->
<!-- :is="renderDict(orderDetail.paymentStatus,'pro_charging_status')"-->
<!-- />-->
<!-- </DescriptionsItem>-->
<DescriptionsItem label="是否续租">
<component
:is="renderDict(orderDetail.isRelet,'wy_sf')"
/>
<component :is="renderDict(orderDetail.isRelet, 'wy_sf')" />
</DescriptionsItem>
<DescriptionsItem label="合同状态">
<component
:is="renderDict(orderDetail.contractStatus,'wy_htzt')"
/>
<component :is="renderDict(orderDetail.contractStatus, 'wy_htzt')" />
</DescriptionsItem>
<DescriptionsItem label="合同编号" v-if="orderDetail.contractStatus!='1'">
<DescriptionsItem
label="合同编号"
v-if="orderDetail.contractStatus != '1'"
>
{{ orderDetail.contractCode ?? '无' }}
</DescriptionsItem>
<DescriptionsItem label="签署时间" v-if="orderDetail.contractStatus!='1'">
<DescriptionsItem
label="签署时间"
v-if="orderDetail.contractStatus != '1'"
>
{{ orderDetail.signTime ?? '无' }}
</DescriptionsItem>
</Descriptions>
<div v-if="planProducts.length">
<div style="margin: 10px 0;font-weight: 500">
订单产品详情
</div>
<Table :dataSource="planProducts" :columns="rentalColumns" :pagination="false"
bordered size="small">
<div style="margin: 10px 0; font-weight: 500">订单产品详情</div>
<Table
:dataSource="planProducts"
:columns="rentalColumns"
:pagination="false"
bordered
size="small"
>
<template #bodyCell="{ column, record, index }">
<template v-if="column.field === 'id'">
{{ index + 1 }}

33
apps/web-antd/src/views/property/greenPlantRentalManagement/orderManagement/rentalOrder-modal.vue
View File

@@ -20,6 +20,7 @@ import type {PropertyVO} from "#/api/property/productManagement/model";
import type {RentalPlanVO} from "#/api/property/rentalPlan/model";
import {planInfoColumns} from './data';
import {Table} from "ant-design-vue";
import { resident_unitList } from '#/api/property/resident/unit'
const emit = defineEmits<{ reload: [] }>();
@@ -57,6 +58,23 @@ const modalSchema = [
options: getDictOptions('wy_khlx')
},
rules: 'selectRequired',
},
{
component: 'ApiSelect',
fieldName: 'unitId',
label: '租赁单位',
componentProps: {
api: getUnitList,
resultField: 'data',
labelField: 'label',
valueField: 'value',
immediate: true,
debounceTime: 500,
allowClear: true,
placeholder: '请选择租赁单位',
filterOption: true,
},
rules:'selectRequired',
},
{
label: '租赁周期',
@@ -300,7 +318,22 @@ const [BasicModal, modalApi] = useVbenModal({
modalApi.modalLoading(false);
},
});
async function getUnitList(){
const queryParam = {
pageNum: 1,
pageSize: 1000,
}
const res = await resident_unitList(queryParam)
const data: { value: number; label: string }[] = []
res.rows.forEach((r: any) => {
data.push({
value: r.id,
label: r.name,
})
})
return data;
}
async function handleConfirm() {
try {
modalApi.lock(true);

141
apps/web-antd/src/views/property/resident/unit/components/room-tree.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import { Empty, InputSearch, Skeleton, Tree } from 'ant-design-vue';
import {communityTree} from "#/api/property/community";
import type {CommunityVO} from "#/api/property/community/model";
defineOptions({ inheritAttrs: false });
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
const emit = defineEmits<{
/**
* 点击刷新按钮的事件
*/
reload: [];
/**
* 点击节点的事件
*/
select: [];
}>();
const selectRoomId = defineModel('selectRoomId', {
type: Array as PropType<string[]>,
default: () => [],
});
const checkedRoomId = defineModel('checkedRoomId', {
type: Array as PropType<string[]>,
default: () => [],
});
const searchValue = defineModel('searchValue', {
type: String,
default: '',
});
const checkable = defineModel('checkable', {
type: Boolean,
default: false,
});
/** 房间数据源 */
type RoomTreeArray = CommunityVO[];
const roomTreeArray = ref<RoomTreeArray>([]);
/** 骨架屏加载 */
const showTreeSkeleton = ref<boolean>(true);
async function loadTree() {
showTreeSkeleton.value = true;
searchValue.value = '';
selectRoomId.value = [];
checkedRoomId.value = [];
roomTreeArray.value = await communityTree(4);
showTreeSkeleton.value = false;
}
async function handleReload() {
await loadTree();
emit('reload');
}
function selectStyle(id:string){
if(selectRoomId.value.includes(id)){
return {
backgroundColor: '#e6f4ff',
padding:'0 10px',
borderRadius:'4px',
fontWeight:'bold'
}
}
return {}
}
onMounted(loadTree);
</script>
<template>
<div :class="$attrs.class">
<Skeleton
:loading="showTreeSkeleton"
:paragraph="{ rows: 8 }"
active
class="p-[8px]"
>
<div
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
>
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
<div
v-if="showSearch"
class="bg-background z-100 sticky left-0 top-0 p-[8px]"
>
<InputSearch
v-model:value="searchValue"
:placeholder="$t('pages.common.search')"
size="small"
>
<template #enterButton>
<a-button @click="handleReload">
<SyncOutlined class="text-primary" />
</a-button>
</template>
</InputSearch>
</div>
<div class="h-full overflow-x-hidden px-[8px]">
<Tree
:checkable="checkable"
:selectable="false"
v-bind="$attrs"
v-if="roomTreeArray.length > 0"
v-model:checked-keys="checkedRoomId"
:class="$attrs.class"
:field-names="{ title: 'label', key: 'id' }"
:tree-data="roomTreeArray"
:virtual="false"
default-expand-all
>
<template #title="{ label,id }">
<span v-if="label.indexOf(searchValue) > -1" :style="selectStyle(id)">
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
label.substring(
label.indexOf(searchValue) + searchValue.length,
)
}}
</span>
<span v-else :style="selectStyle(id)">{{ label}}</span>
</template>
</Tree>
<!-- 仅本人数据权限 可以考虑直接不显示 -->
<div v-else class="mt-5">
<Empty
:image="Empty.PRESENTED_IMAGE_SIMPLE"
description="无部门数据"
/>
</div>
</div>
</div>
</Skeleton>
</div>
</template>

37
apps/web-antd/src/views/property/resident/unit/data.ts
View File

@@ -47,12 +47,12 @@ export const columns: VxeGridProps['columns'] = [
return row.id
}
},
width: 100
width: 180
},
{
title: '单位名称',
field: 'name',
width: 100
minWidth: 180
},
{
title: '单位类型',
@@ -72,7 +72,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '联系电话',
field: 'phone',
width: 100
width: 120
},
// {
// title: '入驻位置',
@@ -82,7 +82,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '入驻时间',
field: 'time',
width: 100,
width: 180,
},
{
title: '状态',
@@ -98,19 +98,22 @@ export const columns: VxeGridProps['columns'] = [
{
title: '备注',
field: 'remark',
width: 100,
width: 180,
slots: { default: ({ row }) => {
return row.remark || '-'
}, },
},
{
title: '创建时间',
field: 'createTime',
width: 100,
width: 180,
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
minWidth: 180,
width: 180,
},
]
@@ -155,13 +158,13 @@ export const modalSchema: FormSchemaGetter = () => [
z.number().int().min(1000000000).max(19999999999, { message: '手机号格式错误' })
]).transform(val => val.toString()),
},
{
label: '入驻位置',
fieldName: 'locations',
component: 'TreeSelect',
rules: 'selectRequired',
formItemClass: 'col-span-2'
},
// {
// label: '入驻位置',
// fieldName: 'locations',
// component: 'TreeSelect',
// rules: 'selectRequired',
// formItemClass: 'col-span-2'
// },
{
label: '入驻时间',
fieldName: 'time',
@@ -173,11 +176,6 @@ export const modalSchema: FormSchemaGetter = () => [
},
rules: 'required',
},
{
label: '',
fieldName: 'Placeholder',
component: ''
},
{
label: '授权期限',
fieldName: 'authTime',
@@ -188,6 +186,7 @@ export const modalSchema: FormSchemaGetter = () => [
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
formItemClass: 'col-span-1'
},
{
label: '通行权限组',

26
apps/web-antd/src/views/property/resident/unit/unit-detail.vue
View File

@@ -12,6 +12,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
import {resident_unitInfo, authGroupList} from '#/api/property/resident/unit';
import {renderDict} from "#/utils/render";
import RoomTree from "./components/room-tree.vue";
dayjs.extend(duration);
dayjs.extend(relativeTime);
@@ -39,15 +40,27 @@ async function handleOpenChange(open: boolean) {
authGroupName.value = authGroup.find(item => item.id === authGroupId)?.name;
// 赋值
unitDetail.value = response;
if(response.location){
selectRoomId.value=response.location.split(',');
}
modalApi.modalLoading(false);
}
const selectRoomId = ref<string[]>([]);
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="入驻单位信息" class="w-[70%]">
<Descriptions v-if="unitDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
<div class="flex gap-[8px]">
<div class="w-[260px]">
<RoomTree
class="max-h-[calc(100vh-40vh)]"
v-model:select-room-id="selectRoomId"
/>
</div>
<Descriptions class="flex-1" v-if="unitDetail" size="middle" :column="1" bordered :labelStyle="{width:'120px'}">
<DescriptionsItem label="单位编号">
{{ unitDetail.id }}
</DescriptionsItem>
@@ -62,11 +75,11 @@ async function handleOpenChange(open: boolean) {
<DescriptionsItem label="联系人">
{{ unitDetail.contactPerson +'-'+unitDetail.phone}}
</DescriptionsItem>
<DescriptionsItem label="入驻位置" :span="2">
{{ unitDetail.locationDetail }}
</DescriptionsItem>
<DescriptionsItem label="入驻面积(㎡)" :span="2">
{{ unitDetail.area }}
<!-- <DescriptionsItem label="入驻位置" >-->
<!-- {{ unitDetail.locationDetail }}-->
<!-- </DescriptionsItem>-->
<DescriptionsItem label="入驻面积">
<span v-if="unitDetail.area">{{ unitDetail.area }}（㎡）</span>
</DescriptionsItem>
<DescriptionsItem label="入驻时间">
{{ unitDetail.time }}
@@ -89,5 +102,6 @@ async function handleOpenChange(open: boolean) {
{{ unitDetail.remark ?? '-' }}
</DescriptionsItem>
</Descriptions>
</div>
</BasicModal>
</template>

90
apps/web-antd/src/views/property/resident/unit/unit-modal.vue
View File

@@ -1,20 +1,21 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import {computed, ref} from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep, handleNode } from '@vben/utils';
import {useVbenModal} from '@vben/common-ui';
import {$t} from '@vben/locales';
import {cloneDeep} from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import {useVbenForm} from '#/adapter/form';
import {
resident_unitAdd,
resident_unitInfo,
resident_unitUpdate,
} from '#/api/property/resident/unit';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
import { modalSchema } from './data';
import { communityTree } from '#/api/property/community';
import {modalSchema} from './data';
import RoomTree from "./components/room-tree.vue";
import {message} from "ant-design-vue";
const emit = defineEmits<{ reload: [] }>();
@@ -26,7 +27,7 @@ const title = computed(() => {
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-1',
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 100,
// 通用配置项 会影响到所有表单项
@@ -39,7 +40,7 @@ const [BasicForm, formApi] = useVbenForm({
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
@@ -59,16 +60,16 @@ const [BasicModal, modalApi] = useVbenModal({
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
const {id} = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
await initLocationOptions();
if (isUpdate.value && id) {
const record = await resident_unitInfo(id);
let roomIds=record.location.split(',')
await formApi.setValues({...record,
authTime:[record.authBegDate,record.authEndDate],
locations:roomIds
let roomIds = record.location.split(',')
await formApi.setValues({
...record,
authTime: [record.authBegDate, record.authEndDate],
});
checkedRoomId.value = roomIds
}
await markInitialized();
@@ -79,7 +80,11 @@ const [BasicModal, modalApi] = useVbenModal({
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
const {valid} = await formApi.validate();
if (!checkedRoomId.value.length) {
message.error('请选择入驻位置');
return;
}
if (!valid) {
return;
}
@@ -88,7 +93,7 @@ async function handleConfirm() {
data.authBegDate = data.authTime[0];
data.authEndDate = data.authTime[1];
data.location=data.locations.join(',')
data.location = checkedRoomId.value.join(',')
await (isUpdate.value ? resident_unitUpdate(data) : resident_unitAdd(data));
resetInitialized();
emit('reload');
@@ -99,51 +104,26 @@ async function handleConfirm() {
modalApi.lock(false);
}
}
/**
* 入驻位置数据
*/
async function initLocationOptions() {
const locationList = await communityTree(4);
const splitStr = '/';
handleNode(locationList, 'label', splitStr, function (node: any) {
if (node.level != 4) {
node.disabled = true;
}
});
formApi.updateSchema([
{
componentProps: () => ({
class: 'w-full',
fieldNames: {
key: 'id',
label: 'label',
value: 'code',
children: 'children',
},
placeholder: '请选择入驻位置',
showSearch: true,
treeData: locationList,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 筛选的字段
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
multiple:true
}),
fieldName: 'locations',
},
]);
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
const checkedRoomId = ref<string[]>([]);
</script>
<template>
<BasicModal :title="title">
<BasicForm> </BasicForm>
<div class="flex gap-[8px]">
<div class="w-[260px]">
<RoomTree
:checkable="true"
class="max-h-[calc(100vh-45vh)]"
v-model:checked-room-id="checkedRoomId"
/>
</div>
<BasicForm class="flex-1"></BasicForm>
</div>
</BasicModal>
</template>