80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import dayjs from 'dayjs';
|
|
|
|
import {
|
|
leaveApplicationExport,
|
|
leaveApplicationList,
|
|
leaveApplicationRemove,
|
|
} from '#/api/property/personalCenter/leaveApplication';
|
|
import type { LeaveApplicationForm } from '#/api/property/personalCenter/leaveApplication/model';
|
|
|
|
import { useVbenForm } from '#/adapter/form';
|
|
import { useVbenModal} from '@vben/common-ui';
|
|
import {modalSchema} from "./data";
|
|
import { useVModel } from '@vueuse/core';
|
|
import { Button, message } from 'ant-design-vue';
|
|
|
|
const [BasicForm, formApi] = useVbenForm({
|
|
commonConfig: {
|
|
formItemClass: 'col-span-1',
|
|
// 默认label宽度 px
|
|
labelWidth: 160,
|
|
// 通用配置项 会影响到所有表单项
|
|
componentProps: {
|
|
class: 'w-full',
|
|
},
|
|
},
|
|
schema: modalSchema(),
|
|
showDefaultActions: false,
|
|
wrapperClass: 'grid-cols-2',
|
|
});
|
|
|
|
// 提交处理函数
|
|
async function handleSubmit() {
|
|
const { valid } = await formApi.validate();
|
|
if (!valid) {
|
|
message.error('请完善表单信息');
|
|
return;
|
|
}
|
|
|
|
const formData = await formApi.getValues();
|
|
formData.startTime = dayjs(formData.startTime).format('YYYY-MM-DD HH:mm:ss');
|
|
formData.endTime = dayjs(formData.endTime).format('YYYY-MM-DD HH:mm:ss');
|
|
|
|
console.log('提交数据:', formData);
|
|
// await leaveApplicationAdd(formData);
|
|
|
|
message.success('提交成功');
|
|
await formApi.resetForm();
|
|
}
|
|
async function cleanForm () {
|
|
await formApi.resetForm();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-8">
|
|
<div class="text-2xl font-bold">请假申请</div>
|
|
<div class="m-6 bg-white p-4">
|
|
<BasicForm/>
|
|
<div class="flex justify-center mt-6 gap-2">
|
|
<Button type="primary" @click="handleSubmit">提交申请</Button>
|
|
<Button @click="cleanForm">重置</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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),
|
|
: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>
|