bpm：增加 OA 请假的列表

YunaiV
1 parent 1b60975e
Showing 9 changed files with 359 additions and 15 deletions
yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
yudao-ui-admin-vue3/src/router/modules/remaining.ts
yudao-ui-admin-vue3/src/types/auto-imports.d.ts
yudao-ui-admin-vue3/src/views/bpm/oa/index.vue
yudao-ui-admin-vue3/src/views/bpm/oa/leave/create.vue
yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
 import request from '@/config/axios'
-import { LeaveVO } from './types'
+
+export type LeaveVO = {
+  id: number
+  result: number
+  type: number
+  reason: string
+  processInstanceId: string
+  startTime: string
+  endTime: string
+  createTime: string
+}
 // 创建请假申请
 export const createLeaveApi = async (data: LeaveVO) => {
-export type LeaveVO = {
-  id: number
-  result: number
-  type: number
-  reason: string
-  processInstanceId: string
-  startTime: string
-  endTime: string
-  createTime: string
-}
@@ -220,6 +220,54 @@ const remainingRouter: AppRouteRecordRaw[] = [
           canTo: true,
           title: '任务分配规则'
         }
+      },
+      {
+        path: '/process-instance/create',
+        component: () => import('@/views/bpm/processInstance/create.vue'),
+        name: 'BpmProcessInstanceCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起流程',
+          activeMenu: 'bpm/processInstance/create'
+        }
+      },
+      {
+        path: '/process-instance/detail',
+        component: () => import('@/views/bpm/processInstance/detail.vue'),
+        name: 'BpmProcessInstanceDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '流程详情',
+          activeMenu: 'bpm/processInstance/detail'
+        }
+      },
+      {
+        path: '/oa/leave/create',
+        component: () => import('@/views/bpm/oa/leave/create.vue'),
+        name: 'OALeaveCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起 OA 请假',
+          activeMenu: 'bpm/oa/leave/create'
+        }
+      },
+      {
+        path: '/oa/leave/detail',
+        component: () => import('@/views/bpm/oa/leave/detail.vue'),
+        name: 'OALeaveDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '查看 OA 请假',
+          activeMenu: 'bpm/oa/leave/detail'
+        }
       }
     ]
   }
@@ -3,6 +3,7 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
-<template>
-  <div>index</div>
-</template>
-<script setup lang="ts" name="Oa"></script>
+<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>
+</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'
+
+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 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)
+      // 添加的提交
+      createLeaveApi(form.value).then((response) => {
+        console.log(response, 'response')
+        ElMessage({
+          type: 'success',
+          message: '发起成功'
+        })
+        push('/bpm/oa/leave')
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+</script>
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="开始时间：" prop="startTime">
+        {{ formatDate(form.startTime, '{y}-{m}-{d}') }}
+      </el-form-item>
+      <el-form-item label="结束时间：" prop="endTime">
+        {{ formatDate(form.endTime, '{y}-{m}-{d}') }}
+      </el-form-item>
+      <el-form-item label="请假类型：" prop="type">
+        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type" />
+      </el-form-item>
+      <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import { getLeaveApi } from '@/api/bpm/leave'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+// 请假编号
+const id = ref()
+// 表单参数
+const form = ref({
+  startTime: undefined,
+  endTime: undefined,
+  type: undefined,
+  reason: undefined
+})
+/** 获得请假信息 */
+const getDetail = () => {
+  getLeaveApi(id.value).then((response) => {
+    form.value = response.data
+  })
+}
+onMounted(() => {
+  id.value = router.currentRoute.value.query.id
+  if (!id.value) {
+    ElMessage({
+      type: 'error',
+      message: '未传递 id 参数，无法查看 OA 请假信息'
+    })
+    return
+  }
+  getDetail()
+})
+</script>
+<template>
+  <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:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+      <!-- 操作: 审批进度 -->
+      <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
+    </template>
+  </XTable>
+</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 router = useRouter() // 路由
+
+const [registerTable, { reload }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: LeaveApi.getLeavePageApi
+})
+
+// 发起请假
+const handleCreate = () => {
+  router.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) => {
+  router.push({
+    name: 'OALeaveDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+// 审批进度
+const handleProcessDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+</script>
+import { reactive } from 'vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { VxeCrudSchema, useVxeCrudSchemas } 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' }],
+  reason: [{ 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
+    },
+    {
+      title: t('common.startTimeText'),
+      field: 'startTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    },
+    {
+      title: t('common.endTimeText'),
+      field: 'endTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    },
+    {
+      title: '请假类型',
+      field: 'result',
+      dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '原因',
+      field: 'reason',
+      isSearch: true
+    },
+    {
+      title: '申请时间',
+      field: 'createTime',
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      },
+      isSearch: true,
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)