import { useContext, useState, useEffect, useMemo } from 'react'; import { observer } from 'mobx-react'; import { toJS } from 'mobx'; import moment from 'moment'; import { stores_Context } from './../../config'; import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio, Tabs, message } from 'antd'; import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components'; import SearchForm from './../search/SearchForm'; import { bu } from './../../libs/ht'; import { isEmpty, objectMapper, fixToInt, fixTo2Decimals, fixTo4Decimals, cloneDeep, numberFormatter } 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 }), {}); const numberConvert10K = (number, scale = 10) => { return fixTo2Decimals((number/(1000*scale))) + '万'; }; export default observer((props) => { const { KPIStore, date_picker_store: searchFormStore } = useContext(stores_Context); const { curObject } = props; const [dataSource, setDataSource] = useState([]); useEffect(() => { onSearchSubmit({ object: curObject, date_type: 'applyDate', start_date: searchFormStore.start_date.startOf('year').format('YYYY-MM-DD'), end_date: searchFormStore.end_date.endOf('year').format('YYYY-MM-DD 23:59'), }); return () => {}; }, []); const onSearchSubmit = (obj, formVal={}) => { const getkpiParam = objectMapper(obj, { DateType: { key: 'date_type' }, Date1: { key: 'start_date' }, Date2: { key: 'end_date' } }); Object.assign(getkpiParam, { object: curObject }); KPIStore.setSettingYear(formVal?.year?.year() || KPIStore.settingYear); KPIStore.getList(getkpiParam).then((data) => { setDataSource(data); }); }; const [editOpen, setEditOpen] = useState(false); const [editableRowsKeys, setEditableRowKeys] = useState([]); const PercentInput = useMemo( () => // eslint-disable-next-line react/display-name ({ value, onChange, record, ...extProps }) => { // // eslint-disable-next-line react-hooks/rules-of-hooks const [inputValue, setInputValue] = useState(value); const handleInputChange = (e) => { setInputValue(e.target.value); onChange?.(e.target.value); }; const calcV = inputValue ? numberConvert10K(fixTo4Decimals((Number(record?.yearValue) * inputValue) / 100)) : 0; return ( {calcV} ); }, [] ); const RenderMonthCell = (row, mon) => { return (
{fixTo2Decimals(row?.[`M${mon}Percent`])} %
{numberConvert10K(fixTo4Decimals((Number(row?.yearValue) * row?.[`M${mon}Percent`]) / 100))}
); }; const monthCol = new Array(12).fill(1).map((_, index) => { return { title: `${index + 1}月`, dataIndex: `M${index + 1}Percent`, valueType: 'digit', width: '6.5em', // fieldProps: { min: 0, max: 100, style: { width: '4em' } }, renderFormItem: ({ dataIndex, ...item }, { record, isEditable, ...e }, form) => { return ; }, render: (_, row) => RenderMonthCell(row, index + 1), }; }); const columns = [ { title: '年度目标', dataIndex: 'yearValue', valueType: 'digit', fieldProps: { style: { width: '100%' }, step: 10000 * 100 }, formItemProps: { style: { width: '100%' }, }, render: (_, row, ...a) => numberConvert10K(row.yearValue), }, ...monthCol, { title: '操作', valueType: 'option', // width: 250, render: () => { return null; }, }, ]; const onTableChange = (...argrs) => { setEditableRowKeys(argrs[0].map((ele) => ele.key)); setDataSource(argrs[0]); }; const onTableSubmit = () => { const tableData = dataSource.reduce((r, curObj) => { const allMonth = new Array(12).fill(1).map((_, index) => { const mIndex = index + 1; const mVal = (Number(curObj.yearValue) * Number(curObj[`M${mIndex}Percent`])) / 100; const startM = moment([KPIStore.settingYear, index, 1]); const pick = (({ object, object_name, object_id, subject, date_type }) => ({ object, object_name, object_id, subject, date_type, }))(curObj); return { ...pick, start_date: startM.format('YYYY-MM-DD'), end_date: startM.endOf('M').format('YYYY-MM-DD HH:mm'), value: mVal, kpi_id: curObj.kpiDataMapped?.[`M${mIndex}`]?.kpi_id || undefined, key: undefined, }; }); return r.concat(allMonth); }, []); const yearRow = (({ object, object_name, object_id, subject, date_type, yearValue, kpiYear }) => ({ object, object_name, object_id, subject, date_type, value: yearValue, start_date: moment([KPIStore.settingYear, 0, 1]).format('YYYY-MM-DD'), end_date: moment([KPIStore.settingYear, 11, 1]).endOf('M').format('YYYY-MM-DD HH:mm'), kpi_id: kpiYear?.kpi_id || undefined, }))(dataSource?.[0] || {}); tableData.unshift(yearRow); console.log('sub', tableData, delKpiIds); // return false; // debug: KPIStore.onSubmit(tableData, {delQueue: delKpiIds}).then((res) => { if (res) { message.success('保存成功'); setEditOpen(false); setEditableRowKeys([]); setDelKpiIds([]); onSearchSubmit(searchFormStore.formValuesToSub); return false; } message.error('失败, 请重试'); }); }; const initialRow = monthCol.reduce( (r, v) => ({ ...r, [v.dataIndex]: 0, yearValue: 10000*100, object: curObject, object_name: '', object_id: -1, subject: 'sum_profit', date_type: searchFormStore.formValuesToSub.DateType, kpiDataMapped: {}, key: Date.now().toString(32) }), {} ); // v.formItemProps.initialValue const makeInitialTable = (e) => { setEditOpen(e); if (e && isEmpty(dataSource)) { const _initialRow = Object.assign({}, initialRow, initialPercentKey); setDataSource([_initialRow]); setEditableRowKeys([_initialRow.key]); return false; } setEditableRowKeys(e ? dataSource.map((ele) => ele.key) : []); }; const [delKpiIds, setDelKpiIds] = useState([]); return ( <> { // TradeStore.setStateSearch(form); // pageRefresh(obj); onSearchSubmit(obj, form); setEditOpen(false); setEditableRowKeys([]); }} /> { return [ { makeInitialTable(e); }} />, , ]; }} editable={{ type: 'multiple', editableKeys: editableRowsKeys, actionRender: (row, config, defaultDoms) => { return [defaultDoms.delete]; }, onDelete: (_key, _row) => { // console.log('del', _key, _row); const rowKpiIds = (_row?.kpiData || []).map(ele => ele.kpi_id); rowKpiIds.push(_row?.kpiYear?.kpi_id); setDelKpiIds(rowKpiIds); }, onValuesChange: (record, recordList) => { // console.log('on edit, onValuesChange',record, recordList); onTableChange(recordList); }, onChange: (editableKeys, editableRows) => { setEditableRowKeys(editableKeys); }, }} /> ); });