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

feat: 车辆收费、水电抄表、排版管理页面

Browse Source
This commit is contained in:
fyy
2025-07-19 17:26:49 +08:00
parent 5be03ab8c5
commit ad2c9aed05
15 changed files with 1483 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web-antd/src/views/property/costManagement/carCharge/carCharge-add-modal.vue
View File

@@ -3,13 +3,12 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { addModalSchema } from './data';
import { communityTree } from '#/api/property/community';
const emit = defineEmits<{ reload: [] }>();
@@ -17,7 +16,7 @@ const emit = defineEmits<{ reload: [] }>();
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
formItemClass: 'col-span-1',
// 默认label宽度 px
labelWidth: 140,
// 通用配置项 会影响到所有表单项
@@ -39,7 +38,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[550px]',
class: 'w-[75%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
@@ -48,9 +47,11 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
await markInitialized();
modalApi.modalLoading(false);
@@ -81,6 +82,42 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(4);
// 选中后显示在输入框的值 即父节点 / 子节点
// addFullName(areaList, 'areaName', ' / ');
const splitStr = '/';
handleNode(areaList, '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',
},
getPopupContainer,
placeholder: '请选择楼层',
showSearch: true,
treeData: areaList,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 筛选的字段
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
}),
fieldName: 'floorId',
},
]);
}
</script>
<template>
@@ -88,4 +125,15 @@ async function handleClosed() {
<BasicForm />
</BasicModal>
</template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgba(0, 0, 0, 0.65) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
}
</style>

61
apps/web-antd/src/views/property/costManagement/carCharge/carCharge-detail-modal.vue
View File

@@ -3,20 +3,16 @@ 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 { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
import { communityTree } from '#/api/property/community';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
@@ -52,11 +48,11 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await carChargeInfo(id);
await formApi.setValues(record);
@@ -91,11 +87,58 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(4);
// 选中后显示在输入框的值 即父节点 / 子节点
// addFullName(areaList, 'areaName', ' / ');
const splitStr = '/';
handleNode(areaList, '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',
},
getPopupContainer,
placeholder: '请选择楼层',
showSearch: true,
treeData: areaList,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 筛选的字段
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
}),
fieldName: 'floorId',
},
]);
}
</script>
<template>
<BasicModal :title="title">
<BasicModal title="详情">
<BasicForm />
</BasicModal>
</template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgba(0, 0, 0, 0.65) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
}
</style>

123
apps/web-antd/src/views/property/costManagement/carCharge/carCharge-pay-modal.vue
View File

@@ -3,22 +3,79 @@ 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 { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
import { payModalSchema } from './data';
import { communityTree } from '#/api/property/community';
export interface CarChargeVO {
/**
* 主键
*/
id: string | number;
/**
* 车牌号
*/
carNumber: string;
/**
* 业主
*/
personId: string | number;
/**
* 楼层
*/
floorId: string | number;
/**
* 车位
*/
location: string;
/**
* 状态
*/
state: string;
/**
* 收费项目
*/
costItemsId: string | number;
/**
* 计费开始时间
*/
starTime: string;
/**
* 计费结束时间
*/
endTime: string;
/**
* 说明
*/
remark: string;
/**
* 搜索值
*/
searchValue: string;
}
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const record = ref<CarChargeVO>()
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-1',
// 默认label宽度 px
labelWidth: 1400,
labelWidth: 140,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
@@ -47,9 +104,16 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
isUpdate.value = !!id;
if (isUpdate.value && id) {
record.value = await carChargeInfo(id);
await formApi.setValues(record);
}
await markInitialized();
await markInitialized();
modalApi.modalLoading(false);
@@ -80,6 +144,42 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(4);
// 选中后显示在输入框的值 即父节点 / 子节点
// addFullName(areaList, 'areaName', ' / ');
const splitStr = '/';
handleNode(areaList, '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',
},
getPopupContainer,
placeholder: '请选择楼层',
showSearch: true,
treeData: areaList,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 筛选的字段
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
}),
fieldName: 'floorId',
},
]);
}
</script>
<template>
@@ -87,3 +187,14 @@ async function handleClosed() {
<BasicForm />
</BasicModal>
</template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgba(0, 0, 0, 0.65) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
}
</style>

240
apps/web-antd/src/views/property/costManagement/carCharge/data.ts
View File

