123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- import React, { useEffect, useState, useRef, useMemo, memo } from 'react';
- import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button } from 'antd';
- import Flow from '@/components/Flow/index';
- import { connect } from 'dva';
- import { GetTokenFromUrl, getToken } from '@/utils/utils';
- import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';
- import { CheckOutlined } from '@ant-design/icons';
- import { queryRecordSheet, queryVserionByNode } from '@/services/boom';
- import { async } from '@antv/x6/lib/registry/marker/async';
- import VersionModal from './VersionModal';
- const { Step } = Steps;
- const { TextArea } = Input;
- const localData = JSON.parse(localStorage.ggDetaiData || '{}');
- const PAGE_SIZE = 8;
- // 提交
- function FlowModal(props) {
- const {
- visible,
- version,
- onClose,
- onChangeVersion,
- form,
- loading,
- flowDetail,
- dispatch,
- isOut,
- onCommit,
- } = props;
- const [data, setData] = useState([]);
- const [nodeLoading, setNodeLoading] = useState(false);
- const [pageSize, setPageSize] = useState(PAGE_SIZE);
- const [stepsData, setStepsData] = useState([]);
- const [versionVisible, setVersionVisible] = useState(false);
- let token = getToken();
- const graphData = useMemo(() => {
- if (!flowDetail) return;
- let nodes = flowDetail.nodes?.map(item => ({
- ...item,
- isCheck: item.Id == version.template_node_id,
- }));
- return {
- nodes,
- edges: flowDetail.edges,
- };
- }, [flowDetail, version.template_node_id]);
- useEffect(() => {
- if (!visible) updateSteps([]);
- }, [visible, version]);
- useEffect(() => {
- if (stepsData.length <= 0) {
- setPageSize(PAGE_SIZE);
- } else {
- setPageSize(PAGE_SIZE - stepsData.length);
- }
- }, [stepsData]);
- const handleSelectNode = async args => {
- let res;
- const id = args.nodeId || args.nodeIds[0];
- if (!id) return;
- let node = graphData.nodes.find(item => item.id == id);
- setNodeLoading(true);
- try {
- res = await queryVserionByNode({ template_node_id: node.Id });
- let data = [];
- if (!res.data.excel_version_tree) setData([]);
- res.data.excel_version_tree?.map(arr => {
- if (res.data.flow_id) {
- data = [...data, { ...arr, flow_id: res.data.flow_id }];
- } else {
- data = [...data, arr];
- }
- });
- data.sort((a, b) => a.id - b.id);
- data.forEach((item, id) => {
- //解决key报错问题
- data[id].key = `${id}-${item.name}`;
- item.isParent = true;
- });
- console.log(data);
- setData(data);
- } catch (error) {
- console.log(error);
- }
- setNodeLoading(false);
- updateSteps([]);
- };
- const updateSteps = (data, curNodeId) => {
- let newData = [];
- let set = new Set();
- data.forEach(item => set.add(item.template_node_id));
- let list = [...set];
- if (set.has(curNodeId)) {
- set.delete(curNodeId);
- list = [curNodeId, ...set];
- }
- let dataList = list.map(template_node_id => {
- let itemDataList = data.filter(item => item.template_node_id == template_node_id);
- let curid = 3;
- let status = 'process';
- itemDataList.forEach(item => {
- if (item.audit_status != 3 && item.node_id <= curid) curid = item.node_id - 1;
- if (item.audit_status == 2) status = 'error';
- });
- let curNode = flowDetail.nodes.find(item => item.Id == itemDataList[0].template_node_id);
- let obj = {
- status,
- current: curid,
- list: itemDataList[0].FlowInfo.FlowNodes,
- name: curNode?.label || itemDataList[0].FlowInfo.name,
- };
- itemDataList.forEach((itemData, idx) => {
- if (idx >= obj.list.length) return;
- obj.list[idx].auditor = itemData.AuthorInfo.CName;
- });
- return obj;
- });
- setStepsData(dataList);
- };
- const handleChangeClick = item => {
- let type = item.flow_id ? 'detail/queryAuditRecord' : 'detail/queryAuditExcel';
- dispatch({
- type,
- payload: {
- excel_id: item.id,
- pageSize: 100,
- },
- callback: res => {
- updateSteps(res, item.template_node_id);
- },
- });
- };
- const columns = useMemo(() => {
- return [
- {
- title: '名称',
- // width: '33%',
- render: item => (
- <span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
- {item.id == version.id && <CheckOutlined style={{ marginRight: 10 }} />}
- {item.version_no && !item.isParent
- ? `${item.version_name}.${item.version_no}`
- : item.version_name}
- </span>
- ),
- },
- {
- title: '状态',
- width: '30%',
- render: item => {
- let style = { color: getColor(item) };
- let txt = '';
- switch (item.audit_status) {
- case 0:
- txt = '未提交';
- break;
- case 1:
- txt = '待审批';
- break;
- case 2:
- txt = '已拒绝';
- break;
- case 3:
- txt = '已通过';
- break;
- case 4:
- txt = '已提交';
- break;
- }
- if (item.status == 1) txt = '已失效';
- return item.audit_status != 0 ? (
- <Button onClick={() => handleChangeClick(item)}>{txt}</Button>
- ) : (
- <span style={style}>{txt}</span>
- );
- },
- },
- {
- title: '操作',
- width: '20%',
- render: item =>
- item.id != version.id && (
- <a
- onClick={() => {
- onChangeVersion(item);
- onClose();
- }}
- >
- 加载
- </a>
- ),
- },
- ];
- }, [version]);
- const onChange = () => {
- updateSteps([]);
- };
- return (
- <>
- <Modal
- confirmLoading={loading}
- destroyOnClose
- title="流程图"
- visible={visible}
- onCancel={onClose}
- footer={false}
- width="98%"
- >
- <Row gutter={8}>
- <Col span={16}>
- <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
- </Col>
- <Col span={8}>
- {isOut && data.length == 1 && !data[0].children && (
- <Button
- type="primary"
- style={{ float: 'right', marginBottom: '10px' }}
- onClick={() => setVersionVisible(true)}
- >
- 新建清单
- </Button>
- )}
- <div style={{ width: '100%' }}>
- <Table
- style={{ maxHeight: '90%' }}
- columns={columns}
- dataSource={data}
- loading={nodeLoading}
- bordered={false}
- pagination={{ pageSize: 8, onChange }}
- scroll={{ y: 65 * pageSize }}
- />
- </div>
- {stepsData.map((item, idx) => (
- <div key={`${item.name}_${idx}`} style={{ marginBottom: '20px' }}>
- <div style={{ marginBottom: '4px' }}>{item.name}</div>
- <Steps size="small" current={item.current} status={item.status}>
- {item.list.map(node => (
- <Step
- key={`${node.id}_${node.node}`}
- title={node.node}
- description={`审批人:${node.auditor || '-'}`}
- />
- ))}
- </Steps>
- </div>
- ))}
- </Col>
- </Row>
- </Modal>
- <VersionModal
- // loading={getLoading()}
- visible={versionVisible}
- onClose={() => setVersionVisible(false)}
- onOk={values => {
- onCommit?.(values);
- setVersionVisible(false);
- }}
- />
- </>
- );
- }
- const getColor = item => {
- let color = '';
- switch (item.audit_status) {
- case 2:
- // 审批拒绝
- color = '#f5222d';
- break;
- case 3:
- // 审批成功
- color = '#7cb305';
- break;
- case 4:
- // 历史清单
- color = '#9b9b9b';
- break;
- default:
- break;
- }
- return color;
- };
- // export default connect(({ xflow, detail }) => ({
- // flowDetail: xflow.flowDetail,
- // }))(FlowModal);
- export default FlowModal;
|