@nokecy/qc-ui 1.1.46 → 1.1.48

package/dist/cjs/array-table/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useArrayTableSources = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = exports.buildArrayTableColumns = exports.LazyReadOnlyText = exports.LazyAgField = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
 var _react2 = require("@formily/react");
 var _shared = require("@formily/shared");
 var _arrayBase = _interopRequireDefault(require("./arrayBase"));
@@ -141,6 +142,54 @@ var AgField = function AgField(_ref) {
   return children;
 };
 
+/**
+ * 快路径能否按这个字段名取到值。
+ *
+ * Formily 的字段名是「路径」不是「键」,支持点号嵌套(`item.qty`)、数组下标(`a[0]`)、
+ * 解构(`{value:code,label:name}`)等语法。快路径(只读文本/懒挂载)不挂 Formily 树,
+ * 取值得自己解析。这里只认「点号分段」这一种简单形态,其余一律判不合格 ->
+ * 调用方回退 AgField 全树(由 Formily 自己解析,正确优先于速度)。@author nokecy
+ */
+var isSimpleFieldPath = function isSimpleFieldPath(name) {
+  return !!name && /^[^.{}[\]*]+(\.[^.{}[\]*]+)*$/.test(name);
+};
+
+/**
+ * 按 Formily 字段名从行数据取值。
+ *
+ * 曾经一律按扁平键取 record['item.qty'],而数据在 record.item.qty ->
+ * 嵌套字段名恒 undefined,单元格默认空白,点击挂上全树(按路径解析)才显出真值。
+ *
+ * 在 Observer 里逐层读可观察对象,依赖链完整,程序化改值(setValuesIn)照样刷新。@author nokecy
+ */
+var readByFieldPath = function readByFieldPath(record, path) {
+  if (record == null) return undefined;
+  if (path.indexOf('.') < 0) return record[path];
+  return path.split('.').reduce(function (acc, key) {
+    return acc == null ? undefined : acc[key];
+  }, record);
+};
+
+/** 「选一个」型组件:空值占位说「请选择」,其余说「请输入」 */
+var SELECT_LIKE = new Set(['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Radio.Group', 'Checkbox.Group', 'Transfer']);
+
+/**
+ * 懒挂载空值格显示什么。
+ *
+ * 懒挂载把未激活的可编辑格降成纯文本,值为空时整格一片空白——连输入框边框都没有,
+ * 用户看不出这里能填,以为功能坏了。故空值时按真控件的 placeholder 出淡灰占位,
+ * 点开前后看到同一句话,观感连续。
+ *
+ * 同样的理由 Switch/Checkbox 早就强制 eager 了(见 buildArrayTableColumns 的
+ * isInlineToggle),这里是把那条理由推广到其余可编辑列。@author nokecy
+ */
+var resolveEmptyPlaceholder = function resolveEmptyPlaceholder(fieldSchema) {
+  var _fieldSchema$xCompon;
+  var configured = fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon.placeholder;
+  if (typeof configured === 'string' && configured) return configured;
+  return SELECT_LIKE.has(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']) ? '请选择' : '请输入';
+};
+
 /**
  * 懒挂载单元格渲染器(可编辑列)。
  *
@@ -167,6 +216,9 @@ var LazyAgField = exports.LazyAgField = function LazyAgField(params) {
     formatter = params.formatter,
     columnProps = params.columnProps,
     fieldSchema = params.fieldSchema;
+  // hook 必须在下面的条件 return 之前调用
+  var _theme$useToken = _antd.theme.useToken(),
+    token = _theme$useToken.token;
   var key = "".concat(node === null || node === void 0 ? void 0 : node.id, ":").concat(colDef === null || colDef === void 0 ? void 0 : colDef.field);
   var activated = (record === null || record === void 0 ? void 0 : record._isNew) === true || (context === null || context === void 0 || (_context$activeCells = context.activeCells) === null || _context$activeCells === void 0 || (_context$activeCells$ = _context$activeCells.has) === null || _context$activeCells$ === void 0 ? void 0 : _context$activeCells$.call(_context$activeCells, key)) === true;
   if (activated) {
@@ -187,12 +239,24 @@ var LazyAgField = exports.LazyAgField = function LazyAgField(params) {
   // 免去调用方加 forceAgField 逃生阀。字段名缺失才回退 params.value。@author nokecy
   var dataKey = (_fieldSchema$name = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name !== void 0 ? _fieldSchema$name : colDef === null || colDef === void 0 ? void 0 : colDef.field;
   return /*#__PURE__*/_react.default.createElement(_react2.Observer, null, function () {
-    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var liveValue = dataKey != null && record ? readByFieldPath(record, dataKey) : value;
     var text = formatter ? formatter(liveValue, {
       columnProps: columnProps,
       fieldSchema: fieldSchema
     }) : liveValue == null ? '' : String(liveValue);
     // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    if (text === '') {
+      // 空值:出淡灰 placeholder,让用户看得出这格能填(颜色取 antd 输入框 placeholder 的 token,自动跟随暗色主题)
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "ag-array-table-lazy-placeholder",
+        style: {
+          display: 'inline-block',
+          width: '100%',
+          cursor: 'text',
+          color: token.colorTextPlaceholder
+        }
+      }, resolveEmptyPlaceholder(fieldSchema));
+    }
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "ag-array-table-lazy-text",
       style: {
@@ -224,7 +288,7 @@ var LazyReadOnlyText = exports.LazyReadOnlyText = function LazyReadOnlyText(para
     fieldSchema = params.fieldSchema;
   var dataKey = (_fieldSchema$name2 = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name2 !== void 0 ? _fieldSchema$name2 : colDef === null || colDef === void 0 ? void 0 : colDef.field;
   return /*#__PURE__*/_react.default.createElement(_react2.Observer, null, function () {
-    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var liveValue = dataKey != null && record ? readByFieldPath(record, dataKey) : value;
     var text = formatter ? formatter(liveValue, {
       columnProps: columnProps,
       fieldSchema: fieldSchema
@@ -317,7 +381,7 @@ var buildArrayTableColumns = exports.buildArrayTableColumns = function buildArra
     //   ① 只读纯文本(永不可编辑):只读列 + 有格式化器 -> valueFormatter,不挂 Formily 树。
     //   ② 可编辑懒挂载:可编辑列 + 有格式化器 + 无 reactions + 未强制 eager -> LazyAgField,
     //      存量格先出廉价文本、点击/导航才挂全树(挂了不卸)。
-    //   ③ 兜底全树:其余(无格式化器/带 reactions/forceAgField/只读但无格式化器) -> AgField。
+    //   ③ 兜底全树:其余(无格式化器/带 reactions/forceAgField/复杂字段名/只读但无格式化器) -> AgField。
     var dataField = findDataFieldSchema(schema, name);
     var component = dataField === null || dataField === void 0 ? void 0 : dataField['x-component'];
     var formatter = (0, _readOnlyFormatters.getReadOnlyFormatter)(component);
@@ -335,12 +399,14 @@ var buildArrayTableColumns = exports.buildArrayTableColumns = function buildArra
     // 故按内层字段名补 valueGetter(仅在与 name 不一致时,保持 name===字段名 的现状)。@author nokecy
     var dataFieldName = dataField === null || dataField === void 0 ? void 0 : dataField.name;
     var valueGetter = dataFieldName && dataFieldName !== name ? function (params) {
-      var _params$data;
-      return params === null || params === void 0 || (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data[dataFieldName];
+      return readByFieldPath(params === null || params === void 0 ? void 0 : params.data, dataFieldName);
     } : undefined;
+    // 字段名是路径:`item.qty` 的值在 record.item.qty。快路径自己解析,只认点号分段;
+    // 解构(`{value:a,label:b}`)/数组下标等复杂语法解析不了,回退全树交给 Formily。@author nokecy
+    var canFastPath = !dataFieldName || isSimpleFieldPath(dataFieldName);
 
     // ① 只读纯文本
-    if (readOnly && formatter) {
+    if (readOnly && formatter && canFastPath) {
       // 列级 readPretty 在「可编辑表」里是展示列(值可能被 setValuesIn 自动带出),静态 valueFormatter
       // 读 AG-Grid 缓存值不刷新 → 反应式只读渲染。整表 readPretty(明细/详情页,数据 setValues 整体加载、
       // 行引用整体替换、AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
@@ -371,7 +437,7 @@ var buildArrayTableColumns = exports.buildArrayTableColumns = function buildArra
     }
 
     // ② 可编辑懒挂载(排除单击直控的 Switch/Checkbox:须 eager 出真控件)
-    if (!readOnly && formatter && !hasReactions && !forceEager && !isInlineToggle) {
+    if (!readOnly && formatter && !hasReactions && !forceEager && !isInlineToggle && canFastPath) {
       return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
         valueGetter: valueGetter
       } : {}), {}, {

package/dist/esm/array-table/utils.js

@@ -8,6 +8,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
+import { theme } from 'antd';
 import { useField, useFieldSchema, RecursionField, Observer } from '@formily/react';
 import { isArr } from '@formily/shared';
 import ArrayBase from "./arrayBase";
@@ -134,6 +135,54 @@ var AgField = function AgField(_ref) {
   return children;
 };
 
+/**
+ * 快路径能否按这个字段名取到值。
+ *
+ * Formily 的字段名是「路径」不是「键」,支持点号嵌套(`item.qty`)、数组下标(`a[0]`)、
+ * 解构(`{value:code,label:name}`)等语法。快路径(只读文本/懒挂载)不挂 Formily 树,
+ * 取值得自己解析。这里只认「点号分段」这一种简单形态,其余一律判不合格 ->
+ * 调用方回退 AgField 全树(由 Formily 自己解析,正确优先于速度)。@author nokecy
+ */
+var isSimpleFieldPath = function isSimpleFieldPath(name) {
+  return !!name && /^[^.{}[\]*]+(\.[^.{}[\]*]+)*$/.test(name);
+};
+
+/**
+ * 按 Formily 字段名从行数据取值。
+ *
+ * 曾经一律按扁平键取 record['item.qty'],而数据在 record.item.qty ->
+ * 嵌套字段名恒 undefined,单元格默认空白,点击挂上全树(按路径解析)才显出真值。
+ *
+ * 在 Observer 里逐层读可观察对象,依赖链完整,程序化改值(setValuesIn)照样刷新。@author nokecy
+ */
+var readByFieldPath = function readByFieldPath(record, path) {
+  if (record == null) return undefined;
+  if (path.indexOf('.') < 0) return record[path];
+  return path.split('.').reduce(function (acc, key) {
+    return acc == null ? undefined : acc[key];
+  }, record);
+};
+
+/** 「选一个」型组件:空值占位说「请选择」,其余说「请输入」 */
+var SELECT_LIKE = new Set(['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Radio.Group', 'Checkbox.Group', 'Transfer']);
+
+/**
+ * 懒挂载空值格显示什么。
+ *
+ * 懒挂载把未激活的可编辑格降成纯文本,值为空时整格一片空白——连输入框边框都没有,
+ * 用户看不出这里能填,以为功能坏了。故空值时按真控件的 placeholder 出淡灰占位,
+ * 点开前后看到同一句话,观感连续。
+ *
+ * 同样的理由 Switch/Checkbox 早就强制 eager 了(见 buildArrayTableColumns 的
+ * isInlineToggle),这里是把那条理由推广到其余可编辑列。@author nokecy
+ */
+var resolveEmptyPlaceholder = function resolveEmptyPlaceholder(fieldSchema) {
+  var _fieldSchema$xCompon;
+  var configured = fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon.placeholder;
+  if (typeof configured === 'string' && configured) return configured;
+  return SELECT_LIKE.has(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']) ? '请选择' : '请输入';
+};
+
 /**
  * 懒挂载单元格渲染器(可编辑列)。
  *
@@ -160,6 +209,9 @@ var LazyAgField = function LazyAgField(params) {
     formatter = params.formatter,
     columnProps = params.columnProps,
     fieldSchema = params.fieldSchema;
+  // hook 必须在下面的条件 return 之前调用
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var key = "".concat(node === null || node === void 0 ? void 0 : node.id, ":").concat(colDef === null || colDef === void 0 ? void 0 : colDef.field);
   var activated = (record === null || record === void 0 ? void 0 : record._isNew) === true || (context === null || context === void 0 || (_context$activeCells = context.activeCells) === null || _context$activeCells === void 0 || (_context$activeCells$ = _context$activeCells.has) === null || _context$activeCells$ === void 0 ? void 0 : _context$activeCells$.call(_context$activeCells, key)) === true;
   if (activated) {
@@ -180,12 +232,24 @@ var LazyAgField = function LazyAgField(params) {
   // 免去调用方加 forceAgField 逃生阀。字段名缺失才回退 params.value。@author nokecy
   var dataKey = (_fieldSchema$name = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name !== void 0 ? _fieldSchema$name : colDef === null || colDef === void 0 ? void 0 : colDef.field;
   return /*#__PURE__*/React.createElement(Observer, null, function () {
-    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var liveValue = dataKey != null && record ? readByFieldPath(record, dataKey) : value;
     var text = formatter ? formatter(liveValue, {
       columnProps: columnProps,
       fieldSchema: fieldSchema
     }) : liveValue == null ? '' : String(liveValue);
     // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    if (text === '') {
+      // 空值:出淡灰 placeholder,让用户看得出这格能填(颜色取 antd 输入框 placeholder 的 token,自动跟随暗色主题)
+      return /*#__PURE__*/React.createElement("span", {
+        className: "ag-array-table-lazy-placeholder",
+        style: {
+          display: 'inline-block',
+          width: '100%',
+          cursor: 'text',
+          color: token.colorTextPlaceholder
+        }
+      }, resolveEmptyPlaceholder(fieldSchema));
+    }
     return /*#__PURE__*/React.createElement("span", {
       className: "ag-array-table-lazy-text",
       style: {
@@ -217,7 +281,7 @@ var LazyReadOnlyText = function LazyReadOnlyText(params) {
     fieldSchema = params.fieldSchema;
   var dataKey = (_fieldSchema$name2 = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name2 !== void 0 ? _fieldSchema$name2 : colDef === null || colDef === void 0 ? void 0 : colDef.field;
   return /*#__PURE__*/React.createElement(Observer, null, function () {
-    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var liveValue = dataKey != null && record ? readByFieldPath(record, dataKey) : value;
     var text = formatter ? formatter(liveValue, {
       columnProps: columnProps,
       fieldSchema: fieldSchema
@@ -310,7 +374,7 @@ var buildArrayTableColumns = function buildArrayTableColumns(dataSource, field,
     //   ① 只读纯文本(永不可编辑):只读列 + 有格式化器 -> valueFormatter,不挂 Formily 树。
     //   ② 可编辑懒挂载:可编辑列 + 有格式化器 + 无 reactions + 未强制 eager -> LazyAgField,
     //      存量格先出廉价文本、点击/导航才挂全树(挂了不卸)。
-    //   ③ 兜底全树:其余(无格式化器/带 reactions/forceAgField/只读但无格式化器) -> AgField。
+    //   ③ 兜底全树:其余(无格式化器/带 reactions/forceAgField/复杂字段名/只读但无格式化器) -> AgField。
     var dataField = findDataFieldSchema(schema, name);
     var component = dataField === null || dataField === void 0 ? void 0 : dataField['x-component'];
     var formatter = getReadOnlyFormatter(component);
@@ -328,12 +392,14 @@ var buildArrayTableColumns = function buildArrayTableColumns(dataSource, field,
     // 故按内层字段名补 valueGetter(仅在与 name 不一致时,保持 name===字段名 的现状)。@author nokecy
     var dataFieldName = dataField === null || dataField === void 0 ? void 0 : dataField.name;
     var valueGetter = dataFieldName && dataFieldName !== name ? function (params) {
-      var _params$data;
-      return params === null || params === void 0 || (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data[dataFieldName];
+      return readByFieldPath(params === null || params === void 0 ? void 0 : params.data, dataFieldName);
     } : undefined;
+    // 字段名是路径:`item.qty` 的值在 record.item.qty。快路径自己解析,只认点号分段;
+    // 解构(`{value:a,label:b}`)/数组下标等复杂语法解析不了,回退全树交给 Formily。@author nokecy
+    var canFastPath = !dataFieldName || isSimpleFieldPath(dataFieldName);
 
     // ① 只读纯文本
-    if (readOnly && formatter) {
+    if (readOnly && formatter && canFastPath) {
       // 列级 readPretty 在「可编辑表」里是展示列(值可能被 setValuesIn 自动带出),静态 valueFormatter
       // 读 AG-Grid 缓存值不刷新 → 反应式只读渲染。整表 readPretty(明细/详情页,数据 setValues 整体加载、
       // 行引用整体替换、AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
@@ -364,7 +430,7 @@ var buildArrayTableColumns = function buildArrayTableColumns(dataSource, field,
     }
 
     // ② 可编辑懒挂载(排除单击直控的 Switch/Checkbox:须 eager 出真控件)
-    if (!readOnly && formatter && !hasReactions && !forceEager && !isInlineToggle) {
+    if (!readOnly && formatter && !hasReactions && !forceEager && !isInlineToggle && canFastPath) {
       return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
         valueGetter: valueGetter
       } : {}), {}, {