refactor: ♻️ pageModal组件，代码重构，更新使用案例

src/components/CURD/PageContent.vue

@@ -160,7 +160,7 @@
                   v-hasPerm="btn.perm ?? '*:*:*'"
                   v-bind="btn.attrs"
                   @click="
-                    handleOperat({
+                    handleOperate({
                       name: btn.name,
                       row: scope.row,
                       column: scope.column,
@@ -331,7 +331,7 @@ import {
 } from "element-plus";
 import ExcelJS from "exceljs";
 import { reactive, ref, computed } from "vue";
-import type { IContentConfig, IObject, IOperatData } from "./types";
+import type { IContentConfig, IObject, IOperateData } from "./types";
 import type { IToolsButton } from "./types";
 
 // 定义接收的属性
@@ -343,55 +343,10 @@ const emit = defineEmits<{
   searchClick: [];
   toolbarClick: [name: string];
   editClick: [row: IObject];
-  operatClick: [data: IOperatData];
   filterChange: [data: IObject];
+  operateClick: [data: IOperateData];
 }>();
 
-// 按钮文本映射
-const BUTTONS_TEXT: Record<string, string> = {
-  add: "新增",
-  delete: "删除",
-  import: "导入",
-  export: "导出",
-  refresh: "刷新",
-  filter: "筛选列",
-  search: "搜索",
-  imports: "批量导入",
-  exports: "批量导出",
-  view: "查看",
-  edit: "编辑",
-};
-
-// 按钮权限映射
-const AUTH_MAP: Record<string, string> = {
-  add: "add",
-  delete: "delete",
-  import: "import",
-  export: "export",
-  refresh: "*:*:*",
-  filter: "*:*:*",
-  search: "search",
-  imports: "imports",
-  exports: "exports",
-  view: "view",
-  edit: "edit",
-};
-
-// 按钮图标映射
-const BUTTONS_ICON: Record<string, string> = {
-  add: "plus",
-  delete: "delete",
-  import: "upload",
-  export: "download",
-  refresh: "refresh",
-  filter: "operation",
-  search: "search",
-  imports: "upload",
-  exports: "download",
-  view: "view",
-  edit: "edit",
-};
-
 // 表格工具栏按钮配置
 const config = computed(() => props.contentConfig);
 const buttonConfig = reactive<Record<string, IObject>>({
@@ -821,18 +776,8 @@ function handleToolbar(name: string) {
 }
 
 // 操作列
-function handleOperat(data: IOperatData) {
+function handleOperate(data: IOperateData) {
-  switch (data.name) {
+  emit("operateClick", data);
-    case "edit":
-      emit("editClick", data.row);
-      break;
-    case "delete":
-      handleDelete(data.row[pk]);
-      break;
-    default:
-      emit("operatClick", data);
-      break;
-  }
 }
 
 // 属性修改
@@ -953,7 +898,7 @@ function saveXlsx(fileData: any, fileName: string) {
 }
 
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData });
+defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData, handleRefresh });
 </script>
 
 <style lang="scss" scoped>

src/components/CURD/PageModal.vue

@@ -3,97 +3,55 @@
   <template v-if="modalConfig.component === 'drawer'">
     <el-drawer
       v-model="modalVisible"
-      :append-to-body="true"
+      v-bind="{ destroyOnClose: true, ...modalConfig.drawer }"
-      v-bind="modalConfig.drawer"
+      @close="handleClose"
-      @close="handleCloseModal"
     >
       <!-- 表单 -->
-      <el-form
+      <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
-        ref="formRef"
-        label-width="auto"
-        v-bind="modalConfig.form"
-        :model="formData"
-        :rules="formRules"
-      >
         <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 v-if="item.tips" #label>
+                <template #label>
                   <span>
-                    {{ item.label }}
+                    {{ item?.label || "" }}
-                    <el-tooltip
+                    <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
-                      placement="bottom"
+                      <QuestionFilled class="w-4 h-4 mx-1" />
-                      effect="light"
-                      :content="item.tips"
-                      :raw-content="true"
-                    >
-                      <el-icon style="vertical-align: -0.15em" size="16">
-                        <QuestionFilled />
-                      </el-icon>
                     </el-tooltip>
+                    <span v-if="modalConfig.colon" class="ml-0.5">:</span>
                   </span>
                 </template>
-                <!-- Input 输入框 -->
+
-                <template v-if="item.type === 'input' || item.type === undefined">
+                <!-- components -->
-                  <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+                <template v-if="item.type === 'custom'">
-                </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>
-                <!-- switch 开关 -->
-                <template v-else-if="item.type === 'switch'">
-                  <el-switch v-model="formData[item.prop]" inline-prompt v-bind="item.attrs" />
-                </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"
                     :form-data="formData"
                     :attrs="item.attrs"
-                  />
+                    style="width: 100%"
+                  ></slot>
                 </template>
+                <component
+                  :is="componentMap.get(item.type)"
+                  v-else
+                  v-model.trim="formData[item.prop]"
+                  v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                >
+                  <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                    <component
+                      :is="childrenMap.get(item.type)"
+                      v-for="opt in item.options"
+                      :label="opt.label"
+                      :value="opt.value"
+                    ></component>
+                  </template>
+
+                  <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
+                    <slot :name="item.slotName" />
+                  </template>
+                </component>
               </el-form-item>
             </el-col>
           </template>
@@ -101,13 +59,8 @@
       </el-form>
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
-        <div v-if="!formDisable">
+        <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
-          <el-button @click="handleClose">取 消</el-button>
-        </div>
-        <div v-else>
-          <el-button @click="handleClose">关闭</el-button>
-        </div>
       </template>
     </el-drawer>
   </template>
@@ -115,115 +68,61 @@
   <template v-else>
     <el-dialog
       v-model="modalVisible"
-      :align-center="true"
+      v-bind="{ destroyOnClose: true, appendToBody: true, ...modalConfig.dialog }"
-      :append-to-body="true"
+      @close="handleClose"
-      width="70vw"
-      v-bind="modalConfig.dialog"
-      style="padding-right: 0"
-      @close="handleCloseModal"
     >
-      <!-- 滚动 -->
+      <!-- 表单 -->
-      <el-scrollbar max-height="60vh">
+      <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
-        <!-- 表单 -->
+        <el-row :gutter="20">
-        <el-form
+          <template v-for="item in formItems" :key="item.prop">
-          ref="formRef"
+            <el-col v-show="!item.hidden" v-bind="item.col">
-          label-width="auto"
+              <el-form-item :label="item.label" :prop="item.prop">
-          v-bind="modalConfig.form"
+                <!-- Label -->
-          style="padding-right: var(--el-dialog-padding-primary)"
+                <template #label>
-          :model="formData"
+                  <span class="flex-y-center">
-          :rules="formRules"
+                    {{ item?.label || "" }}
-        >
+                    <el-tooltip v-if="item?.tips">
-          <el-row :gutter="20">
+                      <QuestionFilled class="w-4 h-4 mx-1" />
-            <template v-for="item in formItems" :key="item.prop">
+                    </el-tooltip>
-              <el-col v-show="!item.hidden" v-bind="item.col">
+                    <span v-if="modalConfig.colon" class="ml-0.5">:</span>
-                <el-form-item :label="item.label" :prop="item.prop">
+                  </span>
-                  <!-- Label -->
+                </template>
-                  <template v-if="item.tips" #label>
+
-                    <span>
+                <!-- components -->
-                      {{ item.label }}
+                <template v-if="item.type === 'custom'">
-                      <el-tooltip
+                  <slot
-                        placement="bottom"
+                    :name="item.slotName ?? item.prop"
-                        effect="light"
+                    :prop="item.prop"
-                        :content="item.tips"
+                    :form-data="formData"
-                        :raw-content="true"
+                    :attrs="item.attrs"
-                      >
+                  ></slot>
-                        <el-icon style="vertical-align: -0.15em" size="16">
+                </template>
-                          <QuestionFilled />
+                <component
-                        </el-icon>
+                  :is="componentMap.get(item.type)"
-                      </el-tooltip>
+                  v-else
-                    </span>
+                  v-model.trim="formData[item.prop]"
+                  v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                >
+                  <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                    <component
+                      :is="childrenMap.get(item.type)"
+                      v-for="opt in item.options"
+                      :label="opt.label"
+                      :value="opt.value"
+                    >
+                      <slot v-if="item.slotName" :name="item.slotName"></slot>
+                    </component>
                   </template>
-                  <!-- Input 输入框 -->
+                </component>
-                  <template v-if="item.type === 'input' || item.type === undefined">
+              </el-form-item>
-                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+            </el-col>
-                  </template>
+          </template>
-                  <!-- Select 选择器 -->
+        </el-row>
-                  <template v-else-if="item.type === 'select'">
+      </el-form>
-                    <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>
-                  <!-- switch 开关 -->
-                  <template v-else-if="item.type === 'switch'">
-                    <el-switch v-model="formData[item.prop]" inline-prompt v-bind="item.attrs" />
-                  </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"
-                      :form-data="formData"
-                      :attrs="item.attrs"
-                    />
-                  </template>
-                </el-form-item>
-              </el-col>
-            </template>
-          </el-row>
-        </el-form>
-      </el-scrollbar>
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
-        <div style="padding-right: var(--el-dialog-padding-primary)">
+        <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
-          <el-button @click="handleClose">取 消</el-button>
-        </div>
       </template>
     </el-dialog>
   </template>
@@ -232,67 +131,62 @@
 <script setup lang="ts">
 import { useThrottleFn } from "@vueuse/core";
 import type { FormInstance, FormRules } from "element-plus";
-import { nextTick, reactive, ref, watch, watchEffect } from "vue";
 import type { IModalConfig, IObject } from "./types";
+import InputTag from "@/components/InputTag/index.vue";
+import IconSelect from "@/components/IconSelect/index.vue";
 
 // 定义接收的属性
-const props = defineProps<{
+const props = defineProps<{ modalConfig: IModalConfig }>();
-  modalConfig: IModalConfig;
-}>();
 // 自定义事件
-const emit = defineEmits<{
+const emit = defineEmits<{ submitClick: [] }>();
-  submitClick: [];
+// 组件映射表
-}>();
+/* eslint-disable */
+const componentMap = new Map([
+  // @ts-ignore
+  ["input", markRaw(ElInput)], // @ts-ignore
+  ["select", markRaw(ElSelect)], // @ts-ignore
+  ["switch", markRaw(ElSwitch)], // @ts-ignore
+  ["cascader", markRaw(ElCascader)], // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)], // @ts-ignore
+  ["input-tag", markRaw(InputTag)], // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)], // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)], // @ts-ignore
+  ["date-picker", markRaw(ElDatePicker)], // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)], // @ts-ignore"
+  ["custom-tag", markRaw(InputTag)], // @ts-ignore
+  ["text", markRaw(ElText)], // @ts-ignore
+  ["radio", markRaw(ElRadioGroup)], // @ts-ignore"
+  ["checkbox", markRaw(ElCheckboxGroup)], // @ts-ignore"
+  ["icon-select", markRaw(IconSelect)], // @ts-ignore"
+  ["custom", ""],
+]);
+const childrenMap = new Map([
+  // @ts-ignore
+  ["select", markRaw(ElOption)], // @ts-ignore
+  ["radio", markRaw(ElRadio)], // @ts-ignore"
+  ["checkbox", markRaw(ElCheckbox)],
+]);
+/* eslint-enable */
 
 const pk = props.modalConfig.pk ?? "id";
 const modalVisible = ref(false);
 const formRef = ref<FormInstance>();
-const formItems = reactive(props.modalConfig.formItems);
+const formItems = reactive(props.modalConfig.formItems ?? []);
 const formData = reactive<IObject>({});
 const formRules: FormRules = {};
 const formDisable = ref(false);
-const prepareFuncs = [];
-for (const item of formItems) {
-  item.initFn && item.initFn(item);
-  formData[item.prop] = item.initialValue ?? "";
-  formRules[item.prop] = item.rules ?? [];
-
-  if (item.watch !== undefined) {
-    prepareFuncs.push(() => {
-      watch(
-        () => formData[item.prop],
-        (newValue, oldValue) => {
-          item.watch && item.watch(newValue, oldValue, formData, formItems);
-        }
-      );
-    });
-  }
-
-  if (item.computed !== undefined) {
-    prepareFuncs.push(() => {
-      watchEffect(() => {
-        item.computed && (formData[item.prop] = item.computed(formData));
-      });
-    });
-  }
-
-  if (item.watchEffect !== undefined) {
-    prepareFuncs.push(() => {
-      watchEffect(() => {
-        item.watchEffect && item.watchEffect(formData);
-      });
-    });
-  }
-}
-prepareFuncs.forEach((func) => func());
-
-// 获取表单数据
-function getFormData(key?: string) {
-  return key === undefined ? formData : (formData[key] ?? undefined);
-}
 
+// 获取tooltip提示框属性
+const getTooltipProps = (tips: string | IObject) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+// 隐藏弹窗
+const handleClose = () => {
+  modalVisible.value = false;
+  formRef.value?.resetFields();
+};
 // 设置表单值
-function setFormData(data: IObject) {
+const setFormData = (data: IObject) => {
   for (const key in formData) {
     if (Object.prototype.hasOwnProperty.call(formData, key) && key in data) {
       formData[key] = data[key];
@@ -301,77 +195,74 @@ function setFormData(data: IObject) {
   if (Object.prototype.hasOwnProperty.call(data, pk)) {
     formData[pk] = data[pk];
   }
-}
+};
-
-// 设置表单项值
-function setFormItemData(key: string, value: any) {
-  formData[key] = value;
-}
-
-// 显示modal
-function setModalVisible(data: IObject = {}) {
-  modalVisible.value = true;
-  // nextTick解决赋值后重置表单无效问题
-  nextTick(() => {
-    Object.values(data).length > 0 && setFormData(data);
-  });
-}
-
 // 表单提交
 const handleSubmit = useThrottleFn(() => {
   formRef.value?.validate((valid: boolean) => {
-    if (valid) {
+    if (!valid) return;
-      if (typeof props.modalConfig.beforeSubmit === "function") {
+    if (typeof props.modalConfig.beforeSubmit === "function") {
-        props.modalConfig.beforeSubmit(formData);
+      props.modalConfig.beforeSubmit(formData);
-      }
-      props.modalConfig.formAction(formData).then(() => {
-        let msg = "操作成功";
-        if (props.modalConfig.component === "drawer") {
-          if (props.modalConfig.drawer?.title) {
-            msg = `${props.modalConfig.drawer?.title}成功`;
-          }
-        } else {
-          if (props.modalConfig.dialog?.title) {
-            msg = `${props.modalConfig.dialog?.title}成功`;
-          }
-        }
-        ElMessage.success(msg);
-        emit("submitClick");
-        handleClose();
-      });
     }
+    if (!props.modalConfig?.formAction) {
+      ElMessage.error("未配置exportAction");
+      return;
+    }
+    props.modalConfig.formAction(formData).then(() => {
+      let msg = "操作成功";
+      if (props.modalConfig.component === "drawer") {
+        msg = `${props.modalConfig.drawer?.title}成功`;
+      } else {
+        msg = `${props.modalConfig.dialog?.title}成功`;
+      }
+      ElMessage.success(msg);
+      emit("submitClick");
+      handleClose();
+    });
   });
 }, 3000);
 
-// 隐藏弹窗
+onMounted(() => {
-function handleClose() {
+  formItems.forEach((item) => {
-  modalVisible.value = false;
+    item.initFn && item.initFn(item);
-}
+    formRules[item.prop] = item?.rules ?? [];
+    props.modalConfig.form = { labelWidth: "auto", ...props.modalConfig?.form };
 
-// 关闭弹窗
+    if (["input-tag", "custom-tag", "cascader"].includes(item.type)) {
-function handleCloseModal() {
+      formData[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
-  formRef.value?.resetFields();
+    } else if (item.type === "input-number") {
-  nextTick(() => {
+      formData[item.prop] = item.initialValue ?? null;
-    formRef.value?.clearValidate();
+    } else {
-  });
+      formData[item.prop] = item.initialValue ?? "";
-}
-
-// 禁用表单--用于详情时候用
-function handleDisabled(disable: boolean) {
-  formDisable.value = disable;
-  props.modalConfig.formItems.forEach((item) => {
-    if (item) {
-      if (item.attrs) {
-        item.attrs.disabled = disable;
-      } else {
-        item.attrs = { disabled: disable };
-      }
     }
   });
-}
+});
 
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled });
+defineExpose({
+  setFormData,
+  // 展示/因此 modal
+  setModalVisible: (visible: boolean = true) => (modalVisible.value = visible),
+  // 获取表单数据
+  getFormData: (key: string) => formData[key] ?? formData,
+  // 设置表单项值
+  setFormItemData: (key: string, value: any) => (formData[key] = value),
+  // 禁用表单
+  handleDisabled: (disable: boolean) => {
+    formDisable.value = disable;
+    props.modalConfig.form = {
+      ...props.modalConfig.form,
+      disabled: disable,
+    };
+  },
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+:deep(.el-input-number.is-without-controls .el-input__wrapper) {
+  padding-right: 11px !important ;
+  padding-left: 11px !important;
+}
+</style>

src/components/CURD/types.ts

@@ -15,7 +15,7 @@ export type IObject = Record<string, any>;
 
 type DataComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
 type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select";
-type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "custom";
+type OtherComponent = "text" | "radio" | "checkbox" | "switch" | "icon-select" | "custom";
 export type ISearchComponent = DataComponent | InputComponent;
 export type IComponentType = DataComponent | InputComponent | OtherComponent;
 
@@ -26,14 +26,12 @@ export type IToolsButton = {
   name: string; // 按钮名称
   text?: string; // 按钮文本
   perm?: Array<string> | string; // 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add')
-  icon?: string; // 按钮图标
-  type?: string; // 按钮类型
   attrs?: Partial<ButtonProps> & { style?: CSSProperties }; // 按钮属性
   render?: (row: IObject) => boolean; // 条件渲染
 };
 export type IToolsDefault = ToolbarLeft | ToolbarRight | ToolbarTable | IToolsButton;
 
-export interface IOperatData {
+export interface IOperateData {
   name: string;
   row: IObject;
   column: IObject;
@@ -184,9 +182,11 @@ export interface IContentConfig<T = any> {
 export interface IModalConfig<T = any> {
   // 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验
   permPrefix?: string;
+  // 标签冒号(默认：false)
+  colon?: boolean;
   // 主键名(主要用于编辑数据,默认为id)
   pk?: string;
-  // 组件类型
+  // 组件类型(默认：dialog)
   component?: "dialog" | "drawer";
   // dialog组件属性
   dialog?: Partial<Omit<DialogProps, "modelValue">>;
@@ -195,7 +195,7 @@ export interface IModalConfig<T = any> {
   // form组件属性
   form?: IForm;
   // 表单项
-  formItems: IFormItems<T>;
+  formItems: IFormItems;
   // 提交之前处理
   beforeSubmit?: (data: T) => void;
   // 提交的网络请求函数(需返回promise)
@@ -205,9 +205,9 @@ export interface IModalConfig<T = any> {
 export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
 
 // 表单项
-export type IFormItems<T = any> = Array<{
+export type IFormItems = Array<{
   // 组件类型(如input,select,radio,custom等，默认input)
-  type?: IComponentType;
+  type: IComponentType;
   // 组件属性
   attrs?: IObject;
   // 组件可选项(适用于select,radio,checkbox组件)
@@ -222,7 +222,7 @@ export type IFormItems<T = any> = Array<{
   // 标签文本
   label: string;
   // 标签提示
-  tips?: string;
+  tips?: string | IObject;
   // 键名
   prop: string;
   // 验证规则
@@ -233,12 +233,8 @@ export type IFormItems<T = any> = Array<{
   hidden?: boolean;
   // layout组件Col属性
   col?: Partial<ColProps>;
-  // 监听函数
+  // 组件事件
-  watch?: (newValue: any, oldValue: any, data: T, items: IObject[]) => void;
+  events?: Record<string, (...args: any) => void>;
-  // 计算属性函数
-  computed?: (data: T) => any;
-  // 监听收集函数
-  watchEffect?: (data: T) => void;
   // 初始化数据函数扩展
   initFn?: (item: IObject) => void;
 }>;

src/components/CURD/usePage.ts

@@ -23,9 +23,18 @@ function usePage() {
     addModalRef.value?.setModalVisible();
   }
   // 编辑
-  function handleEditClick(row: IObject) {
+  async function handleEditClick(row: IObject, callback?: (result?: IObject) => IObject) {
-    //显示编辑表单 根据数据进行填充
+    editModalRef.value?.setModalVisible();
-    editModalRef.value?.setModalVisible(row);
+    editModalRef.value?.handleDisabled(false);
+    let from = await (callback?.(row) ?? Promise.resolve(row));
+    editModalRef.value?.setFormData(from ? from : row);
+  }
+  // 编辑
+  async function handleViewClick(row: IObject, callback?: (result?: IObject) => IObject) {
+    editModalRef.value?.setModalVisible();
+    editModalRef.value?.handleDisabled(true);
+    let from = await (callback?.(row) ?? Promise.resolve(row));
+    editModalRef.value?.setFormData(from ? from : row);
   }
   // 表单提交
   function handleSubmitClick() {
@@ -58,6 +67,7 @@ function usePage() {
     handleResetClick,
     handleAddClick,
     handleEditClick,
+    handleViewClick,
     handleSubmitClick,
     handleExportClick,
     handleSearchClick,

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

@@ -112,12 +112,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
         {
           name: "detail",
           text: "详情",
-          attrs: { icon: "Document" },
+          attrs: { icon: "Document", type: "primary" },
         },
         {
           name: "reset_pwd",
           text: "重置密码",
-          perm: "password:reset",
+          // perm: "password-reset",
           attrs: {
             icon: "refresh-left",
             // color: "#626AEF", // 使用 text 属性，颜色不生效

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

@@ -5,6 +5,7 @@ const contentConfig: IContentConfig = {
   table: {
     showOverflowTooltip: true,
   },
+  pagePosition: "right",
   toolbar: [],
   indexAction: function (params) {
     // 模拟发起网络请求获取列表数据
@@ -14,7 +15,7 @@ const contentConfig: IContentConfig = {
       list: [
         {
           id: 1,
-          username: "tom",
+          username: "root",
           avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
           percent: 99,
           price: 10,
@@ -115,14 +116,16 @@ const contentConfig: IContentConfig = {
       width: 220,
       templet: "tool",
       operat: [
+        "view",
+        "edit",
         {
-          name: "reset_pwd",
+          name: "delete",
-          text: "重置密码",
+          text: "展示删除",
-          perm: "password:reset",
+          perm: "delete",
-          attrs: { icon: "refresh-left", type: "primary" },
+          attrs: { icon: "delete", type: "danger" },
           render(row) {
             // 根据条件，显示或隐藏
-            return row.id === 1;
+            return row.id !== 1;
           },
         },
       ],

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

@@ -2,6 +2,8 @@ import UserAPI, { type UserForm } from "@/api/system/user.api";
 import type { IModalConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useAppStore } from "@/store";
+import DeptAPI from "@/api/system/dept.api";
+import RoleAPI from "@/api/system/role.api";
 
 const modalConfig: IModalConfig<UserForm> = {
   permPrefix: "sys:user",
@@ -11,12 +13,12 @@ const modalConfig: IModalConfig<UserForm> = {
     size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
   },
   pk: "id",
+  beforeSubmit(data) {
+    console.log("beforeSubmit", data);
+  },
   formAction: function (data) {
     return UserAPI.update(data.id as string, data);
   },
-  beforeSubmit(data) {
-    console.log("提交之前处理", data);
-  },
   formItems: [
     {
       label: "用户名",
@@ -49,12 +51,17 @@ const modalConfig: IModalConfig<UserForm> = {
         "check-strictly": true,
         "render-after-expand": false,
       },
+      async initFn(formItem) {
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        formItem.attrs.data = await DeptAPI.getOptions();
+      },
     },
     {
       type: "custom",
       label: "性别",
       prop: "gender",
       initialValue: 1,
+      attrs: { style: { width: "100%" } },
     },
     {
       label: "角色",
@@ -67,6 +74,9 @@ const modalConfig: IModalConfig<UserForm> = {
       },
       options: [],
       initialValue: [],
+      async initFn(formItem) {
+        formItem.options = await RoleAPI.getOptions();
+      },
     },
     {
       type: "input",
@@ -105,6 +115,7 @@ const modalConfig: IModalConfig<UserForm> = {
       prop: "status",
       type: "switch",
       attrs: {
+        inlinePrompt: true,
         activeText: "正常",
         inactiveText: "禁用",
         activeValue: 1,

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

@@ -0,0 +1,105 @@
+import type { IModalConfig } from "@/components/CURD/types";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { useAppStore } from "@/store";
+
+const modalConfig: IModalConfig = {
+  permPrefix: "sys:user",
+  component: "drawer",
+  colon: true,
+  pk: "id",
+  drawer: {
+    title: "修改用户",
+    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  },
+  form: { labelPosition: "right", labelWidth: "auto" },
+  beforeSubmit(data) {
+    console.log("beforeSubmit", data);
+  },
+  formAction: function (data) {
+    // return UserAPI.update(data.id as string, data);
+    // 模拟发起网络请求修改字段
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+  formItems: [
+    {
+      tips: { effect: "light", placement: "top", content: "自定义文字提示" },
+      type: "input",
+      label: "文本",
+      prop: "username",
+      attrs: { placeholder: "请输入", clearable: true },
+    },
+    {
+      type: "input-number",
+      label: "百分比",
+      prop: "percent",
+      attrs: { placeholder: "请输入", controls: false },
+      slotName: "suffix",
+    },
+    {
+      type: "input-number",
+      label: "货币符",
+      prop: "price",
+      attrs: { placeholder: "请输入", controls: false },
+      slotName: "prefix",
+    },
+    {
+      type: "input",
+      label: "链接",
+      prop: "url",
+      attrs: { placeholder: "请输入", clearable: true },
+    },
+    {
+      type: "icon-select",
+      label: "链接",
+      prop: "icon",
+    },
+    {
+      type: "custom",
+      label: "列表值",
+      prop: "gender",
+      slotName: "gender",
+      attrs: { style: { width: "100%" } },
+    },
+    {
+      type: "select",
+      label: "自定义",
+      prop: "status",
+      attrs: { placeholder: "全部", clearable: true },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+    },
+    {
+      type: "switch",
+      label: "Switch",
+      prop: "status2",
+      attrs: {
+        inlinePrompt: true,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: "启用",
+        inactiveText: "禁用",
+      },
+    },
+    {
+      type: "input-number",
+      label: "输入框",
+      prop: "sort",
+      attrs: { placeholder: "请输入", controls: false },
+    },
+    {
+      type: "date-picker",
+      label: "日期格式化",
+      prop: "createTime",
+      attrs: {
+        type: "datetime",
+        format: "YYYY/MM/DD hh:mm:ss",
+        "value-format": "x",
+      },
+    },
+  ],
+};
+
+export default reactive(modalConfig);

src/views/demo/curd/index.vue

@@ -26,11 +26,10 @@
         ref="contentRef"
         :content-config="contentConfig"
         @add-click="handleAddClick"
-        @edit-click="handleEditClick"
         @export-click="handleExportClick"
         @search-click="handleSearchClick"
         @toolbar-click="handleToolbarClick"
-        @operat-click="handleOperatClick"
+        @operate-click="handleOperateClick"
         @filter-change="handleFilterChange"
       >
         <template #status="scope">
@@ -75,10 +74,11 @@
     </template>
     <template v-else>
       <page-search ref="searchRef" :search-config="searchConfig2" @reset-click="handleResetClick" />
+
       <page-content
         ref="contentRef"
         :content-config="contentConfig2"
-        @operat-click="handleOperatClick"
+        @operate-click="handleOperateClick2"
       >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
@@ -86,20 +86,31 @@
           </el-tag>
         </template>
       </page-content>
+
+      <page-modal ref="editModalRef" :modal-config="editModalConfig2">
+        <template #suffix>
+          <span style="color: black">%</span>
+        </template>
+        <template #prefix>
+          <span>$</span>
+        </template>
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+      </page-modal>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import UserAPI from "@/api/system/user.api";
-import DeptAPI from "@/api/system/dept.api";
+import type { IObject, IOperateData } from "@/components/CURD/types";
-import RoleAPI from "@/api/system/role.api";
-import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
 import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
+import editModalConfig2 from "./config/edit2";
 import searchConfig from "./config/search";
 import searchConfig2 from "./config/search2";
 
@@ -111,7 +122,8 @@ const {
   handleQueryClick,
   handleResetClick,
   // handleAddClick,
-  // handleEditClick,
+  handleEditClick,
+  handleViewClick,
   handleSubmitClick,
   handleExportClick,
   handleSearchClick,
@@ -121,22 +133,8 @@ const {
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
+  // 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
-  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-}
-// 编辑
-async function handleEditClick(row: IObject) {
-  editModalRef.value?.handleDisabled(false);
-  editModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
-  editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-  // 根据id获取数据进行填充
-  const data = await UserAPI.getFormData(row.id);
-  editModalRef.value?.setFormData(data);
 }
 // 其他工具栏
 function handleToolbarClick(name: string) {
@@ -145,11 +143,22 @@ function handleToolbarClick(name: string) {
     ElMessage.success("点击了自定义1按钮");
   }
 }
-// 其他操作列
+
-async function handleOperatClick(data: IOperatData) {
+// 表格工具栏
-  console.log(data);
+const handleOperateClick = (data: IObject) => {
-  // 重置密码
+  if (data.name === "detail") {
-  if (data.name === "reset_pwd") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
+    handleViewClick(data.row, async () => {
+      // 加载下拉数据源，建议在初始化配置项 initFn 中加载，避免多次请求
+      // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+      return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
+    });
+  } else if (data.name === "edit") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
+    handleEditClick(data.row, async () => {
+      return await UserAPI.getFormData(data.row.id); // 根据ID获取详情
+    });
+  } else if (data.name === "reset_pwd") {
     ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
@@ -162,23 +171,32 @@ async function handleOperatClick(data: IOperatData) {
         ElMessage.success("密码重置成功，新密码是：" + value);
       });
     });
-  } else if (data.name === "detail") {
+  } else if (data.name === "delete") {
-    // 禁用表单编辑
+    ElMessageBox.confirm("确认删除?", "警告", {
-    editModalRef.value?.handleDisabled(true);
+      confirmButtonText: "确定",
-    // 打开抽屉
+      cancelButtonText: "取消",
-    editModalRef.value?.setModalVisible();
+      type: "warning",
-    // 修改抽屉标题
+    })
-    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
+      .then(function () {
-    // 加载部门下拉数据源
+        UserAPI.deleteByIds(data.row.id).then(() => {
-    editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+          ElMessage.success("删除成功");
-    // 加载角色下拉数据源
+          contentRef.value?.handleRefresh(true); // 刷新列表
-    editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+        });
-    // 根据id获取数据进行填充
+      })
-    const formData = await UserAPI.getFormData(data.row.id);
+      .catch(() => {});
-    // 设置表单数据
-    editModalRef.value?.setFormData(formData);
   }
-}
+};
+const handleOperateClick2 = (data: IOperateData) => {
+  if (data.name === "view") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "查看" };
+    handleViewClick(data.row);
+  } else if (data.name === "edit") {
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
+    handleEditClick(data.row);
+  } else if (data.name === "delete") {
+    ElMessage.success("模拟删除成功");
+  }
+};
 
 // 切换示例
 const isA = ref(true);