# xg-interview-web

**Repository Path**: ajaxget/xg-interview-web

## Basic Information

- **Project Name**: xg-interview-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 17
- **Created**: 2024-06-13
- **Last Updated**: 2024-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xg-interview-web

## 介绍

Forked项目编写代码， 请自行初始化项目，使用react+typescript技术实现，ui库可使用ant.design

## 需求

- 新建，
  - 点击新建，弹出新建弹窗，创建一行数据，创建出来的数据永远是根级，永远在最后一个系统默认固定列的前面。也就是如图的【工料概要说明】
- 新建子级，
  - 系统默认-固定列，不支持新建子级！也就是如图【编号，主列描述，工料概要说明】列
  - 点击新建子级，同样弹出新建弹窗，创建出来的数据为当前数据的子级。
- 编辑，
  - 点击弹出创建弹窗，修改当前列类型和名称，系统默认-固定列，不支持编辑！
- 删除，
  - 点击删除，删除当前及子数据
- 排序（可选做）

![alt text](image.png)
![alt text](image-1.png)

### 默认数据

```
const dataSource:Column[] = [
  {
    "id": "code",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "编号",
    "type": "FIXED",
  },
  {
    "id": "name",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "名称",
    "type": "FIXED",
  },
  {
    "id": "remark",
    "parentId": "-1",
    "children": null,
    "name": null,
    "level": 0,
    "title": "工料概要说明",
    "type": "FIXED",
  },
]
```

#### 接口定义

```typescript
/**
 * 列类型
 * CUSTOMIZE 自定义列
 * FIXED 系统默认，固定列
 * REMARK 备注列
 * USER_FILL 用户手填列
 */

export type IColumnType = "CUSTOMIZE" | "FIXED" | "REMARK" | "USER_FILL";

/**
 * 列
 */
interface Column {
    /**
     * 子级
     */
    children: IColumn[] | null;
    /**
     * id
     */
    id: string;
    /**
     * 层级
     */
    level: number;
    /**
     * 名称
     */
    name?: null | string;
    /**
     * 父ID 为-1则为根节点
     */
    parentId: string;
    /**
     * 表头名称
     */
    title: string | null;
    /**
     * 列类型
     */
    type: IColumnType;
}
```