hrp-ui-base 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrp-ui-base",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "HRP 前端公共组件、工具方法和基础样式包",
   "type": "module",
   "sideEffects": [

package/src/api/bms/file/FileExportController.ts

@@ -0,0 +1,19 @@
+import HttpUtil from "../../../utils/HttpUtil";
+import type ResponseBeanTablePage from "../../common/ResponseBeanTablePage";
+import type TableQueryCriteriaVO from "../../common/TableQueryCriteriaVO";
+import FileExportVO from "./bo/FileExportVO";
+
+/**文件导出 */
+export default class FileExportController {
+  /**
+   * 获取文件导出列表
+   */
+  static selectExportList(
+    queryCriteriaVO: TableQueryCriteriaVO
+  ): Promise<ResponseBeanTablePage<FileExportVO[]>> {
+    return HttpUtil.postJson(
+      "/bms/export/file/select-export-list",
+      queryCriteriaVO
+    );
+  }
+}

package/src/api/bms/file/bo/FileExportVO.ts

@@ -0,0 +1,17 @@
+/**
+ * 文件导出信息
+ */
+export default class FileExportVO {
+  /**文件id */
+  fileId: string = "";
+  /**文件名称 */
+  fileName: string = "";
+  /**文件类型 */
+  fileType: string = "";
+  /**文件大小 */
+  fileSize: string = "";
+  /**创建时间 */
+  createTime: string = "";
+  /**进度条 */
+  progressBar: number = 0;
+}

package/src/api/bms/flow/FlowInstanceController.ts

@@ -1,6 +1,8 @@
 import HttpUtil from "../../../utils/HttpUtil";
 import type ResponseBean from "../../common/ResponseBean";
 import type ResponseBeanList from "../../common/ResponseBeanList";
+import type ResponseBeanTablePage from "../../common/ResponseBeanTablePage";
+import type TableQueryCriteriaVO from "../../common/TableQueryCriteriaVO";
 import FlowInstanceBO from "../flow/bo/FlowInstanceBO";
 import AuditBaseInfo from "../flow/bo/AuditBaseInfo";
 import NodeShowVo from "../flow/bo/NodeShowVo";
@@ -164,4 +166,14 @@ export default class FlowInstanceController {
   static getRecommendReplyList(id: string, type: string): Promise<ResponseBean<string[]>> {
     return HttpUtil.get("/bms/work-flow-instance/getRecommendReplies", { id, type });
   }
+
+  /** 获取审批列表 - 分页查询 */
+  static selectAssociatedApprovalFormListByTest(
+    queryCriteriaVO: TableQueryCriteriaVO
+  ): Promise<ResponseBeanTablePage<AssociatedApprovalVO[]>> {
+    return HttpUtil.postJson(
+      "/bms/work-flow-instance/selectAssociatedApprovalFormListByTest",
+      queryCriteriaVO
+    );
+  }
 }

package/src/components/layout/ApprovalCenterDrawer.vue

@@ -0,0 +1,236 @@
+<!--
+ * @description: 审批中心抽屉
+ * @fileName: ApprovalCenterDrawer.vue
+-->
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    title="审批中心"
+    direction="rtl"
+    size="560px"
+    :append-to-body="true"
+    @close="handleClose"
+  >
+    <div class="approval-drawer-content" v-loading="loading">
+      <div class="approval-drawer-list" v-if="approvalList.length > 0">
+        <el-card
+          v-for="(item, index) in approvalList"
+          :key="index"
+          shadow="hover"
+          class="approval-drawer-item"
+          @click="gotoRelatedPage(item)"
+        >
+          <div class="approval-item-body">
+            <el-badge
+              is-dot
+              class="item"
+              style="display: inline-block; margin-right: 8px"
+              :hidden="item.statusName !== '审批中'"
+            >
+              <div style="width: 32px; height: 32px">
+                <img
+                  style="border-radius: 8px"
+                  :src="item.avatar || defaultAvatar"
+                  :alt="item.createUserName"
+                  width="100%"
+                />
+              </div>
+            </el-badge>
+            <div class="approval-item-info">
+              <div class="approval-item-title">
+                {{ item.createUserName + "发起的" + item.jobName }}
+              </div>
+              <div class="approval-item-sub">
+                发起人：{{ item.createUserName }}
+              </div>
+              <div class="approval-item-time">
+                发起时间：{{ item.createTime }}
+              </div>
+            </div>
+            <div class="approval-item-status">
+              <el-tag v-if="item.statusName === '已通过'" type="success">{{ item.statusName }}</el-tag>
+              <el-tag v-else-if="item.statusName === '已拒绝'" type="danger">{{ item.statusName }}</el-tag>
+              <el-tag v-else-if="item.statusName === '审批中'" type="primary">{{ item.statusName }}</el-tag>
+              <el-tag v-else-if="item.statusName === '已撤销'" type="info">{{ item.statusName }}</el-tag>
+              <el-tag v-else>{{ item.statusName }}</el-tag>
+            </div>
+          </div>
+        </el-card>
+      </div>
+      <div class="approval-drawer-pagination" v-if="total > 0">
+        <el-pagination
+          v-model:current-page="pageNum"
+          v-model:page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          small
+          @current-change="handlePageChange"
+        />
+      </div>
+      <div v-if="!loading && approvalList.length === 0" class="approval-drawer-empty">
+        <el-empty description="暂无审批记录" />
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, inject } from "vue";
+import FlowInstanceController from "../../api/bms/flow/FlowInstanceController";
+import type AssociatedApprovalVO from "../../api/bms/flow/bo/AssociatedApprovalVO";
+import TableQueryCriteriaVO from "../../api/common/TableQueryCriteriaVO";
+import { useLayoutMenuStore } from "./stores/useLayoutMenuStore";
+import { LAYOUT_ROUTER_KEY } from "./plugin";
+
+// 默认头像 - 使用一个简单的 SVG data URI
+const defaultAvatar = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23e0e0e0'/%3E%3Ccircle cx='16' cy='12' r='5' fill='%23fff'/%3E%3Cpath d='M6 28c0-5.5 4.5-10 10-10s10 4.5 10 10' fill='%23fff'/%3E%3C/svg%3E";
+
+const props = defineProps<{
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:visible", val: boolean): void;
+}>();
+
+const router = inject<any>(LAYOUT_ROUTER_KEY);
+const menuStore = useLayoutMenuStore();
+
+const drawerVisible = ref(false);
+const loading = ref(false);
+const approvalList = ref<AssociatedApprovalVO[]>([]);
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+
+watch(
+  () => props.visible,
+  (val) => {
+    drawerVisible.value = val;
+    if (val) {
+      pageNum.value = 1;
+      loadData();
+    }
+  }
+);
+
+watch(
+  () => drawerVisible.value,
+  (val) => {
+    if (!val) {
+      emit("update:visible", false);
+    }
+  }
+);
+
+const handleClose = () => {
+  emit("update:visible", false);
+};
+
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const query = new TableQueryCriteriaVO();
+    query.pageNum = pageNum.value;
+    query.pageSize = pageSize.value;
+    const data = await FlowInstanceController.selectAssociatedApprovalFormListByTest(query);
+    if (data && data.code === 200 && data.res) {
+      approvalList.value = data.res.records || [];
+      total.value = data.res.total || 0;
+    }
+  } catch (e) {
+    console.error("加载审批列表失败", e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handlePageChange = () => {
+  loadData();
+};
+
+/** 跳转到审批详情页 */
+const gotoRelatedPage = async (item: AssociatedApprovalVO) => {
+  if (!item.approveUrl) return;
+  // 跨系统判断
+  if (item.funSystem && item.funSystem !== localStorage.getItem("current-application-id")) {
+    await menuStore.getDomainAndHomeMenu(item.approveUrl, router);
+  }
+  router?.push(item.approveUrl);
+  emit("update:visible", false);
+};
+</script>
+
+<style scoped lang="scss">
+.approval-drawer-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.approval-drawer-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 4px;
+}
+
+.approval-drawer-item {
+  cursor: pointer;
+  margin-bottom: 10px;
+
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+}
+
+.approval-item-body {
+  display: flex;
+  align-items: flex-start;
+}
+
+.approval-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.approval-item-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--el-text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.approval-item-sub {
+  font-size: 12px;
+  color: var(--el-color-info);
+  margin: 6px 0;
+}
+
+.approval-item-time {
+  font-size: 12px;
+  color: var(--el-color-info);
+}
+
+.approval-item-status {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+.approval-drawer-pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 0;
+  flex-shrink: 0;
+}
+
+.approval-drawer-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/layout/ExportCenterDrawer.vue

@@ -0,0 +1,164 @@
+<!--
+ * @description: 下载中心抽屉
+ * @fileName: ExportCenterDrawer.vue
+-->
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    title="下载中心"
+    direction="rtl"
+    size="560px"
+    :append-to-body="true"
+    @close="handleClose"
+  >
+    <div class="export-drawer-content" v-loading="loading">
+      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
+        <el-table-column prop="fileName" label="文件名" align="center" show-overflow-tooltip />
+        <el-table-column prop="fileType" label="类型" align="center" width="80" show-overflow-tooltip />
+        <el-table-column prop="fileSize" label="大小" align="center" width="100" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" align="center" width="160" show-overflow-tooltip />
+        <el-table-column label="操作" align="center" width="80" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="downloadFile(row)">下载</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="export-drawer-pagination" v-if="total > 0">
+        <el-pagination
+          v-model:current-page="pageNum"
+          v-model:page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          small
+          @current-change="handlePageChange"
+        />
+      </div>
+      <div v-if="!loading && tableData.length === 0" class="export-drawer-empty">
+        <el-empty description="暂无导出文件" />
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import FileExportController from "../../api/bms/file/FileExportController";
+import FileUploadController from "../../api/bms/file/FileUploadController";
+import type FileExportVO from "../../api/bms/file/bo/FileExportVO";
+import TableQueryCriteriaVO from "../../api/common/TableQueryCriteriaVO";
+import { useLayoutConfigStore } from "./stores/useLayoutConfigStore";
+
+const props = defineProps<{
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:visible", val: boolean): void;
+}>();
+
+const configStore = useLayoutConfigStore();
+
+const drawerVisible = ref(false);
+const loading = ref(false);
+const tableData = ref<FileExportVO[]>([]);
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+
+watch(
+  () => props.visible,
+  (val) => {
+    drawerVisible.value = val;
+    if (val) {
+      pageNum.value = 1;
+      loadData();
+    }
+  }
+);
+
+watch(
+  () => drawerVisible.value,
+  (val) => {
+    if (!val) {
+      emit("update:visible", false);
+    }
+  }
+);
+
+const handleClose = () => {
+  emit("update:visible", false);
+};
+
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const query = new TableQueryCriteriaVO();
+    query.pageNum = pageNum.value;
+    query.pageSize = pageSize.value;
+    const data = await FileExportController.selectExportList(query);
+    if (data && data.code === 200 && data.res) {
+      tableData.value = data.res.records || [];
+      total.value = data.res.total || 0;
+    }
+  } catch (e) {
+    console.error("加载导出文件列表失败", e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handlePageChange = () => {
+  loadData();
+};
+
+/** 根据 minio 或 oss 获取下载链接并下载 */
+const downloadFile = async (row: FileExportVO) => {
+  const fileType = configStore.userConfig.fileUploadType;
+  let downloadUrl = "";
+  try {
+    if (fileType === "minio") {
+      const res = await FileUploadController.getMinioFileUrl(row.fileId);
+      downloadUrl = res.res?.url || "";
+    } else {
+      const res = await FileUploadController.getFileUrl(row.fileId);
+      downloadUrl = res.res?.url || "";
+    }
+  } catch (e) {
+    ElMessage.error("获取下载地址失败");
+    return;
+  }
+
+  if (downloadUrl) {
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.download = row.fileName;
+    a.href = downloadUrl;
+    a.target = "_blank";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } else {
+    ElMessage.error("读取文件信息错误");
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.export-drawer-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.export-drawer-pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 0;
+}
+.export-drawer-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/layout/LayoutContainer.vue

@@ -72,6 +72,11 @@
     <!-- 页面内容区域（默认插槽透传） -->
     <slot></slot>
   </BaseLayout>
+
+  <!-- 下载中心抽屉 -->
+  <ExportCenterDrawer v-model:visible="exportDrawerVisible" />
+  <!-- 审批中心抽屉 -->
+  <ApprovalCenterDrawer v-model:visible="approvalDrawerVisible" />
 </template>
 
 <script lang="ts" setup>
@@ -90,6 +95,8 @@ import SysHeader from "./SysHeader.vue";
 import SysHeaderTabs from "./SysHeaderTabs.vue";
 import SideMenu from "./sideMenu.vue";
 import PersonalizationGuideDialog from "./personalization-guide-dialog.vue";
+import ExportCenterDrawer from "./ExportCenterDrawer.vue";
+import ApprovalCenterDrawer from "./ApprovalCenterDrawer.vue";
 import { useLayoutConfigStore } from "./stores/useLayoutConfigStore";
 import { useLayoutMenuStore } from "./stores/useLayoutMenuStore";
 import { useLayoutTabsStore } from "./stores/useLayoutTabsStore";
@@ -161,6 +168,8 @@ const userConfigData = computed(() => ({
 
 // ====== 状态 ======
 const showNoviceGuide = ref(false);
+const exportDrawerVisible = ref(false);
+const approvalDrawerVisible = ref(false);
 const updateNum = ref<number>(0);
 const notificationRefs = ref<Map<string, any>>(new Map());
 
@@ -234,11 +243,11 @@ const handleChangeMenuPosition = (value: string) => {
 };
 
 const handleDownloadClick = () => {
-  router?.push({ path: "/bms/base-manage/base-information/export-center" });
+  exportDrawerVisible.value = true;
 };
 
 const handleTodoClick = () => {
-  router?.push({ path: "/bms/base-manage/base-information/approval-center" });
+  approvalDrawerVisible.value = true;
 };
 
 const handleMessageNavigate = async (notice: NoticeVO) => {

package/src/components/layout/index.ts

@@ -8,6 +8,8 @@ export { default as SideMenuSonList } from './sideMenuSonList.vue'
 export { default as PersonalizationGuideDialog } from './personalization-guide-dialog.vue'
 export { default as MessageNotificationDrawer } from './message/message-notification-drawer.vue'
 export { default as LayoutContainer } from './LayoutContainer.vue'
+export { default as ExportCenterDrawer } from './ExportCenterDrawer.vue'
+export { default as ApprovalCenterDrawer } from './ApprovalCenterDrawer.vue'
 
 // Sub-components
 export { default as DarkComponent } from './components/dark-component.vue'