广州市综治平台前端
liuwh
4 days ago fa5361c6776f01975737fb5630594a9c60924fc5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-07-14 11:29:36
 * @LastEditTime: 2022-07-15 10:44:27
 * @LastEditors: ldh
 * @Version: 1.0.0
 * @Description: 工作流程新建 or 修改
 */
import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button, Row, Col, Input, Select, Switch, Space, Typography, Radio, Checkbox } from 'antd';
import { FileTextOutlined, AimOutlined, BranchesOutlined, BankOutlined, AppstoreOutlined } from '@ant-design/icons';
import Page from '../../../components/Page';
import * as $$ from '../../../utils/utility';
import TableView from '../../../components/TableView';
 
const { TextArea } = Input;
 
const { Option } = Select;
 
const WorkflowManageEdit = () => {
    const navigate = useNavigate();
 
    const [searchParams] = useSearchParams();
 
    // 区别纠纷调解 or 司法确认
    const type = searchParams.get('type') || 'mediate';
 
    // 数据
    const [data, setData] = useState({});
 
    // 步骤columns
    const columns = [
        { title: '步骤顺序', dataIndex: 'num', render: (text, record, index) => index + 1 },
        { title: '步骤名称', dataIndex: 'xxx1' },
        { title: '步骤描述', dataIndex: 'xxx2' },
        {
            title: '处理时限',
            dataIndex: 'expireTime',
            render: (text, record, index) => {
                let obj = $$.getHours(text);
                return record.status === '1' ? (
                    <span className={obj.isNegativeNum ? 'tableView-dangerTime' : ''}>{!!text ? `${obj.hours}小时` : '-'}</span>
                ) : (
                    '-'
                );
            },
        },
        { title: '步骤页面名称', dataIndex: 'xxx3' },
        { title: '步骤页面编号', dataIndex: 'xxx4' },
        { title: '执行者', dataIndex: 'xxx5', render: (text) => <span className="public-tag public-tag-tagBlue2">未设置</span> },
    ];
 
    useEffect(() => {}, []);
 
    return (
        <Page
            pageHead={{
                title: '工作流详情',
                subtitle: '工作流步骤及规则详情',
                breadcrumbData: [{ title: '工作流管理', url: '/mediate/workflowManage' }, { title: '详情' }],
                handleReturn: () => navigate(-1),
            }}
        >
            <div className="workflowManage-edit">
                <div className="workflowManage-edit-detail">
                    <Row gutter={[16, 16]}>
                        <Col span={24}>
                            <h4>
                                <FileTextOutlined className="workflowManage-edit-titleIcon" />
                                <span>基础信息</span>
                            </h4>
                            <h5>流程名称</h5>
                            <div>{data.xxx1}</div>
                        </Col>
                        <Col span={24}>
                            <h5>流程类型</h5>
                            <div>{type === 'mediate' ? '纠纷调解' : '司法确认'}</div>
                        </Col>
                        {type === 'mediate' && (
                            <Col span={24}>
                                <h5>调解类型</h5>
                                <div>{data.mediTypeName}</div>
                            </Col>
                        )}
                        <Col span={24}>
                            <h5>流程描述</h5>
                            <pre>{data.xxx2}</pre>
                        </Col>
                        <Col span={24}>
                            <div className="workflowManage-edit-divider" />
                        </Col>
                        <Col span={24}>
                            <h4>
                                <AimOutlined className="workflowManage-edit-titleIcon" />
                                <span>适用范围</span>
                            </h4>
                            <h5>适用组织</h5>
                            <Space>
                                <div className="public-tag public-tag-tagBlue">白云区信访局</div>
                            </Space>
                        </Col>
                        {type === 'mediate' && (
                            <Col span={24}>
                                <h5>适用纠纷类型</h5>
                                <Space>
                                    <div className="public-tag public-tag-tagRed">白云区信访局</div>
                                </Space>
                            </Col>
                        )}
                        <Col span={24}>
                            <div className="workflowManage-edit-divider" />
                        </Col>
                        <Col span={24}>
                            <h4>
                                <BranchesOutlined className="workflowManage-edit-titleIcon" />
                                <span>流程步骤</span>
                            </h4>
                            <TableView columns={columns} dataSource={[{}]} />
                        </Col>
                    </Row>
                </div>
            </div>
        </Page>
    );
};
 
export default WorkflowManageEdit;