vue-super-crud 1.7.2 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-super-crud",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "main": "lib/super-crud.min.js",
   "files": [
     "lib",

package/src/config/common.js

@@ -9,8 +9,9 @@ export const renderItem = {
   },
   dict: {
     strict: true,
-    type: [String, Object],
+    type: [String, Object, Function],
     properties: {
+      key: String,
       request: Function,
       label: String, // 数据字典中label字段的属性名
       value: String, // 数据字典中value字段的属性名
@@ -54,6 +55,7 @@ export const renderItem = {
     },
   }, // 验证规则
   position: Boolean, // 是否开启位置渲染
+  formatData: [Object, String], // 响应式数据格式化
 };
 
 export const buttonItem = {

package/src/config/crud.js

@@ -77,6 +77,30 @@ export default {
       type: String,
       default: "small",
     },
+    persistPageSize: Boolean, // 是否持久化拖动宽度
+    persistWidth: Boolean, // 是否持久化拖动宽度
+    delayRender: Boolean, // 是否启用延迟渲染
+    delayRenderConfig: {
+      // 延迟渲染配置
+      type: [Boolean, Object],
+      default: () => ({
+        batchSize: 16,
+        maxProcessTime: 16,
+        frameDelay: 2,
+        strategy: "cell",
+      }),
+      properties: {
+        batchSize: Number, // 每批处理的元素数量，数值越大渲染越快，但可能导致卡顿
+        maxProcessTime: Number, // 每帧最大处理时间（ms），防止单帧处理时间过长
+        frameDelay: Number, // 批次间的帧间隔，数值越大越平滑，但渲染完成时间越长
+      },
+    }, // 是否启用延迟渲染
+    virtualized: Boolean, // 是否启用虚拟列表
+    itemSize: {
+      // 延迟渲染、虚拟列表的固定行高
+      type: Number,
+      default: 40,
+    },
     summaryData: Array, // 外部传入的统计数据
     // 是否禁用
     disabled: Boolean,
@@ -140,6 +164,7 @@ export default {
             },
           },
         }),
+        addChild: buttonItem, // 子级新增按钮配置
         batchDelete: buttonItem, // 批量删除按钮配置
         delete: buttonItem, // 删除按钮配置
         view: buttonItem, // 查看按钮配置，仅限`dialog`模式
@@ -250,9 +275,6 @@ export default {
       default: () => ({
         pageNum: "pageNum",
         pageSize: "pageSize",
-        detailResult: "data",
-        listResult: "data",
-        total: "total",
       }),
     },
     // 是否本地生成唯一标识
@@ -281,7 +303,6 @@ export default {
       type: [Boolean, Object],
       default: () => ({
         show: true,
-        width: 290,
         resetBtn: true,
       }),
       properties: {
@@ -337,6 +358,7 @@ export default {
         layout: "total, sizes, prev, pager, next, jumper",
         background: true,
         pagerCount: 5,
+        memorizeScroll: true, // 临时保存分页滚动位置
       }),
     },
     // 空状态配置
