refactor: ♻️ 增删改查的示例中状态更改为switch组件

增删改查的示例中状态更改为switch组件

closed #I9QEFC

src/components/CURD/PageModal.vue

@@ -66,6 +66,14 @@
                     </template>
                   </el-radio-group>
                 </template>
+                <!-- switch 开关 -->
+                <template v-else-if="item.type === 'switch'">
+                  <el-switch
+                    inline-prompt
+                    v-model="formData[item.prop]"
+                    v-bind="item.attrs"
+                  />
+                </template>
                 <!-- Checkbox 多选框 -->
                 <template v-else-if="item.type === 'checkbox'">
                   <el-checkbox-group
@@ -209,6 +217,14 @@
                       </template>
                     </el-radio-group>
                   </template>
+                  <!-- switch 开关 -->
+                  <template v-else-if="item.type === 'switch'">
+                    <el-switch
+                      inline-prompt
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                    />
+                  </template>
                   <!-- Checkbox 多选框 -->
                   <template v-else-if="item.type === 'checkbox'">
                     <el-checkbox-group
@@ -334,7 +350,7 @@ prepareFuncs.forEach((func) => func());
 
 // 获取表单数据
 function getFormData(key?: string) {
-  return key === undefined ? formData : formData[key] ?? undefined;
+  return key === undefined ? formData : (formData[key] ?? undefined);
 }
 
 // 设置表单值

src/components/CURD/types.ts

@@ -220,6 +220,7 @@ export type IFormItems<T = any> = Array<{
     | "input"
     | "select"
     | "radio"
+    | "switch"
     | "checkbox"
     | "tree-select"
     | "date-picker"

src/views/demo/curd/config/add.ts

@@ -103,14 +103,26 @@ const modalConfig: IModalConfig<UserForm> = {
         maxlength: 50,
       },
     },
+    // {
+    //   label: "状态",
+    //   prop: "status",
+    //   type: "radio",
+    //   options: [
+    //     { label: "正常", value: 1 },
+    //     { label: "禁用", value: 0 },
+    //   ],
+    //   initialValue: 1,
+    // },
     {
       label: "状态",
       prop: "status",
-      type: "radio",
-      options: [
-        { label: "正常", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      type: "switch",
+      attrs: {
+        activeText: "正常",
+        inactiveText: "禁用",
+        activeValue: 1,
+        inactiveValue: 0,
+      },
       initialValue: 1,
     },
   ],

src/views/demo/curd/config/edit.ts

@@ -107,14 +107,26 @@ const modalConfig: IModalConfig<UserForm> = {
         maxlength: 50,
       },
     },
+    // {
+    //   label: "状态",
+    //   prop: "status",
+    //   type: "radio",
+    //   options: [
+    //     { label: "正常", value: 1 },
+    //     { label: "禁用", value: 0 },
+    //   ],
+    //   initialValue: 1,
+    // },
     {
-      label: "状态",
+      label: "状态123",
       prop: "status",
-      type: "radio",
-      options: [
-        { label: "正常", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      type: "switch",
+      attrs: {
+        activeText: "正常",
+        inactiveText: "禁用",
+        activeValue: 1,
+        inactiveValue: 0,
+      },
     },
   ],
 };