refactor: empty占位

apps/web-antd/src/views/workflow/components/approval-panel.vue

@@ -393,197 +393,201 @@ async function handleCopy(text: string) {
 </script>
 
 <template>
-  <Card
+  <div class="w-full">
-    v-if="task"
+    <Card
-    :body-style="{ overflowY: 'auto', height: '100%' }"
+      v-if="task"
-    :loading="loading"
+      :body-style="{ overflowY: 'auto', height: '100%' }"
-    class="thin-scrollbar flex-1 overflow-y-hidden"
+      :loading="loading"
-    size="small"
+      class="thin-scrollbar flex-1 overflow-y-hidden"
-  >
+      size="small"
-    <template #title>
-      <div class="flex items-center gap-2">
-        <div>编号: {{ task.id }}</div>
-        <CopyOutlined class="cursor-pointer" @click="handleCopy(task.id)" />
-      </div>
-    </template>
-    <template #extra>
-      <a-button size="small" @click="() => handleLoadInfo(task)">
-        <div class="flex items-center justify-center">
-          <span class="icon-[material-symbols--refresh] size-24px"></span>
-        </div>
-      </a-button>
-    </template>
-    <div class="flex flex-col gap-5 p-4">
-      <div class="flex flex-col gap-3">
-        <div class="flex items-center gap-2">
-          <div class="text-2xl font-bold">{{ task.flowName }}</div>
-          <div>
-            <component
-              :is="renderDict(task.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
-            />
-          </div>
-        </div>
-        <div class="flex items-center gap-2">
-          <VbenAvatar
-            :alt="task?.createByName ?? ''"
-            class="bg-primary size-[28px] rounded-full text-white"
-            src=""
-          />
-          <span>{{ task.createByName }}</span>
-          <div class="flex items-center opacity-50">
-            <div class="flex items-center gap-1">
-              <span class="icon-[bxs--category-alt] size-[16px]"></span>
-              流程分类: {{ task.categoryName }}
-            </div>
-            <Divider type="vertical" />
-            <div class="flex items-center gap-1">
-              <span class="icon-[mdi--clock-outline] size-[16px]"></span>
-              提交时间: {{ task.createTime }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <Tabs v-if="currentFlowInfo" class="flex-1">
-        <TabPane key="1" tab="审批详情">
-          <ApprovalDetails
-            :current-flow-info="currentFlowInfo"
-            :iframe-loaded="iframeLoaded"
-            :iframe-height="iframeHeight"
-            :task="task"
-          />
-        </TabPane>
-        <TabPane key="2" tab="审批流程图">
-          <FlowPreview :instance-id="currentFlowInfo.instanceId" />
-        </TabPane>
-      </Tabs>
-    </div>
-    <!-- 固定底部 -->
-    <div class="h-[57px]"></div>
-    <div
-      v-if="showFooter"
-      class="border-t-solid bg-background absolute bottom-0 left-0 w-full border-t-[1px] p-3"
     >
-      <div class="flex justify-end">
+      <template #title>
-        <Space v-if="type === 'myself'">
+        <div class="flex items-center gap-2">
-          <a-button
+          <div>编号: {{ task.id }}</div>
-            v-if="revocable"
+          <CopyOutlined class="cursor-pointer" @click="handleCopy(task.id)" />
-            danger
+        </div>
-            ghost
+      </template>
-            type="primary"
+      <template #extra>
-            :icon="h(RollbackOutlined)"
+        <a-button size="small" @click="() => handleLoadInfo(task)">
-            @click="handleCancel"
+          <div class="flex items-center justify-center">
-          >
+            <span class="icon-[material-symbols--refresh] size-24px"></span>
-            撤销申请
+          </div>
-          </a-button>
+        </a-button>
-          <a-button
+      </template>
-            type="primary"
+      <div class="flex flex-col gap-5 p-4">
-            ghost
+        <div class="flex flex-col gap-3">
-            v-if="editableAndRemoveable"
+          <div class="flex items-center gap-2">
-            :icon="h(EditOutlined)"
+            <div class="text-2xl font-bold">{{ task.flowName }}</div>
-            @click="handleEdit"
+            <div>
-          >
+              <component
-            重新编辑
+                :is="renderDict(task.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
-          </a-button>
+              />
-          <a-button
+            </div>
-            v-if="editableAndRemoveable"
+          </div>
-            danger
+          <div class="flex items-center gap-2">
-            ghost
+            <VbenAvatar
-            type="primary"
+              :alt="task?.createByName ?? ''"
-            :icon="h(EditOutlined)"
+              class="bg-primary size-[28px] rounded-full text-white"
-            @click="handleRemove"
+              src=""
-          >
+            />
-            删除
+            <span>{{ task.createByName }}</span>
-          </a-button>
+            <div class="flex items-center opacity-50">
-        </Space>
+              <div class="flex items-center gap-1">
-        <Space v-if="type === 'approve'">
+                <span class="icon-[bxs--category-alt] size-[16px]"></span>
-          <a-button
+                流程分类: {{ task.categoryName }}
-            type="primary"
+              </div>
-            ghost
+              <Divider type="vertical" />
-            :icon="h(CheckOutlined)"
+              <div class="flex items-center gap-1">
-            @click="handleApproval"
+                <span class="icon-[mdi--clock-outline] size-[16px]"></span>
-          >
+                提交时间: {{ task.createTime }}
-            通过
+              </div>
-          </a-button>
+            </div>
-          <a-button
+          </div>
-            v-if="buttonPermissions?.termination"
+        </div>
-            danger
+        <Tabs v-if="currentFlowInfo" class="flex-1">
-            ghost
+          <TabPane key="1" tab="审批详情">
-            type="primary"
+            <ApprovalDetails
-            :icon="h(ExclamationCircleOutlined)"
+              :current-flow-info="currentFlowInfo"
-            @click="handleTermination"
+              :iframe-loaded="iframeLoaded"
-          >
+              :iframe-height="iframeHeight"
-            终止
+              :task="task"
-          </a-button>
+            />
-          <a-button
+          </TabPane>
-            v-if="buttonPermissions?.back"
+          <TabPane key="2" tab="审批流程图">
-            danger
+            <FlowPreview :instance-id="currentFlowInfo.instanceId" />
-            ghost
+          </TabPane>
-            type="primary"
+        </Tabs>
-            :icon="h(ArrowLeftOutlined)"
-            @click="handleRejection"
-          >
-            驳回
-          </a-button>
-          <Dropdown
-            :get-popup-container="getPopupContainer"
-            placement="bottomRight"
-          >
-            <template #overlay>
-              <Menu>
-                <MenuItem
-                  v-if="buttonPermissions?.trust"
-                  key="1"
-                  @click="() => delegationModalApi.open()"
-                >
-                  <UserOutlined class="mr-2" />委托
-                </MenuItem>
-                <MenuItem
-                  v-if="buttonPermissions?.transfer"
-                  key="2"
-                  @click="() => transferModalApi.open()"
-                >
-                  <RollbackOutlined class="mr-2" /> 转办
-                </MenuItem>
-                <MenuItem
-                  v-if="showMultiActions && buttonPermissions?.addSign"
-                  key="3"
-                  @click="() => addSignatureModalApi.open()"
-                >
-                  <UsergroupAddOutlined class="mr-2" /> 加签
-                </MenuItem>
-                <MenuItem
-                  v-if="showMultiActions && buttonPermissions?.subSign"
-                  key="4"
-                  @click="() => reductionSignatureModalApi.open()"
-                >
-                  <UsergroupDeleteOutlined class="mr-2" /> 减签
-                </MenuItem>
-              </Menu>
-            </template>
-            <a-button v-if="showButtonOther" :icon="h(MenuOutlined)">
-              其他
-            </a-button>
-          </Dropdown>
-          <ApprovalModal @complete="$emit('reload')" />
-          <RejectionModal @complete="$emit('reload')" />
-          <DelegationModal mode="single" @finish="handleDelegation" />
-          <TransferModal mode="single" @finish="handleTransfer" />
-          <AddSignatureModal mode="multiple" @finish="handleAddSignature" />
-          <ReductionSignatureModal
-            mode="multiple"
-            @finish="handleReductionSignature"
-          />
-        </Space>
-        <Space v-if="type === 'admin'">
-          <a-button @click="handleFlowInterfere"> 流程干预 </a-button>
-          <a-button @click="() => updateAssigneeModalApi.open()">
-            修改办理人
-          </a-button>
-          <FlowInterfereModal @complete="$emit('reload')" />
-          <UpdateAssigneeModal mode="single" @finish="handleUpdateAssignee" />
-        </Space>
       </div>
-    </div>
+      <!-- 固定底部 -->
-  </Card>
+      <div class="h-[57px]"></div>
-  <Fallback v-else title="点击左侧选择" />
+      <div
+        v-if="showFooter"
+        class="border-t-solid bg-background absolute bottom-0 left-0 w-full border-t-[1px] p-3"
+      >
+        <div class="flex justify-end">
+          <Space v-if="type === 'myself'">
+            <a-button
+              v-if="revocable"
+              danger
+              ghost
+              type="primary"
+              :icon="h(RollbackOutlined)"
+              @click="handleCancel"
+            >
+              撤销申请
+            </a-button>
+            <a-button
+              type="primary"
+              ghost
+              v-if="editableAndRemoveable"
+              :icon="h(EditOutlined)"
+              @click="handleEdit"
+            >
+              重新编辑
+            </a-button>
+            <a-button
+              v-if="editableAndRemoveable"
+              danger
+              ghost
+              type="primary"
+              :icon="h(EditOutlined)"
+              @click="handleRemove"
+            >
+              删除
+            </a-button>
+          </Space>
+          <Space v-if="type === 'approve'">
+            <a-button
+              type="primary"
+              ghost
+              :icon="h(CheckOutlined)"
+              @click="handleApproval"
+            >
+              通过
+            </a-button>
+            <a-button
+              v-if="buttonPermissions?.termination"
+              danger
+              ghost
+              type="primary"
+              :icon="h(ExclamationCircleOutlined)"
+              @click="handleTermination"
+            >
+              终止
+            </a-button>
+            <a-button
+              v-if="buttonPermissions?.back"
+              danger
+              ghost
+              type="primary"
+              :icon="h(ArrowLeftOutlined)"
+              @click="handleRejection"
+            >
+              驳回
+            </a-button>
+            <Dropdown
+              :get-popup-container="getPopupContainer"
+              placement="bottomRight"
+            >
+              <template #overlay>
+                <Menu>
+                  <MenuItem
+                    v-if="buttonPermissions?.trust"
+                    key="1"
+                    @click="() => delegationModalApi.open()"
+                  >
+                    <UserOutlined class="mr-2" />委托
+                  </MenuItem>
+                  <MenuItem
+                    v-if="buttonPermissions?.transfer"
+                    key="2"
+                    @click="() => transferModalApi.open()"
+                  >
+                    <RollbackOutlined class="mr-2" /> 转办
+                  </MenuItem>
+                  <MenuItem
+                    v-if="showMultiActions && buttonPermissions?.addSign"
+                    key="3"
+                    @click="() => addSignatureModalApi.open()"
+                  >
+                    <UsergroupAddOutlined class="mr-2" /> 加签
+                  </MenuItem>
+                  <MenuItem
+                    v-if="showMultiActions && buttonPermissions?.subSign"
+                    key="4"
+                    @click="() => reductionSignatureModalApi.open()"
+                  >
+                    <UsergroupDeleteOutlined class="mr-2" /> 减签
+                  </MenuItem>
+                </Menu>
+              </template>
+              <a-button v-if="showButtonOther" :icon="h(MenuOutlined)">
+                其他
+              </a-button>
+            </Dropdown>
+            <ApprovalModal @complete="$emit('reload')" />
+            <RejectionModal @complete="$emit('reload')" />
+            <DelegationModal mode="single" @finish="handleDelegation" />
+            <TransferModal mode="single" @finish="handleTransfer" />
+            <AddSignatureModal mode="multiple" @finish="handleAddSignature" />
+            <ReductionSignatureModal
+              mode="multiple"
+              @finish="handleReductionSignature"
+            />
+          </Space>
+          <Space v-if="type === 'admin'">
+            <a-button @click="handleFlowInterfere"> 流程干预 </a-button>
+            <a-button @click="() => updateAssigneeModalApi.open()">
+              修改办理人
+            </a-button>
+            <FlowInterfereModal @complete="$emit('reload')" />
+            <UpdateAssigneeModal mode="single" @finish="handleUpdateAssignee" />
+          </Space>
+        </div>
+      </div>
+    </Card>
+    <slot v-else name="empty">
+      <Fallback title="点击左侧选择" />
+    </slot>
+  </div>
 </template>

apps/web-antd/src/views/workflow/components/flow-info-modal.vue

@@ -6,6 +6,8 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
+import { Spin } from 'ant-design-vue';
+
 import { getTaskByBusinessId } from '#/api/workflow/instance';
 
 import { ApprovalPanel } from '.';
@@ -36,6 +38,14 @@ const [BasicModal, modalApi] = useVbenModal({
 
 <template>
   <BasicModal>
-    <ApprovalPanel :task="taskInfo" type="readonly" />
+    <!-- :task="taskInfo" -->
+    <ApprovalPanel type="readonly">
+      <template #empty>
+        <Spin
+          class="flex h-[200px] w-full items-center justify-center"
+          size="large"
+        />
+      </template>
+    </ApprovalPanel>
   </BasicModal>
 </template>