Merge remote-tracking branch 'origin/master'

src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue

@@ -18,9 +18,11 @@
       <div class="approval-history-filter__dept">
         <a-switch v-model:checked="onlyCurrentDept" :disabled="currentUserDeptList.length === 0" @change="handleCurrentDeptChange" />
         <span class="approval-history-filter__dept-text">仅看本部门审批历史</span>
+        <a-button type="primary" size="small" class="approval-history-filter__assignee-btn" @click="handleQueryCurrentAssignee">查询当前办理人</a-button>
       </div>
     </div>
     <BasicTable @register="registerTable" />
+    <CurrentNodeModal ref="currentNodeModalRef" />
   </div>
 </template>
 
@@ -33,6 +35,7 @@
   import type { BasicColumn } from '/@/components/Table';
   import { onMounted, ref, watch } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { defHttp } from '/@/utils/http/axios';
   import { list as queryApprovalOpinionList } from '/@/views/taskApprovalOpinion/TaskApprovalOpinion.api';
 
@@ -67,10 +70,13 @@
     { title: '审批意见', dataIndex: 'opinion', align: 'left' },
   ];
 
-  export default {
+  import CurrentNodeModal from '/@/components/semri/process/CurrentNodeModal.vue';
+
+export default {
     name: 'TaskApprovalHistoryContent',
     components: {
       BasicTable,
+      CurrentNodeModal,
     },
     props: {
       formData: {
@@ -80,6 +86,7 @@
     },
     setup(props) {
       const userStore = useUserStore();
+      const { createMessage } = useMessage();
       const allApprovalHistoryList = ref<ApprovalHistoryRecord[]>([]);
       const taskNameOptions = ref<string[]>([]);
       const selectedTaskNames = ref<string[]>([]);
@@ -88,6 +95,7 @@
       const currentUserDeptIdSet = ref<Set<string>>(new Set());
       const currentUserDeptCodeSet = ref<Set<string>>(new Set());
       const currentUserDeptNameSet = ref<Set<string>>(new Set());
+      const currentNodeModalRef = ref();
       let currentUserDeptLoaded = false;
       let currentUserDeptLoadPromise: Promise<void> | null = null;
 
@@ -175,6 +183,15 @@
         setTableData(getFilteredApprovalHistoryList());
       }
 
+      function handleQueryCurrentAssignee() {
+        const processInstId = getProcessInstId();
+        if (!processInstId) {
+          createMessage.error('流程尚未发起，无法查询');
+          return;
+        }
+        currentNodeModalRef.value?.open({ processInstId });
+      }
+
       function handleTaskNameChange(checkedValues: string[]) {
         selectedTaskNames.value = checkedValues;
         applyApprovalHistoryFilter();
@@ -325,67 +342,80 @@
         selectedTaskNames,
         onlyCurrentDept,
         currentUserDeptList,
+        currentNodeModalRef,
         handleTaskNameChange,
         handleCurrentDeptChange,
         selectAllTaskNames,
         clearTaskNames,
+        handleQueryCurrentAssignee,
       };
     },
   };
 </script>
-
 <style lang="less" scoped>
-  .approval-history-pane {
-    height: 100%;
-    padding: 4px 0;
-  }
+.approval-history-pane {
+  height: 100%;
+  // 1. 增加 padding，16px 左右，24px 上下，给四周留出足够的呼吸感
+  padding: 16px 24px;
+  box-sizing: border-box;
+  background-color: #fff; // 确保有纯白背景，防止透出底色显得贴边
+}
 
-  .approval-history-filter {
-    margin-bottom: 8px;
-    padding: 4px 0;
-  }
+.approval-history-filter {
+  margin-bottom: 16px; // 2. 增加过滤栏和下方表格的间距
+  padding: 12px 16px;
+  background-color: #fafafa; // 3. 给过滤区域加一个浅色微背景框，视觉上更有层次感
+  border-radius: 4px;
+}
 
-  .approval-history-filter__dept {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 10px;
-    line-height: 24px;
-  }
+.approval-history-filter__main {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
 
-  .approval-history-filter__dept-text {
-    color: rgba(0, 0, 0, 0.85);
-  }
+.approval-history-filter__label {
+  flex: 0 0 auto;
+  line-height: 32px;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500; // 稍微加粗标签
+}
 
-  .approval-history-filter__main {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-  }
+.approval-history-filter__checkboxes {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  min-width: 0;
+  padding-top: 5px;
 
-  .approval-history-filter__label {
-    flex: 0 0 auto;
-    line-height: 32px;
-    color: rgba(0, 0, 0, 0.85);
+  :deep(.ant-checkbox-wrapper) {
+    margin-left: 0;
   }
+}
 
-  .approval-history-filter__checkboxes {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    gap: 6px 12px;
-    min-width: 0;
-    padding-top: 5px;
+.approval-history-filter__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  line-height: 32px;
+}
 
-    :deep(.ant-checkbox-wrapper) {
-      margin-left: 0;
-    }
-  }
+.approval-history-filter__dept {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px; // 稍微拉开上下两排过滤器的距离
+  line-height: 24px;
+  border-top: 1px dashed #f0f0f0; // 加一条虚线分割，更美观
+  padding-top: 12px;
+}
 
-  .approval-history-filter__actions {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    line-height: 32px;
-  }
+.approval-history-filter__dept-text {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.approval-history-filter__assignee-btn {
+  margin-left: auto;
+}
 </style>