chore: leave表单

apps/web-antd/src/views/workflow/leave/data.tsx

@@ -110,10 +110,20 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '开始时间',
     fieldName: 'dateRange',
     component: 'RangePicker',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    componentProps(model) {
+      return {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        onChange: (dates: [string, string]) => {
+          if (!dates) {
+            model.leaveDays = null;
+            return;
+          }
+          const [start, end] = dates;
+          const leaveDays = dayjs(end).diff(dayjs(start), 'day') + 1;
+          model.leaveDays = leaveDays;
+        },
+      };
     },
     rules: 'required',
   },

apps/web-antd/src/views/workflow/leave/index.vue

@@ -3,7 +3,7 @@ import type { LeaveForm } from './api/model';
 
 import { useRouter } from 'vue-router';
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Page, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -17,7 +17,6 @@ import { commonDownloadExcel } from '#/utils/file/download';
 
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
-import leaveModal from './leave-modal.vue';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -66,18 +65,13 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-const [LeaveModal, modalApi] = useVbenModal({
-  connectedComponent: leaveModal,
-});
-
 const router = useRouter();
 function handleAdd() {
   router.push('/workflow/leaveEdit/index');
 }
 
 async function handleEdit(row: Required<LeaveForm>) {
-  modalApi.setData({ id: row.id });
-  modalApi.open();
+  router.push({ path: '/workflow/leaveEdit/index', query: { id: row.id } });
 }
 
 async function handleDelete(row: Required<LeaveForm>) {
@@ -165,6 +159,5 @@ function handleDownloadExcel() {
         </Space>
       </template>
     </BasicTable>
-    <LeaveModal @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/workflow/leave/leave-form.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Card } from 'ant-design-vue';
 import dayjs from 'dayjs';
+import { cloneDeep } from 'lodash-es';
 
 import { useVbenForm } from '#/adapter/form';
 
-import { leaveInfo } from './api';
+import { leaveAdd, leaveInfo } from './api';
 import { modalSchema } from './data';
 
 const route = useRoute();
-const disabled = route.query?.readonly === 'true';
+const readonly = route.query?.readonly === 'true';
 const id = route.query?.id as string;
 
+/**
+ * id存在&readonly时候
+ */
+const showActionBtn = computed(() => {
+  return id && !readonly;
+});
+
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
@@ -23,36 +31,51 @@ const [BasicForm, formApi] = useVbenForm({
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
-      disabled,
+      disabled: readonly,
     },
   },
   schema: modalSchema(),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
-  fieldMappingTime: [
-    [
-      'dateRange',
-      ['startDate', 'endDate'],
-      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-    ],
-  ],
 });
 
 onMounted(async () => {
   // 只读 获取信息赋值
-  if (id && disabled) {
+  if (id) {
     const resp = await leaveInfo(id);
     await formApi.setValues(resp);
     const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
     await formApi.setFieldValue('dateRange', dateRange);
   }
 });
+
+const router = useRouter();
+async function handleTempSave() {
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues()) as any;
+    // 处理日期
+    data.startDate = dayjs(data.dateRange[0]).format('YYYY-MM-DD HH:mm:ss');
+    data.endDate = dayjs(data.dateRange[1]).format('YYYY-MM-DD HH:mm:ss');
+    await leaveAdd(data);
+    router.push('/demo/leave');
+  } catch (error) {
+    console.error(error);
+  }
+}
 </script>
 
 <template>
   <Card>
     <div id="leave-form">
       <BasicForm />
+      <div v-if="showActionBtn" class="flex justify-end gap-2">
+        <a-button @click="handleTempSave">暂存</a-button>
+        <a-button type="primary">提交</a-button>
+      </div>
     </div>
   </Card>
 </template>