|
@@ -1,15 +1,16 @@
|
|
import React, { useEffect, useState, useRef, useMemo, memo } from 'react';
|
|
import React, { useEffect, useState, useRef, useMemo, memo } from 'react';
|
|
-import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button, Popover } from 'antd';
|
|
|
|
|
|
+import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button, Popover, Cascader, AutoComplete } from 'antd';
|
|
import Flow from '@/components/Flow/index';
|
|
import Flow from '@/components/Flow/index';
|
|
import { connect } from 'dva';
|
|
import { connect } from 'dva';
|
|
import { GetTokenFromUrl, getToken } from '@/utils/utils';
|
|
import { GetTokenFromUrl, getToken } from '@/utils/utils';
|
|
import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';
|
|
import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';
|
|
import { CheckOutlined } from '@ant-design/icons';
|
|
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 { async } from '@antv/x6/lib/registry/marker/async';
|
|
import VersionModal from './VersionModal';
|
|
import VersionModal from './VersionModal';
|
|
import AuditFlow from './AuditFlow';
|
|
import AuditFlow from './AuditFlow';
|
|
|
|
|
|
|
|
+const { Option }=Select
|
|
const { Step } = Steps;
|
|
const { Step } = Steps;
|
|
|
|
|
|
const { TextArea } = Input;
|
|
const { TextArea } = Input;
|
|
@@ -17,12 +18,19 @@ const localData = JSON.parse(localStorage.ggDetaiData || '{}');
|
|
const PAGE_SIZE = 8;
|
|
const PAGE_SIZE = 8;
|
|
|
|
|
|
// 提交
|
|
// 提交
|
|
-function FlowModal(props) {
|
|
|
|
|
|
+function FlowModal (props) {
|
|
|
|
+ let token = getToken();
|
|
|
|
+ const SELECT_TYPE = {
|
|
|
|
+ NAME: '0',
|
|
|
|
+ TYPE: '1',
|
|
|
|
+ CREATOR: '2',
|
|
|
|
+ }
|
|
const {
|
|
const {
|
|
visible,
|
|
visible,
|
|
version,
|
|
version,
|
|
onClose,
|
|
onClose,
|
|
onChangeVersion,
|
|
onChangeVersion,
|
|
|
|
+ onDelVersion,
|
|
form,
|
|
form,
|
|
loading,
|
|
loading,
|
|
flowDetail,
|
|
flowDetail,
|
|
@@ -30,13 +38,17 @@ function FlowModal(props) {
|
|
isOut,
|
|
isOut,
|
|
onCommit,
|
|
onCommit,
|
|
currentUser,
|
|
currentUser,
|
|
|
|
+ typeOptions,
|
|
|
|
+ userList
|
|
} = props;
|
|
} = props;
|
|
const [data, setData] = useState([]);
|
|
const [data, setData] = useState([]);
|
|
|
|
+ const [showData, setShowData] = useState([])
|
|
const [nodeLoading, setNodeLoading] = useState(false);
|
|
const [nodeLoading, setNodeLoading] = useState(false);
|
|
const [pageSize, setPageSize] = useState(PAGE_SIZE);
|
|
const [pageSize, setPageSize] = useState(PAGE_SIZE);
|
|
const [stepsData, setStepsData] = useState([]);
|
|
const [stepsData, setStepsData] = useState([]);
|
|
const [versionVisible, setVersionVisible] = useState(false);
|
|
const [versionVisible, setVersionVisible] = useState(false);
|
|
- let token = getToken();
|
|
|
|
|
|
+ const [selectType, setSelectType] = useState(SELECT_TYPE.NAME)
|
|
|
|
+ const [inputValue, setInputValue] = useState('')
|
|
|
|
|
|
const graphData = useMemo(() => {
|
|
const graphData = useMemo(() => {
|
|
if (!flowDetail) return;
|
|
if (!flowDetail) return;
|
|
@@ -127,7 +139,6 @@ function FlowModal(props) {
|
|
// });
|
|
// });
|
|
return obj;
|
|
return obj;
|
|
});
|
|
});
|
|
- console.log(dataList);
|
|
|
|
setStepsData(dataList);
|
|
setStepsData(dataList);
|
|
};
|
|
};
|
|
|
|
|
|
@@ -191,7 +202,41 @@ function FlowModal(props) {
|
|
return [
|
|
return [
|
|
{
|
|
{
|
|
title: '名称',
|
|
title: '名称',
|
|
- // width: '33%',
|
|
|
|
|
|
+ width: '45%',
|
|
|
|
+ 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 =>(
|
|
|
|
+ <span>{userList.find(cur => cur.ID == item.author)?.CName || '-'}</span>
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '分类',
|
|
|
|
+ width:'25%',
|
|
|
|
+ render: item => (
|
|
|
|
+ <span>
|
|
|
|
+ {typeOptions.find(cur=>cur.id == item.classify_id)?.name}
|
|
|
|
+ </span>
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ }, [version]);
|
|
|
|
+
|
|
|
|
+ const childColumns = useMemo(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ title: '名称',
|
|
|
|
+ width: '50%',
|
|
render: item => (
|
|
render: item => (
|
|
<span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
|
|
<span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
|
|
{item.id == version.id && !item.isParent && (
|
|
{item.id == version.id && !item.isParent && (
|
|
@@ -205,7 +250,6 @@ function FlowModal(props) {
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '状态',
|
|
title: '状态',
|
|
- width: '30%',
|
|
|
|
render: item => {
|
|
render: item => {
|
|
if (!item.flow_id && item.isParent) return;
|
|
if (!item.flow_id && item.isParent) return;
|
|
let style = { color: getColor(item) };
|
|
let style = { color: getColor(item) };
|
|
@@ -237,7 +281,7 @@ function FlowModal(props) {
|
|
dom = txt
|
|
dom = txt
|
|
}
|
|
}
|
|
return item.audit_status != 0 ? (
|
|
return item.audit_status != 0 ? (
|
|
- <Button onClick={() => handleChangeClick(item)}>{dom}</Button>
|
|
|
|
|
|
+ <Button onClick={() => onDelVersion(item)}>{dom}</Button>
|
|
) : (
|
|
) : (
|
|
<span style={style}>{dom}</span>
|
|
<span style={style}>{dom}</span>
|
|
);
|
|
);
|
|
@@ -245,28 +289,61 @@ function FlowModal(props) {
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '操作',
|
|
title: '操作',
|
|
- width: '20%',
|
|
|
|
|
|
+ width: '30%',
|
|
render: item =>
|
|
render: item =>
|
|
(item.flow_id || !item.isParent) &&
|
|
(item.flow_id || !item.isParent) &&
|
|
item.id != version.id && (
|
|
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]);
|
|
}, [version]);
|
|
|
|
|
|
- const onChange = () => {
|
|
|
|
|
|
+ const onChange = (value) => {
|
|
updateSteps([]);
|
|
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 (
|
|
return (
|
|
<>
|
|
<>
|
|
<Modal
|
|
<Modal
|
|
@@ -279,10 +356,10 @@ function FlowModal(props) {
|
|
width="98%"
|
|
width="98%"
|
|
>
|
|
>
|
|
<Row gutter={8}>
|
|
<Row gutter={8}>
|
|
- <Col span={16}>
|
|
|
|
|
|
+ <Col span={14}>
|
|
<Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
<Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
|
|
</Col>
|
|
</Col>
|
|
- <Col span={8}>
|
|
|
|
|
|
+ <Col span={10}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div style={{ fontSize: '16px' }}>清单列表</div>
|
|
<div style={{ fontSize: '16px' }}>清单列表</div>
|
|
{isOut && (
|
|
{isOut && (
|
|
@@ -295,16 +372,44 @@ function FlowModal(props) {
|
|
</Button>
|
|
</Button>
|
|
)}
|
|
)}
|
|
</div>
|
|
</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
|
|
<Table
|
|
- style={{ maxHeight: '90%' }}
|
|
|
|
|
|
+ style={{ maxHeight: '80%' }}
|
|
columns={columns}
|
|
columns={columns}
|
|
- dataSource={data}
|
|
|
|
|
|
+ dataSource={showData} //data
|
|
loading={nodeLoading}
|
|
loading={nodeLoading}
|
|
bordered={false}
|
|
bordered={false}
|
|
- pagination={{ pageSize: 8, onChange }}
|
|
|
|
|
|
+ pagination={{ position: ['none', 'none'],pageSize: 999, onChange }}
|
|
scroll={{ y: 65 * pageSize }}
|
|
scroll={{ y: 65 * pageSize }}
|
|
|
|
+ childrenColumnName='none'
|
|
|
|
+ expandable={{
|
|
|
|
+ expandedRowRender: (record) => (
|
|
|
|
+ <Table
|
|
|
|
+ columns={childColumns}
|
|
|
|
+ dataSource={record.children}
|
|
|
|
+ pagination={{ position: ['none', 'none'] }}
|
|
|
|
+ />
|
|
|
|
+ ),
|
|
|
|
+ rowExpandable: (record) => record.children?.length > 0,
|
|
|
|
+ }}
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
{stepsData.map((item, idx) => (
|
|
{stepsData.map((item, idx) => (
|
|
@@ -325,6 +430,7 @@ function FlowModal(props) {
|
|
</Row>
|
|
</Row>
|
|
</Modal>
|
|
</Modal>
|
|
<VersionModal
|
|
<VersionModal
|
|
|
|
+ typeOptions={typeOptions}
|
|
visible={versionVisible}
|
|
visible={versionVisible}
|
|
onClose={() => setVersionVisible(false)}
|
|
onClose={() => setVersionVisible(false)}
|
|
onOk={values => {
|
|
onOk={values => {
|
|
@@ -361,5 +467,6 @@ const getColor = item => {
|
|
export default connect(({ loading, user }) => ({
|
|
export default connect(({ loading, user }) => ({
|
|
loading,
|
|
loading,
|
|
currentUser: user.currentUser,
|
|
currentUser: user.currentUser,
|
|
|
|
+ userList: user.list,
|
|
}))(FlowModal);
|
|
}))(FlowModal);
|
|
// export default FlowModal;
|
|
// export default FlowModal;
|