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

Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Details

Browse Source
This commit is contained in:
FLL
2025-07-22 18:55:51 +08:00
parent 420335d7be 65b9e5cb6a
commit 34d50c58af
173 changed files with 2036 additions and 17890 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/change-shift-schedule.vue Normal file
View File

@@ -0,0 +1,143 @@
<script setup lang="ts">
import {useVbenModal} from '@vben/common-ui';
import {shiftColumns} from './data';
import {shiftList} from "#/api/property/attendanceManagement/shiftSetting";
import {Table, Form, FormItem, Button, Input} from 'ant-design-vue';
import {reactive, ref} from 'vue'
import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
},
onConfirm: handleConfirm,
});
const emit = defineEmits<{ shiftInfo: [info: ShiftVO], shiftList: [list: ShiftVO[]] }>();
const handleType = ref<number>(1);
const tableLoading = ref<boolean>(true);
async function handleConfirm() {
try {
modalApi.lock(true);
if (state.selectedRowKeys.length) {
let arr = shiftData.value.filter(item => state.selectedRowKeys.includes(item.id))
if (handleType.value == 1 && arr.length) {
await emit('shiftInfo', arr[0]);
} else if (handleType.value == 2 && arr.length) {
await emit('shiftList', arr);
}
}
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
state.selectedRowKeys = []
handleType.value = modalApi.getData()?.type;
await queryShiftData()
modalApi.modalLoading(true);
modalApi.modalLoading(false);
}
const shiftData = ref<ShiftVO[]>([])
const shiftName = ref<string>('')
async function queryShiftData() {
tableLoading.value = true
let params = {
name: shiftName.value,
pageNum: 1,
pageSize: 1000
}
const res = await shiftList(params)
shiftData.value = res.rows
tableLoading.value = false
}
// 行勾选状态
const state = reactive({
selectedRowKeys: [],
});
// 勾选变化时的回调
const onSelectChange = (selectedRowKeys: string[]) => {
if (selectedRowKeys.length > 1 && handleType.value == 1) {
state.selectedRowKeys = selectedRowKeys.slice(-1);
} else {
state.selectedRowKeys = selectedRowKeys;
}
};
//重置操作
const resetHandle = () => {
shiftName.value = ''
queryShiftData()
}
</script>
<template>
<BasicModal :fullscreen-button="false" title="选择班次" class="w-[70%]">
<Form
class="form-container"
layout="inline"
>
<FormItem
label="班次名称"
name="username">
<Input v-model:value="shiftName"></Input>
</FormItem>
<FormItem>
<Button @click="resetHandle">重置</Button>
<Button type="primary" style="margin-left: 20px" @click="queryShiftData">搜索</Button>
</FormItem>
</Form>
<Table
class="table-container"
bordered
:columns="shiftColumns"
:data-source="shiftData"
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
size="small"
:pagination="false"
rowKey="id"
:scroll="{ y: 350 }"
:loading="tableLoading"
>
<template #bodyCell="{ column, record,index }">
<template v-if="column.dataIndex==='id'">
{{ index + 1 }}
</template>
<template v-if="column.dataIndex==='attendanceTime'">
<span v-if="record.isRest">
{{ record.startTime + '~' + record.restStartTime }}&nbsp;
{{ record.restEndTime + '~' + record.endTime }}
</span>
<span v-else>
{{ record.startTime + '~' + record.endTime }}
</span>
</template>
</template>
</Table>
</BasicModal>
</template>
<style scoped>
.table-container {
min-height: 400px;
}
.form-container {
padding: 10px 0 20px 0;
font-size: 0.875rem;
font-weight: 500;
}
</style>

82
apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/check-in-date.vue Normal file
View File

@@ -0,0 +1,82 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import {clockInModalSchema} from './data';
const emit = defineEmits<{ reload: [] }>();
const isClockIn = ref(false);
const title = computed(() => {
return isClockIn.value ? '必须打卡日期' : '无需打卡日期';
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 100,
componentProps: {
class: 'w-full',
}
},
schema: clockInModalSchema(),
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 { type } = modalApi.getData() as { type?: number };
isClockIn.value = !!type;
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());
resetInitialized();
await modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm/>
</BasicModal>
</template>

207
apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/data.ts
View File

@@ -1,8 +1,8 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type {FormSchemaGetter} from '#/adapter/form';
import type {VxeGridProps} from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
import {renderDict} from "#/utils/render";
import type { TableColumnsType } from 'ant-design-vue';
import type {TableColumnsType} from 'ant-design-vue';
export const querySchema: FormSchemaGetter = () => [
{
@@ -13,7 +13,7 @@ export const querySchema: FormSchemaGetter = () => [
{
component: 'Select',
componentProps: {
options:getDictOptions('wy_kqlx')
options: getDictOptions('wy_kqlx')
},
fieldName: 'attendanceType',
label: '考勤类型',
@@ -23,35 +23,35 @@ export const querySchema: FormSchemaGetter = () => [
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{type: 'checkbox', width: 60},
{
title: '考勤组名称',
field: 'groupName',
minWidth:180,
minWidth: 180,
},
{
title: '考勤类型',
field: 'attendanceType',
slots:{
default: ({row})=>{
return renderDict(row.attendanceType,'wy_kqlx')
slots: {
default: ({row}) => {
return renderDict(row.attendanceType, 'wy_kqlx')
}
},
width:150
width: 150
},
{
title: '状态',
field: 'status',
slots:{
slots: {
default: 'status'
},
width:180
width: 180
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
slots: {default: 'action'},
title: '操作',
width: 180,
},
@@ -82,32 +82,32 @@ export const modalSchema: FormSchemaGetter = () => [
options: getDictOptions('wy_kqlx'),
},
rules: 'selectRequired',
defaultValue:'0'
defaultValue: '0'
},
{
label: '工作日设置',
fieldName: 'weekdaySetting',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='0',
show: (formValue) => formValue.attendanceType == '0',
triggerFields: ['attendanceType'],
},
slots:{
default:'weekdaySetting'
slots: {
default: 'weekdaySetting'
},
rules:'required',
defaultValue:'1',
rules: 'required',
defaultValue: '1',
},
{
label: '',
fieldName: 'settingItem',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='0',
show: (formValue) => formValue.attendanceType == '0',
triggerFields: ['attendanceType'],
},
slots:{
default:'settingItem'
slots: {
default: 'settingItem'
},
},
{
@@ -115,25 +115,25 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'attendanceShift',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='1',
show: (formValue) => formValue.attendanceType == '1',
triggerFields: ['attendanceType'],
},
slots:{
default:'attendanceShift'
slots: {
default: 'attendanceShift'
},
rules:'required',
defaultValue:'1',
rules: 'required',
defaultValue: '1',
},
{
label: '',
fieldName: 'shiftData',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='1',
show: (formValue) => formValue.attendanceType == '1',
triggerFields: ['attendanceType'],
},
slots:{
default:'shiftData'
slots: {
default: 'shiftData'
},
},
{
@@ -141,25 +141,25 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'schedulingCycle',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='1',
show: (formValue) => formValue.attendanceType == '1',
triggerFields: ['attendanceType'],
},
slots:{
default:'schedulingCycle'
slots: {
default: 'schedulingCycle'
},
defaultValue:'1',
rules:'required'
defaultValue: '1',
rules: 'required'
},
{
label: '',
fieldName: 'cycleData',
component: 'Input',
dependencies: {
show: (formValue) => formValue.attendanceType=='1',
show: (formValue) => formValue.attendanceType == '1',
triggerFields: ['attendanceType'],
},
slots:{
default:'cycleData'
slots: {
default: 'cycleData'
},
},
];
@@ -168,23 +168,23 @@ export const weekdayColumns: TableColumnsType = [
{
title: '工作日',
key: 'label',
width:180,
align:'center',
dataIndex:'label'
width: 120,
align: 'center',
dataIndex: 'label'
},
{
title: '班次',
key: 'shift',
minWidth:180,
align:'center',
dataIndex:'shift'
minWidth: 180,
align: 'center',
dataIndex: 'shift'
},
{
title: '操作',
key: 'action',
dataIndex:'action',
width:180,
align:'center',
dataIndex: 'action',
width: 180,
align: 'center',
},
]
@@ -192,16 +192,16 @@ export const noClockingColumns: TableColumnsType = [
{
title: '无需打卡日期',
key: 'label',
width:180,
align:'center',
dataIndex:'label'
minWidth: 180,
align: 'center',
dataIndex: 'label'
},
{
title: '操作',
key: 'action',
dataIndex:'action',
width:180,
align:'center',
dataIndex: 'action',
width: 150,
align: 'center',
},
]
@@ -209,16 +209,16 @@ export const clockingColumns: TableColumnsType = [
{
title: '必须打卡日期',
key: 'label',
width:180,
align:'center',
dataIndex:'label'
minWidth: 180,
align: 'center',
dataIndex: 'label'
},
{
title: '操作',
key: 'action',
dataIndex:'action',
width:180,
align:'center',
dataIndex: 'action',
width: 150,
align: 'center',
},
]
@@ -226,23 +226,94 @@ export const cycleColumns: TableColumnsType = [
{
title: '天数',
key: 'label',
width:180,
align:'center',
dataIndex:'label'
width: 150,
align: 'center',
dataIndex: 'label'
},
{
title: '班次',
key: 'label',
width:180,
align:'center',
dataIndex:'label'
minWidth: 180,
align: 'center',
dataIndex: 'label'
},
{
title: '操作',
key: 'action',
dataIndex:'action',
width:180,
align:'center',
dataIndex: 'action',
width: 150,
align: 'center',
},
]
export const shiftColumns = [
{
title: '序号',
dataIndex: 'id',
key: 'id',
width: 100,
align: 'center',
},
{
title: '班次名称',
dataIndex: 'name',
key: 'name',
width: 180,
align: 'center',
},
{
title: '考勤时间',
dataIndex: 'attendanceTime',
key: 'attendanceTime',
minWidth: 180,
align: 'center',
},
];
const typeOptions = [
{label: '单个日期', value: 1},
{label: '时间段', value: 2},
];
export const clockInModalSchema: FormSchemaGetter = () => [
{
label: '添加方式',
fieldName: 'type',
component: 'RadioGroup',
componentProps: {
options: typeOptions,
buttonStyle: 'solid',
},
defaultValue:1,
rules: 'required',
},
{
label: '日期',
fieldName: 'singleTime',
component: 'DatePicker',
rules: 'required',
componentProps: {
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
},
dependencies: {
show: (formValue) => formValue.type==1,
triggerFields: ['type'],
},
},
{
label: '日期',
fieldName: 'timeSlot',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
},
rules: 'required',
dependencies: {
show: (formValue) => formValue.type==2,
triggerFields: ['type'],
},
},
]

179
apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue
View File

@@ -23,6 +23,11 @@ import {
import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
import {getDictOptions} from "#/utils/dict";
import holidayCalendar from './holiday-calendar.vue'
import changeShiftSchedule from './change-shift-schedule.vue'
import checkInDate from './check-in-date.vue'
import {h} from 'vue';
import {PlusOutlined, MinusOutlined} from '@ant-design/icons-vue';
import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
const emit = defineEmits<{ reload: [] }>();
@@ -58,10 +63,9 @@ const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[80%]',
fullscreenButton: false,
maskClosable:false,
fullscreen: true,
// class:'w-[80%]',
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
@@ -119,6 +123,13 @@ async function handleClosed() {
const [HolidayCalendar, holidayApi] = useVbenModal({
connectedComponent: holidayCalendar,
});
const [ChangeShiftSchedule, shiftApi] = useVbenModal({
connectedComponent: changeShiftSchedule,
});
const [CheckInDate, checkInDateApi] = useVbenModal({
connectedComponent: checkInDate,
});
/**
* 查看法定节假日日历
@@ -127,66 +138,184 @@ async function showHoliday() {
holidayApi.open()
}
/**
* 更改班次
* @param type 1.设置班次 2.选择班次
*/
async function shiftScheduleHandle(type) {
await shiftApi.open()
await shiftApi.setData({type})
}
async function changeShiftHandle(type, index) {
await shiftApi.open()
await shiftApi.setData({type})//3.更改班次
}
async function selectDateHandle(type) {
checkInDateApi.open()
checkInDateApi.setData({type})
}
const shiftInfo = ref<ShiftVO>()
const shiftList = ref<ShiftVO[]>([])
const handleShiftInfo = (info) => {
shiftInfo.value = info;
};
const handleShiftList = (list) => {
shiftList.value = list;
};
const handleAfterValue = (val) => {
console.log(val, '===val')
};
const cycleData = ref<any[]>([])
const unCheckInData = ref<any[]>([])
const checkInData = ref<any[]>([])
async function addCycleHandle() {
cycleData.value.push({
shiftId: '',
})
}
async function deleteCycleHandle(index) {
cycleData.value.splice(index, 1)
}
async function deleteUnCheckInHandle(index) {
unCheckInData.value.splice(index, 1)
}
async function deleteCheckInHandle(index) {
checkInData.value.splice(index, 1)
}
async function restHandle(index){
}
</script>
<template>
<BasicModal :title="title">
<BasicModal :title="title+'考勤组'">
<BasicForm>
<template #weekdaySetting>
<div class="item-font">
<span>快捷设置班次：</span>
<Tag color="processing">常规班次：08:00:00~12:00:00 14:00:00~17:00:00</Tag>
<Button type="link">更改班次</Button>
<Tag color="processing" v-if="shiftInfo">
<span>{{ shiftInfo.name }}</span>&nbsp;
<span v-if="shiftInfo.isRest">
{{ shiftInfo.startTime + '~' + shiftInfo.restStartTime }}&nbsp;
{{ shiftInfo.restEndTime + '~' + shiftInfo.endTime }}
</span>
<span v-else>
{{ shiftInfo.startTime + '~' + shiftInfo.endTime }}
</span>
</Tag>
<Button type="link" @click="shiftScheduleHandle(1)">设置班次</Button>
</div>
</template>
<template #settingItem>
<div class="item-font" style="width: 100%;">
<Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
<Table style="width: 90%" bordered :columns="weekdayColumns" :data-source="weekdayData"
size="small" :pagination="false">
<!-- <template #headerCell="{ column }">-->
<!-- </template>-->
<!-- <template #bodyCell="{ column, record }">-->
<!-- <template>-->
<!-- {{ record[column.field] }}-->
<!-- </template>-->
<!-- </template>-->
<!-- <template #action="{row}">-->
<!-- <Button type="link">更改班次</Button>-->
<!-- <Button type="link">休息</Button>-->
<!-- </template>-->
<template #bodyCell="{ column, record,index }">
<template v-if="column.dataIndex==='action'">
<Button type="link" size="small" @click="changeShiftHandle(3)">更改班次</Button>
<Button type="link" size="small" @click="restHandle(index)">休息</Button>
</template>
</template>
</Table>
<Checkbox class="item-padding-top" v-model:checked="settingData.isAutomatic">
法定节假日自动排休
</Checkbox>
<!-- https://timor.tech/api/holiday/year/2024 国务院节假日安排API-->
<Button type="link" @click="showHoliday">查看法定节假日日历</Button>
<p class="item-padding-top item-font-weight">特殊日期：</p>
<p class="item-padding">无需打卡日期：</p>
<Table style="width: 80%" bordered :columns="noClockingColumns" :data-source="[]"
<Table style="width: 75%" bordered :columns="noClockingColumns"
:data-source="unCheckInData"
size="small" :pagination="false">
<template #headerCell="{ column }">
<template v-if="column.dataIndex === 'action'">
<Button size="small" type="primary" shape="circle"
@click="selectDateHandle"
:icon="h(PlusOutlined)">
</Button>
</template>
</template>
<template #bodyCell="{ column, record,index }">
<template v-if="column.dataIndex==='action'">
<Button size="small" type="primary" shape="circle"
danger :icon="h(MinusOutlined)" @click="deleteUnCheckInHandle(index)">
</Button>
</template>
</template>
</Table>
<p class="item-padding">必须打卡日期：</p>
<Table style="width: 80%" bordered :columns="clockingColumns" :data-source="[]"
<Table style="width: 75%" bordered :columns="clockingColumns" :data-source="checkInData"
size="small" :pagination="false">
<template #headerCell="{ column }">
<template v-if="column.dataIndex === 'action'">
<Button size="small" type="primary" shape="circle"
@click="selectDateHandle"
:icon="h(PlusOutlined)">
</Button>
</template>
</template>
<template #bodyCell="{ column, record,index }">
<template v-if="column.dataIndex==='action'">
<Button size="small" type="primary" shape="circle"
danger :icon="h(MinusOutlined)" @click="deleteCheckInHandle(index)">
</Button>
</template>
</template>
</Table>
</div>
</template>
<template #attendanceShift>
<Button size="small">选择班次</Button>
<Button size="small" @click="shiftScheduleHandle(2)" type="primary">选择班次</Button>
</template>
<template #shiftData>
<Tag closable color="processing">早班</Tag>
<div v-if="shiftList">
<Tag closable color="processing" v-for="(item,index) in shiftList">
{{ item.name }}
</Tag>
</div>
</template>
<template #schedulingCycle>
<span class="item-font">周期天数4天</span>
<span class="item-font">周期天数
<span style="font-weight: 500;color: red">{{ cycleData.length }}</span>
天</span>
</template>
<template #cycleData>
<Table style="width: 100%" bordered :columns="cycleColumns" :data-source="[]"
<Table style="width: 80%" bordered :columns="cycleColumns" :data-source="cycleData"
size="small" :pagination="false">
<template #headerCell="{ column }">
<template v-if="column.dataIndex === 'action'">
<Button size="small" type="primary" shape="circle"
:icon="h(PlusOutlined)" @click="addCycleHandle">
</Button>
</template>
</template>
<template #bodyCell="{ column, record,index }">
<template v-if="column.dataIndex==='action'">
<Button size="small" type="primary" shape="circle"
danger :icon="h(MinusOutlined)" @click="deleteCycleHandle(index)">
</Button>
</template>
</template>
</Table>
</template>
</BasicForm>
<HolidayCalendar></HolidayCalendar>
<ChangeShiftSchedule @shiftInfo="handleShiftInfo"
@shiftList="handleShiftList"
@afterValue="handleAfterValue"
></ChangeShiftSchedule>
<CheckInDate></CheckInDate>
</BasicModal>
</template>
<style lang="scss" scoped>

80
apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/holiday-calendar.vue
View File

@@ -25,54 +25,76 @@ const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
const holidayData = ref<any>({})
const year = ref<string>(new Date().getFullYear())
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
await getHolidayData(year.value)
modalApi.modalLoading(true);
const res = await getHoliday(new Date().getFullYear());
holidayData.value = res.holiday
modalApi.modalLoading(false);
}
const day = ref<Holiday>();
const getListData = (value: Dayjs) => {
async function getHolidayData(date: string) {
const res = await getHoliday(date);
holidayData.value = res.holiday
}
const holidayInfo = (value: Dayjs) => {
const date = value.format('MM-DD');
day.value = holidayData.value?.[date] ?? null;
return !!day.value;
return holidayData.value[date] ?? null;
};
const getMonthData = (value: Dayjs) => {
if (value.month() === 8) {
return 1394;
const selectDate = (date: Dayjs) => {
const yearVal = date.format('YYYY');
if (yearVal != year.value.toString()) {
year.value = yearVal
getHolidayData(yearVal)
}
};
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="法定节假日日历" class="w-[40%]">
<Calendar>
<template #dateCellRender="{ current }">
<div v-if="getListData(current)" style="height: 50px">
<Tag v-if="day.holiday" color="blue">
<span style="padding: 0 10px">休</span>
</Tag>
<Tag v-else color="red">
<span style="padding: 0 10px">班</span>
</Tag>
</div>
</template>
<template #monthCellRender="{ current }">
<div v-if="getMonthData(current)" class="notes-month">
<span>Backlog number</span>
</div>
</template>
</Calendar>
<div class="modal-content">
<Calendar @select="selectDate">
<template #dateCellRender="{ current }">
<div v-if="holidayInfo(current)" style="height: 50px">
<div v-if="holidayInfo(current).holiday">
<Tag color="blue">
<span class="tag-padding">休</span>
</Tag>
<p class="info-text">{{ holidayInfo(current).name }}</p>
</div>
<Tag v-else color="red">
<span class="tag-padding">班</span>
</Tag>
</div>
</template>
</Calendar>
</div>
</BasicModal>
</template>
<style scoped lang="scss">
:deep(.ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content) {
height: 46px !important;
.modal-content{
:deep(.ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content) {
height: 50px !important;
}
:deep(.ant-picker-calendar .ant-picker-calendar-header .ant-picker-calendar-mode-switch) {
display: none !important;
}
.tag-padding {
padding: 0 10px
}
.info-text {
font-size: 11px;
color: #c2bfbf;
overflow: hidden;
text-align: center;
}
}
</style>

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>

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

@@ -7,11 +7,11 @@ import { costMeterWaterAdd, costMeterWaterInfo, costMeterWaterUpdate } from '#/a
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'
import {personList} from '#/api/property/resident/person'
const emit = defineEmits<{ reload: [] }>();
const costItemsOptions = ref<any>([]);
const meterTypeOptions = ref<any>([]);
@@ -21,11 +21,35 @@ const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const schema =[
{
label: '抄表地址',
fieldName: 'location',
{
label: '主键ID',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '房间号',
fieldName: 'roomId',
component: 'TreeSelect',
rules: 'required'
},
{
label: '业主',
fieldName: 'userId',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: async () => {
const res = await personList({pageSize:1000000000,pageNum:1});
return res.rows.map((item: any) => ({
label: item.userName,
value: item.id,
}));
},
}
},
{
label: '费用类型',
@@ -34,12 +58,7 @@ const schema =[
rules: 'required',
componentProps: {
options: getDictOptions('wy_cbfylx'),
onChange: async (value:any) => {
// 清空依赖字段
await formApi.setValues({
costItemsId: '',
meterTypeId: '',
});
onChange: async (value:any) => {
// 请求并更新下拉
if (!value) {
costItemsOptions.value = [];
@@ -61,7 +80,7 @@ const schema =[
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
fieldName: 'itemId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
@@ -75,12 +94,18 @@ const schema =[
},
},
]);
// 清空依赖字段
await formApi.setValues({
itemId: '',
meterTypeId: '',
});
console.log(await formApi.getValues());
}
}
},
{
label: '收费项目',
fieldName: 'costItemsId',
fieldName: 'itemId',
component: 'Select',
rules: 'required',
componentProps: {
@@ -99,10 +124,9 @@ const schema =[
}
},
{
label: '上月止度',
label: '上期止度',
fieldName: 'preDegrees',
component: 'Input',
rules: 'required',
disabled: true,
},
{
@@ -120,9 +144,7 @@ const schema =[
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
rules: 'required',
disabled:true
},
{
label: '本期读表时间',
@@ -175,16 +197,44 @@ const [BasicModal, modalApi] = useVbenModal({
if (!isOpen) {
return null;
}
isMeterType.value = false
isMeterType.value = true
setupCommunitySelect()
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await costMeterWaterInfo(id);
console.log(1,record);
const costItemsRes = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: record.costType });
costItemsOptions.value = (costItemsRes?.rows || []).map(item => ({
label: item.chargeItem,
value: item.id,
}));
const meterTypeRes = await meterReadingTypeList({ pageSize: 1000000000, pageNum: 1, costType: record.costType == '5' ? 0 : 1 });
meterTypeOptions.value = (meterTypeRes?.rows || []).map(item => ({
label: item.name,
value: item.id,
}));
formApi.updateSchema([
{
fieldName: 'itemId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
},
},
{
fieldName: 'meterTypeId',
componentProps: {
options: meterTypeOptions.value,
disabled: !isMeterType.value,
},
},
]);
await formApi.setValues(record);
console.log(2,await formApi.getValues());
}
await markInitialized();
@@ -201,6 +251,8 @@ async function handleConfirm() {
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
console.log(data);
await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
resetInitialized();
//必须要手动清空，不然ref会保留值
@@ -210,7 +262,7 @@ async function handleConfirm() {
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
fieldName: 'itemId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
@@ -242,7 +294,7 @@ async function handleClosed() {
// 更新表单下拉
formApi.updateSchema([
{
fieldName: 'costItemsId',
fieldName: 'itemId',
componentProps: {
options: costItemsOptions.value,
disabled: !isMeterType.value,
@@ -289,8 +341,20 @@ async function setupCommunitySelect() {
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
onChange: async (value: any) => {
if(!value){
await formApi.setValues({preDegrees:''})
await formApi.setValues({preReadingTime:''})
}else{
const data = await ultimoWater(value)
if(data){
await formApi.setValues({preDegrees:data.curDegrees})
await formApi.setValues({preReadingTime:data.curReadingTime})
}
}
},
}),
fieldName: 'location',
fieldName: 'roomId',
},
]);
}
@@ -305,7 +369,9 @@ async function setupCommunitySelect() {
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
:deep(.ant-select-disabled .ant-select-selection-item),
:deep(.ant-picker-input input[disabled]),
:deep(.ant-picker-disabled .ant-picker-input input) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgba(0, 0, 0, 0.65) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */