ylj20011123 aea7dea7c1 update
2025-06-20 19:26:23 +08:00

977 lines
36 KiB
TypeScript

// 商家信息管理
import React, { useRef, useState, Suspense } from 'react';
import moment from 'moment'; // 时间相关引用,没有使用可以删除
import numeral from "numeral"; // 数字相关引用,没有使用可以删除
import { connect } from 'umi';
import useRequest from '@ahooksjs/use-request'; // 请求数据的引用
import Draggable from 'react-draggable';
import SubMenu from "antd/lib/menu/SubMenu";
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProForm, { ProFormDatePicker, ProFormDateTimePicker, ProFormMoney, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-form';
import { MenuFoldOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Col, Drawer, message, Row, Popconfirm, Space, Image, Modal, Form, Switch, Upload, Tooltip, Descriptions, TreeSelect, Divider, Tabs, Select, Input, Tree } from 'antd';
import type { CurrentUser } from "umi";
import type { ConnectState } from '@/models/connect';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import type { FormInstance } from 'antd';
import { handleDeleteSERVERPARTSELLER, handleGetMEMBERADDRESSList, handleGetRelateShopToSeller, handleGetSERVERPARTSELLERDetail, handleGetSERVERPARTSHOPList, handleRemoveShopFromSeller, handleSynchroSERVERPARTSELLER } from '../service';
import LeftSelectTree from '@/pages/reports/settlementAccount/component/leftSelectTree';
import session from '@/utils/session';
const MerchantInformation: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
const { currentUser } = props
const actionRef = useRef<ActionType>();
const formRef = useRef<FormInstance>();
const formMerchantRef = useRef<FormInstance>();
const associationActionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<any>();
const [showDetail, setShowDetail] = useState<boolean>();
const [modalVisible, handleModalVisible] = useState<boolean>();
const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
const [searchParams, setSearchParams] = useState<any>();
// 树相关的属性和方法
const [selectedId, setSelectedId] = useState<string>()
const [collapsible, setCollapsible] = useState<boolean>(false)
// 新增关联选择的方法
const [selectedRowKeys, setSelectRowKeys] = useState<any>();
const [selectedRowDetail, setSelectRowDetail] = useState<any>();
// 在关联编辑页里面的tab选择
const [selectTab, setSelectTab] = useState<string>("1")
// 当前编辑商家的关联门店数据
const [currentShopData, setCurrentShopData] = useState<any>()
// 当前编辑商家的详情
const [currentRowDetail, setCurrentRowDetail] = useState<any>()
// 选择的 要关联的服务区
const [selectAssociationServerpart, setSelectAssociationServerpart] = useState<any>()
let SHOPTRADEObj = session.get('SHOPTRADEObj')
let SHOPTRADEList = session.get('SHOPTRADEList')
let shopregionObj = session.get('shopregionObj')
let businessStateObj = session.get('businessStateObj')
let SERVERPARTTree = session.get('SERVERPARTTree')
let serverpartList = session.get('serverpartList')
// 弹出框拖动效果
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
const draggleRef = React.createRef<any>()
// 显示新增门店功能悬浮框
const [showAddModal, setShowAddModal] = useState<boolean>(false)
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 columns: any = [
{
dataIndex: 'SELLER_NAME',
title: '商家名称',
align: 'center',
hideInSearch: true,
render: (_, record) => {
return record?.SELLER_NAME ? `${record?.SERVERPART_NAME || ""}${record?.SELLER_NAME}` : "-"
}
},
{
dataIndex: 'SHOPTRADE',
title: '经营业态',
align: 'center',
width: 120,
valueType: 'select',
valueEnum: SHOPTRADEObj,
fieldProps: {
showSearch: true,
filterOption: (input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
},
},
{
dataIndex: '',
title: '预约点餐',
align: 'center',
width: 120,
hideInSearch: true,
},
{
dataIndex: 'MONTHLYSALES',
title: '月销售量',
align: 'center',
width: 120,
hideInSearch: true,
},
{
dataIndex: 'PERCAPITA',
title: '人均消费',
align: 'center',
width: 120,
hideInSearch: true,
},
{
dataIndex: 'SELLER_SCORE',
title: '评价分数',
align: 'center',
width: 120,
hideInSearch: true,
},
{
dataIndex: 'COMMENT_COUNT',
title: '评价数量',
align: 'center',
width: 120,
hideInSearch: true,
},
{
dataIndex: 'SERVERPARTSELLER_DESC',
title: '备注说明',
width: 150,
ellipsis: true,
align: 'center',
hideInSearch: true,
},
{
dataIndex: 'option',
title: '操作',
valueType: 'option',
width: 120,
align: 'center',
hideInSearch: true,
render: (_, record) => {
return (
<Space>
<a
onClick={() => {
console.log('recordrecordrecordrecord', record);
setCurrentRow({ ...record });
handleModalVisible(true);
}}
>
</a>
<Popconfirm
title="确认删除该服务区商家信息列表信息吗?"
onConfirm={async () => {
await handelDelete(record.SELLER_ID);
}}
>
<a></a>
</Popconfirm>
</Space>
);
},
},
];
// 关联商家的表格
const merchantColumns: any = [
{
dataIndex: 'SERVERPART_NAME',
title: '服务区名称',
align: 'center',
width: 150,
ellipsis: true,
hideInSearch: true,
},
{
dataIndex: 'SHOPNAME',
title: '门店名称',
align: 'center',
width: 150,
ellipsis: true,
hideInSearch: true,
},
{
dataIndex: 'SHOPREGION',
title: '所属方位',
align: 'center',
width: 120,
hideInSearch: true,
valueType: "select",
valueEnum: shopregionObj
},
{
dataIndex: 'SCANCODE_ORDER',
title: '扫码点餐',
align: 'center',
width: 120,
hideInSearch: true,
valueType: "select",
valueEnum: {
"0": "禁用",
"1": "启用"
}
},
{
dataIndex: 'BUSINESS_STATE',
title: '经营状态',
align: 'center',
width: 120,
valueType: "select",
valueEnum: businessStateObj
},
{
dataIndex: 'SHOPDIRECTION',
title: '门店方向',
align: 'center',
width: 120,
ellipsis: true,
hideInSearch: true,
},
{
dataIndex: 'ISVALID',
title: '门店状态',
align: 'center',
width: 120,
valueEnum: {
"0": "无效",
"1": "有效"
},
initialValue: "1"
},
{
dataIndex: 'SERVERPARTSHOP_DESC',
title: '介绍说明',
align: 'center',
width: 150,
ellipsis: true,
hideInSearch: true,
}
]
// 门店信息的表格
const shopColumns: any = [
{
title: "序号",
dataIndex: "index",
valueType: "index",
align: 'center',
width: 80
},
{
title: "门店",
dataIndex: "SHOPNAME",
width: 150,
align: 'center'
},
{
title: "门店简称",
dataIndex: "SHOPSHORTNAME",
width: 150,
align: 'center'
},
{
title: "门店方向",
dataIndex: "SHOPDIRECTION",
width: 150,
align: 'center',
render: (_, record) => {
return <Input defaultValue={record?.SHOPDIRECTION} onBlur={(e) => {
if (e.target.value !== record?.SHOPDIRECTION) {
let list: any = JSON.parse(JSON.stringify(currentShopData))
if (list && list.length > 0) {
list.forEach((item: any) => {
if (item.SERVERPARTSHOP_ID === record?.SERVERPARTSHOP_ID) {
item.SHOPDIRECTION = e.target.value
}
})
}
setCurrentShopData(list)
}
}} />
}
},
{
title: "扫码点餐",
dataIndex: "SCANCODE_ORDER",
width: 150,
align: 'center',
render: (_, record) => {
return <Select
value={record?.SCANCODE_ORDER || 0}
options={[{ label: "启用", value: 1 }, { label: "禁用", value: 0 }]}
onChange={(e: any) => {
let list: any = JSON.parse(JSON.stringify(currentShopData))
if (list && list.length > 0) {
list.forEach((item: any) => {
if (item.SERVERPARTSHOP_ID === record?.SERVERPARTSHOP_ID) {
item.SCANCODE_ORDER = e
}
})
}
setCurrentShopData(list)
}}
></Select>
}
},
{
title: "联系人名称",
dataIndex: "SHOP_LINKMAN",
width: 150,
align: 'center'
},
{
title: "联系电话",
dataIndex: "SHOP_TELEPHONE",
width: 150,
align: 'center'
},
{
title: "操作",
dataIndex: "option",
width: 120,
align: 'center',
render: (_, record) => {
return <Space>
<Popconfirm
title="确认解除关联?"
onConfirm={async () => {
await handleRemoveSeller(record)
}}
>
<a></a>
</Popconfirm>
</Space>
}
}
]
// 评论信息表格
const commentColumns: any = [
{
title: "序号",
dataIndex: "index",
valueType: "index",
width: 80
},
{
title: "评价时间",
dataIndex: "",
width: 150
},
{
title: "评价人员",
dataIndex: "",
width: 120
},
{
title: "会员类型",
dataIndex: "",
width: 120
},
{
title: "匿名评价",
dataIndex: "",
width: 120
},
{
title: "评分",
dataIndex: "",
width: 120
},
{
title: "评价内容",
dataIndex: "",
width: 200
},
{
title: "回复内容",
dataIndex: "",
width: 200
},
{
title: "图片信息",
dataIndex: "",
width: 200
}
]
const handelDelete = async (id: number) => {
console.log('fjsdfsdflksa', id);
const req: any = {
SERVERPARTSELLERId: id
}
const result = await handleDeleteSERVERPARTSELLER(req)
if (result.Result_Code !== 100) {
message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
} else {
message.success('删除成功!');
actionRef.current?.reload()
}
};
const handleAddUpdate = async (res: any) => {
let req: any = {}
if (currentRow?.SELLER_ID) {
req = {
...currentRowDetail,
...res,
UPDATE_STAFF_ID: currentUser?.ID,
UPDATE_STAFF_NAME: currentUser?.Name,
UPDATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
}
} else {
req = {
...res,
PROVINCE_CODE: currentUser?.ProvinceCode,
ISVALID: 1,
CREATE_STAFF_ID: currentUser?.ID,
CREATE_STAFF_NAME: currentUser?.Name,
CREATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
}
}
const data = await handleSynchroSERVERPARTSELLER(req)
handleConfirmLoading(false)
if (data.Result_Code === 100) {
message.success(data.Result_Desc)
formRef?.current?.resetFields()
setCurrentRow(undefined)
handleModalVisible(false)
actionRef.current?.reload()
} else {
message.error(data.Result_Desc)
}
};
// 移除门店关联
const handleRemoveSeller = async (obj: any) => {
const req: any = {
SellerId: obj.SELLER_ID,
ShopIds: obj?.SERVERPARTSHOP_ID
}
const result = await handleRemoveShopFromSeller(req)
if (result.Result_Code !== 100) {
message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
} else {
message.success('删除成功!');
// formRef.current?.resetFields()
await handleGetMemberDetail()
}
}
// 服务区商家的详情信息
const handleGetMemberDetail = async () => {
if (currentRow?.SELLER_ID) {
const data = await handleGetSERVERPARTSELLERDetail({ SERVERPARTSELLERId: currentRow?.SELLER_ID })
setCurrentShopData(data.ShopList)
setCurrentRowDetail(data)
formRef.current?.setFieldsValue(data)
return {
...data,
SHOPTRADE: currentRow?.SHOPTRADE ? Number(currentRow?.SHOPTRADE) : ""
}
} else {
return {
ISSHOW: 1
}
}
}
return (
<div>
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
<LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
<div style={{
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
paddingTop: 0,
paddingBottom: 0,
paddingRight: 0
}}>
<ProTable
style={{ height: 'calc(100vh - 135px)', background: '#fff' }}
scroll={{ y: 'calc(100vh - 410px)' }}
rowKey={(record) => {
return `${record?.SERVERPARTSELLER_ID}`
}}
bordered
formRef={formRef}
headerTitle="服务区商家信息列表" // 列表表头
actionRef={actionRef}
search={{ span: 6, labelWidth: 'auto' }}
// 请求数据
request={async (params, sorter) => {
if (!selectedId) {
return
}
const req = {
searchParameter: {
SERVERPART_IDS: selectedId,
SHOPTRADES: params?.SHOPTRADES,
ISVALID: 1
},
PageIndex: params.current,
PageSize: params.pageSize,
}
console.log('reqreqreqreq', req);
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 }
}}
columns={columns}
toolbar={{
actions: [
// 新增按钮
<Button
key="new"
icon={<PlusOutlined />}
type="primary"
onClick={() => {
// setShowAddModal(true)
handleModalVisible(true);
}}
>
</Button>,
],
}}
pagination={{ defaultPageSize: 10 }}
/>
</div>
</div>
{/* 添加服务区商家信息表 */}
<Modal
title={'新建服务区商家信息'}
destroyOnClose
width={'75%'}
visible={showAddModal}
afterClose={() => {
}}
onCancel={() => {
setShowAddModal(false)
setSelectRowKeys(null)
setSelectRowDetail(null)
}}
okText={"关联"}
onOk={async () => { // 提交框内的数据
console.log('selectedRowKeysselectedRowKeysselectedRowKeys', selectedRowKeys);
if (!(selectedRowKeys && selectedRowKeys.length > 0)) {
message.error('请选择要关联的门店!')
return
}
// 关联 接口
const req: any = {
SellerId: currentRow?.SELLER_ID,
ShopIds: selectedRowKeys.toString()
}
const data = await handleGetRelateShopToSeller(req)
if (data.Result_Code === 100) {
message.success(data.Result_Desc)
setShowAddModal(false)
setSelectRowKeys(null)
setSelectRowDetail(null)
// formRef.current?.resetFields()
handleGetMemberDetail()
} else {
message.error(data.Result_Desc)
}
}}
>
<div style={{ display: 'flex', alignItems: 'flex-start' }}>
<LeftSelectTree setSelectedId={setSelectAssociationServerpart} />
<div style={{ width: 'calc(100% - 300px)' }}>
<ProTable
actionRef={associationActionRef}
columns={merchantColumns}
scroll={{ x: '100%', y: '400px' }}
bordered
rowKey={"SERVERPARTSHOP_ID"}
request={async (params) => {
if (!selectAssociationServerpart) {
return
}
const req: any = {
searchParameter: {
SERVERPART_IDS: selectAssociationServerpart,
ISVALID: params?.ISVALID,
BUSINESS_STATE: params?.BUSINESS_STATE
},
PageIndex: 1,
PageSize: 999999,
SortStr: "SHOPTRADE,SHOPREGION,SHOPSHORTNAME,SHOPCODE"
}
const data = await handleGetSERVERPARTSHOPList(req)
if (data.List && data.List.length > 0) {
let list: any = []
data.List.forEach((item: any) => {
if (!item.SELLER_ID) {
list.push(item)
}
})
console.log('datadatadatadatadata2', list);
return { data: list, success: true }
}
return { data: [], success: true }
}}
pagination={false}
rowSelection={{
type: 'checkbox',
onChange: (rowKeys, rowDetail) => {
setSelectRowKeys(rowKeys)
setSelectRowDetail(rowDetail)
},
}}
/>
</div>
</div>
</Modal>
<Modal
title={
<div
style={{
width: '100%',
cursor: 'move',
}}
onMouseOver={() => {
if (disabled) {
setDraggleDisabled(false)
}
}}
onMouseOut={() => {
setDraggleDisabled(true)
}}
onFocus={() => { }}
onBlur={() => { }}
>
{currentRow ? '更新服务区商家信息' : '新建服务区商家信息'}
</div>
}
destroyOnClose={true}
width={'65%'}
visible={modalVisible}
confirmLoading={confirmLoading}
afterClose={() => {
formRef.current?.resetFields();
setCurrentRow(undefined);
}}
onCancel={() => {
handleConfirmLoading(false)
handleModalVisible(false)
setCurrentRowDetail(null)
setCurrentRow(null)
}}
// 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)}
>
<div ref={draggleRef}>{modal}</div>
</Draggable>
}}
footer={<div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
{
currentRow?.SELLER_ID ?
<div>
<Button type={"primary"} onClick={() => {
setShowAddModal(true)
}}></Button>
<Button type={"primary"}></Button>
</div>
: <div></div>
}
<div>
<Button onClick={() => {
handleConfirmLoading(false)
handleModalVisible(false)
setCurrentRowDetail(null)
setCurrentRow(null)
}}></Button>
<Button type={"primary"} onClick={() => {
formRef?.current?.validateFields().then(() => {
handleConfirmLoading(true)
formRef?.current?.submit()
})
}}></Button>
</div>
</div>}
>
<ProForm
layout={'horizontal'}
formRef={formRef}
autoFocusFirstInput
submitter={false}
preserve={false}
request={async () => {
const data = await handleGetMemberDetail()
return data
// if (currentRow?.SELLER_ID) {
// const data = await handleGetSERVERPARTSELLERDetail({ SERVERPARTSELLERId: currentRow?.SELLER_ID })
// console.log('fdsjkfjsadl', data);
// setCurrentShopData(data.ShopList)
// setCurrentRowDetail(data)
// return {
// ...data,
// SHOPTRADE: currentRow?.SHOPTRADE ? Number(currentRow?.SHOPTRADE) : ""
// }
// } else {
// return {
// ISSHOW: 1
// }
// }
}}
// initialValues={{
// ...currentRow,
// SHOPTRADE: currentRow?.SHOPTRADE ? Number(currentRow?.SHOPTRADE) : ""
// }}
onFinish={async (values) => {
let newValue: any = { ...values };
if (currentRow) {
// 编辑数据
newValue = {
...values,
SERVERPARTSELLER_ID: currentRow.SERVERPARTSELLER_ID,
ShopList: currentShopData
};
}
await handleAddUpdate(newValue);
}}
>
<Row gutter={8}>
<Col span={8}>
<ProFormText
name="SELLER_NAME"
label="商家名称"
rules={[
{
required: true,
message: '请输入商家名称!'
}
]}
/>
</Col>
<Col span={8}>
<ProFormSelect
name="SHOPTRADE"
label="门店业态"
options={SHOPTRADEList}
rules={[
{
required: true,
message: '请选择门店业态!'
}
]}
/>
</Col>
<Col span={8}>
<ProFormText
name="SELLER_INDEX"
label="排序索引"
/>
</Col>
<Col span={8}>
<ProFormText
name="BUS_STARTDATE"
label="营业时间"
/>
</Col>
<Col span={8}>
<ProFormSelect
name="SERVERPART_ID"
label="服务区名"
options={serverpartList}
rules={[
{
required: true,
message: '请选择服务区!'
}
]}
fieldProps={{
showSearch: true,
filterOption: (input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}}
/>
</Col>
<Col span={8}>
<ProFormSelect
name="ISSHOW"
label="小程序呈现"
options={[
{ label: "是", value: 1 },
{ label: "否", value: 0 },
]}
rules={[
{
required: true,
message: '请选择是否在小程序呈现'
}
]}
/>
</Col>
<Col span={8}>
<ProFormText
name="MONTHLYSALES"
label="上月销量"
/>
</Col>
<Col span={8}>
<ProFormText
name="CASHPAY"
label="月销售额"
/>
</Col>
<Col span={8}>
<ProFormText
name="PERCAPITA"
label="人均价格"
/>
</Col>
<Col span={8}>
<ProFormText
name="SELLER_LINKMAN"
label="联系人员"
/>
</Col>
<Col span={8}>
<ProFormText
name="SELLER_TELEPHONE"
label="商家电话"
/>
</Col>
<Col span={8}>
<ProFormText
name="SELLER_ADDRESS"
label="商家地址"
/>
</Col>
<Col span={24}>
<ProFormText
name="SELF_COMMENT"
label="掌柜寄语"
/>
</Col>
<Col span={24}>
<ProFormTextArea
name="SELLER_DESC"
label="商家介绍"
/>
</Col>
</Row>
<Tabs
onChange={(e: any) => {
setSelectTab(e)
}}
activeKey={selectTab}
type="card"
items={[
{ label: "门店信息", key: "1" },
{ label: "评论信息", key: "2" },
]}
/>
<ProTable
search={false}
options={false}
columns={shopColumns}
bordered
style={{ display: selectTab === '1' ? 'block' : 'none' }}
dataSource={currentShopData}
/>
<div style={{ display: selectTab === '1' ? 'block' : 'none' }}>
<Row gutter={8}>
<Col span={8}>
<ProFormUploadButton
label={"商家Logo"}
name={""}
/>
</Col>
<Col span={8}>
<ProFormUploadButton
label={"门头图片"}
name={""}
/>
</Col>
<Col span={8}>
<ProFormUploadButton
label={"内景图片"}
name={""}
/>
</Col>
</Row>
</div>
<ProTable
search={false}
options={false}
bordered
columns={commentColumns}
style={{ display: selectTab === '2' ? 'block' : 'none' }}
request={async () => {
const req: any = {
}
}}
/>
</ProForm>
</Modal>
</div>
);
};
export default connect(({ user }: ConnectState) => ({
currentUser: user.currentUser
}))(MerchantInformation);