/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-07 09:05:38
|
* @LastEditTime: 2022-05-17 15:36:35
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 客户管理，新增修改
|
*/
|
import React, { useState, useEffect } from 'react';
|
import './index.less';
|
import { Steps, Input, Cascader, Button, Form, Select, DatePicker, Row, Col } from 'antd';
|
import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
|
import moment from 'moment';
|
import { useNavigate } from 'react-router-dom';
|
import * as $$ from '../../../utils/utility';
|
const { Step } = Steps;
|
const { Option } = Select;
|
const { RangePicker } = DatePicker;
|
|
// 地区Option
|
const location = $$.locationOption;
|
const CustomerFormView = ({ list1, list2, formData, status, save = (data) => {} }) => {
|
const [form] = Form.useForm();
|
const [form1] = Form.useForm();
|
const [form2] = Form.useForm();
|
const [versionList, setVersionList] = useState(list1);
|
const [mealList, setMealList] = useState(list2);
|
const navigate = useNavigate();
|
// 步骤0第一步 1.第二步
|
const [steps, setSteps] = useState(0);
|
const inputonChange = (e) => {
|
const tableData = form.getFieldValue();
|
// inputChange(tableData);
|
};
|
|
//第一步(下一步)
|
const saveStep1 = async () => {
|
const row = await form.validateFields();
|
setSteps(1);
|
};
|
|
//第二步(提交)
|
const saveStep2 = async () => {
|
const row = await form1.validateFields();
|
const tableData = form.getFieldValue();
|
const tableData1 = form1.getFieldValue();
|
|
save({ ...tableData, ...tableData1 });
|
};
|
//修改客户提交
|
const saveStepEdit = async () => {
|
const row = await form.validateFields();
|
const tableData = form.getFieldValue();
|
const tableData1 = form1.getFieldValue();
|
|
save({ ...tableData1, ...tableData });
|
};
|
|
const reset = () => {
|
form.resetFields();
|
};
|
|
const back = () => {
|
navigate(-1);
|
};
|
|
// 第二步(上一步)
|
const backStep2 = () => {
|
setSteps(0);
|
};
|
|
//初始化组件回显
|
useEffect(() => {
|
form.setFieldsValue({
|
...formData.seCustom,
|
regionals: formData.seCustom
|
? formData.seCustom.prov
|
? [formData.seCustom.prov, formData.seCustom.city, formData.seCustom.areaName]
|
: undefined
|
: undefined,
|
});
|
form1.setFieldsValue({ ...formData });
|
}, []);
|
|
//地域选择
|
const cascaderChange = (name, value, selectedOptions) => {
|
console.log('value', value);
|
console.log('selectedOptions', selectedOptions);
|
const tableData = form.getFieldValue();
|
form.setFieldsValue({
|
...tableData,
|
// [name]: value,
|
[name + 's']: selectedOptions.map((i) => i.value),
|
[name + 'Names']: selectedOptions.map((i) => i.label),
|
prov: selectedOptions.map((i) => i.value)[0],
|
provName: selectedOptions.map((i) => i.label)[0],
|
city: selectedOptions.map((i) => i.value)[1],
|
cityName: selectedOptions.map((i) => i.label)[1],
|
area: selectedOptions.map((i) => i.value)[2],
|
areaName: selectedOptions.map((i) => i.label)[2],
|
});
|
};
|
|
// 版本选择
|
const selectOnChange = (name, e, data) => {
|
const tableData1 = form1.getFieldValue();
|
const version = versionList.find((i) => i.id == e);
|
|
//
|
form1.setFieldsValue({
|
...tableData1,
|
[name + 'Id']: data.value,
|
[name + 'Name']: data.name,
|
versionPrice: version.price,
|
planPrice: version.price,
|
mealId: undefined,
|
mealIds: undefined,
|
mealName: undefined,
|
time: [moment(new Date()), moment(moment(new Date()).valueOf() + 86400000 * version.dead)],
|
openTime: moment([moment(new Date()), moment(moment(new Date()).valueOf() + 86400000 * version.dead)][0]).valueOf(),
|
expireTime: moment([moment(new Date()), moment(moment(new Date()).valueOf() + 86400000 * version.dead)][1]).valueOf(),
|
// time: [moment(new Date()), moment(new Date())],
|
});
|
};
|
|
// 增强包选择
|
const selectMealOnChange = (name, e, data) => {
|
const tableData1 = form1.getFieldValue();
|
|
const mealPrice = eval(
|
mealList
|
.filter((i) => e.find((item) => item == i.id))
|
.map((item) => item.price)
|
.join('+')
|
);
|
|
form1.setFieldsValue({
|
...tableData1,
|
[name + 'Ids']: data.map((i) => i.value).join(','),
|
[name + 'Names']: data.map((i) => i.name).join(','),
|
mealPrice,
|
planPrice: tableData1.versionPrice + (mealPrice || 0),
|
});
|
};
|
|
const rangePickerChange = (name, date, dateString) => {
|
const tableData1 = form1.getFieldValue();
|
form1.setFieldsValue({
|
...tableData1,
|
openTime: moment(date[0]).valueOf(),
|
expireTime: moment(date[1]).valueOf(),
|
});
|
};
|
return (
|
<>
|
{status !== '2' && (
|
<div style={{ width: '100%', display: 'flex', paddingRight: '108px', justifyContent: 'center' }}>
|
<Steps style={{ width: '600px' }} current={steps}>
|
<Step title="填写客户信息" />
|
<Step title="填写订购信息" />
|
</Steps>
|
</div>
|
)}
|
{steps === 0 && (
|
<Form form={form} layout="vertical">
|
<Row gutter={[24, 24]}>
|
<Col span={8}>
|
<Form.Item
|
label="客户名称"
|
name="trueName"
|
rules={[
|
{ required: true, message: `请输入客户名称` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入客户名称`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="管理员账号"
|
name="acc"
|
rules={[
|
{ required: true, message: `请输入管理员账号` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入管理员账号`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="密码"
|
name="cipherOpen"
|
rules={[
|
{ required: true, message: `请输入密码` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input.Password
|
placeholder="请输入密码"
|
onChange={inputonChange}
|
iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="负责人"
|
name="dutyName"
|
rules={[
|
{ required: true, message: `请输入负责人` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入负责人`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="负责人联系方式"
|
name="dutyMobile"
|
rules={[
|
{ required: false, message: `请输入负责人联系方式` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入负责人联系方式`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="联系地址"
|
name="addr"
|
rules={[
|
{ required: false, message: `请输入联系地址` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入联系地址`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="地域" name="regionals" rules={[{ required: true, message: `请选择地域` }]}>
|
<Cascader
|
placeholder="省/市/区(县)"
|
options={location}
|
allowClear
|
// changeOnSelect
|
onChange={(value, selectedOptions) => cascaderChange('regional', value, selectedOptions)}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="平台访问url"
|
name="url"
|
rules={[
|
{ required: true, message: `请输入平台访问url` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入平台访问url`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item
|
label="备注"
|
name="remake"
|
rules={[
|
{ required: false, message: `请输入备注` },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入备注`} />
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)}
|
{steps === 1 && (
|
<Form form={form1} layout="vertical">
|
<Row gutter={[24, 24]}>
|
<Col span={8}>
|
<Form.Item label="版本" name="verId" rules={[{ required: true, message: `请选择版本` }]}>
|
<Select onChange={(e, data) => selectOnChange('ver', e, data)} placeholder="请选择版本" allowClear>
|
{versionList.map((item, index) => (
|
<Option key={item.id} name={item.name} value={item.id}>
|
{item.name}
|
</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="增强包" name="mealId" rules={[{ required: false, message: `请选择增强包` }]}>
|
<Select mode="multiple" placeholder="请选择增强包" onChange={(e, data) => selectMealOnChange('meal', e, data)} allowClear>
|
{mealList.map((item, index) => (
|
<Option key={item.id} name={item.name} value={item.id}>
|
{item.name}
|
</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="资费总金额" name="planPrice" rules={[{ required: false, message: `请输入资费总金额` }]}>
|
<Input type={'number'} prefix={'￥'} suffix={'元'} onChange={inputonChange} placeholder={`请输入资费总金额`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="版本开通（结束）时间" name="time" rules={[{ required: true, message: `请选择版本开通（结束）时间` }]}>
|
<RangePicker
|
onChange={(date, dateString) => {
|
rangePickerChange('time', date, dateString);
|
}}
|
format="YYYY-MM-DD"
|
disabledDate={(current) => current < moment().startOf('day')}
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)}
|
<div className="customer-form-view">
|
<div style={{ width: '100%' }}>
|
<div className="customer-form-view-form">
|
<div>
|
{steps === 0 && status !== '2' && (
|
<div className="customer-form-view-foot-buttton">
|
<Button onClick={saveStep1} type="primary">
|
下一步
|
</Button>
|
<Button style={{ marginLeft: '12px' }} onClick={back}>
|
返回
|
</Button>
|
</div>
|
)}
|
{status == '2' && (
|
<div className="customer-form-view-foot-buttton">
|
<Button onClick={saveStepEdit} type="primary">
|
提交
|
</Button>
|
<Button style={{ marginLeft: '12px' }} onClick={reset}>
|
重置
|
</Button>
|
<Button style={{ marginLeft: '12px' }} onClick={back}>
|
返回
|
</Button>
|
</div>
|
)}
|
{steps === 1 && (
|
<div className="customer-form-view-foot-buttton">
|
<Button onClick={backStep2}>上一步</Button>
|
<Button style={{ marginLeft: '12px' }} type="primary" onClick={saveStep2}>
|
提交
|
</Button>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
</div>
|
</>
|
);
|
};
|
CustomerFormView.propTypes = {};
|
export default CustomerFormView;
|
