diff --git a/src/views/pure-table/high/data.ts b/src/views/pure-table/high/data.ts index a76fdda78..c2d96656d 100644 --- a/src/views/pure-table/high/data.ts +++ b/src/views/pure-table/high/data.ts @@ -62,14 +62,16 @@ const tableDataImage = clone(tableData, true).map((item, index) => }) ); -const tableDataSortable = clone(tableData, true).map((item, index) => +const tableDataSortable = clone(tableData, true).map((item, index) => { + delete item["date"]; Object.assign(item, { date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}` - }) -); + }); +}); const tableDataDrag = clone(tableData, true).map((item, index) => { delete item["address"]; + delete item["date"]; return Object.assign( { id: index + 1, @@ -80,6 +82,7 @@ const tableDataDrag = clone(tableData, true).map((item, index) => { }); const tableDataEdit = clone(tableData, true).map((item, index) => { + delete item["date"]; return Object.assign( { id: index + 1, diff --git a/src/views/pure-table/high/echarts/columns.tsx b/src/views/pure-table/high/echarts/columns.tsx new file mode 100644 index 000000000..192e9f07b --- /dev/null +++ b/src/views/pure-table/high/echarts/columns.tsx @@ -0,0 +1,91 @@ +import { + clone, + useDark, + useECharts, + type EchartOptions +} from "@pureadmin/utils"; +import { tableDataDrag } from "../data"; +import { templateRef } from "@vueuse/core"; +import { ref, type Ref, computed } from "vue"; +import { message } from "@pureadmin/components"; + +export function useColumns() { + const dataList = ref(clone(tableDataDrag, true).splice(0, 4)); + + const columns: TableColumnList = [ + { + label: "ID", + prop: "id" + }, + { + label: "姓名", + prop: "name" + }, + { + label: "日期", + prop: "date" + }, + { + label: "echarts图表", + slot: "echart" + } + ]; + + const { isDark } = useDark(); + + const theme: EchartOptions["theme"] = computed(() => { + return isDark.value ? "dark" : "light"; + }); + + dataList.value.forEach((_, i) => { + const { setOptions } = useECharts( + templateRef(`PieChartRef${i}`) as Ref, + { + theme + } + ); + + // https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html + setOptions( + { + tooltip: { + trigger: "item", + // 将 tooltip 控制在图表区域里 + confine: true + }, + series: [ + { + name: "Github信息", + type: "pie", + // center: ["30%", "50%"], + data: [ + { value: 1067, name: "watchers" }, + { value: 4037, name: "star" }, + { value: 859, name: "forks" } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)" + } + } + } + ] + }, + { + name: "click", + callback: ({ data: { name, value } }) => { + message.success( + `您点击了第 ${i + 1} 行,图表标题为${name},图表数据为:${value}` + ); + } + } + ); + }); + + return { + columns, + dataList + }; +} diff --git a/src/views/pure-table/high/echarts/index.vue b/src/views/pure-table/high/echarts/index.vue new file mode 100644 index 000000000..6c9fa24a1 --- /dev/null +++ b/src/views/pure-table/high/echarts/index.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/views/pure-table/high/execl/index.vue b/src/views/pure-table/high/execl/index.vue index 4d07cdcb0..a9785a107 100644 --- a/src/views/pure-table/high/execl/index.vue +++ b/src/views/pure-table/high/execl/index.vue @@ -11,7 +11,7 @@ const { columns, dataList, exportExcel } = useColumns(); @click="exportExcel" class="mb-[20px] float-right" > - 导出Excel + 导出 diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx index bef8fce83..700f2ffa2 100644 --- a/src/views/pure-table/high/list.tsx +++ b/src/views/pure-table/high/list.tsx @@ -5,6 +5,7 @@ import Execl from "./execl/index.vue"; import Edit from "./edit/index.vue"; import Watermark from "./watermark/index.vue"; import Print from "./prints/index.vue"; +import Echarts from "./echarts/index.vue"; const rendContent = (val: string) => `代码位置:src/views/pure-table/high/${val}/index.vue`; @@ -28,6 +29,12 @@ export const list = [ title: "右键菜单", component: Contextmenu }, + { + key: "edit", + content: rendContent("edit"), + title: "单元格编辑", + component: Edit + }, { key: "execl", content: rendContent("execl"), @@ -35,10 +42,10 @@ export const list = [ component: Execl }, { - key: "edit", - content: rendContent("edit"), - title: "单元格编辑", - component: Edit + key: "print", + content: rendContent("print"), + title: "打印", + component: Print }, { key: "watermark", @@ -47,9 +54,9 @@ export const list = [ component: Watermark }, { - key: "print", - content: rendContent("print"), - title: "打印", - component: Print + key: "echarts", + content: rendContent("echarts"), + title: "内嵌echarts图表", + component: Echarts } ]; diff --git a/src/views/pure-table/high/watermark/columns.tsx b/src/views/pure-table/high/watermark/columns.tsx index c8dc9e839..f1b36543b 100644 --- a/src/views/pure-table/high/watermark/columns.tsx +++ b/src/views/pure-table/high/watermark/columns.tsx @@ -26,6 +26,7 @@ export function useColumns(waterRef: Ref) { onMounted(() => { delay().then(() => { + // https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark.html const { setWatermark } = useWatermark( waterRef.value.getTableDoms().tableWrapper );