初始化项目，自 v1.7.1 版本开始

src/views/bpm/oa/leave/create.vue

@@ -0,0 +1,56 @@
+<template>
+  <ContentWrap>
+    <!-- 对话框(添加 / 修改) -->
+    <Form :schema="allSchemas.formSchema" :rules="rules" ref="formRef" />
+    <!-- 按钮：保存 -->
+    <XButton
+      type="primary"
+      :title="t('action.save')"
+      :loading="actionLoading"
+      @click="submitForm"
+    />
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { FormExpose } from '@/components/Form'
+// import XEUtils from 'xe-utils'
+
+// 业务相关的 import
+import * as LeaveApi from '@/api/bpm/leave'
+import { rules, allSchemas } from './leave.data'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push } = useRouter() // 路由
+
+// 表单参数
+const actionLoading = ref(false) // 按钮 Loading
+const formRef = ref<FormExpose>() // 表单 Ref
+
+// 提交按钮
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (!valid) {
+      return
+    }
+    try {
+      // 设置提交中
+      actionLoading.value = true
+      const data = unref(formRef)?.formModel as LeaveApi.LeaveVO
+      // data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss')
+      // data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss')
+      data.startTime = Date.parse(new Date(data.startTime).toString()).toString()
+      data.endTime = Date.parse(new Date(data.endTime).toString()).toString()
+      // 添加的提交
+      await LeaveApi.createLeaveApi(data)
+      message.success(t('common.createSuccess'))
+      // 关闭窗口
+      push('/bpm/oa/leave')
+    } finally {
+      actionLoading.value = false
+    }
+  })
+}
+</script>

src/views/bpm/oa/leave/detail.vue

@@ -0,0 +1,36 @@
+<template>
+  <ContentWrap>
+    <!-- 详情 -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="formData" />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+// 业务相关的 import
+import * as LeaveApi from '@/api/bpm/leave'
+import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
+
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
+
+const id = ref() // 请假编号
+// 表单参数
+const formData = ref({
+  startTime: undefined,
+  endTime: undefined,
+  type: undefined,
+  reason: undefined
+})
+
+onMounted(() => {
+  id.value = query.id
+  if (!id.value) {
+    message.error('未传递 id 参数，无法查看 OA 请假信息')
+    return
+  }
+  // 获得请假信息
+  LeaveApi.getLeaveApi(id.value).then((data) => {
+    formData.value = data
+  })
+})
+</script>

src/views/bpm/oa/leave/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <ContentWrap>
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：发起请假 -->
+        <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作: 取消请假 -->
+        <XTextButton
+          preIcon="ep:delete"
+          title="取消请假"
+          v-hasPermi="['bpm:oa-leave:create']"
+          v-if="row.result === 1"
+          @click="cancelLeave(row)"
+        />
+        <!-- 操作: 详情 -->
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
+        <!-- 操作: 审批进度 -->
+        <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
+      </template>
+    </XTable>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+// 全局相关的 import
+import { ElMessageBox } from 'element-plus'
+// 业务相关的 import
+import { allSchemas } from './leave.data'
+import * as LeaveApi from '@/api/bpm/leave'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push } = useRouter() // 路由
+
+const [registerTable, { reload }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: LeaveApi.getLeavePageApi
+})
+
+// 发起请假
+const handleCreate = () => {
+  push({
+    name: 'OALeaveCreate'
+  })
+}
+
+// 取消请假
+const cancelLeave = (row) => {
+  ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  }).then(async ({ value }) => {
+    await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value)
+    message.success('取消成功')
+    reload()
+  })
+}
+
+// 详情
+const handleDetail = (row) => {
+  push({
+    name: 'OALeaveDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+// 审批进度
+const handleProcessDetail = (row) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+</script>

src/views/bpm/oa/leave/leave.data.ts

@@ -0,0 +1,90 @@
+import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
+const { t } = useI18n() // 国际化
+
+// 表单校验
+export const rules = reactive({
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
+})
+
+// crudSchemas
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'id',
+  primaryTitle: '申请编号',
+  action: true,
+  actionWidth: '260',
+  columns: [
+    {
+      title: t('common.status'),
+      field: 'result',
+      dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+      dictClass: 'number',
+      isSearch: true,
+      isForm: false
+    },
+    {
+      title: t('common.startTimeText'),
+      field: 'startTime',
+      formatter: 'formatDay',
+      table: {
+        width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
+      }
+    },
+    {
+      title: t('common.endTimeText'),
+      field: 'endTime',
+      formatter: 'formatDay',
+      table: {
+        width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
+      }
+    },
+    {
+      title: '请假类型',
+      field: 'type',
+      dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '原因',
+      field: 'reason',
+      isSearch: true,
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      }
+    },
+    {
+      title: '申请时间',
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      },
+      isForm: false
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)