neo-cmp-cli 1.13.8 → 1.13.10

package/template/neo-web-form/src/components/batchAddTable__c/index.tsx

@@ -0,0 +1,1052 @@
+/**
+ * @file 批量新增表格组件
+ * @description 基于 XObject 实体数据源的可编辑表格，支持 Excel 导入与提交事件
+ */
+import * as React from 'react';
+import {
+  Table,
+  Button,
+  Space,
+  Spin,
+  Empty,
+  message,
+  Input,
+  Select,
+  DatePicker,
+  InputNumber,
+  Upload,
+  Modal,
+  Popconfirm,
+} from 'antd';
+import {
+  PlusOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+  SaveOutlined,
+  CloseOutlined,
+  ReloadOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import * as XLSX from 'xlsx';
+import moment from 'moment';
+// @ts-ignore
+import { xObject } from 'neo-open-api';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+import './tableModal.scss';
+
+const { Option } = Select;
+
+interface FieldInfo {
+  name: string;
+  label: string;
+  apiKey: string;
+  type: string;
+  itemType?: string;
+  checkitem?: any[];
+  selectitem?: any[];
+  required?: boolean;
+  referTo?: { apiKey: string; [key: string]: any };
+}
+
+interface BatchAddTableProps {
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields?: string[];
+    fieldDescList?: any[];
+  };
+  data?: any;
+  tableTitle?: string;
+  /** 入口按钮文案，点击后打开批量导入弹窗 */
+  batchImportButtonTitle?: string;
+  /** 批量导入入口按钮水平对齐：left 靠左、center 居中、right 靠右，默认 right */
+  batchImportButtonAlign?: 'left' | 'center' | 'right';
+  className?: string;
+}
+
+interface RowRecord {
+  _rowKey: string;
+  [key: string]: any;
+}
+
+interface BatchAddTableState {
+  title?: string;
+  fieldList: FieldInfo[];
+  loading: boolean;
+  error: string | null;
+  rows: RowRecord[];
+  entityTypeList: any[];
+  submitting: boolean;
+  modalVisible: boolean;
+}
+
+let rowKeySeed = 0;
+function nextRowKey() {
+  rowKeySeed += 1;
+  return `batch_row_${Date.now()}_${rowKeySeed}`;
+}
+
+function isEntityTypeField(field: FieldInfo) {
+  return field.type === 'entityType' || field.type === 'entitytype';
+}
+
+/** 关联类字段：统一用数字 ID 输入（不使用弹窗选择） */
+function isRelationIdField(field: FieldInfo) {
+  if (isEntityTypeField(field)) return false;
+  const t = (field.type || '').toLowerCase();
+  if (t === 'lookup' || t === 'reference') return true;
+  return !!field.referTo;
+}
+
+function emptyRowForFields(fields: FieldInfo[]): RowRecord {
+  const row: RowRecord = { _rowKey: nextRowKey() };
+  fields.forEach((f) => {
+    if (f.apiKey === 'id') return;
+    if (f.type === 'multipicklist') {
+      row[f.apiKey] = [];
+    } else {
+      row[f.apiKey] = undefined;
+    }
+  });
+  return row;
+}
+
+/** Excel 序列日期（整数）转 moment，兼容未开启 cellDates 的导出文件 */
+function momentFromExcelSerial(raw: number): moment.Moment | null {
+  if (!Number.isFinite(raw)) return null;
+  const whole = Math.floor(raw);
+  if (whole < 20000 || whole > 120000) return null;
+  const utcMs = (whole - 25569) * 86400 * 1000;
+  const m = moment.utc(utcMs);
+  if (!m.isValid()) return null;
+  const frac = raw - whole;
+  if (frac > 0.000001) {
+    m.add(Math.round(frac * 86400 * 1000), 'ms');
+  }
+  return m.local();
+}
+
+export default class BatchAddTable extends React.PureComponent<
+  BatchAddTableProps,
+  BatchAddTableState
+> {
+  constructor(props: BatchAddTableProps) {
+    super(props);
+    this.state = {
+      fieldList: [],
+      loading: false,
+      error: null,
+      rows: [],
+      entityTypeList: [],
+      submitting: false,
+      modalVisible: false,
+    };
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.getEntityTypeList = this.getEntityTypeList.bind(this);
+    this.addRow = this.addRow.bind(this);
+    this.handleCellChange = this.handleCellChange.bind(this);
+    this.handleDownloadTemplate = this.handleDownloadTemplate.bind(this);
+    this.handleImportBeforeUpload = this.handleImportBeforeUpload.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleCopyRow = this.handleCopyRow.bind(this);
+    this.handleDeleteRow = this.handleDeleteRow.bind(this);
+    this.confirmReset = this.confirmReset.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
+
+  componentDidMount() {
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    if (xObjectApiKey) {
+      this.getEntityTypeList(xObjectApiKey);
+      this.loadFieldList();
+    }
+  }
+
+  async componentDidUpdate(prevProps: BatchAddTableProps) {
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey: prevKey, fields: prevFields } =
+      prevProps.xObjectDataApi || {};
+    if (xObjectApiKey !== prevKey || !isEqual(fields, prevFields)) {
+      if (xObjectApiKey) {
+        await this.loadFieldList();
+        await this.getEntityTypeList(xObjectApiKey);
+      } else {
+        this.setState({ fieldList: [], rows: [], error: null });
+      }
+    }
+  }
+
+  getVisibleFields(): FieldInfo[] {
+    const { xObjectDataApi } = this.props;
+    const { fields } = xObjectDataApi || {};
+    let list = this.state.fieldList;
+    if (xObjectDataApi?.fieldDescList?.length) {
+      list = xObjectDataApi.fieldDescList;
+    }
+    if (fields && fields.length > 0) {
+      list = list.filter((f) => fields.includes(f.apiKey));
+    }
+    return list.filter((f) => f.apiKey !== 'id');
+  }
+
+  async getEntityTypeList(xObjectApiKey?: string) {
+    const key = xObjectApiKey || this.props.xObjectDataApi?.xObjectApiKey;
+    if (!key) return;
+    try {
+      const result = await xObject.getEntityTypeList(key);
+      if (result && result.status) {
+        this.setState({ entityTypeList: result.data || [] });
+      }
+    } catch (e) {
+      console.error('获取业务类型列表失败:', e);
+    }
+  }
+
+  async loadFieldList() {
+    const { xObjectDataApi } = this.props || {};
+    if (!xObjectDataApi?.xObjectApiKey) {
+      this.setState({ loading: false });
+      return;
+    }
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      if (xObjectDataApi.fieldDescList?.length) {
+        const visible = this.getVisibleFieldsFromRaw(
+          xObjectDataApi.fieldDescList,
+          xObjectDataApi,
+        );
+        this.setState({
+          fieldList: xObjectDataApi.fieldDescList,
+          loading: false,
+          rows: visible.length ? [emptyRowForFields(visible)] : [],
+        });
+        return;
+      }
+
+      const resultData = await xObject.getDesc(xObjectDataApi.xObjectApiKey);
+      if (resultData && resultData.status) {
+        const result = resultData.data || {};
+        const fieldList = result.fields || [];
+        const visible = this.getVisibleFieldsFromRaw(fieldList, xObjectDataApi);
+        this.setState({
+          fieldList,
+          title: result.label,
+          loading: false,
+          rows: visible.length ? [emptyRowForFields(visible)] : [],
+        });
+      } else {
+        this.setState({
+          error: '获取字段列表失败',
+          loading: false,
+          rows: [],
+        });
+      }
+    } catch (error) {
+      console.error('获取字段列表失败:', error);
+      message.error('获取字段列表失败');
+      this.setState({
+        error: '获取字段列表失败',
+        loading: false,
+        rows: [],
+      });
+    }
+  }
+
+  getVisibleFieldsFromRaw(
+    fieldList: FieldInfo[],
+    xObjectDataApi: BatchAddTableProps['xObjectDataApi'],
+  ): FieldInfo[] {
+    const { fields } = xObjectDataApi || {};
+    let list = fieldList;
+    if (fields && fields.length > 0) {
+      list = list.filter((f) => fields.includes(f.apiKey));
+    }
+    return list.filter((f) => f.apiKey !== 'id');
+  }
+
+  addRow() {
+    const visible = this.getVisibleFields();
+    if (!visible.length) {
+      message.warning('暂无可用字段');
+      return;
+    }
+    this.setState((prev) => ({
+      rows: [...prev.rows, emptyRowForFields(visible)],
+    }));
+  }
+
+  handleCellChange(rowKey: string, apiKey: string, value: any) {
+    this.setState((prev) => ({
+      rows: prev.rows.map((row) =>
+        row._rowKey === rowKey ? { ...row, [apiKey]: value } : row,
+      ),
+    }));
+  }
+
+  resolvePicklistValue(field: FieldInfo, raw: any): any {
+    if (raw === undefined || raw === null || raw === '') return undefined;
+    const s = String(raw).trim();
+    const items = field.selectitem || [];
+    const byId = items.find(
+      (it) => it.id === raw || String(it.id) === s || it.apiKey === s,
+    );
+    if (byId) return byId.id;
+    const byLabel = items.find(
+      (it) =>
+        String(it.label).trim() === s ||
+        String(it.label).toLowerCase() === s.toLowerCase(),
+    );
+    return byLabel ? byLabel.id : raw;
+  }
+
+  resolveEntityTypeValue(raw: any, entityTypeList: any[]): any {
+    if (raw === undefined || raw === null || raw === '') return undefined;
+    const s = String(raw).trim();
+    const byId = entityTypeList.find(
+      (it) => it.id === raw || String(it.id) === s,
+    );
+    if (byId) return byId.id;
+    const byLabel = entityTypeList.find(
+      (it) => String(it.label).trim() === s,
+    );
+    return byLabel ? byLabel.id : raw;
+  }
+
+  parseImportedCell(
+    field: FieldInfo,
+    raw: any,
+    entityTypeList: any[],
+  ): any {
+    if (raw === undefined || raw === null || raw === '') return undefined;
+    if (raw instanceof Date) {
+      if (
+        field.type === 'date' ||
+        field.type === 'datetime' ||
+        field.type === 'time'
+      ) {
+        return moment(raw);
+      }
+    }
+    if (isRelationIdField(field)) {
+      if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
+      const n = Number(String(raw).trim());
+      return Number.isNaN(n) ? undefined : n;
+    }
+    if (isEntityTypeField(field)) {
+      return this.resolveEntityTypeValue(raw, entityTypeList);
+    }
+    if (field.type === 'picklist') {
+      return this.resolvePicklistValue(field, raw);
+    }
+    if (field.type === 'multipicklist') {
+      const parts = String(raw)
+        .split(/[,，;；]/)
+        .map((p) => p.trim())
+        .filter(Boolean);
+      const items = field.checkitem || [];
+      return parts.map((p) => {
+        const byId = items.find(
+          (it) => it.id === p || String(it.id) === p || it.apiKey === p,
+        );
+        if (byId) return byId.id;
+        const byLabel = items.find((it) => String(it.label).trim() === p);
+        return byLabel ? byLabel.id : p;
+      });
+    }
+    if (field.type === 'int' || field.type === 'float') {
+      const n = Number(raw);
+      return Number.isNaN(n) ? undefined : n;
+    }
+    if (
+      field.type === 'date' ||
+      field.type === 'datetime' ||
+      field.type === 'time'
+    ) {
+      if (typeof raw === 'number') {
+        const fromSerial = momentFromExcelSerial(raw);
+        if (fromSerial) return fromSerial;
+      }
+      const m = moment(raw);
+      return m.isValid() ? m : undefined;
+    }
+    return raw;
+  }
+
+  buildHeaderIndexMap(
+    headerRow: any[],
+    fields: FieldInfo[],
+  ): Record<string, number> {
+    const map: Record<string, number> = {};
+    const headers = headerRow.map((c) =>
+      c === undefined || c === null ? '' : String(c).trim(),
+    );
+    fields.forEach((f) => {
+      const labelIdx = headers.findIndex((h) => h === f.label);
+      if (labelIdx >= 0) {
+        map[f.apiKey] = labelIdx;
+        return;
+      }
+      const keyIdx = headers.findIndex((h) => h === f.apiKey);
+      if (keyIdx >= 0) {
+        map[f.apiKey] = keyIdx;
+      }
+    });
+    return map;
+  }
+
+  handleDownloadTemplate() {
+    const fields = this.getVisibleFields();
+    if (!fields.length) {
+      message.warning('请先配置实体数据源字段');
+      return;
+    }
+    const headers = fields.map((f) => f.label);
+    const ws = XLSX.utils.aoa_to_sheet([headers]);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, '导入模板');
+    const name = `${this.props.xObjectDataApi?.xObjectApiKey || 'data'}_导入模板.xlsx`;
+    XLSX.writeFile(wb, name);
+    message.success('模板已下载');
+  }
+
+  handleImportBeforeUpload(file: File) {
+    const fields = this.getVisibleFields();
+    if (!fields.length) {
+      message.warning('暂无可用字段');
+      return false;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = new Uint8Array(e.target?.result as ArrayBuffer);
+        const wb = XLSX.read(data, { type: 'array', cellDates: true });
+        const sheetName = wb.SheetNames[0];
+        if (!sheetName) {
+          message.error('Excel 中未找到工作表');
+          return;
+        }
+        const sheet = wb.Sheets[sheetName];
+        const rowsAoA: any[][] = XLSX.utils.sheet_to_json(sheet, {
+          header: 1,
+          raw: true,
+          defval: '',
+        }) as any[][];
+        if (!rowsAoA.length) {
+          message.error('Excel 内容为空');
+          return;
+        }
+        const headerRow = rowsAoA[0] || [];
+        const colMap = this.buildHeaderIndexMap(headerRow, fields);
+        const missing = fields.filter((f) => colMap[f.apiKey] === undefined);
+        if (missing.length) {
+          message.error(
+            `表头无法匹配字段：${missing.map((m) => m.label).join('、')}`,
+          );
+          return;
+        }
+        const { entityTypeList } = this.state;
+        const newRows: RowRecord[] = [];
+        for (let r = 1; r < rowsAoA.length; r++) {
+          const line = rowsAoA[r];
+          if (!line || !line.some((c) => c !== '' && c != null)) continue;
+          const row: RowRecord = { _rowKey: nextRowKey() };
+          fields.forEach((f) => {
+            const idx = colMap[f.apiKey];
+            const raw = idx !== undefined ? line[idx] : undefined;
+            row[f.apiKey] = this.parseImportedCell(f, raw, entityTypeList);
+          });
+          newRows.push(row);
+        }
+        if (!newRows.length) {
+          message.warning('未解析到有效数据行');
+          return;
+        }
+        this.setState((prev) => ({
+          rows: [...prev.rows, ...newRows],
+        }));
+        message.success(`已导入 ${newRows.length} 行`);
+      } catch (err) {
+        console.error(err);
+        message.error('解析 Excel 失败');
+      }
+    };
+    reader.readAsArrayBuffer(file);
+    return false;
+  }
+
+  rowHasAnyValue(row: RowRecord, fields: FieldInfo[]): boolean {
+    return fields.some((f) => {
+      const v = row[f.apiKey];
+      if (v === undefined || v === null || v === '') return false;
+      if (Array.isArray(v) && v.length === 0) return false;
+      return true;
+    });
+  }
+
+  buildRowPayload(row: RowRecord, fields: FieldInfo[]): Record<string, any> {
+    const out: Record<string, any> = {};
+    fields.forEach((f) => {
+      let v = row[f.apiKey];
+      if (
+        v &&
+        (f.type === 'date' || f.type === 'datetime' || f.type === 'time') &&
+        moment.isMoment(v)
+      ) {
+        v = v.valueOf();
+      }
+      if (v !== undefined) {
+        out[f.apiKey] = v;
+      }
+    });
+    return out;
+  }
+
+  @NeoEvent.dispatch
+  onSubmit(eventData?: any) {
+    console.log('batchAddTable__c onSubmit:', eventData);
+    this.closeModal();
+  }
+
+  onCancel(eventData?: any) {
+    console.log('batchAddTable__c onCancel:', eventData);
+  }
+
+  /** 深拷贝单元格值（moment / 数组等可编辑类型） */
+  cloneRowCellValue(value: any): any {
+    if (value === undefined || value === null) {
+      return value;
+    }
+    if (moment.isMoment(value)) {
+      return value.clone();
+    }
+    if (Array.isArray(value)) {
+      return value.slice();
+    }
+    if (typeof value === 'object') {
+      try {
+        return JSON.parse(JSON.stringify(value));
+      } catch {
+        return value;
+      }
+    }
+    return value;
+  }
+
+  cloneRowRecord(record: RowRecord, fields: FieldInfo[]): RowRecord {
+    const row: RowRecord = { _rowKey: nextRowKey() };
+    fields.forEach((f) => {
+      row[f.apiKey] = this.cloneRowCellValue(record[f.apiKey]);
+    });
+    return row;
+  }
+
+  handleCopyRow(record: RowRecord) {
+    const fields = this.getVisibleFields();
+    const idx = this.state.rows.findIndex((r) => r._rowKey === record._rowKey);
+    if (idx < 0) return;
+    const cloned = this.cloneRowRecord(record, fields);
+    const newRows = [...this.state.rows];
+    newRows.splice(idx + 1, 0, cloned);
+    this.setState({ rows: newRows });
+    message.success('已在本行下方复制一行');
+  }
+
+  handleDeleteRow(record: RowRecord) {
+    const fields = this.getVisibleFields();
+    const newRows = this.state.rows.filter((r) => r._rowKey !== record._rowKey);
+    if (newRows.length === 0 && fields.length) {
+      newRows.push(emptyRowForFields(fields));
+    }
+    this.setState({ rows: newRows });
+    message.success('已删除该行');
+  }
+
+  openModal() {
+    this.setState({ modalVisible: true });
+  }
+
+  closeModal() {
+    this.setState({ modalVisible: false });
+  }
+
+  handleCancel() {
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    this.onCancel({
+      xObjectApiKey,
+      rowCount: this.state.rows.length,
+    });
+    this.closeModal();
+  }
+
+  confirmReset() {
+    const fields = this.getVisibleFields();
+    if (!fields.length) {
+      message.warning('暂无可用字段');
+      return;
+    }
+    this.setState({
+      rows: [emptyRowForFields(fields)],
+    });
+    message.success('已重置');
+  }
+
+  handleSubmit() {
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    const fields = this.getVisibleFields();
+    if (!xObjectApiKey) {
+      message.error('请先选择实体数据源');
+      return;
+    }
+    if (!fields.length) {
+      message.warning('暂无可用字段');
+      return;
+    }
+
+    const { rows } = this.state;
+    const dataRows = rows.filter((r) => this.rowHasAnyValue(r, fields));
+
+    if (!dataRows.length) {
+      message.warning('请至少填写一行数据');
+      return;
+    }
+
+    for (let i = 0; i < dataRows.length; i++) {
+      const row = dataRows[i];
+      for (const f of fields) {
+        if (!f.required) continue;
+        const v = row[f.apiKey];
+        const empty =
+          v === undefined ||
+          v === null ||
+          v === '' ||
+          (Array.isArray(v) && v.length === 0);
+        if (empty) {
+          message.error(`第 ${i + 1} 行「${f.label}」为必填项`);
+          return;
+        }
+      }
+    }
+
+    this.setState({ submitting: true });
+    const payload = dataRows.map((r) => this.buildRowPayload(r, fields));
+
+    try {
+      this.onSubmit({
+        xObjectApiKey,
+        rows: payload,
+      });
+      // message.success('已触发提交事件');
+    } finally {
+      this.setState({ submitting: false });
+    }
+  }
+
+  renderCellEditor(field: FieldInfo, record: RowRecord) {
+    const value = record[field.apiKey];
+    const onChange = (v: any) =>
+      this.handleCellChange(record._rowKey, field.apiKey, v);
+    const selectitem = field.selectitem || [];
+    const checkitem = field.checkitem || [];
+    const { entityTypeList } = this.state;
+
+    if (isRelationIdField(field)) {
+      return (
+        <InputNumber
+          className="batch-add-cell-editor"
+          placeholder="请输入关联记录 ID（数字）"
+          value={value}
+          onChange={onChange}
+        />
+      );
+    }
+
+    switch (field.type) {
+      case 'entityType':
+      case 'entitytype':
+        return (
+          <Select
+            className="batch-add-cell-editor"
+            placeholder="业务类型"
+            allowClear
+            value={value}
+            onChange={onChange}
+            style={{ minWidth: 140 }}
+          >
+            {entityTypeList.map((item) => (
+              <Option
+                key={item.apiKey}
+                value={item.id}
+                disabled={!item.active}
+              >
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'picklist':
+        return (
+          <Select
+            className="batch-add-cell-editor"
+            placeholder={`请选择`}
+            allowClear
+            value={value}
+            onChange={onChange}
+            style={{ minWidth: 140 }}
+          >
+            {selectitem.map((item) => (
+              <Option key={item.apiKey} value={item.id}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'multipicklist':
+        return (
+          <Select
+            className="batch-add-cell-editor"
+            placeholder={`请选择`}
+            mode="multiple"
+            allowClear
+            value={value}
+            onChange={onChange}
+            style={{ minWidth: 160 }}
+          >
+            {checkitem.map((item) => (
+              <Option key={item.apiKey} value={item.id}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'textarea':
+        return (
+          <Input.TextArea
+            className="batch-add-cell-editor"
+            placeholder={`请输入`}
+            rows={2}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        );
+      case 'datetime':
+        return (
+          <DatePicker
+            className="batch-add-cell-editor"
+            showTime
+            format="YYYY/MM/DD HH:mm:ss"
+            value={value || null}
+            onChange={onChange}
+          />
+        );
+      case 'date':
+        return (
+          <DatePicker
+            className="batch-add-cell-editor"
+            format="YYYY/MM/DD"
+            value={value || null}
+            onChange={onChange}
+          />
+        );
+      case 'time':
+        return (
+          <DatePicker
+            className="batch-add-cell-editor"
+            format="HH:mm:ss"
+            showTime
+            value={value || null}
+            onChange={onChange}
+          />
+        );
+      case 'int':
+      case 'float':
+        return (
+          <InputNumber
+            className="batch-add-cell-editor"
+            placeholder={`请输入数字`}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      case 'email':
+        return (
+          <Input
+            className="batch-add-cell-editor"
+            type="email"
+            placeholder={`请输入邮箱`}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        );
+      case 'url':
+        return (
+          <Input
+            className="batch-add-cell-editor"
+            type="url"
+            placeholder={`请输入 URL`}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        );
+      case 'phone':
+        return (
+          <Input
+            className="batch-add-cell-editor"
+            type="tel"
+            placeholder={`请输入电话`}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        );
+      default:
+        return (
+          <Input
+            className="batch-add-cell-editor"
+            placeholder={`请输入`}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        );
+    }
+  }
+
+  render() {
+    const { loading, error, rows, submitting, title } = this.state;
+    const { tableTitle, className, data } = this.props;
+    const curAmisData = data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    const fields = this.getVisibleFields();
+
+    const columns: any[] = fields.map((field) => ({
+      title: field.label,
+      dataIndex: field.apiKey,
+      key: field.apiKey,
+      width: field.type === 'textarea' ? 220 : 160,
+      render: (_: any, record: RowRecord) =>
+        this.renderCellEditor(field, record),
+    }));
+
+    columns.unshift({
+      title: '序号',
+      dataIndex: '_index',
+      key: '_index',
+      width: 56,
+      fixed: 'left' as const,
+      render: (_: any, __: RowRecord, index: number) => index + 1,
+    });
+
+    columns.push({
+      title: '操作',
+      key: '_action',
+      dataIndex: '_action',
+      width: 148,
+      fixed: 'right' as const,
+      align: 'center' as const,
+      render: (_: any, record: RowRecord) => (
+        <Space size={4}>
+          <Button
+            type="link"
+            size="small"
+            icon={<CopyOutlined />}
+            className="batch-add-copy-btn"
+            onClick={() => this.handleCopyRow(record)}
+          >
+            复制
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            danger
+            icon={<DeleteOutlined />}
+            className="batch-add-delete-btn"
+            onClick={() => this.handleDeleteRow(record)}
+          >
+            删除
+          </Button>
+        </Space>
+      ),
+    });
+
+    const displayTitle =
+      tableTitle || title || '批量新增数据';
+    const batchImportButtonTitle =
+      this.props.batchImportButtonTitle ?? '批量导入';
+    const batchImportButtonAlign =
+      this.props.batchImportButtonAlign ?? 'right';
+
+    const showModalFooter = !error && !!xObjectApiKey && fields.length > 0;
+
+    const modalFooter = showModalFooter ? (
+      <div className="batch-add-modal-footer-inner">
+        <Space size="middle" wrap>
+          <Button
+            size="large"
+            icon={<CloseOutlined />}
+            onClick={this.handleCancel}
+            disabled={submitting}
+          >
+            取消
+          </Button>
+          <Popconfirm
+            title={
+              <span>
+                <div>确认重置</div>
+                <div
+                  style={{
+                    marginTop: 8,
+                    fontWeight: 400,
+                    color: 'rgba(0,0,0,0.65)',
+                    maxWidth: 280,
+                  }}
+                >
+                  重置后将清空当前表格中所有已填数据，并恢复为一行空白行。是否继续？
+                </div>
+              </span>
+            }
+            onConfirm={this.confirmReset}
+            okText="确定重置"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <span>
+              <Button
+                size="large"
+                icon={<ReloadOutlined />}
+                disabled={submitting}
+              >
+                重置
+              </Button>
+            </span>
+          </Popconfirm>
+          <Button
+            type="primary"
+            size="large"
+            className="batch-add-submit-btn"
+            icon={<SaveOutlined />}
+            loading={submitting}
+            onClick={this.handleSubmit}
+          >
+            提交
+          </Button>
+        </Space>
+      </div>
+    ) : null;
+
+    const modalBody = (
+      <div className="batch-add-modal-layout">
+        <div className="batch-add-modal-toolbar-wrap">
+          <Space wrap>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={this.addRow}
+              disabled={!xObjectApiKey || !fields.length}
+            >
+              添加一行
+            </Button>
+            <Button
+              icon={<DownloadOutlined />}
+              onClick={this.handleDownloadTemplate}
+              disabled={!fields.length}
+            >
+              下载 Excel 模板
+            </Button>
+            <Upload
+              accept=".xlsx,.xls"
+              showUploadList={false}
+              beforeUpload={this.handleImportBeforeUpload}
+            >
+              <Button
+                icon={<UploadOutlined />}
+                disabled={!xObjectApiKey || !fields.length}
+              >
+                Excel 导入
+              </Button>
+            </Upload>
+          </Space>
+        </div>
+
+        <div className="batch-add-modal-table-scroll">
+          <Spin spinning={loading} tip="加载字段信息...">
+            {error ? (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={
+                  <div>
+                    <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                      {error}
+                    </div>
+                    <Button type="primary" onClick={this.loadFieldList}>
+                      重新加载
+                    </Button>
+                  </div>
+                }
+              />
+            ) : !xObjectApiKey ? (
+              <Empty
+                description="请先选择实体数据源"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+              />
+            ) : !fields.length ? (
+              <Empty
+                description="暂无可用字段，请在数据源中勾选字段"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+              />
+            ) : (
+              <div className="table-wrap">
+                <Table
+                  rowKey="_rowKey"
+                  columns={columns as any}
+                  dataSource={rows}
+                  pagination={false}
+                  scroll={{ x: 'max-content' }}
+                  bordered
+                  size="small"
+                />
+              </div>
+            )}
+          </Spin>
+        </div>
+      </div>
+    );
+
+    return (
+      <div className={`batchAddTable__c ${className || ''}`}>
+        <div
+          className={`batch-add-entry-toolbar batch-add-entry-toolbar--${batchImportButtonAlign}`}
+        >
+          <Button type="primary" onClick={this.openModal}>
+            {batchImportButtonTitle}
+          </Button>
+        </div>
+        <Modal
+          title={
+            <>
+              {displayTitle}
+              {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+            </>
+          }
+          visible={this.state.modalVisible}
+          onCancel={this.closeModal}
+          footer={modalFooter}
+          width="95%"
+          style={{ maxWidth: 1200 }}
+          className="batch-add-table-modal"
+          destroyOnClose={false}
+          maskClosable={false}
+        >
+          {modalBody}
+        </Modal>
+      </div>
+    );
+  }
+}