549 lines
20 KiB
TypeScript
549 lines
20 KiB
TypeScript
import { connect } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import ProTable, { ActionType } from "@ant-design/pro-table";
|
|
import { Col, FormInstance, message, Modal, Popconfirm, Row, Space } from "antd";
|
|
import { useRef, useState } from "react";
|
|
import { handleDeleteMEMBERADDRESS, handleGetMEMBERADDRESSList, handleSynchroMEMBERADDRESS } from "../../service";
|
|
import React from "react";
|
|
import Draggable from "react-draggable";
|
|
import ProForm, { ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form";
|
|
import moment from 'moment'
|
|
import ModalFooter from "../../scenicSpotConfig/component/modalFooter";
|
|
import { handleSetlogSave } from "@/utils/format";
|
|
|
|
type DetailProps = {
|
|
currentBigRow: any
|
|
currentUser: any
|
|
}
|
|
const AddressDetail = ({ currentBigRow, currentUser }: DetailProps) => {
|
|
const modalActionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
const [province, setProvince] = useState<string>('');
|
|
const [city, setCity] = useState<string>('');
|
|
const [county, setCounty] = useState<string>('');
|
|
const [currentRow, setCurrentRow] = useState<any>();
|
|
const [modalVisible, handleModalVisible] = useState<boolean>();
|
|
const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
|
|
|
|
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
|
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
|
const draggleRef = React.createRef<any>()
|
|
|
|
// 抽屉里面的table的columns
|
|
const drawerColumns: any = [
|
|
{
|
|
dataIndex: 'searchText',
|
|
title: '',
|
|
width: 150,
|
|
align: 'center',
|
|
hideInTable: true,
|
|
fieldProps: {
|
|
placeholder: "输入收货人名称"
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'USER_NAME',
|
|
title: '收货人名称',
|
|
width: 150,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.USER_NAME ? <a
|
|
onClick={() => {
|
|
console.log('record', record);
|
|
handleSetlogSave(`查看【${record?.ADDRESS || ""}】地址信息`)
|
|
setProvince(record?.RECEIVE_PROVINCE)
|
|
setCity(record?.RECEIVE_CITY)
|
|
setCounty(record?.RECEIVE_COUNTY)
|
|
setCurrentRow({ ...record });
|
|
handleModalVisible(true);
|
|
}}
|
|
>
|
|
{record?.USER_NAME || "-"}
|
|
</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'USER_SEX',
|
|
title: '收货人性别',
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1": "男",
|
|
"2": "女",
|
|
"0": "-",
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'MOBILEPHONE',
|
|
title: '手机号码',
|
|
width: 150,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'RECEIVE_PROVINCE',
|
|
title: '省/直辖市',
|
|
width: 120,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'RECEIVE_CITY',
|
|
title: '城市/直辖市',
|
|
width: 150,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'RECEIVE_COUNTY',
|
|
title: '区/县',
|
|
width: 150,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'ADDRESS',
|
|
title: '收货地址',
|
|
width: 300,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'DOORPLATE',
|
|
title: '门牌号码',
|
|
width: 300,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'ISDEFAULT',
|
|
title: '默认地址',
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1": "是",
|
|
"0": "否",
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'TAGTYPE',
|
|
title: '地址类型',
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"1000": "家",
|
|
"2000": "公司",
|
|
"3000": "其他",
|
|
}
|
|
},
|
|
|
|
// {
|
|
// dataIndex: 'CREATE_STAFF_NAME',
|
|
// title: '创建人名称',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'CREATE_DATE',
|
|
// title: '创建时间',
|
|
// valueType: 'date',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'UPDATE_STAFF_NAME',
|
|
// title: '更新人名称',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'UPDATE_DATE',
|
|
// title: '更新时间',
|
|
// valueType: 'date',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'MEMBERADDRESS_DESC',
|
|
// title: '备注说明',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// },
|
|
// {
|
|
// dataIndex: 'option',
|
|
// title: '操作',
|
|
// width: 120,
|
|
// align: 'center',
|
|
// valueType: 'option',
|
|
// hideInSearch: true,
|
|
// fixed: 'right',
|
|
// render: (_, record) => {
|
|
// return (
|
|
// <Space>
|
|
// <a
|
|
// onClick={() => {
|
|
// console.log('record', record);
|
|
|
|
// setProvince(record?.RECEIVE_PROVINCE)
|
|
// setCity(record?.RECEIVE_CITY)
|
|
// setCounty(record?.RECEIVE_COUNTY)
|
|
// setCurrentRow({ ...record });
|
|
// handleModalVisible(true);
|
|
// }}
|
|
// >
|
|
// 编辑
|
|
// </a>
|
|
// <Popconfirm
|
|
// title="确认删除该会员收货地址列表信息吗?"
|
|
// onConfirm={async () => {
|
|
// console.log('res', record);
|
|
|
|
// await handelDelete(record.MEMBERADDRESS_ID);
|
|
// }}
|
|
// >
|
|
// <a>删除</a>
|
|
// </Popconfirm>
|
|
// </Space>
|
|
// );
|
|
// },
|
|
// },
|
|
];
|
|
|
|
const handelDelete = async (id: number) => {
|
|
const result = await handleDeleteMEMBERADDRESS({
|
|
MEMBERADDRESSId: id
|
|
});
|
|
console.log('resultresultresult', result);
|
|
if (result.Result_Code !== 100) {
|
|
message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
|
|
handleSetlogSave(`删除【${currentRow?.ADDRESS || ""}】失败`)
|
|
} else {
|
|
message.success('删除成功！');
|
|
modalActionRef.current?.reload()
|
|
|
|
handleSetlogSave(`删除【${currentRow?.ADDRESS || ""}】成功`)
|
|
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setProvince("")
|
|
setCity("")
|
|
setCounty("")
|
|
}
|
|
};
|
|
|
|
const onDraggaleStart = (event, uiData) => {
|
|
const { clientWidth, clientHeight } = window.document.documentElement;
|
|
const targetRect = draggleRef.current?.getBoundingClientRect();
|
|
if (!targetRect) {
|
|
return;
|
|
}
|
|
setBounds({
|
|
left: -targetRect.left + uiData.x,
|
|
right: clientWidth - (targetRect.right - uiData.x),
|
|
top: -targetRect.top + uiData.y,
|
|
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
|
});
|
|
};
|
|
|
|
const handleAddUpdate = async (res: any) => {
|
|
let req: any = {}
|
|
|
|
if (currentRow?.MEMBERADDRESS_ID) {
|
|
req = {
|
|
...currentRow,
|
|
...res
|
|
}
|
|
} else {
|
|
req = {
|
|
...res,
|
|
ADDTIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
OWNERUNIT_NAME: currentUser?.OwnerUnitName,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode
|
|
}
|
|
}
|
|
const data = await handleSynchroMEMBERADDRESS(req);
|
|
if (data.Result_Code === 100) {
|
|
handleSetlogSave(`更新【${currentRow?.ADDRESS || ""}】成功`)
|
|
message.success(data.Result_Desc)
|
|
formRef?.current?.resetFields()
|
|
setCurrentRow(undefined)
|
|
handleModalVisible(false)
|
|
modalActionRef.current?.reload()
|
|
} else {
|
|
handleSetlogSave(`更新【${currentRow?.ADDRESS || ""}】失败`)
|
|
message.error(data.Result_Desc)
|
|
}
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
<ProTable
|
|
search={false}
|
|
pagination={false}
|
|
options={false}
|
|
scroll={{ x: "100%", y: '500px' }}
|
|
columns={drawerColumns}
|
|
headerTitle={"用户地址"}
|
|
actionRef={modalActionRef}
|
|
bordered
|
|
request={async (params, sorter) => {
|
|
const req = {
|
|
SearchParameter: {
|
|
MEMBERSHIP_ID: currentBigRow?.MEMBERSHIP_ID,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
|
OWNERUNIT_ID: 911,
|
|
ISVALID: 1
|
|
},
|
|
PageIndex: params.current,
|
|
PageSize: params.pageSize,
|
|
SortStr: "CREATE_DATE desc",
|
|
keyWord: {
|
|
Key: "USER_NAME",
|
|
Value: params?.searchText
|
|
}
|
|
}
|
|
const data = await handleGetMEMBERADDRESSList(req);
|
|
console.log('datadatadatadatadata', data);
|
|
if (data.List && data.List.length > 0) {
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
/>
|
|
|
|
|
|
<Modal
|
|
title={
|
|
<div
|
|
className="modal-drag-title"
|
|
style={{
|
|
width: '100%',
|
|
cursor: 'move',
|
|
}}
|
|
onMouseOver={() => {
|
|
if (disabled) {
|
|
setDraggleDisabled(false)
|
|
}
|
|
}}
|
|
onMouseOut={() => {
|
|
setDraggleDisabled(true)
|
|
}}
|
|
|
|
onFocus={() => { }}
|
|
onBlur={() => { }}
|
|
>
|
|
{currentRow ? '更新会员收货地址' : '新建会员收货地址'}
|
|
</div>
|
|
}
|
|
destroyOnClose={true}
|
|
width={900}
|
|
bodyStyle={{
|
|
height: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={modalVisible}
|
|
confirmLoading={confirmLoading}
|
|
afterClose={() => {
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}}
|
|
onCancel={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setProvince("")
|
|
setCity("")
|
|
setCounty("")
|
|
}}
|
|
footer={<ModalFooter
|
|
hideDelete={!currentRow?.MEMBERADDRESS_ID}
|
|
handleDelete={async () => {
|
|
await handelDelete(currentRow?.MEMBERADDRESS_ID)
|
|
}}
|
|
handleCancel={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setProvince("")
|
|
setCity("")
|
|
setCounty("")
|
|
}}
|
|
handleOK={() => {
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}
|
|
|
|
/>}
|
|
|
|
onOk={async () => { // 提交框内的数据
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}
|
|
modalRender={(modal) => {
|
|
return <Draggable
|
|
disabled={disabled}
|
|
bounds={bounds}
|
|
onStart={(event, uiData) => onDraggaleStart(event, uiData)}
|
|
handle=".modal-drag-title"
|
|
>
|
|
<div ref={draggleRef}>{modal}</div>
|
|
</Draggable>
|
|
}}
|
|
>
|
|
<ProForm
|
|
layout={'horizontal'}
|
|
labelCol={{ style: { width: '80px' } }}
|
|
formRef={formRef}
|
|
autoFocusFirstInput
|
|
submitter={false}
|
|
preserve={false}
|
|
initialValues={currentRow}
|
|
onFinish={async (values) => {
|
|
let newValue: any = { ...values };
|
|
if (currentRow) {
|
|
// 编辑数据
|
|
newValue = { ...values, MEMBERADDRESS_ID: currentRow.MEMBERADDRESS_ID };
|
|
}
|
|
await handleAddUpdate(newValue);
|
|
|
|
handleConfirmLoading(false)
|
|
}}
|
|
>
|
|
<Row gutter={8}>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="USER_NAME"
|
|
label="收货人名称"
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="USER_SEX"
|
|
label="收货人性别"
|
|
options={[
|
|
{ label: "男", value: 1 },
|
|
{ label: "女", value: 2 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="MOBILEPHONE"
|
|
label="手机号码"
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="RECEIVE_PROVINCE"
|
|
label="省"
|
|
fieldProps={{
|
|
onChange: (e: any) => {
|
|
console.log('eee', e);
|
|
|
|
setProvince(e.target.value)
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="RECEIVE_CITY"
|
|
label="市"
|
|
fieldProps={{
|
|
onChange: (e: any) => {
|
|
setCity(e.target.value)
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="RECEIVE_COUNTY"
|
|
label="区/县"
|
|
fieldProps={{
|
|
onChange: (e: any) => {
|
|
setCounty(e.target.value)
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="ADDRESS"
|
|
label="收货地址"
|
|
disabled
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="DOORPLATE"
|
|
label="门牌号码"
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="ISDEFAULT"
|
|
label="默认地址"
|
|
options={[
|
|
{ label: "是", value: 1 },
|
|
{ label: "否", value: 0 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="TAGTYPE"
|
|
label="地址类型"
|
|
options={[
|
|
{ label: "家", value: 1000 },
|
|
{ label: "公司", value: 2000 },
|
|
{ label: "其他", value: 3000 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="ISVALID"
|
|
label="是否有效"
|
|
options={[
|
|
{ label: "是", value: 1 },
|
|
{ label: "否", value: 0 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormTextArea
|
|
name="MEMBERADDRESS_DESC"
|
|
label="备注说明"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user, }: ConnectState) => ({
|
|
currentUser: user.currentUser,
|
|
}))(AddressDetail);
|