/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2021-03-21 17:37:58
|
* @LastEditTime: 2022-12-02 14:50:44
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 预约调解
|
*/
|
import React, { useEffect, useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Switch, Row, Col, Space, Select, DatePicker, Input, Button, Form } from 'antd';
|
import { ClockCircleOutlined, MailOutlined } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import MyTabs from '../../../components/MyTabs';
|
import TableView from '../../../components/TableView';
|
|
const { Option } = Select;
|
|
const { TextArea } = Input;
|
|
const { RangePicker } = DatePicker;
|
|
// 获取调解预约记录
|
function getOrderRecordApi(submitData) {
|
return $$.ax.request({ url: `caseInfo/pcWindowMeetInfos?caseId=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
|
// 添加预约
|
function addOrderRecordApi(submitData) {
|
return $$.ax.request({ url: `caseInfo/pcWindowInMeetInfo`, type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 删除预约记录
|
function delOrderRecordApi(submitData) {
|
return $$.ax.request({ url: `caseInfo/pcWindowReMeetInfo?meetInfoId=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
|
/**
|
* tabActive, // tab选中项
|
* onChangeTab, // tab选择
|
* getDisputeData, // 获取案件纠纷数据方法
|
*/
|
const OrderMediation = ({ caseId, tabActive, onChangeTab, getDisputeData }) => {
|
const [form] = Form.useForm();
|
|
// 预约form
|
const [formData, setFormData] = useState({});
|
|
// 预约记录
|
const [orderRecord, setOrderRecord] = useState({ data: [], tabs: [] });
|
|
// 当前预约记录信息
|
const [tabMsg, setTabMsg] = useState({});
|
|
// TODO:提醒功能暂无
|
const columns = [
|
{ title: '参与人', dataIndex: 'userName' },
|
{ title: '联系电话', dataIndex: 'userMobile' },
|
{ title: '反馈结果', dataIndex: 'fixStatusName' },
|
{ title: '理由说明', dataIndex: 'fixContent' },
|
// {
|
// title: '操作',
|
// dataIndex: 'action',
|
// width: 50,
|
// render: () => <Link>提醒</Link>,
|
// },
|
];
|
|
//
|
function handleChangeInput(key, value) {
|
if (Array.isArray(key)) {
|
formData[key[0]] = value[0];
|
formData[key[1]] = value[1];
|
} else {
|
formData[key] = value;
|
}
|
setFormData({ ...formData });
|
}
|
|
// 获取预约记录
|
async function getOrderRecord() {
|
global.setSpinning(true);
|
const res = await getOrderRecordApi(caseId);
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || [],
|
tabs = [];
|
data.forEach((x, t) => {
|
tabs.push({ key: t, label: `第${t + 1}预约` });
|
});
|
setOrderRecord({ data, tabs });
|
if (data.length === 0 && tabMsg.key === undefined) {
|
onChangeTab('2');
|
}
|
setTabMsg({ key: data.length - 1, ...(data[data.length - 1] || {}) });
|
}
|
}
|
|
// 删除预约记录
|
async function delOrderRecord(submitData) {
|
global.setSpinning(true);
|
const res = await delOrderRecordApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除记录成功' });
|
getOrderRecord();
|
}
|
}
|
|
// 新增预约
|
async function addOrderRecord(submitData) {
|
global.setSpinning(true);
|
const res = await addOrderRecordApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '预约成功' });
|
getDisputeData();
|
getOrderRecord();
|
onChangeTab('1');
|
}
|
}
|
|
useEffect(() => {
|
if (tabActive === '1') {
|
getOrderRecord();
|
} else {
|
form.resetFields();
|
form.setFieldsValue({ meetWay: $$.options.meetWay[0].value });
|
setFormData({ meetWay: $$.options.meetWay[0].value, meetWayName: $$.options.meetWay[0].label });
|
}
|
}, [form, tabActive]);
|
|
const template = {
|
'22_00021-3':
|
'【白云区矛盾纠纷多元化解平台】 XXX 您好，XXX 调解员调解员为您预约了线下现场+线上远程视频融合方式调解，预约调解时间为：XXXX 至 XXXX 期间，线下调解室为：XXXXXX，您也可以访问以下连接（https://cdn.xylink.com/as/150130/new/app-normal-release_330-11162_jiagu_sign.apk?r=1637890701580）下载平台远程视频app，使用手机号码登录后，输入视频会议号（XXXXXXXX）拨号进入云调解室进行视频调解，请您准时参与！',
|
'22_00021-2':
|
'【白云区矛盾纠纷多元化解平台】 XXX 您好，XXX 调解员调解员为您预约了远程视频调解，预约调解时间为：XXXX 至 XXXX 期间，您可以访问以下连接（https://cdn.xylink.com/as/150130/new/app-normal-release_330-11162_jiagu_sign.apk?r=1637890701580）下载平台远程视频app，使用手机号码登录后，输入视频会议号（XXXXXXXX）拨号进入云调解室进行视频调解，请您准时参与！',
|
'22_00021-1':
|
'【白云区矛盾纠纷多元化解平台】 XXX 您好，XXX 调解员调解员为您预约了线下现场调解，预约调解时间为：XXXX 至 XXXX 期间，线下调解室地点为：XXXXXX，您也可以访问以下连接（https://cdn.xylink.com/as/150130/new/app-normal-release_330-11162_jiagu_sign.apk?r=1637890701580）下载平台远程视频app，使用手机号码登录后，输入视频会议号（XXXXXXXX）拨号进入云调解室进行视频调解，请您准时参与！',
|
};
|
|
return (
|
<>
|
{tabActive === '1' && orderRecord.tabs.length !== 0 && (
|
<MyTabs
|
style={{ padding: '16px 24px 0' }}
|
tabs={orderRecord.tabs}
|
activeKey={tabMsg.key}
|
onChange={(index) => setTabMsg({ key: index, ...orderRecord.data[index] })}
|
/>
|
)}
|
<div className="mediationWindow-modal-main">
|
{tabActive === '1' ? (
|
orderRecord.tabs.length !== 0 ? (
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h5>
|
<Space>
|
<ClockCircleOutlined />
|
<span>预约信息</span>
|
</Space>
|
</h5>
|
<Space direction="vertical">
|
<div>
|
<span className="mediationWindow-modal-subtitle">预约调解时间：</span>
|
<span>
|
{$$.timeFormat(tabMsg.orderStartTime)} ~ {$$.timeFormat(tabMsg.orderEndTime)}
|
</span>
|
</div>
|
<div>
|
<span className="mediationWindow-modal-subtitle">预约调解方式：</span>
|
<span>{tabMsg.meetWayName}</span>
|
</div>
|
<div>
|
<span className="mediationWindow-modal-subtitle">预约调解地点：</span>
|
<span>{tabMsg.meetAddr || '-'}</span>
|
</div>
|
<div>
|
<span className="mediationWindow-modal-subtitle">
|
<span style={{ visibility: 'hidden' }}>预约</span>预约通知：
|
</span>
|
<span>{tabMsg.orderContent || '-'}</span>
|
</div>
|
<div>
|
<span className="mediationWindow-modal-subtitle">是否发送短信：</span>
|
<span>{tabMsg.shortStatus === '2' ? '发送' : '未发送'}</span>
|
{tabMsg.shortStatus === '2' && (
|
<span className="mediationWindow-modal-subtitle" style={{ paddingLeft: '8px' }}>
|
{$$.timeFormat(tabMsg.createTime)}发送成功
|
</span>
|
)}
|
</div>
|
</Space>
|
</Col>
|
<Col span={24}>
|
<div className="mediationWindow-modal-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>
|
<Space>
|
<MailOutlined />
|
<span>预约反馈</span>
|
</Space>
|
</h5>
|
<TableView size="small" columns={columns} dataSource={tabMsg.meetUserList || []} pagination={false} />
|
</Col>
|
</Row>
|
) : (
|
$$.MyEmpty({ description: '请先添加预约' })
|
)
|
) : (
|
<Form
|
form={form}
|
colon={false}
|
layout="vertical"
|
requiredMark={false}
|
onFinish={(values) => {
|
values.orderStartTime = values.time[0].format('YYYY-MM-DD HH:mm');
|
values.orderEndTime = values.time[1].format('YYYY-MM-DD HH:mm');
|
delete values.time;
|
addOrderRecord({ caseId, ...formData, ...values, shortStatus: formData.shortStatus ? '1' : '2' });
|
}}
|
onFinishFailed={({ _, errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<Form.Item label="预约调解时间" name="time" rules={[{ required: true }]}>
|
<RangePicker showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" style={{ width: '300px' }} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="预约调解方式" name="meetWay" rules={[{ required: true }]}>
|
<Select
|
onChange={(value, options) => handleChangeInput(['meetWay', 'meetWayName'], [value, options.label])}
|
placeholder="输入与申请人确认的调解方式"
|
style={{ width: '300px' }}
|
>
|
{$$.options.meetWay.map((x) => (
|
<Option key={x.value} label={x.label}>
|
{x.label}
|
</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="预约调解地点" name="meetAddr">
|
<Input placeholder="输入与申请人确认的预约地点" allowClear style={{ width: '100%' }} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<h5>通知模板</h5>
|
<div className="mediationWindow-modal-template">
|
<TextArea value={template[formData.meetWay]} disabled placeholder="请选择调解方式查看" autoSize />
|
</div>
|
</Col>
|
<Col span={24}>
|
<h5>
|
<Space align="center">
|
<span>发送短信通知</span>
|
<Switch size="small" onChange={(value) => handleChangeInput('shortStatus', value)} />
|
</Space>
|
</h5>
|
<div className="mediationWindow-modal-subtitle">
|
{formData.shortStatus ? '将预约通知内容以短信形式同步发送给双方申请人' : '不发送短信通知双方申请人'}
|
</div>
|
</Col>
|
</Row>
|
</Form>
|
)}
|
</div>
|
<div className="mediationWindow-modal-footer">
|
{tabActive === '2' ? (
|
<Button type="primary" onClick={() => form.submit()}>
|
保存预约
|
</Button>
|
) : orderRecord.tabs.length !== 0 ? (
|
<Button onClick={() => delOrderRecord(tabMsg.id)} danger>
|
删除预约
|
</Button>
|
) : null}
|
</div>
|
</>
|
);
|
};
|
|
OrderMediation.propTypes = {
|
tabActive: PropTypes.any,
|
onChangeTab: PropTypes.func,
|
getDisputeData: PropTypes.func,
|
};
|
|
export default OrderMediation;
|
