CostAccountManaSys/src/pages/costAccounting/departmentCostCalculate/index.jsx

/*
 * @Author: your name
 * @Date: 2021-07-26 10:13:13
 * @LastEditTime: 2021-09-10 09:17:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /TracerMethodology_PC/src/pages/UserMana/index.js
 */

// import { PlusOutlined } from '@ant-design/icons';
import { Form, Button,Cascader } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {
  ProFormDatePicker,
} from '@ant-design/pro-form';
import { getDepartmentCostList,calculateData } from './service';

import { getResponsibilityCenterList } from '@/pages/responsibilityCenter/service';

import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';



const DepartmentCostCalculate = () => {

  const [currentTime, setCurrentTime] = useState(moment(new Date()).subtract(1, 'months').format('YYYY-MM'));
  const [selectableResponsibilityList, setSelectableResponsibilityList] = useState([]);
  const [selectedResponsibilityCode,setSelectedResponsibilityCode] = useState(null);

  const columns = [
    {
      title: '选择年月',
      key: 'date',
      hideInTable: true,
      dataIndex: 'date',
      renderFormItem: (item, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {

        if (type === 'form') {
          return null;
        }
        return (
          <Form.Item >
            <ProFormDatePicker 
              initialValue={currentTime}
              fieldProps={{
                picker: 'month', format: (value) => { return value.format('YYYY-MM') }, locale: locale,
                onChange: (val) => { console.log({ val }); setCurrentTime(val) }
              }}
              name="date" />
          </Form.Item>
        )
      },
    },
    {
      title: '选择责任中心',
      key: 'responsibilityCode',
      hideInTable: true,
      fieldProps: (form, config) => {
        // console.log({ form, config });
      },
      dataIndex: 'responsibilityName',
      renderFormItem: (item, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
        // console.log({item,type, defaultRender,formItemProps, fieldProps,rest,form })
        if (type === 'form') {
          return null;
        }

        return (
          <Form.Item name="responsibilityCode">
            <Cascader options={selectableResponsibilityList}
              fieldNames={{
                label: 'responsibilityName',
                value: 'responsibilityCode',
                children: 'child',
              }}
              onChange={(val)=>{setSelectedResponsibilityCode(val[val.length-1])}}
              {...fieldProps}
            />
          </Form.Item>
        )
      },
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '月份',
      dataIndex: 'month',
      key: 'month',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '报表项目编码',
      dataIndex: 'reportNum',
      key: 'reportNum',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '报表项目名',
      dataIndex: 'reportName',
      key: 'reportName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '责任中心编码',
      dataIndex: 'responsibilityCode',
      key: 'responsibilityCode',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '责任中心名',
      dataIndex: 'responsibilityName',
      key: 'responsibilityName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      ellipsis: true,
      hideInSearch: true,
    },
    
  ];


  const actionRef = useRef();


  //获取列表
  const getList = async (params = {}, sort, filter) => {
    const { date, pageSize, current } = params;
    const res = await getDepartmentCostList({ pageSize, current, date: moment(date).format('YYYY-MM-DD'),responsibilityCode:selectedResponsibilityCode});
    if (res && res.status) {

      return {
        data: res.data.list,
        total: res.data.totalCount,
        success: res.success,
      };
    }

  };




  const calculateDatahandle = async ()=>{
        await calculateData({date:moment(currentTime).format('YYYY-MM-DD')});
        actionRef?.current?.reload();
  }



  useEffect(async () => {
    const responsibilityList = await getResponsibilityCenterList({ pageSize: 500 });
    const { data: { list=[] } } = responsibilityList;
    setSelectableResponsibilityList(list);
  }, []);




  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={getList}
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
             <Button type='primary' onClick={()=>calculateDatahandle()}>计算数据</Button>
        ]}

        pagination={{
          pageSize: 10,
        }}
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto'
        }}
      />
    </PageContainer>
  );
};

export default DepartmentCostCalculate;