From 6f87463f10d7df9f7614480b0f6a1e5afe56527f Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Fri, 12 Jul 2024 10:15:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageModal):=20:sparkles:=20=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B9=E5=A2=9E=E5=8A=A0col=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/PageForm.vue  | 156 ++++++------
 src/components/CURD/PageModal.vue | 383 ++++++++++++++++--------------
 src/components/CURD/types.ts      |   3 +
 3 files changed, 297 insertions(+), 245 deletions(-)

diff --git a/src/components/CURD/PageForm.vue b/src/components/CURD/PageForm.vue
index 87224f12..524a6a4b 100644
--- a/src/components/CURD/PageForm.vue
+++ b/src/components/CURD/PageForm.vue
@@ -6,79 +6,95 @@
     :model="formData"
     :rules="formRules"
   >
-    <template v-for="item in formItems" :key="item.prop">
-      <el-form-item v-show="!item.hidden" :label="item.label" :prop="item.prop">
-        <!-- Label -->
-        <template #label v-if="item.tips">
-          <span>
-            {{ item.label }}
-            <el-tooltip
-              placement="bottom"
-              effect="light"
-              :content="item.tips"
-              :raw-content="true"
-            >
-              <el-icon style="vertical-align: -0.15em" size="16">
-                <QuestionFilled />
-              </el-icon>
-            </el-tooltip>
-          </span>
-        </template>
-        <!-- Input 输入框 -->
-        <template v-if="item.type === 'input' || item.type === undefined">
-          <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-        </template>
-        <!-- Select 选择器 -->
-        <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 v-bind="option" />
+    <el-row :gutter="20">
+      <template v-for="item in formItems" :key="item.prop">
+        <el-col v-show="!item.hidden" v-bind="item.col">
+          <el-form-item :label="item.label" :prop="item.prop">
+            <!-- Label -->
+            <template #label v-if="item.tips">
+              <span>
+                {{ item.label }}
+                <el-tooltip
+                  placement="bottom"
+                  effect="light"
+                  :content="item.tips"
+                  :raw-content="true"
+                >
+                  <el-icon style="vertical-align: -0.15em" size="16">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </span>
             </template>
-          </el-select>
-        </template>
-        <!-- Radio 单选框 -->
-        <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 v-bind="option" />
+            <!-- Input 输入框 -->
+            <template v-if="item.type === 'input' || item.type === undefined">
+              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
             </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" />
+            <!-- Select 选择器 -->
+            <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 v-bind="option" />
+                </template>
+              </el-select>
             </template>
-          </el-checkbox-group>
-        </template>
-        <!-- Input Number 数字输入框 -->
-        <template v-else-if="item.type === 'input-number'">
-          <el-input-number v-model="formData[item.prop]" v-bind="item.attrs" />
-        </template>
-        <!-- TreeSelect 树形选择 -->
-        <template v-else-if="item.type === 'tree-select'">
-          <el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
-        </template>
-        <!-- DatePicker 日期选择器 -->
-        <template v-else-if="item.type === 'date-picker'">
-          <el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
-        </template>
-        <!-- Text 文本 -->
-        <template v-else-if="item.type === 'text'">
-          <el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
-        </template>
-        <!-- 自定义 -->
-        <template v-else-if="item.type === 'custom'">
-          <slot
-            :name="item.slotName ?? item.prop"
-            :prop="item.prop"
-            :formData="formData"
-            :attrs="item.attrs"
-          ></slot>
-        </template>
-      </el-form-item>
-    </template>
+            <!-- Radio 单选框 -->
+            <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 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
+                v-model="formData[item.prop]"
+                v-bind="item.attrs"
+              />
+            </template>
+            <!-- TreeSelect 树形选择 -->
+            <template v-else-if="item.type === 'tree-select'">
+              <el-tree-select
+                v-model="formData[item.prop]"
+                v-bind="item.attrs"
+              />
+            </template>
+            <!-- DatePicker 日期选择器 -->
+            <template v-else-if="item.type === 'date-picker'">
+              <el-date-picker
+                v-model="formData[item.prop]"
+                v-bind="item.attrs"
+              />
+            </template>
+            <!-- Text 文本 -->
+            <template v-else-if="item.type === 'text'">
+              <el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
+            </template>
+            <!-- 自定义 -->
+            <template v-else-if="item.type === 'custom'">
+              <slot
+                :name="item.slotName ?? item.prop"
+                :prop="item.prop"
+                :formData="formData"
+                :attrs="item.attrs"
+              ></slot>
+            </template>
+          </el-form-item>
+        </el-col>
+      </template>
+    </el-row>
   </el-form>
 </template>
 
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 5dc4a70b..3d53e394 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -15,96 +15,111 @@
         :model="formData"
         :rules="formRules"
       >
