From 7d40e36574e7510388674b231efdfc981ca2ebac Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 24 Nov 2022 01:34:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`@pureadmin/table`?=
 =?UTF-8?q?=20=E6=89=93=E5=8D=B0=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pure-table/high/list.tsx           |  9 +++-
 src/views/pure-table/high/prints/columns.tsx | 50 ++++++++++++++++++++
 src/views/pure-table/high/prints/index.vue   | 34 +++++++++++++
 3 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 src/views/pure-table/high/prints/columns.tsx
 create mode 100644 src/views/pure-table/high/prints/index.vue

diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx
index 392e0fd49..e6d4b3837 100644
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -4,6 +4,7 @@ import Contextmenu from "./contextmenu/index.vue";
 import Execl from "./execl/index.vue";
 import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
+import Print from "./prints/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -42,7 +43,13 @@ export const list = [
   {
     key: "watermark",
     content: rendContent("watermark"),
-    title: "表格水印",
+    title: "水印",
     component: Watermark
+  },
+  {
+    key: "print",
+    content: rendContent("print"),
+    title: "打印",
+    component: Print
   }
 ];
diff --git a/src/views/pure-table/high/prints/columns.tsx b/src/views/pure-table/high/prints/columns.tsx
new file mode 100644
index 000000000..fde7c599e
--- /dev/null
+++ b/src/views/pure-table/high/prints/columns.tsx
@@ -0,0 +1,50 @@
+import Print from "@/utils/print";
+import { ref, type Ref } from "vue";
+import { tableDataEdit } from "../data";
+import { clone } from "@pureadmin/utils";
+
+export function useColumns(printRef: Ref) {
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  const print = () => {
+    Print(printRef.value.getTableRef().$refs.tableWrapper).toPrint;
+  };
+
+  function headerCellStyle({ columnIndex }) {
+    return columnIndex === 0
+      ? { background: "#f3b2d0" }
+      : { background: "#fafafa" };
+  }
+  function rowStyle({ rowIndex }) {
+    return rowIndex % 2 === 1
+      ? { background: "#ffa39e" }
+      : { background: "#91d5ff" };
+  }
+
+  return {
+    columns,
+    dataList,
+    print,
+    headerCellStyle,
+    rowStyle
+  };
+}
diff --git a/src/views/pure-table/high/prints/index.vue b/src/views/pure-table/high/prints/index.vue
new file mode 100644
index 000000000..c1d75b08e
--- /dev/null
+++ b/src/views/pure-table/high/prints/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const printRef = ref();
+const { columns, dataList, print, rowStyle, headerCellStyle } =
+  useColumns(printRef);
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" @click="print" class="mb-[20px] float-right">
+      打印
+    </el-button>
+    <pure-table
+      ref="printRef"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+      :row-style="rowStyle"
+      :header-cell-style="headerCellStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 去掉鼠标悬停行背景色
+:deep(.el-table) {
+  tbody tr:hover > td {
+    background-color: transparent !important;
+  }
+}
+</style>