feat: 车辆收费、水电抄表、排版管理页面
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
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;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await arrangementInfo(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 ? 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();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<script lang="ts" setup>
|
||||
import { Radio, Select, Button, Table,Badge,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>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'changeView',value:boolean):void
|
||||
}>();
|
||||
const props = defineProps<{
|
||||
viewMode:'calender' | 'schedule'
|
||||
}>();
|
||||
const selectedDate = ref();
|
||||
const currentDate = ref(new Date());
|
||||
// 切换视图模式
|
||||
function handleViewModeChange(e: RadioChangeEvent): void {
|
||||
// 将父组件的isCalenderView变为true
|
||||
emit('changeView',e.target.value)
|
||||
}
|
||||
|
||||
// 日历模拟数据
|
||||
const scheduleData:{ date: string; list: { type: BadgeProps['status']; content: string }[] }[] = [
|
||||
{ date: '2025-07-08', list: [ { type: 'warning', content: '7月8日事件' } ] },
|
||||
{ date: '2025-07-06', list: [ { type: 'success', content: '8月8日事件' } ] },
|
||||
// ...
|
||||
];
|
||||
const getListData2 = (current: Dayjs): { type: BadgeProps['status']; content: string }[] => {
|
||||
const dateStr = current.format('YYYY-MM-DD');
|
||||
const found = scheduleData.find(item => item.date === dateStr);
|
||||
return found ? found.list : [];
|
||||
};
|
||||
const getListData = (value: Dayjs):{ type: BadgeProps['status']; content: string }[] => {
|
||||
let listData: { type: BadgeProps['status']; content: string }[] | undefined;
|
||||
switch (value.date()) {
|
||||
case 8:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event.' },
|
||||
{ type: 'success', content: 'This is usual event.' },
|
||||
];
|
||||
break;
|
||||
case 10:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event.' },
|
||||
{ type: 'success', content: 'This is usual event.' },
|
||||
{ type: 'error', content: 'This is error event.' },
|
||||
];
|
||||
break;
|
||||
case 15:
|
||||
listData = [
|
||||
{ type: 'warning', content: 'This is warning event' },
|
||||
{ type: 'success', content: 'This is very long usual event。。....' },
|
||||
{ type: 'error', content: 'This is error event 1.' },
|
||||
{ type: 'error', content: 'This is error event 2.' },
|
||||
{ type: 'error', content: 'This is error event 3.' },
|
||||
{ type: 'error', content: 'This is error event 4.' },
|
||||
];
|
||||
break;
|
||||
default:
|
||||
}
|
||||
return listData || [];
|
||||
};
|
||||
|
||||
const getMonthData = (value: Dayjs) => {
|
||||
if (value.month() === 8) {
|
||||
return 1394;
|
||||
}
|
||||
};
|
||||
function customHeader() {
|
||||
// 返回你想要的VNode或null
|
||||
return null; // 什么都不显示
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex gap-7">
|
||||
<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="my-auto flex gap-1">
|
||||
<div class="my-auto">排班日历</div>
|
||||
<DatePicker picker="month" v-model:value="selectedDate" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="primary">新增排班</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-1">
|
||||
<Calendar v-model:value="selectedDate" :mode="'month'" :headerRender="customHeader">
|
||||
<template #dateCellRender="{ current }">
|
||||
<ul class="events">
|
||||
<li v-for="item in getListData2(current)" :key="item.content">
|
||||
<span>
|
||||
<!-- <Badge :status="item.type" :text="item.content" /> -->
|
||||
<span>{{ item.content }}</span>
|
||||
<a style="margin-left: 4px; color: #1890ff; cursor: pointer;">编辑</a>
|
||||
<a style="margin-left: 4px; color: #ff4d4f; cursor: pointer;">删除</a>
|
||||
</span>
|
||||
</li>
|
||||
<a v-if="getListData2(current).length > 0" style="margin-left: 4px; color: #1890ff; cursor: pointer;">详情</a>
|
||||
</ul>
|
||||
</template>
|
||||
<template #monthCellRender="{ current }">
|
||||
<div v-if="getMonthData(current)" class="notes-month">
|
||||
<section>{{ getMonthData(current) }}</section>
|
||||
<span>Backlog number</span>
|
||||
</div>
|
||||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.events {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.events .ant-badge-status {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
}
|
||||
.notes-month {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.notes-month section {
|
||||
font-size: 28px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'scheduleName',
|
||||
label: '排班名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'groupId',
|
||||
label: '考勤组ID',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
fieldName: 'scheduleType',
|
||||
label: '排班类型：1-固定班制，2-排班制',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
fieldName: 'dateType',
|
||||
label: '日期类型：1-单个日期，2-长期有效，3-期间有效',
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
fieldName: 'startDate',
|
||||
label: '开始日期',
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
fieldName: 'endDate',
|
||||
label: '结束日期(仅date_type=3时有效)',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
optionType: 'button',
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '状态：0-未生效，1-已生效',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '主键ID',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '排班名称',
|
||||
field: 'scheduleName',
|
||||
},
|
||||
{
|
||||
title: '考勤组ID',
|
||||
field: 'groupId',
|
||||
},
|
||||
{
|
||||
title: '排班类型：1-固定班制，2-排班制',
|
||||
field: 'scheduleType',
|
||||
},
|
||||
{
|
||||
title: '日期类型：1-单个日期，2-长期有效，3-期间有效',
|
||||
field: 'dateType',
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
field: 'startDate',
|
||||
},
|
||||
{
|
||||
title: '结束日期(仅date_type=3时有效)',
|
||||
field: 'endDate',
|
||||
},
|
||||
{
|
||||
title: '状态：0-未生效，1-已生效',
|
||||
field: 'status',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键ID',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '排班名称',
|
||||
fieldName: 'scheduleName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '考勤组ID',
|
||||
fieldName: 'groupId',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '排班类型：1-固定班制，2-排班制',
|
||||
fieldName: 'scheduleType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '日期类型：1-单个日期，2-长期有效，3-期间有效',
|
||||
fieldName: 'dateType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '开始日期',
|
||||
fieldName: 'startDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '结束日期(仅date_type=3时有效)',
|
||||
fieldName: 'endDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '状态：0-未生效，1-已生效',
|
||||
fieldName: 'status',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
optionType: 'button',
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,11 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { ref } from 'vue';
|
||||
import calendarView from './calendarView.vue'
|
||||
import scheduleView from './scheduleView.vue';
|
||||
const viewMode = ref<'calender' | 'schedule'>('calender');
|
||||
// const isCalenderView = ref(true);
|
||||
function handleViewModeChange(mode:'calender' | 'schedule'){
|
||||
viewMode.value = mode
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
排班管理
|
||||
<div class="p-4 h-full">
|
||||
<div class="p-4 h-full bg-white">
|
||||
<calendarView v-show="viewMode === 'calender'" :viewMode="viewMode" @changeView="handleViewModeChange"/>
|
||||
<scheduleView v-show="viewMode === 'schedule'" :viewMode="viewMode" @changeView="handleViewModeChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
<script lang="ts" setup>
|
||||
import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
import {ref} from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { Dayjs } from 'dayjs';
|
||||
import { columns, querySchema } from './data';
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
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';
|
||||
|
||||
|
||||
|
||||
|
||||
const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
|
||||
|
||||
const props = defineProps<{
|
||||
viewMode:'calender' | 'schedule'
|
||||
}>();
|
||||
const value = ref<Dayjs>();
|
||||
const onPanelChange = (value: Dayjs, mode: string) => {
|
||||
console.log(value, mode);
|
||||
};
|
||||
// 切换视图模式
|
||||
function handleViewModeChange(e: RadioChangeEvent): void {
|
||||
// 将父组件的isCalenderView变为false
|
||||
emit('changeView',e.target.value)
|
||||
}
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
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,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await arrangementList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-arrangement-index'
|
||||
};
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [ArrangementModal, modalApi] = useVbenModal({
|
||||
connectedComponent: arrangementModal,
|
||||
});
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<ArrangementForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<ArrangementForm>) {
|
||||
await arrangementRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
</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>
|
||||
<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 table-title="排班列表">
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:arrangement:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
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>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user