import React from 'react';
|
import { Link } from 'react-router-dom';
|
import { Card, Row, Col, Icon, Form, Input, Button, Select, Table, DatePicker, message,Breadcrumb,Upload,Modal, Layout } from 'antd';
|
import moment from 'moment';
|
import Fetch from '../fetch';
|
import UploadXML from '../component/upload/index';
|
import { deploymentDel } from '../fetch/api';
|
|
const FormItem = Form.Item;
|
const confirm = Modal.confirm;
|
|
class DeployManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
loading: true,
|
name:'',
|
tableData: [],
|
totalElements: 1,
|
pageSize:10,
|
page: 1
|
};
|
}
|
componentDidMount() {
|
this.loadData(1, this.state.pageSize);
|
}
|
render() {
|
const { name } = this.state;
|
const { getFieldDecorator } = this.props.form;
|
const formItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 10 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
|
};
|
const formItemLayout1 = {
|
labelCol: { xs: { span: 24 }, sm: { span: 8 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, },
|
};
|
const formMultiItemLayout = {
|
labelCol: { xs: { span: 24 }, sm: { span: 5 }, },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, },
|
};
|
return (
|
<Layout className="h-100 page-table">
|
<Row>
|
<Breadcrumb className="breadcrumb-style">
|
<Breadcrumb.Item>工作流管理</Breadcrumb.Item>
|
<Breadcrumb.Item>流程部署管理</Breadcrumb.Item>
|
</Breadcrumb>
|
</Row>
|
<Card style={{border:20, margin:20, padding:20}}>
|
<Form onSubmit={this.handleSubmit} className="searchForm" layout="inline">
|
<Row>
|
<Col span={7}>
|
<FormItem label="流程名称" {...formItemLayout1}>
|
{getFieldDecorator('name', {
|
rules: [{ required: false, whitespace: false }],
|
initialValue: ''
|
})(
|
<Input placeholder="请输入流程名称" />
|
)}
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem {...formItemLayout1}>
|
<span style={{float:'right'}}>
|
<Button className="search-btn" htmlType="submit" type="primary"><Icon type='search' />查询</Button>
|
<Button className="search-btn" onClick={this.reset} >重置</Button>
|
</span>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
<Row>
|
</Row>
|
<Row>
|
<Col span={7}>
|
<FormItem>
|
<UploadXML action={ "api/workflow/deploy"} ifSuccess={this.ifSuccess}/>
|
</FormItem>
|
</Col>
|
</Row>
|
<Row>
|
<Table
|
className="rowColor"
|
size="middle"
|
dataSource={this.state.tableData}
|
loading={{spinning: this.state.loading}}
|
columns={this.getColumns()}
|
pagination={{
|
pageSize: this.state.pageSize,
|
onChange: this.pageChange,
|
total: this.state.totalElements,
|
showSizeChanger:true,
|
onShowSizeChange:this.onShowSizeChange,
|
showTotal:(total, range) => `共${total}条记录 `,
|
itemRender: this.itemRender,
|
showQuickJumper: true,
|
defaultCurrent: 1,
|
current: this.state.page
|
}}
|
/>
|
</Row>
|
</Card>
|
</Layout>
|
)
|
}
|
|
itemRender = (current, type, originalElement) => {
|
if (type === 'prev') {
|
return <a>上一页 </a>;
|
} else if (type === 'next') {
|
return <a> 下一页</a>;
|
}
|
return originalElement;
|
}
|
ifSuccess = result => {
|
result&&this.loadData(1,this.state.pageSize)
|
}
|
getColumns = () => {
|
let obj = this;
|
return [
|
{ title: '流程KEY', className: "txt-c", dataIndex: '_key'},
|
{ title: '流程名称', className: "txt-c", dataIndex: 'name' },
|
{ title: '当前状态', className: "txt-c", dataIndex: 'status', render:(text,record) =>text?"运行":"挂起" },
|
{ title: '流程版本', className: "txt-c", dataIndex: 'version' },
|
{ title: '创建时间', className: "txt-c", dataIndex: 'createTime', key: 'createTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
|
{ title: '操作', className: "txt-c", key: 'operation', render: (text, record) => {
|
return <div>
|
<a onClick={()=>this.delete(record.deploymentId)}>删除</a>
|
<span> | </span>
|
<Link to={{ pathname: "/activitiManage/activitiImg", state: { id: record.id} }}>流程图</Link>
|
<span> | </span>
|
<Link to={{ pathname: "/activitiManage/activitiDetail", state: { deploymentId: record.id} }}>其他版本</Link>
|
</div>
|
}
|
}
|
]
|
}
|
|
delete = deploymentId => {
|
let _this= this
|
confirm({
|
title: <span style={{fontSize:19}}>警告</span>,
|
content: <span style={{fontSize:18}}>确定删除吗</span>,
|
onOk() {
|
deploymentDel(deploymentId).then( res => {
|
if(res.code == 0) {
|
message.success("删除成功");
|
_this.loadData(1,_this.state.pageSize)
|
}else{
|
message.error(res.msg);
|
}
|
})
|
},
|
onCancel() {},
|
});
|
}
|
reset = () =>{
|
this.props.form.setFieldsValue({
|
name:'',
|
});
|
this.loadData(1, this.state.pageSize)
|
}
|
handleSubmit = (e) => {
|
e.preventDefault();
|
this.loadData(1, this.state.pageSize);
|
}
|
onShowSizeChange = (current, pageSize) =>{
|
this.setState({pageSize, page: 1})
|
this.loadData(1, pageSize);
|
}
|
pageChange = (page, pageSize) => {
|
this.loadData(page, pageSize);
|
}
|
loadData = (page, pageSize) => {
|
let _this = this;
|
_this.props.form.validateFields((err, values) => {
|
if (err) return;
|
_this.setState({ loading: true });
|
let obj = {
|
key:values.key,
|
page: page,
|
pageSize: pageSize,
|
};
|
// let promise = Get("/workflow/definition/listProcessDefinitionByPage?number=" + obj.page + "&size=" + obj.pageSize + "&key=" + obj.key);
|
// promise.then(reson => {
|
// let tmpArr = [];
|
// reson.data.content.map(e => {
|
// let obj = {
|
// key: e.id,
|
// _key:e.key,
|
// id:e.id,
|
// version:e.version,
|
// status:e.status,
|
// name: e.name,
|
// deploymentId:e.deploymentId,
|
// }
|
// tmpArr.push(obj)
|
// })
|
|
// this.setState({
|
// tableData: tmpArr,
|
// totalElements: reson.data.totalElements,
|
// loading: false,
|
// });
|
// }).catch(err => {
|
// this.setState({ loading: false });
|
// message.error("数据加载失败，请稍后再试");
|
// console.log(err.toString());
|
// });
|
|
Fetch.getProcessDefinition({
|
...values,
|
page: page,
|
size: pageSize
|
})
|
.then(res => {
|
let tmpArr = [];
|
res.map(e => {
|
let obj = {
|
key: e.id,
|
_key:e.key,
|
id:e.id,
|
version:e.version,
|
status:e.status,
|
name: e.name,
|
deploymentId:e.deploymentId,
|
createTime: e.createTime
|
}
|
tmpArr.push(obj)
|
})
|
this.setState({
|
tableData: tmpArr,
|
loading: false,
|
page,
|
totalElements: res.totalElements,
|
});
|
});
|
|
});
|
}
|
}
|
const header={"content-type":"multipart/form-data"}
|
const DeployManageList = Form.create()(DeployManage);
|
export default DeployManageList;
|
