feat: 个人中心

apps/web-antd/src/views/property/personalCenter/leaveApplication/data.ts

@@ -3,7 +3,8 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
-
+import {resident_unitList} from '#/api/property/resident/unit/index'
+import dayjs from 'dayjs';
 
 export const modalSchema: FormSchemaGetter = () => [
   {
@@ -25,6 +26,15 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '部门',
     fieldName: 'departmentId',
     component: 'ApiSelect',
+    componentProps:{
+      api: async () => {
+        const res = await resident_unitList({pageSize:1000000000,pageNum:1})
+        return res;
+      },
+      resultField:'rows',
+      labelField:'name',
+      valueField:'id'
+    },
     rules:'required'
   },
   {
@@ -32,43 +42,126 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'leaveType',
     component: 'Select',
     componentProps: {
+      options:getDictOptions('wy_qjlx')
     },
     rules:'required'
   },
+  {
+    label: '',
+    fieldName: 'Placeholder',
+    component: ''
+  },
   {
     label: '开始时间',
     fieldName: 'startTime',
     component: 'DatePicker',
-    componentProps: {
+    componentProps: (values)=>({
       showTime: true,
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
-    },
+      onChange: (value: string) => {
+        if (value && values.endTime) {
+          const start = dayjs(value);
+          const end = dayjs(values.endTime);
+          const diffMinutes = end.diff(start, 'minute');
+          
+          if (diffMinutes < 0) {
+            values.totalDuration = '时间计算错误';
+            return;
+          }
+          
+          const days = Math.floor(diffMinutes / (24 * 60));
+          const remainingMinutes = diffMinutes % (24 * 60);
+          const hours = Math.floor(remainingMinutes / 60);
+          const minutes = remainingMinutes % 60;
+          
+          let durationText = '';
+          if (days > 0) {
+            durationText += `${days}天`;
+          }
+          if (hours > 0 || days > 0) {
+            durationText += `${hours}小时`;
+          }
+          durationText += `${minutes}分钟`;
+          
+          // 更新合计时间字段
+          values.totalDuration = durationText;
+        } else {
+          // 如果开始时间被清空，也清空合计时间
+          values.totalDuration = '';
+        }
+      },
+    }),
     rules:'required'
-
   },
   {
     label: '结束时间',
     fieldName: 'endTime',
     component: 'DatePicker',
-    componentProps: {
+    componentProps: (values)=>({
       showTime: true,
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
-    },
-    rules:'required'
+      placeholder:!values.startTime?'请先选择开始时间':'请选择结束时间（结束时间不能早于开始时间）',
+      disabled:!values.startTime,
+      disabledDate: (current: any) => {
+        if (!values.startTime) return false;
+        // 只允许选择大于等于开始时间的日期，将小于等于的时间禁用
+        return current && current <= dayjs(values.startTime).startOf('second');
+      },
+      onChange: (value: string) => {
+        if (values.startTime && value) {
+          const start = dayjs(values.startTime);
+          const end = dayjs(value);
+          const diffMinutes = end.diff(start, 'minute');
+          
+          if (diffMinutes < 0) {
+            values.totalDuration = '时间计算错误';
+            return;
+          }
+          
+          const days = Math.floor(diffMinutes / (24 * 60));
+          const remainingMinutes = diffMinutes % (24 * 60);
+          const hours = Math.floor(remainingMinutes / 60);
+          const minutes = remainingMinutes % 60;
+          
+          let durationText = '';
+          if (days > 0) {
+            durationText += `${days}天`;
+          }
+          if (hours > 0 || days > 0) {
+            durationText += `${hours}小时`;
+          }
+          durationText += `${minutes}分钟`;
+          
+          // 更新合计时间字段
+          values.totalDuration = durationText;
+        } else {
+          // 如果结束时间被清空，也清空合计时间
+          values.totalDuration = '';
+        }
+      },
+    }),
+    rules:'required',
+    dependencies:{
+      triggerFields:['startTime']
+    }
   },
   {
     label: '合计时间',
     fieldName: 'totalDuration',
     component: 'Input',
     disabled:true,
-    rules:'required'
+    rules:'required',
+    componentProps:{
+      placeholder:'请选择开始时间与结束时间'
+    }
   },
   {
     label: '请假事由',
     fieldName: 'reason',
     component: 'Textarea',
-    rules:'required'
+    rules:'required',
+    formItemClass: 'col-span-2'
   }
 ];

apps/web-antd/src/views/property/personalCenter/leaveApplication/index.vue

@@ -12,6 +12,7 @@ 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: {
@@ -25,8 +26,30 @@ const [BasicForm, formApi] = useVbenForm({
   },
   schema: modalSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2 gap-x-10 gap-y-2',
+  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>
@@ -34,6 +57,23 @@ const [BasicForm, formApi] = useVbenForm({
     <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>