yidaconnector 2026.6.11

package/project/pages/src/demo-crm-batch-entry.oyd.jsx

@@ -0,0 +1,805 @@
+// ============================================================
+// CRM 批量数据录入页面
+// 支持：客户信息、商机管理、客户回访 三种表单的批量录入
+// ============================================================
+
+// ── 配置区 ─────────────────────────────────────────────────
+
+var APP_TYPE = 'APP_MRNQXYA404IHD2P6JHSD';
+var DRAFT_KEY_PREFIX = 'yida_crm_batch_entry_';
+
+var FORM_CONFIG = {
+  customer: {
+    formUuid: 'FORM-48FB56AFA31E43B09BDE30B7165D3E92D7WT',
+    name: '客户信息',
+    columns: [
+      { label: '客户名称', field: 'textField_l1h42qsqz', type: 'text', required: true },
+      { label: '客户类型', field: 'radioField_l1h43yhd1', type: 'select', options: ['企业客户', '个人客户'] },
+      { label: '客户级别', field: 'selectField_l1h54iojj', type: 'select', options: ['A级', 'B级', 'C级', 'D级'] },
+      { label: '联系人', field: 'textField_l1h55ogqo', type: 'text' },
+      { label: '联系电话', field: 'textField_l1h566r7t', type: 'text' },
+      { label: '联系邮箱', field: 'textField_l1h57ofjl', type: 'text' }
+    ]
+  },
+  opportunity: {
+    formUuid: 'FORM-ECCF67D4CC994968B2675C9CBD0F04A536P0',
+    name: '商机管理',
+    columns: [
+      { label: '商机名称', field: 'textField_ozj624rw0', type: 'text', required: true },
+      { label: '商机阶段', field: 'selectField_ozj64pdqc', type: 'select', options: ['初步接触', '需求确认', '方案报价', '谈判', '赢单', '输单'] },
+      { label: '预计金额(万)', field: 'numberField_ozj651thb', type: 'number' },
+      { label: '成交概率(%)', field: 'numberField_ozj66qh91', type: 'number' },
+      { label: '商机来源', field: 'radioField_ozj69jqrp', type: 'select', options: ['新开发', '老客户', '合作伙伴'] }
+    ]
+  },
+  visit: {
+    formUuid: 'FORM-21CC57767B184FB389DD0E9E765F028D77OA',
+    name: '客户回访',
+    columns: [
+      { label: '回访方式', field: 'radioField_pjlt40nnj', type: 'select', options: ['电话', '上门', '视频', '邮件'] },
+      { label: '满意度(1-5)', field: 'rateField_pjlt5hp2q', type: 'number' },
+      { label: '回访记录', field: 'textareaField_pjlt8k3dg', type: 'text' }
+    ]
+  }
+};
+
+var FORM_OPTIONS = [
+  { key: 'customer', label: '客户信息' },
+  { key: 'opportunity', label: '商机管理' },
+  { key: 'visit', label: '客户回访' }
+];
+
+// ── 状态 ───────────────────────────────────────────────────
+
+var _customState = {
+  selectedForm: 'customer',  // 当前选择的表单类型
+  rows: [],                  // 行数据列表
+  selectedRows: {},          // 选中的行 { rowId: true }
+  submitting: false,         // 是否正在提交
+  submitProgress: { current: 0, total: 0 },  // 提交进度
+  submitResult: null         // { success: number, failed: number }
+};
+
+// ── 工具函数 ───────────────────────────────────────────────
+
+function generateRowId() {
+  return 'row_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7);
+}
+
+function getCurrentFormConfig() {
+  return FORM_CONFIG[_customState.selectedForm];
+}
+
+function getDraftKey() {
+  return DRAFT_KEY_PREFIX + _customState.selectedForm;
+}
+
+function createEmptyRow() {
+  var row = { id: generateRowId(), _status: 'valid', _errors: {} };
+  var config = getCurrentFormConfig();
+  config.columns.forEach(function(col) { row[col.field] = ''; });
+  return row;
+}
+
+function validateRow(row) {
+  var errors = {};
+  var config = getCurrentFormConfig();
+  config.columns.forEach(function(col) {
+    if (col.required && !row[col.field]) {
+      errors[col.field] = col.label + '不能为空';
+    }
+    if (col.type === 'number' && row[col.field]) {
+      var num = Number(row[col.field]);
+      if (isNaN(num)) {
+        errors[col.field] = col.label + '必须是数字';
+      }
+    }
+  });
+  return errors;
+}
+
+function saveDraft(rows) {
+  try {
+    localStorage.setItem(getDraftKey(), JSON.stringify(rows));
+  } catch (e) { /* ignore */ }
+}
+
+function loadDraft() {
+  try {
+    var saved = localStorage.getItem(getDraftKey());
+    return saved ? JSON.parse(saved) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function clearDraft() {
+  try { localStorage.removeItem(getDraftKey()); } catch (e) { /* ignore */ }
+}
+
+// ── 状态管理 ───────────────────────────────────────────────
+
+export function getCustomState(key) {
+  if (key) return _customState[key];
+  return _.clone(_customState);
+}
+
+export function setCustomState(newState) {
+  Object.keys(newState).forEach(function(key) {
+    _customState[key] = newState[key];
+  });
+  this.forceUpdate();
+}
+
+export function forceUpdate() {
+  this.setState({ timestamp: new Date().getTime() });
+}
+
+// ── 生命周期 ───────────────────────────────────────────────
+
+export function didMount() {
+  // 绑定粘贴事件
+  var self = this;
+  self._pasteHandler = function(e) { self.handlePaste(e); };
+  document.addEventListener('paste', self._pasteHandler);
+
+  // 恢复草稿
+  var draft = loadDraft();
+  if (draft && draft.length > 0) {
+    _customState.rows = draft;
+  } else {
+    _customState.rows = [createEmptyRow(), createEmptyRow(), createEmptyRow()];
+  }
+  this.forceUpdate();
+}
+
+export function didUnmount() {
+  // 清理粘贴事件监听
+  if (this._pasteHandler) {
+    document.removeEventListener('paste', this._pasteHandler);
+  }
+}
+
+// ── 表单切换 ───────────────────────────────────────────────
+
+export function handleFormChange(e) {
+  var newFormKey = e.target.value;
+  // 保存当前表单的草稿
+  saveDraft(_customState.rows);
+  
+  // 切换表单
+  _customState.selectedForm = newFormKey;
+  _customState.selectedRows = {};
+  _customState.submitResult = null;
+  
+  // 加载新表单的草稿
+  var draft = loadDraft();
+  if (draft && draft.length > 0) {
+    _customState.rows = draft;
+  } else {
+    _customState.rows = [createEmptyRow(), createEmptyRow(), createEmptyRow()];
+  }
+  this.forceUpdate();
+}
+
+// ── 行操作 ─────────────────────────────────────────────────
+
+export function addRow() {
+  _customState.rows.push(createEmptyRow());
+  saveDraft(_customState.rows);
+  this.forceUpdate();
+}
+
+export function deleteRow(rowId) {
+  _customState.rows = _customState.rows.filter(function(row) {
+    return row.id !== rowId;
+  });
+  delete _customState.selectedRows[rowId];
+  if (_customState.rows.length === 0) {
+    _customState.rows.push(createEmptyRow());
+  }
+  saveDraft(_customState.rows);
+  this.forceUpdate();
+}
+
+export function deleteSelectedRows() {
+  var selectedIds = Object.keys(_customState.selectedRows);
+  if (selectedIds.length === 0) {
+    this.utils.toast({ title: '请先选择要删除的行', type: 'warning' });
+    return;
+  }
+  _customState.rows = _customState.rows.filter(function(row) {
+    return !_customState.selectedRows[row.id];
+  });
+  _customState.selectedRows = {};
+  if (_customState.rows.length === 0) {
+    _customState.rows.push(createEmptyRow());
+  }
+  saveDraft(_customState.rows);
+  this.forceUpdate();
+}
+
+export function clearAllRows() {
+  _customState.rows = [createEmptyRow(), createEmptyRow(), createEmptyRow()];
+  _customState.selectedRows = {};
+  _customState.submitResult = null;
+  clearDraft();
+  this.forceUpdate();
+  this.utils.toast({ title: '已清空所有数据', type: 'success' });
+}
+
+export function toggleRowSelection(rowId) {
+  if (_customState.selectedRows[rowId]) {
+    delete _customState.selectedRows[rowId];
+  } else {
+    _customState.selectedRows[rowId] = true;
+  }
+  this.forceUpdate();
+}
+
+export function toggleSelectAll() {
+  var allSelected = _customState.rows.length > 0 && 
+    _customState.rows.every(function(row) { return _customState.selectedRows[row.id]; });
+  
+  if (allSelected) {
+    _customState.selectedRows = {};
+  } else {
+    _customState.rows.forEach(function(row) {
+      _customState.selectedRows[row.id] = true;
+    });
+  }
+  this.forceUpdate();
+}
+
+export function updateCell(rowId, field, value) {
+  var row = _customState.rows.find(function(r) { return r.id === rowId; });
+  if (!row) return;
+  row[field] = value;
+  // 清除该字段的错误
+  if (row._errors[field]) {
+    delete row._errors[field];
+    row._status = Object.keys(row._errors).length === 0 ? 'valid' : 'invalid';
+  }
+  saveDraft(_customState.rows);
+  // 不触发重渲染，静默更新
+}
+
+// ── Excel 粘贴导入 ─────────────────────────────────────────
+
+export function handlePaste(event) {
+  var clipboardData = event.clipboardData || window.clipboardData;
+  if (!clipboardData) return;
+  var text = clipboardData.getData('text');
+  if (!text) return;
+
+  var config = getCurrentFormConfig();
+  var lines = text.trim().split('\n');
+  var newRows = lines.map(function(line) {
+    var cells = line.split('\t');
+    var row = createEmptyRow();
+    config.columns.forEach(function(col, index) {
+      if (cells[index] !== undefined) {
+        row[col.field] = cells[index].trim();
+      }
+    });
+    return row;
+  });
+
+  // 过滤掉全空行
+  newRows = newRows.filter(function(row) {
+    return config.columns.some(function(col) { return row[col.field]; });
+  });
+
+  if (newRows.length === 0) return;
+
+  // 追加到现有行（过滤掉现有的全空行）
+  var nonEmptyExisting = _customState.rows.filter(function(row) {
+    return config.columns.some(function(col) { return row[col.field]; });
+  });
+  _customState.rows = nonEmptyExisting.concat(newRows);
+  saveDraft(_customState.rows);
+  this.forceUpdate();
+  this.utils.toast({ title: '已导入 ' + newRows.length + ' 行数据', type: 'success' });
+}
+
+// ── 批量提交 ───────────────────────────────────────────────
+
+export function submitAll() {
+  var self = this;
+  var config = getCurrentFormConfig();
+
+  // 1. 验证所有行
+  var hasError = false;
+  _customState.rows.forEach(function(row) {
+    var errors = validateRow(row);
+    row._errors = errors;
+    if (Object.keys(errors).length > 0) {
+      row._status = 'invalid';
+      hasError = true;
+    }
+  });
+
+  if (hasError) {
+    self.forceUpdate();
+    self.utils.toast({ title: '请修正表格中的错误后再提交', type: 'error' });
+    return;
+  }
+
+  // 2. 过滤掉全空行
+  var rowsToSubmit = _customState.rows.filter(function(row) {
+    return config.columns.some(function(col) { return row[col.field]; });
+  });
+
+  if (rowsToSubmit.length === 0) {
+    self.utils.toast({ title: '请至少填写一行数据', type: 'error' });
+    return;
+  }
+
+  _customState.submitting = true;
+  _customState.submitProgress = { current: 0, total: rowsToSubmit.length };
+  _customState.submitResult = null;
+  self.forceUpdate();
+
+  // 3. 批量提交（并发）
+  var completedCount = 0;
+  var promises = rowsToSubmit.map(function(row) {
+    var formDataJson = {};
+    config.columns.forEach(function(col) {
+      var val = row[col.field];
+      // 数字类型转换
+      if (col.type === 'number' && val) {
+        formDataJson[col.field] = Number(val);
+      } else {
+        formDataJson[col.field] = val;
+      }
+    });
+
+    row._status = 'submitting';
+
+    return self.utils.yida.saveFormData({
+      formUuid: config.formUuid,
+      appType: APP_TYPE,
+      formDataJson: JSON.stringify(formDataJson)
+    }).then(function() {
+      row._status = 'submitted';
+      completedCount++;
+      _customState.submitProgress.current = completedCount;
+      self.forceUpdate();
+    }).catch(function(err) {
+      row._status = 'invalid';
+      row._errors._submit = err.message || '提交失败';
+      completedCount++;
+      _customState.submitProgress.current = completedCount;
+      self.forceUpdate();
+    });
+  });
+
+  Promise.all(promises).then(function() {
+    var successCount = rowsToSubmit.filter(function(r) { return r._status === 'submitted'; }).length;
+    var failedCount = rowsToSubmit.filter(function(r) { return r._status === 'invalid'; }).length;
+
+    _customState.submitting = false;
+    _customState.submitResult = { success: successCount, failed: failedCount };
+
+    if (failedCount === 0) {
+      clearDraft();
+      _customState.rows = [createEmptyRow(), createEmptyRow(), createEmptyRow()];
+      self.utils.toast({ title: '全部提交成功，共 ' + successCount + ' 条', type: 'success' });
+    } else {
+      self.utils.toast({
+        title: '提交完成：' + successCount + ' 条成功，' + failedCount + ' 条失败',
+        type: 'error'
+      });
+    }
+    self.forceUpdate();
+  }).catch(function(err) {
+    _customState.submitting = false;
+    self.forceUpdate();
+    self.utils.toast({ title: '提交异常：' + err.message, type: 'error' });
+  });
+}
+
+// ── 渲染辅助 ───────────────────────────────────────────────
+
+export function renderCellInput(row, col) {
+  var self = this;
+  var value = row[col.field];
+  var hasError = !!row._errors[col.field];
+  var isSubmitted = row._status === 'submitted';
+
+  var baseInputStyle = {
+    width: '100%',
+    height: '32px',
+    padding: '0 8px',
+    border: '1px solid ' + (hasError ? '#ff4d4f' : '#d9d9d9'),
+    borderRadius: '4px',
+    fontSize: '13px',
+    outline: 'none',
+    background: isSubmitted ? '#f6ffed' : '#fff',
+    boxSizing: 'border-box'
+  };
+
+  if (col.type === 'select') {
+    return (
+      <select
+        defaultValue={value}
+        disabled={isSubmitted}
+        onChange={(e) => { self.updateCell(row.id, col.field, e.target.value); }}
+        style={baseInputStyle}
+      >
+        <option value="">请选择</option>
+        {(col.options || []).map(function(opt) {
+          return <option key={opt} value={opt}>{opt}</option>;
+        })}
+      </select>
+    );
+  }
+
+  return (
+    <input
+      type={col.type === 'number' ? 'number' : 'text'}
+      defaultValue={value}
+      disabled={isSubmitted}
+      placeholder={col.required ? col.label + '（必填）' : col.label}
+      onChange={(e) => { self.updateCell(row.id, col.field, e.target.value); }}
+      style={baseInputStyle}
+    />
+  );
+}
+
+// ── 主渲染 ─────────────────────────────────────────────────
+
+export function renderJsx() {
+  var self = this;
+  var timestamp = this.state.timestamp;
+  var config = getCurrentFormConfig();
+  var columns = config.columns;
+
+  var allSelected = _customState.rows.length > 0 && 
+    _customState.rows.every(function(row) { return _customState.selectedRows[row.id]; });
+  var selectedCount = Object.keys(_customState.selectedRows).length;
+
+  // ── 样式定义 ─────────────────────────────────────────────
+  var styles = {
+    container: {
+      padding: '16px',
+      background: '#f5f7fa',
+      minHeight: '100vh',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    header: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '16px',
+      padding: '16px 20px',
+      background: '#fff',
+      borderRadius: '8px',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.08)'
+    },
+    title: {
+      fontSize: '18px',
+      fontWeight: 600,
+      color: '#1f2937'
+    },
+    formSelect: {
+      height: '36px',
+      padding: '0 12px',
+      fontSize: '14px',
+      border: '1px solid #d9d9d9',
+      borderRadius: '6px',
+      background: '#fff',
+      marginLeft: '12px',
+      cursor: 'pointer'
+    },
+    toolbar: {
+      display: 'flex',
+      gap: '8px',
+      marginBottom: '12px',
+      padding: '12px 16px',
+      background: '#fff',
+      borderRadius: '8px',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+      flexWrap: 'wrap',
+      alignItems: 'center'
+    },
+    btn: {
+      height: '32px',
+      padding: '0 14px',
+      fontSize: '13px',
+      border: '1px solid #d9d9d9',
+      borderRadius: '6px',
+      background: '#fff',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    },
+    btnPrimary: {
+      height: '32px',
+      padding: '0 16px',
+      fontSize: '13px',
+      border: 'none',
+      borderRadius: '6px',
+      background: '#1677ff',
+      color: '#fff',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    },
+    btnDanger: {
+      height: '32px',
+      padding: '0 14px',
+      fontSize: '13px',
+      border: '1px solid #ff4d4f',
+      borderRadius: '6px',
+      background: '#fff',
+      color: '#ff4d4f',
+      cursor: 'pointer'
+    },
+    tableContainer: {
+      background: '#fff',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.08)'
+    },
+    tableHeader: {
+      display: 'grid',
+      gridTemplateColumns: '40px ' + columns.map(function() { return '1fr'; }).join(' ') + ' 60px',
+      background: '#fafafa',
+      borderBottom: '1px solid #f0f0f0',
+      padding: '10px 12px'
+    },
+    headerCell: {
+      fontSize: '13px',
+      fontWeight: 600,
+      color: '#595959'
+    },
+    tableRow: {
+      display: 'grid',
+      gridTemplateColumns: '40px ' + columns.map(function() { return '1fr'; }).join(' ') + ' 60px',
+      padding: '8px 12px',
+      borderBottom: '1px solid #f0f0f0',
+      alignItems: 'start'
+    },
+    checkbox: {
+      width: '16px',
+      height: '16px',
+      cursor: 'pointer',
+      marginTop: '8px'
+    },
+    cellWrapper: {
+      paddingRight: '8px'
+    },
+    errorText: {
+      fontSize: '11px',
+      color: '#ff4d4f',
+      marginTop: '2px'
+    },
+    deleteBtn: {
+      border: 'none',
+      background: 'none',
+      color: '#ff4d4f',
+      cursor: 'pointer',
+      fontSize: '16px',
+      padding: '4px 8px'
+    },
+    progressBar: {
+      marginTop: '12px',
+      padding: '12px 16px',
+      background: '#fff',
+      borderRadius: '8px',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.08)'
+    },
+    progressTrack: {
+      height: '8px',
+      background: '#f0f0f0',
+      borderRadius: '4px',
+      overflow: 'hidden',
+      marginTop: '8px'
+    },
+    progressFill: {
+      height: '100%',
+      background: '#1677ff',
+      borderRadius: '4px',
+      transition: 'width 0.3s ease'
+    },
+    resultBox: {
+      marginTop: '12px',
+      padding: '12px 16px',
+      borderRadius: '8px',
+      fontSize: '14px'
+    },
+    tip: {
+      marginTop: '8px',
+      fontSize: '12px',
+      color: '#8c8c8c',
+      textAlign: 'right'
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      {/* 隐藏的 timestamp 用于触发重渲染 */}
+      <div style={{ display: 'none' }}>{timestamp}</div>
+
+      {/* 标题栏 */}
+      <div style={styles.header}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span style={styles.title}>批量数据录入</span>
+          <select
+            value={_customState.selectedForm}
+            onChange={(e) => { self.handleFormChange(e); }}
+            style={styles.formSelect}
+          >
+            {FORM_OPTIONS.map(function(opt) {
+              return <option key={opt.key} value={opt.key}>{opt.label}</option>;
+            })}
+          </select>
+        </div>
+        <div style={{ fontSize: '13px', color: '#8c8c8c' }}>
+          当前：{config.name}（{_customState.rows.length} 行）
+        </div>
+      </div>
+
+      {/* 工具栏 */}
+      <div style={styles.toolbar}>
+        <button
+          onClick={() => { self.addRow(); }}
+          style={styles.btn}
+        >
+          ➕ 添加行
+        </button>
+        <button
+          onClick={() => { self.deleteSelectedRows(); }}
+          style={Object.assign({}, styles.btn, selectedCount > 0 ? { borderColor: '#ff4d4f', color: '#ff4d4f' } : {})}
+        >
+          🗑 删除选中 {selectedCount > 0 ? '(' + selectedCount + ')' : ''}
+        </button>
+        <button
+          onClick={() => { self.clearAllRows(); }}
+          style={styles.btn}
+        >
+          🔄 清空
+        </button>
+        <div style={{ flex: 1 }} />
+        <span style={{ fontSize: '12px', color: '#8c8c8c', marginRight: '8px' }}>
+          💡 提示：可直接从 Excel 复制数据粘贴导入
+        </span>
+        <button
+          onClick={() => { self.submitAll(); }}
+          disabled={_customState.submitting}
+          style={Object.assign({}, styles.btnPrimary, _customState.submitting ? { background: '#bfbfbf', cursor: 'not-allowed' } : {})}
+        >
+          {_customState.submitting ? '⏳ 提交中...' : '✓ 批量提交'}
+        </button>
+      </div>
+
+      {/* 表格 */}
+      <div style={styles.tableContainer}>
+        {/* 表头 */}
+        <div style={styles.tableHeader}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <input
+              type="checkbox"
+              checked={allSelected}
+              onChange={() => { self.toggleSelectAll(); }}
+              style={styles.checkbox}
+            />
+          </div>
+          {columns.map(function(col) {
+            return (
+              <div key={col.field} style={styles.headerCell}>
+                {col.required && <span style={{ color: '#ff4d4f', marginRight: '2px' }}>*</span>}
+                {col.label}
+              </div>
+            );
+          })}
+          <div style={Object.assign({}, styles.headerCell, { textAlign: 'center' })}>操作</div>
+        </div>
+
+        {/* 数据行 */}
+        {_customState.rows.map(function(row) {
+          var rowBg = row._status === 'submitted' ? '#f6ffed'
+            : row._status === 'invalid' ? '#fff2f0'
+            : row._status === 'submitting' ? '#e6f7ff'
+            : '#fff';
+
+          return (
+            <div key={row.id} style={Object.assign({}, styles.tableRow, { background: rowBg })}>
+              {/* 选择框 */}
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <input
+                  type="checkbox"
+                  checked={!!_customState.selectedRows[row.id]}
+                  disabled={row._status === 'submitted'}
+                  onChange={() => { self.toggleRowSelection(row.id); }}
+                  style={styles.checkbox}
+                />
+              </div>
+
+              {/* 数据列 */}
+              {columns.map(function(col) {
+                return (
+                  <div key={col.field} style={styles.cellWrapper}>
+                    {self.renderCellInput(row, col)}
+                    {row._errors[col.field] && (
+                      <div style={styles.errorText}>{row._errors[col.field]}</div>
+                    )}
+                    {row._errors._submit && col === columns[0] && (
+                      <div style={styles.errorText}>{row._errors._submit}</div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {/* 操作列 */}
+              <div style={{ textAlign: 'center' }}>
+                {row._status === 'submitted' && (
+                  <span style={{ color: '#52c41a', fontSize: '16px' }}>✓</span>
+                )}
+                {row._status === 'submitting' && (
+                  <span style={{ color: '#1677ff', fontSize: '12px' }}>提交中</span>
+                )}
+                {row._status !== 'submitted' && row._status !== 'submitting' && (
+                  <button
+                    onClick={() => { self.deleteRow(row.id); }}
+                    style={styles.deleteBtn}
+                    title="删除此行"
+                  >
+                    🗑
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 提交进度条 */}
+      {_customState.submitting && (
+        <div style={styles.progressBar}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <span style={{ fontSize: '14px', fontWeight: 500 }}>提交进度</span>
+            <span style={{ fontSize: '13px', color: '#1677ff' }}>
+              {_customState.submitProgress.current} / {_customState.submitProgress.total}
+            </span>
+          </div>
+          <div style={styles.progressTrack}>
+            <div
+              style={Object.assign({}, styles.progressFill, {
+                width: (_customState.submitProgress.total > 0
+                  ? Math.round(_customState.submitProgress.current / _customState.submitProgress.total * 100)
+                  : 0) + '%'
+              })}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* 提交结果 */}
+      {_customState.submitResult && (
+        <div style={Object.assign({}, styles.resultBox, {
+          background: _customState.submitResult.failed === 0 ? '#f6ffed' : '#fff2f0',
+          border: '1px solid ' + (_customState.submitResult.failed === 0 ? '#b7eb8f' : '#ffccc7')
+        })}>
+          提交完成：
+          <span style={{ color: '#52c41a', fontWeight: 600 }}>
+            {_customState.submitResult.success} 条成功
+          </span>
+          {_customState.submitResult.failed > 0 && (
+            <span style={{ color: '#ff4d4f', fontWeight: 600, marginLeft: '8px' }}>
+              {_customState.submitResult.failed} 条失败（请修正红色行后重新提交）
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* 草稿提示 */}
+      <div style={styles.tip}>
+        数据已自动保存为草稿，刷新页面后可继续编辑
+      </div>
+    </div>
+  );
+}