canrd-main / canrd-erp-front · Files

import InvoiceDetailImportModal from '@/pages/Invoice/InvoiceRecord/components/InvoiceDetailImportModal';
import { InvoiceProjectSelect } from '@/pages/Invoice/InvoiceRecord/components/InvoiceProjectSelect';

import {
  ActionType,
  EditableProTable,

  ProCard,

  ProColumns,

  ProFormField,

} from '@ant-design/pro-components';
import { useEffect, useRef, useState } from 'react';

export default ({ recordId, details, updateDetails, readOnly }) => {

  const [editableKeys, setEditableRowKeys] = useState([]);

  const ref = useRef<ActionType>();

  useEffect(() => {
    updateDetails(details);
  }, []);

  useEffect(() => {
    setEditableRowKeys(details?.map((item) => item.tid));
  }, [details]);
  const columns: ProColumns[] = [
    {
      title: '项目名称',
      dataIndex: 'projectName',

      width: 200,

      ellipsis: true,

      readonly: readOnly,
      renderFormItem: () => {

        return <InvoiceProjectSelect readOnly={readOnly} />;

      },

    },
    {
      title: '规格型号',
      readonly: readOnly,
      dataIndex: 'specification',
      valueType: 'text',

      ellipsis: true,

    },
    {
      title: '单位',
      readonly: readOnly,
      dataIndex: 'unit',
      valueType: 'text',

      ellipsis: true,

    },
    {
      title: '数量',
      readonly: readOnly,
      dataIndex: 'quantity',
      valueType: 'digit',

      ellipsis: true,

    },
    {
      title: '单价',
      readonly: readOnly,
      dataIndex: 'price',
      valueType: 'digit',

      ellipsis: true,

    },
    {
      title: '金额',
      readonly: readOnly,

      dataIndex: 'totalPrice',

      valueType: 'digit',

      ellipsis: true,

    },
    {
      title: '税率/征收率',

      readonly: true,

      dataIndex: 'taxRate',
      valueType: () => ({
        type: 'percent',
      }),

      ellipsis: true,

    },
    {
      title: '税额',

      readonly: true,

      dataIndex: 'taxPrice',
      valueType: 'digit',

      ellipsis: true,

    },
    {
      title: '操作',
      valueType: 'option',

      width: 100,

      render: () => {
        return null;
      },
    },
  ];

  return (
    <>
      <EditableProTable
        columns={columns}

        actionRef={ref}

        rowKey="tid"
        scroll={{
          x: 960,
        }}
        value={details}

        controlled={true}

        recordCreatorProps={
          readOnly
            ? false
            : {
                newRecordType: 'dataSource',
                record: () => ({
                  tid: Date.now(),
                }),
              }
        }
        toolBarRender={() => {
          return [

            <InvoiceDetailImportModal key={'import'} recordId={recordId} />,

          ];
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },

          onValuesChange: (record, recordList) => {

            //修改recordList中tid为record.tid的元素,将它的specification属性设置为invoiceProject的specification属性
            const records = recordList.map((item) => {
              return item;
            });
            updateDetails(records);

          },
        }}
      />

      {
        <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
          <ProFormField
            ignoreFormItem
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
            mode="read"
            valueType="jsonCode"
            text={JSON.stringify(details)}
          />
        </ProCard>
      }

    </>
  );
};