import { RESPONSE_CODE } from '@/constants/enum';
import {
postAdminClientAddAdminClient,
postAdminClientModifyClientInfo,
postDistrictSelectByLevel,
postDistrictSelectByNameAndLevel,
postDistrictSelOrderProvince,
postServiceConstClientLevels,
postServiceConstTradeStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
DrawerForm,
ProFormDateTimePicker,
ProFormSelect,
ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { useState } from 'react';
export default ({ optType, record, onFinish }) => {
const [form] = Form.useForm();
//省市区
const [province, setProvince] = useState('');
const [city, setCity] = useState('');
const optTypeEnum = {
add: {
text: '新增',
button: <Button type="primary">新增</Button>,
readonly: false,
onFinish: async (values) => {
const res = await postAdminClientAddAdminClient({
data: values,
});
if (res.result === RESPONSE_CODE.SUCCESS) {
message.success('新增成功');
// 不返回不会关闭弹框
onFinish();
return true;
}
},
},
edit: {
text: '编辑',
button: <a type="primary">编辑</a>,
readonly: false,
onFinish: async (values) => {
const res = await postAdminClientModifyClientInfo({
data: values,
});
if (res.result === RESPONSE_CODE.SUCCESS) {
message.success('编辑成功');
// 不返回不会关闭弹框
onFinish();
return true;
}
},
},
detail: {
text: '详情',
button: <a type="primary">详情</a>,
readonly: true,
},
};
return (
<DrawerForm
title={optTypeEnum[optType].text}
resize={{
onResize() {
console.log('resize!');
},
maxWidth: window.innerWidth * 0.8,
minWidth: 300,
}}
initialValues={record}
form={form}
trigger={optTypeEnum[optType].button}
autoFocusFirstInput
drawerProps={{
destroyOnClose: true,
}}
submitTimeout={2000}
width={500}
readonly={optTypeEnum[optType].readonly}
onFinish={optTypeEnum[optType].onFinish}
>
<ProFormText name="id" label="id" hidden={true} />
<ProFormText
name="name"
label="客户名称"
placeholder="请输入名称"
rules={[
{
required: true,
message: '请输入客户名称',
},
]}
/>
<ProFormText
name="companyName"
label="单位名称"
placeholder="请输入单位名称"
rules={[
{
required: true,
message: '请输入单位名称',
},
]}
/>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
width: 340,
}}
>
<ProFormSelect
name="province"
key="province"
width={100}
label="省"
allowClear={false}
onChange={(value) => {
console.log(value);
if (value !== undefined || value !== null) {
console.log('setProvince');
setProvince(value);
}
}}
placeholder="请选择"
rules={[
{
required: true,
message: '请选择!',
},
]}
request={async () => {
let province = [];
let res = await postDistrictSelectByLevel({ data: 1 });
if (res) {
res.data.forEach((item) => {
province.push({ value: item.district, label: item.district });
});
}
return province;
}}
/>
<ProFormSelect
key={province}
name="city"
width={100}
label="市"
allowClear={false}
disabled={province === ''}
placeholder="请选择"
onChange={(value) => {
if (value !== undefined || value !== null) {
setCity(value);
}
}}
rules={[
{
required: true,
message: '请选择!',
},
]}
request={async () => {
let cityOptions = [];
console.log(form.getFieldValue('id'));
if (form.getFieldValue('id')) {
const resp = await postDistrictSelOrderProvince({
data: form.getFieldValue('id'),
});
if (
resp.data.province !== null &&
resp.data.province !== undefined
) {
console.log('province is ok');
let res = await postDistrictSelectByNameAndLevel({
data: { district: resp.data.province, level: 1 },
});
if (res && res.data) {
cityOptions = res.data.map((item) => ({
value: item.district,
label: item.district,
}));
}
}
}
if (province !== '') {
console.log(province);
console.log('province is okk');
let res = await postDistrictSelectByNameAndLevel({
data: { district: province, level: 1 },
});
if (res && res.data) {
cityOptions = res.data.map((item) => ({
value: item.district,
label: item.district,
}));
}
}
return cityOptions;
}}
/>
<ProFormSelect
key={city ? city.toString() : 'district'}
name="district"
width={100}
label="区"
allowClear={false}
onChange={(value) => {
if (value !== undefined || value !== null) {
/*setDistrict(value);*/
}
}}
disabled={city === ''}
placeholder="请选择"
rules={[
{
required: true,
message: '请选择!',
},
]}
request={async () => {
let districtOptions = [];
if (form.getFieldValue('id')) {
const resp = await postDistrictSelOrderProvince({
data: form.getFieldValue('id'),
});
if (resp.data.city !== null && resp.data.city !== undefined) {
let res = await postDistrictSelectByNameAndLevel({
data: { district: resp.data.city, level: 2 },
});
if (res && res.data) {
districtOptions = res.data.map((item) => ({
value: item.district,
label: item.district,
}));
}
}
}
if (city !== '') {
let res = await postDistrictSelectByNameAndLevel({
data: { district: city, level: 2 },
});
if (res && res.data) {
districtOptions = res.data.map((item) => ({
value: item.district,
label: item.district,
}));
}
}
return districtOptions;
}}
/>
</div>
<ProFormText
name="companyAddress"
label="详细地址"
placeholder="请输入单位地址"
rules={[
{
required: true,
message: '请输入单位地址',
},
]}
/>
<ProFormText
name="phoneNumber"
label="联系电话"
placeholder="请输入联系电话"
rules={[
{
required: true,
message: '请输入联系电话',
},
]}
/>
<ProFormText
name="source"
label="客户来源"
placeholder="请输入客户来源"
/>
<ProFormText
name="requirements"
label="客户需求"
placeholder="请输入客户需求"
rules={[
{
required: true,
message: '请输入客户需求',
},
]}
/>
<ProFormText name="referrers" label="推荐人" placeholder="请输入推荐人" />
<ProFormSelect
name="hasScheme"
label="是否已报方案"
placeholder="请选择是否已报方案"
options={[
{
label: '是',
value: true,
},
{
label: '否',
value: false,
},
]}
rules={[
{
required: true,
message: '请选择是否已报方案',
},
]}
/>
<ProFormDateTimePicker
name="quoteDatetime"
label="报价时间"
placeholder="请输入报价时间"
/>
<ProFormSelect
name="level"
label="客户等级"
placeholder="请输入客户等级"
rules={[
{
required: true,
message: '请输入客户等级',
},
]}
request={async () => {
const res = await postServiceConstClientLevels();
return enumToSelect(res.data);
}}
/>
<ProFormSelect
name="tradeStatus"
label="跟进状态"
placeholder="请输入跟进状态"
rules={[
{
required: true,
message: '请输入跟进状态',
},
]}
request={async () => {
const res = await postServiceConstTradeStatus();
return enumToSelect(res.data);
}}
/>
<ProFormText name="notes" label="备注" placeholder="请输入备注" />
</DrawerForm>
);
};