From ff89ed7c2e4e339047e7932a8f18e3c94e8a2eb9 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Thu, 16 May 2024 15:30:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageContent):=20:sparkles:=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81switch=E5=B1=9E=E6=80=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PageContent/index.vue   | 44 ++++++++++++++++++++++++++
 src/views/demo/curd/config/content2.ts | 17 ++++++++++
 2 files changed, 61 insertions(+)

diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 03c80981..742ea3d1 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -144,6 +144,23 @@
                 {{ scope.row[col.prop] }}
               </el-link>
             </template>
+            <!-- 生成开关组件 -->
+            <template v-else-if="col.templet === 'switch'">
+              <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
+              <el-switch
+                v-model="scope.row[col.prop]"
+                :active-value="col.activeValue ?? 1"
+                :inactive-value="col.inactiveValue ?? 0"
+                :inline-prompt="true"
+                :active-text="col.activeText ?? ''"
+                :inactive-text="col.inactiveText ?? ''"
+                :validate-event="false"
+                @change="
+                  pageData.length > 0 &&
+                    handleSwitchChange(col.prop, scope.row[col.prop], scope.row)
+                "
+              />
+            </template>
             <!-- 格式化为价格 -->
             <template v-else-if="col.templet === 'price'">
               {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
@@ -274,6 +291,12 @@ export interface IContentConfig<T = any> {
   deleteAction?: (ids: string) => Promise<any>;
   // 导出的网络请求函数(需返回promise)
   exportAction?: (queryParams: T) => Promise<any>;
+  // 修改属性的网络请求函数(需返回promise)
+  modifyAction?: (data: {
+    [key: string]: any;
+    field: string;
+    value: boolean | string | number;
+  }) => Promise<any>;
   // 主键名(默认为id)
   pk?: string;
   // 表格工具栏(默认支持add,delete,export,也可自定义)
@@ -301,6 +324,7 @@ export interface IContentConfig<T = any> {
       | "image"
       | "list"
       | "url"
+      | "switch"
       | "price"
       | "percent"
       | "icon"
@@ -310,6 +334,10 @@ export interface IContentConfig<T = any> {
     imageWidth?: number;
     imageHeight?: number;
     selectList?: Record<string, any>;
+    activeValue?: boolean | string | number;
+    inactiveValue?: boolean | string | number;
+    activeText?: string;
+    inactiveText?: string;
     priceFormat?: string;
     dateFormat?: string;
     operat?: Array<
@@ -479,6 +507,22 @@ function exportPageData(queryParams: IObject = {}) {
     ElMessage.error("未配置exportAction");
   }
 }
+// 属性修改
+function handleSwitchChange(
+  field: string,
+  value: boolean | string | number,
+  row: Record<string, any>
+) {
+  if (props.contentConfig.modifyAction) {
+    props.contentConfig.modifyAction({
+      [pk]: row[pk],
+      field: field,
+      value: value,
+    });
+  } else {
+    ElMessage.error("未配置modifyAction");
+  }
+}
 
 // 列设置类型声明
 interface IColumnSetting {
diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config/content2.ts
index 08290cb7..ea310d5e 100644
--- a/src/views/demo/curd/config/content2.ts
+++ b/src/views/demo/curd/config/content2.ts
@@ -3,6 +3,7 @@ import type { IContentConfig } from "@/components/PageContent/index.vue";
 const contentConfig: IContentConfig = {
   pageName: "sys:user",
   indexAction: function (params) {
+    // console.log("indexAction:", params);
     return Promise.resolve({
       total: 2,
       list: [
@@ -17,6 +18,7 @@ const contentConfig: IContentConfig = {
           icon: "el-icon-setting",
           gender: 1,
           status: 1,
+          status2: 1,
           createTime: 1715647982437,
         },
         {
@@ -30,11 +32,16 @@ const contentConfig: IContentConfig = {
           icon: "el-icon-user",
           gender: 0,
           status: 0,
+          status2: 0,
           createTime: 1715648977426,
         },
       ],
     });
   },
+  modifyAction(data) {
+    // console.log("modifyAction:", data);
+    return Promise.resolve(null);
+  },
   cols: [
     { type: "selection", width: 50, align: "center" },
     { label: "ID", align: "center", prop: "id" },
@@ -69,6 +76,16 @@ const contentConfig: IContentConfig = {
       templet: "custom",
       slotName: "status",
     },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status2",
+      templet: "switch",
+      activeValue: 1,
+      inactiveValue: 0,
+      activeText: "启用",
+      inactiveText: "禁用",
+    },
     {
       label: "创建时间",
       align: "center",