1035 lines
44 KiB
TypeScript
1035 lines
44 KiB
TypeScript
// 点餐商品管理
|
|
import React, { useRef, useState, Suspense, Children, useEffect } 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, ProFormDateRangePicker, ProFormDateTimePicker, ProFormDateTimeRangePicker, ProFormDigit, ProFormMoney, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, 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 } 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 { getFieldEnumTree, getFieldEnumName } from "@/services/options"; // 枚举的引用，没有使用可以删除
|
|
import { handeDeleteCOMMODITY, handeGetBusinessCommodityList, handeGetCOMMODITYList, handeGetSellerCommodityList, handeSynchroCOMMODITY, handeSyncSellerCommodityInfo, handlDeleteUSERDEFINEDTYPE, handlGetUSERDEFINEDTYPEList, handlSynchroUSERDEFINEDTYPE } from '../service';
|
|
import PageTitleBox from '@/components/PageTitleBox';
|
|
import { deletePicture, SavePicture, uploadPicture } from '@/services/picture';
|
|
import defaultIcon from '../../../assets/brand/defaultIcon.png'
|
|
import OrderCategoryTree from './components/OrderCategoryTree';
|
|
import OrderCategoryManage from '../OrderCategoryManage';
|
|
import session from '@/utils/session';
|
|
import OrderCategoryTreeMultiple from './components/OrderCategoryTreeMultiple';
|
|
import Item from 'antd/lib/list/Item';
|
|
|
|
|
|
const beforeUpload = (file: any) => {
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
if (!isJpgOrPng) {
|
|
message.error('请上传JPEG、jpg、png格式的图片文件!');
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.error('图片大小不超过 2MB!');
|
|
}
|
|
return isJpgOrPng && isLt2M;
|
|
}
|
|
|
|
|
|
const OrderProductManage: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
|
const { currentUser } = props
|
|
const { confirm } = Modal;
|
|
const actionRef = useRef<ActionType>();
|
|
const selectMerchantActionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
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 [typeTreeData, setTypeTreeData] = useState<any>()
|
|
// 表单里面的是否预售
|
|
const [formPRESALE_TYPE, setFormPRESALE_TYPE] = useState<boolean>(false)
|
|
const serverpartObj = session.get('serverpartObj')
|
|
|
|
// 弹出框拖动效果
|
|
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
|
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
|
const draggleRef = React.createRef<any>()
|
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
|
|
|
// 文件列表
|
|
const [fileList, setFileList] = useState<any>([])
|
|
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 显示新增点餐分类的悬浮框
|
|
const [showFoodTypeModal, setShowFoodTypeModal] = useState<boolean>(false)
|
|
// 获取商品的悬浮框
|
|
const [getProducts, setGetProducts] = useState<boolean>(false)
|
|
// 判断是否是第一次进入到页面
|
|
const [isFirst, setIsFirst] = useState<boolean>(true)
|
|
// 选择要上架的商品
|
|
const [selectListShop, setSelectListShop] = useState<any>()
|
|
// 点击选择了的商品上架的加载效果
|
|
const [selectListShopLoading, setSelectListShopLoading] = useState<boolean>(false)
|
|
// 选择的当前商家
|
|
const [selectMerchant, setSelectMerchant] = useState<any>()
|
|
|
|
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: 'searchText',
|
|
title: '查询内容',
|
|
hideInTable: true,
|
|
fieldProp: {
|
|
placeholder: "请输入商品名称"
|
|
}
|
|
},
|
|
|
|
// {
|
|
// title: '查询时间',
|
|
// dataIndex: 'search_date',
|
|
// valueType: 'dateRange',
|
|
// hideInTable: true,
|
|
// hideInDescriptions: true,
|
|
// search: {
|
|
// transform: (value) => {
|
|
// return {
|
|
// OPERATE_DATE_Start: value[0],
|
|
// OPERATE_DATE_End: value[1],
|
|
// };
|
|
// },
|
|
// },
|
|
// // initialValue: [moment().format('YYYY-MM-DD'), moment().subtract(1, 'M').format('YYYY-MM-DD')],
|
|
// },
|
|
// {
|
|
// title: '上级类别',
|
|
// align: 'center',
|
|
// width: 150,
|
|
// ellipsis: true,
|
|
// dataIndex: 'USERDEFINEDTYPE_PID',
|
|
// hideInSearch: true,
|
|
// hideInDescriptions: true,
|
|
// },
|
|
{
|
|
title: '服务区',
|
|
dataIndex: "SERVERPART_IDS",
|
|
hideInTable: true,
|
|
valueType: 'select',
|
|
valueEnum: serverpartObj,
|
|
fieldProps: {
|
|
showSearch: true, // 支持输入文字搜索
|
|
filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'USERDEFINEDTYPE_NAME',
|
|
title: '商品类别',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
hideInDescriptions: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NAME',
|
|
title: '商品名称',
|
|
align: 'center',
|
|
width: 300,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.COMMODITY_NAME ? <a onClick={() => {
|
|
console.log('recordrecordrecord', record);
|
|
|
|
setCurrentRow(record)
|
|
setShowDetail(true)
|
|
}}>{record?.COMMODITY_NAME}</a> : ""
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_RETAILPRICE',
|
|
title: '零售价',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_UNIT',
|
|
title: '商品单位',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_RULE',
|
|
title: '商品规格',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'UPPER_STATE',
|
|
title: '上架状态',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
valueType: "select",
|
|
valueEnum: {
|
|
"-1": "全部",
|
|
"1": "上架",
|
|
"0": "下架"
|
|
},
|
|
initialValue: '-1'
|
|
},
|
|
{
|
|
dataIndex: 'OPERATE_DATE',
|
|
title: '修改时间',
|
|
align: 'center',
|
|
width: 180,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'SERVERPART_NAME',
|
|
title: '服务区名称',
|
|
align: 'center',
|
|
width: 180,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'SHOPNAME',
|
|
title: '门店名称',
|
|
align: 'center',
|
|
width: 180,
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
}
|
|
];
|
|
// 新增商品的columns
|
|
const getProductsColumns: any = [
|
|
{
|
|
title: '查询内容',
|
|
dataIndex: 'SearchKeyValue',
|
|
hideInTable: true,
|
|
},
|
|
{
|
|
title: "序号",
|
|
width: 70,
|
|
dataIndex: "index",
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
valueType: "index"
|
|
},
|
|
{
|
|
title: "商品名称",
|
|
width: 300,
|
|
dataIndex: "COMMODITY_NAME",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "商品条码",
|
|
width: 200,
|
|
dataIndex: "COMMODITY_BARCODE",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "零售价",
|
|
width: 150,
|
|
dataIndex: "COMMODITY_RETAILPRICE",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "商品单位",
|
|
width: 150,
|
|
dataIndex: "COMMODITY_UNIT",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "商品规格",
|
|
width: 150,
|
|
dataIndex: "COMMODITY_RULE",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
]
|
|
|
|
// 预览上传后的图片
|
|
const handlePreview = async () => {
|
|
setFileList(fileList)
|
|
setImagePreviewVisible(true)
|
|
};
|
|
const handleChangePreview = (val: any) => {
|
|
setImagePreviewVisible(val)
|
|
}
|
|
|
|
const handelDelete = async (commodityid: number) => {
|
|
const result = await handeDeleteCOMMODITY({ COMMODITYId: commodityid });
|
|
|
|
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 = {}
|
|
console.log('resresresresresres', res);
|
|
|
|
if (currentRow?.COMMODITY_ID) {
|
|
req = {
|
|
...currentRow,
|
|
...res,
|
|
// MERCHANTS_ID: selectedId,
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
OWNERUNIT_NAME: currentUser?.OwnerUnitName,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
}
|
|
} else {
|
|
req = {
|
|
...res,
|
|
// MERCHANTS_ID: selectedId,
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
OWNERUNIT_NAME: currentUser?.OwnerUnitName,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
}
|
|
}
|
|
// const data = await handeSynchroCOMMODITY(req)
|
|
if (res.ImageInfo && res.ImageInfo.length > 0) {
|
|
let imageData = await handleUploadShopImg(res)
|
|
console.log('imageData', imageData);
|
|
let imgList: any = imageData.Result_Data
|
|
req.ImageInfo = imgList
|
|
}
|
|
|
|
console.log('reqreqreqreqreq', req);
|
|
|
|
|
|
const data = await handeSyncSellerCommodityInfo({ list: [req] })
|
|
handleConfirmLoading(false)
|
|
if (data.Result_Code === 100) {
|
|
|
|
message.success("同步成功！")
|
|
setCurrentRow(undefined)
|
|
formRef?.current?.resetFields()
|
|
handleConfirmLoading(false)
|
|
setShowDetail(false)
|
|
setFileList([])
|
|
actionRef.current?.reload()
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
};
|
|
|
|
// 上传商品图片
|
|
const handleUploadShopImg = async (formRes: any) => {
|
|
|
|
if (formRes.ImageInfo && formRes.ImageInfo.length > 0) {
|
|
const formData = new FormData();
|
|
formRes.ImageInfo.forEach((file: any) => {
|
|
formData.append('files[]', file.originFileObj);
|
|
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
|
});
|
|
formData.append('imageType', "1000");
|
|
formData.append('TableType', "1207");
|
|
|
|
console.log('formData', formData);
|
|
let res = await SavePicture(formData)
|
|
return res
|
|
}
|
|
|
|
}
|
|
|
|
// 获取商品类别的树
|
|
const handleGetCOMMODITYTYPE = async () => {
|
|
const req = {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: "",
|
|
GOODSTYPE: 3000,
|
|
USERDEFINEDTYPE_STATE: 1
|
|
// SearchKey: ""
|
|
}
|
|
let data = await handlGetUSERDEFINEDTYPEList(req);
|
|
console.log('datadatadatadatadata2', data);
|
|
if (data && data.length > 0) {
|
|
// data.unshirft({ USERDEFINEDTYPE_NAME: "默认类别", USERDEFINEDTYPE_ID: -1 })
|
|
|
|
setTypeTreeData(processTreeData(data))
|
|
} else {
|
|
setTypeTreeData([])
|
|
}
|
|
|
|
}
|
|
const processTreeData = (data: any) => {
|
|
return data.map((item: any) => {
|
|
if (item.children && item.children.length > 0) {
|
|
return {
|
|
...item,
|
|
disabled: true, // 有子节点的节点禁用
|
|
children: processTreeData(item.children)
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
};
|
|
useEffect(async () => {
|
|
await handleGetCOMMODITYTYPE()
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
{/* 单选的 */}
|
|
{/* <OrderCategoryTree setSelectedId={setSelectedId} selectedId={selectedId} setCollapsible={setCollapsible} collapsible={collapsible} /> */}
|
|
{/* 多选的 */}
|
|
<OrderCategoryTreeMultiple setSelectedId={setSelectedId} selectedId={selectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
|
|
|
|
<div style={{
|
|
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
}}>
|
|
<ProTable
|
|
scroll={{ x: "100%", y: 'calc(100vh - 410px)' }}
|
|
rowKey={(record) => {
|
|
return `${record?.COMMODITY_ID}-${record?.OPERATE_DATE}`
|
|
}}
|
|
formRef={formRef}
|
|
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
|
actionRef={actionRef}
|
|
search={{ span: 6, labelWidth: 'auto' }}
|
|
bordered
|
|
// 请求数据
|
|
request={async (params, sorter) => {
|
|
if (isFirst) {
|
|
setIsFirst(false)
|
|
return []
|
|
}
|
|
|
|
console.log('selectedId', selectedId);
|
|
|
|
|
|
const req = {
|
|
searchParameter: {
|
|
// OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
SERVERPART_IDS: params?.SERVERPART_IDS || "",
|
|
SELLER_IDS: selectedId || "",
|
|
UPPER_STATE: params?.UPPER_STATE === "-1" ? "" : params?.UPPER_STATE,
|
|
|
|
// OPERATE_DATE_Start: params?.OPERATE_DATE_Start || "",
|
|
// OPERATE_DATE_End: params?.OPERATE_DATE_End || "",
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: "OPERATE_DATE desc",
|
|
keyWord: {
|
|
Key: "COMMODITY_NAME",
|
|
Value: params?.searchText || ""
|
|
},
|
|
|
|
}
|
|
console.log('reqreqreqreq', req);
|
|
|
|
const data = await handeGetSellerCommodityList(req);
|
|
// const data = await handeGetCOMMODITYList(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 type={"primary"} onClick={() => {
|
|
setGetProducts(true)
|
|
}}>获取商品</Button>
|
|
{/* < Button type={"primary"} onClick={() => {
|
|
setShowDetail(true)
|
|
}}>新增商品</Button> */}
|
|
</>
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 图片预览组件 */}
|
|
{
|
|
fileList && fileList.length > 0 && <div style={{ display: 'none' }}>
|
|
<Image.PreviewGroup
|
|
preview={{
|
|
visible: imagePreviewVisible,
|
|
onVisibleChange: vis => {
|
|
handleChangePreview(vis)
|
|
}
|
|
}}>
|
|
{
|
|
fileList.map((n) => <Image src={n.url} key={n.url} />)
|
|
}
|
|
</Image.PreviewGroup>
|
|
</div>
|
|
}
|
|
|
|
|
|
<Modal
|
|
title={
|
|
<div
|
|
className="modal-drag-title"
|
|
style={{
|
|
width: '100%',
|
|
cursor: 'move',
|
|
}}
|
|
onMouseOver={() => {
|
|
if (disabled) {
|
|
setDraggleDisabled(false)
|
|
}
|
|
}}
|
|
onMouseOut={() => {
|
|
setDraggleDisabled(true)
|
|
}}
|
|
|
|
onFocus={() => { }}
|
|
onBlur={() => { }}
|
|
>
|
|
{currentRow?.COMMODITY_ID ? '编辑商品详情' : '新增商品'}
|
|
</div>
|
|
}
|
|
destroyOnClose={true}
|
|
width={1200}
|
|
visible={showDetail}
|
|
confirmLoading={confirmLoading}
|
|
afterClose={() => {
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}}
|
|
onCancel={() => {
|
|
handleConfirmLoading(false)
|
|
setShowDetail(false)
|
|
setCurrentRow(undefined)
|
|
setFileList([])
|
|
}}
|
|
|
|
onOk={async () => { // 提交框内的数据
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}
|
|
bodyStyle={{
|
|
maxHeight: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
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'}
|
|
formRef={formRef}
|
|
autoFocusFirstInput
|
|
submitter={false}
|
|
preserve={false}
|
|
request={async () => {
|
|
if (currentRow) {
|
|
if (currentRow?.ImageInfo && currentRow?.ImageInfo.length > 0) {
|
|
let list: any = []
|
|
currentRow?.ImageInfo.forEach((item: any) => {
|
|
let obj = JSON.parse(JSON.stringify(item))
|
|
obj.url = obj.ImageUrl
|
|
obj.name = obj.ImageName
|
|
obj.uid = item.ImageId
|
|
obj.status = 'done'
|
|
list.push(obj)
|
|
})
|
|
setFileList(list)
|
|
}
|
|
|
|
return {
|
|
...currentRow,
|
|
OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
}
|
|
} else {
|
|
return {
|
|
OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
OPERATE_PERSON: currentUser?.Name,
|
|
UPPER_STATE: 1
|
|
}
|
|
}
|
|
}}
|
|
// initialValues={currentRow ? {
|
|
// ...currentRow,
|
|
// OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
// } : {
|
|
// OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
// OPERATE_PERSON: currentUser?.Name,
|
|
// UPPER_STATE: 1
|
|
// }}
|
|
onFinish={async (values) => {
|
|
let newValue = { ...values };
|
|
if (currentRow) {
|
|
// 编辑数据
|
|
newValue = { ...values };
|
|
}
|
|
console.log('currentRowcurrentRowcurrentRow', currentRow);
|
|
|
|
// 如果有开关，要把开关的代码写进去
|
|
await handleAddUpdate(newValue);
|
|
|
|
handleConfirmLoading(false)
|
|
setFormPRESALE_TYPE(false)
|
|
}}
|
|
>
|
|
<Row gutter={8}>
|
|
<Col span={8}>
|
|
<Row gutter={8}>
|
|
<Col span={18}>
|
|
<ProFormTreeSelect
|
|
name="USERDEFINEDTYPE_ID"
|
|
label="商品类别"
|
|
request={async () => {
|
|
const req = {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: "",
|
|
GOODSTYPE: 3000,
|
|
USERDEFINEDTYPE_STATE: 1
|
|
// SearchKey: ""
|
|
}
|
|
let data = await handlGetUSERDEFINEDTYPEList(req);
|
|
console.log('datadatadatadatadata2', data);
|
|
if (data && data.length > 0) {
|
|
// data.unshirft({ USERDEFINEDTYPE_NAME: "默认类别", USERDEFINEDTYPE_ID: -1 })
|
|
return processTreeData(data)
|
|
} else {
|
|
return []
|
|
}
|
|
}}
|
|
fieldProps={{
|
|
fieldNames: {
|
|
label: 'USERDEFINEDTYPE_NAME',
|
|
value: 'USERDEFINEDTYPE_ID',
|
|
children: 'children'
|
|
},
|
|
showSearch: true,
|
|
treeDefaultExpandAll: true,
|
|
filterTreeNode: (input, node) =>
|
|
(node.USERDEFINEDTYPE_NAME || '').toLowerCase().includes(input.toLowerCase()),
|
|
onChange: (value, label) => {
|
|
console.log('value', value);
|
|
console.log('label', label);
|
|
|
|
formRef.current?.setFieldsValue({
|
|
USERDEFINEDTYPE_NAME: label.toString(),
|
|
USERDEFINEDTYPE_ID: value
|
|
});
|
|
}
|
|
}}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择上级类别"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={4}>
|
|
<Button type='primary' onClick={() => {
|
|
setShowFoodTypeModal(true)
|
|
}}>新增</Button>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
<Col style={{ display: 'none' }}>
|
|
<ProFormText
|
|
name="USERDEFINEDTYPE_NAME"
|
|
label=""
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="COMMODITY_NAME"
|
|
label="商品名称"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品名称"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDigit
|
|
name="COMMODITY_BARCODE"
|
|
label="商品条码"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="COMMODITY_STOCK"
|
|
label="每日可售"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDatePicker
|
|
width={'lg'}
|
|
name="UPPER_DATE"
|
|
label="生效时间"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: '请选择生效时间'
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDatePicker
|
|
width={'lg'}
|
|
name="OFF_DATE"
|
|
label="下架时间"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="COMMODITY_UNIT"
|
|
label="商品单位"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="COMMODITY_RULE"
|
|
label="商品规格"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDigit
|
|
name="COMMODITY_RETAILPRICE"
|
|
label="零售价格"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入零售价格"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDigit
|
|
name="COMMODITY_PURCHASEPRICE"
|
|
label="进货价格"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormDigit
|
|
name="COMMODITY_MEMBERPRICE"
|
|
label="会员价格"
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormSelect
|
|
name="UPPER_STATE"
|
|
label="上架状态"
|
|
options={[{ label: "已上架", value: 1 }, { label: "未上架", value: 0 }]}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择上架状态"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="STAFF_NAME"
|
|
label="操作人员"
|
|
disabled
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<ProFormText
|
|
name="OPERATE_DATE"
|
|
label="操作时间"
|
|
disabled
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormText
|
|
name="COMMODITY_EN"
|
|
label="商品简介"
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormUploadButton
|
|
name="ImageInfo"
|
|
label="商品图片"
|
|
listType="picture-card"
|
|
accept="image/*"
|
|
fieldProps={{
|
|
beforeUpload,
|
|
maxCount: 1,
|
|
onPreview: handlePreview,
|
|
fileList: fileList, // 绑定 fileList
|
|
onChange: async (info: any) => {
|
|
if (info.file.status === 'removed') {
|
|
const index = fileList.findIndex(n => n.uid === info.file.uid);
|
|
confirm({
|
|
title: '确认删除该文件吗？',
|
|
icon: <ExclamationCircleOutlined />,
|
|
async onOk() {
|
|
if (info.file.ImageId) {
|
|
const deleteLoading = message.loading('正在删除...')
|
|
const success = await deletePicture(info.file?.ImagePath, info.file?.uid, '', '6000')
|
|
await handeSyncSellerCommodityInfo({
|
|
list: [{
|
|
...currentRow,
|
|
ImageInfo: null
|
|
}]
|
|
})
|
|
deleteLoading()
|
|
|
|
if (success) {
|
|
const files = [...fileList]
|
|
files.splice(index, 1)
|
|
setFileList(files)
|
|
message.success("删除成功")
|
|
actionRef.current?.reload()
|
|
}
|
|
else {
|
|
message.error("删除失败")
|
|
}
|
|
} else {
|
|
const files = [...fileList];
|
|
files.splice(index, 1);
|
|
setFileList(files);
|
|
}
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
} else {
|
|
setFileList(info.fileList)
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title={"新增点餐分类"}
|
|
destroyOnClose={true}
|
|
width={1400}
|
|
visible={showFoodTypeModal}
|
|
footer={false}
|
|
onCancel={() => {
|
|
setShowFoodTypeModal(false)
|
|
}}
|
|
bodyStyle={{
|
|
maxHeight: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
>
|
|
<OrderCategoryManage />
|
|
</Modal>
|
|
|
|
|
|
{/* 获取商品的悬浮框 */}
|
|
<Modal
|
|
title={"获取商品"}
|
|
destroyOnClose={true}
|
|
width={1200}
|
|
bodyStyle={{
|
|
height: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={getProducts}
|
|
footer={<div style={{ width: "100%", display: 'flex', justifyContent: 'flex-end', boxSizing: 'border-box', padding: '0 16px' }}>
|
|
<Button type={"primary"} loading={selectListShopLoading} onClick={async () => {
|
|
if (selectListShop && selectListShop.length > 0) {
|
|
setSelectListShopLoading(true)
|
|
console.log('selectListShopselectListShopselectListShop', selectListShop);
|
|
|
|
let idList: any = []
|
|
|
|
selectListShop.forEach((item: any) => {
|
|
if (idList.indexOf(item.SELLER_ID) === -1) {
|
|
idList.push(item.SELLER_ID)
|
|
}
|
|
})
|
|
console.log('idList', idList);
|
|
|
|
let data: any = {}
|
|
for (let i = 0; i < idList.length; i++) {
|
|
let list: any = []
|
|
selectListShop.forEach((item: any) => {
|
|
let obj: any = JSON.parse(JSON.stringify(item))
|
|
// obj.MERCHANTS_ID = selectedId
|
|
obj.MERCHANTS_ID = item.SELLER_ID
|
|
obj.UPPER_STATE = 1
|
|
obj.STAFF_ID = currentUser?.ID
|
|
obj.STAFF_NAME = currentUser?.Name
|
|
obj.OPERATE_DATE = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
obj.PROVINCE_CODE = currentUser?.ProvinceCode
|
|
list.push(obj)
|
|
})
|
|
|
|
const req: any = {
|
|
list: list
|
|
}
|
|
console.log('req', req);
|
|
data = await handeSyncSellerCommodityInfo(req)
|
|
}
|
|
|
|
|
|
|
|
// let list: any = []
|
|
// selectListShop.forEach((item: any) => {
|
|
// let obj: any = JSON.parse(JSON.stringify(item))
|
|
// // obj.MERCHANTS_ID = selectedId
|
|
// obj.MERCHANTS_ID = item.SELLER_ID
|
|
// obj.UPPER_STATE = 1
|
|
// obj.STAFF_ID = currentUser?.ID
|
|
// obj.STAFF_NAME = currentUser?.Name
|
|
// obj.OPERATE_DATE = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
// obj.PROVINCE_CODE = currentUser?.ProvinceCode
|
|
// list.push(obj)
|
|
// })
|
|
|
|
// const req: any = {
|
|
// list: list
|
|
// }
|
|
// console.log('req', req);
|
|
|
|
// const data = await handeSyncSellerCommodityInfo(req)
|
|
// console.log('data', data);
|
|
if (data.Result_Code === 100) {
|
|
message.success("同步成功!")
|
|
setGetProducts(false)
|
|
setSelectListShop([])
|
|
setSelectListShopLoading(false)
|
|
actionRef.current?.reload()
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
} else {
|
|
message.error('请勾选需要上架的商品！')
|
|
}
|
|
}}>确认上架</Button>
|
|
</div>}
|
|
onCancel={() => {
|
|
setGetProducts(false)
|
|
setSelectListShop([])
|
|
setSelectListShopLoading(false)
|
|
setSelectMerchant([])
|
|
}}
|
|
>
|
|
|
|
<div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
|
{/* <div style={{ width: '300px', height: '100%' }}> */}
|
|
{/* <OrderCategoryTree setSelectedId={setSelectMerchant} selectedId={selectMerchant} reload={true} actionRef={selectMerchantActionRef} /> */}
|
|
{/* <OrderCategoryTreeMultiple setSelectedId={setSelectedId} selectedId={selectedId} setCollapsible={setCollapsible} collapsible={collapsible} /> */}
|
|
{/* </div> */}
|
|
<div style={{ width: '100%', height: '100%' }}>
|
|
<ProTable
|
|
actionRef={selectMerchantActionRef}
|
|
columns={getProductsColumns}
|
|
bordered
|
|
scroll={{ x: '100%', y: '450px' }}
|
|
rowKey={"COMMODITY_ID"}
|
|
options={false}
|
|
request={async (params) => {
|
|
console.log('selectedIdselectedIdselectedId', selectedId);
|
|
|
|
const req: any = {
|
|
ProvinceCode: currentUser?.ProvinceCode,
|
|
ServerpartShopId: "",
|
|
// SellerId: selectMerchant?.toString(),
|
|
SellerId: selectedId?.toString(),
|
|
SearchKeyName: "COMMODITY_NAME",
|
|
SearchKeyValue: params?.SearchKeyValue || "",
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: ""
|
|
}
|
|
console.log('reqreqreqreq', req);
|
|
const data = await handeGetBusinessCommodityList(req)
|
|
console.log('datadatadatadata', data);
|
|
if (data.List && data.List.length > 0) {
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
rowSelection={{
|
|
type: "checkbox",
|
|
onChange: (_, selectedRows) => {
|
|
setSelectListShop(selectedRows)
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div >
|
|
);
|
|
};
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(OrderProductManage); |