预算表、结算表更改

src/views/salesContract/budget/index.vue

@@ -2,102 +2,120 @@
   <van-nav-bar :title="'利润预算表'" left-text="" left-arrow @click-left="onClickLeft">
   </van-nav-bar>
   <van-search v-model="req.keyword" :placeholder="$t('common.pleaseEnterKeywords')" @search="getList" />
-  <div style="width:100vw;overflow-x: auto;background:#fff">
-    <table border class="table">
-      <thead>
-        <tr>
-          <th style="min-width:130px">合同编号</th>
-          <th style="min-width:180px;text-align:left">客户名称</th>
-          <th style="min-width:80px">业务员</th>
-          <th style="min-width:100px">合同金额</th>
-          <th style="min-width:100px"> 是否已结清</th>
-          <th style="min-width:90px">收入合计</th>
-          <th style="min-width:90px">支出合计</th>
-          <th style="min-width:90px">毛利</th>
-          <th style="min-width:90px">毛利率</th>
-          <th style="min-width:90px">应付货款</th>
-          <th style="min-width:90px">税率</th>
-          <th style="min-width:90px">应退税金额</th>
-          <th style="min-width:90px">包材金额</th>
-          <th style="min-width:90px">配件金额</th>
-          <th style="min-width:90px">拖车费</th>
-          <th style="min-width:90px">报关费</th>
-          <th style="min-width:90px">代理费</th>
-          <th style="min-width:90px">港杂费</th>
-          <th style="min-width:90px">验货红包</th>
-          <th style="min-width:90px">佣金</th>
-          <th style="min-width:90px">其他</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row in listData" :key="row.id">
-          <td>
-            {{row.code}}
-          </td>
-          <td style="text-align:left">
-            {{row.customerName}}
-          </td>
-          <td>
-            {{row.userName}}
-          </td>
-          <td>
-            {{ row.currency }} {{ moneyFormat( row.amount,2)}}
-          </td>
-          <td>
-            {{ dictValueLabel( row.isSettled,isSettled)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.incomeAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.expenditureAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.gross,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.grossRate,2)}} %
-          </td>
-          <td>
-            <span v-if="row.otherSumAmount">{{moneyFormat( row.otherSumAmount,2) }}</span>
-            <span v-else>{{ moneyFormat(row.ehsdSumAmount,2) }}</span>
-          </td>
-          <td>
-            13%
-          </td>
-          <td>
-            {{ moneyFormat( row.refundableAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.peritectoidAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.accessoriesAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.trailerFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.customsFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.agencyFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.portMixedFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.inspectionRedPack,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.commission,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.other,2)}}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div style="display:flex">
+    <div style="width:132px;background:#fff;z-index:1">
+      <table border class="table">
+        <thead>
+          <tr>
+            <th style="min-width:130px;text-align:left;padding: 6px 0px">合同编号</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in listData" :key="row.id">
+            <td>
+              {{row.code}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div style="width:calc(100vw - 132px);overflow-x: auto;background:#fff">
+      <table border class="table">
+        <thead>
+          <tr>
+            <!-- <th style="min-width:130px">合同编号</th> -->
+            <th style="min-width:180px;text-align:left">客户名称</th>
+            <th style="min-width:80px">业务员</th>
+            <th style="min-width:100px">合同金额</th>
+            <th style="min-width:100px"> 是否已结清</th>
+            <th style="min-width:90px">收入合计</th>
+            <th style="min-width:90px">支出合计</th>
+            <th style="min-width:90px">毛利</th>
+            <th style="min-width:90px">毛利率</th>
+            <th style="min-width:90px">应付货款</th>
+            <th style="min-width:90px">税率</th>
+            <th style="min-width:90px">应退税金额</th>
+            <th style="min-width:90px">包材金额</th>
+            <th style="min-width:90px">配件金额</th>
+            <th style="min-width:90px">拖车费</th>
+            <th style="min-width:90px">报关费</th>
+            <th style="min-width:90px">代理费</th>
+            <th style="min-width:90px">港杂费</th>
+            <th style="min-width:90px">验货红包</th>
+            <th style="min-width:90px">佣金</th>
+            <th style="min-width:90px">其他</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in listData" :key="row.id">
+            <!-- <td>
+              {{row.code}}
+            </td> -->
+            <td style="text-align:left">
+              {{row.customerName}}
+            </td>
+            <td>
+              {{row.userName}}
+            </td>
+            <td>
+              {{ row.currency }} {{ moneyFormat( row.amount,2)}}
+            </td>
+            <td>
+              {{ dictValueLabel( row.isSettled,isSettled)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.incomeAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.expenditureAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.gross,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.grossRate,2)}} %
+            </td>
+            <td>
+              <span v-if="row.otherSumAmount">{{moneyFormat( row.otherSumAmount,2) }}</span>
+              <span v-else>{{ moneyFormat(row.ehsdSumAmount,2) }}</span>
+            </td>
+            <td>
+              13%
+            </td>
+            <td>
+              {{ moneyFormat( row.refundableAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.peritectoidAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.accessoriesAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.trailerFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.customsFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.agencyFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.portMixedFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.inspectionRedPack,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.commission,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.other,2)}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 
   <div style="display:flex;align-items:center;background:#fff;padding:20px 20px 20px 0;justify-content:end">
@@ -153,11 +171,13 @@ const handleChangePage = (flag) => {
   border-color: #ebeef5;
   color: #606266;
   thead tr th {
-    padding: 6px 0px;
+    padding: 6px 0px 6px 4px;
+    text-align: left;
   }
   td {
-    text-align: center;
-    padding: 6px 0px;
+    text-align: left;
+    padding: 6px 0px 6px 4px;
+    height: 40px;
   }
 }
 </style>

src/views/salesContract/settlement/index.vue

@@ -2,123 +2,135 @@
   <van-nav-bar :title="'利润结算表'" left-text="" left-arrow @click-left="onClickLeft">
   </van-nav-bar>
   <van-search v-model="req.keyword" :placeholder="$t('common.pleaseEnterKeywords')" @search="getList" />
-  <div style="width:100vw;overflow-x: auto;background:#fff">
-    <table border class="table">
-      <thead>
-        <tr>
-          <th style="min-width:130px" rowspan="2">合同编号</th>
-          <th style="min-width:180px;text-align:left" rowspan="2">客户名称</th>
-          <th style="min-width:80px" rowspan="2">业务员</th>
-          <th style="min-width:100px" rowspan="2">合同金额</th>
-          <th style="min-width:100px" rowspan="2"> 是否已结清</th>
-          <th colspan="4">统计</th>
-          <th colspan="3">收入</th>
-          <th rowspan="2" style="min-width:100px">采购合同金额</th>
-          <th colspan="12">支出</th>
-        </tr>
-        <tr>
-          <th style="min-width:90px">收入合计</th>
-          <th style="min-width:90px">支出合计</th>
-          <th style="min-width:90px">毛利</th>
-          <th style="min-width:90px">毛利率</th>
-          <th style="min-width:90px">到账金额</th>
-          <th style="min-width:90px">退税金额</th>
-          <th style="min-width:90px">其他收入</th>
-          <th style="min-width:90px">已付货款</th>
-          <th style="min-width:90px">代理费</th>
-          <th style="min-width:90px">拖车费</th>
-          <th style="min-width:90px">报关费</th>
-          <th style="min-width:90px">港杂费</th>
-          <th style="min-width:90px">验货红包</th>
-          <th style="min-width:90px">佣金</th>
-          <th style="min-width:90px">检测费</th>
-          <th style="min-width:90px">验货费</th>
-          <th style="min-width:90px">运费</th>
-          <th style="min-width:90px">产地证费</th>
-          <th style="min-width:90px">其他</th>
-        </tr>
+  <div style="display:flex">
+    <div style="width:132px;background:#fff;z-index:1">
+      <table border class="table">
+        <thead>
+          <th style="min-width:130px;text-align:left; padding: 6px 0px ">合同编号</th>
+        </thead>
+        <tbody>
+          <tr v-for="row in listData" :key="row.id">
+            <td>
+              {{row.code}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div style="width:calc(100vw - 132px);overflow-x: auto;background:#fff">
+      <table border class="table">
+        <thead>
+          <tr>
+            <!-- <th style="min-width:130px"  >合同编号</th> -->
+            <th style="min-width:180px;text-align:left">客户名称</th>
+            <th style="min-width:80px">业务员</th>
+            <th style="min-width:100px">合同金额</th>
+            <th style="min-width:100px"> 是否已结清</th>
+            <th style="min-width:100px">采购合同金额</th>
+            <th style="min-width:90px">收入合计</th>
+            <th style="min-width:90px">支出合计</th>
+            <th style="min-width:90px">毛利</th>
+            <th style="min-width:90px">毛利率</th>
+            <th style="min-width:90px">到账金额</th>
+            <th style="min-width:90px">退税金额</th>
+            <th style="min-width:90px">其他收入</th>
+            <th style="min-width:90px">已付货款</th>
+            <th style="min-width:90px">代理费</th>
+            <th style="min-width:90px">拖车费</th>
+            <th style="min-width:90px">报关费</th>
+            <th style="min-width:90px">港杂费</th>
+            <th style="min-width:90px">验货红包</th>
+            <th style="min-width:90px">佣金</th>
+            <th style="min-width:90px">检测费</th>
+            <th style="min-width:90px">验货费</th>
+            <th style="min-width:90px">运费</th>
+            <th style="min-width:90px">产地证费</th>
+            <th style="min-width:90px">其他</th>
+          </tr>
+
+        </thead>
+        <tbody>
+          <tr v-for="row in listData" :key="row.id">
+            <!-- <td>
+              {{row.code}}
+            </td> -->
+            <td style="text-align:left">
+              {{row.customerName}}
+            </td>
+            <td>
+              {{row.userName}}
+            </td>
+            <td>
+              {{ row.currency }} {{ moneyFormat( row.amount,2)}}
+            </td>
+            <td>
+              {{ dictValueLabel( row.isSettled,isSettled)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.incomeAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.expenditureAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.gross,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.grossRate,2)}} %
+            </td>
+            <td>
+              {{ moneyFormat( row.sumClaimMoney,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.refundableAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.otherIncomeAmount,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.sumPurchaseContractMoney,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.accountPaid,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.agencyFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.trailerFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.customsFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.portMixedFee,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.inspectionRedPack,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.commission,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.checkout,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.inspectionCharge,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.freight,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.certificateOfOrigin,2)}}
+            </td>
+            <td>
+              {{ moneyFormat( row.other,2)}}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-      </thead>
-      <tbody>
-        <tr v-for="row in listData" :key="row.id">
-          <td>
-            {{row.code}}
-          </td>
-          <td style="text-align:left">
-            {{row.customerName}}
-          </td>
-          <td>
-            {{row.userName}}
-          </td>
-          <td>
-            {{ row.currency }} {{ moneyFormat( row.amount,2)}}
-          </td>
-          <td>
-            {{ dictValueLabel( row.isSettled,isSettled)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.incomeAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.expenditureAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.gross,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.grossRate,2)}} %
-          </td>
-          <td>
-            {{ moneyFormat( row.sumClaimMoney,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.refundableAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.otherIncomeAmount,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.sumPurchaseContractMoney,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.accountPaid,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.agencyFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.trailerFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.customsFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.portMixedFee,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.inspectionRedPack,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.commission,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.checkout,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.inspectionCharge,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.freight,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.certificateOfOrigin,2)}}
-          </td>
-          <td>
-            {{ moneyFormat( row.other,2)}}
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 
   <div style="display:flex;align-items:center;background:#fff;padding:20px 20px 20px 0;justify-content:end">
@@ -174,11 +186,13 @@ const handleChangePage = (flag) => {
   border-color: #ebeef5;
   color: #606266;
   thead tr th {
-    padding: 6px 0px;
+    padding: 6px 0px 6px 4px;
+    text-align: left;
   }
   td {
-    text-align: center;
-    padding: 6px 0px;
+    text-align: left;
+    padding: 6px 0px 6px 4px;
+    height: 40px;
   }
 }
 </style>