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

import React, { useState, useEffect } from 'react';
import {
  Table,
  Button,
  Form,
  Select,
  Divider,
  Modal,
  Popover,
  Input,
  Checkbox,
  message,
} from 'antd';
import moment from 'moment';
import router from 'umi/router';
import styles from './List.less';
import ApprovalModal from './ApprovalModal';
import DetailModal from './DetailModal';
import ExecutionModal from './ExecutionModal';
import MemberModal from './MemberModal';
import QualityOperateModal from './QualityOperateModal';
import BudgetModal from './BudgetModal';
import ModifyManagerModal from './ModifyManagerModal';
import { connect } from 'dva';
import FirmModal from './ManufacturerModal';
import { queryCreaterList, saveMfr } from '@/services/manufacturer';
import ProjectRecordModal from './ProjectRecordModal';

const { Option } = Select;
//项目阶段
export const STATUS = [
  { value: 0, label: '售前' },
  { value: 1, label: '执行' },
  { value: 2, label: '运营' },
  { value: 3, label: '质保' },
];
//现阶段状态
export const SUB_STATUS = [
  { value: 1, label: '初步交流' },
  { value: 2, label: '预算和方式' },
  { value: 3, label: '招标' },
  { value: 4, label: '中标' },
  { value: 11, label: '执行' },
  { value: 21, label: '运营' },
  { value: 31, label: '质保' },
  { value: 41, label: '失败' },
  { value: 42, label: '放弃' },
  { value: 43, label: '关闭' },
];

