WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Approval/DetailModal.js

import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Form, Modal, Steps, Tabs, TreeSelect } from 'antd';
import styles from './DetailModal.less';
import TableRender from './TableRender';
import MemberModal from './MemberModal';
import StatusRender from './StatusRender';

const { Step } = Steps;
// 新建
function DetailModal(props) {
  const {
    visible,
    onClose,
    depUserTree,
    onOk,
    form,
    data,
    isEdit,
    flowList = [],
    disabled,
    loading,
  } = props;
  const [codes, setCodes] = useState({
    type: '',
    industry: '',
    location: '',
    name: '',
    version: '',
  });
  const [params, setParams] = useState({
    sub_status: data.sub_status,
  });

  useEffect(() => {
    if (!visible || !data.id) return;
    setCodes({
      type: data.TypeInfo?.code,
      industry: data.IndustryInfo?.code,
      location: data.location_code,
      name: data.name,
      version: data.version,
    });
  }, [data, visible]);

  const renderDetail = () => (
    <>
      <div className={styles.subTitle}>项目详情</div>
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
        <Form.Item className={styles.formItem} label="项目名称">
          {data.project_name}
        </Form.Item>
        {data.TypeInfo && (
          <Form.Item className={styles.formItem} label="项目类别">
            {data.TypeInfo?.name}
          </Form.Item>
        )}
        <Form.Item className={styles.formItem} label="流程">
          {flowList.find(item => item.id == data.flow_id)?.name}
        </Form.Item>
        {data.type_id != 7 && (
          <>
            <Form.Item className={styles.formItem} label="行业名称">
              {data.IndustryInfo?.name}
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目地区">
              {data.location}({data.location_code})
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目简称">
              {data.name}
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目批次">
              {data.version}期
            </Form.Item>
          </>
        )}
        {!isEdit && data.AuthorUser ? (
          <Form.Item className={styles.formItem} label="售前项目经理">
            {data.AuthorUser.CName}
          </Form.Item>
        ) : (
          <Form.Item label="售前项目经理" className={styles.formItem} name="managerID">
            <TreeSelect
              defaultValue={data.AuthorUser?.CName}
              showSearch
              allowClear
              style={{ width: '60%' }}
              placeholder="请选择项目经理"
              multiple={false}
              filterTreeNode={(input, option) => {
                return option.props.title === input;
              }}
              treeData={depUserTree}
            />
          </Form.Item>
        )}
        {data.AuthorDepInfo && (
          <Form.Item className={styles.formItem} label="所属部门">
            {data.AuthorDepInfo.Name}
          </Form.Item>
        )}
        {data.project_full_code && (
          <Form.Item className={styles.formItem} label="项目编号">
            {data.project_full_code}
          </Form.Item>
        )}
        {data.WtyManager && (
          <Form.Item className={styles.formItem} label="质保经理">
            {data.WtyManager.CName}
          </Form.Item>
        )}
        {data.OptManager && (
          <Form.Item className={styles.formItem} label="运营经理">
            {data.OptManager.CName}
          </Form.Item>
        )}
        {/* <Form.Item className={styles.formItem} label="项目阶段">
          {data.OptManager.CName}
        </Form.Item>
        <Form.Item className={styles.formItem} label="现阶段状态">
          {data.OptManager.CName}
        </Form.Item> */}
        <Form.Item className={styles.formItem} label="项目规模">
          <TableRender
            onlyShow={true}
            value={'[{"type":"UF","scale":"10"},{"type":"RO","scale":"20"}]'}
          />
        </Form.Item>
      </Form>
    </>
  );

  const flow = useMemo(() => {
    if (!data.flow_id) return {};
    return flowList.find(item => item.id == data.flow_id) || {};
  }, [flowList, data]);

  const current = useMemo(() => {
    if (!data.node_id) return 0;
    return flow.Nodes?.findIndex(item => item.id == data.node_id);
  }, [flowList, data]);

  const getAudits = nodeInfo => {
    switch (nodeInfo.id) {
      case 11:
        return '执行项目经理';
      case 12:
        return '运营经理';
      case 13:
        return '执行项目经理';
      case 14:
        return '质保经理';
      default:
        return (nodeInfo.NodeAudits || []).map(item => item.AuthorRoleInfo.Name).join('，');
    }
  };

  const renderAuth = () => (
    <div className={styles.authDetail}>
      <div className={styles.subTitle}>审核详情</div>
      <Steps className={styles.auth} current={current}>
        {(flow.Nodes || []).map(item => (
          <Step key={item.id} title={item.node} description={`审批人：${getAudits(item)}`} />
        ))}
      </Steps>
    </div>
  );

  return (
    <Modal title="项目详情" width={800} visible={visible} onCancel={onClose} footer={null}>
      {renderDetail()}
      {/* {data.audit_status != 0 && renderAuth()} */}
      <Tabs defaultActiveKey="3">
        <Tabs.TabPane tab="成员管理" key="1">
          <MemberModal isEdit={isEdit} currentItem={data} />
        </Tabs.TabPane>
        <Tabs.TabPane tab="审核详情" key="2">
          {renderAuth()}
        </Tabs.TabPane>
        <Tabs.TabPane tab="状态记录" key="3">
          <StatusRender />
        </Tabs.TabPane>
      </Tabs>
    </Modal>
  );
}
export default DetailModal;