ehsd-mobile/src/views/salesContract/budget/index.vue

<template>
  <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="display:flex">
    <div style="width:132px;background:#fff;z-index:1">
      <table border class="table">
        <thead>
          <tr>
            <th style="min-width:131px;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">
    <van-button plain type="primary" size="small" @click="handleChangePage(false)" :disabled="req.pageNum==1">上一页</van-button>
    <span style="margin:0 15px">共{{total}}条</span>
    <van-button plain type="primary" size="small" @click="handleChangePage(true)" :disabled="(total/10)<= req.pageNum ">下一页</van-button>
  </div>

</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
const proxy = getCurrentInstance().proxy;
const onClickLeft = () => proxy.$router.push("/main/working");
const req = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: "",
});
const total = ref(0);
const isSettled = ref([
  {
    label: "已结清",
    value: "1",
  },
  {
    label: "未结清",
    value: "0",
  },
]);
const loading = ref(false);
const listData = ref([]);
const getList = () => {
  proxy.post("/contract/getProfitBudgetPage", req.value).then((res) => {
    listData.value = res.data.rows;
    total.value = res.data.total;
  });
};
getList();
const handleChangePage = (flag) => {
  req.value.pageNum = flag ? req.value.pageNum + 1 : req.value.pageNum - 1;
  getList();
};
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border-color: #ebeef5;
  color: #606266;
  thead tr th {
    padding: 6px 0px 6px 4px;
    text-align: left;
  }
  td {
    text-align: left;
    padding: 6px 0px 6px 4px;
    height: 40px;
  }
}
</style>