From a96aad082f047224357362472a24d4fc1e7c33cf Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Fri, 14 Jun 2024 10:07:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageContent):=20:sparkles:=20=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=A0=8F=E5=A2=9E=E5=8A=A0render=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageContent.vue    |  3 ++-
 src/components/CURD/types.ts           |  8 ++++---
 src/views/demo/curd/config/content.ts  |  1 +
 src/views/demo/curd/config/content2.ts | 29 +++++++++++++++++++++-----
 src/views/demo/curd/index.vue          |  6 +++++-
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 243e13d9..0f79a63d 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -293,9 +293,10 @@
                 <!-- 其他 -->
                 <template v-else-if="typeof item === 'object'">
                   <el-button
+                    v-if="item.render === undefined || item.render(scope.row)"
                     v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
                     :icon="item.icon"
-                    type="primary"
+                    :type="item.type ?? 'primary'"
                     size="small"
                     link
                     @click="
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 4c20afa7..22500fc3 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -20,8 +20,8 @@ export type IObject = Record<string, any>;
 
 export interface IOperatData {
   name: string;
-  row: any;
-  column: any;
+  row: IObject;
+  column: IObject;
   $index: number;
 }
 
@@ -152,7 +152,7 @@ export interface IContentConfig<T = any> {
     imageWidth?: number;
     imageHeight?: number;
     // list模板相关参数
-    selectList?: Record<string, any>;
+    selectList?: IObject;
     // switch模板相关参数
     activeValue?: boolean | string | number;
     inactiveValue?: boolean | string | number;
@@ -173,6 +173,8 @@ export interface IContentConfig<T = any> {
           icon?: string;
           name: string;
           text: string;
+          type?: "primary" | "success" | "warning" | "danger" | "info";
+          render?: (row: IObject) => boolean;
         }
     >;
     // filter值拼接符
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index 5548f680..ef77d1e0 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -86,6 +86,7 @@ const contentConfig: IContentConfig<UserQuery> = {
     { label: "创建时间", align: "center", prop: "createTime", width: 180 },
     {
       label: "操作",
+      align: "center",
       fixed: "right",
       width: 220,
       templet: "tool",
diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config/content2.ts
index 49dfc351..2e72eed2 100644
--- a/src/views/demo/curd/config/content2.ts
+++ b/src/views/demo/curd/config/content2.ts
@@ -54,7 +54,7 @@ const contentConfig: IContentConfig = {
   cols: [
     { type: "index", width: 50, align: "center" },
     { label: "ID", align: "center", prop: "id", show: false },
-    { label: "用户名", align: "center", prop: "username" },
+    { label: "文本", align: "center", prop: "username" },
     { label: "图片", align: "center", prop: "avatar", templet: "image" },
     {
       label: "百分比",
@@ -63,7 +63,7 @@ const contentConfig: IContentConfig = {
       templet: "percent",
     },
     {
-      label: "价格",
+      label: "货币符",
       align: "center",
       prop: "price",
       templet: "price",
@@ -86,7 +86,7 @@ const contentConfig: IContentConfig = {
       slotName: "status",
     },
     {
-      label: "状态",
+      label: "Switch",
       align: "center",
       prop: "status2",
       templet: "switch",
@@ -96,20 +96,39 @@ const contentConfig: IContentConfig = {
       inactiveText: "禁用",
     },
     {
-      label: "排序",
+      label: "输入框",
       align: "center",
       prop: "sort",
       templet: "input",
       inputType: "number",
     },
     {
-      label: "创建时间",
+      label: "日期格式化",
       align: "center",
       prop: "createTime",
       minWidth: 120,
       templet: "date",
       dateFormat: "YYYY/MM/DD HH:mm:ss",
     },
+    {
+      label: "操作栏",
+      align: "center",
+      fixed: "right",
+      width: 220,
+      templet: "tool",
+      operat: [
+        {
+          name: "reset_pwd",
+          auth: "password:reset",
+          icon: "refresh-left",
+          text: "重置密码",
+          type: "primary",
+          render(row) {
+            return row.id === 1;
+          },
+        },
+      ],
+    },
   ],
 };
 
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 5097f19f..75f71086 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -65,7 +65,11 @@
       </page-modal>
     </template>
     <template v-else>
-      <page-content ref="contentRef" :content-config="contentConfig2">
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig2"
+        @operat-click="handleOperatClick"
+      >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}