如何开发绩效管理（OKR）系统的OKR考核板块？（附架构图+流程图+代码参考）

mermaid
graph LR
  A[前端（React/Vue）] --> B[API 网关]
  B --> C[OKR 服务（Spring Boot/Node.js）]
  C --> D[业务逻辑层]
  D --> E[数据库（MySQL/PostgreSQL）]
  D --> F[缓存（Redis）]
  D --> G[消息队列（RabbitMQ/Kafka）]
  C --> H[报表服务（Python/D3.js）]
  H --> I[BI 仪表盘]

mermaid
flowchart TD
  A(部门负责人填写OKR草稿) --> B{提交审核?}
  B -- 否 --> A
  B -- 是 --> C[HR/高层审核]
  C -- 驳回 --> A
  C -- 通过 --> D[OKR生效，推送至员工]

mermaid
flowchart TD
  A(员工认领部门Objective) --> B[制定个人KR]
  B --> C{提交自评}
  C --> D[上级/同事互评]
  D --> E[系统汇总打分]
  E --> F[生成复盘报告]

sql
-- 部门OKR表
CREATE TABLE dept_okr (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  dept_id BIGINT NOT NULL,
  quarter VARCHAR(10) NOT NULL,
  objective VARCHAR(255) NOT NULL,
  created_by BIGINT,
  status ENUM('DRAFT','PENDING','ACTIVE','CLOSED') DEFAULT 'DRAFT',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
-- KR表
CREATE TABLE key_result (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  okr_id BIGINT NOT NULL,
  description VARCHAR(255) NOT NULL,
  target_value DECIMAL(10,2) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- 员工OKR表
CREATE TABLE user_okr (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  user_id BIGINT NOT NULL,
  dept_okr_id BIGINT NOT NULL,
  objective VARCHAR(255) NOT NULL,
  status ENUM('DRAFT','PENDING','ACTIVE','CLOSED') DEFAULT 'DRAFT',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- 用户KR自评表
CREATE TABLE kr_evaluation (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  key_result_id BIGINT NOT NULL,
  user_okr_id BIGINT NOT NULL,
  self_score DECIMAL(5,2),
  manager_score DECIMAL(5,2),
  comment TEXT,
  evaluated_at DATETIME
);

java
// DeptOkrController.java
@RestController
@RequestMapping("/api/dept-okr")
public class DeptOkrController {
  @Autowired DeptOkrService service;
  @PostMapping
  public ResponseEntity<DeptOkr> create(@RequestBody DeptOkr dto) {
    return ResponseEntity.ok(service.create(dto));
  }
  @PutMapping("/{id}/submit")
  public ResponseEntity<Void> submit(@PathVariable Long id) {
    service.submitForApproval(id);
    return ResponseEntity.ok().build();
  }
  @GetMapping("/{id}")
  public ResponseEntity<DeptOkr> getById(@PathVariable Long id) {
    return ResponseEntity.ok(service.getById(id));
  }
}

jsx
// OKRForm.jsx
import { Form, Input, Button, Select } from 'antd';
export default function OKRForm({ initialValues, onSubmit }) {
  const [form] = Form.useForm();
  return (
    <Form form={form} initialValues={initialValues} onFinish={onSubmit}>
      <Form.Item name="objective" label="Objective" rules={[{ required: true }]}>
        <Input placeholder="输入部门/个人目标" />
      </Form.Item>
      <Form.List name="keyResults">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Form.Item
                {...restField}
                name={[name, 'description']}
                label={`KR ${name + 1}`}
                rules={[{ required: true }]}
              >
                <Input placeholder="关键结果描述" />
                <Button onClick={() => remove(name)}>删除</Button>
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()}>添加 KR</Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}