GtDigManageWeb/src/pages/Profile/approve.js

import React, { Fragment, useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'umi';
import {
  Card,
  Table,
  Empty,
  Button,
  Modal,
  message,
  Form,
  DatePicker,
  Row,
  Col,
  Select,
} from 'antd';
import { PageContainer } from '@ant-design/pro-components';
const { RangePicker } = DatePicker;
import { useRequest, useModel } from '@umijs/max';
import { queryProfileList, queryApplyList } from '@/services/boom';
import dayjs from 'dayjs';
import {
  queryContractCancelCheck,
  queryContractCheck,
  queryGetContractList,
} from '@/services/contract';
import ContractModal, {
  Status,
  StatusText,
  Type,
} from '../ContractManager/component/Modal';
import PageContent from '@/components/PageContent';
const TYPE = {
  Contract: 1,
  OA: 2,
};
function Approve(props) {
  const { initialState: { user }  } = useModel('@@initialState');
  const [tabActive, setTabActive] = useState('1');
  const [detail, setDetail] = useState({});
  const [conVisible, setConVisible] = useState(false);
  const approveFormRef = useRef();
  const applyFormRef = useRef();
  let navigate = useNavigate();
  const contractResult = (res) => {
    let data = res.data?.list?.map((item) => {
      return {
        ...item,
        table_name: `${user.CName}提交的合同审批`,
        table_desc: [
          `合同名称：${item.name}`,
          `合同编号：${item.code}`,
          `合同金额：${item.amount}万元`,
        ],
        CName: user.CName,
        create_time: item.cancel_on || item.created_on,
        type: TYPE.Contract,
        statusText: StatusText[item.status],
        showBtn:
          item.status == Status.Checking || item.status == Status.CalChecking,
        // key: `${TYPE.Contract}_${item.id}`,
      };
    });
    return { data, pagination: res.data?.pagination };
  };
  //OA我的审批和待审批列表
  const {
    data: OAAuditData,
    run: OAAuditRun,
    loading: OAAuditLoading,
  } = useRequest(queryProfileList, {
    formatResult: (res) => {
      return {
        data: res.data?.list?.map((item) => {
          return {
            ...item,
            CName: item.AuthorInfo.CName,
            table_desc: [item.table_desc],
            statusText: item.status,
            // key: `${TYPE.Contract}_${item.id}`,
            showBtn: true,
            type: TYPE.OA,
          };
        }),
        pagination: res.data?.pagination,
      };
    },
  });
  //合同 我的待审批列表
  const {
    data: conAuditData,
    run: conAuditRun,
    loading: conAduitLoading,
  } = useRequest((data) => queryGetContractList(data), {
    // manual: true,
    formatResult: contractResult,
  });

  //审核合同
  const { run: runCheck, loading: checkLoading } = useRequest(
    (data) => queryContractCheck(data),
    {
      manual: true,
      onSuccess: () => {
        conAuditRun({ multi_status: '1,4', currentPage: 1, page_size: 10 });
        // conAuditedRun({ check_by: user.CName });
        setConVisible(false);
        message.success('审核成功');
      },
      onErroe: () => {
        message.error('审核失败');
      },
    },
  );
  //作废审核
  const { run: calCheckRun } = useRequest(
    (data) => queryContractCancelCheck(data),
    {
      manual: true,
      onSuccess: () => {
        message.success('审核成功');
        setConVisible(false);
        conAuditRun({ multi_status: '1,4', currentPage: 1, page_size: 10 });
      },
      onError: () => {
        message.success('审核失败');
      },
    },
  );

  const applyData = useMemo(() => {
    let result = [];
    if (OAAuditData?.data && OAAuditData?.data.length > 0)
      result = [...OAAuditData?.data];
    return result;
  }, [OAAuditData]);
  const onTabChange = (activeKey) => {
    if (activeKey == '1') {
      OAAuditRun({ current: 1, page_size: 10 });
    } else {
      if (user?.Permission['menu-001-audit'])
        conAuditRun({ multi_status: '1,4', currentPage: 1, page_size: 10 });
    }
    setTabActive(activeKey);
  };
  const handleApplySubmit = (values) => {
    console.log(values);
    OAApplyRun(values);
  };
  const handleProfilePaginationChange = (pagination) => {
    conAuditRun({
      multi_status: user?.Permission['menu-001-audit'] ? '1,4' : undefined,
      currentPage: pagination.current,
      page_size: 10,
    });
  };
  const handleApplyPaginationChange = (pagination) => {
    OAAuditRun({
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const columns = [
    {
      title: '标题',
      dataIndex: 'table_name',
      width: '30%',
    },
    {
      title: '摘要',
      dataIndex: 'table_desc',
      render: (descList) => {
        return (
          <ul>
            {descList?.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        );
      },
    },
    {
      title: '发起人',
      dataIndex: 'CName',
      width: '20%',
    },
    {
      title: '发起时间',
      render: (record) => {
        return dayjs(record.create_time).format('YYYY-MM-DD HH:mm:ss');
      },
      width: '20%',
    },
    {
      title: '流程状态',
      dataIndex: 'status',
      // render: (record) => {
      //   switch (record.audit_status) {
      //     case 0: return '审核中'
      //     case 1: return '通过'
      //     case 2: return '拒绝'
      //     case 3: return '终审通过'
      //   }
      // },
      // width: '20%'
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <>
            <a
              style={{ color: '#4096ff' }}
              onClick={() => {
                navigate(`/profile/${record.id}`);
              }}
            >
              详情
            </a>
          </>
        </Fragment>
      ),
      width: '10%',
    },
  ];
  const agreementColumns = [
    {
      title: '标题',
      dataIndex: 'table_name',
    },
    {
      title: '摘要',
      dataIndex: 'table_desc',
      render: (descList) => {
        return (
          <ul>
            {descList?.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        );
      },
    },
    {
      title: '发起人',
      dataIndex: 'CName',
    },
    {
      title: '发起时间',
      render: (record) => {
        return dayjs(record.create_time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '流程状态',
      dataIndex: 'statusText',
    },
    {
      title: '操作',
      dataIndex: 'showBtn',
      render: (text, record) => (
        <>
          {text ? (
            <a
              style={{ color: '#4096ff' }}
              onClick={() => {
                if (record.type == TYPE.Contract) {
                  setDetail(record);
                  setConVisible(true);
                } else {
                  navigate(`/oa/detail/${record.flow_id}/${record.id}`);
                }
              }}
            >
              审批
            </a>
          ) : (
            <div>已审批</div>
          )}
        </>
      ),
    },
  ];
  const renderPage = (activeKey) => {
    if (activeKey == '1')
      return (
        <>
          {' '}
          <Form
            name="basic"
            // labelCol={{ span: 0 }}
            // wrapperCol={{ span: 24 }}
            onFinish={handleApplySubmit}
            ref={applyFormRef}
          >
            {/* <div style={{ display: 'flex' }}>
              <Form.Item name="range-picker" label="申请时间：">
                <RangePicker />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: 10 }}
                >
                  查询
                </Button>
              </Form.Item>
            </div> */}
          </Form>
          <Table
            rowKey="id"
            columns={columns}
            dataSource={applyData}
            loading={OAAuditLoading}
            pagination={OAAuditData?.pagination}
            onChange={handleApplyPaginationChange}
          />
        </>
      );
    else if (activeKey == '2')
      return (
        <>
          {' '}
          <Form
            name="basic"
            // labelCol={{ span: 0 }}
            // wrapperCol={{ span: 24 }}
            // onFinish={handleApproveSubmit}
            ref={approveFormRef}
          >
            {/* <div style={{ display: 'flex' }}>
              <Form.Item name="range-picker" label="审批时间：">
                <RangePicker />
              </Form.Item>
              <Form.Item name="audit_status" label="状态：" initialValue="">
                <Select
                  style={{ width: 120 }}
                  options={[
                    { value: '', label: '全部' },
                    { value: '0', label: '审核中' },
                    { value: '1', label: '通过' },
                    { value: '2', label: '拒绝' },
                    { value: '3', label: '终审通过' },
                  ]}
                />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: 10 }}
                >
                  查询
                </Button>
              </Form.Item>
            </div> */}
          </Form>
          <Table
            columns={agreementColumns}
            dataSource={conAuditData?.data}
            loading={conAduitLoading}
            pagination={conAuditData?.pagination}
            onChange={handleProfilePaginationChange}
          />
        </>
      );
  };
  return (
    <PageContent
      tabList={[
        {
          tab: `OA审批(${OAAuditData?.pagination?.total || 0})`,
          key: '1',
        },
        {
          tab: `合同管理(${conAuditData?.pagination?.total || 0})`,
          key: '2',
        },
      ]}
      onTabChange={onTabChange}
    >
      <div>{renderPage(tabActive)}</div>
      <ContractModal
        detail={detail}
        type={Type.check}
        // projectList={projectData?.list}
        visible={conVisible}
        handleOk={(data) =>
          detail.status == Status.Checking
            ? runCheck(data)
            : detail.status == Status.CalChecking
            ? calCheckRun(data)
            : null
        }
        handleCancel={() => setConVisible(false)}
      />
    </PageContent>
  );
}
export default Approve;