样式交互优化

jiangwei
1 parent e83cdeb0
Showing 6 changed files with 48 additions and 38 deletions
src/pages/pms/partPlan/PlanManage/subpages/Detail/index.tsx
src/pages/pms/partPlan/PlanPool/components/AreaTable.tsx
src/pages/pms/partPlan/PlanPool/components/PartTable.tsx
src/pages/pms/partPlan/PlanPool/components/SeriesTable.tsx
src/pages/pms/partPlan/PlanPool/components/StoragePartTable.tsx
src/pages/pms/partPlan/PlanPool/components/StorageTable.tsx
-import {Card, ConfigProvider} from 'antd';
+import {Card, ConfigProvider, Spin} from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import React, {useState} from "react";
 import useInitial from "@/hooks/useInitail";
@@ -14,18 +14,19 @@ import PartDetailModal from &#39;./components/PartDetailModal&#39;;
  
 export default function Index({ match }: common.ConnectProps) {
   const { planId } = match.params;
-  const { data } = useInitial<DetailVO[], Params>(getDetail, [], {planId});
+  const { data, loading } = useInitial<DetailVO[], Params>(getDetail, [], {planId});
   const [visiblePart, setVisiblePart] = useState(false);
   const [parts, setParts] = useState<PartVO[]>([]);
  
   return (
     <PageHeaderWrapper title="配件计划详情">
-      <ConfigProvider locale={zhCN}>
-        <Card className={st.page}>
-          {data.map((dealer: DetailVO = {}) => (
-            <div key={`dealer${dealer.settleDealerName}`} style={{ marginTop: 10 }}>
-              <div style={{ fontWeight: "bold" }}>{`商家: ${dealer.settleDealerName || ''}`}</div>
-              {(dealer.suppliers || []).map((supplier: SupplierVO = {}) => {
+      <Spin spinning={loading}>
+        <ConfigProvider locale={zhCN}>
+          <Card className={st.page}>
+            {data.map((dealer: DetailVO = {}) => (
+              <div key={`dealer${dealer.settleDealerName}`} style={{ marginTop: 10 }}>
+                <div style={{ fontWeight: "bold" }}>{`商家: ${dealer.settleDealerName || ''}`}</div>
+                {(dealer.suppliers || []).map((supplier: SupplierVO = {}) => {
                 const paList: any[] = flattenDeep((supplier.storages || []).map((st: any) => (st.parts || [])));
                 return (
                   <div key={`supplier${supplier.supplierName}`} style={{ marginTop: 10, marginLeft: 40 }}>
@@ -54,16 +55,17 @@ export default function Index({ match }: common.ConnectProps) {
                   </div>
                 );
               })}
-            </div>
+              </div>
           ))}
-          <PartDetailModal visible={visiblePart} onCancel={() => setVisiblePart(false)} parts={parts} />
-          <StepBnt
-            disable={false}
-            bntLoading={false}
-            close={() => history.back()}
-          />
-        </Card>
-      </ConfigProvider>
+            <PartDetailModal visible={visiblePart} onCancel={() => setVisiblePart(false)} parts={parts} />
+            <StepBnt
+              disable={false}
+              bntLoading={false}
+              close={() => history.back()}
+            />
+          </Card>
+        </ConfigProvider>
+      </Spin>
     </PageHeaderWrapper>
   );
 }
@@ -33,9 +33,9 @@ export default function Index(props: Props = {}) {
     <div>
       <Table rowKey={(v: ListVO) => `${v.id}`} scroll={{y: 500, x: 2500}} dataSource={parts || []} pagination={false} loading={loading}>
         <Column title="区域库" dataIndex="name" fixed="left" />
+        <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
         <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
         <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
-        <Column title="本次计划数量(个)" dataIndex="cnt" />
         <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
         <Column title="客户订件数量(个)" dataIndex="buyCnt" />
         <Column title="客户订件金额(元)" dataIndex="buyAmount" />
@@ -34,12 +34,14 @@ export default function Index(props: Props = {}) {
     <div>
       <Table rowKey={(v: ListVO) => `${v.id}`} scroll={{y: 500, x: 3000}} dataSource={parts || []} pagination={false} loading={loading}>
         <Column title="配件编码" dataIndex="code" fixed="left" />
-        <Column title="配件名称" dataIndex="name" />
+        <Column title="配件名称" dataIndex="name" fixed="left" />
+        <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
         <Column title="来源类型" dataIndex="typeName" />
         <Column title="配件类型" dataIndex="partType" render={t => partTypeData.find(i => i.value == t)?.label} />
+        
         <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
         <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
-        <Column title="本次计划数量(个)" dataIndex="cnt" />
+        
         <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
         <Column title="客户订件数量(个)" dataIndex="buyCnt" />
         <Column title="客户订件金额(元)" dataIndex="buyAmount" />
@@ -33,9 +33,10 @@ export default function Index(props: Props = {}) {
     <div>
       <Table rowKey={(v: ListVO) => `${v.id}`} scroll={{y: 500, x: 2500}} dataSource={parts || []} pagination={false} loading={loading}>
         <Column title="车系" dataIndex="name" fixed="left" />
+        <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
         <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
         <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
-        <Column title="本次计划数量(个)" dataIndex="cnt" />
+        
         <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
         <Column title="客户订件数量(个)" dataIndex="buyCnt" />
         <Column title="客户订件金额(元)" dataIndex="buyAmount" />
@@ -36,23 +36,11 @@ export default function Index(props: Props = {}) {
     <div>
       <Table rowKey={(v: ListVO) => `${v.poolId}`} scroll={{y: 500, x: 3000}} dataSource={parts || []} pagination={false} loading={loading}>
         <Column title="配件编码" dataIndex="code" fixed="left" />
-        <Column title="配件名称" dataIndex="name" />
-        <Column title="库房名称" dataIndex="storageName" />
-        <Column title="门店名称" dataIndex="shopName" />
-        <Column title="来源类型" dataIndex="typeName" />
-        <Column title="配件类型" dataIndex="partType" render={t => partTypeData.find(i => i.value == t)?.label} />
-        <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
-        <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
-        <Column title="本次计划数量(个)" dataIndex="cnt" />
-        <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
-        <Column title="客户订件数量(个)" dataIndex="buyCnt" />
-        <Column title="客户订件金额(元)" dataIndex="buyAmount" />
-        <Column title="在途未锁(个)" dataIndex="onTheWayUnlockCnt" />
-        <Column title="在库未锁(个)" dataIndex="storageUnlockCnt" />
-        <Column title="在库已锁(个)" dataIndex="storageLockedCnt" />
-        <Column title="滚动90天出库(个)" dataIndex="outStockCnt" />
+        <Column title="配件名称" dataIndex="name" fixed="left" />
+        <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
         <Column
           title="操作"
+          fixed="left"
           render={r => (
             <>
               <a onClick={() => { setVisible(true); setItem(r); }}>编辑</a>
@@ -60,7 +48,7 @@ export default function Index(props: Props = {}) {
               <Popconfirm
                 title="确认删除?"
                 onConfirm={() => {
-                  deleteApi({poolId: r.poolId}).then(res => {
+                  deleteApi({ poolId: r.poolId }).then(res => {
                     message.success("操作成功");
                     setParams({}, true);
                   }).catch(e => message.error(e.message));
@@ -71,6 +59,22 @@ export default function Index(props: Props = {}) {
             </>
           )}
         />
+        <Column title="库房名称" dataIndex="storageName" />
+        <Column title="门店名称" dataIndex="shopName" />
+        <Column title="来源类型" dataIndex="typeName" />
+        <Column title="配件类型" dataIndex="partType" render={t => partTypeData.find(i => i.value == t)?.label} />
+        
+        <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
+        <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
+        
+        <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
+        <Column title="客户订件数量(个)" dataIndex="buyCnt" />
+        <Column title="客户订件金额(元)" dataIndex="buyAmount" />
+        <Column title="在途未锁(个)" dataIndex="onTheWayUnlockCnt" />
+        <Column title="在库未锁(个)" dataIndex="storageUnlockCnt" />
+        <Column title="在库已锁(个)" dataIndex="storageLockedCnt" />
+        <Column title="滚动90天出库(个)" dataIndex="outStockCnt" />
+        
       </Table>
       <Modal
         title="编辑采购数量"
@@ -32,9 +32,10 @@ export default function Index(props: Props = {}) {
     <div>
       <Table rowKey={(v: ListVO) => `${v.id}`} scroll={{y: 500, x: 2500}} dataSource={parts || []} pagination={false} loading={loading}>
         <Column title="库房" dataIndex="name" fixed="left" />
+        <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />
         <Column title="计划前库销比" dataIndex="ratio" render={t => (t || 0).toFixed(2)} />
         <Column title="计划后库销比" dataIndex="planeRatio" render={t => (t || 0).toFixed(2)} />
-        <Column title="本次计划数量(个)" dataIndex="cnt" />
+       
         <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />
         <Column title="客户订件数量(个)" dataIndex="buyCnt" />
         <Column title="客户订件金额(元)" dataIndex="buyAmount" />