dashboard/src/views/KPI.jsx

import { useContext, useEffect, useState, useRef } from 'react';
import { observer, useLocalStore } from 'mobx-react';
import { toJS } from 'mobx';
// import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components';
import { Button, Table, Switch, Input, Space, Typography } from 'antd';
import { stores_Context } from '../config';
import { isEmpty, fixTo4Decimals, cloneDeep } from './../utils/commons';

const {Text} = Typography;
const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i+1}Percent`]: [8, 9].includes(i) ? 10 : 8 }), {});

export default observer((props) => {
  const [dataSource, setDataSource] = useState([]);
  const { KPIStore, DictDataStore } = useContext(stores_Context);
  const { settingYear,  } = KPIStore;
  const { operator } = DictDataStore;
  useEffect(() => {
    // KPIStore.saveOrUpdate();
    KPIStore.getList().then((data) => {
      setDataSource(data);
    });
    DictDataStore.fetchDictData('operator');
    return () => {};
  }, []);
  const [editOpen, setEditOpen] = useState(false); // test:
  const [editableRowsKeys, setEditableRowKeys] = useState([]);
  // console.log(toJS(KPIStore.pageData ), dataSource, '00000');
  const PercentInput = ({ value, onChange, record, ...extProps }) => {
    // console.log(extProps, '22222222');
    const initialPercent = record.kpiDataMapped?.[`M${extProps.month}`]?.percentVal;
    const [inputVal, setInputVal] = useState(value);
    const calcV = inputVal ? fixTo4Decimals((Number(record?.yearValue) * inputVal) / 100) : 0;

    const handleInputChange = ({ target: { value } }) => {
      setInputVal(value);
    };
    const handleInputConfirm = () => {
      // onChange?.(inputVal);
      // setInputVal('');
    };
    return (
      <Space direction={'vertical'}>
        <Input suffix="%" type={'number'} value={value} onChange={onChange}  />
        {/* onBlur={handleInputConfirm} onPressEnter={handleInputConfirm} */}
        {/* <span className='ant-typography ant-typography-secondary'>1</span> */}
        <Text type={'secondary'}>{calcV}</Text>
      </Space>
    );
  };
  const RenderInput = (row, mon) => {
    // console.log(toJS(row), mon);
    return (
      <Space direction={'vertical'}>
        <div>{row.kpiDataMapped?.[`M${mon}`]?.percentVal}<span>%</span></div>
        <div>{row.kpiDataMapped?.[`M${mon}`]?.value}</div>
      </Space>
    );
  };
  const monthCol = new Array(12).fill(1).map((_, index) => {
    return {
      title: `${index + 1}月`,
      dataIndex: `M${index + 1}Percent`,
      valueType: 'percent',
      width: '6.5em',
      fieldProps: { min: 0, max: 100, style: { width: '4em' } },
      renderFormItem: ({ dataIndex, ...item }, { record, isEditable ,...e }, form) => {
        return <PercentInput {...{ record }} month={index + 1} />;
      },
      render: (_, row) => RenderInput(row, index + 1),
    };
  });
  const initialRow = monthCol.reduce((r, v) => ({ ...r, [v.dataIndex]: 0 }), {}); // v.formItemProps.initialValue
  const columns = [
    {
      title: '对象',
      dataIndex: 'object_id',
      valueType: 'select',
      // ...valueEnum
      // fieldProps: { labelInValue: true },
      render: (_, r) => r.object_name
    },
    // {
    //   title: 'Name',
    //   dataIndex: 'title',
    //   //...form rules
    //   formItemProps: {
    //     rules: [
    //       {
    //         required: true,
    //         whitespace: true,
    //         message: '此项是必填项',
    //       },
    //     ],
    //   },
    // },
    {
      title: '年度目标',
      dataIndex: 'yearValue',
      valueType: 'digit',
      fieldProps: { style: { width: '100%' } },
      formItemProps: {
        style: { width: '100%' },
      },
    },
    ...monthCol,
    // {
    //   title: '完成进度',
    //   dataIndex: 'place',
    //   valueType: 'percent',
    //   editable: false,
    //   width: '6em',
    // },
    {
      title: '操作',
      valueType: 'option',
      // width: 250,
      render: () => {
        return null;
      },
    },
  ];
  const onTableChange = (...argrs) => {
    console.log(argrs[0], 'who who who');
    setEditableRowKeys(argrs[0].map((ele) => ele.key));
    // KPIStore.setEditableRowsKeys(argrs[0].map((ele) => ele.key));
    setDataSource(argrs[0]);
    // KPIStore.handleTableEdit(argrs[0]);
  };
  return (
    <>
      <EditableProTable
        key={settingYear}
        headerTitle={settingYear}
        columns={columns}
        rowKey="key"
        scroll={{
          x: 1000,
        }}
        value={dataSource}
        onChange={onTableChange}
        recordCreatorProps={
          editOpen
            ? {
                newRecordType: 'dataSource',
                record: () => ({
                  key: (Date.now().toString(32)), // dataSource.length + 1, // Number(Date.now().toString()),
                  ...initialRow,
                  object_name: '',
                  value: 0,
                  yearValue: 0,
                  ...cloneDeep(initialPercentKey),
                }),
              }
            : false
        }
        toolBarRender={() => {
          return [
            <Switch
              unCheckedChildren="查看"
              checkedChildren="编辑"
              key={'openEdit'}
              // defaultChecked={true}
              checked={editOpen}
              onChange={(e) => {
                setEditOpen(e);
                setEditableRowKeys(e ? dataSource.map((ele) => ele.key) : []);
                // KPIStore.setEditableRowsKeys(e ? dataSource.map((ele) => ele.key) : []);
              }}
            />,
            <Button
              disabled={!editOpen}
              type="primary"
              key="save"
              onClick={() => {
                console.log(dataSource);
                // dataSource 就是当前数据，可以调用 api 将其保存
                KPIStore.saveOrUpdate(dataSource);
              }}
            >
              保存数据
            </Button>,
          ];
        }}
        editable={{
          type: 'multiple',
          editableKeys: editableRowsKeys,
          actionRender: (row, config, defaultDoms) => {
            // console.log(row, config, defaultDoms);
            return [defaultDoms.delete];
          },
          onValuesChange: (record, recordList) => {
            console.log('on edit, onValuesChange');
            onTableChange(recordList);
          },
          onChange: (editableKeys, editableRows) => {
            console.log('editable onValuesChange');
            onTableChange(editableRows);
            // KPIStore.setEditableRowsKeys()
          },
        }}
      />
      {(operator?.dataSource || []).map(ele => <div key={ele.value}>{ele.label} <span className="a">{ele.mobile}</span></div>)}
    </>
  );
});