bpm：增加 OA 请假的创建

yudao-module-bpm/yudao-module-bpm-biz/src/main/java/cn/iocoder/yudao/module/bpm/controller/admin/oa/vo/BpmOALeaveBaseVO.java

@@ -27,7 +27,7 @@ public class BpmOALeaveBaseVO {
     @ApiModelProperty(value = "请假类型", required = true, example = "1", notes = "参见 bpm_oa_type 枚举")
     private Integer type;
 
-    @ApiModelProperty(value = "原因", required = true, example = "阅读芋道源码")
+    @ApiModelProperty(value = "原因", example = "阅读芋道源码")
     private String reason;
 
 }

yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue

@@ -1,89 +1,56 @@
 <template>
-  <div class="app-container">
-    <el-form ref="createForm" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker clearable v-model="form.startTime" type="date" placeholder="选择开始时间" />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker clearable v-model="form.endTime" type="date" placeholder="选择结束时间" />
-      </el-form-item>
-      <el-form-item label="请假类型" prop="type">
-        <el-select v-model="form.type" placeholder="请选择">
-          <el-option
-            v-for="dict in typeDictData"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="原因" prop="reason">
-        <el-input
-          style="width: 650px"
-          type="textarea"
-          :rows="3"
-          v-model="form.reason"
-          placeholder="请输入原因"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(createForm)">提 交</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <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 { ref, reactive } from 'vue'
-import {
-  ElInput,
-  ElSelect,
-  ElOption,
-  ElForm,
-  ElFormItem,
-  ElMessage,
-  ElDatePicker
-} from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import { createLeaveApi } from '@/api/bpm/leave'
-import { getDictOptions, DICT_TYPE } from '@/utils/dict'
-import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+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 router = useRouter() // 路由
 
-const { push } = useRouter()
-const createForm = ref()
 // 表单参数
-const form = ref({
-  startTime: undefined,
-  endTime: undefined,
-  type: undefined,
-  reason: undefined
-})
-// 表单校验
-const rules = reactive({
-  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
-  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
-  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
-})
-const typeDictData = getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)
+const actionLoading = ref(false) // 按钮 Loading
+const formRef = ref<FormExpose>() // 表单 Ref
 
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log(form.value, 'submit!')
-      form.value.startTime = Date.parse(form.value.startTime)
-      form.value.endTime = Date.parse(form.value.endTime)
+// 提交按钮
+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')
       // 添加的提交
-      createLeaveApi(form.value).then((response) => {
-        console.log(response, 'response')
-        ElMessage({
-          type: 'success',
-          message: '发起成功'
-        })
-        push('/bpm/oa/leave')
+      await LeaveApi.createLeaveApi(data)
+      message.success(t('common.createSuccess'))
+      // 关闭窗口
+      await router.push({
+        path: '/oa/leave/create'
       })
-    } else {
-      console.log('error submit!', fields)
+    } finally {
+      actionLoading.value = false
     }
   })
 }

yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts

@@ -1,14 +1,12 @@
-import { reactive } from 'vue'
-import { DICT_TYPE } from '@/utils/dict'
 import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
+
+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' }],
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }]
+  type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
 })
 
 // crudSchemas
@@ -24,7 +22,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
       field: 'result',
       dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
       dictClass: 'number',
-      isSearch: true
+      isSearch: true,
+      isForm: false
     },
     {
       title: t('common.startTimeText'),
@@ -35,6 +34,9 @@ const crudSchemas = reactive<VxeCrudSchema>({
       },
       detail: {
         dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
       }
     },
     {
@@ -46,11 +48,14 @@ const crudSchemas = reactive<VxeCrudSchema>({
       },
       detail: {
         dateFormat: 'YYYY-MM-DD'
+      },
+      form: {
+        component: 'DatePicker'
       }
     },
     {
       title: '请假类型',
-      field: 'result',
+      field: 'type',
       dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
       dictClass: 'number',
       isSearch: true
@@ -58,7 +63,11 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: '原因',
       field: 'reason',
-      isSearch: true
+      isSearch: true,
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      }
     },
     {
       title: '申请时间',
@@ -73,7 +82,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
         itemRender: {
           name: 'XDataTimePicker'
         }
-      }
+      },
+      isForm: false
     }
   ]
 })