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-21 20:57:15 +08:00
parent bc36b98f9a
commit e229a1ad1c
17 changed files with 1206 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, ref, reactive } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
@@ -8,9 +8,13 @@ import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
import {
useVbenVxeGrid,
type VxeGridProps
} from '#/adapter/vxe-table';
import { modalSchema,attendanceColumns } from './data';
import { Radio, Button,Calendar,DatePicker,Form,Input,Select,FormItem } from 'ant-design-vue';
import unitPersonModal from './unit-person-modal.vue';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
@@ -40,10 +44,12 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
currentGetter: defaultFormValueGetter(formApi),
},
);
const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
connectedComponent: unitPersonModal,
});
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[550px]',
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
@@ -53,7 +59,6 @@ const [BasicModal, modalApi] = useVbenModal({
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
@@ -61,8 +66,7 @@ const [BasicModal, modalApi] = useVbenModal({
const record = await arrangementInfo(id);
await formApi.setValues(record);
}
await markInitialized();
// await markInitialized();
modalApi.modalLoading(false);
},
});
@@ -91,11 +95,159 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
const formModel = reactive({
group: '',
type: '',
dateType: 'long',
dateSingle: null,
dateLong: null,
dateRange: [null, null],
startDate:'',
endDate:''
});
// mock 表格数据
const tableData = ref([
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
{ dept: '', users: [] },
]);
const staticData = [
{ id: 1, dept: 'xx部门', name: '张三' },
{ id: 2, dept: 'yy部门', name: '李四' },
];
const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
const gridOptions: VxeGridProps = {
checkboxConfig: {
// 高亮
highlight: true,
// 翻页时保留选中状态
reserve: true,
// 点击行选中
// trigger: 'row',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
columns: attendanceColumns,
// columns,
// height: 'auto',
keepSource: true,
data:staticData,
pagerConfig: {},
proxyConfig: {
// ajax: {
// query: async ({ page }, formValues = {}) => {
// return await arrangementList({
// pageNum: page.currentPage,
// pageSize: page.pageSize,
// ...formValues,
// });
// },
// },
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'property-arrangement-index',
toolbarConfig: {
// 隐藏"刷新/重置"按钮（对应 redo）
refresh: false,
zoom: false, // 显示全屏
custom: false, // 隐藏列设置
},
};
const [BasicTable, tableApi] = useVbenVxeGrid({
gridOptions,
});
async function handleEdit(row: any){
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: any) {
console.log(12);
}
function handleAdd() {
unitPersonmodalApi.setData({});
unitPersonmodalApi.open();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
<BasicModal :title="title">
<!-- 顶部表单区 -->
<Form :model="formModel" layout="horizontal" class="mb-4">
<div class="grid grid-cols-2 gap-x-8 gap-y-2">
<FormItem label="选择考勤组" required class="mb-0">
<Select v-model:value="formModel.group" placeholder="请选择"/>
</FormItem>
<FormItem label="考勤类型" required class="mb-0">
<Input v-model:value="formModel.type" placeholder="请输入" />
</FormItem>
<FormItem label="排班日期" class="col-span-2 mb-0">
<radio-group v-model:value="formModel.dateType" class="mr-4">
<radio value="single">
<span>
单个日期
<DatePicker/>
</span>
</radio>
<radio value="long">
<span>
从此日起长期有效
<DatePicker/>
</span>
</radio>
<radio value="range">
<span>
在此期间有效
<DatePicker v-model:value="formModel.startDate" class="ml-2" />
<span class="mx-2">~</span>
<DatePicker v-model:value="formModel.endDate" />
</span>
</radio>
</radio-group>
</FormItem>
</div>
</Form>
<!-- 考勤组人员表格区 -->
<div class="mb-2">
<div class="flex items-center mb-2">
<span>考勤组人员（已选 <span class="text-red-500">{{ totalSelected }}</span> 人）</span>
<a-button type="primary" size="small" class="ml-4" @click="handleAdd">+ 添加人员</a-button>
</div>
<BasicTable>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:arrangement:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['property:arrangement:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
</div>
<UnitPersonModal />
<!-- 底部按钮区 -->
</BasicModal>
</template>

17
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
View File

@@ -1,9 +1,11 @@
<script lang="ts" setup>
import { Radio, Select, Button, Table,Badge,Calendar,DatePicker } from 'ant-design-vue';
import { Radio, Button,Calendar,DatePicker } from 'ant-design-vue';
import type { RadioChangeEvent,BadgeProps, } from 'ant-design-vue';
import {ref} from 'vue';
import { Dayjs } from 'dayjs';
const value = ref<Dayjs>();
import arrangementModal from './arrangement-modal.vue';
import {useVbenModal} from '@vben/common-ui';
const emit = defineEmits<{
(e: 'changeView',value:boolean):void
}>();
@@ -11,7 +13,6 @@ const props = defineProps<{
viewMode:'calender' | 'schedule'
}>();
const selectedDate = ref();
const currentDate = ref(new Date());
// 切换视图模式
function handleViewModeChange(e: RadioChangeEvent): void {
// 将父组件的isCalenderView变为true
@@ -69,6 +70,13 @@ function customHeader() {
// 返回你想要的VNode或null
return null; // 什么都不显示
}
const [ArrangementModal, modalApi] = useVbenModal({
connectedComponent: arrangementModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
</script>
<template>
<div class="h-full flex flex-col">
@@ -84,7 +92,7 @@ function customHeader() {
</div>
</div>
<div>
<Button type="primary">新增排班</Button>
<Button type="primary" @click="handleAdd">新增排班</Button>
</div>
</div>
<div class="flex-1 p-1">
@@ -110,6 +118,7 @@ function customHeader() {
</template>
</Calendar>
</div>
<ArrangementModal @reload=""/>
</div>
</template>
<style scoped>

123
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
View File

@@ -57,52 +57,137 @@ export const querySchema: FormSchemaGetter = () => [
label: '状态：0-未生效，1-已生效',
},
];
export const unitQuerySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'scheduleName',
label: '姓名',
},
{
component: 'Input',
fieldName: 'groupId',
label: '电话号',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键ID',
title: '序号',
field: 'id',
slots:{
default:({rowIndex}) => {
return (rowIndex + 1).toString();
}
},
width:60
},
{
title: '人员',
field: 'scheduleName',
width:120,
// width: 'auto',
},
{
title: '单位',
field: 'scheduleName',
width:'auto',
},
{
title: '排班名称',
field: 'scheduleName',
minWidth:120
},
{
title: '考勤组ID',
title: '考勤组',
field: 'groupId',
minWidth:120
},
{
title: '排班类型：1-固定班制，2-排班制',
title: '考勤类型',
field: 'scheduleType',
width: 'auto',
},
{
title: '日期类型：1-单个日期，2-长期有效，3-期间有效',
title: '考勤时间',
field: 'dateType',
},
{
title: '开始日期',
field: 'startDate',
},
{
title: '结束日期(仅date_type=3时有效)',
field: 'endDate',
},
{
title: '状态：0-未生效，1-已生效',
field: 'status',
minWidth:200
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
width: 'auto',
},
];
// 考勤组人员
export const attendanceColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
slots:{
default:({rowIndex}) => {
return (rowIndex + 1).toString();
}
},
width:60
},
{
title: '单位',
field: 'scheduleName',
width:'auto',
},
{
title: '已选人数',
field: 'scheduleName',
width:'auto',
},
{
title: '人员',
field: 'dateType',
minWidth:200
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 'auto',
},
];
// 单位人员
export const unitColumns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '序号',
field: 'id',
slots:{
default:({rowIndex}) => {
return (rowIndex + 1).toString();
}
},
width:60
},
{
title: '姓名',
field: 'scheduleName',
minWidth:120
},
{
title: '所属单位',
field: 'scheduleName',
width:'auto',
},
{
title: '电话',
field: 'groupId',
minWidth:120
}
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键ID',

43
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
View File

@@ -1,25 +1,22 @@
<script lang="ts" setup>
import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
import { Radio, Button, Calendar } from 'ant-design-vue';
import type { RadioChangeEvent } from 'ant-design-vue';
import {ref} from 'vue';
import { Dayjs } from 'dayjs';
import { columns, querySchema } from './data';
import { columns } from './data';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import { getVxePopupContainer } from '@vben/utils';
import {
arrangementExport,
arrangementList,
arrangementRemove,
} from '#/api/property/attendanceManagement/arrangement';
import arrangementModal from './arrangement-modal.vue';
import type { ArrangementForm } from '#/api/property/attendanceManagement/arrangement/model';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Popconfirm, Space } from 'ant-design-vue';
const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
const props = defineProps<{
viewMode:'calender' | 'schedule'
@@ -67,18 +64,10 @@ const gridOptions: VxeGridProps = {
// 表格全局唯一表示 保存列配置需要用到
id: 'property-arrangement-index',
toolbarConfig: {
// 控制工具栏整体是否显示（默认显示）
show: true,
// 隐藏"刷新/重置"按钮（对应 redo）
refresh: false,
// 隐藏"全屏"按钮
fullscreen: false,
// 隐藏"列设置"按钮（对应 setting）
columns: false,
// 隐藏"表格尺寸"按钮（对应 size）
size: undefined,
// 其他可能的按钮（如导出等，按需配置）
// export: false, // 如果有导出按钮，也可以隐藏
zoom: false, // 显示全屏
custom: false, // 隐藏列设置
},
};
const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -104,20 +93,25 @@ async function handleDelete(row: Required<ArrangementForm>) {
}
</script>
<template>
<div class="h-full">
<Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
<Radio.Button value="calender">日历视图</Radio.Button>
<Radio.Button value="schedule">班表视图</Radio.Button>
</Radio.Group>
<div class="flex p-2 h-full">
<div class="h-full ">
<div class="flex justify-between">
<Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
<Radio.Button value="calender">日历视图</Radio.Button>
<Radio.Button value="schedule">班表视图</Radio.Button>
</Radio.Group>
<div>
<Button type="primary" @click="handleAdd">新增排班</Button>
</div>
</div>
<div class="flex p-2 h-full">
<div style="padding-top: 48.4px;">
<div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<Calendar v-model:value="value" :fullscreen="false" :mode="'month'" @panelChange="onPanelChange"/>
</div>
</div>
<div class="flex-1">
<Page :auto-content-height="true">
<BasicTable >
<BasicTable>
<template #action="{ row }">
<Space>
<ghost-button
@@ -146,6 +140,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
</Page>
</div>
</div>
<ArrangementModal @reload="tableApi.query()"/>
</div>
</template>
<style>

326
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue Normal file
View File

@@ -0,0 +1,326 @@
<script setup lang="ts">
import { computed, ref, reactive } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import { Tree, InputSearch, Skeleton, Empty, Button } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import {
useVbenVxeGrid,
type VxeGridProps
} from '#/adapter/vxe-table';
import { modalSchema,unitColumns,unitQuerySchema } from './data';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
const emit = defineEmits<{ reload: [] }>();
const selectDeptId = ref<string[]>([]);
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const showSearch = ref(true);
const searchValue = ref('');
const selectedDeptIds = ref<string[]>([]);
const showTreeSkeleton = ref(false);
// mock 部门树数据
const deptTree = ref([
{
id: '1',
label: '公司',
children: [
{ id: '1-1', label: '研发部', children: [
{ id: '1-1-1', label: '前端组' },
{ id: '1-1-2', label: '后端组' },
] },
{ id: '1-2', label: '市场部' },
{ id: '1-3', label: '人事部' },
],
},
]);
function handleReload() {
showTreeSkeleton.value = true;
setTimeout(() => {
showTreeSkeleton.value = false;
}, 800);
}
const filteredDeptTree = computed(() => {
if (!searchValue.value) return deptTree.value;
// 递归过滤树
function filter(tree: any[]): any[] {
return tree
.map(node => {
if (node.label.includes(searchValue.value)) return node;
if (node.children) {
const children = filter(node.children);
if (children.length) return { ...node, children };
}
return null;
})
.filter(Boolean);
}
return filter(deptTree.value);
});
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: unitQuerySchema(),
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 [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 80,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
console.log(12)
const { id } = modalApi.getData() as { id?: number | string };
console.log(2)
isUpdate.value = !!id;
if (isUpdate.value && id) {
console.log(3)
const record = await arrangementInfo(id);
await formApi.setValues(record);
}
console.log(4)
// await markInitialized();
console.log(5)
modalApi.modalLoading(false);
console.log(6)
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
const formModel = reactive({
group: '',
type: '',
dateType: 'long',
dateSingle: null,
dateLong: null,
dateRange: [null, null],
startDate:'',
endDate:''
});
// mock 表格数据
const tableData = ref([
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
{ dept: '', users: [] },
]);
const staticData = [
{ id: 1, dept: 'xx部门', name: '张三' },
{ id: 2, dept: 'yy部门', name: '李四' },
];
const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
function addRow() {
tableData.value.push({ dept: '', users: [] });
}
const gridOptions: VxeGridProps = {
checkboxConfig: {
// 高亮
highlight: true,
// 翻页时保留选中状态
reserve: true,
// 点击行选中
// trigger: 'row',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
columns: unitColumns,
// columns,
// height: 'auto',
keepSource: true,
data:staticData,
pagerConfig: {},
proxyConfig: {
// ajax: {
// query: async ({ page }, formValues = {}) => {
// return await arrangementList({
// pageNum: page.currentPage,
// pageSize: page.pageSize,
// ...formValues,
// });
// },
// },
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'property-arrangement-index',
toolbarConfig: {
// 隐藏"刷新/重置"按钮（对应 redo）
refresh: false,
zoom: false, // 显示全屏
custom: false, // 隐藏列设置
},
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
async function handleEdit(row: any){
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: any) {
console.log(12);
}
async function loadDetail() {
}
</script>
<template>
<BasicModal :title="title">
<div class="mb-2 flex">
<div>
<Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active class="p-[8px]">
<div class="bg-background z-100 sticky left-0 top-0 p-[8px] flex items-center">
<InputSearch
v-model:value="searchValue"
placeholder="搜索部门"
size="small"
style="flex:1;"
>
<template #enterButton>
<Button type="text" @click="handleReload">
<SyncOutlined class="text-primary" />
</Button>
</template>
</InputSearch>
</div>
<div class="h-full overflow-x-hidden px-[8px]">
<Tree
v-if="filteredDeptTree.length > 0"
v-model:selectedKeys="selectedDeptIds"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }"
:tree-data="filteredDeptTree"
:virtual="false"
default-expand-all
>
<template #title="{ label }">
<span v-if="searchValue && label.indexOf(searchValue) > -1">
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ label }}</span>
</template>
</Tree>
<div v-else class="mt-5">
<Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
</div>
</div>
</Skeleton>
</div>
<div class="flex-1">
<BasicTable>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:arrangement:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['property:arrangement:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
</div>
</div>
</BasicModal>
</template>

63
apps/web-antd/src/views/property/costManagement/carCharge/car-charge-detail.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import { renderDict } from "#/utils/render";
import { carChargeInfo } from "#/api/property/carCharge";
import type { CarChargeVO } from "#/api/property/carCharge/model";
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
carChargeDetail.value = null;
},
});
const carChargeDetail = shallowRef<null | CarChargeVO>(null);
async function handleOpenChange(open: boolean) {
if (!open) return null;
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id: number | string };
carChargeDetail.value = await carChargeInfo(id);
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="车辆收费详情" class="w-[70%]">
<Descriptions v-if="carChargeDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
<DescriptionsItem label="车牌号">
{{ carChargeDetail.carNumber }}
</DescriptionsItem>
<DescriptionsItem label="费用类型">
<component v-if="carChargeDetail" :is="renderDict(2,'pro_expense_type')" />
</DescriptionsItem>
<DescriptionsItem label="计费时间">
{{ carChargeDetail.starTime + ' 至 ' + carChargeDetail.endTime }}
</DescriptionsItem>
<DescriptionsItem label="车位">
{{ carChargeDetail.location }}
</DescriptionsItem>
<DescriptionsItem label="应收金额">
<div v-if="carChargeDetail.amountReceivable">
<span style="font-size: 16px;font-weight: 600;color: red;margin-right: 10px">
￥ {{ carChargeDetail.amountReceivable }}
</span>
</div>
</DescriptionsItem>
<DescriptionsItem label="缴费状态" v-if="carChargeDetail.chargeStatus">
<component :is="renderDict(carChargeDetail.chargeStatus,'wy_fyshzt')" />
</DescriptionsItem>
<DescriptionsItem label="支付方式" v-if="carChargeDetail.payType">
<component :is="renderDict(carChargeDetail.payType,'wy_zffs')" />
</DescriptionsItem>
<DescriptionsItem label="缴费周期" v-if="carChargeDetail.chargeCycle">
{{ carChargeDetail.chargeCycle }}月
</DescriptionsItem>
<DescriptionsItem label="说明" :span="2">
{{ carChargeDetail.remark }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>

109
apps/web-antd/src/views/property/costManagement/carCharge/car-charge-refund.vue Normal file
View File

@@ -0,0 +1,109 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { carChargeInfo, carChargeRefund } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchemaRefund } from './data';
import { renderDict } from "#/utils/render";
import { Descriptions, DescriptionsItem, Divider } from "ant-design-vue";
import type { CarChargeVO } from "#/api/property/carCharge/model";
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const record = ref<CarChargeVO>();
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 80,
componentProps: {
class: 'w-full',
}
},
schema: modalSchemaRefund(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) return null;
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (id) {
record.value = await carChargeInfo(id);
await formApi.setValues(record.value);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) return;
const data = cloneDeep(await formApi.getValues());
// 可根据 carCharge 业务需要补充字段
await carChargeRefund(data);
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal title="退费">
<Descriptions v-if="record" size="small" :column="2" :labelStyle="{width:'80px'}">
<DescriptionsItem label="车牌号">
{{ record?.carNumber }}
</DescriptionsItem>
<DescriptionsItem label="收费项目">
{{ record?.costItemsId }}
</DescriptionsItem>
<DescriptionsItem label="计费起始">
{{ record?.starTime }}
</DescriptionsItem>
<DescriptionsItem label="计费结束">
{{ record?.endTime }}
</DescriptionsItem>
<DescriptionsItem label="车位">
{{ record?.location }}
</DescriptionsItem>
<DescriptionsItem label="业主">
{{ record?.personId }}
</DescriptionsItem>
<DescriptionsItem label="说明" :span="2">
{{ record?.remark }}
</DescriptionsItem>
</Descriptions>
<Divider/>
<BasicForm/>
</BasicModal>
</template>

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

@@ -1,28 +1,25 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
import { carChargeAdd } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { addModalSchema } from './data';
import { communityTree } from '#/api/property/community';
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
const emit = defineEmits<{ reload: [] }>();
const title = computed(() => $t('pages.common.add'));
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-1',
// 默认label宽度 px
labelWidth: 140,
// 通用配置项 会影响到所有表单项
formItemClass: 'col-span-2',
labelWidth: 80,
componentProps: {
class: 'w-full',
}
},
},
schema: addModalSchema(),
showDefaultActions: false,
@@ -37,23 +34,18 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[75%]',
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
if (!isOpen) return null;
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
await formApi.resetForm();
await markInitialized();
await formApi.setValues({costType:'2'});
modalApi.modalLoading(false);
},
});
@@ -62,10 +54,7 @@ async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
if (!valid) return;
const data = cloneDeep(await formApi.getValues());
await carChargeAdd(data);
resetInitialized();
@@ -82,7 +71,6 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(4);
// 选中后显示在输入框的值 即父节点 / 子节点
@@ -121,19 +109,21 @@ async function setupCommunitySelect() {
</script>
<template>
<BasicModal title="创建收费">
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>
</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>
:deep(.ant-select-disabled .ant-select-selection-item),
:deep(.ant-picker-disabled .ant-picker-input > input) {
/* 设置一个更深的颜色 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
</style>

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

@@ -1,144 +0,0 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
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 [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 80,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
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);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? carChargeUpdate(data) : carChargeAdd(data));
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
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="详情">
<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>

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

@@ -1,200 +0,0 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
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: 140,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
schema: payModalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
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);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
await carChargeAdd(data);
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
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="缴费">
<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>

124
apps/web-antd/src/views/property/costManagement/carCharge/carCharge-update.vue Normal file
View File

@@ -0,0 +1,124 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { payModalSchema } from './data';
import { Descriptions, DescriptionsItem, Divider } from 'ant-design-vue';
import { renderDict } from "#/utils/render";
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const record = ref<any>();
const room = ref<any>();
const costItem = ref<any>();
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 80,
componentProps: {
class: 'w-full',
},
},
schema: payModalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) return null;
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
record.value = await carChargeInfo(id);
// 假设 record.value 里有 costItem/room 字段，若无可自行适配
costItem.value = record.value?.costItemsVo || {};
room.value = record.value?.roomVo || {};
await formApi.setValues(record.value);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) return;
const data = cloneDeep(await formApi.getValues());
if (!record.value) return;
record.value.payType = data.payType;
record.value.chargeCycle = data.chargeCycle;
record.value.chargeStatus = '4';
await carChargeUpdate(record.value);
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal title="缴费">
<Descriptions v-if="record" size="small" :column="2" :labelStyle="{width:'80px'}">
<DescriptionsItem label="费用编号">
{{ costItem?.id }}
</DescriptionsItem>
<DescriptionsItem label="费用项目">
{{ costItem?.chargeItem }}
</DescriptionsItem>
<DescriptionsItem label="费用类型">
<component v-if="costItem" :is="renderDict(costItem?.costType,'pro_expense_type')" />
</DescriptionsItem>
<DescriptionsItem label="计费起始">
{{ record.starTime }}
</DescriptionsItem>
<DescriptionsItem label="车位">
{{ room?.location || record.location }}
</DescriptionsItem>
<DescriptionsItem label="车牌号">
{{ record.carNumber }}
</DescriptionsItem>
<DescriptionsItem label="单价">
{{ costItem?.unitPrice }}
</DescriptionsItem>
<DescriptionsItem label="附加费">
{{ costItem?.surcharge }}
</DescriptionsItem>
<DescriptionsItem label="缴费金额" :span="2">
<span style="font-size: 16px;font-weight: 600;color: red" v-if="record.amountReceivable">
￥ {{ record.amountReceivable }}
</span>
</DescriptionsItem>
</Descriptions>
<Divider/>
<BasicForm />
</BasicModal>
</template>

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

@@ -1,6 +1,8 @@
// 字段、接口、label、options 保持 carCharge 现有逻辑不变，仅优化注释和结构风格
// 参照 houseCharge/data.ts 的风格进行整理
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';
@@ -8,7 +10,9 @@ import { personList } from '#/api/property/resident/person';
import { communityTree } from '#/api/property/community';
import { handleNode } from '@vben/utils';
/**
* 查询表单 schema
*/
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
@@ -16,81 +20,56 @@ export const querySchema: FormSchemaGetter = () => [
label: '车牌号',
},
{
component: 'Input',
fieldName: 'personId',
label: '业主',
fieldName: 'personId',
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField: 'id',
},
},
{
component: 'Select',
componentProps: {
// 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
options: getDictOptions('wy_cszt'),
options: getDictOptions('wy_fyshzt'),
},
fieldName: 'state',
fieldName: 'chargeStatus',
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();
},
default: ({ rowIndex }) => (rowIndex + 1).toString(),
},
},
{ title: '车牌号', field: 'carNumber' },
{ title: '车位', field: 'location' },
{ title: '业主', field: 'personId' },
{
title: '车牌号',
field: 'carNumber',
},
{
title: '车位',
field: 'location',
},
{
title: '业主',
field: 'personId',
},
// {
// title: '状态',
// field: 'state',
// slots: {
// default: ({ row }) => {
// // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
// return renderDict(row.state, 'wy_cszt');
// },
// },
// },
{
title: '收费项目',
field: 'costItemsId',
},
{
title: '计费开始时间',
field: 'starTime',
},
{
title: '计费结束时间',
field: 'endTime',
},
{
title: '说明',
field: 'remark',
},
{
title: '状态',
field: 'charge_status',
slots:{
default:({row}) => {
return renderDict(row.charge_status, 'wy_fyshzt')
}
}
title: '缴费状态',
field: 'chargeStatus',
width: 150,
slots: {
default: ({ row }) => renderDict(row.chargeStatus, 'wy_fyshzt'),
},
},
{ title: '收费项目', field: 'costItemsId' },
{ title: '计费开始时间', field: 'starTime' },
{ title: '计费结束时间', field: 'endTime' },
{ title: '说明', field: 'remark' },
{
field: 'action',
fixed: 'right',
@@ -99,7 +78,10 @@ export const columns: VxeGridProps['columns'] = [
width: 180,
},
];
//详情
/**
* 详情弹窗 schema
*/
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键',
@@ -115,62 +97,53 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'carNumber',
component: 'Input',
rules: 'required',
disabled:true,
disabled: true,
},
{
label: '业主',//
{
label: '业主',
fieldName: 'personId',
component: 'ApiSelect',
rules:'required',
componentProps:{
rules: 'required',
componentProps: {
api: async () => {
const rows = await personList({pageSize:1000000000,pageNum:1});
const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField:'id'
valueField: 'id',
},
disabled:true,
disabled: true,
},
{
label: '楼层',
fieldName: 'floorId',
component: 'TreeSelect',
rules:'required',
disabled:true,
rules: 'required',
disabled: true,
},
{
label: '车位',
fieldName: 'location',
component: 'Input',
disabled:true,
},
// {
// label: '状态',
// fieldName: 'state',
// component: 'Select',
// componentProps: {
// // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
// options: getDictOptions('wy_cszt'),
// },
// },
{
label: '费用类型',//一个费用下有多个收费项目
fieldName: 'costType',
component: 'Select',
componentProps:{
options:getDictOptions('pro_expense_type'),
},
disabled:true,
disabled: true,
},
{
label: '收费项目',//一个收费项目对应一个费用类型
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'});
const rows = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: '2' });
return rows;
},
resultField: 'rows',
@@ -178,7 +151,7 @@ export const modalSchema: FormSchemaGetter = () => [
valueField: 'id',
},
rules: 'required',
disabled:true,
disabled: true,
},
{
label: '计费开始时间',
@@ -189,7 +162,7 @@ export const modalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
disabled: true,
},
{
label: '计费结束时间',
@@ -200,16 +173,19 @@ export const modalSchema: FormSchemaGetter = () => [
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
disabled: true,
},
{
label: '说明',
fieldName: 'remark',
component: 'Input',
disabled:true,
disabled: true,
},
];
//创建
/**
* 创建弹窗 schema
*/
export const addModalSchema: FormSchemaGetter = () => [
{
label: '主键',
@@ -227,26 +203,26 @@ export const addModalSchema: FormSchemaGetter = () => [
rules: 'required',
},
{
label: '业主',//
label: '业主',
fieldName: 'personId',
component: 'ApiSelect',
disabled:false,
rules:'required',
componentProps:{
disabled: false,
rules: 'required',
componentProps: {
api: async () => {
const rows = await personList({pageSize:1000000000,pageNum:1});
const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
return rows;
},
resultField: 'rows',
labelField: 'userName',
valueField:'id'
}
valueField: 'id',
},
},
{
label: '楼层',
fieldName: 'floorId',
component: 'TreeSelect',
rules:'required',
rules: 'required',
},
{
label: '车位',
@@ -254,21 +230,21 @@ export const addModalSchema: FormSchemaGetter = () => [
component: 'Input',
},
{
label: '费用类型',//一个费用下有多个收费项目
label: '费用类型',
fieldName: 'costType',
component: 'Select',
componentProps:{
options:getDictOptions('pro_expense_type'),
componentProps: {
options: getDictOptions('pro_expense_type'),
},
disabled:true,
disabled: true,
},
{
label: '收费项目',//一个收费项目对应一个费用类型
label: '收费项目',
fieldName: 'costItemsId',
component: 'ApiSelect',
componentProps: {
api: async () => {
const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
const rows = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: '2' });
return rows;
},
resultField: 'rows',
@@ -292,7 +268,7 @@ export const addModalSchema: FormSchemaGetter = () => [
label: '计费结束时间',
fieldName: 'endTime',
component: 'DatePicker',
rules:'required',
rules: 'required',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
@@ -305,8 +281,71 @@ export const addModalSchema: FormSchemaGetter = () => [
component: 'Input',
},
];
//缴费
/**
* 缴费弹窗 schema
*/
export const payModalSchema: FormSchemaGetter = () => [
{
label: '支付方式',
fieldName: 'payType',
component: 'Select',
componentProps: {
options: getDictOptions('wy_zffs'),
class: 'w-full',
},
rules: 'required',
formItemClass: 'col-span-2',
},
{
label: '缴费周期',
fieldName: 'chargeCycle',
component: 'Select',
componentProps: {
options: getDictOptions('wy_jfzq'),
class: 'w-full',
},
formItemClass: 'col-span-2',
},
];
/**
* 详情列配置
*/
export const detailColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
slots: {
default: ({ rowIndex }) => (rowIndex + 1).toString(),
},
},
{ title: '费用项目', field: 'carNumber' },
{ title: '费用标识', field: 'location' },
{ title: '应收金额', field: 'personId' },
{
title: '状态',
field: 'state',
slots: {
default: ({ row }) => renderDict(row.state, 'wy_cszt'),
},
},
{ title: '建帐时间', field: 'starTime' },
{ title: '应收时间', field: 'endTime' },
{ title: '说明', field: 'remark' },
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
/**
* 退款弹窗 schema
*/
export const modalSchemaRefund: FormSchemaGetter = () => [
{
label: '主键',
fieldName: 'id',
@@ -316,181 +355,11 @@ export const payModalSchema: FormSchemaGetter = () => [
triggerFields: [''],
},
},
{
label: '车牌号',
fieldName: 'carNumber',
component: 'Input',
{
label: '退费原因',
fieldName: 'reason',
component: 'Textarea',
formItemClass: 'col-span-2',
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: '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: '计费开始时间',
fieldName: 'starTime',
component: 'DatePicker',
rules: 'required',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
disabled:true,
},
{
label: '计费结束时间',
fieldName: 'endTime',
component: 'DatePicker',
rules:'required',
componentProps: {
showTime: true,
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: 'payType',
component: 'Select',
componentProps:{
options:getDictOptions('wy_zffs'),
},
rules: 'required',
},
{
label: '缴费周期',
fieldName: 'chargeCycle',
component: 'Select',
componentProps:{
options:getDictOptions('wy_jfzq'),
},
},
{
label: '实收金额',
fieldName: 'cost',
component: 'Input',
},
{
label: '自定义周期',
fieldName: 'remark',
component: 'Input',
},
];
export const detailColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '费用项目',
field: 'carNumber',
},
{
title: '费用标识',
field: 'location',
},
{
title: '应收金额',
field: 'personId',
},
{
title: '状态',
field: 'state',
slots: {
default: ({ row }) => {
// 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
return renderDict(row.state, 'wy_cszt');
},
},
},
{
title: '建帐时间',
field: 'starTime',
},
{
title: '应收时间',
field: 'endTime',
},
{
title: '说明',
field: 'remark',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];

160
apps/web-antd/src/views/property/costManagement/carCharge/index.vue
View File

@@ -1,20 +1,12 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
carChargeExport,
carChargeList,
@@ -22,10 +14,10 @@ import {
} from '#/api/property/carCharge';
import type { CarChargeForm } from '#/api/property/carCharge/model';
import { commonDownloadExcel } from '#/utils/file/download';
import carChargeDetailModal from './carCharge-detail-modal.vue';// 详情弹窗
import carChargePayModal from './carCharge-pay-modal.vue';//缴费弹窗
import carCharfeAddModal from './carCharge-add-modal.vue';//创建费用弹窗
import carChargeAdd from './carCharge-add.vue';
import carChargeUpdate from './carCharge-update.vue';
import carChargeDetail from './car-charge-detail.vue';
import carChargeRefund from './car-charge-refund.vue';
import { columns, querySchema } from './data';
const formOptions: VbenFormProps = {
@@ -37,28 +29,13 @@ 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,
@@ -77,7 +54,6 @@ const gridOptions: VxeGridProps = {
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'property-carCharge-index'
};
@@ -85,89 +61,139 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
// 详情弹窗
const [CarChargeDetailModal, modalApi] = useVbenModal({
connectedComponent: carChargeDetailModal,
});
// 创建费用弹窗
const [CarCharfeAddModal, addModalApi] = useVbenModal({
connectedComponent: carCharfeAddModal,
});
// 缴费弹窗
const [CarChargePayModal, payModalApi] = useVbenModal({
connectedComponent: carChargePayModal,
});
//打开创建费用弹窗
function handleAdd() {
addModalApi.setData({});
addModalApi.open();
}
//打开详情
async function handleEdit(row: Required<CarChargeForm>) {
modalApi.setData({ id: row.id });
const [CarChargeAdd, modalApi] = useVbenModal({
connectedComponent: carChargeAdd,
});
const [CarChargeUpdate, updateApi] = useVbenModal({
connectedComponent: carChargeUpdate,
});
const [CarChargeDetail, detailApi] = useVbenModal({
connectedComponent: carChargeDetail,
});
const [CarChargeRefund, refundApi] = useVbenModal({
connectedComponent: carChargeRefund,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
//打开缴费
async function handleSave(row: Required<CarChargeForm>) {
payModalApi.setData({ id: row.id });
payModalApi.open();
async function handleEdit(row: Required<CarChargeForm>) {
updateApi.setData({ id: row.id });
updateApi.open();
}
async function handleInfo(row: Required<CarChargeForm>) {
detailApi.setData({ id: row.id });
detailApi.open();
}
async function handleDelete(row: Required<CarChargeForm>) {
await carChargeRemove(row.id);
await tableApi.query();
}
async function handleRefund(row: Required<CarChargeForm>) {
refundApi.setData({ id: row.id });
refundApi.open();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<CarChargeForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗？`,
onOk: async () => {
await carChargeRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(carChargeExport, '车辆收费数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable table-title="费用-车辆收费列表">
<BasicTable table-title="车辆收费列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['property:carCharge:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['property:carCharge:remove']"
@click="handleMultiDelete">
批量删除
</a-button>
<a-button
type="primary"
v-access:code="['property:carCharge:add']"
@click="handleAdd"
>
创建费用
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:carCharge:info']"
@click.stop="handleInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-if="row.chargeStatus=='2'"
v-access:code="['property:carCharge:edit']"
@click.stop="handleSave(row)"
@click.stop="handleEdit(row)"
>
缴费
</ghost-button>
<ghost-button
v-else-if="row.chargeStatus=='4'"
danger
v-access:code="['property:carCharge:edit']"
@click.stop="handleRefund(row)"
>
退费
</ghost-button>
<Popconfirm
v-else
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
title="确认取消？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['property:carCharge:remove']"
@click.stop=""
:disabled="row.chargeStatus!='1'"
>
{{ $t('pages.common.delete') }}
取消
</ghost-button>
</Popconfirm>
<ghost-button
v-access:code="['property:carCharge:edit']"
@click.stop="handleEdit(row)"
>
详情
</ghost-button>
</Space>
</template>
</BasicTable>
<!-- 详情弹窗 -->
<CarChargeDetailModal @reload="tableApi.query()" />
<CarCharfeAddModal @reload="tableApi.query()" />
<CarChargePayModal @reload="tableApi.query()" />
<CarChargeAdd @reload="tableApi.query()"/>
<CarChargeUpdate @reload="tableApi.query()"/>
<CarChargeRefund @reload="tableApi.query()"/>
<CarChargeDetail/>
</Page>
</template>

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

@@ -8,10 +8,10 @@ import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
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 { costItemSettingList} from '#/api/property/costManagement/costItemSetting';
import { meterReadingTypeList } from '#/api/property/costManagement/meterReadingType';
import { getDictOptions } from '#/utils/dict';
import {ultimoWater} from '#/api/property/costMeterWater'
const emit = defineEmits<{ reload: [] }>();
const costItemsOptions = ref<any>([]);
const meterTypeOptions = ref<any>([]);