From b17ce865cb45950f64cb39a2e8db09eaec594060 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Mon, 13 May 2024 21:57:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageContent):=20:sparkles:=20=E5=8A=A0?=
 =?UTF-8?q?=E5=BC=BAtemplet=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue | 110 +++++++++++++++++++++++++--
 src/typings/components.d.ts          |   4 +
 2 files changed, 109 insertions(+), 5 deletions(-)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index ae452d09..d7e88e8e 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -145,6 +145,72 @@
             </template>
           </el-table-column>
         </template>
+        <!-- 根据行的selectList属性返回对应列表值 -->
+        <template v-else-if="col.show && col.templet === 'list'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 格式化显示链接 -->
+        <template v-else-if="col.show && col.templet === 'url'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              <el-link
+                type="primary"
+                :href="scope.row[col.prop]"
+                target="_blank"
+              >
+                {{ scope.row[col.prop] }}
+              </el-link>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 格式化为价格 -->
+        <template v-else-if="col.show && col.templet === 'price'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 格式化为百分比 -->
+        <template v-else-if="col.show && col.templet === 'percent'">
+          <el-table-column v-bind="col">
+            <template #default="scope"> {{ scope.row[col.prop] }}% </template>
+          </el-table-column>
+        </template>
+        <!-- 显示图标 -->
+        <template v-else-if="col.show && col.templet === 'icon'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              <template v-if="scope.row[col.prop].startsWith('el-icon-')">
+                <el-icon>
+                  <component
+                    :is="scope.row[col.prop].replace('el-icon-', '')"
+                  />
+                </el-icon>
+              </template>
+              <template v-else>
+                <svg-icon :icon-class="scope.row[col.prop]" />
+              </template>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 格式化时间 -->
+        <template v-else-if="col.show && col.templet === 'date'">
+          <el-table-column v-bind="col">
+            <template #default="scope">
+              {{
+                useDateFormat(
+                  scope.row[col.prop],
+                  col.dateFormat ?? "YYYY-MM-DD HH:mm:ss"
+                ).value
+              }}
+            </template>
+          </el-table-column>
+        </template>
         <!-- 列操作栏 -->
         <template v-else-if="col.show && col.templet === 'tool'">
           <el-table-column v-bind="col">
@@ -247,7 +313,9 @@
 
 <script setup lang="ts">
 import { ref, reactive } from "vue";
+import { useDateFormat } from "@vueuse/core";
 import Pagination from "@/components/Pagination/index.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 import type { TableProps, CheckboxValueType } from "element-plus";
 
 // 对象类型
@@ -273,21 +341,53 @@ export interface IContentConfig<T = any> {
   // 主键名(默认为id)
   pk?: string;
   // 表格工具栏(默认支持add,delete,export,也可自定义)
-  toolbar: (
+  toolbar: Array<
     | "add"
     | "delete"
     | "export"
     | {
-        auth?: string;
+        auth: string;
         icon?: string;
         name: string;
         text: string;
       }
-  )[];
+  >;
   // 表格工具栏右侧图标
   defaultToolbar?: ("refresh" | "filter")[];
   // table组件列属性(额外的属性templet,operat,slotName)
-  cols: IObject[];
+  cols: Array<{
+    type?: "default" | "selection" | "index" | "expand";
+    label?: string;
+    prop?: string;
+    width?: string | number;
+    align?: "left" | "center" | "right";
+    templet?:
+      | "image"
+      | "list"
+      | "url"
+      | "price"
+      | "percent"
+      | "icon"
+      | "date"
+      | "tool"
+      | "custom";
+    imageWidth?: number;
+    imageHeight?: number;
+    selectList?: Record<string, any>;
+    priceFormat?: string;
+    dateFormat?: string;
+    operat?: Array<
+      | "edit"
+      | "delete"
+      | {
+          auth: string;
+          icon?: string;
+          name: string;
+          text: string;
+        }
+    >;
+    [key: string]: any;
+  }>;
 }
 const props = defineProps<{
   contentConfig: IContentConfig;
@@ -461,7 +561,7 @@ const displayedColumns = ref<IObject>(props.contentConfig.cols);
 // 全选/取消全选
 const handleCheckAllChange = (checkAll: CheckboxValueType) => {
   columnSetting.value.checkedCols = checkAll
-    ? props.contentConfig.cols.map((col) => col.label)
+    ? props.contentConfig.cols.map((col) => col.label ?? "")
     : [];
   columnSetting.value.isIndeterminate = false;
 
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 45b7ae2b..6ce6c159 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -36,6 +36,7 @@ declare module "vue" {
     ElImage: (typeof import("element-plus/es"))["ElImage"];
     ElInput: (typeof import("element-plus/es"))["ElInput"];
     ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
+    ElLink: (typeof import("element-plus/es"))["ElLink"];
     ElMenu: (typeof import("element-plus/es"))["ElMenu"];
     ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
     ElOption: (typeof import("element-plus/es"))["ElOption"];
@@ -61,6 +62,8 @@ declare module "vue" {
     GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
     Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"];
     IconSelect: (typeof import("./../components/IconSelect/index.vue"))["default"];
+    IEpArrowDown: (typeof import("~icons/ep/arrow-down"))["default"];
+    IEpArrowUp: (typeof import("~icons/ep/arrow-up"))["default"];
     IEpClose: (typeof import("~icons/ep/close"))["default"];
     IEpDelete: (typeof import("~icons/ep/delete"))["default"];
     IEpDownload: (typeof import("~icons/ep/download"))["default"];
@@ -69,6 +72,7 @@ declare module "vue" {
     IEpRefresh: (typeof import("~icons/ep/refresh"))["default"];
     IEpRefreshLeft: (typeof import("~icons/ep/refresh-left"))["default"];
     IEpSearch: (typeof import("~icons/ep/search"))["default"];
+    IEpSetting: (typeof import("~icons/ep/setting"))["default"];
     IEpTop: (typeof import("~icons/ep/top"))["default"];
     IEpUploadFilled: (typeof import("~icons/ep/upload-filled"))["default"];
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];