refactor: ♻️ cURD表单组件支持checkbox多选框

src/components/PageModal/index.vue

@@ -30,7 +30,7 @@
           <template v-else-if="item.type === 'select'">
             <el-select v-model="formData[item.prop]" v-bind="item.attrs">
               <template v-for="option in item.options" :key="option.value">
-                <el-option :label="option.label" :value="option.value" />
+                <el-option v-bind="option" />
               </template>
             </el-select>
           </template>
@@ -38,10 +38,21 @@
           <template v-else-if="item.type === 'radio'">
             <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
               <template v-for="option in item.options" :key="option.value">
-                <el-radio :label="option.label" :value="option.value" />
+                <el-radio v-bind="option" />
               </template>
             </el-radio-group>
           </template>
+          <!-- Checkbox 多选框 -->
+          <template v-else-if="item.type === 'checkbox'">
+            <el-checkbox-group
+              v-model="formData[item.prop]"
+              v-bind="item.attrs"
+            >
+              <template v-for="option in item.options" :key="option.value">
+                <el-checkbox v-bind="option" />
+              </template>
+            </el-checkbox-group>
+          </template>
           <!-- Input Number 数字输入框 -->
           <template v-else-if="item.type === 'input-number'">
             <el-input-number
@@ -123,14 +134,20 @@ export interface IModalConfig<T = any> {
       | "input"
       | "select"
       | "radio"
+      | "checkbox"
       | "tree-select"
       | "date-picker"
       | "input-number"
       | "custom";
     // 组件属性
     attrs?: IObject;
-    // 组件可选项(适用于select,radio组件)
+    // 组件可选项(适用于select,radio,checkbox组件)
-    options?: { label: string; value: any }[];
+    options?: Array<{
+      label: string;
+      value: any;
+      disabled?: boolean;
+      [key: string]: any;
+    }>;
     // 插槽名(适用于组件类型为custom)
     slotName?: string;
     // 标签文本

src/typings/auto-imports.d.ts

@@ -325,14 +325,12 @@ declare module "vue" {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
-    readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessageBox"]
     >;
-    readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
     readonly acceptHMRUpdate: UnwrapRef<
       (typeof import("pinia"))["acceptHMRUpdate"]
     >;
@@ -1055,14 +1053,12 @@ declare module "@vue/runtime-core" {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
-    readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
     readonly ElMessage: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessage"]
     >;
     readonly ElMessageBox: UnwrapRef<
       (typeof import("element-plus/es"))["ElMessageBox"]
     >;
-    readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
     readonly acceptHMRUpdate: UnwrapRef<
       (typeof import("pinia"))["acceptHMRUpdate"]
     >;

src/typings/components.d.ts

@@ -18,6 +18,8 @@ declare module "vue" {
     ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
     ElButton: (typeof import("element-plus/es"))["ElButton"];
     ElCard: (typeof import("element-plus/es"))["ElCard"];
+    ElCheckbox: (typeof import("element-plus/es"))["ElCheckbox"];
+    ElCheckboxGroup: (typeof import("element-plus/es"))["ElCheckboxGroup"];
     ElCol: (typeof import("element-plus/es"))["ElCol"];
     ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"];
     ElConfigProvider: (typeof import("element-plus/es"))["ElConfigProvider"];
@@ -32,6 +34,7 @@ declare module "vue" {
     ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
     ElIcon: (typeof import("element-plus/es"))["ElIcon"];
     ElInput: (typeof import("element-plus/es"))["ElInput"];
+    ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
     ElMenu: (typeof import("element-plus/es"))["ElMenu"];
     ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
     ElOption: (typeof import("element-plus/es"))["ElOption"];