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',
},
{

230
apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
View File

@@ -1,35 +1,158 @@
<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 { costMeterWaterAdd, costMeterWaterInfo, costMeterWaterUpdate } from '#/api/property/costMeterWater';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
import { communityTree } from '#/api/property/community';
import { watch } from 'vue';
import { costItemSettingList } from '#/api/property/costManagement/costItemSetting';
import { meterReadingTypeList } from '#/api/property/costManagement/meterReadingType';
import { getDictOptions } from '#/utils/dict';
const emit = defineEmits<{ reload: [] }>();
const costItemsOptions = ref<any>([]);
const meterTypeOptions = ref<any>([]);
const isMeterType = ref(false);
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const schema =[
{
label: '抄表地址',
fieldName: 'location',
component: 'TreeSelect',
rules: 'required',
},
{
label: '费用类型',
fieldName: 'costType',
component: 'Select',
rules: 'required',
componentProps: {
options: getDictOptions('wy_cbfylx'),
onChange: async (value:any) => {
// 清空依赖字段
await formApi.setValues({
costItemsId: '',
meterTypeId: '',
});
// 请求并更新下拉
if (!value) {
costItemsOptions.value = [];
meterTypeOptions.value = [];
isMeterType.value = false
} else {
isMeterType.value = true
const costItemsRes = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: value });
costItemsOptions.value = (costItemsRes?.rows || []).map(item => ({
label: item.chargeItem,
value: item.id,
}));
const meterTypeRes = await meterReadingTypeList({ pageSize: 1000000000, pageNum: 1, costType: value == '5' ? 0 : 1 });
meterTypeOptions.value = (meterTypeRes?.rows || []).map(item => ({
label: item.name,
value: item.id,
}));
}
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
},
},
{
fieldName: 'meterTypeId',
componentProps: {
options: meterTypeOptions.value,
disabled: !isMeterType.value,
},
},
]);
}
}
},
{
label: '收费项目',
fieldName: 'costItemsId',
component: 'Select',
rules: 'required',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
}
},
{
label: '抄表类型',
fieldName: 'meterTypeId',
component: 'Select',
rules: 'required',
componentProps: {
options: meterTypeOptions.value,
disabled: !isMeterType.value,
}
},
{
label: '上月止度',
fieldName: 'preDegrees',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '本期度数',
fieldName: 'curDegrees',
component: 'Input',
rules: 'required',
},
{
label: '上期读表时间',
fieldName: 'preReadingTime',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
disabled:true
},
{
label: '本期读表时间',
fieldName: 'curReadingTime',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
},
{
label: '说明',
fieldName: 'remark',
component: 'Input',
}
];
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 80,
labelWidth: 140,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
schema: schema,
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
@@ -52,6 +175,8 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
isMeterType.value = false
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
@@ -78,6 +203,27 @@ async function handleConfirm() {
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
resetInitialized();
//必须要手动清空，不然ref会保留值
costItemsOptions.value = [];
meterTypeOptions.value = [];
isMeterType.value = false
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
},
},
{
fieldName: 'meterTypeId',
componentProps: {
options: meterTypeOptions.value,
disabled: !isMeterType.value,
},
},
]);
emit('reload');
modalApi.close();
} catch (error) {
@@ -89,8 +235,65 @@ async function handleConfirm() {
async function handleClosed() {
await formApi.resetForm();
await formApi.setValues({})
costItemsOptions.value = [];
meterTypeOptions.value = [];
isMeterType.value = false
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
},
},
{
fieldName: 'meterTypeId',
componentProps: {
options: meterTypeOptions.value,
disabled: !isMeterType.value,
},
},
]);
resetInitialized();
}
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(5);
// 选中后显示在输入框的值 即父节点 / 子节点
// addFullName(areaList, 'areaName', ' / ');
const splitStr = '/';
handleNode(areaList, 'label', splitStr, function (node: any) {
if (node.level != 5) {
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: 'location',
},
]);
}
</script>
<template>
@@ -98,4 +301,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>

139
apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
View File

@@ -1,53 +1,10 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { costItemSettingList } from '#/api/property/costManagement/costItemSetting';
import {meterReadingTypeList} from '#/api/property/costManagement/meterReadingType';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'itemId',
label: '费用类型id',
},
{
component: 'Input',
fieldName: 'meterTypeId',
label: '抄表类型id',
},
{
component: 'Input',
fieldName: 'objName',
label: '对象名称',
},
{
component: 'Input',
fieldName: 'curDegrees',
label: '本期度数',
},
{
component: 'Input',
fieldName: 'preDegrees',
label: '上期度数',
},
{
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'preReadingTime',
label: '上期读表时间',
},
{
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'curReadingTime',
label: '本期读表时间',
},
{
component: 'Input',
fieldName: 'searchValue',
@@ -60,21 +17,22 @@ export const querySchema: FormSchemaGetter = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键',
title: '序号',
field: 'id',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '费用类型id',
title: '费用类型',
field: 'itemId',
},
{
title: '抄表类型id',
title: '抄表类型',
field: 'meterTypeId',
},
{
title: '对象名称',
field: 'objName',
},
{
title: '本期度数',
field: 'curDegrees',
@@ -95,10 +53,6 @@ export const columns: VxeGridProps['columns'] = [
title: '备注',
field: 'remark',
},
{
title: '搜索值',
field: 'searchValue',
},
{
field: 'action',
fixed: 'right',
@@ -119,22 +73,66 @@ export const modalSchema: FormSchemaGetter = () => [
},
},
{
label: '费用类型id',
fieldName: 'itemId',
component: 'Input',
label: '抄表地址',
fieldName: 'location',
component: 'TreeSelect',
rules: 'required',
},
{
label: '抄表类型id',
label: '费用类型',
fieldName: 'costType',
component: 'Select',
rules: 'required',
componentProps: () => ({
options: getDictOptions('wy_cbfylx'),
}),
},
{
label: '收费项目',
fieldName: 'costItemsId',
component: 'ApiSelect',
rules: 'required',
// componentProps: (values)=>{
// const disabled = values.costType === undefined;
// return {
// api: async ()=>{
// console.log(values);
// const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:values.costType});
// return rows;
// },
// resultField:'rows',
// labelField:'chargeItem',
// valueField: 'id',
// disabled,
// }
// }
},
{
label: '抄表类型',
fieldName: 'meterTypeId',
component: 'Input',
component: 'ApiSelect',
rules: 'required',
// componentProps:(values)=>{
// const disabled = values.costType === undefined;
// return {
// api: async()=>{
// const rows = await meterReadingTypeList({pageSize:1000000000,pageNum:1,costType:values.costType=='5'?0:1});
// return rows;
// },
// resultField:'rows',
// labelField:'name',
// valueField: 'id',
// disabled
// }
// }
},
{
label: '对象名称',
fieldName: 'objName',
{
label: '上期度数',
fieldName: 'preDegrees',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '本期度数',
@@ -142,12 +140,6 @@ export const modalSchema: FormSchemaGetter = () => [
component: 'Input',
rules: 'required',
},
{
label: '上期度数',
fieldName: 'preDegrees',
component: 'Input',
rules: 'required',
},
{
label: '上期读表时间',
fieldName: 'preReadingTime',
@@ -175,9 +167,4 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'remark',
component: 'Textarea',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
},
];