1215 lines
52 KiB
TypeScript
1215 lines
52 KiB
TypeScript
import './ItemDetail.less'
|
||
import closeIcon from '@/assets/brand/closeIcon.png'
|
||
import { Button, Col, DatePicker, Drawer, Row, Spin, Image, Upload, Popconfirm, message, Modal, Input } from "antd";
|
||
import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
|
||
import type { tabType } from "@/pages/DataVerification/list/data";
|
||
import ProForm, { ProFormText, ProFormTextArea } from "@ant-design/pro-form";
|
||
import Dragger from "antd/es/upload/Dragger";
|
||
import { InboxOutlined } from "@ant-design/icons";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import PayDetail from "@/pages/DataVerification/list/components/PayDetail";
|
||
import FlowFlush from "@/pages/DataVerification/list/components/FlowFlush";
|
||
|
||
import allRealMoney from '@/assets/DataVerification/allRealMoney.png'
|
||
import north from '@/assets/DataVerification/north.png'
|
||
import south from '@/assets/DataVerification/south.png'
|
||
import west from '@/assets/DataVerification/west.png'
|
||
import east from '@/assets/DataVerification/east.png'
|
||
import waitCheck from '@/assets/DataVerification/waitCheck.png'
|
||
import activeWaitCheck from '@/assets/DataVerification/activeWaitCheck.png'
|
||
import successCheck from '@/assets/DataVerification/successCheck.png'
|
||
import activeSuccessCheck from '@/assets/DataVerification/activeSuccessCheck.png'
|
||
import billBasic from '@/assets/DataVerification/billBasic.png'
|
||
import billSale from '@/assets/DataVerification/billSale.png'
|
||
import billCheck from '@/assets/DataVerification/billCheck.png'
|
||
import auditFeedback from '@/assets/DataVerification/auditFeedback.png'
|
||
import productDataImg from '@/assets/DataVerification/productData.png'
|
||
import mobilePay from '@/assets/DataVerification/mobilePay.png'
|
||
import upLoad from '@/assets/DataVerification/upLoad.png'
|
||
import fixed from '@/assets/DataVerification/fixed.png'
|
||
import noData from '@/assets/DataVerification/noData.svg'
|
||
import defaultIcon from '@/assets/brand/defaultIcon.png'
|
||
import moment from "moment/moment";
|
||
import {
|
||
handleDetailList,
|
||
handleDetail,
|
||
handleBrandDetailList,
|
||
handleGetShopData,
|
||
handleGetPictureList,
|
||
handleSaveEndAccount,
|
||
handleSaveAddShopData, handleExamine
|
||
} from "@/pages/DataVerification/list/service";
|
||
import ReportDetail from "@/pages/DataVerification/list/components/reportDetail";
|
||
import { uploadFile } from "@/pages/supplier/supplierList/service";
|
||
import ProductData from "@/pages/DataVerification/list/components/ProductData";
|
||
import AuditDetail from "@/pages/DataVerification/list/components/auditDetail";
|
||
import DetailBasicInfo from './detailBasicInfo';
|
||
|
||
const { REACT_APP_ENV } = process.env;
|
||
|
||
|
||
const ItemDetail: React.FC<{ currentItem?: any, showDetail?: any, currentRow?: any, searchTimeParent?: any, currentUser: any, onRef?: any, handleKnowChildrenTabChange: any, pageVersion?: any }> = ({ currentItem, showDetail, currentRow, searchTimeParent, currentUser, onRef, handleKnowChildrenTabChange, pageVersion }) => {
|
||
const formRef = useRef()
|
||
const examineForm = useRef<any>()
|
||
const flowFlushBigRef = useRef()
|
||
const auditDetailRef = useRef<any>()
|
||
const productDataRef = useRef()
|
||
const { RangePicker } = DatePicker;
|
||
const [selectTab, setSelectTab] = useState<number>(1)
|
||
const [payDetail, setPayDetail] = useState<boolean>(false)// 支付明细的抽屉
|
||
const [flowFlush, setFlowFlush] = useState<boolean>(false)
|
||
const [tabList, setTabList] = useState<tabType[]>([
|
||
{ label: '待我校验', icon: waitCheck, selectIcon: activeWaitCheck, number: 0, value: 1 },
|
||
{ label: '我已校验', icon: successCheck, selectIcon: activeSuccessCheck, number: 0, value: 2 }])
|
||
const [searchTime, setSearchTime] = useState<any>(searchTimeParent || [moment().subtract(1, 'day'), moment().subtract(1, 'day')])
|
||
const [leftTimeAllList, setLeftTimeAllList] = useState<any>()
|
||
const [showChangeLoading, setShowChangeLoading] = useState<boolean>(false)// 切换左侧页面 相信信息的的loading
|
||
const [leftTimeList, setLeftTimeList] = useState<any>()// 左侧时间列表
|
||
const [selectLeftTime, setSelectLeftTime] = useState<number>()
|
||
const [currentDetail, setCurrentDetail] = useState<any>()
|
||
const [topDetail, setTopDetail] = useState<any>()
|
||
// 审核悬浮框
|
||
const [examineModal, setExamineModal] = useState<boolean>(false)
|
||
// 上传文件的悬浮框
|
||
const [upLoadModal, setUpLoadModal] = useState<boolean>(false)
|
||
// 禁用操作按钮
|
||
const [disableBtn, setDisableBtn] = useState<boolean>(true)
|
||
// 稽查反馈的列表数据
|
||
const [auditTableData, setAuditTableData] = useState<any>()
|
||
// 稽查反馈的抽屉
|
||
const [showAuditDrawer, setShowAuditDrawer] = useState<boolean>(false)
|
||
// 稽查反馈点击的那行数据
|
||
const [auditRowDetail, setAuditRowDetail] = useState<any>()
|
||
// 添加单品
|
||
const [productsDrawer, setProductsDrawer] = useState<boolean>(false)
|
||
// 文件列表
|
||
const [fileList, setFileList] = useState<any>()
|
||
const columns: any = [
|
||
{
|
||
dataIndex: 'Check_Info',
|
||
title: '稽核反馈',
|
||
},
|
||
{
|
||
dataIndex: 'Error_Rate',
|
||
title: '稽核误差率',
|
||
render: (_, record) => {
|
||
return <span style={{ color: record.Error_Rate > 0.2 ? 'red' : '' }}>{`${record.Error_Rate}%`}</span>
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'Difference_Amount',
|
||
title: '长短款/流水冲正',
|
||
render: (_, record) => {
|
||
return <span style={{ color: record.Difference_Amount > 0 ? 'green' : 'red' }}>
|
||
{`${record.Difference_Amount} / ${record.Supplement_Amount}`}
|
||
</span>
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'Audit_Date',
|
||
title: '稽查时间',
|
||
},
|
||
{
|
||
dataIndex: 'Audit_Type',
|
||
title: '稽查类型',
|
||
},
|
||
{
|
||
dataIndex: 'Audit_Id',
|
||
title: '稽查内码',
|
||
hideInTable: true
|
||
},
|
||
]
|
||
// 图片数组
|
||
const [imgList, setImgList] = useState<any>()
|
||
const [productData, setProductData] = useState<any>()// 单品数据 1
|
||
const [mobilePayment, setMobilePayment] = useState<any>()// 移动支付 3
|
||
const [cigarettePayment, setCigarettePayment] = useState<any>()// 香烟支付 2
|
||
// 三个查询报表的抽屉
|
||
const [queryRecords, setQueryRecords] = useState<boolean>(false)
|
||
// 三个查询报表记录 选择的哪个
|
||
const [selectQueryType, setSelectQueryType] = useState<number>(0)
|
||
// 整个抽屉的校验loading
|
||
const [itemDetailLoading, setItemDetailLoading] = useState<boolean>(false)
|
||
const fmoney = (s: number, n?: number) => {
|
||
/*
|
||
* 参数说明：
|
||
* s：要格式化的数字
|
||
* n：保留几位小数
|
||
* */
|
||
n = n > 0 && n <= 20 ? n : s.toString().indexOf('.') === -1 ? 0 : s.toString().indexOf('.') > -1 ? s.toString().split('.')[1].length : 2;
|
||
let fuhao = ''; // 如果数字小于零则值为-
|
||
if (s < 0) {
|
||
s = Math.abs(s);
|
||
fuhao = '-'
|
||
}
|
||
s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, "")).toFixed(n)}`;
|
||
const l = s.split(".")[0].split("").reverse();
|
||
const r = s.split(".")[1];
|
||
let t = "";
|
||
for (let i = 0; i < l.length; i++) {
|
||
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
|
||
}
|
||
if (n === 0) {
|
||
return s
|
||
}
|
||
return `${fuhao + [...t].reverse().join("")}.${r}`;
|
||
|
||
}
|
||
|
||
const handleGetItemDetail = async () => {
|
||
setShowChangeLoading(true)
|
||
const req = {
|
||
RoleType: 1,
|
||
ServerpartId: currentRow.Serverpart_Id,
|
||
ServerpartShopCode: currentRow.ServerpartShop_Code,
|
||
StartDate: moment(searchTime[0]).format('YYYY-MM-DD'),
|
||
EndDate: moment(searchTime[1]).format('YYYY-MM-DD'),
|
||
}
|
||
const data = await handleBrandDetailList(req)
|
||
const resultData = JSON.parse(JSON.stringify(data))
|
||
setTopDetail(resultData)
|
||
if (resultData.VerifyList && resultData.VerifyList.length > 0) {
|
||
resultData.VerifyList.forEach((item: any) => {
|
||
item.name = resultData.ServerpartShop_Name
|
||
})
|
||
}
|
||
if (resultData.VerifiedList && resultData.VerifiedList.length > 0) {
|
||
resultData.VerifiedList.forEach((item: any) => {
|
||
item.name = resultData.ServerpartShop_Name
|
||
})
|
||
}
|
||
setLeftTimeAllList([resultData.VerifyList, resultData.VerifiedList])
|
||
console.log('resultData323', resultData);
|
||
|
||
const selectTabList: any = JSON.parse(JSON.stringify(tabList))
|
||
selectTabList.forEach((item: any) => {
|
||
if (item.label === '待我校验') {
|
||
item.number = data.VerifyList.length
|
||
} else {
|
||
item.number = data.VerifiedList.length
|
||
}
|
||
})
|
||
|
||
setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][selectTab - 1])
|
||
|
||
|
||
if (selectTabList[0].number === 0) {
|
||
setSelectTab(2)
|
||
setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][1])
|
||
} else {
|
||
setLeftTimeList([resultData.VerifyList, resultData.VerifiedList][selectTab - 1])
|
||
}
|
||
setTabList(selectTabList)
|
||
// 如果未校验有值 那默认显示数组第一个 没值就显示第二个
|
||
const leftList: any = [resultData.VerifyList, resultData.VerifiedList][selectTabList[0].number === 0 ? 1 : 0]
|
||
console.log('leftList', leftList);
|
||
|
||
if (leftList && leftList.length > 0) {
|
||
// setSelectLeftTime(leftList[0].value)
|
||
// handleGetDetail(leftList[0].value, selectTab)
|
||
setSelectLeftTime(currentRow?.Endaccount_Id)
|
||
handleGetDetail(currentRow?.Endaccount_Id, selectTab)
|
||
} else {
|
||
formRef.current?.resetFields()
|
||
}
|
||
setShowChangeLoading(false)
|
||
}
|
||
|
||
useEffect(async () => {
|
||
if (showDetail && currentRow) {
|
||
// 抽屉顶部显示内容调用的接口
|
||
handleGetItemDetail()
|
||
|
||
}
|
||
}, [showDetail]);
|
||
|
||
// 拿到校验说明
|
||
const handleGetApprovedInfo = () => {
|
||
const data = formRef.current?.getFieldsValue()
|
||
return data
|
||
}
|
||
// 校验表单方法
|
||
const handleForm = async () => {
|
||
let flag: boolean = false
|
||
const res = await formRef.current?.validateFields()
|
||
console.log('res', res)
|
||
if (res) {
|
||
flag = true
|
||
}
|
||
return flag
|
||
}
|
||
|
||
// 改变最大的抽屉loading
|
||
const showDetailLoading = (type: boolean) => {
|
||
setItemDetailLoading(type)
|
||
}
|
||
|
||
|
||
useImperativeHandle(onRef, () => ({
|
||
selectTab,
|
||
handleGetApprovedInfo,
|
||
currentDetail,
|
||
auditTableData,
|
||
handleLeftListChange,
|
||
handleForm,
|
||
handleGetItemDetail,
|
||
showDetailLoading
|
||
}));
|
||
|
||
const handleLeftListChange = () => {
|
||
if (leftTimeList && leftTimeList.length === 0 && selectTab === 1) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
|
||
useEffect(() => {
|
||
handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
|
||
}, [selectTab]);
|
||
useEffect(() => {
|
||
handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
|
||
}, [leftTimeList]);
|
||
useEffect(() => {
|
||
handleKnowChildrenTabChange(selectTab, leftTimeList && leftTimeList.length > 0 ? leftTimeList.length : 0, disableBtn)
|
||
}, [disableBtn]);
|
||
const handleGetDetail = async (id: number, tabSelect?: number) => {
|
||
const req = {
|
||
EndaccountId: id
|
||
}
|
||
const data = await handleDetail(req)
|
||
setAuditTableData(data.AuditInfoList)
|
||
if (tabSelect !== 2) {
|
||
handleGetShopPriceData(1, data.Endaccount_Id)
|
||
handleGetShopPriceData(3, data.Endaccount_Id)
|
||
if (data.ShowCigarette) {
|
||
handleGetShopPriceData(2, data.Endaccount_Id, data.CigaretteType)
|
||
}
|
||
}
|
||
setCurrentDetail(data)
|
||
formRef.current?.setFieldsValue(
|
||
{
|
||
...data,
|
||
AvgTicketPrice: data.Ticket_Count ? fmoney(data.TotalSell_Amount / data.Ticket_Count, 2) : ''
|
||
}
|
||
)
|
||
setShowChangeLoading(false)
|
||
getPictureList(data.Endaccount_Id)
|
||
}
|
||
|
||
const handleGetShopPriceData = async (type: number, id: number, CigaretteType?: any) => {
|
||
// type 为数据类型 1单品数据 2香烟数据 3移动支付 id 为日结账期内码
|
||
let req = {}
|
||
if (type === 1) {
|
||
req = {
|
||
Data_Type: 1,
|
||
Endaccount_ID: id,
|
||
}
|
||
}
|
||
else if (type === 2) {
|
||
req = {
|
||
Data_Type: 2,
|
||
Endaccount_ID: id,
|
||
CigaretteType
|
||
}
|
||
}
|
||
else {
|
||
req = {
|
||
Data_Type: 3,
|
||
Endaccount_ID: id,
|
||
ReloadType: 1
|
||
}
|
||
}
|
||
const data = await handleGetShopData(req)
|
||
if (type === 1) {
|
||
setProductData(data)
|
||
formRef?.current?.setFieldsValue({
|
||
...data,
|
||
SellCount_Sale: data.count,
|
||
FactAmount_Sale: data.amount
|
||
})
|
||
}
|
||
else if (type === 2) {
|
||
setCigarettePayment(data)
|
||
formRef?.current?.setFieldsValue({
|
||
...data,
|
||
FactAmount_Cigarette: data.amount,
|
||
SellCount_Cigarette: data.count
|
||
})
|
||
}
|
||
else if (type === 3) {
|
||
setMobilePayment(data)
|
||
formRef?.current?.setFieldsValue({
|
||
...data,
|
||
FactAmount_Mobilepayment: data.amount
|
||
})
|
||
}
|
||
setShowChangeLoading(false)
|
||
}
|
||
|
||
|
||
const getPictureList = (id: any) => {
|
||
setShowChangeLoading(true)
|
||
const req = {
|
||
TableId: id,
|
||
TableName: "ENDACCOUNT",
|
||
}
|
||
handleGetPictureList(req).then((data: any) => {
|
||
console.log('setImgList', data)
|
||
if (data && data.List && data.List.length > 0) {
|
||
data.List.forEach((item: any) => {
|
||
item.url = item.ImageUrl
|
||
item.status = 'done'
|
||
})
|
||
setImgList(data.List)
|
||
}
|
||
setShowChangeLoading(false)
|
||
})
|
||
}
|
||
|
||
// 单品报表 香烟记录 支付记录 按钮点击调用的方法
|
||
// 1 为单品报表 2为香烟记录 3为支付记录
|
||
const handleGetQueryRecords = async (type: number) => {
|
||
setQueryRecords(true)
|
||
setSelectQueryType(type)
|
||
}
|
||
|
||
return (
|
||
<div className={'detailDrawer'}>
|
||
{
|
||
itemDetailLoading ?
|
||
<div className={'detailLoading'}>
|
||
<div className={'loading'}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>{'校验中.....'}</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
{/* 抽屉顶部的品牌信息 */}
|
||
<div className={'detailTop'}>
|
||
<p className={'detailTitle'}>品牌信息</p>
|
||
<img className={'closeIcon'} src={closeIcon} />
|
||
</div>
|
||
|
||
|
||
{
|
||
pageVersion === 'new' ?
|
||
<div className={'detailContent'}>
|
||
{/* 蓝色带图标的详情框 */}
|
||
<div className={'contentTop'}>
|
||
<img className={'brandIcon'} src={currentRow?.ServerpartShop_ICO || defaultIcon} />
|
||
<div className={'contentTopRight'}>
|
||
|
||
<div className={'detailRightTop'}>
|
||
<div className={'nameType'}>
|
||
<span className={'brandName'}>{currentRow?.ServerpartShop_Name}</span>
|
||
{/* <span className={'brandType'}>{currentRow?.Business_Type}</span> */}
|
||
<div className={'brandType'} style={{ background: currentRow?.Treatment_MarkState === -1 ? '#FFE4E4' : currentRow?.Treatment_MarkState === 1 ? '#EBEDEE' : '', color: currentRow?.Treatment_MarkState === -1 ? '#FF2F0D' : currentRow?.Treatment_MarkState === 1 ? '#686E75' : '' }}>
|
||
{currentRow?.Treatment_MarkState === -1 ? '未上传' : currentRow?.Treatment_MarkState === 0 ? '待处理' : currentRow?.Treatment_MarkState === 1 ? '已处理' : ''}</div>
|
||
</div>
|
||
<div className={'serviceBox'}>
|
||
<img className={'serviceIcon'} src={fixed} />
|
||
<span className={'serviceName'}>{currentRow?.Serverpart_Name}</span>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'progressDetail'}>
|
||
<div className={'progressBox'}>
|
||
<div className={'progressHave'} style={{ width: `${(currentRow?.Deal_Count / currentRow?.Total_Count) * 100}%` }}></div>
|
||
</div>
|
||
<span className={'rote'}>{`${currentRow?.Deal_Count}/${currentRow?.Total_Count}`}</span>
|
||
</div>
|
||
|
||
<div className={'detailBottom'}>
|
||
<div className={'detailItem'}>
|
||
<div className={'itemTop'}>
|
||
<img className={'itemIcon'} src={allRealMoney} />
|
||
<span className={'itemLabel'}>{'总实收金额/元'}</span>
|
||
</div>
|
||
<span className={'itemValue'}>{topDetail?.Revenue_Amount ? fmoney(topDetail?.Revenue_Amount, 2) : '0'}</span>
|
||
</div>
|
||
{
|
||
topDetail?.ShopRegion_Name_A ?
|
||
<div className={'detailItem'}>
|
||
<div className={'itemTop'}>
|
||
<img className={'itemIcon'} src={topDetail?.ShopRegion_Name_B === '西区' ? east : south} />
|
||
<span className={'itemLabel'}>{`${topDetail?.ShopRegion_Name_A}实收金额/元`}</span>
|
||
</div>
|
||
<span className={'itemValue'}>{topDetail?.Revenue_Amount_A ? fmoney(topDetail?.Revenue_Amount_A, 2) : '0'}</span>
|
||
</div>
|
||
: ''
|
||
}
|
||
|
||
{
|
||
topDetail?.ShopRegion_Name_B ?
|
||
<div className={'detailItem'}>
|
||
<div className={'itemTop'}>
|
||
<img className={'itemIcon'} src={topDetail?.ShopRegion_Name_B === '西区' ? west : north} />
|
||
<span className={'itemLabel'}>{`${topDetail?.ShopRegion_Name_B}实收金额/元`}</span>
|
||
</div>
|
||
<span className={'itemValue'}>{topDetail?.Revenue_Amount_B ? fmoney(topDetail?.Revenue_Amount_B, 2) : '0'}</span>
|
||
</div> : ''
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'detailListBox'}>
|
||
{/* tab选项卡和搜索时间框 */}
|
||
<div className={'tabBox'}>
|
||
<div className={'tab'}>
|
||
{
|
||
tabList.map((item: tabType) => {
|
||
return item.number === 0 ? '' : <div className={selectTab === item.value ? 'selectTab tabItem' : 'tabItem'} onClick={() => {
|
||
setSelectTab(item.value)
|
||
setLeftTimeList(leftTimeAllList[item.value - 1])
|
||
setShowChangeLoading(true)
|
||
if (leftTimeAllList[item.value - 1] && leftTimeAllList[item.value - 1].length > 0) {
|
||
setSelectLeftTime(leftTimeAllList[item.value - 1][0].value)
|
||
handleGetDetail(leftTimeAllList[item.value - 1][0].value, item.value)
|
||
} else {
|
||
setShowChangeLoading(false)
|
||
formRef.current?.resetFields()
|
||
}
|
||
}}>
|
||
<img className={'tabIcon'} src={selectTab === item.value ? item.selectIcon : item.icon} />
|
||
<span className={'tabName'}>{item.label}</span>
|
||
<span className={'number'}>{`(${item.number})`}</span>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
<div className={'searchBox'}>
|
||
<RangePicker
|
||
value={searchTime}
|
||
onChange={(e: any) => {
|
||
if (e && e.length > 0) {
|
||
setSearchTime([moment(e[0]._d), moment(e[1]._d)])
|
||
} else {
|
||
setSearchTime([])
|
||
}
|
||
}}
|
||
/>
|
||
<Button style={{ marginLeft: '8px' }} type={'primary'} onClick={() => {
|
||
handleGetItemDetail()
|
||
}}>查询</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'listBox'}>
|
||
<div className={'listLeft'}>
|
||
{
|
||
leftTimeList && leftTimeList.length > 0 ?
|
||
leftTimeList.map((item: any) => {
|
||
return <div className={item.value === selectLeftTime ? 'selectListItem listItem' : 'listItem'} onClick={() => {
|
||
setSelectLeftTime(item.value)
|
||
setImgList([])
|
||
if (item.type !== 0) {
|
||
setShowChangeLoading(true)
|
||
handleGetDetail(item.value)
|
||
}
|
||
if (item.type === 0) {
|
||
formRef.current?.resetFields()
|
||
setDisableBtn(false)
|
||
} else {
|
||
setDisableBtn(true)
|
||
}
|
||
}}>{`${item.label}【${item.key}】`}</div>
|
||
}) : ''
|
||
}
|
||
</div>
|
||
|
||
{showChangeLoading ?
|
||
<div className={'LoadingBox'}>
|
||
<div className={'loading'}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>{'加载中'}</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
{
|
||
leftTimeList && leftTimeList.length > 0 ?
|
||
<div className={'listRight'}>
|
||
<ProForm
|
||
formRef={formRef}
|
||
submitter={{
|
||
// 清空表单自带的按钮
|
||
render: (props, doms) => {
|
||
return []
|
||
}
|
||
}}>
|
||
<div className={'rightFormTitle'}>
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={billBasic} />
|
||
<span className={'titleName'}>{'账单基础信息'}</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px' }}>
|
||
<Row>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='收银机号'
|
||
name='MachineCode'
|
||
/>
|
||
</Col>
|
||
<Col className={'CashierName'} span={6}>
|
||
<ProFormText
|
||
|
||
readonly
|
||
label='收银人员'
|
||
name='Cashier_Name'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='结账人员'
|
||
name='Checkout_Name'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='稽核人员'
|
||
name='Auditor_Name'
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='起始时间'
|
||
name='Endaccount_StartDate'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='结账时间'
|
||
name='Endaccount_EndDate'
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
<div className={'rightFormTitle'} >
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={billSale} />
|
||
<span className={'titleName'}>{'账单销售信息'}</span>
|
||
</div>
|
||
{
|
||
disableBtn ?
|
||
<Button onClick={() => {
|
||
setPayDetail(true)
|
||
}}>支付明细</Button> : ''
|
||
}
|
||
</div>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px' }}>
|
||
<Row>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='客单数量'
|
||
name='Ticket_Count'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='客单均价'
|
||
name='AvgTicketPrice'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='优惠金额'
|
||
name='TotalOff_Amount'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label='稽核补录'
|
||
name='Check_Replenish'
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<div className={'specialField'}>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="总销售额"
|
||
name='TotalSell_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="现金支付"
|
||
name='Cash_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="移动支付"
|
||
name='MobilePay_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="其他支付"
|
||
name='OtherPay_Amount'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'specialField'}>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="长款金额"
|
||
name='Difference_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="缴款金额"
|
||
name='Payment_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'-'}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="现金支付"
|
||
name='Cash_Amount'
|
||
/>
|
||
</div>
|
||
{/* <span>{'+'}</span> */}
|
||
<div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'rightFormTitle'} >
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={billCheck} />
|
||
<span className={'titleName'}>{'账单校验说明'}<span style={{ marginLeft: '12px', color: 'red', fontSize: '14px', fontWeight: 500 }}>{'必填项'}</span></span>
|
||
</div>
|
||
{
|
||
disableBtn ?
|
||
<Button onClick={() => {
|
||
setFlowFlush(true);
|
||
}}>流水冲正</Button> : ''
|
||
}
|
||
</div>
|
||
<div className={'specialField'} >
|
||
<div style={{ paddingLeft: '20px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: "space-between" }}>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入实收金额'
|
||
}
|
||
]}
|
||
label="实收金额"
|
||
name='Revenue_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'='}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="总销售额"
|
||
name='TotalSell_Amount'
|
||
/>
|
||
</div>
|
||
<span style={{ width: '10px', textAlign: 'center', marginTop: '15px' }}>{'+'}</span>
|
||
<div className={'fieldItem'}>
|
||
<ProFormText
|
||
// readonly
|
||
disabled
|
||
label="冲正金额"
|
||
name='Correct_TotalAmount'
|
||
/>
|
||
</div>
|
||
<div className={'fieldItem'} style={{ width: 'calc(25% + 10px)' }}>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Row>
|
||
<div style={{ width: '100%' }}>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
|
||
<Col span={24}>
|
||
{
|
||
currentDetail?.Approved_Info ?
|
||
<span style={{ color: 'red' }}>{`${currentDetail?.Approved_Staff || '-'}【${currentDetail?.Approved_Date || '-'}】:${currentDetail?.Approved_Info || '-'}`}</span> : ''
|
||
}
|
||
<ProFormTextArea
|
||
label="校验说明"
|
||
name='Description_Info'
|
||
/>
|
||
</Col>
|
||
</div>
|
||
</div>
|
||
</Row>
|
||
{
|
||
disableBtn ?
|
||
<>
|
||
{
|
||
auditTableData && auditTableData.length > 0 ?
|
||
<>
|
||
<div className={'rightFormTitle'} >
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={auditFeedback} />
|
||
<span className={'titleName'}>{'稽核反馈'}</span>
|
||
</div>
|
||
</div>
|
||
<ProTable
|
||
style={{ marginTop: '12px' }}
|
||
search={false}
|
||
options={false}
|
||
columns={columns}
|
||
dataSource={auditTableData}
|
||
onRow={(record) => {
|
||
return {
|
||
onClick: (event) => {
|
||
setAuditRowDetail(record)
|
||
setShowAuditDrawer(true)
|
||
},
|
||
}
|
||
}}
|
||
>
|
||
</ProTable>
|
||
</> : ''
|
||
}
|
||
<div className={'rightFormTitle'} >
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={productDataImg} />
|
||
<span className={'titleName'}>{'单品数据'}</span>
|
||
</div>
|
||
{
|
||
disableBtn ?
|
||
<div>
|
||
<Button style={{ marginRight: '8px' }} onClick={() => {
|
||
handleGetQueryRecords(1)
|
||
}}>查询单品报表</Button>
|
||
{
|
||
selectTab === 1 ?
|
||
<Button onClick={() => {
|
||
setShowChangeLoading(true)
|
||
handleGetShopPriceData(1, currentDetail?.Endaccount_Id)
|
||
}}>获取单品数据</Button> : ''
|
||
}
|
||
</div> : ''
|
||
}
|
||
</div>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
|
||
<Row>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label="销售数量"
|
||
name='SellCount_Sale'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label="销售金额"
|
||
name='FactAmount_Sale'
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
{
|
||
currentDetail?.ShowCigarette ?
|
||
<>
|
||
<div className={'rightFormTitle'} style={{ marginTop: '24px' }}>
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={mobilePay} />
|
||
<span className={'titleName'}>{'香烟数据'}</span>
|
||
</div>
|
||
{
|
||
disableBtn ?
|
||
<div>
|
||
<Button style={{ marginRight: '8px' }} onClick={() => {
|
||
handleGetQueryRecords(2)
|
||
}}>查询香烟记录</Button>
|
||
{
|
||
selectTab === 1 ?
|
||
<Button onClick={() => {
|
||
setShowChangeLoading(true)
|
||
handleGetShopPriceData(2, currentDetail?.Endaccount_Id, currentDetail?.CigaretteType)
|
||
}}>获取香烟数据</Button> : ''
|
||
}
|
||
</div> : ''
|
||
}
|
||
</div>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
|
||
<Row>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label="销售数量"
|
||
name='SellCount_Cigarette'
|
||
/>
|
||
</Col>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label="销售金额"
|
||
name='FactAmount_Cigarette'
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</>
|
||
: ''
|
||
}
|
||
<div className={'rightFormTitle'} >
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={mobilePay} />
|
||
<span className={'titleName'}>{'移动支付'}</span>
|
||
</div>
|
||
{
|
||
disableBtn ?
|
||
<div>
|
||
<Button style={{ marginRight: '8px' }} onClick={() => {
|
||
handleGetQueryRecords(3)
|
||
}}>查询支付记录</Button>
|
||
{
|
||
selectTab === 1 ?
|
||
<Button onClick={() => {
|
||
setShowChangeLoading(true)
|
||
handleGetShopPriceData(3, currentDetail?.Endaccount_Id)
|
||
}}>获取移动支付</Button> : ''
|
||
}
|
||
</div> : ''
|
||
}
|
||
</div>
|
||
<Row>
|
||
<div style={{ paddingLeft: '20px', marginTop: '8px', width: '100%' }}>
|
||
<Col span={6}>
|
||
<ProFormText
|
||
readonly
|
||
label="销售金额"
|
||
name='FactAmount_Mobilepayment'
|
||
/>
|
||
</Col>
|
||
</div>
|
||
</Row>
|
||
<div className={'rightFormTitle'} style={{ marginBottom: '12px' }}>
|
||
<div className={'titleLeft'}>
|
||
<img className={'titleIcon'} src={upLoad} />
|
||
<span className={'titleName'}>{'上传单据'}</span>
|
||
</div>
|
||
</div>
|
||
{
|
||
selectTab === 1 ?
|
||
<iframe
|
||
style={{ borderWidth: '0px' }}
|
||
width={'100%'}
|
||
height={370}
|
||
// src={`http://10.104.1.69:8000/cloud/static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
|
||
src={`${REACT_APP_ENV === 'dev' ? 'http://10.104.1.69:8000/' : 'http://saas.eshangtech.com/cloud/'}static/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`}
|
||
/>
|
||
// http://saas.eshangtech.com/cloud/
|
||
:
|
||
<div className={'imgList'}>
|
||
{
|
||
imgList && imgList.length > 0 ?
|
||
imgList.map((item: any) => {
|
||
return <Image
|
||
width={150}
|
||
style={{ marginRight: '8px' }}
|
||
src={item.ImageUrl}
|
||
/>
|
||
}) : ''
|
||
}
|
||
</div>
|
||
}
|
||
</> : ''
|
||
}
|
||
</ProForm>
|
||
</div>
|
||
:
|
||
<div className={'listRight'}>
|
||
<div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center' }}>
|
||
<div style={{ width: '150px', height: '150px' }}>
|
||
<img style={{ width: '150px', height: '150px' }} src={noData} />
|
||
</div>
|
||
<div>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div> :
|
||
<div>
|
||
{showChangeLoading ?
|
||
<div className={'LoadingBox'}>
|
||
<div className={'loading'}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>{'加载中'}</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
<DetailBasicInfo formRef={formRef} leftTimeList={leftTimeList} disableBtn={disableBtn} setPayDetail={setPayDetail} setFlowFlush={setFlowFlush}
|
||
currentDetail={currentDetail} auditTableData={auditTableData} setAuditRowDetail={setAuditRowDetail} setShowAuditDrawer={setShowAuditDrawer}
|
||
handleGetQueryRecords={handleGetQueryRecords} selectTab={selectTab} setShowChangeLoading={setShowChangeLoading} handleGetShopPriceData={handleGetShopPriceData}
|
||
imgList={imgList}
|
||
/>
|
||
</div>
|
||
}
|
||
|
||
|
||
{/* 支付明细 */}
|
||
<Drawer
|
||
width={'60%'}
|
||
visible={payDetail}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
onClose={() => {
|
||
setPayDetail(false);
|
||
}}
|
||
destroyOnClose={true}
|
||
>
|
||
<PayDetail currentDetail={currentDetail} />
|
||
</Drawer>
|
||
{/* 流水冲正 */}
|
||
<Drawer
|
||
width={'60%'}
|
||
visible={flowFlush}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
onClose={() => {
|
||
setFlowFlush(false);
|
||
}}
|
||
destroyOnClose={true}
|
||
footer={
|
||
selectTab === 1 ?
|
||
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<Button type={"primary"} onClick={() => {
|
||
setProductsDrawer(true)
|
||
}}>添加单品数据</Button>
|
||
</div>
|
||
<div>
|
||
<Button onClick={() => { setFlowFlush(false) }}>取消</Button>
|
||
<Button type={'primary'} style={{ marginLeft: '8px' }} onClick={async () => {
|
||
const formData = flowFlushBigRef.current?.flowFlushRef.current.getFieldsValue()
|
||
const req: any = {
|
||
EndaccountId_Encrypt: flowFlushBigRef.current?.rightData.EndaccountId_Encrypt,
|
||
CorrectList: flowFlushBigRef.current?.correctList || [],
|
||
...formData
|
||
}
|
||
const data = await handleSaveEndAccount(req)
|
||
if (data.Result_Code === 100) {
|
||
setFlowFlush(false);
|
||
message.success(data.Result_Desc)
|
||
handleGetItemDetail()
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
}}>保存</Button>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
>
|
||
<FlowFlush onRef={flowFlushBigRef} currentItem={currentDetail} currentRow={currentRow} />
|
||
</Drawer>
|
||
{/* 单品报表 香烟记录 支付记录 */}
|
||
<Drawer
|
||
width={'60%'}
|
||
visible={queryRecords}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
onClose={() => {
|
||
setQueryRecords(false);
|
||
setSelectQueryType(0)
|
||
}}
|
||
destroyOnClose={true}
|
||
>
|
||
<ReportDetail currentUser={currentUser} queryRecords={queryRecords} selectQueryType={selectQueryType} currentItem={currentDetail} currentRow={currentRow} />
|
||
</Drawer>
|
||
|
||
{/* 添加单品数据 */}
|
||
<Drawer
|
||
width={'60%'}
|
||
visible={productsDrawer}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
onClose={() => {
|
||
setProductsDrawer(false);
|
||
}}
|
||
destroyOnClose={true}
|
||
footer={
|
||
selectTab === 1 ?
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button type={'primary'} onClick={async () => {
|
||
const resList: any = productDataRef.current?.selectShopList
|
||
let isError: boolean = true
|
||
if (resList && resList.length > 0) {
|
||
resList.forEach((item => {
|
||
if (item.Total_Count && item.Total_SellAmount && Number(item.Total_Count) !== 0 && Number(item.Total_SellAmount) !== 0) { } else {
|
||
isError = false
|
||
}
|
||
}))
|
||
} else {
|
||
isError = false
|
||
}
|
||
|
||
if (isError) {
|
||
const req = {
|
||
EndaccountId: selectLeftTime,
|
||
CigaretteTypeCode: currentDetail.CigaretteType,
|
||
SaleCommodityList: resList
|
||
}
|
||
const data = await handleSaveAddShopData(req)
|
||
if (data.Result_Code === 100) {
|
||
flowFlushBigRef.current.handleGetDetail()
|
||
setProductsDrawer(false);
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
} else {
|
||
message.error('请检查已选择的商品，销售数量和销售金额是否填写正确')
|
||
}
|
||
}}>保存</Button>
|
||
</div>
|
||
: ''
|
||
}
|
||
>
|
||
<ProductData onRef={productDataRef} currentUser={currentUser} currentDetail={currentDetail} productsDrawer={productsDrawer} />
|
||
</Drawer>
|
||
|
||
{/* 稽核反馈列表点击出现的抽屉 稽核反馈表 */}
|
||
<Drawer
|
||
width={'50%'}
|
||
visible={showAuditDrawer}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
onClose={() => {
|
||
setShowAuditDrawer(false);
|
||
}}
|
||
destroyOnClose={true}
|
||
footer={
|
||
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<Button danger onClick={() => {
|
||
auditDetailRef.current.setShowMoadl(!auditDetailRef.current.showModal)
|
||
}}>上传单据</Button>
|
||
</div>
|
||
<div>
|
||
<Button style={{ marginRight: '8px' }} onClick={() => {
|
||
setExamineModal(true)
|
||
}}>审核</Button>
|
||
<Button type={'primary'} style={{ marginRight: '8px' }} onClick={() => {
|
||
|
||
}}>保存</Button>
|
||
<Button onClick={() => {
|
||
setShowAuditDrawer(false);
|
||
}}>关闭</Button>
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<AuditDetail onRef={auditDetailRef} isShow={showAuditDrawer} rowDetail={auditRowDetail} currentDetail={currentDetail} />
|
||
</Drawer>
|
||
|
||
<Modal
|
||
title="审核意见"
|
||
open={examineModal}
|
||
destroyOnClose
|
||
onOk={() => {
|
||
examineForm.current?.validateFields().then(async (res: any) => {
|
||
if (res) {
|
||
const obj: any = {
|
||
'查看视频': 1000,
|
||
'稽核审核': 2000,
|
||
'下载视频': 3000
|
||
}
|
||
const req = {
|
||
VIDEOLOG_TYPE: 2000,
|
||
CHECKACCOUNT_ID: auditRowDetail.Audit_Id,
|
||
USER_ID: currentUser.ID,
|
||
USER_NAME: currentUser.Name,
|
||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
VIDEOLOG_DESC: res.desc
|
||
}
|
||
const data = await handleExamine(req)
|
||
if (data.Result_Code === 100) {
|
||
message.success(data.Result_Desc)
|
||
auditDetailRef.current?.handleDetail()
|
||
setExamineModal(false)
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
}
|
||
})
|
||
|
||
}} onCancel={() => {
|
||
setExamineModal(false)
|
||
}}>
|
||
<ProForm
|
||
formRef={examineForm}
|
||
submitter={{
|
||
// 清空表单自带的按钮
|
||
render: (props, doms) => {
|
||
return []
|
||
}
|
||
}}
|
||
>
|
||
<ProFormTextArea
|
||
label='审核备注'
|
||
rules={[
|
||
{ required: true, message: '请输入审核备注' }
|
||
]}
|
||
name='desc'
|
||
/>
|
||
</ProForm>
|
||
</Modal>
|
||
|
||
<Modal
|
||
width={1200}
|
||
title="上传文件"
|
||
open={upLoadModal}
|
||
destroyOnClose
|
||
footer={null}
|
||
onOk={() => {
|
||
}}
|
||
onCancel={() => {
|
||
setUpLoadModal(false)
|
||
}}>
|
||
<iframe
|
||
width={1150}
|
||
height={720}
|
||
src={`https://eshangtech.com/uploadPhoto/index.html?id=${currentDetail?.Endaccount_Id}&tablename=ENDACCOUNT&readonly=&PopDialogName=IMAGEPage&Module_ID=3CD350DC5905D75D`} />
|
||
</Modal>
|
||
</div>
|
||
)
|
||
};
|
||
export default ItemDetail
|