fix

src/components/ImageDisplay/index.vue

@@ -2,7 +2,7 @@
   <Transition>
     <div
       v-if="visible"
-      class="fixed h-screen w-screen top-0 left-0 flex items-center justify-center flex-col"
+      class="fixed h-screen w-screen top-0 left-0 flex items-center justify-center flex-col z-30"
     >
       <div class="opacity-70 bg-black absolute w-full h-full"></div>
       <div

src/views/copyrightManagement/CopyrightTable.vue

@@ -74,6 +74,9 @@ import HoverShowReason from "./HoverShowReason.vue";
 import { useTableScrollListener } from "@/components/Table/hooks";
 import { eOperate } from "./types";
 import { router } from "@/router";
+import { deleteCopyRights } from "@/service/copyrightService";
+import { iCopyRight } from "@/types/copyright";
+import { ElMessage } from "element-plus";
 
 defineProps<{
   data: any[];
@@ -91,10 +94,27 @@ const emit = defineEmits<{
     }
   ): void;
   (e: "clickStatusFilter", payload: eStatusOfCopyright): void;
+  (
+    e: "viewCertificates",
+    payload: {
+      url: string;
+    }
+  ): void;
+  (
+    e: "downloadCert",
+    payload: {
+      url: string;
+    }
+  ): void;
+  (e: "refresh"): void;
 }>();
 
 const tableRef = ref<InstanceType<typeof Table>>();
 
+defineExpose({
+  tableRef,
+});
+
 useTableScrollListener(tableRef, () => {
   emit("scrollToEnd");
 });
@@ -108,8 +128,7 @@ const getOperateList = (slotProps: any) => {
   }));
 };
 
-const handleClickItem = (value: eOperate, slotProps: any) => {
-  console.log(value, slotProps);
+const handleClickItem = async (value: eOperate, slotProps: iCopyRight) => {
   switch (value) {
     case eOperate.seeDetails:
       router.push({
@@ -119,6 +138,31 @@ const handleClickItem = (value: eOperate, slotProps: any) => {
         },
       });
       break;
+    case eOperate.viewCertificates:
+      emit("viewCertificates", {
+        url: slotProps.certificate,
+      });
+      break;
+    case eOperate.downloadCertificates:
+      emit("downloadCert", {
+        url: slotProps.certificate,
+      });
+      break;
+    case eOperate.edit:
+      router.push({
+        name: "addCopyRight",
+        query: {
+          id: slotProps.id,
+        },
+      });
+      break;
+    case eOperate.delete:
+      const res = await deleteCopyRights([slotProps.id]);
+      if (res && res.code === 200) {
+        ElMessage.success("删除成功");
+        emit("refresh");
+      }
+      break;
   }
 };
 

src/views/copyrightManagement/index.vue

@@ -63,6 +63,7 @@
       </div>
       <div class="flex-grow overflow-hidden mt-4">
         <CopyrightTable
+          ref="CopyrightTableRef"
           v-show="activedMenu === eTableTab.going"
           :data="tableData"
           :loading="loading"
@@ -70,11 +71,31 @@
           height="100%"
           @scrollToEnd="fetchNextPage"
           @clickStatusFilter="handleClickStatusFilter"
+          @view-certificates="
+            ({ url }) => {
+              imgUrl = url;
+              imageDisplayVisible = true;
+            }
+          "
+          @download-cert="
+            ({ url }) => {
+              saveAs(url);
+            }
+          "
+          @refresh="handleRefetch"
         >
         </CopyrightTable>
       </div>
     </div>
     <CopyRightNotify v-model:visible="copyRightNotifyVisible"></CopyRightNotify>
+    <ImageDisplay :url="imgUrl" v-model:visible="imageDisplayVisible">
+      <div class="flex mt-7">
+        <div class="imgBtn mr-2.5" @click="saveAs(imgUrl)">保存证书</div>
+        <div class="imgBtn" @click="printJS('imageDisplay', 'html')">
+          打印证书
+        </div>
+      </div></ImageDisplay
+    >
   </LayoutVue>
 </template>
 <script lang="ts" setup>
@@ -93,13 +114,19 @@ import { debounce } from "lodash";
 import CopyRightNotify from "@/components/Dialogs/CopyRightNotify/index.vue";
 import { getCopyRights } from "@/service/copyrightService";
 import { iCopyRight } from "@/types/copyright";
+import ImageDisplay from "@/components/ImageDisplay/index.vue";
+import { saveAs } from "file-saver";
+import printJS from "print-js";
 
 const copyRightNotifyVisible = ref(false);
 const searchValue = ref("");
-
+const imgUrl = ref("");
+const imageDisplayVisible = ref(false);
 const activedMenu = ref(eTableTab.going);
 const currentStatusForGoing = ref(eStatusOfCopyright.ALL); // 进行中的表格的状态
 
+const CopyrightTableRef = ref<InstanceType<typeof CopyrightTable>>();
+
 const fetchTableData = async ({
   page,
   page_size,
@@ -158,16 +185,36 @@ const {
 });
 
 const refetchDebounce = debounce(() => {
-  refetch();
+  handleRefetch();
 }, 500);
 
+function handleRefetch() {
+  CopyrightTableRef.value?.tableRef?.scrollTo(0, 0);
+  refetch();
+}
+
 const handleClickStatusFilter = (status: eStatusOfCopyright) => {
   currentStatusForGoing.value = status;
-  refetch();
+  handleRefetch();
 };
 
 watch(searchValue, () => {
   refetchDebounce();
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.imgBtn {
+  width: 100px;
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+</style>