// 商家信息管理 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(); const formRef = useRef(); const formMerchantRef = useRef(); const associationActionRef = useRef(); const [currentRow, setCurrentRow] = useState(); const [showDetail, setShowDetail] = useState(); const [modalVisible, handleModalVisible] = useState(); const [confirmLoading, handleConfirmLoading] = useState(false) // 弹出框的内容表单是否在提交 const [searchParams, setSearchParams] = useState(); // 树相关的属性和方法 const [selectedId, setSelectedId] = useState() const [collapsible, setCollapsible] = useState(false) // 新增关联选择的方法 const [selectedRowKeys, setSelectRowKeys] = useState(); const [selectedRowDetail, setSelectRowDetail] = useState(); // 在关联编辑页里面的tab选择 const [selectTab, setSelectTab] = useState("1") // 当前编辑商家的关联门店数据 const [currentShopData, setCurrentShopData] = useState() // 当前编辑商家的详情 const [currentRowDetail, setCurrentRowDetail] = useState() // 选择的 要关联的服务区 const [selectAssociationServerpart, setSelectAssociationServerpart] = useState() 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() // 是否拖动 const draggleRef = React.createRef() // 显示新增门店功能悬浮框 const [showAddModal, setShowAddModal] = useState(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 ( { console.log('recordrecordrecordrecord', record); setCurrentRow({ ...record }); handleModalVisible(true); }} > 编辑 { await handelDelete(record.SELLER_ID); }} > 删除 ); }, }, ]; // 关联商家的表格 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 { 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 } }, { 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 { await handleRemoveSeller(record) }} > 解除关联 } } ] // 评论信息表格 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 (
{ 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: [ // 新增按钮 , ], }} pagination={{ defaultPageSize: 10 }} />
{/* 添加服务区商家信息表 */} { }} 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) } }} >
{ 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) }, }} />
{ if (disabled) { setDraggleDisabled(false) } }} onMouseOut={() => { setDraggleDisabled(true) }} onFocus={() => { }} onBlur={() => { }} > {currentRow ? '更新服务区商家信息' : '新建服务区商家信息'}
} 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 onDraggaleStart(event, uiData)} >
{modal}
}} footer={
{ currentRow?.SELLER_ID ?
:
}
} > { 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); }} > (option?.label ?? '').toLowerCase().includes(input.toLowerCase()) }} /> { setSelectTab(e) }} activeKey={selectTab} type="card" items={[ { label: "门店信息", key: "1" }, { label: "评论信息", key: "2" }, ]} />
{ const req: any = { } }} />
); }; export default connect(({ user }: ConnectState) => ({ currentUser: user.currentUser }))(MerchantInformation);