REVIEW OA 请假

Author: YunaiV

src/api/bpm/leave/index.ts

@@ -22,6 +22,6 @@ export const getLeave = async (id: number) => {
 }
 
 // 获得请假申请分页
-export const getLeavePage = async (params) => {
+export const getLeavePage = async (params: PageParam) => {
   return await request.get({ url: '/bpm/oa/leave/page', params })
 }

src/types/auto-imports.d.ts

@@ -6,6 +6,7 @@ export {}
 declare global {
   const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']

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

@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="发起OA请假流程" v-model="modelVisible">
+  <Dialog title="发起 OA 请假流程" v-model="modelVisible">
     <el-form
       ref="formRef"
       :model="formData"
@@ -71,17 +71,6 @@ const open = async () => {
   modelVisible.value = true
   resetForm()
 }
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    type: undefined,
-    reason: undefined,
-    startTime: undefined,
-    endTime: undefined
-  }
-  formRef.value?.resetFields()
-}
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
@@ -95,7 +84,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as LeaveApi.LeaveVO
-    await LeaveApi.createLeaveApi(data)
+    await LeaveApi.createLeave(data)
     message.success('新增成功')
     modelVisible.value = false
     // 发送操作成功的事件
@@ -104,4 +93,15 @@ const submitForm = async () => {
     formLoading.value = false
   }
 }
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    type: undefined,
+    reason: undefined,
+    startTime: undefined,
+    endTime: undefined
+  }
+  formRef.value?.resetFields()
+}
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <content-wrap>
+  <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -56,15 +56,15 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button @click="handleCreate()"
-          ><Icon icon="ep:plus" class="mr-5px" /> 发起请假</el-button
-        >
+        <el-button type="primary" plain @click="handleCreate()">
+          <Icon icon="ep:plus" class="mr-5px" /> 发起请假
+        </el-button>
       </el-form-item>
     </el-form>
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 列表 -->
-  <content-wrap>
+  <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column label="申请编号" align="center" prop="id" />
       <el-table-column label="状态" align="center" prop="result">
@@ -99,36 +99,33 @@
         width="180"
         :formatter="dateFormatter"
       />
-
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-        width="200"
-      >
+      <el-table-column label="操作" align="center" width="200">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="cancelLeave(scope.row)"
-            v-hasPermi="['bpm:oa-leave:create']"
-            v-if="scope.row.result === 1"
-            >取消</el-button
-          >
           <el-button
             link
             type="primary"
             @click="handleDetail(scope.row)"
             v-hasPermi="['bpm:oa-leave:query']"
-            >详情</el-button
           >
+            详情
+          </el-button>
           <el-button
             link
             type="primary"
             @click="handleProcessDetail(scope.row)"
             v-hasPermi="['bpm:oa-leave:query']"
-            >进度</el-button
           >
+            进度
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="cancelLeave(scope.row)"
+            v-hasPermi="['bpm:oa-leave:create']"
+            v-if="scope.row.result === 1"
+          >
+            取消
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -139,28 +136,27 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </content-wrap>
+  </ContentWrap>
 
   <!-- 表单弹窗：详情 -->
   <LeaveDetail ref="detailRef" />
-
   <!-- 表单弹窗：添加 -->
   <LeaveForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="OaLeave">
+<script setup lang="ts" name="BpmOALeave">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as LeaveApi from '@/api/bpm/leave'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import LeaveDetail from './detail.vue'
 import LeaveForm from './create.vue'
+const message = useMessage() // 消息弹窗
+const router = useRouter() // 路由
+const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-
-const message = useMessage() // 消息弹窗
-const router = useRouter()
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -175,7 +171,7 @@ const queryFormRef = ref() // 搜索的表单
 const getList = async () => {
   loading.value = true
   try {
-    const data = await LeaveApi.getLeavePageApi(queryParams)
+    const data = await LeaveApi.getLeavePage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -207,20 +203,23 @@ const handleDetail = (data: LeaveApi.LeaveVO) => {
   detailRef.value.open(data)
 }
 
-// 取消请假弹窗
-const cancelLeave = (row) => {
-  ElMessageBox.prompt('请输入取消原因', '取消流程', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+/** 取消请假操作 */
+const cancelLeave = async (row) => {
+  // 二次确认
+  const { value } = await 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('取消成功')
   })
+  // 发起取消
+  await ProcessInstanceApi.cancelProcessInstance(row.id, value)
+  message.success('取消成功')
+  // 刷新列表
+  await getList()
 }
 
-// 审批进度
+/** 审批进度 */
 const handleProcessDetail = (row) => {
   router.push({
     name: 'BpmProcessInstanceDetail',

src/views/mp/autoReply/index.vue

@@ -182,7 +182,7 @@
     </el-dialog>
   </ContentWrap>
 </template>
-<script setup>
+<script setup name="MpAutoReply">
 import { ref, reactive, onMounted, nextTick } from 'vue'
 import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'