@@ -405,6 +427,7 @@ export default {
         calcWidth: Number,
         defaultWidth: Number,
         sameRowSpan: [String, Boolean],
+        spanProp: [String, Boolean],
         fixed: [String, Boolean],
         handles: {
           type: Array,
@@ -465,6 +488,7 @@ export default {
           hiddenList: Boolean, // 是否只隐藏列表
           children: Array, // 嵌套列子列
           sameRowSpan: [String, Boolean], // 是否合并单元格
+          spanProp: [String, Boolean], // 是否合并单元格
           spanMethod: Function, // 合并单元格方法
           isEdit: [Boolean, Function], // 是否允许编辑
           summary: {

package/src/index.js

@@ -12,6 +12,9 @@ import tabs from "pak/tabs";
 import verifyInput from "pak/verifyInput";
 import button from "pak/button";
 import position from "pak/core/components/position";
+import grid from "pak/grid/index.vue";
+import cell from "pak/grid/cell.vue";
+import lazyRender from "pak/lazyRender/index.vue";
 
 import { mergeTemplate } from "./template";
 import directive from "pak/directive";
@@ -33,28 +36,30 @@ const components = [
   verifyInput,
   button,
   position,
+  grid,
+  cell,
+  lazyRender,
 ];
 
 const install = function (Vue, opts = {}) {
   // 判断是否安装
   if (install.installed) return;
   install.installed = true;
-  if (opts.template) {
-    mergeTemplate(opts.template);
-  }
-  window.Vue = Vue;
 
-  Vue.prototype.$scOpt = opts;
-  Vue.prototype.$scDialog = dialog;
-  Vue.prototype.$scDict = globalDict(Vue, opts.dict || {});
+  // 合并外部代码模板
+  opts.template && mergeTemplate(opts.template);
 
+  // 初始化配置管理器
   configManager.create(config, opts);
-  // Vue.use(Contextmenu);
+
   // 遍历注册全局组件
-  components.forEach((component) => {
-    Vue.component(component.name, component);
-  });
+  components.forEach((component) => Vue.component(component.name, component));
+
+  Vue.prototype.$scOpt = opts;
+  Vue.prototype.$scDialog = dialog;
+  Vue.prototype.$scDict = globalDict(Vue, opts.dict || {});
   directive(Vue);
+  window.Vue = Vue;
 };
 
 // 判断是否是直接引入文件

package/src/template/formatData.js

@@ -241,12 +241,11 @@ export default {
   numberFormat: (item) => {
     const config = {
       precision: 2, // 精度（小数位数）
-      round: true, // 是否四舍五入
+      round: false, // 是否四舍五入
       toFixed: false, // 是否固定小数位数
       thousandth: false, // 是否显示千分位
       prefix: "", // 前缀
       suffix: "", // 后缀
-      keepZero: false, // 是否保留末尾0
       ...(get(item, "formatData") || item),
     };
 
@@ -258,23 +257,50 @@ export default {
     };
 
     // 处理数字精度
-    const formatPrecision = (num) => {
+    const formatPrecision = (num, originalStr = "") => {
       if (typeof num !== "number") return num;
+      let result;
+      if (config.precision !== 0) {
+        const endsWithDot = originalStr.endsWith(".");
+        // 检查原始字符串是否以0结尾的小数
+        const endsWithZero =
+          originalStr.includes(".") && originalStr.endsWith("0");
+        const decimalPlaces = endsWithZero
+          ? originalStr.split(".")[1].length
+          : 0;
+
+        // 使用字符串操作来保持精确度
+        const numStr = String(num);
+        const parts = numStr.split(".");
+        if (parts.length > 1) {
+          const integerPart = parts[0];
+          const decimalPart = parts[1];
+          if (config.round) {
+            result = Number(Number(num).toFixed(config.precision));
+          } else {
+            // 直接截取所需的小数位数
+            result = Number(
+              integerPart + "." + decimalPart.slice(0, config.precision)
+            );
+          }
+        } else {
+          result = num;
+        }
 
-      if (config.precision !== undefined) {
-        const multiplier = Math.pow(10, config.precision);
-        num = config.round
-          ? Math.round(num * multiplier) / multiplier
-          : Math.floor(num * multiplier) / multiplier;
-      }
-
-      if (config.toFixed && config.precision !== undefined) {
-        num = num.toFixed(config.precision);
-        if (!config.keepZero) {
-          num = String(Number(num));
+        // 如果原始输入以0结尾，使用原始小数位数
+        if (endsWithZero && !config.toFixed) {
+          result = Number(result).toFixed(
+            Math.min(config.precision, decimalPlaces)
+          );
+        } else if (endsWithDot && !String(result).includes(".")) {
+          result = result + ".";
+        } else if (config.toFixed) {
+          result = Number(result).toFixed(config.precision);
         }
+      } else {
+        result = Number(num).toFixed(0);
       }
-      return num;
+      return result;
     };
 
     // 处理多个小数点的情况（只保留第一个）
@@ -289,6 +315,11 @@ export default {
 
     return {
       input: (value) => {
+        // 处理空值情况
+        if (value === undefined || value === null || value === "") {
+          return "";
+        }
+
         try {
           let rawStr = "";
           if (typeof value === "string") {
@@ -297,25 +328,15 @@ export default {
             rawStr = String(value);
           }
 
-          // 校验是否为有效的数字格式（允许负号和小数点）
-          if (!/^-?\d*\.?\d*$/.test(rawStr)) {
-            return value;
-          }
-
-          // 检查原始字符串是否以小数点结尾
-          const endsWithDot = rawStr.endsWith(".");
-
           const num = Number(rawStr);
+          // 如果转换后是 NaN，返回空字符串
           if (isNaN(num)) {
-            return value;
+            return "";
           }
-          let formatted = formatPrecision(num);
-          formatted = String(formatted);
 
-          // 如果原始输入以小数点结尾，但格式化后中没有小数点，则补回
-          if (endsWithDot && !formatted.includes(".")) {
-            formatted += ".";
-          }
+          // 传入原始字符串，用于处理特殊情况
+          let formatted = formatPrecision(num, rawStr);
+          formatted = String(formatted);
 
           if (config.thousandth) {
             formatted = formatThousandth(formatted);
@@ -324,7 +345,7 @@ export default {
           return `${config.prefix}${formatted}${config.suffix}`;
         } catch (error) {
           console.warn("数字格式化失败:", error);
-          return value;
+          return "";
         }
       },
       // 输出时去除格式化（还原为原始数字字符串）
@@ -354,50 +375,16 @@ export default {
       },
     };
   },
-  // 输入格式化
-  inputFormat: (item) => {
-    // 预设的正则规则
-    const REGEX_RULES = {
-      number: /[^\d]/g, // 仅数字
-      phone: /[^\d]/g, // 手机号
-      decimal: /[^\d.]/g, // 小数
-      letter: /[^a-zA-Z]/g, // 仅字母
-      chinese: /[^\u4e00-\u9fa5]/g, // 仅中文
-      letterNumber: /[^a-zA-Z0-9]/g, // 字母和数字
-      email: /[^a-zA-Z0-9@._-]/g, // 邮箱
-      custom: null, // 自定义正则
-    };
-
+  // 自定义正则格式化
+  regexFormat: (item) => {
     // 默认配置
     const config = {
-      inputType: "number", // 格式化类型
-      pattern: "", // 自定义正则
-      maxLength: undefined, // 最大长度
-      decimal: undefined, // 小数位数（type为decimal时使用）
+      pattern: "", // 自定义正则表达式
+      flags: "g", // 正则标志，默认全局匹配
+      replace: "", // 替换值，默认为空字符串
       ...(get(item, "formatData") || item),
     };
 
-    // 处理小数格式化
-    const formatDecimal = (value) => {
-      if (!value) return value;
-
-      // 先去除非数字和小数点
-      let formatted = value.replace(/[^\d.]/g, "");
-
-      // 只保留第一个小数点
-      const parts = formatted.split(".");
-      if (parts.length > 2) {
-        formatted = parts[0] + "." + parts.slice(1).join("");
-      }
-
-      // 处理小数位数
-      if (config.decimal !== undefined && parts[1]) {
-        formatted = parts[0] + "." + parts[1].slice(0, config.decimal);
-      }
-
-      return formatted;
-    };
-
     return {
       input: (value) => {
         if (!value) return value;
@@ -405,28 +392,38 @@ export default {
         try {
           let formatted = String(value);
 
-          // 处理最大长度
-          if (config.maxLength) {
-            formatted = formatted.slice(0, config.maxLength);
-          }
-
-          // 小数特殊处理
-          if (config.inputType === "decimal") {
-            return formatDecimal(formatted);
+          // 验证并应用正则表达式
+          if (config.pattern) {
+            let regex;
+            if (config.pattern instanceof RegExp) {
+              // 如果已经是RegExp对象，直接使用
+              regex = config.pattern;
+            } else {
+              // 如果是字符串，创建RegExp对象
+              regex = new RegExp(config.pattern, config.flags);
+            }
+
+            // 如果是验证模式（以^开头且以$结尾），则进行完整匹配
+            if (
+              config.pattern.toString().startsWith("/^") &&
+              config.pattern.toString().endsWith("$/")
+            ) {
+              return regex.test(formatted) ? formatted : "";
+            } else {
+              // 否则进行替换
+              formatted = formatted.replace(regex, config.replace);
+            }
           }
 
-          // 优先使用自定义正则，如果没有则使用预设规则
-          const rule = config.pattern
-            ? new RegExp(config.pattern, "g")
-            : REGEX_RULES[config.inputType];
-
-          return formatted.replace(rule, "");
+          return formatted;
         } catch (error) {
-          console.warn("输入格式化失败:", error);
+          console.warn("自定义正则格式化失败:", error);
           return value;
         }
       },
-      output: (value) => value,
+      output: (value) => {
+        return value;
+      },
     };
   },
   // 百分比格式化