-        <template v-for="item in formItems" :key="item.prop">
-          <el-form-item
-            v-show="!item.hidden"
-            :label="item.label"
-            :prop="item.prop"
-          >
-            <!-- Label -->
-            <template #label v-if="item.tips">
-              <span>
-                {{ item.label }}
-                <el-tooltip
-                  placement="bottom"
-                  effect="light"
-                  :content="item.tips"
-                  :raw-content="true"
+        <el-row :gutter="20">
+          <template v-for="item in formItems" :key="item.prop">
+            <el-col v-show="!item.hidden" v-bind="item.col">
+              <el-form-item :label="item.label" :prop="item.prop">
+                <!-- Label -->
+                <template #label v-if="item.tips">
+                  <span>
+                    {{ item.label }}
+                    <el-tooltip
+                      placement="bottom"
+                      effect="light"
+                      :content="item.tips"
+                      :raw-content="true"
+                    >
+                      <el-icon style="vertical-align: -0.15em" size="16">
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <!-- Input 输入框 -->
+                <template
+                  v-if="item.type === 'input' || item.type === undefined"
                 >
-                  <el-icon style="vertical-align: -0.15em" size="16">
-                    <QuestionFilled />
-                  </el-icon>
-                </el-tooltip>
-              </span>
-            </template>
-            <!-- Input 输入框 -->
-            <template v-if="item.type === 'input' || item.type === undefined">
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-            <!-- Select 选择器 -->
-            <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 v-bind="option" />
+                  <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
                 </template>
-              </el-select>
-            </template>
-            <!-- Radio 单选框 -->
-            <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 v-bind="option" />
+                <!-- Select 选择器 -->
+                <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 v-bind="option" />
+                    </template>
+                  </el-select>
                 </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" />
+                <!-- Radio 单选框 -->
+                <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 v-bind="option" />
+                    </template>
+                  </el-radio-group>
                 </template>
-              </el-checkbox-group>
-            </template>
-            <!-- Input Number 数字输入框 -->
-            <template v-else-if="item.type === 'input-number'">
-              <el-input-number
-                v-model="formData[item.prop]"
-                v-bind="item.attrs"
-              />
-            </template>
-            <!-- TreeSelect 树形选择 -->
-            <template v-else-if="item.type === 'tree-select'">
-              <el-tree-select
-                v-model="formData[item.prop]"
-                v-bind="item.attrs"
-              />
-            </template>
-            <!-- DatePicker 日期选择器 -->
-            <template v-else-if="item.type === 'date-picker'">
-              <el-date-picker
-                v-model="formData[item.prop]"
-                v-bind="item.attrs"
-              />
-            </template>
-            <!-- Text 文本 -->
-            <template v-else-if="item.type === 'text'">
-              <el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
-            </template>
-            <!-- 自定义 -->
-            <template v-else-if="item.type === 'custom'">
-              <slot
-                :name="item.slotName ?? item.prop"
-                :prop="item.prop"
-                :formData="formData"
-                :attrs="item.attrs"
-              >
-              </slot>
-            </template>
-          </el-form-item>
-        </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
+                    v-model="formData[item.prop]"
+                    v-bind="item.attrs"
+                  />
+                </template>
+                <!-- TreeSelect 树形选择 -->
+                <template v-else-if="item.type === 'tree-select'">
+                  <el-tree-select
+                    v-model="formData[item.prop]"
+                    v-bind="item.attrs"
+                  />
+                </template>
+                <!-- DatePicker 日期选择器 -->
+                <template v-else-if="item.type === 'date-picker'">
+                  <el-date-picker
+                    v-model="formData[item.prop]"
+                    v-bind="item.attrs"
+                  />
+                </template>
+                <!-- Text 文本 -->
+                <template v-else-if="item.type === 'text'">
+                  <el-text v-bind="item.attrs">
+                    {{ formData[item.prop] }}
+                  </el-text>
+                </template>
+                <!-- 自定义 -->
+                <template v-else-if="item.type === 'custom'">
+                  <slot
+                    :name="item.slotName ?? item.prop"
+                    :prop="item.prop"
+                    :formData="formData"
+                    :attrs="item.attrs"
+                  ></slot>
+                </template>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
       </el-form>
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
@@ -137,99 +152,117 @@
           :model="formData"
           :rules="formRules"
         >
