1631 lines
77 KiB
TypeScript
1631 lines
77 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, ProFormDateRangePicker, ProFormDateTimePicker, 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, Divider, Input } 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 { getList, delcommodity, updatecommodity } from './service'; // 接口相关对象的引用
|
|
import PageTitleBox from "@/components/PageTitleBox";
|
|
import LeftSelectMallType from './component/LeftSelectMallType';
|
|
import { handeDeleteCOMMODITY, handeDeleteRTCOMMODITY_MULTI, handeGetCOMMODITY_MULTIList, handeGetCOMMODITYDetail, handeGetCOMMODITYList, handeGetMERCHANTSList, handeGetRTCOMMODITY_MULTIList, handeSynchroCOMMODITY, handeSynchroRTCOMMODITYMULTIList, handleGetBRANDList, handlGetUSERDEFINEDTYPEList } from '../service';
|
|
import session from '@/utils/session';
|
|
import { deletePicture, uploadPicture } from '@/services/picture';
|
|
import { handleSetlogSave } from '@/utils/format';
|
|
|
|
|
|
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 COMMODITYTable: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
|
const { currentUser } = props
|
|
const { confirm } = Modal;
|
|
const actionRef = useRef<ActionType>();
|
|
const ruleActionRef = 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 [collapsible, setCollapsible] = 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>()
|
|
// 商品属性
|
|
const COMMODITYNATUREObj = session.get('COMMODITYNATUREObj')
|
|
const COMMODITYNATUREList = session.get('COMMODITYNATUREList')
|
|
// 消费模式
|
|
const PAYMETHODObj = session.get('PAYMETHODObj')
|
|
const PAYMETHODList = session.get('PAYMETHODList')
|
|
// 税率
|
|
const DUTYPARAGRAPHObj = session.get('DUTYPARAGRAPHObj')
|
|
const DUTYPARAGRAPHList = session.get('DUTYPARAGRAPHList')
|
|
// 质量等级
|
|
const COMMODITYGRADEList = session.get('COMMODITYGRADEList')
|
|
// 在proform里面的品牌查询列表
|
|
const [BRAND_NAMEList, setBRAND_NAMEList] = useState<any>()
|
|
// 供货商户数据
|
|
const [COMMODITYSUPPLIERLIST, setCOMMODITYSUPPLIERLIST] = useState<any>()
|
|
// 拿到左侧树的数据
|
|
const [leftTreeData, setLeftTreeData] = useState<any>()
|
|
// 多规格
|
|
const [showMoreSpecs, setShowMoreSpecs] = useState<boolean>(false)
|
|
// 新增规格的 悬浮框
|
|
const [showAddSpecsModal, setShowAddSpecsModal] = useState<boolean>(false)
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 选择的规格内容
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<any>()
|
|
const [selectedRows, setSelectedRows] = useState<any>()
|
|
// 当前商品关联的规格数据
|
|
const [specsData, setSpecsData] = useState<any>()
|
|
// 主图图片
|
|
const [mainImgList, setMainImgList] = useState<any>()
|
|
// 头部轮播框
|
|
const [headerImgList, setHeaderImgList] = useState<any>()
|
|
// 详情图
|
|
const [detailImgList, setDetailImgList] = useState<any>()
|
|
// 文件列表
|
|
const [fileList, setFileList] = useState<any>([])
|
|
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
|
|
|
// 预览上传后的图片
|
|
const handlePreview = async () => {
|
|
setFileList(fileList)
|
|
setImagePreviewVisible(true)
|
|
};
|
|
const handleChangePreview = (val: any) => {
|
|
setImagePreviewVisible(val)
|
|
}
|
|
|
|
|
|
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: 'index',
|
|
title: '序号',
|
|
align: 'center',
|
|
width: 70,
|
|
ellipsis: true,
|
|
valueType: 'index',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'USERDEFINEDTYPE_NAME',
|
|
title: '商城类别',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'BRAND_NAME',
|
|
title: '品牌名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_INDEX',
|
|
title: '商品索引',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NAME',
|
|
title: '商品名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
hideInDescriptions: true,
|
|
width: 300,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.COMMODITY_NAME ? <a onClick={() => {
|
|
handleSetlogSave(`查看商品【${record?.COMMODITY_NAME}】信息`)
|
|
setCurrentRow({ ...record });
|
|
handleModalVisible(true);
|
|
}}>{record?.COMMODITY_NAME}</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NATURE',
|
|
title: '商品属性',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: COMMODITYNATUREObj
|
|
},
|
|
|
|
{
|
|
dataIndex: 'PAY_METHOD',
|
|
title: '消费模式',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: PAYMETHODObj
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_MEMBERPRICE',
|
|
title: '会员价格',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_POINT',
|
|
title: '商品积分',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'DUTY_PARAGRAPH',
|
|
title: '税率(%)',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
valueEnum: {
|
|
"-1": "全部",
|
|
...DUTYPARAGRAPHObj,
|
|
},
|
|
initialValue: "-1"
|
|
},
|
|
{
|
|
dataIndex: 'UPPER_STATE',
|
|
title: '上架状态',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
valueType: "select",
|
|
valueEnum: {
|
|
"0": "未上架",
|
|
"1": "已上架",
|
|
"2": "已驳回"
|
|
},
|
|
initialValue: "1"
|
|
},
|
|
{
|
|
dataIndex: 'MERCHANTS_NAME',
|
|
title: '商户名称',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
// {
|
|
// dataIndex: 'option',
|
|
// title: '操作',
|
|
// valueType: 'option',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// width: 120,
|
|
// fixed: "right",
|
|
// ellipsis: true,
|
|
// render: (_, record) => {
|
|
// return (
|
|
// <Space>
|
|
// <a
|
|
// onClick={() => {
|
|
// console.log('recordrecordrecord', record);
|
|
|
|
// setCurrentRow({ ...record });
|
|
// handleModalVisible(true);
|
|
// }}
|
|
// >
|
|
// 编辑
|
|
// </a>
|
|
// <Popconfirm
|
|
// title="确认删除该商品管理列表信息吗?"
|
|
// onConfirm={async () => {
|
|
// await handelDelete(record.COMMODITY_ID);
|
|
// }}
|
|
// >
|
|
// <a>删除</a>
|
|
// </Popconfirm>
|
|
// </Space>
|
|
// );
|
|
// },
|
|
// },
|
|
];
|
|
|
|
// 多规格表格的字段
|
|
const specsColumns: any = [
|
|
{
|
|
dataIndex: 'index',
|
|
title: '序号',
|
|
align: 'center',
|
|
width: 70,
|
|
ellipsis: true,
|
|
valueType: 'index',
|
|
},
|
|
{
|
|
dataIndex: 'USERDEFINEDTYPE_NAME',
|
|
title: '规格分类',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NAME',
|
|
title: '规格名称',
|
|
align: 'center',
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_STOCK',
|
|
title: '商品库存',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return <Input value={record.COMMODITY_STOCK} onChange={(e: any) => {
|
|
let oldData: any = JSON.parse(JSON.stringify(specsData))
|
|
let list: any = []
|
|
oldData.forEach((item: any) => {
|
|
if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
|
|
item.COMMODITY_STOCK = e.target.value
|
|
}
|
|
list.push(item)
|
|
})
|
|
setSpecsData(list)
|
|
}} />
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_RETAILPRICE',
|
|
title: '商品原价',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return <Input value={record.COMMODITY_RETAILPRICE} onChange={(e: any) => {
|
|
let oldData: any = JSON.parse(JSON.stringify(specsData))
|
|
let list: any = []
|
|
oldData.forEach((item: any) => {
|
|
if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
|
|
item.COMMODITY_RETAILPRICE = e.target.value
|
|
}
|
|
list.push(item)
|
|
})
|
|
setSpecsData(list)
|
|
}} />
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_MEMBERPRICE',
|
|
title: '零售价格',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return <Input value={record.COMMODITY_MEMBERPRICE} onChange={(e: any) => {
|
|
let oldData: any = JSON.parse(JSON.stringify(specsData))
|
|
let list: any = []
|
|
oldData.forEach((item: any) => {
|
|
if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
|
|
item.COMMODITY_MEMBERPRICE = e.target.value
|
|
}
|
|
list.push(item)
|
|
})
|
|
setSpecsData(list)
|
|
}} />
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_PURCHASEPRICE',
|
|
title: '商品成本',
|
|
align: 'center',
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return <Input value={record.COMMODITY_PURCHASEPRICE} onChange={(e: any) => {
|
|
let oldData: any = JSON.parse(JSON.stringify(specsData))
|
|
let list: any = []
|
|
oldData.forEach((item: any) => {
|
|
if (item.COMMODITY_MULTI_ID === record?.COMMODITY_MULTI_ID) {
|
|
item.COMMODITY_PURCHASEPRICE = e.target.value
|
|
}
|
|
list.push(item)
|
|
})
|
|
setSpecsData(list)
|
|
}} />
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'option',
|
|
title: '操作',
|
|
valueType: 'option',
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return (
|
|
<Space>
|
|
<Popconfirm
|
|
title="确认删除该商品规格嘛?"
|
|
onConfirm={async () => {
|
|
console.log('recordrecordrecord', record);
|
|
const data = await handeDeleteRTCOMMODITY_MULTI({ RTCOMMODITY_MULTIId: record?.RTCOMMODITY_MULTI_ID })
|
|
if (data.Result_Code !== 100) {
|
|
message.error(`${data.Result_Desc}` || `${data.Result_Code}:删除失败`);
|
|
} else {
|
|
message.success('删除成功！');
|
|
ruleActionRef.current?.reload()
|
|
}
|
|
}}
|
|
>
|
|
<a>删除</a>
|
|
</Popconfirm>
|
|
</Space>
|
|
);
|
|
},
|
|
},
|
|
]
|
|
|
|
// 新增多规格的表格
|
|
const addSpecsCoumns: any = [
|
|
{
|
|
dataIndex: 'index',
|
|
title: '序号',
|
|
align: 'center',
|
|
width: 70,
|
|
ellipsis: true,
|
|
valueType: 'index',
|
|
},
|
|
{
|
|
dataIndex: 'USERDEFINEDTYPE_NAME',
|
|
title: '规格分类',
|
|
align: 'center',
|
|
width: 150,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'COMMODITY_NAME',
|
|
title: '规格名称',
|
|
align: 'center',
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
dataIndex: 'supplier',
|
|
title: '供应商',
|
|
align: 'center',
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
|
|
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('删除成功！');
|
|
handleSetlogSave(`删除商品【${currentRow?.COMMODITY_NAME}】`)
|
|
actionRef.current?.reload()
|
|
}
|
|
};
|
|
|
|
const handleAddUpdate = async (res: any) => {
|
|
let req: any = {}
|
|
if (currentRow?.USERDEFINEDTYPE_ID) {
|
|
req = {
|
|
...currentRow,
|
|
...res,
|
|
UserDefinedTypeIds: res.USERDEFINEDTYPE_ID ? res.USERDEFINEDTYPE_ID.toString() : "",
|
|
BRAND_ID: res.BRAND_ID.split('-')[1],
|
|
BRAND_NAME: res.BRAND_ID.split('-')[0],
|
|
MERCHANTS_ID: res.MERCHANTS_ID.split('-')[1],
|
|
MERCHANTS_NAME: res.MERCHANTS_ID.split('-')[0],
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
OWNERUNIT_NAME: currentUser?.OwnerUnitName,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
OPERATE_PERSON: currentUser?.Name,
|
|
SELLER_ID: currentUser?.ID,
|
|
COMMODITY_TYPE: 4000,
|
|
COMMODITY_STATE: 1,
|
|
USERDEFINEDTYPE_ID: "",
|
|
OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
UPPER_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[0]).format('YYYY-MM-DD HH:mm:ss') : "",
|
|
OFF_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[1]).format('YYYY-MM-DD HH:mm:ss') : "",
|
|
}
|
|
} else {
|
|
req = {
|
|
...res,
|
|
UserDefinedTypeIds: res.USERDEFINEDTYPE_ID ? res.USERDEFINEDTYPE_ID.toString() : "",
|
|
BRAND_ID: res.BRAND_ID.split('-')[1],
|
|
BRAND_NAME: res.BRAND_ID.split('-')[0],
|
|
MERCHANTS_ID: res.MERCHANTS_ID.split('-')[1],
|
|
MERCHANTS_NAME: res.MERCHANTS_ID.split('-')[0],
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
OWNERUNIT_NAME: currentUser?.OwnerUnitName,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
OPERATE_PERSON: currentUser?.Name,
|
|
SELLER_ID: currentUser?.ID,
|
|
COMMODITY_TYPE: 4000,
|
|
COMMODITY_STATE: 1,
|
|
USERDEFINEDTYPE_ID: "",
|
|
OPERATE_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
UPPER_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[0]).format('YYYY-MM-DD HH:mm:ss') : "",
|
|
OFF_DATE: res.UPPER_DATE && res.UPPER_DATE.length > 0 ? moment(res.UPPER_DATE[1]).format('YYYY-MM-DD HH:mm:ss') : "",
|
|
}
|
|
}
|
|
console.log('reqreqreqreq', req);
|
|
|
|
const data = await handeSynchroCOMMODITY(req)
|
|
handleConfirmLoading(false)
|
|
if (data.Result_Code === 100) {
|
|
|
|
await handleUploadShopImg(res, data.Result_Data)
|
|
|
|
handleSetlogSave(`${currentRow?.USERDEFINEDTYPE_ID ? '更新' : '新增'}商品【${data.Result_Data?.COMMODITY_NAME}】`)
|
|
|
|
message.success("新增成功！")
|
|
setCurrentRow(undefined)
|
|
formRef?.current?.resetFields()
|
|
handleModalVisible(false)
|
|
actionRef.current?.reload()
|
|
// 清空一下 商品关联表的数据
|
|
setSpecsData([])
|
|
// 清空一下 商品关联表的选择行
|
|
setSelectedRowKeys([])
|
|
setSelectedRows([])
|
|
setMainImgList([])
|
|
setHeaderImgList([])
|
|
setDetailImgList([])
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
};
|
|
|
|
// 上传商品图片
|
|
const handleUploadShopImg = async (formRes: any, shopData: any) => {
|
|
// formRes 当前表单的全部数据 shopData 商品数据
|
|
// 主图
|
|
if (formRes.mainImgList && formRes.mainImgList.length > 0) {
|
|
const formData = new FormData();
|
|
formRes.mainImgList.forEach((file: any) => {
|
|
formData.append('files[]', file.originFileObj);
|
|
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
|
});
|
|
formData.append('TableId', shopData.COMMODITY_ID);
|
|
formData.append('imageType', "1000");
|
|
formData.append('TableType', "1207");
|
|
|
|
console.log('formData', formData);
|
|
let res = await uploadPicture(formData)
|
|
}
|
|
|
|
// 头部轮播图
|
|
if (formRes.headerImgList && formRes.headerImgList.length > 0) {
|
|
const formData = new FormData();
|
|
formRes.headerImgList.forEach((file: any) => {
|
|
formData.append('files[]', file.originFileObj);
|
|
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
|
});
|
|
formData.append('TableId', shopData.COMMODITY_ID);
|
|
formData.append('imageType', "2000");
|
|
formData.append('TableType', "1207");
|
|
|
|
console.log('formData', formData);
|
|
let res = await uploadPicture(formData)
|
|
}
|
|
|
|
// 头部轮播图
|
|
if (formRes.detailImgList && formRes.detailImgList.length > 0) {
|
|
const formData = new FormData();
|
|
formRes.detailImgList.forEach((file: any) => {
|
|
formData.append('files[]', file.originFileObj);
|
|
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
|
});
|
|
formData.append('TableId', shopData.COMMODITY_ID);
|
|
formData.append('imageType', "5000");
|
|
formData.append('TableType', "1207");
|
|
|
|
console.log('formData', formData);
|
|
let res = await uploadPicture(formData)
|
|
}
|
|
}
|
|
|
|
// 拿到类别列表里面得规格
|
|
const collectItemsWithCommodityMultiId = (data: any, result = []) => {
|
|
// 检查输入是否为数组
|
|
if (!Array.isArray(data)) {
|
|
return result;
|
|
}
|
|
|
|
// 遍历数组中的每一项
|
|
for (const item of data) {
|
|
// 检查是否是对象且包含 COMMODITY_MULTI_ID 属性
|
|
if (typeof item === 'object' && item !== null && 'COMMODITY_MULTI_ID' in item && item.COMMODITY_MULTI_ID) {
|
|
result.push(item);
|
|
}
|
|
|
|
// 递归检查所有可能包含子数组的属性
|
|
for (const key in item) {
|
|
if (Array.isArray(item[key])) {
|
|
collectItemsWithCommodityMultiId(item[key], result);
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
// 同步商品多规格
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
<LeftSelectMallType setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} setData={setLeftTreeData} />
|
|
<div style={{
|
|
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
}}>
|
|
{/* 最外层的列表 */}
|
|
<ProTable
|
|
scroll={{ x: "100%", y: 'calc(100vh - 370px)' }}
|
|
rowKey={(record) => {
|
|
return `${record?.COMMODITY_ID}`
|
|
}}
|
|
formRef={formRef}
|
|
bordered
|
|
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
|
actionRef={actionRef}
|
|
search={{ span: 6, labelWidth: 'auto' }}
|
|
// 请求数据
|
|
request={async (params, sorter) => {
|
|
if (!selectedId) {
|
|
return
|
|
}
|
|
const req = {
|
|
searchParameter: {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
USERDEFINEDTYPE_IDS: selectedId,
|
|
UPPER_STATE: params?.UPPER_STATE,
|
|
DUTY_PARAGRAPH: params?.DUTY_PARAGRAPH === "-1" ? "" : params?.DUTY_PARAGRAPH,
|
|
COMMODITY_TYPE: 4000,
|
|
COMMODITY_STATE: 1,
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await handeGetCOMMODITYList(req);
|
|
console.log('datadatadatadatadata', data);
|
|
handleSetlogSave(`点击查询按钮`)
|
|
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={() => {
|
|
handleModalVisible(true);
|
|
}}
|
|
>
|
|
新增商品
|
|
</Button>,
|
|
<Button
|
|
key="new"
|
|
type="primary"
|
|
onClick={() => {
|
|
}}
|
|
>
|
|
审核上架
|
|
</Button>,
|
|
<Button
|
|
key="new"
|
|
type="primary"
|
|
onClick={() => {
|
|
}}
|
|
>
|
|
下架
|
|
</Button>
|
|
],
|
|
}}
|
|
pagination={{ defaultPageSize: 10 }}
|
|
rowSelection={{
|
|
type: 'checkbox',
|
|
onChange: (rowKeys, rowDetail) => {
|
|
console.log('rowKeysrowKeysrowKeys', rowKeys);
|
|
console.log('rowDetailrowDetailrowDetail', rowKeys);
|
|
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* 添加商品的悬浮框 */}
|
|
<Modal
|
|
// title={currentRow ? '更新商品管理' : '新建商品管理'}
|
|
title={
|
|
<div
|
|
className='productListing'
|
|
style={{
|
|
width: '100%',
|
|
cursor: 'move',
|
|
}}
|
|
onMouseOver={() => {
|
|
if (disabled) {
|
|
setDraggleDisabled(false)
|
|
}
|
|
}}
|
|
onMouseOut={() => {
|
|
setDraggleDisabled(true)
|
|
}}
|
|
|
|
onFocus={() => { }}
|
|
onBlur={() => { }}
|
|
>
|
|
{currentRow ? '更新商品管理' : '新建商品管理'}
|
|
</div>
|
|
}
|
|
destroyOnClose={true}
|
|
width={1400}
|
|
bodyStyle={{
|
|
height: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={modalVisible}
|
|
confirmLoading={confirmLoading}
|
|
afterClose={() => {
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}}
|
|
onCancel={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setMainImgList([])
|
|
setHeaderImgList([])
|
|
setDetailImgList([])
|
|
// setBRAND_NAMEList([])
|
|
}}
|
|
footer={<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div>
|
|
{
|
|
currentRow ?
|
|
<div>
|
|
<Button type={"primary"} onClick={() => {
|
|
setShowMoreSpecs(true)
|
|
}}>多规格管理</Button>
|
|
|
|
<Button danger onClick={async () => {
|
|
await handelDelete(currentRow?.COMMODITY_ID);
|
|
}}>
|
|
删除
|
|
</Button>
|
|
</div>
|
|
: ""
|
|
}
|
|
</div>
|
|
<div>
|
|
<Button onClick={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setBRAND_NAMEList([])
|
|
// 清空一下 商品关联表的数据
|
|
setSpecsData([])
|
|
// 清空一下 商品关联表的选择行
|
|
setSelectedRowKeys([])
|
|
setSelectedRows([])
|
|
setMainImgList([])
|
|
setHeaderImgList([])
|
|
setDetailImgList([])
|
|
}}>取 消</Button>
|
|
<Button type={"primary"} loading={confirmLoading} onClick={() => {
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}>确 定</Button>
|
|
</div>
|
|
</div>}
|
|
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='.productListing'
|
|
>
|
|
<div ref={draggleRef}>{modal}</div>
|
|
</Draggable>
|
|
}}
|
|
>
|
|
<ProForm
|
|
layout={'horizontal'}
|
|
formRef={formRef}
|
|
autoFocusFirstInput
|
|
submitter={false}
|
|
labelCol={{ style: { width: 80 } }}
|
|
preserve={false}
|
|
request={async () => {
|
|
if (currentRow?.COMMODITY_ID) {
|
|
const data = await handeGetCOMMODITYDetail({ COMMODITYId: currentRow?.COMMODITY_ID })
|
|
|
|
let mainImgList: any = []
|
|
let headerImgList: any = []
|
|
let detailImgList: any = []
|
|
// 主图
|
|
if (data.IconList && data.IconList.length > 0) {
|
|
data.IconList.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'
|
|
mainImgList.push(obj)
|
|
})
|
|
}
|
|
// 轮播框图
|
|
if (data.GalleryImgList && data.GalleryImgList.length > 0) {
|
|
data.GalleryImgList.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'
|
|
headerImgList.push(obj)
|
|
})
|
|
}
|
|
// 详情图
|
|
if (data.DetailImgList && data.DetailImgList.length > 0) {
|
|
data.DetailImgList.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'
|
|
detailImgList.push(obj)
|
|
})
|
|
}
|
|
|
|
|
|
setMainImgList(mainImgList)
|
|
setHeaderImgList(headerImgList)
|
|
setDetailImgList(detailImgList)
|
|
|
|
return {
|
|
...data,
|
|
USERDEFINEDTYPE_ID: data.UserDefinedTypeIds ? data.UserDefinedTypeIds.split(',').map(Number) : [],
|
|
BRAND_ID: `${data?.BRAND_NAME}-${data?.BRAND_ID}`,
|
|
MERCHANTS_ID: `${data?.MERCHANTS_NAME}-${data?.MERCHANTS_ID}`,
|
|
UPPER_DATE: data.UPPER_DATE && data.OFF_DATE ? [data.UPPER_DATE, data.OFF_DATE] : [],
|
|
// mainImgList: mainImgList,
|
|
// headerImgList: headerImgList,
|
|
// detailImgList: detailImgList,
|
|
}
|
|
} else {
|
|
return {
|
|
OPERATE_PERSON: currentUser?.Name,
|
|
UPPER_STATE: currentUser?.SupplierID ? 0 : ""
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// initialValues={currentRow ? {
|
|
// ...currentRow,
|
|
// BRAND_ID: `${currentRow?.BRAND_NAME}-${currentRow?.BRAND_ID}`,
|
|
// MERCHANTS_ID: `${currentRow?.MERCHANTS_NAME}-${currentRow?.MERCHANTS_ID}`,
|
|
// } : {
|
|
// OPERATE_PERSON: currentUser?.Name,
|
|
// UPPER_STATE: currentUser?.SupplierID ? 0 : ""
|
|
// }}
|
|
onFinish={async (values) => {
|
|
let newValue: any = { ...values };
|
|
if (currentRow) {
|
|
// 编辑数据
|
|
newValue = { ...values, COMMODITY_ID: currentRow.COMMODITY_ID };
|
|
}
|
|
// 如果有开关，要把开关的代码写进去
|
|
await handleAddUpdate(newValue);
|
|
|
|
handleModalVisible(false);
|
|
}}
|
|
>
|
|
<Row gutter={8}>
|
|
<Divider orientation="left" style={{ margin: 0 }}>基本信息</Divider>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="COMMODITY_NAME"
|
|
label="商品名称"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品名称！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="COMMODITY_NATURE"
|
|
label="商品性质"
|
|
options={COMMODITYNATUREList}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择商品性质！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="BRAND_ID"
|
|
label="商品品牌"
|
|
request={async () => {
|
|
if (BRAND_NAMEList && BRAND_NAMEList.length > 0) {
|
|
return BRAND_NAMEList
|
|
} else {
|
|
const req: any = {
|
|
searchParameter: {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
BRAND_STATE: 1,
|
|
BRAND_CATEGORY: 2000
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: "BRAND_INDEX,OPERATE_DATE"
|
|
}
|
|
const data = await handleGetBRANDList(req)
|
|
if (data.List && data.List.length > 0) {
|
|
let list: any = []
|
|
data.List.forEach((item: any) => {
|
|
list.push({ label: item.BRAND_NAME, value: `${item.BRAND_NAME}-${item.BRAND_ID}` })
|
|
})
|
|
|
|
setBRAND_NAMEList(list)
|
|
return list
|
|
}
|
|
return []
|
|
}
|
|
}}
|
|
fieldProps={{
|
|
// fieldNames: {
|
|
// label: 'BRAND_NAME',
|
|
// value: 'BRAND_ID'
|
|
// },
|
|
showSearch: true,
|
|
filterOption: (input, node) =>
|
|
(node.BRAND_NAME || '').toLowerCase().includes(input.toLowerCase())
|
|
}}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择商品品牌！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormTreeSelect
|
|
name="USERDEFINEDTYPE_ID"
|
|
label="商品分类"
|
|
request={async () => {
|
|
console.log('leftTreeDataleftTreeDataleftTreeData', leftTreeData);
|
|
|
|
return leftTreeData
|
|
}}
|
|
fieldProps={{
|
|
fieldNames: {
|
|
label: "USERDEFINEDTYPE_NAME",
|
|
value: "USERDEFINEDTYPE_ID"
|
|
},
|
|
showSearch: true,
|
|
multiple: true, // 支持多选
|
|
allowClear: true, // 允许清除和删除
|
|
filterTreeNode: (input, node) =>
|
|
(node.USERDEFINEDTYPE_NAME || '').toLowerCase().includes(input.toLowerCase())
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormTreeSelect
|
|
name="MERCHANTS_ID"
|
|
label="供货商户"
|
|
request={async () => {
|
|
if (COMMODITYSUPPLIERLIST && COMMODITYSUPPLIERLIST.length > 0) {
|
|
return COMMODITYSUPPLIERLIST
|
|
} else {
|
|
const req = {
|
|
searchParameter: {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
MERCHANTS_TYPE: ""
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await handeGetMERCHANTSList(req);
|
|
console.log('datadatadatadatadata', data);
|
|
if (data.List && data.List.length > 0) {
|
|
let list: any = []
|
|
data.List.forEach((item: any) => {
|
|
list.push({ label: item.MERCHANTS_NAME, value: `${item.MERCHANTS_NAME}-${item.MERCHANTS_ID}` })
|
|
})
|
|
setCOMMODITYSUPPLIERLIST(list)
|
|
return list
|
|
}
|
|
setCOMMODITYSUPPLIERLIST([])
|
|
return []
|
|
}
|
|
}}
|
|
fieldProps={{
|
|
// fieldNames: {
|
|
// label: 'MERCHANTS_NAME',
|
|
// value: 'MERCHANTS_ID'
|
|
// },
|
|
showSearch: true,
|
|
filterTreeNode: (input, node) =>
|
|
(node.MERCHANTS_NAME || '').toLowerCase().includes(input.toLowerCase())
|
|
}}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择供货商户"
|
|
}
|
|
]}
|
|
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">商品信息</Divider>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="COMMODITY_BARCODE"
|
|
label="商品条码"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="COMMODITY_ORI"
|
|
label="商品产地"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="COMMODITY_UNIT"
|
|
label="商品单位"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品单位！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="COMMODITY_RULE"
|
|
label="商品规格"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品规格！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_STOCK"
|
|
label="商品库存"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品库存！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_EN"
|
|
label="已售数量"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="COMMODITY_GRADE"
|
|
label="质量等级"
|
|
options={COMMODITYGRADEList}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_INDEX"
|
|
label="排序索引"
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormTextArea
|
|
name="COMMODITY_DESC"
|
|
label="商品简称"
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">商品价值</Divider>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="PAY_METHOD"
|
|
label="消费模式"
|
|
options={PAYMETHODList}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择消费模式！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="DUTY_PARAGRAPH"
|
|
label="商品税率"
|
|
options={DUTYPARAGRAPHList}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择商品税率！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}></Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_RETAILPRICE"
|
|
label="市场价"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入市场价！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_MEMBERPRICE"
|
|
label="零售价格"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入零售价格！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_PURCHASEPRICE"
|
|
label="商品成本"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入商品成本！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="COMMODITY_POINT"
|
|
label="兑换积分"
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">配送信息</Divider>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="SEND_MODE"
|
|
label="发货模式"
|
|
options={[{ label: "自提", value: 1000 }, { label: "邮寄", value: 2000 }, { label: "免发货", value: 3000 }]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="DELIVER_AREA"
|
|
label="配送区域"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="REMINDER_DAY"
|
|
label="发货天数"
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="AFTERSALE_NATRUE"
|
|
label="售后模式"
|
|
options={[{ label: "退货", value: 1000 }, { label: "换货", value: 2000 }, { label: "退换货", value: 3000 }]}
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">上架信息</Divider>
|
|
<Col span={12}>
|
|
<ProFormDateRangePicker
|
|
width={'lg'}
|
|
name="UPPER_DATE"
|
|
label="上架时间"
|
|
rules={[{
|
|
required: true,
|
|
message: "请选择上架时间！"
|
|
}]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="LIMIT_TOTALCOUNT"
|
|
label="限购总数"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormDigit
|
|
name="LIMIT_DAILYCOUNT"
|
|
label="每日限购"
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="WECHATAPPSIGN_ID"
|
|
label="小程序"
|
|
options={[
|
|
{ label: "彩云驿", value: 37 },
|
|
{ label: "彩云驿商城", value: 38 },
|
|
]}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入小程序！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="UPPER_STATE"
|
|
label="上架状态"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请输入上架状态！"
|
|
}
|
|
]}
|
|
options={[
|
|
{ label: "未上架", value: 0 },
|
|
{ label: "已上架", value: 1 },
|
|
]}
|
|
disabled={currentUser?.SupplierID ? true : false}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
name="DATAFORMAT"
|
|
label="数据形式"
|
|
options={[
|
|
{ label: "正式数据", value: 1 },
|
|
{ label: "测试数据", value: 0 },
|
|
{ label: "品诺数据", value: 2 },
|
|
]}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: "请选择数据形式！"
|
|
}
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormText
|
|
name="OPERATE_PERSON"
|
|
label="操作人员"
|
|
disabled
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">主图</Divider>
|
|
<Col span={24}>
|
|
<ProFormUploadButton
|
|
name="mainImgList"
|
|
label="主图图片"
|
|
listType="picture-card"
|
|
accept="image/*"
|
|
fieldProps={{
|
|
beforeUpload,
|
|
onPreview: handlePreview,
|
|
fileList: mainImgList, // 绑定 fileList
|
|
onChange: async (info: any) => {
|
|
if (info.file.status === 'removed') {
|
|
const index = mainImgList.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')
|
|
deleteLoading()
|
|
|
|
if (success) {
|
|
const files = [...mainImgList]
|
|
files.splice(index, 1)
|
|
setMainImgList(files)
|
|
message.success("删除成功")
|
|
actionRef.current?.reload()
|
|
}
|
|
else {
|
|
message.error("删除失败")
|
|
}
|
|
} else {
|
|
const files = [...mainImgList];
|
|
files.splice(index, 1);
|
|
setMainImgList(files);
|
|
}
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
} else {
|
|
setMainImgList(info.fileList)
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">头部轮播图</Divider>
|
|
<Col span={24}>
|
|
<ProFormUploadButton
|
|
name="headerImgList"
|
|
label="轮播框图"
|
|
listType="picture-card"
|
|
accept="image/*"
|
|
fieldProps={{
|
|
beforeUpload,
|
|
onPreview: handlePreview,
|
|
fileList: headerImgList, // 绑定 fileList
|
|
onChange: async (info: any) => {
|
|
if (info.file.status === 'removed') {
|
|
const index = headerImgList.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')
|
|
deleteLoading()
|
|
|
|
if (success) {
|
|
const files = [...headerImgList]
|
|
files.splice(index, 1)
|
|
setHeaderImgList(files)
|
|
message.success("删除成功")
|
|
actionRef.current?.reload()
|
|
}
|
|
else {
|
|
message.error("删除失败")
|
|
}
|
|
} else {
|
|
const files = [...headerImgList];
|
|
files.splice(index, 1);
|
|
setHeaderImgList(files);
|
|
}
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
} else {
|
|
setHeaderImgList(info.fileList)
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Divider orientation="left">详情图</Divider>
|
|
<Col span={24}>
|
|
<ProFormUploadButton
|
|
name="detailImgList"
|
|
label="详情图"
|
|
listType="picture-card"
|
|
accept="image/*"
|
|
fieldProps={{
|
|
beforeUpload,
|
|
onPreview: handlePreview,
|
|
fileList: detailImgList, // 绑定 fileList
|
|
onChange: async (info: any) => {
|
|
if (info.file.status === 'removed') {
|
|
const index = detailImgList.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')
|
|
deleteLoading()
|
|
|
|
if (success) {
|
|
const files = [...detailImgList]
|
|
files.splice(index, 1)
|
|
setDetailImgList(files)
|
|
message.success("删除成功")
|
|
actionRef.current?.reload()
|
|
}
|
|
else {
|
|
message.error("删除失败")
|
|
}
|
|
} else {
|
|
const files = [...detailImgList];
|
|
files.splice(index, 1);
|
|
setDetailImgList(files);
|
|
}
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
} else {
|
|
setDetailImgList(info.fileList)
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
|
|
{/* 多规格配置的悬浮框 */}
|
|
<Modal
|
|
title={"多规格管理"}
|
|
destroyOnClose={true}
|
|
width={1200}
|
|
visible={showMoreSpecs}
|
|
onCancel={() => {
|
|
setShowMoreSpecs(false)
|
|
setSpecsData([])
|
|
}}
|
|
onOk={async () => { // 提交框内的数据
|
|
console.log('specsDataspecsData', specsData);
|
|
// 判断表格数据是不是都填了
|
|
let isAllOk: boolean = true
|
|
if (specsData && specsData.length > 0) {
|
|
specsData.forEach((item: any) => {
|
|
if (!item.COMMODITY_STOCK || !item.COMMODITY_RETAILPRICE || !item.COMMODITY_MEMBERPRICE || !item.COMMODITY_PURCHASEPRICE) {
|
|
isAllOk = false
|
|
}
|
|
})
|
|
}
|
|
if (!isAllOk) {
|
|
message.error('请先完善表格数据！')
|
|
}
|
|
|
|
|
|
if (specsData && specsData.length > 0) {
|
|
let list: any = []
|
|
specsData.forEach((item: any) => {
|
|
list.push({
|
|
RTCOMMODITY_MULTI_ID: item.RTCOMMODITY_MULTI_ID ? item.RTCOMMODITY_MULTI_ID : "",
|
|
COMMODITY_ID: currentRow?.COMMODITY_ID,
|
|
COMMODITY_MULTI_ID: item.COMMODITY_MULTI_ID,
|
|
COMMODITY_STOCK: item.COMMODITY_STOCK,
|
|
COMMODITY_RETAILPRICE: item.COMMODITY_RETAILPRICE,
|
|
COMMODITY_PURCHASEPRICE: item.COMMODITY_PURCHASEPRICE,
|
|
COMMODITY_MEMBERPRICE: item.COMMODITY_MEMBERPRICE,
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
})
|
|
})
|
|
// return
|
|
const req: any = {
|
|
list: list
|
|
}
|
|
console.log('reqreqreq', req);
|
|
|
|
const data = await handeSynchroRTCOMMODITYMULTIList(req)
|
|
console.log('datadatadatadata', data);
|
|
if (data.Result_Code === 100) {
|
|
message.success("同步成功！")
|
|
setShowMoreSpecs(false)
|
|
setSpecsData([])
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
} else {
|
|
setShowMoreSpecs(false)
|
|
setSpecsData([])
|
|
}
|
|
|
|
|
|
}}
|
|
>
|
|
<ProTable
|
|
actionRef={ruleActionRef}
|
|
search={false}
|
|
pagination={false}
|
|
options={false}
|
|
columns={specsColumns}
|
|
scroll={{ x: "100%" }}
|
|
bordered
|
|
toolbar={{
|
|
actions: [
|
|
<Button type={"primary"} onClick={() => {
|
|
setShowAddSpecsModal(true)
|
|
}}>新增规格</Button>
|
|
]
|
|
}}
|
|
dataSource={specsData}
|
|
request={async () => {
|
|
console.log('currentRowcurrentRowcurrentRow', currentRow);
|
|
|
|
const req: any = {
|
|
searchParameter: {
|
|
COMMODITY_IDS: currentRow?.COMMODITY_ID,
|
|
// OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
// PROVINCE_CODE: "",
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: "COMMODITY_MULTI_ID"
|
|
}
|
|
const data = await handeGetRTCOMMODITY_MULTIList(req)
|
|
console.log('多规格管理', data);
|
|
if (data.List && data.List.length > 0) {
|
|
setSpecsData(data.List)
|
|
// return { data: data.List, success: true, total: data.TotalCount }
|
|
} else {
|
|
setSpecsData([])
|
|
}
|
|
// return { data: [], success: true }
|
|
|
|
// return selectedRows
|
|
}}
|
|
/>
|
|
|
|
</Modal>
|
|
|
|
{/* 添加多规格的悬浮框 */}
|
|
<Modal
|
|
title={"新增规格管理"}
|
|
destroyOnClose={true}
|
|
width={1200}
|
|
visible={showAddSpecsModal}
|
|
onCancel={() => {
|
|
setShowAddSpecsModal(false)
|
|
}}
|
|
onOk={async () => { // 提交框内的数据
|
|
setShowAddSpecsModal(false)
|
|
console.log('specsDataspecsDataspecsData', specsData);
|
|
console.log('selectedRowsselectedRowsselectedRows', selectedRows);
|
|
let list: any = JSON.parse(JSON.stringify(specsData))
|
|
// list = list.concat(selectedRows)
|
|
if (selectedRows && selectedRows.length > 0) {
|
|
selectedRows.forEach((item: any) => {
|
|
let filterList: any = list.filter((filterItem: any) => filterItem.COMMODITY_MULTI_ID === item.COMMODITY_MULTI_ID)
|
|
if (filterList && filterList.length > 0) {
|
|
} else {
|
|
list.push(item)
|
|
}
|
|
// let obj: any = JSON.parse(JSON.stringify(item))
|
|
})
|
|
}
|
|
setSpecsData(list)
|
|
}}
|
|
>
|
|
<ProTable
|
|
search={false}
|
|
pagination={false}
|
|
options={false}
|
|
columns={addSpecsCoumns}
|
|
scroll={{ x: "100%", y: '400px' }}
|
|
rowKey={"COMMODITY_MULTI_ID"}
|
|
rowSelection={{
|
|
type: 'checkbox', // 多选，单选用 'radio'
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
setSelectedRowKeys(selectedRowKeys)
|
|
setSelectedRows(selectedRows)
|
|
},
|
|
}}
|
|
request={async () => {
|
|
const req = {
|
|
searchParameter: {
|
|
OwnerUnitId: currentUser?.OwnerUnitId,
|
|
ExcludeCommodityId: currentRow?.COMMODITY_ID,
|
|
// PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
// GOODSTYPE: 6000,
|
|
COMMODITY_STATE: 1
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: "USERDEFINEDTYPE_ID,COMMODITY_MULTI_ID"
|
|
}
|
|
const data = await handeGetCOMMODITY_MULTIList(req);
|
|
console.log('datadatadatadata', data);
|
|
let list = data.List
|
|
if (list && list.length > 0) {
|
|
return { data: list, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
/>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(COMMODITYTable);
|