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

考勤

Browse Source
This commit is contained in:
FLL 2025-07-19 17:17:58 +08:00
parent 5be03ab8c5
commit 62e45c3e94
4 changed files with 146 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
apps/web-antd/src/views/property/attendanceManagement/shiftSetting/data.ts
View File

@ -1,6 +1,6 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
export const querySchema: FormSchemaGetter = () => [
{
@ -9,68 +9,25 @@ export const querySchema: FormSchemaGetter = () => [
label: '班次名称',
},
{
component: 'DatePicker',
component: 'Select',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'startTime',
label: '考勤开始时间',
},
{
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'endTime',
label: '考勤结束时间',
},
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
optionType: 'button',
options: getDictOptions('wy_state'),
},
fieldName: 'status',
label: '状态',
},
{
component: 'Input',
fieldName: 'isRest',
label: '是否休息',
},
{
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'restStartTime',
label: '休息开始时间',
},
{
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
fieldName: 'restEndTime',
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();
},
},
},
{
title: '班次名称',
@ -87,18 +44,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '状态',
field: 'status',
},
{
title: '是否休息',
field: 'isRest',
},
{
title: '休息开始时间',
field: 'restStartTime',
},
{
title: '休息结束时间',
field: 'restEndTime',
slots: {default: 'state'},
},
{
field: 'action',
@ -125,57 +71,46 @@ export const modalSchema: FormSchemaGetter = () => [
component: 'Input',
},
{
label: '考勤开始时间',
fieldName: 'startTime',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
label: '考勤时间',
fieldName: 'attendanceTimeRange',
component: 'Input',
rules: 'required',
slots:{
default: 'attendanceTimeRange'
}
},
{
label: '考勤结束时间',
fieldName: 'endTime',
component: 'DatePicker',
label: '是否休息',
fieldName: 'isRest',
component: 'RadioGroup',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
options: [
{ label: '不休息', value: '0' },
{ label: '休息', value: '1' },
],
},
rules: 'required',
},
{
label: '中途休息时间',
fieldName: 'restTimeRange',
component: 'Input',
rules: 'required',
slots:{
default: 'restTimeRange'
},
dependencies: {
show: (formValue) =>formValue.isRest==1 ,
triggerFields: ['isRest'],
},
},
{
label: '状态',
fieldName: 'status',
component: 'RadioGroup',
component: 'Select',
componentProps: {
buttonStyle: 'solid',
optionType: 'button',
},
},
{
label: '是否休息',
fieldName: 'isRest',
component: 'Input',
},
{
label: '休息开始时间',
fieldName: 'restStartTime',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
},
{
label: '休息结束时间',
fieldName: 'restEndTime',
component: 'DatePicker',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
options: getDictOptions('wy_state'),
},
rules: 'required',
},
];

70
apps/web-antd/src/views/property/attendanceManagement/shiftSetting/index.vue
View File

