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, Row, Col, Spin, Radio, Tabs } from 'antd';
import { stores_Context } from '../config';
import { isEmpty, fixTo4Decimals, cloneDeep } from './../utils/commons';
import SearchForm from './../components/search/SearchForm';
import BUPanel from './../components/kpi/BUPanel';
import OverviewPanel from './../components/kpi/OverviewPanel';
import { KPIObjects } from './../libs/ht';
import './kpi.css';
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 }), {});
const itemComponents = {
  'overview': OverviewPanel,
  'bu': BUPanel,
  'dept': BUPanel,
  'du': BUPanel,
  'operator': BUPanel,
  'destination': BUPanel,
  'country': BUPanel,
};
const tabsItems = KPIObjects.map((ele) => ({
  ...ele,
  label: ele.label,
  key: ele.value,
  children: BUPanel,
}));
console.log(tabsItems);
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', { is_assign: 1 });
    DictDataStore.fetchDictData('country');
    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]);
  };
  const handleRadioChange = (val) => {
    console.log(val, 'sss');
  };
  return (
    <>
      <Row>
        <Col span={24}>
          {/* <Radio.Group options={KPIObjects} optionType="button" onChange={(e) => handleRadioChange(e.target.value)} /> */}
          <Tabs
            // onChange={onChange}
            type="card"
            items={KPIObjects.map((ele, i) => {
              const ItemComponent = itemComponents[ele.key];
              return {
                ...ele,
                children: <ItemComponent title={ele.label} />,
              };
            })}
          />
        </Col>
      </Row>
      <Row gutter={16} style={{ margin: '0 0 1em' }}>
        <Col className="gutter-row" span={24} style={{ margin: '0 0 -16px 0', padding: 0 }}>
          <SearchForm
            defaultValue={{
              'initialValue': {
                // ...searchPayloadHome,
              },
              // hides: ['businessUnits', 'months', 'WebCode', 'dates'],
              shows: ['DateType', 'DepartmentList', 'WebCode', 'years'],
              'fieldProps': {
                DepartmentList: { show_all: false },
                WebCode: { show_all: false },
                years: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              // TradeStore.setStateSearch(form);
              // pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <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>
      ))}
    </>
  );
});