-          <template v-for="item in formItems" :key="item.prop">
-            <el-form-item
-              v-show="!item.hidden"
-              :label="item.label"
-              :prop="item.prop"
-            >
-              <!-- Label -->
-              <template #label v-if="item.tips">
-                <span>
-                  {{ item.label }}
-                  <el-tooltip
-                    placement="bottom"
-                    effect="light"
-                    :content="item.tips"
-                    :raw-content="true"
+          <el-row :gutter="20">
+            <template v-for="item in formItems" :key="item.prop">
+              <el-col v-show="!item.hidden" v-bind="item.col">
+                <el-form-item :label="item.label" :prop="item.prop">
+                  <!-- Label -->
+                  <template #label v-if="item.tips">
+                    <span>
+                      {{ item.label }}
+                      <el-tooltip
+                        placement="bottom"
+                        effect="light"
+                        :content="item.tips"
+                        :raw-content="true"
+                      >
+                        <el-icon style="vertical-align: -0.15em" size="16">
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </span>
+                  </template>
+                  <!-- Input 输入框 -->
+                  <template
+                    v-if="item.type === 'input' || item.type === undefined"
                   >
-                    <el-icon style="vertical-align: -0.15em" size="16">
-                      <QuestionFilled />
-                    </el-icon>
-                  </el-tooltip>
-                </span>
-              </template>
-              <!-- Input 输入框 -->
-              <template v-if="item.type === 'input' || item.type === undefined">
-                <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-              </template>
-              <!-- Select 选择器 -->
-              <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 v-bind="option" />
+                    <el-input
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                    />
                   </template>
-                </el-select>
-              </template>
-              <!-- Radio 单选框 -->
-              <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 v-bind="option" />
+                  <!-- Select 选择器 -->
+                  <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 v-bind="option" />
+                      </template>
+                    </el-select>
                   </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" />
+                  <!-- Radio 单选框 -->
+                  <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 v-bind="option" />
+                      </template>
+                    </el-radio-group>
                   </template>
-                </el-checkbox-group>
-              </template>
-              <!-- Input Number 数字输入框 -->
-              <template v-else-if="item.type === 'input-number'">
-                <el-input-number
-                  v-model="formData[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- TreeSelect 树形选择 -->
-              <template v-else-if="item.type === 'tree-select'">
-                <el-tree-select
-                  v-model="formData[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- DatePicker 日期选择器 -->
-              <template v-else-if="item.type === 'date-picker'">
-                <el-date-picker
-                  v-model="formData[item.prop]"
-                  v-bind="item.attrs"
-                />
-              </template>
-              <!-- Text 文本 -->
-              <template v-else-if="item.type === 'text'">
-                <el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
-              </template>
-              <!-- 自定义 -->
-              <template v-else-if="item.type === 'custom'">
-                <slot
-                  :name="item.slotName ?? item.prop"
-                  :prop="item.prop"
-                  :formData="formData"
-                  :attrs="item.attrs"
-                >
-                </slot>
-              </template>
-            </el-form-item>
-          </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
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                    />
+                  </template>
+                  <!-- TreeSelect 树形选择 -->
+                  <template v-else-if="item.type === 'tree-select'">
+                    <el-tree-select
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                    />
+                  </template>
+                  <!-- DatePicker 日期选择器 -->
+                  <template v-else-if="item.type === 'date-picker'">
+                    <el-date-picker
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                    />
+                  </template>
+                  <!-- Text 文本 -->
+                  <template v-else-if="item.type === 'text'">
+                    <el-text v-bind="item.attrs">
+                      {{ formData[item.prop] }}
+                    </el-text>
+                  </template>
+                  <!-- 自定义 -->
+                  <template v-else-if="item.type === 'custom'">
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :formData="formData"
+                      :attrs="item.attrs"
+                    ></slot>
+                  </template>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
         </el-form>
       </el-scrollbar>
       <!-- 弹窗底部操作按钮 -->
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index af0cd7f9..97f4d834 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -5,6 +5,7 @@ import type {
   FormProps,
   PaginationProps,
   TableProps,
+  ColProps,
 } from "element-plus";
 import PageContent from "./PageContent.vue";
 import PageForm from "./PageForm.vue";
@@ -248,6 +249,8 @@ export type IFormItems<T = any> = Array<{
   initialValue?: any;
   // 是否隐藏
   hidden?: boolean;
+  // layout组件Col属性
+  col?: Partial<ColProps>;
   // 监听函数
   watch?: (newValue: any, oldValue: any, data: T, items: IObject[]) => void;
   // 计算属性函数