function List(props) {
  const {
    industryList,
    typeList,
    data,
    flowList,
    currentUser,
    permission,
    dispatch,
    loading,
    depUserTree,
    member,
    budget,
    supplierList,
  } = props;
  const [form] = Form.useForm();
  const [addVisible, setAddVisible] = useState(false);
  const [detailVisible, setDetailVisible] = useState(false);
  const [executionVisible, setExecutionVisible] = useState(false);
  const [qualityOperateVisible, setQualityOperateVisible] = useState(false);
  const [memberVisible, setMemberVisible] = useState(false);
  const [budgetVisible, setBudgetVisible] = useState(false);
  const [selfItems, setSelfItems] = useState(false);
  const [currentItem, setCurrentItem] = useState({});
  const [qualityOperate, setQualityOperate] = useState(0);
  const [modifyManagerVisible, setModifyManagerVisible] = useState(false);
  const [addFirmVisible, setAddFirmVisible] = useState(false);
  const [recordVisible, setRecordVisible] = useState(false);
  const [isEdit, setIsEdit] = useState(false);

  const columns = [
    {
      title: '项目编号',
      dataIndex: 'project_full_code',
    },
    {
      title: '项目名称',
      dataIndex: 'project_name',
    },
    {
      title: '客户',
      dataIndex: 'supplier_name',
    },
    {
      title: '工艺',
      dataIndex: 'process_info',
      render: info => {
        let str = '';
        if (info) {
          const data = JSON.parse(info) || [];
          const list = data.map(item => item.type);
          str = list.join('+');
        }
        return str;
      },
    },
    // {
    //   title: '规模',
    //   dataIndex: 'process_info',
    //   render: info => {
    //     let str = '';
    //     if (info) {
    //       const data = JSON.parse(info) || [];
    //       console.log('-----------------', data);
    //       const list = data.map(item => item.scale);
    //       str = list.join('+');
    //     }
    //     return str;
    //   },
    // },

    {
      title: '项目种类',
      dataIndex: 'TypeInfo',
      render: TypeInfo => (TypeInfo ? `${TypeInfo.name}(${TypeInfo.code})` : '-'),
    },
    {
      title: '项目阶段',
      dataIndex: 'project_status',
      render: project_status => STATUS.find(item => item.value == project_status)?.label || '-',
    },
    {
      title: '现阶段状态',
      dataIndex: 'status',
      render: status => SUB_STATUS.find(item => item.value == status)?.label || '-',
    },
    {
      title: '现阶段状态时间（天）',
      dataIndex: 'current_status_start ',
      align: 'center',
      render: time => {
        const date = moment(new Date());
        const daysDiff = date.diff(time, 'days');
        return daysDiff;
      },
    },
    {
      title: '节点',
      dataIndex: 'NodeInfo',
      render: (nodeInfo, item) => {
        let statusDom;
        switch (item.audit_status) {
          case 0:
            statusDom = '待提交';
            break;
          case 1:
            statusDom = <span style={{ color: '#1890ff' }}>审核中</span>;
            break;
          case 2:
            statusDom = (
              <Popover content={`拒绝原因: ${item.audit_comment}`}>
                <span style={{ color: '#f5222d' }}>审核拒绝</span>
              </Popover>
            );
            break;
          case 3:
            statusDom = <span style={{ color: '#a0d911' }}>审核通过</span>;
            break;
        }
        return (
          <>
            {nodeInfo.node}({statusDom})
          </>
        );
      },
    },
    {
      title: '售前项目经理',
      dataIndex: 'AuthorUser',
      render: AuthorUser => (AuthorUser ? AuthorUser.CName : '-'),
    },
    {
      title: '创建时间',
      dataIndex: 'c_time',
      render: c_time => moment(c_time).format('YYYY.MM.DD'),
    },
    {
      title: '执行经理',
      dataIndex: 'Leader',
      render: Leader => (Leader ? Leader.CName : '-'),
    },
    {
      title: '操作',
      render: record => renderEditBtns2(record),
    },
  ];

  const renderEditBtns = record => {
    return (
      <>
        <a
          onClick={() => {
            setIsEdit(false);
            setCurrentItem(record);
            setDetailVisible(true);
          }}
        >
          项目详情
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            setIsEdit(true);
            setCurrentItem(record);
            setDetailVisible(true);
          }}
        >
          项目编辑
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            setCurrentItem(record);
            setRecordVisible(true);
          }}
        >
          项目日志
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            setCurrentItem(record);
            dispatch({
              type: 'approval/queryBudget',
              payload: {
                project_id: record?.id,
              },
              callback: () => {
                setBudgetVisible(true);
              },
            });
          }}
        >
          设置人日预算
        </a>
      </>
    );
  };

  const handleSearch = () => {
    const { projectName, projectCode, projectStatus } = form.getFieldsValue();
    let params = {};
    params.project_name = projectName;
    params.project_code = projectCode?.toUpperCase();
    params.project_status = projectStatus;
    params.currentPage = 1;

    dispatch({
      type: 'approval/queryApproval',
      payload: params,
    });
  };

  const checkSelf = e => {
    let checked = e.target.checked;
    setCurrentItem({});
    setSelfItems(checked);
    dispatch({
      type: 'approval/queryApproval',
      payload: {
        filter_type: Number(checked),
        currentPage: 1,
      },
    });
  };

  const renderSearch = () => {
    return (
      <Form
        form={form}
        layout="inline"
        initialValues={{ projectName: null, projectCode: null, projectStatus: null }}
      >
        <Form.Item label="项目名称" name="projectName">
          <Input style={{ width: 200 }} />
        </Form.Item>
        <Form.Item label="项目编号" name="projectCode">
          <Input style={{ width: 200 }} />
        </Form.Item>
        <Form.Item label="项目阶段" name="projectStatus">
          <Select
            showSearch
            style={{ width: 160 }}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            <Option value={null}>全部</Option>
            {STATUS.map(item => (
              <Option key={item.value}>{item.label}</Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="现阶段状态" name="projectStatus">
          <Select
            showSearch
            style={{ width: 160 }}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            <Option value={null}>全部</Option>
            {SUB_STATUS.map(item => (
              <Option key={item.value}>{item.label}</Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
    );
  };

  const onOk = values => {
    if (values.id) {
      dispatch({
        type: 'approval/updateApproval',
        payload: values,
        callback: () => setAddVisible(false),
      });
    } else {
      dispatch({
        type: 'approval/createApproval',
        payload: values,
        callback: () => setAddVisible(false),
      });
    }
    // 刷新table
    queryList({ current: 1 });
  };

  const onDelete = item => {
    Modal.confirm({
      title: '删除',
      content: '是否确认删除该项目',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'approval/deleteApproval',
          payload: item,
        });
      },
    });
  };

  const onSubmitAuth = item => {
    Modal.confirm({
      title: '提交审核',
      content: '是否确认提交审核',
      okText: '提审',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'approval/submitAudit',
          payload: {
            id: item.id,
            flow_id: item.flow_id,
            node_id: item.node_id,
          },
        });
      },
    });
  };

  const queryList = page => {
    dispatch({
      type: 'approval/queryApproval',
      payload: {
        currentPage: page.current,
      },
    });
  };

  const renderEditBtns2 = record => {
    let dividerPush = (item, list) => {
      if (list.length === 0) list.push(item);
      else {
        list.push(<Divider type="vertical" />);
        list.push(item);
      }
    };
    let detailBtn = (
      <a
        onClick={() => {
          setCurrentItem(record);
          setDetailVisible(true);
          setIsEdit(false);
        }}
      >
        项目详情
      </a>
    );
    // let memberBtn = (
    //   <a
    //     onClick={() => {
    //       setCurrentItem(record);
    //       setMemberVisible(true);
    //     }}
    //   >
    //     成员管理
    //   </a>
    // );
    // let executionBtn = (
    //   <a
    //     onClick={() => {
    //       setCurrentItem(record);
    //       setExecutionVisible(true);
    //     }}
    //   >
    //     转执行
    //   </a>
    // );
    let editBtn = (
      <>
        <a
          onClick={() => {
            setCurrentItem(record);
            setAddVisible(true);
            setIsEdit(true);
          }}
        >
          编辑
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            onDelete(record);
          }}
        >
          删除
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            onSubmitAuth(record);
          }}
        >
          提交审核
        </a>
      </>
    );
    let projectEditBtn = (
      <a
        onClick={() => {
          setIsEdit(true);
          setCurrentItem(record);
          setDetailVisible(true);
        }}
      >
        项目编辑
      </a>
    );
    let statusBtn = (
      <>
        <a
          onClick={() => {
            setCurrentItem(record);
            dispatch({
              type: 'approval/queryBudget',
              payload: {
                project_id: record?.id,
              },
              callback: () => {
                setBudgetVisible(true);
              },
            });
          }}
        >
          设置人日预算
        </a>
        {/* <Divider type="vertical" />
        <a
          onClick={() => {
            setCurrentItem(record);
            setQualityOperateVisible(true);
            setQualityOperate(0);
          }}
        >
          转质保
        </a>
        <Divider type="vertical" />
        <a
          onClick={() => {
            setCurrentItem(record);
            setQualityOperateVisible(true);
            setQualityOperate(1);
          }}
        >
          转运营
        </a> */}
      </>
    );
    let { audit_status, project_status, type_id } = record;
    //权限审核
    let getEditStatus = () => {
      if (currentUser.IsSuper) return true;
      switch (audit_status) {
        case 0:
          return currentUser.ID == record.author;
        case 1:
          return false;
        case 2:
          if (project_status == 0) return currentUser.ID == record.author;
          if (project_status == 1) return currentUser.ID == record.LeaderId;
          return false;
        case 3:
          switch (project_status) {
            case 0:
              return currentUser.ID == record.author;
            case 1:
              return currentUser.ID == record.LeaderId;
            case 2:
              return currentUser.ID == record.LeaderId || currentUser.ID == record.opt_manager_id;
            case 3:
              return currentUser.ID == record.LeaderId || currentUser.ID == record.wty_manager_id;
          }
          return false;
      }
    };
    let toReturn = [];
    const canEdit = getEditStatus();
    dividerPush(detailBtn, toReturn);
    switch (audit_status) {
      //未提交
      case 0:
        canEdit && dividerPush(editBtn, toReturn);
        break;
      //审核中
      case 1:
        break;
      //审核拒绝
      case 2:
        if (project_status == 0 && canEdit) dividerPush(editBtn, toReturn);
        else if (project_status == 1 && canEdit) {
          // dividerPush(memberBtn, toReturn);
          dividerPush(statusBtn, toReturn);
        }
        break;
      //审核通过
      case 3:
        canEdit && dividerPush(projectEditBtn, toReturn);
        switch (project_status) {
          //售前
          case 0:
            if (canEdit) {
              // dividerPush(memberBtn, toReturn);
              // dividerPush(executionBtn, toReturn);
            }
            break;
          //转执行
          case 1:
            if (canEdit) {
              // dividerPush(memberBtn, toReturn);
              dividerPush(statusBtn, toReturn);
            }
            break;
          //转运营
          case 2:
            // canEdit && dividerPush(memberBtn, toReturn);
            break;
          //转质保
          case 3:
            // canEdit && dividerPush(memberBtn, toReturn);
            break;
        }
        break;
    }
    // let modifyManager = (
    //   <a
    //     onClick={() => {
    //       setCurrentItem(record);
    //       setModifyManagerVisible(true);
    //     }}
    //   >
    //     修改项目经理
    //   </a>
    // );
    // if (
    //   (project_status === 0 || project_status === 1) &&
    //   (permission['func-01-point-pm-list-change'] || currentUser.IsSuper)
    // )
    //   dividerPush(modifyManager, toReturn);
    return toReturn;
  };

  useEffect(() => {
    dispatch({
      type: 'approval/queryFlow',
    });
    dispatch({
      type: 'approval/queryType',
    });
    dispatch({
      type: 'approval/queryIndustry',
    });
    dispatch({
      type: 'approval/queryApproval',
    });
    dispatch({
      type: 'approval/fetchDepV2',
    });
    dispatch({
      type: 'approval/querySupplierList',
      payload: { project_id: 1, is_super: true, page_size: 999 },
    });
  }, []);

  const handlerSaveFirm = async fieldsValue => {
    const res = await saveMfr({
      ...fieldsValue,
      project_id: 1,
      created_by: currentUser?.CName,
    });
    if (res.code == 200) {
      message.success('新增成功');
      setAddFirmVisible(false);
      dispatch({
        type: 'approval/querySupplierList',
        payload: { project_id: 1, is_super: true, page_size: 999 },
      });
    }
    console.log(res);
  };

  return (
    <div>
      {renderSearch()}
      <div className={styles.btns}>
        <Button
          onClick={() => {
            setCurrentItem({});
            setAddVisible(true);
          }}
        >
          新增项目
        </Button>
        <Checkbox checked={selfItems} onChange={checkSelf}>
          只看自己
        </Checkbox>
      </div>
      <Table
        loading={loading}
        rowKey="id"
        dataSource={data.list}
        pagination={data.pagination}
        columns={columns}
        onChange={queryList}
      />
      <ApprovalModal
        supplierList={supplierList}
        currentUser={currentUser}
        depUserTree={depUserTree}
        loading={loading}
        industryList={industryList}
        flowList={flowList}
        typeList={typeList}
        visible={addVisible}
        onOk={onOk}
        data={currentItem}
        total={data.pagination.total}
        onClose={() => setAddVisible(false)}
        onAddFirm={() => setAddFirmVisible(true)}
      />
      <DetailModal
        depUserTree={depUserTree}
        industryList={industryList}
        flowList={flowList}
        typeList={typeList}
        visible={detailVisible}
        data={currentItem}
        isEdit={isEdit}
        currentUser={currentUser}
        onClose={() => setDetailVisible(false)}
      />
      <ExecutionModal
        depUserTree={depUserTree}
        loading={loading}
        visible={executionVisible}
        currentItem={currentItem}
        onOk={() => setExecutionVisible(false)}
        onClose={() => setExecutionVisible(false)}
      />
      <QualityOperateModal
        depUserTree={depUserTree}
        loading={loading}
        visible={qualityOperateVisible}
        currentItem={currentItem}
        onOk={() => setQualityOperateVisible(false)}
        onClose={() => setQualityOperateVisible(false)}
        qualityOperate={qualityOperate}
      />
      <BudgetModal
        visible={budgetVisible}
        loading={loading}
        currentItem={currentItem}
        onCancel={() => setBudgetVisible(false)}
        onOk={() => setBudgetVisible(false)}
        budget={budget}
      />
      <ModifyManagerModal
        depUserTree={depUserTree}
        loading={loading}
        visible={modifyManagerVisible}
        onClose={() => setModifyManagerVisible(false)}
        currentItem={currentItem}
        dataSource={member}
        onOk={() => setModifyManagerVisible(false)}
      />
      <FirmModal
        visible={addFirmVisible}
        onCancel={() => setAddFirmVisible(false)}
        onOk={handlerSaveFirm}
      />
      <ProjectRecordModal
        depUserTree={depUserTree}
        currentItem={currentItem}
        visible={recordVisible}
        onClose={() => setRecordVisible(false)}
      />
    </div>
  );
}

export default connect(({ approval, user, loading }) => ({
  data: approval.list,
  typeList: approval.typeList,
  flowList: approval.flowList,
  industryList: approval.industryList,
  currentUser: user.currentUser,
  permission: user.currentUser.Permission,
  loading: loading.models.approval,
  depUserTree: approval.depUserTree,
  member: approval.member,
  budget: approval.budget,
  supplierList: approval.supplierList,
}))(List);