【轻量级 PR】：update 27. 项目打包构建/代码/src/components/Editable/index.js. · Pull Request !2 · DEV-Edu/frontend-project-oa

// 导入 React 和相关 hooks，以及 Ant Design 组件
import React, { useState, useRef, useContext, useEffect } from 'react';
import { Form, Input, Select, DatePicker } from 'antd';
const { Option } = Select;  // 解构 Select 的子组件 Option
import { mapData } from 'utils/mapData';  // 导入预设的映射数据（如选项列表）
import moment from 'moment';  // 时间处理库

// 创建一个 React 上下文，用于在行和单元格之间传递表单实例
const EditableContext = React.createContext(null);

//- 可编辑表格行组件（包裹每一行）
export const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();  // 创建表单实例
  return (
    // 包裹整个行的表单（不渲染实际 <form> 标签）
    <Form form={form} component={false}>
      {/* 通过上下文将表单实例传递给子组件 */}
      <EditableContext.Provider value={form}>
        {/* 渲染表格行 */}
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

//- 可编辑单元格组件（包裹每个单元格）
export const EditableCell = ({
  title,          // 列标题（未直接使用）
  editable,       // 是否可编辑
  children,       // 默认内容（非编辑状态显示）
  dataIndex,      // 数据字段名（如 "name"）
  record,         // 当前行数据对象
  handleSave,     // 保存回调函数
  rules,          // 表单验证规则
  type,           // 输入类型（inputNode/selectNode/dateNode）
  ...restProps    // 其他透传给 <td> 的属性
}) => {
  const [editing, setEditing] = useState(false);  // 控制编辑状态
  const inputRef = useRef(null);  // 引用输入控件（用于聚焦）
  const form = useContext(EditableContext);  // 从行组件获取表单实例

// 当进入编辑状态时自动聚焦输入控件
  useEffect(() => {
    if (editing) {
      inputRef.current && inputRef.current.focus();
    }
  }, [editing]);

//- 切换编辑状态并初始化表单值
  const toggleEdit = () => {
    setEditing(!editing);
    // 设置表单初始值（处理时间字段为 moment 对象）
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
      onboardingTime: moment(record.onboardingTime),  // 转换时间字段
      date: moment(record.date),
      createTime: moment(record.createTime),
    });
  };

//- 保存前的验证和提交逻辑
  const _sendBeforeCheck = async () => {
    try {
      // 验证当前字段
      const editData = await form.validateFields([dataIndex]);
      setEditing(!editing);  // 退出编辑状态
      // 值未变化时不触发保存
      if (record[dataIndex] === editData[dataIndex]) return;
      // 调用外部保存逻辑
      handleSave({
        _id: record._id,          // 行唯一标识
        updateVal: editData[dataIndex],  // 新值
        type: dataIndex            // 字段名
      });
    } catch (error) {
      setEditing(!editing);  // 验证失败时退出编辑状态
    }
  };

//- 定义不同类型的编辑控件
  const editNodeData = {
    inputNode: (  // 文本输入框
      <Input
        ref={inputRef}
        onPressEnter={_sendBeforeCheck}  // 回车触发保存
        onBlur={_sendBeforeCheck}        // 失焦触发保存
      />
    ),
    selectNode: (  // 下拉选择器
      <Select ref={inputRef} onBlur={_sendBeforeCheck}>
        {/* 根据 mapData 生成选项 */}
        {mapData[dataIndex] &&
          mapData[dataIndex].map((item, index) => (
            <Option key={index} value={index}>{item}</Option>
          ))}
      </Select>
    ),
    dateNode: (  // 日期选择器
      <DatePicker
        ref={inputRef}
        onBlur={_sendBeforeCheck}
        onChange={_sendBeforeCheck}  // 日期变化时立即保存
      />
    ),
  };

// 根据编辑状态渲染内容
  let childNode = children;  // 默认显示原始内容

if (editable) {
    childNode = editing ? (
      // 编辑状态：渲染表单控件
      <Form.Item name={dataIndex} rules={rules}>
        {editNodeData[type]}  {/* 根据 type 选择控件类型 */}
      </Form.Item>
    ) : (
      // 非编辑状态：点击区域触发编辑
      <div
        className="editable-cell-value-wrap"
        style={{ paddingRight: 24 }}  // 预留保存按钮空间
        onClick={toggleEdit}           // 点击进入编辑
      >
        {children}  {/* 显示原始值 */}
      </div>
    );
  }

// 返回表格单元格，透传所有属性（如 className/style 等）
  return <td {...restProps}>{childNode}</td>;
};

类型	指派人员	状态
审查	DEV-Edu	进行中 (0/1人)
测试	DEV-Edu	进行中 (0/1人)

DEV-Edu/frontend-project-oa .gitee-modal { width: 500px !important; }

搜索帮助

DEV-Edu/frontend-project-oa