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
+    <el-scrollbar max-height="65vh">
-      ref="formRef"
+      <!-- 表单 -->
-      label-width="80px"
+      <el-form
-      v-bind="modalConfig.form"
+        ref="formRef"
-      :model="formData"
+        label-width="auto"
-      :rules="formRules"
+        v-bind="modalConfig.form"
-    >
+        style="padding-right: var(--el-dialog-padding-primary)"
-      <template v-for="item in modalConfig.formItems" :key="item.prop">
+        :model="formData"
-        <el-form-item :label="item.label" :prop="item.prop">
+        :rules="formRules"
-          <!-- Input 输入框 -->
+      >
-          <template v-if="item.type === 'input'">
+        <template v-for="item in modalConfig.formItems" :key="item.prop">
-            <template v-if="item.attrs?.type === 'number'">
+          <el-form-item
-              <el-input
+            v-show="!item.hidden"
-                v-model.number="formData[item.prop]"
+            :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>
+            <!-- TreeSelect 树形选择 -->
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+            <template v-else-if="item.type === 'tree-select'">
-            </template>
+              <el-tree-select
-          </template>
+                v-model="formData[item.prop]"
-          <!-- 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]"
                 v-bind="item.attrs"
               />
             </template>
-            <template v-else>
+            <!-- DatePicker 日期选择器 -->
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+            <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 v-else-if="item.type === 'custom'">
-      </template>
+              <slot
-    </el-form>
+                :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>

src/components/TableSelect/index.vue

@@ -91,8 +91,9 @@
           :border="true"
           :max-height="315"
           :row-key="pk"
-          :class="{ radio: !selectConfig.multiple }"
+          :class="{ radio: !isMultiple }"
           @select="handleSelect"
+          @select-all="handleSelectAll"
         >
           <template v-for="col in selectConfig.tableColumns" :key="col.prop">
             <!-- 自定义 -->
@@ -123,9 +124,10 @@
         />
         <div class="feedback">
           <el-button type="primary" size="small" @click="handleConfirm">
-            确 定
+            {{ confirmText }}
           </el-button>
           <el-button size="small" @click="handleClear"> 清 空 </el-button>
+          <el-button size="small" @click="handleClose"> 关 闭 </el-button>
         </div>
       </div>
     </el-popover>
@@ -182,6 +184,8 @@ const emit = defineEmits<{
 
 // 主键
 const pk = props.selectConfig.pk ?? "id";
+// 是否多选
+const isMultiple = props.selectConfig.multiple === true;
 // 是否显示弹出框
 const popoverVisible = ref(false);
 // 加载状态
@@ -246,16 +250,26 @@ for (const item of props.selectConfig.tableColumns) {
   }
 }
 // 选择
-let selectedItems: IObject[] = [];
+const selectedItems = ref<IObject[]>([]);
+const confirmText = computed(() => {
+  return selectedItems.value.length > 0
+    ? `已选(${selectedItems.value.length})`
+    : "确 定";
+});
 function handleSelect(selection: any[], row: any) {
-  if (props.selectConfig.multiple || selection.length === 0) {
+  if (isMultiple || selection.length === 0) {
     // 多选
-    selectedItems = selection;
+    selectedItems.value = selection;
   } else {
     // 单选
-    selectedItems = [selection[selection.length - 1]];
+    selectedItems.value = [selection[selection.length - 1]];
     tableRef.value?.clearSelection();
-    tableRef.value?.toggleRowSelection(selectedItems[0], true);
+    tableRef.value?.toggleRowSelection(selectedItems.value[0], true);
+  }
+}
+function handleSelectAll(selection: any[]) {
+  if (isMultiple) {
+    selectedItems.value = selection;
   }
 }
 // 分页
@@ -274,15 +288,22 @@ function handleShow() {
 }
 // 确定
 function handleConfirm() {
+  if (selectedItems.value.length === 0) {
+    ElMessage.error("请选择数据");
+    return;
+  }
   popoverVisible.value = false;
-  emit("confirmClick", selectedItems);
+  emit("confirmClick", selectedItems.value);
 }
 // 清空
 function handleClear() {
   tableRef.value?.clearSelection();
-  selectedItems = [];
+  selectedItems.value = [];
 }
 // 关闭
+function handleClose() {
+  popoverVisible.value = false;
+}
 const tableSelectRef = ref();
 const popoverContentRef = ref();
 /* onClickOutside(tableSelectRef, () => (popoverVisible.value = false), {

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

@@ -7,7 +7,6 @@ const modalConfig: IModalConfig<UserForm> = {
   dialog: {
     title: "新增用户",
     width: 800,
-    appendToBody: true,
     draggable: true,
   },
   form: {

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

@@ -8,7 +8,7 @@ const modalConfig: IModalConfig<UserForm> = {
   dialog: {
     title: "修改用户",
     width: 800,
-    appendToBody: true,
+    draggable: true,
   },
   formAction: function (data) {
     return UserAPI.update(data.id as number, data);