update 优化审批按钮，封装成公共组件

src/components/Process/approvalButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <div>
+      <el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="info" @click="submitForm('draft')">暂存</el-button>
+      <el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="primary" @click="submitForm('submit')">提 交</el-button>
+      <el-button v-if="approvalButtonShow" :loading="props.buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button>
+      <el-button v-if="props.id && props.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
+      <slot />
+    </div>
+    <div>
+      <el-button style="float: right" @click="goBack()">返回</el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const props = defineProps({
+  status: propTypes.string.def(''),
+  pageType: propTypes.string.def(''),
+  buttonLoading: propTypes.bool.def(false),
+  id: propTypes.string.def('') || propTypes.number.def()
+});
+const emits = defineEmits(['submitForm', 'approvalVerifyOpen', 'handleApprovalRecord']);
+//暂存，提交
+const submitForm = async (type) => {
+  emits('submitForm', type);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  emits('approvalVerifyOpen');
+};
+//审批记录
+const handleApprovalRecord = () => {
+  emits('handleApprovalRecord');
+};
+
+//校验提交按钮是否显示
+const submitButtonShow = computed(() => {
+  return (
+    props.pageType === 'add' ||
+    (props.pageType === 'update' && props.status && (props.status === 'draft' || props.status === 'cancel' || props.status === 'back'))
+  );
+});
+
+//校验审批按钮是否显示
+const approvalButtonShow = computed(() => {
+  return props.pageType === 'approval' && props.status && props.status === 'waiting';
+});
+
+//返回
+const goBack = () => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+</script>

src/views/workflow/leave/leaveEdit.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="p-2">
     <el-card shadow="never">
-      <div style="display: flex; justify-content: space-between">
+      <approvalButton
-        <div>
+        @submitForm="submitForm"
-          <el-button v-if="submitButtonShow" :loading="buttonLoading" type="info" @click="submitForm('draft')">暂存</el-button>
+        @approvalVerifyOpen="approvalVerifyOpen"
-          <el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary" @click="submitForm('submit')">提 交</el-button>
+        @handleApprovalRecord="handleApprovalRecord"
-          <el-button v-if="approvalButtonShow" :loading="buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button>
+        :buttonLoading="buttonLoading"
-          <el-button v-if="form && form.id && form.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
+        :id="form.id"
-        </div>
+        :status="form.status"
-        <div>
+        :pageType="routeParams.type"
-          <el-button style="float: right" @click="goBack()">返回</el-button>
+      />
-        </div>
-      </div>
     </el-card>
     <el-card shadow="never" style="height: 78vh; overflow-y: auto">
       <el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form" :rules="rules" label-width="80px">
@@ -64,6 +62,7 @@ import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
 import { startWorkFlow } from '@/api/workflow/task';
 import SubmitVerify from '@/components/Process/submitVerify.vue';
 import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
 import { AxiosResponse } from 'axios';
 import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -128,6 +127,8 @@ const dialogVisible = reactive<DialogOption>({
 const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
 //审批记录组件
 const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+//按钮组件
+const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
 
 const leaveFormRef = ref<ElFormInstance>();
 
@@ -276,12 +277,6 @@ const submitCallback = async () => {
   await proxy.$tab.closePage(proxy.$route);
   proxy.$router.go(-1);
 };
-
-//返回
-const goBack = () => {
-  proxy.$tab.closePage(proxy.$route);
-  proxy.$router.go(-1);
-};
 //审批
 const approvalVerifyOpen = async () => {
   submitVerifyRef.value.openDialog(routeParams.value.taskId);