@ -1,30 +1,22 @@
<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 {
shiftExport,
shiftList,
shiftRemove,
} from '#/api/Property/attendanceManagement/shiftSetting';
import type { ShiftForm } from '#/api/Property/attendanceManagement/shiftSetting/model';
import { commonDownloadExcel } from '#/utils/file/download';
shiftUpdate
} from '#/api/property/attendanceManagement/shiftSetting';
import type { ShiftForm } from '#/api/property/attendanceManagement/shiftSetting/model';
import shiftModal from './shift-modal.vue';
import shiftDetail from './shift-detail.vue';
import { columns, querySchema } from './data';
import {TableSwitch} from "#/components/table";
const formOptions: VbenFormProps = {
commonConfig: {
@ -35,28 +27,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,
@ -75,7 +52,6 @@ const gridOptions: VxeGridProps = {
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'Property-shift-index'
};
@ -84,6 +60,15 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
gridOptions,
});
const [shiftDetailModal, shiftDetailApi] = useVbenModal({
connectedComponent: shiftDetail,
});
async function handleInfo(row: Required<ShiftForm>) {
shiftDetailApi.setData({ id: row.id });
shiftDetailApi.open();
}
const [ShiftModal, modalApi] = useVbenModal({
connectedComponent: shiftModal,
});
@ -116,12 +101,6 @@ function handleMultiDelete() {
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(shiftExport, '班次表数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
</script>
<template>
@ -129,12 +108,6 @@ function handleDownloadExcel() {
<BasicTable table-title="班次表列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['Property:shift:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
@ -152,8 +125,22 @@ function handleDownloadExcel() {
</a-button>
</Space>
</template>
<template #state="{ row }">
<TableSwitch
:checkedValue="1"
:unCheckedValue="0"
v-model:value="row.status"
:api="() => shiftUpdate(row)"
@reload="() => tableApi.query()"
/>
</template>
<template #action="{ row }">
<Space>
<ghost-button
@click.stop="handleInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['Property:shift:edit']"
@click.stop="handleEdit(row)"
@ -178,5 +165,6 @@ function handleDownloadExcel() {
</template>
</BasicTable>
<ShiftModal @reload="tableApi.query()" />
<shiftDetailModal/>
</Page>
</template>

58
apps/web-antd/src/views/property/attendanceManagement/shiftSetting/shift-detail.vue Normal file
View File

@ -0,0 +1,58 @@
<script setup lang="ts">
import type {ShiftVO} from '#/api/property/attendanceManagement/shiftSetting/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {shiftInfo} from '#/api/property/attendanceManagement/shiftSetting';
import {renderDict} from "#/utils/render";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
shiftSettingDetail.value = null;
},
});
const shiftSettingDetail = shallowRef<null | ShiftVO>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
shiftSettingDetail.value =await shiftInfo(id);
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="班次管理详情" class="w-[70%]">
<Descriptions v-if="shiftSettingDetail" size="small" :column="2" bordered
:labelStyle="{width:'140px'}">
<DescriptionsItem label="班次名称">
{{ shiftSettingDetail.name }}
</DescriptionsItem>
<DescriptionsItem label="考勤时间">
{{ shiftSettingDetail.startTime ? shiftSettingDetail.startTime + '-' + shiftSettingDetail.endTime : '-' }}
</DescriptionsItem>
<DescriptionsItem label="是否休息">
{{ shiftSettingDetail.isRest===0 ? '不休息' : '休息' }}
</DescriptionsItem>
<DescriptionsItem label="中途休息时间">
{{ shiftSettingDetail.isRest===1 ? shiftSettingDetail.restStartTime + '-' + shiftSettingDetail.restEndTime : '-' }}
</DescriptionsItem>
<DescriptionsItem label="状态" v-if="shiftSettingDetail.status!=null">
<component
:is="renderDict(shiftSettingDetail.status,'wy_state')"
/>
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>

22
apps/web-antd/src/views/property/attendanceManagement/shiftSetting/shift-modal.vue
View File

@ -1,15 +1,16 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { shiftAdd, shiftInfo, shiftUpdate } from '#/api/Property/attendanceManagement/shiftSetting';
import { shiftAdd, shiftInfo, shiftUpdate } from '#/api/property/attendanceManagement/shiftSetting';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
import {TimeRangePicker} from "ant-design-vue";
const emit = defineEmits<{ reload: [] }>();
@ -23,7 +24,7 @@ const [BasicForm, formApi] = useVbenForm({
// 默认占满两列
formItemClass: 'col-span-2',
// 默认label宽度 px
labelWidth: 80,
labelWidth: 100,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
@ -76,6 +77,12 @@ async function handleConfirm() {
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
data.startTime = dayjs(data.attendanceTimeRange[0]).format('HH:mm:ss');
data.endTime = dayjs(data.attendanceTimeRange[1]).format('HH:mm:ss');
data.restStartTime = dayjs(data.restTimeRange[0]).format('HH:mm:ss');
data.restEndTime = dayjs(data.restTimeRange[1]).format('HH:mm:ss');
delete data.attendanceTimeRange;
delete data.restTimeRange;
await (isUpdate.value ? shiftUpdate(data) : shiftAdd(data));
resetInitialized();
emit('reload');
@ -95,7 +102,14 @@ async function handleClosed() {
<template>
<BasicModal :title="title">
<BasicForm />
<BasicForm>
<template #attendanceTimeRange="slotProps">
<TimeRangePicker format="HH:mm:ss" v-bind="slotProps"></TimeRangePicker>
</template>
<template #restTimeRange="slotProps">
<TimeRangePicker format="HH:mm:ss" v-bind="slotProps"></TimeRangePicker>
</template>
</BasicForm>
</BasicModal>
</template>