KC-MiddlePlatform/src/pages/index/components/TodoList/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-05-30 10:49:32
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-12-27 14:51:13
 * @FilePath: /KC-MiddlePlatform/src/pages/index/components/TodoList/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

//待办事项模块

import { useEffect, useState } from 'react';
import './style.less';

export type todoItem = {
  recordTitle: string;
  id: number;
  status: number;
  taskLevel: number;
  createDate: number;
  content: string;
};

export interface TodoList {
  todoList: todoItem[];
  todoListClickHandle?: (id: number) => void;
}

export const TodoList = (props: TodoList) => {
  const { todoList, todoListClickHandle } = props;
  const [todoLists, set_todoLists] = useState<todoItem[]>([]);

  const setTodoClass = (val: todoItem) => {
    if (val.taskLevel == 3) return 'todoStatus green';
    if (val.taskLevel == 2) return 'todoStatus orange';
    if (val.taskLevel == 1) return 'todoStatus red';
  };

  const checkBtnHandle = (item: todoItem) => {
    todoListClickHandle && todoListClickHandle(item.id);
  };

  useEffect(() => {
    set_todoLists(todoList.splice(0, 4));
  }, [todoList]);

  return (
    <div className="TodoList">
      <div className="topTitle">
        <span className="name">待办事项</span>
        {/* <span className='actBtn'>全部处理</span> */}
      </div>
      <div className="wrap">
        {todoLists.map((item, index) => {
          return (
            <div className="todoList" key={index}>
              <div className="checkBtn" onClick={() => checkBtnHandle(item)}></div>
              <div className="status">
                <div className={setTodoClass(item)}>{item.recordTitle}</div>
                <span className="date">{item.createDate ? `${item.createDate}`.replace(/:\d{2}$/, '') : ''}</span>
              </div>
              <div className="detail" dangerouslySetInnerHTML={{ __html: item.content }}></div>
            </div>
          );
        })}
        {todoLists.length == 0 && (
          <div className="empty">
            <img src={require('../../../../../public/images/empty.png')} alt="" />
            <span>待办事项已全部处理</span>
          </div>
        )}
      </div>
    </div>
  );
};