shalu-system-designer/apps/er-designer/src/pages/er/components/ColumnItem.tsx

import React from "react";
import { HolderOutlined } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  InputNumber,
  Popover,
  Row,
  Col,
  Tooltip,
  Select,
} from "antd";
import { ColumnItem as ColumnItemType } from "@/type";
import { DATA_TYPE_OPTIONS } from "@/constants";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import LangInput from "@/components/LangInput";
import LangInputTextarea from "@/components/LangInputTextarea";

export default function ColumnItem({
  column,
  onChange,
  onDelete,
}: {
  column: ColumnItemType;
  onChange: (key: string, value: any) => void;
  onDelete: (id: string) => void;
}) {
  console.log(column);
  const { setNodeRef, attributes, listeners, transform, transition } =
    useSortable({
      id: column.id,
      transition: {
        duration: 500,
        easing: "cubic-bezier(0.25, 1, 0.5, 1)",
      },
    });

    const styles = {
      transform: CSS.Transform.toString(transform),
      transition,
    };

  return (
    <div
      key={column.id}
      className="column-item flex gap-4px items-center jutify-space-between hover:bg-gray-100 mb-4px"
      style={styles}
      ref={setNodeRef}
      {...attributes}
      data-cypress="draggable-item"
    >
      <HolderOutlined className="cursor-move" data-cypress="draggable-handle" {...listeners}/>
      <Tooltip title="字段编码">
        <Input
          placeholder="编码"
          defaultValue={column.schemaName}
          className="flex-1"
          onChange={(e) => onChange("schemaName", e.target.value)}
        />
      </Tooltip>
      <Tooltip title="字段类型">
        <Select
          placeholder="类型"
          className="w-80px"
          options={DATA_TYPE_OPTIONS}
          value={column.type}
          onChange={(value) => onChange("type", value)}
          dropdownStyle={{ width: 120 }}
        />
      </Tooltip>
      <Tooltip title="非空">
        <div
          className="
            rounded-4px 
            cus-btn 
            w-32px 
            h-32px 
            bg-#eee 
            flex-none 
            text-center 
            leading-32px 
            cursor-pointer 
            hover:bg-#ddd"
          style={
            column.isRequired ? { background: "#1677ff", color: "#fff" } : {}
          }
          onClick={() => onChange("isRequired", !column.isRequired)}
        >
          !
        </div>
      </Tooltip>
      <Tooltip title="唯一">
        <div
          className="
            rounded-4px 
            cus-btn 
            w-32px 
            h-32px 
            bg-#eee 
            flex-none 
            text-center 
            leading-32px 
            cursor-pointer 
            hover:bg-#ddd"
          style={
            column.isUnique ? { background: "#1677ff", color: "#fff" } : {}
          }
          onClick={() => onChange("isUnique", !column.isUnique)}
        >
          1
        </div>
      </Tooltip>
      <Popover
        trigger="click"
        placement="right"
        content={
          <div
            className="w-360px max-h-400px overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <Form layout="vertical">
              <Row gutter={8}>
                <Col span={12}>
                  <Form.Item label="字段名称">
                    <LangInput value="" onChange={() => {}}/>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="默认值">
                    <Input
                      className="w-full"
                      placeholder="默认值"
                      value={column.defaultValue}
                      onChange={(e) => onChange("defaultValue", e.target.value)}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={8}>
                <Col span={12}>
                  <Form.Item label="长度">
                    <InputNumber
                      placeholder="请输入"
                      min={0}
                      className="w-full"
                      value={column.maxLength}
                      onChange={(num) => onChange("maxLength", num)}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="精度">
                    <InputNumber
                      placeholder="请输入"
                      min={0}
                      className="w-full"
                      value={column.precision}
                      onChange={(num) => onChange("precision", num)}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Form.Item label="描述">
                    <LangInputTextarea value="" onChange={() => {}}/>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
            <Button
              type="default"
              danger
              className="w-full"
              onClick={() => onDelete(column.id)}
            >
              删除
            </Button>
          </div>
        }
      >
        <div className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none text-center leading-32px cursor-pointer hover:bg-#ddd">
          <i className="iconfont icon-gengduo" />
        </div>
      </Popover>
    </div>
  );
}