update
This commit is contained in:
parent
ab65611732
commit
415f6a5560
@ -317,6 +317,12 @@ export default [
|
||||
component: './basicManage/BusinessTrade/index',
|
||||
icon: 'ShoppingOutlined',
|
||||
},
|
||||
{
|
||||
path: 'operatingBrand',
|
||||
name: 'operatingBrand',
|
||||
component: './basicManage/operatingBrand/index',
|
||||
icon: 'ShoppingOutlined',
|
||||
},
|
||||
{
|
||||
path: 'brand',
|
||||
name: 'brand',
|
||||
|
||||
239
src/pages/basicManage/operatingBrand/index.tsx
Normal file
239
src/pages/basicManage/operatingBrand/index.tsx
Normal file
@ -0,0 +1,239 @@
|
||||
// 经营品牌管理
|
||||
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 } from "@ant-design/icons";
|
||||
import type { FormInstance } from "antd";
|
||||
import { Button, message, Space, Spin, Tree } from "antd";
|
||||
import useRequest from "@ahooksjs/use-request";
|
||||
import { getServerpartTree } 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 LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
||||
import PageTitleBox from "@/components/PageTitleBox";
|
||||
import { getBusniessBrandTree } from "../service";
|
||||
|
||||
|
||||
const operatingBrand: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
const { currentUser } = props
|
||||
const downloadBtnRef = useRef<any>()
|
||||
const actionRef = useRef<ActionType>();
|
||||
const formRef = useRef<FormInstance>();
|
||||
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
||||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||||
const [treeView, setTreeView] = useState<any>()
|
||||
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
||||
|
||||
|
||||
// 树相关的属性和方法
|
||||
const [selectedId, setSelectedId] = useState<string>()
|
||||
// 导出的加载效果
|
||||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||||
// 是否显示打印的表格
|
||||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||||
// 查询的条件
|
||||
const [searchParams, setSearchParams] = useState<any>()
|
||||
// 导出数据
|
||||
const [exportData, setExportData] = useState<any>()
|
||||
|
||||
const columns: any = [
|
||||
// {
|
||||
// title: <div style={{ textAlign: 'center' }}>品牌图标</div>,
|
||||
// dataIndex: 'BusinessTrade_ICO',
|
||||
// align: 'right',
|
||||
// hideInSearch: true,
|
||||
// },
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>品牌名称</div>,
|
||||
dataIndex: 'BusinessTrade_Name',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
]
|
||||
|
||||
const exportColumns: any = [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>经营业态</div>,
|
||||
dataIndex: 'Business_Format',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>品牌名称</div>,
|
||||
dataIndex: 'BusinessTrade_Name',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
]
|
||||
|
||||
const exportTable = (e) => {
|
||||
e.stopPropagation(); // 防止Collapse组件收起
|
||||
const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0]
|
||||
const thead = main.querySelector('thead').cloneNode(true); // 深克隆DOM节点
|
||||
const tbody = main.querySelector('tbody').cloneNode(true); // 深克隆DOM节点
|
||||
const container = document.querySelector('#hiddenBox');
|
||||
|
||||
const tempTable = document.createElement('table');
|
||||
tempTable.appendChild(thead);
|
||||
tempTable.appendChild(tbody);
|
||||
|
||||
tempTable.setAttribute('id', 'table-to-xls-operatingBrand'); // 给table添加id,值与按钮上的table字段对应
|
||||
|
||||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||||
|
||||
setShowLoading(false)
|
||||
|
||||
downloadBtnRef.current.handleDownload();
|
||||
setShowExportTable(false)
|
||||
tempTable.remove() // 防止重复打印一个内容
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div ref={(el) => {
|
||||
// 打印报表
|
||||
if (!reqDetailList || reqDetailList.length === 0) return;
|
||||
setPrintOut(el);
|
||||
}} >
|
||||
|
||||
{
|
||||
showLoading ?
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'rgba(0,0,0,0.1)',
|
||||
position: 'fixed',
|
||||
zIndex: 5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '15px 20px 10px',
|
||||
background: '#fff',
|
||||
borderRadius: '8px',
|
||||
width: '200px'
|
||||
}}>
|
||||
<Spin />
|
||||
<span style={{ marginLeft: '5px' }}>数据导出中...</span>
|
||||
</div>
|
||||
</div> : ''
|
||||
}
|
||||
|
||||
<div className={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||||
{
|
||||
showExportTable && exportData && exportData.length > 0 ?
|
||||
<ProTable
|
||||
columns={exportColumns}
|
||||
dataSource={exportData}
|
||||
pagination={false}
|
||||
expandable={{
|
||||
defaultExpandAllRows: true
|
||||
}}
|
||||
/> : ''
|
||||
}
|
||||
</div>
|
||||
<div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
|
||||
|
||||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
paddingRight: 0
|
||||
}}>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
rowKey={(record) => {
|
||||
return `${record?.BusinessTrade_Id}`
|
||||
}}
|
||||
bordered
|
||||
expandable={{
|
||||
expandRowByClick: true
|
||||
}}
|
||||
scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
|
||||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
const req: any = {
|
||||
ProvinceCode: currentUser?.ProvinceCode,
|
||||
BrandState: 1
|
||||
}
|
||||
setSearchParams(params)
|
||||
const data = await getBusniessBrandTree(req)
|
||||
if (data && data.length > 0) {
|
||||
let exportData: any = []
|
||||
|
||||
data.forEach((item: any) => {
|
||||
exportData.push({
|
||||
Business_Format: item.BusinessTrade_Name,
|
||||
BusinessTrade_Name: ""
|
||||
})
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((subItem: any) => {
|
||||
exportData.push({
|
||||
Business_Format: item.BusinessTrade_Name,
|
||||
BusinessTrade_Name: subItem.BusinessTrade_Name,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
setExportData(exportData)
|
||||
|
||||
return { data, success: true }
|
||||
}
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
toolbar={{
|
||||
actions: [
|
||||
<span style={{ visibility: 'hidden' }}>
|
||||
<ReactHTMLTableToExcel
|
||||
buttonText={'导出excel'}
|
||||
ref={downloadBtnRef}
|
||||
table="table-to-xls-operatingBrand"
|
||||
filename={`经营品牌列表`}
|
||||
sheet="sheet1"
|
||||
/>
|
||||
</span>,
|
||||
<Button
|
||||
key="new"
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
if (exportData && exportData.length > 0) {
|
||||
setShowLoading(true)
|
||||
setTimeout(() => {
|
||||
setShowExportTable(true)
|
||||
setTimeout(() => {
|
||||
exportTable(e)
|
||||
}, 100)
|
||||
}, 100)
|
||||
} else {
|
||||
message.error('暂无数据可导出!')
|
||||
}
|
||||
}}
|
||||
>
|
||||
导出excel
|
||||
</Button>
|
||||
]
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user }: ConnectState) => ({
|
||||
currentUser: user.currentUser
|
||||
}))(operatingBrand);
|
||||
@ -60,7 +60,7 @@ const ConvenienceStoreProductReview: React.FC<{ currentUser: CurrentUser }> = (p
|
||||
dataIndex: 'searchText',
|
||||
hideInTable: true,
|
||||
fieldProps: {
|
||||
placeholder: '请输入商品名称'
|
||||
placeholder: '请输入商品名称/商品条码/商品编码',
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -88,6 +88,23 @@ const ConvenienceStoreProductReview: React.FC<{ currentUser: CurrentUser }> = (p
|
||||
}}>{record?.COMMODITY_NAME}</a> : "-"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "商品条码",
|
||||
width: 150,
|
||||
dataIndex: "COMMODITY_BARCODE",
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
// 领导说取这个字段
|
||||
{
|
||||
title: "商品编码",
|
||||
width: 150,
|
||||
dataIndex: "COMMODITY_BRAND",
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: "商品规格",
|
||||
width: 150,
|
||||
@ -261,7 +278,7 @@ const ConvenienceStoreProductReview: React.FC<{ currentUser: CurrentUser }> = (p
|
||||
BUSINESSTYPES: 1005
|
||||
},
|
||||
keyWord: {
|
||||
Key: "COMMODITY_NAME",
|
||||
Key: "COMMODITY_NAME,COMMODITY_BARCODE,COMMODITY_BRAND",
|
||||
Value: params?.searchText || ""
|
||||
},
|
||||
PageIndex: 1,
|
||||
|
||||
@ -44,6 +44,7 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||||
const [treeView, setTreeView] = useState<any>()
|
||||
const [allTreeView, setAllTreeView] = useState<any>()
|
||||
const [allTotal, setAllTotal] = useState<number>(20)
|
||||
// 加载服务区树
|
||||
const { loading: treeLoading, data: treeViews } = useRequest(async () => {
|
||||
@ -53,7 +54,18 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
ShowCode: true
|
||||
}
|
||||
const data = await handleGetNestingCOMMODITYTYPETree(req)
|
||||
setTreeView(data)
|
||||
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
|
||||
})
|
||||
// 树相关的属性和方法
|
||||
@ -67,11 +79,16 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false)
|
||||
const [selectBUSINESSTYPE, setSelectBUSINESSTYPE] = useState<any>()
|
||||
const [selectSERVERPARTID, setSelectSERVERPARTID] = useState<any>()
|
||||
// 商品类型
|
||||
const [shopType, setShopType] = useState<any>()
|
||||
|
||||
|
||||
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) => {
|
||||
@ -109,25 +126,52 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
hideInTable: true,
|
||||
valueType: 'select',
|
||||
request: async () => {
|
||||
const data = await getServerpartOption(340000)
|
||||
return data
|
||||
// const data = await getServerpartOption(340000)
|
||||
// return data
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
serverpartList.unshift({
|
||||
label: "全部",
|
||||
value: serverpartId
|
||||
})
|
||||
return serverpartList
|
||||
},
|
||||
fieldProps: {
|
||||
showSearch: true,
|
||||
filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'searchText',
|
||||
title: '查询内容',
|
||||
hideInTable: true,
|
||||
fieldProps: {
|
||||
placeholder: "请输入商品名称/商品条码/商品类型"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>序号</div>,
|
||||
dataIndex: 'index',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
valueType: 'index'
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>服务区</div>,
|
||||
dataIndex: 'SERVERPART_NAME',
|
||||
width: 140,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
@ -155,7 +199,7 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>商品名称</div>,
|
||||
width: 150,
|
||||
width: 300,
|
||||
ellipsis: true,
|
||||
dataIndex: 'COMMODITY_NAME',
|
||||
align: 'center',
|
||||
@ -218,6 +262,7 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
title: <div style={{ textAlign: 'center' }}>操作</div>,
|
||||
width: 100,
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
render: (_, record) => [
|
||||
<a style={{ marginRight: '8px' }} onClick={async () => {
|
||||
setCurrentRow({
|
||||
@ -291,6 +336,22 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
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()
|
||||
@ -421,20 +482,24 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
columns={columns}
|
||||
bordered
|
||||
headerTitle={<PageTitleBox props={props} />}
|
||||
scroll={{ y: 'calc(100vh - 430px)' }}
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
if (!currenMenu) {
|
||||
return
|
||||
}
|
||||
|
||||
const req: any = {
|
||||
...params,
|
||||
SearchType: 3,
|
||||
ProvinceCode: currentUser?.USER_PROVINCE,
|
||||
CommodityTypeId: currenMenu,
|
||||
ProvinceCode: currentUser?.ProvinceCode,
|
||||
CommodityTypeId: currenMenu === '999999' ? '' : currenMenu,
|
||||
// CommodityState: params?.COMMODITY_STATE,
|
||||
PageIndex: 1,
|
||||
PageSize: 99999,
|
||||
pageSize: 99999
|
||||
PageIndex: params.current,
|
||||
PageSize: params?.pageSize,
|
||||
pageSize: params?.pageSize,
|
||||
SearchKey: "COMMODITY_NAME,COMMODITY_BARCODE",
|
||||
SearchValue: params?.searchText || ""
|
||||
// PageSize: 20
|
||||
}
|
||||
console.log('req', req)
|
||||
@ -444,7 +509,7 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
if (data.List && data.List.length > 0) {
|
||||
console.log('data', data)
|
||||
// setAllTotal(data.TotalCount)
|
||||
return { data: data.List, success: true }
|
||||
return { data: data.List, success: true, total: data.TotalCount }
|
||||
}
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
@ -481,11 +546,13 @@ const commodityInfo: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
if (currentRow) {
|
||||
req = {
|
||||
...currentRow,
|
||||
...res
|
||||
...res,
|
||||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
} else {
|
||||
req = {
|
||||
...res
|
||||
...res,
|
||||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
console.log('req', req)
|
||||
|
||||
@ -142,6 +142,7 @@ request.interceptors.request.use((url, opt: any) => {
|
||||
...options.data,
|
||||
PROVINCE_CODE: (options.data.PROVINCE_CODE || currentUser.ProvinceCode),
|
||||
BUSINESSMAN_ID: currentUser.BusinessManID,
|
||||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,12 +119,13 @@ request.interceptors.request.use((url, opt) => {
|
||||
OWNERUNIT_NAME: currentUser.ProvinceUnit,
|
||||
PROVINCE_CODE: currentUser.ProvinceCode,
|
||||
|
||||
OPERATE_DATE: moment().format()
|
||||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
if (currentUser?.UserPattern === 2000) {
|
||||
options.data = {
|
||||
...options.data,
|
||||
BUSINESSMAN_ID: currentUser.BusinessManID,
|
||||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user