pc-admin/src/pages/check/components/LocTable.jsx

import React from 'react';
import useBool from '@/utils/hooks/useBool';
import { Table, Space, Button, Row, Col, Card } from 'antd';
import { getTaCheckItem } from '@/service/tacheckitem';
import QuList from './QuList';
import LocForm from './LocForm';
import styles from './style.module.less';

export default (props) => {
  const { checkId } = props;

  const [list, setList] = React.useState([]);
  const [curItem, setCurItem] = React.useState();
  const [loading, startLoading, stopLoading] = useBool();
  const [open, setOpen] = React.useState(false);

  const onEdit = (row) => {
    setCurItem(row);
    setOpen(true);
  }

  const columns = [
    {
      title: '点位名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分值',
      key: 'avgScore',
      render: (_, row) => row.fullScore ? Number(row.fullScore / (row.num || 1)).toFixed(2) : '-',
    },
    {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '小计',
      dataIndex: 'fullScore',
      key: 'fullScore',
    },
    {
      title: '测评得分',
      dataIndex: 'score',
      key: 'score',
    },
    {
      title: '操作',
      key: 'options',
      width: 100,
      render: (_, row) => {
        return (
          <Space>
            <Button type="link" onClick={() => onEdit(row)}>编辑</Button>
          </Space>
        )
      }
    },
  ]

  const onChange = (item) => {
    const newList = list.map(x => x.itemId === item.itemId ? item : x);
    setList(newList);
  }

  const getRowClassName = (row) => {
    return [
      styles['yz-table-row'],
      (row.itemId == curItem?.itemId) ? styles.active : false,
    ].filter(Boolean).join(' ');
  }

  React.useEffect(() => {
    if (checkId) {
      startLoading();
      getTaCheckItem({pageSize: 500, checkId, itemType: "loc"}).then(res => {
        setList(res.records || []);
        stopLoading();
      }).catch(() => {
        stopLoading();
      });
    }
  }, [checkId]);
  
  return (
    <Row gutter={24}>
      <Col span={12}>
        <Card>
          <Table
            rowKey="typeId"
            loading={loading}
            columns={columns}
            dataSource={list}
            pagination={false}
            rowClassName={getRowClassName}
            onRow={(row) => ({
              onClick: () => setCurItem(row),
            })}
          />
          <LocForm
            open={open}
            checkItem={curItem}
            onOpenChange={setOpen}
            onChange={onChange}
          />
        </Card>
      </Col>
      <Col span={12}>
        <QuList itemId={curItem?.itemId} />
      </Col>
    </Row>
  )
}