refactor: ♻️ 加强对话框表单组件和列表选择组件

src/components/PageModal/index.vue

@@ -1,102 +1,124 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
+    :align-center="true"
+    :append-to-body="true"
+    width="70vw"
     v-bind="modalConfig.dialog"
+    style="padding-right: 0"
     @close="closeDialog"
   >
-    <!-- 表单 -->
-    <el-form
-      ref="formRef"
-      label-width="80px"
-      v-bind="modalConfig.form"
-      :model="formData"
-      :rules="formRules"
-    >
-      <template v-for="item in modalConfig.formItems" :key="item.prop">
-        <el-form-item :label="item.label" :prop="item.prop">
-          <!-- Input 输入框 -->
-          <template v-if="item.type === 'input'">
-            <template v-if="item.attrs?.type === 'number'">
-              <el-input
-                v-model.number="formData[item.prop]"
+    <!-- 滚动 -->
+    <el-scrollbar max-height="65vh">
+      <!-- 表单 -->
+      <el-form
+        ref="formRef"
+        label-width="auto"
+        v-bind="modalConfig.form"
+        style="padding-right: var(--el-dialog-padding-primary)"
+        :model="formData"
+        :rules="formRules"
+      >
+        <template v-for="item in modalConfig.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">
+              <template v-if="item.attrs?.type === 'number'">
+                <el-input
+                  v-model.number="formData[item.prop]"
+                  v-bind="item.attrs"
+                />
+              </template>
+              <template v-else>
+                <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+              </template>
+            </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" />
+                </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" />
+                </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>
-            <template v-else>
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
-            </template>
-          </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" />
-              </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" />
-              </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>
-          <!-- 自定义 -->
-          <template v-else-if="item.type === 'custom'">
-            <slot
-              :name="item.slotName ?? item.prop"
-              :prop="item.prop"
-              :formData="formData"
-              :attrs="item.attrs"
-            ></slot>
-          </template>
-          <!-- Input 输入框 -->
-          <template v-else>
-            <template v-if="item.attrs?.type === 'number'">
-              <el-input
-                v-model.number="formData[item.prop]"
+            <!-- TreeSelect 树形选择 -->
+            <template v-else-if="item.type === 'tree-select'">
+              <el-tree-select
+                v-model="formData[item.prop]"
                 v-bind="item.attrs"
               />
             </template>
-            <template v-else>
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+            <!-- DatePicker 日期选择器 -->
+            <template v-else-if="item.type === 'date-picker'">
+              <el-date-picker
+                v-model="formData[item.prop]"
+                v-bind="item.attrs"
+              />
             </template>
-          </template>
-        </el-form-item>
-      </template>
-    </el-form>
+            <!-- 自定义 -->
+            <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>
+      </el-form>
+    </el-scrollbar>
     <!-- 弹窗底部操作按钮 -->
     <template #footer>
-      <div class="dialog-footer">
+      <div style="padding-right: var(--el-dialog-padding-primary)">
         <el-button type="primary" @click="handleSubmit">确 定</el-button>
-        <el-button @click="closeDialog">取消</el-button>
+        <el-button @click="closeDialog">取 消</el-button>
       </div>
     </template>
   </el-dialog>
@@ -153,12 +175,16 @@ export interface IModalConfig<T = any> {
     slotName?: string;
     // 标签文本
     label: string;
+    // 标签提示
+    tips?: string;
     // 键名
     prop: string;
     // 验证规则
     rules?: FormItemRule[];
     // 初始值
     initialValue?: any;
+    // 是否隐藏
+    hidden?: boolean;
     // 监听函数
     watch?: (newValue: any, oldValue: any, data: T) => void;
   }>;
@@ -171,7 +197,7 @@ const emit = defineEmits<{
   submitClick: [];
 }>();
 // 暴露的属性和方法
-defineExpose({ setModalVisible });
+defineExpose({ setModalVisible, getFormData, setFormData });
 
 const pk = props.modalConfig.pk ?? "id";
 const dialogVisible = ref(false);
@@ -228,6 +254,14 @@ function closeDialog() {
   formRef.value?.resetFields();
   formRef.value?.clearValidate();
 }
+// 获取表单数据
+function getFormData(key?: string) {
+  return key === undefined ? formData : formData[key] ?? undefined;
+}
+// 设置表单值
+function setFormData(key: string, value: any) {
+  formData[key] = value;
+}
 </script>
 
 <style lang="scss" scoped></style>