freight-web/src/PagesStatistics/shipmentPanel.vue

<template>
  <view class="layout-box">
    <view class="filter">
      <u-input
        v-model="state.startTime"
        disabled
        disabledColor=""
        placeholder="请选择开始时间"
      ></u-input>
      <text>-</text>
      <u-input
        v-model="state.endTime"
        disabled
        disabledColor=""
        placeholder="请选择结束时间"
      ></u-input>
      <u-icon
        name="arrow-down"
        @click="handleDialog('showTime', true)"
      ></u-icon>
      <text class="btn" @click="handleDialog('showFilter', true)">筛选</text>
    </view>
    <view class="box">
      <up-row>
        <up-col span="4">
          <view class="inner-box" style="border: none">
            <view class="num highlight">{{
              formatMoney(state.summary.totalAmount, 2)
            }}</view>
            <view>出货总净重/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalPayShipment, 2)
            }}</view>
            <view>已收/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalUnPayShipment, 2)
            }}</view>
            <view>未收/kg</view>
          </view>
        </up-col>
      </up-row>
    </view>

    <view class="box">
      <up-row>
        <up-col span="4">
          <view class="inner-box" style="border: none">
            <view class="num highlight">{{
              formatMoney(state.summary.totalCollection, 2)
            }}</view>
            <view>出货总收款/元</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalPayCollection, 2)
            }}</view>
            <view>已收/元</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalUnPayCollection, 2)
            }}</view>
            <view>未收/元</view>
          </view>
        </up-col>
      </up-row>
    </view>
    <view class="box">
      <up-row>
        <up-col span="6">
          <view class="inner-box" style="border: none">
            <view class="num">{{
              formatMoney(state.summary.totalReceipt)
            }}</view>
            <view>出货单</view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.averagePrice, 2)
            }}</view>
            <view>均价（元/kg）</view>
          </view>
        </up-col>
      </up-row>
    </view>

    <view class="box">
      <uni-table stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th v-for="(item, index) in tableTitleList" :key="index">{{
            item.name
          }}</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in state.summary.rankings" :key="index">
          <uni-td>{{ item.userName }}</uni-td>
          <uni-td>{{ item.totalAmount }}</uni-td>
          <uni-td>{{ item.totalPayment }}</uni-td>
          <uni-td>{{ item.actualPayment }}</uni-td>
          <uni-td>{{ item.totalOrderNumber }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>

  <!-- 时间弹框 -->
  <TimeDialog
    ref="timeDialog"
    :show="showDialog.showTime"
    @handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
    @changeTime="changeTime"
  />

  <!-- 筛选弹框 -->
  <FilterDialog
    :show="showDialog.showFilter"
    @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
    @changeOther="changeOther"
    :isShipment="true"
  />
</template>
<script setup lang="ts">
import TimeDialog from "@/components/Dialog/TimeDialog.vue";
import FilterDialog from "./components/FilterDialog.vue";
import { ShipmentApi } from "@/services";
import {
  formatDate,
  formatMoney,
  getCurrentMonthStartAndEnd,
  getScaleStatus,
} from "@/utils";
const tableTitleList = reactive([
  {
    name: "客户",
  },
  {
    name: "出货总净重/kg",
  },
  {
    name: "实际收款",
  },
  {
    name: "实收款",
  },
  {
    name: "数量",
  },
]);
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showTime: false,
  showFilter: false,
});

const state = reactive<{
  summary: ShipmentSummaryCount;
  startTime: string;
  endTime: string;
  scaleStatus: number;
  userId: number;
  productId: number;
}>({
  summary: {
    totalAmount: 0, // 收货汇总：审核过收货总量
    totalPayShipment: 0, // 已支付的出货总
    totalUnPayShipment: 0, // 未支付的出货总量
    totalCollection: 0, // 总收款
    totalPayCollection: 0, // 已经收到的收款
    totalUnPayCollection: 0, // 未收到的收款
    totalReceipt: 0, // 收货单数量已审核的
    averagePrice: 0, // 平均单价
    rankings: [],
  },
  startTime: formatDate(
    getCurrentMonthStartAndEnd().start,
    "{y}-{m}-{d} {h}:{i}:{s}"
  ),
  endTime: formatDate(
    getCurrentMonthStartAndEnd().end,
    "{y}-{m}-{d} {h}:{i}:{s}"
  ),
  scaleStatus: -1,
  userId: -1,
  productId: -1,
});

const changeTime = (obj: any) => {
  state.startTime = obj.startTime;
  state.endTime = obj.endTime;
  getList();
};

const changeOther = (obj: any) => {
  state.userId = obj.userId;
  state.productId = obj.productId;
  getList();
};

const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};

const getList = () => {
  let params: any = {
    startTime: state.startTime,
    endTime: state.endTime,
  };
  if (state.scaleStatus > -1) {
    params.scaleStatus = state.scaleStatus;
  }
  if (state.userId > -1) {
    params.userId = state.userId;
  }
  if (state.productId > -1) {
    params.productId = state.productId;
  }
  ShipmentApi.getOrderInReceipt(params).then((res) => {
    if (res.code === 200) {
      state.summary = res.data;
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.layout-box {
  margin: 35.9rpx 25.64rpx;
  .filter {
    display: flex;
    align-items: center;
    justify-items: center;
    font-family: Source Han Sans CN;
    font-size: 28rpx;
    color: #000000;
    ::v-deep .u-input {
      padding: 0rpx 16.03rpx !important;
      input {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx !important;
        color: #000000;
      }
    }
    text {
      margin: 0px 5rpx;
    }
    .status {
      margin-left: 40rpx;
    }
    .btn {
      color: $u-primary;
      margin-left: 40rpx;
      margin-right: 0rpx;
    }
  }
  .box {
    padding: 28rpx 20rpx;
    // display: flex;
    // justify-content: space-between;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    text-align: center;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    margin-top: 30rpx;
  }
  .inner-box {
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    border-left: 1px solid #e9e9e9;
    .num {
      font-weight: bold;
      font-size: 27rpx;
    }
    .highlight {
      color: rgba(236, 15, 62, 1);
    }
  }
  ::v-deep .uni-table {
    min-width: 500px !important;
    .uni-table-th {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 24rpx;
      color: #000000;
      padding: 5px 5px;
    }
    .uni-table-td {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }
}
</style>