hrp-ui-base 1.4.6 → 1.4.7

package/src/components/layout/ApprovalCenterDrawer.vue

@@ -1,231 +1,231 @@
-<!--
- * @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 { LAYOUT_ROUTER_KEY } from "./plugin";
-import { navigateByDomainRoute } from "./utils/redirect";
-
-// 默认头像 - 使用一个简单的 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 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;
-  await navigateByDomainRoute(item.approveUrl, router);
-  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>
+<!--
+ * @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 { LAYOUT_ROUTER_KEY } from "./plugin";
+import { navigateByDomainRoute } from "./utils/redirect";
+
+// 默认头像 - 使用一个简单的 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 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;
+  await navigateByDomainRoute(item.approveUrl, router);
+  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>