【功能修改】 新审批页面 v4 部分修改

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -507,7 +507,7 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝')
 OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
 OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
 OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
-OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回')
 OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
 
 // 默认的按钮权限设置

src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue

@@ -119,7 +119,6 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置发起人的按钮权限
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING
-  console.log('currentNode.value.buttonsSetting==>', currentNode.value.buttonsSetting)
   settingVisible.value = false
   return true
 }

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
+    <template #header v-if="showHeader">
       <span class="el-icon-picture-outline">流程图</span>
     </template>
     <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
@@ -16,7 +16,8 @@ defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
   id: propTypes.string, // 流程实例的编号
-  bpmnXml: propTypes.string // BPMN XML
+  bpmnXml: propTypes.string, // BPMN XML
+  showHeader: propTypes.bool.def(true), // 是否显示头
 })
 
 const view = ref({

src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue

@@ -391,7 +391,7 @@
       </div>
     </el-popover>
 
-    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <!--【撤消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
     <el-popover
       :visible="popOverVisible.cancel"
       placement="top-start"
@@ -401,7 +401,7 @@
     >
       <template #reference>
         <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
-          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 撤消
         </div>
       </template>
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
@@ -413,18 +413,18 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-form-item label="取消理由" prop="cancelReason">
-            <span class=" text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
+          <el-form-item label="撤消理由" prop="cancelReason">
+            <span class=" text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
             <el-input
               v-model="genericForm.cancelReason"
               clearable
-              placeholder="请输入取消理由"
+              placeholder="请输入撤消理由"
               type="textarea"
               :rows="3"
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">取消</el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">撤消</el-button>
             <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
@@ -493,11 +493,12 @@ const formRef = ref()
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
-  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '撤消理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
+  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
+  targetTaskDefinitionKey:  [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
 })
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -530,7 +531,9 @@ const openPopover = (type: string) => {
       popOverVisible.value[item] = false
     }
   })
-  formRef.value.resetFields()
+  nextTick().then(() => {
+    formRef.value.resetFields()
+  })
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -814,7 +817,7 @@ defineExpose({ loadTodoTask })
 .btn-container {
   > div {
     display: flex;
-    margin: 0 15px;
+    margin: 0 8px;
     cursor: pointer;
     align-items: center;
 

src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue

@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
+    <template #header v-if="showHeader">
       <span class="el-icon-picture-outline">审批记录</span>
     </template>
     <el-col :offset="3" :span="17">
@@ -104,7 +104,8 @@ defineOptions({ name: 'BpmProcessInstanceTaskList' })
 defineProps({
   loading: propTypes.bool, // 是否加载中
   processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+  tasks: propTypes.arrayOf(propTypes.object), // 流程任务的数组
+  showHeader: propTypes.bool.def(true), // 是否显示头
 })
 
 /** 获得流程实例对应的颜色 */

src/views/bpm/processInstance/detail/index_new.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
     <div class="processInstance-wrap-main">
       <el-scrollbar>
         <img
@@ -73,7 +73,7 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" />
+              <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" :show-header="false"/>
             </div>
           </el-tab-pane>
 
@@ -85,6 +85,7 @@
                   :loading="tasksLoad"
                   :process-instance="processInstance"
                   :tasks="tasks"
+                  :show-header="false"
                 />
               </el-scrollbar>
             </div>
@@ -305,27 +306,27 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-$wrap-padding-height: 30px;
+$wrap-padding-height: 20px;
 $wrap-margin-height: 15px;
 $button-height: 51px;
 $process-header-height: 194px;
 
 .processInstance-wrap-main {
   height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
   );
   max-height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
   );
   overflow: auto;
 
   .form-scroll-area {
     height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
         $process-header-height - 40px
     );
     max-height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
         $process-header-height - 40px
     );
     overflow: auto;