freight-web/src/PagesStatistics/receivePanel.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="status">{{
        state.scaleStatus === -1
          ? "单据状态"
          : getScaleStatus(1, state.scaleStatus)
      }}</text>
      <u-icon
        name="arrow-down"
        @click="handleDialog('showStatus', 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)
            }}</view>
            <view>收货总量/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{ formatMoney(state.summary.totalPaid) }}</view>
            <view>已付/kg</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalUnpaid)
            }}</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.totalPayment)
            }}</view>
            <view>结算金额/元</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalPaidPrice)
            }}</view>
            <view>实收金额</view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="inner-box">
            <view class="num">{{
              formatMoney(state.summary.totalUnpaidPrice)
            }}</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)
            }}</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.productName }}</uni-td>
          <uni-td>{{ item.totalAmount }}</uni-td>
          <uni-td>{{ item.totalPayment }}</uni-td>
          <uni-td>{{ item.totalOrderNumber }}</uni-td>
          <uni-td>{{ item.averagePrice }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>

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

  <!-- 单据弹框 -->
  <StatusDialog
    :show="showDialog.showStatus"
    :isShipment="false"
    @handleDialog="(v:boolean) => {handleDialog('showStatus', v)}"
    @changeStatus="changeStatus"
  />

  <!-- 筛选弹框 -->
  <FilterDialog
    :show="showDialog.showFilter"
    @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
    @changeOther="changeOther"
    :isShipment="false"
  />
</template>
<script setup lang="ts">
import TimeDialog from "./components/TimeDialog.vue";
import StatusDialog from "./components/StatusDialog.vue";
import FilterDialog from "./components/FilterDialog.vue";
import { ReceiveApi } from "@/services";
import {
  formatDate,
  formatMoney,
  getCurrentMonthStartAndEnd,
  getScaleStatus,
} from "@/utils";
const tableTitleList = reactive([
  {
    name: "收货产品",
  },
  {
    name: "收货总量/kg",
  },
  {
    name: "总金额",
  },
  {
    name: "收货单数",
  },
  {
    name: "均价（元/kg）",
  },
]);
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showTime: false,
  showStatus: false,
  showFilter: false,
});

const state = reactive<{
  summary: ReceiveSummaryCount;
  startTime: string;
  endTime: string;
  scaleStatus: number;
  userId: number;
  productId: number;
}>({
  summary: {
    totalAmount: 0, // 审核过的收货订单
    totalPaid: 0, // 已支付的收货总量
    totalUnpaid: 0, // 未支付的收货总量
    totalPayment: 0, // 总支付金额
    totalPaidPrice: 0, // 已经支付的金额
    totalUnpaidPrice: 0, // 未支付的金额
    totalReceipt: 0, // 收货单数量已审核的
    averagePrice: 0, // 平均单价
    rankings: [],
  },
  startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
  endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
  scaleStatus: -1,
  userId: -1,
  productId: -1,
});

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

// 单据状态
const changeStatus = (obj: any) => {
  state.scaleStatus = obj.id;
  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 + " 00:00:00",
    endTime: state.endTime + " 23:59:59",
  };
  if (state.scaleStatus > -1) {
    params.scaleStatus = state.scaleStatus;
  }
  if (state.userId > -1) {
    params.userId = state.userId;
  }
  if (state.productId > -1) {
    params.productId = state.productId;
  }
  ReceiveApi.OrderInReceipt(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: 28rpx;
    }
    .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>