@@ -3,6 +3,11 @@ 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 { personList } from '#/api/property/resident/person';
import { communityTree } from '#/api/property/community';
import { handleNode } from '@vben/utils';
export const querySchema: FormSchemaGetter = () => [
{
@@ -51,16 +56,16 @@ export const columns: VxeGridProps['columns'] = [
title: '业主',
field: 'personId',
},
{
title: '状态',
field: 'state',
slots: {
default: ({ row }) => {
// 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
return renderDict(row.state, 'wy_cszt');
},
},
},
// {
// title: '状态',
// field: 'state',
// slots: {
// default: ({ row }) => {
// // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
// return renderDict(row.state, 'wy_cszt');
// },
// },
// },
{
title: '收费项目',
field: 'costItemsId',
@@ -76,6 +81,15 @@ export const columns: VxeGridProps['columns'] = [
{
title: '说明',
field: 'remark',
},
{
title: '状态',
field: 'charge_status',
slots:{
default:({row}) => {
return renderDict(row.charge_status, 'wy_fyshzt')
}
}
},
{
field: 'action',
@@ -101,36 +115,70 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'carNumber',
component: 'Input',
rules: 'required',
disabled:true,
},
{
label: '业主',
{
label: '业主',//
fieldName: 'personId',
component: 'Input',
component: 'ApiSelect',
rules:'required',
componentProps:{
api: async () => {
const rows = await personList({pageSize:1000000000,pageNum:1});
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField:'id'
},
disabled:true,
},
{
label: '楼层',
fieldName: 'floorId',
component: 'Input',
rules: 'required',
component: 'TreeSelect',
rules:'required',
disabled:true,
},
{
label: '车位',
fieldName: 'location',
component: 'Input',
disabled:true,
},
{
label: '状态',
fieldName: 'state',
// {
// label: '状态',
// fieldName: 'state',
// component: 'Select',
// componentProps: {
// // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
// options: getDictOptions('wy_cszt'),
// },
// },
{
label: '费用类型',//一个费用下有多个收费项目
fieldName: 'costType',
component: 'Select',
componentProps: {
// 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
options: getDictOptions('wy_cszt'),
componentProps:{
options:getDictOptions('pro_expense_type'),
},
disabled:true,
},
{
label: '收费项目',
label: '收费项目',//一个收费项目对应一个费用类型
fieldName: 'costItemsId',
component: 'Input',
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
return rows;
},
resultField: 'rows',
labelField: 'chargeItem',
valueField: 'id',
},
rules: 'required',
disabled:true,
},
{
label: '计费开始时间',
@@ -141,6 +189,7 @@ export const modalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
},
{
label: '计费结束时间',
@@ -151,16 +200,13 @@ export const modalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
},
{
label: '说明',
fieldName: 'remark',
component: 'Input',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
disabled:true,
},
];
//创建
@@ -180,15 +226,55 @@ export const addModalSchema: FormSchemaGetter = () => [
component: 'Input',
rules: 'required',
},
// {
// label: '费用类型',//一个费用下有对各费用项目
// fieldName: 'personId',
// component: 'Input',
// },
{
label: '收费项目',//一个费用收费项目对应一个费用类型
fieldName: 'costItemsId',
label: '业主',//
fieldName: 'personId',
component: 'ApiSelect',
disabled:false,
rules:'required',
componentProps:{
api: async () => {
const rows = await personList({pageSize:1000000000,pageNum:1});
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField:'id'
}
},
{
label: '楼层',
fieldName: 'floorId',
component: 'TreeSelect',
rules:'required',
},
{
label: '车位',
fieldName: 'location',
component: 'Input',
},
{
label: '费用类型',//一个费用下有多个收费项目
fieldName: 'costType',
component: 'Select',
componentProps:{
options:getDictOptions('pro_expense_type'),
},
disabled:true,
},
{
label: '收费项目',//一个收费项目对应一个费用类型
fieldName: 'costItemsId',
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
return rows;
},
resultField: 'rows',
labelField: 'chargeItem',
valueField: 'id',
},
rules: 'required',
},
{
@@ -235,17 +321,66 @@ export const payModalSchema: FormSchemaGetter = () => [
fieldName: 'carNumber',
component: 'Input',
rules: 'required',
disabled:true,
},
{
label: '业主',//
fieldName: 'personId',
component: 'ApiSelect',
rules:'required',
componentProps:{
api: async () => {
const rows = await personList({pageSize:1000000000,pageNum:1});
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField:'id'
},
disabled:true,
},
// {
// label: '费用类型',//一个费用下有对各费用项目
// fieldName: 'personId',
// component: 'Input',
// },
{
label: '收费项目',//一个费用收费项目对应一个费用类型
fieldName: 'costItemsId',
label: '楼层',
fieldName: 'floorId',
component: 'TreeSelect',
rules:'required',
disabled:true,
},
{
label: '车位',
fieldName: 'location',
component: 'Input',
disabled:true,
},
{
label: '费用类型',//一个费用下有多个收费项目
fieldName: 'costType',
component: 'Select',
componentProps:{
options:getDictOptions('pro_expense_type'),
},
disabled:true,
},
{
label: '收费项目',//一个收费项目对应一个费用类型
fieldName: 'costItemsId',
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
return rows;
},
resultField: 'rows',
labelField: 'chargeItem',
valueField: 'id',
},
rules: 'required',
disabled:true,
},
{
label: '计费开始时间',
@@ -257,6 +392,8 @@ export const payModalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
},
{
label: '计费结束时间',
@@ -268,26 +405,35 @@ export const payModalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
},
{
label: '说明',
fieldName: 'remark',
component: 'Input',
disabled:true,
},
{
label: '支付方式',
fieldName: 'carNumber',
component: 'Input',
fieldName: 'payType',
component: 'Select',
componentProps:{
options:getDictOptions('wy_zffs'),
},
rules: 'required',
},
{
label: '缴费周期',
fieldName: 'personId',
component: 'Input',
fieldName: 'chargeCycle',
component: 'Select',
componentProps:{
options:getDictOptions('wy_jfzq'),
},
},
{
label: '实收金额',
fieldName: 'costItemsId',
fieldName: 'cost',
component: 'Input',
},
{