// 商品信息管理 import { connect } from "umi"; import type { CurrentUser } from "umi"; import type { ConnectState } from "@/models/connect"; import React, { useRef, useState } from "react"; import ProCard from "@ant-design/pro-card"; import { MenuFoldOutlined, PlusOutlined } from "@ant-design/icons"; import type { FormInstance } from "antd"; import { Col, Drawer, Row } from "antd"; import { Avatar, Button, Menu, message, Modal, Popconfirm, Space, Spin, Tree } from "antd"; import useRequest from "@ahooksjs/use-request"; import { getFieldEnum, getFieldEnumTree, getServerpartOption, getServerpartTree, handleCallLogs } from "@/services/options"; import type { ActionType } from "@ant-design/pro-table"; import ProTable from "@ant-design/pro-table"; import ReactHTMLTableToExcel from "react-html-table-to-excel"; import SubMenu from "antd/lib/menu/SubMenu"; import { handleDeleteCOMMODITY, handleGetCommodityList, handleGetNestingCOMMODITYTYPETree, handleGetServerpartShopTrade, handleSynchroCOMMODITY } from "@/pages/reports/productControl/commodityInfo/service"; import ProForm, { ProFormDateTimePicker, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-form"; import './style.less' import moment from "moment"; import session from "@/utils/session"; import Detail from "@/pages/reports/productControl/components/detail"; import { handleGetUSERDEFINEDTYPEList } from "@/pages/reports/productControl/userDefinedType/service"; import PageTitleBox from "@/components/PageTitleBox"; const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => { const { currentUser } = props const downloadBtnRef = useRef() const actionRef = useRef(); const formRef = useRef(); const modalFormRef = useRef(); const [currentRow, setCurrentRow] = useState() const [reqDetailList, setReqDetailList] = useState(); // 合计项数据源 const [printOut, setPrintOut] = useState(); // 打印数据的内容 const [collapsible, setCollapsible] = useState(false) const [treeView, setTreeView] = useState() const [allTreeView, setAllTreeView] = useState() const [allTotal, setAllTotal] = useState(20) // 加载服务区树 const { loading: treeLoading, data: treeViews } = useRequest(async () => { const req = { PROVINCE_CODE: currentUser?.ProvinceCode, COMMODITYTYPE_VALID: 1, ShowCode: true } const data = await handleGetNestingCOMMODITYTYPETree(req) let list: any = data if (currentUser?.ProvinceCode === '734100') { list.unshift({ label: "全部", value: 999999, key: '1-999999', type: 1 }) console.log('listlistlistlist', list); } setTreeView(list) setAllTreeView(list) return data }) // 树相关的属性和方法 const [selectedId, setSelectedId] = useState() // 导出的加载效果 const [showLoading, setShowLoading] = useState(false) // 是否显示打印的表格 const [showExportTable, setShowExportTable] = useState(false) const [currenMenu, setCurrenMenu] = useState(); // 当前选中左侧菜单的服务区节点 const [showModal, setShowModal] = useState(false) const [showDetail, setShowDetail] = useState(false) const [selectBUSINESSTYPE, setSelectBUSINESSTYPE] = useState() const [selectSERVERPARTID, setSelectSERVERPARTID] = useState() // 商品类型 const [shopType, setShopType] = useState() const ServerpartIdsList: any = session.get('ServerpartIdsList') console.log('ServerpartIdsListServerpartIdsList', ServerpartIdsList); const { loading: CommodityLoading, data: CommodityData } = useRequest(async () => { const data = await getFieldEnumTree({ FieldExplainField: 'CommodityTypeIds' }) setShopType(data) const obj: any = {} if (data && data.length > 0) { data.forEach((item: any) => { obj[item.value] = item.label if (item.children && item.children.length > 0) { item.children.forEach((subItem: any) => { obj[subItem.value] = subItem.label if (subItem.children && subItem.children.length > 0) { subItem.children.forEach((thirdItem: any) => { obj[thirdItem.value] = thirdItem.label }) } }) } }) } return obj }) const [customClassList, setCustomClassList] = useState() const columns: any = [ { title: '服务区', dataIndex: 'ServerpartID', hideInTable: true, valueType: 'select', request: async () => { // const data = await getServerpartOption(340000) // return data const ServerpartIdsTree: any = session.get('ServerpartIdsTree') // let serverpartId: string = '' // if (serverpartList && serverpartList.length > 0) { // serverpartList.forEach((item: any) => { // if (serverpartId) { // serverpartId += `,${item.value}` // } else { // serverpartId = item.value // } // }) // } // serverpartList.unshift({ // label: "全部", // value: '' // }) return ServerpartIdsTree }, fieldProps: { showSearch: true, filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()), } }, { title: '状态', dataIndex: 'CommodityState', hideInTable: true, valueType: 'select', valueEnum: { 0: { text: '无效' }, 1: { text: '有效' } }, initialValue: '1' }, { dataIndex: 'searchText', title: '查询内容', hideInTable: true, fieldProps: { placeholder: "请输入商品名称/商品条码/商品类型" } }, { title:
序号
, dataIndex: 'index', width: 80, hideInSearch: true, align: 'center', valueType: 'index' }, { title:
服务区
, dataIndex: 'SERVERPART_NAME', width: 200, ellipsis: true, hideInSearch: true, align: 'center', render: (_, record) => { return record?.SERVERPART_ID ? ServerpartIdsList[record?.SERVERPART_ID] : '-' } }, { title:
商品业态
, width: 100, dataIndex: 'BUSINESSTYPE', hideInSearch: true, align: 'center', valueType: 'select', request: async () => { return await getFieldEnum({ FieldExplainField: 'BUSINESSTYPE', sessionName: 'SHOPTRADE', notformate: true }) } }, { title:
商品类型
, width: 120, dataIndex: 'COMMODITY_TYPE', hideInSearch: true, align: 'center', valueEnum: CommodityData }, { title:
商品名称
, width: 300, ellipsis: true, dataIndex: 'COMMODITY_NAME', align: 'center', hideInSearch: true, render: (_, record) => { return { console.log('record', record) setCurrentRow(record) setShowDetail(true) }}>{record?.COMMODITY_NAME || '-'} } }, { title:
商品条码
, width: 150, dataIndex: 'COMMODITY_BARCODE', align: 'center', hideInSearch: true, }, { title:
零售价
, width: 80, dataIndex: 'COMMODITY_RETAILPRICE', hideInSearch: true, align: 'right', }, { title:
进货价
, width: 80, dataIndex: 'COMMODITY_PURCHASEPRICE', align: 'right', hideInSearch: true, }, { title:
商品单位
, width: 80, dataIndex: 'COMMODITY_UNIT', align: 'center', hideInSearch: true, }, { title:
状态
, width: 80, dataIndex: 'COMMODITY_STATE', align: 'center', hideInSearch: true, valueType: 'select', valueEnum: { 0: { text: '无效', status: 'error' }, 1: { text: '有效', status: 'success' }, 2: { text: '不可选', status: 'default' } }, }, { title:
审核时间
, width: 160, dataIndex: 'OPERATE_DATE', align: 'center', hideInSearch: true, sorter: (a, b) => new Date(a.OPERATE_DATE).getTime() - new Date(b.OPERATE_DATE).getTime(), defaultSortOrder: 'descend', }, { title:
操作
, width: 100, valueType: 'option', fixed: 'right', render: (_, record) => [ { setCurrentRow({ ...record, COMMODITY_GRADE: Number(record?.COMMODITY_GRADE), BUSINESSTYPE: record?.BUSINESSTYPE.toString(), ADDTIME: moment(record?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') }) setShowModal(true) console.log('record', record) await handleGetCommodity(record?.SERVERPART_ID) await handleGetCustomClassList(record?.SERVERPART_ID) }}>编辑, { const req: any = { COMMODITYId: record?.COMMODITY_ID } const data = await handleDeleteCOMMODITY(req) if (data.Result_Code === 100) { message.success(data.Result_Desc) actionRef.current?.reload() } else { message.error(data.Result_Desc) } }} okText="确定" cancelText="取消" > 删除 ] } ] // 查询的条件 const [searchParams, setSearchParams] = useState() // 商品业态的搜索框内容 const [commodityList, setCommodityList] = useState([]) const getMenuDom = (data: any[], callback: (item: any) => void) => { return (data.map((element: any) => { // 绑定嵌套树的子节点 if (element.children && element.children.length > 0) { return ( {element.label}} icon={element.ico ? : null} key={`${element.key || element.value}`} onTitleClick={(item) => { // 选中一级菜单 if (!currenMenu || item.key !== `${currenMenu?.key}`) { callback.call(callback, item) } item.domEvent.stopPropagation(); }} > {element.children && element.children.length > 0 && getMenuDom(element.children, callback)} ) } return ( : null} key={`${element.key || element.value}`}>{element.desc && element.desc !== '0/0' ? <>{element.label} [{element.desc.split('/')[0]}/{element.desc.split('/')[1]}] : element.label}) })) } const loadSelectedId = (item?: any) => { console.log('item', item) // 选中的子菜单key const [type, value] = item.key.split('-') if (value === '999999') { const serverpartList: any = session.get('serverpartList') let serverpartId: string = '' if (serverpartList && serverpartList.length > 0) { serverpartList.forEach((item: any) => { if (serverpartId) { serverpartId += `,${item.value}` } else { serverpartId = item.value } }) } // formRef.current?.setFieldsValue({ ServerpartID: serverpartId }) } if (type === '1') { setCurrenMenu(value) // actionRef?.current?.reload() } else { setCurrenMenu('') } } // 拿到对应的商品业态 const handleGetCommodity = async (id: any) => { const req: any = { ProvinceCode: currentUser?.ProvinceCode, ServerpartId: id } const data = await handleGetServerpartShopTrade(req) console.log('data', data) setCommodityList(data) } // 请求自定义类的选择列表 const handleGetCustomClassList = async (id: any) => { const req: any = { SearchParameter: { USERDEFINEDTYPE_STATE: 1, SERVERPART_ID: id, BUSINESSTYPE: selectBUSINESSTYPE }, PageIndex: 1, PageSize: 999999, pageSize: 999999, } const data = await handleGetUSERDEFINEDTYPEList(req) if (data && data.length > 0) { const list: any = [] data.forEach((item: any) => { list.push({ label: item.USERDEFINEDTYPE_NAME, value: item.USERDEFINEDTYPE_ID }) }) setCustomClassList(list) } console.log('data', data) } return (
{ // 打印报表 if (!reqDetailList || reqDetailList.length === 0) return; setPrintOut(el); }} > { showLoading ?
数据导出中...
: '' }
{ showExportTable && reqDetailList && reqDetailList.length > 0 ? : '' }
{ setCollapsible(!collapsible) }} />} colSpan={!collapsible ? "300px" : "60px"} title={!collapsible ? "请选择商品类别" : ""} headerBordered collapsed={collapsible} > {!treeLoading && { console.log('item', item) loadSelectedId(item) }} > {getMenuDom(treeViews, loadSelectedId)} }
} scroll={{ y: 'calc(100vh - 430px)' }} search={{ span: 6 }} request={async (params) => { if (!currenMenu) { return } const req: any = { ...params, SearchType: 3, ProvinceCode: currentUser?.ProvinceCode, CommodityTypeId: currenMenu === '999999' ? '' : currenMenu, // CommodityState: params?.COMMODITY_STATE, PageIndex: params.current, PageSize: params?.pageSize, pageSize: params?.pageSize, SearchKey: "COMMODITY_NAME,COMMODITY_BARCODE", SearchValue: params?.searchText || "" // PageSize: 20 } console.log('req', req) handleCallLogs() setSearchParams(params) const data = await handleGetCommodityList(req) if (data.List && data.List.length > 0) { console.log('data', data) // setAllTotal(data.TotalCount) return { data: data.List, success: true, total: data.TotalCount } } return { data: [], success: true } }} toolbar={{ actions: [ ] }} />
{ modalFormRef.current?.validateFields().then(async (res: any) => { console.log('res', res) if (res) { // setShowModal(false) let req: any = {} if (currentRow) { req = { ...currentRow, ...res, OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'), } } else { req = { ...res, OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'), } } console.log('req', req) const data = await handleSynchroCOMMODITY(req) console.log('data', data) if (data.Result_Code === 100) { message.success(data.Result_Desc) actionRef.current?.reload() setShowModal(false) setCurrentRow(undefined) } else { message.error(data.Result_Desc) } } }) }} onCancel={() => { setShowModal(false) setCurrentRow(undefined) setCommodityList([]) setCustomClassList([]) }} >
商品基本信息
{ const ServerpartIdsTree: any = session.get('ServerpartIdsTree') // const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true) // const list: any = [] // if (data && data.length > 0) { // data.forEach((item: any) => { // if (item.children && item.children.length > 0) { // item.children.forEach((subItem: any) => { // list.push({ label: subItem.label, value: subItem.value }) // }) // } // }) // data.forEach((item: any) => { // list.push({ label: item.label, value: item.value }) // }) // } return ServerpartIdsTree }} rules={[ { required: true, message: '请选择服务区', }, ]} fieldProps={{ onChange: async (e: any) => { console.log('e', e) if (e) { setSelectSERVERPARTID(e) await handleGetCommodity(e) if (selectBUSINESSTYPE) { await handleGetCustomClassList(e) } } else { setSelectSERVERPARTID(undefined) setCommodityList([]) setCustomClassList([]) } } }} /> { if (e) { setSelectBUSINESSTYPE(e) if (selectSERVERPARTID) { await handleGetCustomClassList(e) } } else { setSelectBUSINESSTYPE(undefined) } } }} /> { return treeView }} fieldProps={{ treeDefaultExpandAll: true }} />
商品状态信息
商品价格信息
商品进销信息
{ setCurrentRow(undefined) setShowDetail(false) }} closable={false} destroyOnClose bodyStyle={{ padding: '12px 24px' }} >
) } export default connect(({ user }: ConnectState) => ({ currentUser: user.currentUser }))(commodityInfo);