|  | @@ -12,17 +12,25 @@ import {
 | 
	
		
			
				|  |  |    Space,
 | 
	
		
			
				|  |  |    Button,
 | 
	
		
			
				|  |  |    Popover,
 | 
	
		
			
				|  |  | +  Cascader,
 | 
	
		
			
				|  |  | +  AutoComplete,
 | 
	
		
			
				|  |  |  } 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 { queryDingInstanceDetail, queryRecordSheet, queryVserionByNode } from '@/services/boom';
 | 
	
		
			
				|  |  | +import {
 | 
	
		
			
				|  |  | +  queryDelPurchaseExcel,
 | 
	
		
			
				|  |  | +  queryDingInstanceDetail,
 | 
	
		
			
				|  |  | +  queryRecordSheet,
 | 
	
		
			
				|  |  | +  queryVserionByNode,
 | 
	
		
			
				|  |  | +} from '@/services/boom';
 | 
	
		
			
				|  |  |  import { async } from '@antv/x6/lib/registry/marker/async';
 | 
	
		
			
				|  |  |  import VersionModal from './VersionModal';
 | 
	
		
			
				|  |  |  import AuditFlow from './AuditFlow';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +const { Option } = Select;
 | 
	
		
			
				|  |  |  const { Step } = Steps;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const { TextArea } = Input;
 | 
	
	
		
			
				|  | @@ -31,11 +39,18 @@ const PAGE_SIZE = 8;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  // 提交
 | 
	
		
			
				|  |  |  function FlowModal(props) {
 | 
	
		
			
				|  |  | +  let token = getToken();
 | 
	
		
			
				|  |  | +  const SELECT_TYPE = {
 | 
	
		
			
				|  |  | +    NAME: '0',
 | 
	
		
			
				|  |  | +    TYPE: '1',
 | 
	
		
			
				|  |  | +    CREATOR: '2',
 | 
	
		
			
				|  |  | +  };
 | 
	
		
			
				|  |  |    const {
 | 
	
		
			
				|  |  |      visible,
 | 
	
		
			
				|  |  |      version,
 | 
	
		
			
				|  |  |      onClose,
 | 
	
		
			
				|  |  |      onChangeVersion,
 | 
	
		
			
				|  |  | +    onDelVersion,
 | 
	
		
			
				|  |  |      form,
 | 
	
		
			
				|  |  |      loading,
 | 
	
		
			
				|  |  |      flowDetail,
 | 
	
	
		
			
				|  | @@ -44,13 +59,17 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |      onCommit,
 | 
	
		
			
				|  |  |      commitLoading,
 | 
	
		
			
				|  |  |      currentUser,
 | 
	
		
			
				|  |  | +    typeOptions,
 | 
	
		
			
				|  |  | +    userList,
 | 
	
		
			
				|  |  |    } = props;
 | 
	
		
			
				|  |  |    const [data, setData] = useState([]);
 | 
	
		
			
				|  |  | +  const [showData, setShowData] = 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 [selectType, setSelectType] = useState(SELECT_TYPE.NAME);
 | 
	
		
			
				|  |  | +  const [inputValue, setInputValue] = useState('');
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    const graphData = useMemo(() => {
 | 
	
		
			
				|  |  |      if (!flowDetail) return;
 | 
	
	
		
			
				|  | @@ -141,7 +160,6 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |        // });
 | 
	
		
			
				|  |  |        return obj;
 | 
	
		
			
				|  |  |      });
 | 
	
		
			
				|  |  | -    console.log(dataList);
 | 
	
		
			
				|  |  |      setStepsData(dataList);
 | 
	
		
			
				|  |  |    };
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -205,7 +223,7 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |      return [
 | 
	
		
			
				|  |  |        {
 | 
	
		
			
				|  |  |          title: '名称',
 | 
	
		
			
				|  |  | -        // width: '33%',
 | 
	
		
			
				|  |  | +        width: '25%',
 | 
	
		
			
				|  |  |          render: item => (
 | 
	
		
			
				|  |  |            <span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
 | 
	
		
			
				|  |  |              {item.id == version.id && !item.isParent && (
 | 
	
	
		
			
				|  | @@ -217,9 +235,31 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |            </span>
 | 
	
		
			
				|  |  |          ),
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        title: '创建人',
 | 
	
		
			
				|  |  | +        width: '15%',
 | 
	
		
			
				|  |  | +        render: item => {
 | 
	
		
			
				|  |  | +          return (
 | 
	
		
			
				|  |  | +            item.isParent && (
 | 
	
		
			
				|  |  | +              <span>{userList.find(cur => cur.ID == item.author)?.CName || '-'}</span>
 | 
	
		
			
				|  |  | +            )
 | 
	
		
			
				|  |  | +          );
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        title: '分类',
 | 
	
		
			
				|  |  | +        width: '15%',
 | 
	
		
			
				|  |  | +        render: item => {
 | 
	
		
			
				|  |  | +          return (
 | 
	
		
			
				|  |  | +            item.isParent && (
 | 
	
		
			
				|  |  | +              <span>{typeOptions.find(cur => cur.id == item.classify_id)?.name}</span>
 | 
	
		
			
				|  |  | +            )
 | 
	
		
			
				|  |  | +          );
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  |        {
 | 
	
		
			
				|  |  |          title: '状态',
 | 
	
		
			
				|  |  | -        width: '30%',
 | 
	
		
			
				|  |  | +        width: '15%',
 | 
	
		
			
				|  |  |          render: item => {
 | 
	
		
			
				|  |  |            if (!item.flow_id && item.isParent) return;
 | 
	
		
			
				|  |  |            let style = { color: getColor(item) };
 | 
	
	
		
			
				|  | @@ -255,7 +295,7 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |              dom = txt;
 | 
	
		
			
				|  |  |            }
 | 
	
		
			
				|  |  |            return item.audit_status != 0 ? (
 | 
	
		
			
				|  |  | -            <Button onClick={() => handleChangeClick(item)}>{dom}</Button>
 | 
	
		
			
				|  |  | +            <Button onClick={() => onDelVersion(item)}>{dom}</Button>
 | 
	
		
			
				|  |  |            ) : (
 | 
	
		
			
				|  |  |              <span style={style}>{dom}</span>
 | 
	
		
			
				|  |  |            );
 | 
	
	
		
			
				|  | @@ -267,24 +307,150 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |          render: item =>
 | 
	
		
			
				|  |  |            (item.flow_id || !item.isParent) &&
 | 
	
		
			
				|  |  |            item.id != version.id && (
 | 
	
		
			
				|  |  | -            <a
 | 
	
		
			
				|  |  | -              onClick={() => {
 | 
	
		
			
				|  |  | -                console.log(item);
 | 
	
		
			
				|  |  | -                onChangeVersion(item);
 | 
	
		
			
				|  |  | -                onClose();
 | 
	
		
			
				|  |  | -              }}
 | 
	
		
			
				|  |  | -            >
 | 
	
		
			
				|  |  | -              加载
 | 
	
		
			
				|  |  | -            </a>
 | 
	
		
			
				|  |  | +            <Space>
 | 
	
		
			
				|  |  | +              <a
 | 
	
		
			
				|  |  | +                onClick={() => {
 | 
	
		
			
				|  |  | +                  console.log(item);
 | 
	
		
			
				|  |  | +                  onChangeVersion(item);
 | 
	
		
			
				|  |  | +                  onClose();
 | 
	
		
			
				|  |  | +                }}
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                加载
 | 
	
		
			
				|  |  | +              </a>
 | 
	
		
			
				|  |  | +              {item.audit_status == 0 &&
 | 
	
		
			
				|  |  | +              item.author == currentUser.ID && ( //自己创建的&&未提交的清单自己可以删除
 | 
	
		
			
				|  |  | +                  <a
 | 
	
		
			
				|  |  | +                    onClick={() => {
 | 
	
		
			
				|  |  | +                      onDelVersion({ excel_id: item.id });
 | 
	
		
			
				|  |  | +                    }}
 | 
	
		
			
				|  |  | +                  >
 | 
	
		
			
				|  |  | +                    删除
 | 
	
		
			
				|  |  | +                  </a>
 | 
	
		
			
				|  |  | +                )}
 | 
	
		
			
				|  |  | +            </Space>
 | 
	
		
			
				|  |  |            ),
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  |      ];
 | 
	
		
			
				|  |  |    }, [version]);
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  const onChange = () => {
 | 
	
		
			
				|  |  | +  const childColumns = useMemo(() => {
 | 
	
		
			
				|  |  | +    return [
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        title: '名称',
 | 
	
		
			
				|  |  | +        width: '50%',
 | 
	
		
			
				|  |  | +        render: item => (
 | 
	
		
			
				|  |  | +          <span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
 | 
	
		
			
				|  |  | +            {item.id == version.id && !item.isParent && (
 | 
	
		
			
				|  |  | +              <CheckOutlined style={{ marginRight: 10 }} />
 | 
	
		
			
				|  |  | +            )}
 | 
	
		
			
				|  |  | +            {item.version_no && !item.children?.length
 | 
	
		
			
				|  |  | +              ? `${item.version_name}.${item.version_no}`
 | 
	
		
			
				|  |  | +              : item.version_name}
 | 
	
		
			
				|  |  | +          </span>
 | 
	
		
			
				|  |  | +        ),
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        title: '状态',
 | 
	
		
			
				|  |  | +        render: item => {
 | 
	
		
			
				|  |  | +          if (!item.flow_id && item.isParent) return;
 | 
	
		
			
				|  |  | +          let style = { color: getColor(item) };
 | 
	
		
			
				|  |  | +          let txt = '';
 | 
	
		
			
				|  |  | +          let dom = '';
 | 
	
		
			
				|  |  | +          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 = '已失效';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          // 显示拒绝原因
 | 
	
		
			
				|  |  | +          if (item.audit_comment) {
 | 
	
		
			
				|  |  | +            dom = (
 | 
	
		
			
				|  |  | +              <Popover content={item.audit_comment} title="原因">
 | 
	
		
			
				|  |  | +                {txt}
 | 
	
		
			
				|  |  | +              </Popover>
 | 
	
		
			
				|  |  | +            );
 | 
	
		
			
				|  |  | +          } else {
 | 
	
		
			
				|  |  | +            dom = txt;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          return item.audit_status != 0 ? (
 | 
	
		
			
				|  |  | +            <Button onClick={() => onDelVersion(item)}>{dom}</Button>
 | 
	
		
			
				|  |  | +          ) : (
 | 
	
		
			
				|  |  | +            <span style={style}>{dom}</span>
 | 
	
		
			
				|  |  | +          );
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      {
 | 
	
		
			
				|  |  | +        title: '操作',
 | 
	
		
			
				|  |  | +        width: '30%',
 | 
	
		
			
				|  |  | +        render: item =>
 | 
	
		
			
				|  |  | +          (item.flow_id || !item.isParent) &&
 | 
	
		
			
				|  |  | +          item.id != version.id && (
 | 
	
		
			
				|  |  | +            <Space>
 | 
	
		
			
				|  |  | +              <a
 | 
	
		
			
				|  |  | +                onClick={() => {
 | 
	
		
			
				|  |  | +                  console.log(item);
 | 
	
		
			
				|  |  | +                  onChangeVersion(item);
 | 
	
		
			
				|  |  | +                  onClose();
 | 
	
		
			
				|  |  | +                }}
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                加载
 | 
	
		
			
				|  |  | +              </a>
 | 
	
		
			
				|  |  | +              {item.audit_status == 0 &&
 | 
	
		
			
				|  |  | +              item.author == currentUser.ID && ( //自己创建的&&未提交的清单自己可以删除
 | 
	
		
			
				|  |  | +                  <a
 | 
	
		
			
				|  |  | +                    onClick={() => {
 | 
	
		
			
				|  |  | +                      onDelVersion({ excel_id: item.id });
 | 
	
		
			
				|  |  | +                    }}
 | 
	
		
			
				|  |  | +                  >
 | 
	
		
			
				|  |  | +                    删除
 | 
	
		
			
				|  |  | +                  </a>
 | 
	
		
			
				|  |  | +                )}
 | 
	
		
			
				|  |  | +            </Space>
 | 
	
		
			
				|  |  | +          ),
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    ];
 | 
	
		
			
				|  |  | +  }, [version]);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  const onChange = value => {
 | 
	
		
			
				|  |  |      updateSteps([]);
 | 
	
		
			
				|  |  |    };
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +  useEffect(() => {
 | 
	
		
			
				|  |  | +    if (!inputValue) {
 | 
	
		
			
				|  |  | +      setShowData(data);
 | 
	
		
			
				|  |  | +      return;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    let resultData = [...data];
 | 
	
		
			
				|  |  | +    switch (selectType) {
 | 
	
		
			
				|  |  | +      case SELECT_TYPE.NAME:
 | 
	
		
			
				|  |  | +        resultData = data.filter(item => item.version_name.includes(inputValue));
 | 
	
		
			
				|  |  | +        break;
 | 
	
		
			
				|  |  | +      case SELECT_TYPE.TYPE:
 | 
	
		
			
				|  |  | +        const classify = typeOptions.find(item => item.name.includes(inputValue));
 | 
	
		
			
				|  |  | +        if (classify) {
 | 
	
		
			
				|  |  | +          resultData = data.filter(item => item.classify_id == classify.id);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        break;
 | 
	
		
			
				|  |  | +      case SELECT_TYPE.CREATOR:
 | 
	
		
			
				|  |  | +        resultData = data.filter(item => item.AuthorInfo?.CName.includes(inputValue));
 | 
	
		
			
				|  |  | +        break;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    setShowData(resultData);
 | 
	
		
			
				|  |  | +  }, [inputValue, data]);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    return (
 | 
	
		
			
				|  |  |      <>
 | 
	
		
			
				|  |  |        <Modal
 | 
	
	
		
			
				|  | @@ -297,10 +463,10 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |          width="98%"
 | 
	
		
			
				|  |  |        >
 | 
	
		
			
				|  |  |          <Row gutter={8}>
 | 
	
		
			
				|  |  | -          <Col span={16}>
 | 
	
		
			
				|  |  | +          <Col span={14}>
 | 
	
		
			
				|  |  |              <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
 | 
	
		
			
				|  |  |            </Col>
 | 
	
		
			
				|  |  | -          <Col span={8}>
 | 
	
		
			
				|  |  | +          <Col span={10}>
 | 
	
		
			
				|  |  |              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
 | 
	
		
			
				|  |  |                <div style={{ fontSize: '16px' }}>清单列表</div>
 | 
	
		
			
				|  |  |                {isOut && (
 | 
	
	
		
			
				|  | @@ -314,15 +480,48 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |                )}
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -            <div style={{ width: '100%' }}>
 | 
	
		
			
				|  |  | +            <div style={{ display: 'flex' }}>
 | 
	
		
			
				|  |  | +              <Select
 | 
	
		
			
				|  |  | +                defaultValue={selectType}
 | 
	
		
			
				|  |  | +                style={{ width: '30%' }}
 | 
	
		
			
				|  |  | +                onChange={value => {
 | 
	
		
			
				|  |  | +                  setSelectType(value);
 | 
	
		
			
				|  |  | +                  setInputValue('');
 | 
	
		
			
				|  |  | +                }}
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +                <Option value={SELECT_TYPE.NAME}>名称:</Option>
 | 
	
		
			
				|  |  | +                <Option value={SELECT_TYPE.TYPE}>分类:</Option>
 | 
	
		
			
				|  |  | +                <Option value={SELECT_TYPE.CREATOR}>创建人:</Option>
 | 
	
		
			
				|  |  | +              </Select>
 | 
	
		
			
				|  |  | +              <Input
 | 
	
		
			
				|  |  | +                placeholder="请输入"
 | 
	
		
			
				|  |  | +                value={inputValue}
 | 
	
		
			
				|  |  | +                onChange={e => setInputValue(e.target.value)}
 | 
	
		
			
				|  |  | +              />
 | 
	
		
			
				|  |  | +              <Button type="primary" style={{ marginLeft: '10px' }}>
 | 
	
		
			
				|  |  | +                搜索
 | 
	
		
			
				|  |  | +              </Button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div style={{ width: '100%', marginTop: '10px' }}>
 | 
	
		
			
				|  |  |                <Table
 | 
	
		
			
				|  |  | -                style={{ maxHeight: '90%' }}
 | 
	
		
			
				|  |  | +                style={{ maxHeight: '80%' }}
 | 
	
		
			
				|  |  |                  columns={columns}
 | 
	
		
			
				|  |  | -                dataSource={data}
 | 
	
		
			
				|  |  | +                dataSource={showData} //data
 | 
	
		
			
				|  |  |                  loading={nodeLoading}
 | 
	
		
			
				|  |  |                  bordered={false}
 | 
	
		
			
				|  |  | -                pagination={{ pageSize: 8, onChange }}
 | 
	
		
			
				|  |  | +                pagination={{ position: ['none', 'none'], pageSize: 999, onChange }}
 | 
	
		
			
				|  |  |                  scroll={{ y: 65 * pageSize }}
 | 
	
		
			
				|  |  | +                // childrenColumnName="none"
 | 
	
		
			
				|  |  | +                // expandable={{
 | 
	
		
			
				|  |  | +                //   expandedRowRender: record => (
 | 
	
		
			
				|  |  | +                //     <Table
 | 
	
		
			
				|  |  | +                //       columns={columns}
 | 
	
		
			
				|  |  | +                //       dataSource={record.children}
 | 
	
		
			
				|  |  | +                //       pagination={{ position: ['none', 'none'] }}
 | 
	
		
			
				|  |  | +                //     />
 | 
	
		
			
				|  |  | +                //   ),
 | 
	
		
			
				|  |  | +                //   rowExpandable: record => record.children?.length > 0,
 | 
	
		
			
				|  |  | +                // }}
 | 
	
		
			
				|  |  |                />
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |              {stepsData.map((item, idx) => (
 | 
	
	
		
			
				|  | @@ -343,6 +542,7 @@ function FlowModal(props) {
 | 
	
		
			
				|  |  |          </Row>
 | 
	
		
			
				|  |  |        </Modal>
 | 
	
		
			
				|  |  |        <VersionModal
 | 
	
		
			
				|  |  | +        typeOptions={typeOptions}
 | 
	
		
			
				|  |  |          visible={versionVisible}
 | 
	
		
			
				|  |  |          onClose={() => setVersionVisible(false)}
 | 
	
		
			
				|  |  |          onOk={values => {
 | 
	
	
		
			
				|  | @@ -381,5 +581,6 @@ const getColor = item => {
 | 
	
		
			
				|  |  |  export default connect(({ loading, user }) => ({
 | 
	
		
			
				|  |  |    loading,
 | 
	
		
			
				|  |  |    currentUser: user.currentUser,
 | 
	
		
			
				|  |  | +  userList: user.list,
 | 
	
		
			
				|  |  |  }))(FlowModal);
 | 
	
		
			
				|  |  |  // export default FlowModal;
 |