freight-web/src/pagesShipment/shipmenting.vue

<template>
  <view class="search">
    <u-search
      placeholder="请输入客户名称"
      v-model="stateNew.keywoard"
      :showAction="false"
      :bgColor="'#fff'"
      :borderColor="'rgba(0, 0, 0, 0.1)'"
      :placeholderColor="'#C1C1C1'"
      @search="handleSearch()"
      @clear="handleSearch()"
    ></u-search>
    <view class="btn" @click="stateNew.isShow = true">
      {{
        stateNew.currentDevice.name === "全部"
          ? "选择设备"
          : stateNew.currentDevice.name
      }}
    </view>
  </view>
  <page-view
    :noMoreData="pageList.noMoreData"
    :list="pageList.list"
    :height="0"
    :isLoading="pageList.isLoading"
    @loadList="
      (v) => {
        getList(v);
      }
    "
  >
    <view class="card-box" v-for="(item, index) in pageList.list" :key="index">
      <view class="top-flex-box">
        <view>
          <view>
            <text class="address">{{ item.deviceName || "-" }}</text>
          </view>
          <view>
            <text class="number">出货单号：{{ item.orderNumber }}</text>
          </view>
          <view>
            <text class="name">{{ item.userName }} / {{item.cardNumber}}</text>
          </view>
        </view>
        <view>
          <u-button
            :customStyle="{ border: '1px solid #00dcee', color: '#00dcee' }"
            @click="handleScenePhoto(item.id)"
            text="现场照片"
            plain
            shape="circle"
            type="success"
            size="small"
          ></u-button>
        </view>
      </view>
      <view>
        <text class="desc">过磅时间：{{ item.tareTime }}</text>
      </view>
      <view class="flex-box">
        <text>皮重：{{ item.tare }}kg</text>
      </view>
      <view class="btn-box">
        <u-button
          text="作废"
          color="#E8E8E8"
          :customStyle="{ color: '#999' }"
          @click="handleModal(true, item.id as any)"
        ></u-button>
        <u-button
          type="primary"
          text="编辑"
          @click="pricingDetail(item.id as any)"
        ></u-button>
      </view>
    </view>
  </page-view>

  <SmallModal
    :title="'确认作废吗？'"
    :content="'确认作废后，该订单不能恢复！'"
    :okText="'确认作废'"
    :isMain="true"
    :show="isShowCancelModal"
    @handleModal="(v:boolean) => {handleModal(v, deleteId)}"
    @handleOk="handleOk()"
  />

  <block>
    <u-action-sheet
      :actions="stateNew.deviceList"
      :title="'选择设备'"
      :show="stateNew.isShow"
      @select="(v: any) => handleSelect(v)"
      @close="stateNew.isShow = false"
      :closeOnClickAction="true"
    ></u-action-sheet>
  </block>
</template>
<script setup lang="ts">
import { DeviceApi, ShipmentApi } from "@/services/index";
import SmallModal from "@/components/Modal/smallModal.vue";
import PageView from "@/components/PageView/index.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { DeviceType, ScaleStatus } from "@/utils/enum";
import _ from "underscore";

const stateNew = reactive<any>({
  keywoard: "",
  deviceList: [],
  isShow: false,
  currentDevice: {
    name: "全部",
  },
});

const handleSearch = () => {
  resetPageList();
  getList();
};

// 设备信息
DeviceApi.getDeviceList({ deviceType: DeviceType.Weighbridge }).then(
  (res: any) => {
    if (res.code === 200) {
      stateNew.deviceList = [{ id: 0, name: "全部" }].concat(
        _.map(res.data, function (item) {
          return { name: item.deviceName, ...item };
        })
      );
    }
  }
);

const handleSelect = (v: any) => {
  stateNew.currentDevice = v;
};

const pageList: PageResult<Shipment> = reactive({
  isLoading: false,
  noMoreData: false,
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 10,
});
const resetPageList = () => {
  pageList.noMoreData = false;
  pageList.total = 0;
  pageList.list = [];
  pageList.pageNum = 1;
  pageList.pageSize = 100;
};

const isShowCancelModal = ref(false);
const deleteId = ref(0);
const handleModal = (v: boolean, id: number) => {
  isShowCancelModal.value = v;
  deleteId.value = id;
};
const handleScenePhoto = (id: any) => {
  uni.navigateTo({
    url: `/pagesScenePhoto/index?orderType=2&id=${id}&imagesType=1`, // 要跳转到的页面路径
  });
};
const pricingDetail = (id: string) => {
  ShipmentApi.getDetailById({ id: id }).then((res: any) => {
    if (res.code === 200) {
      if (res.data.scaleStatus > 1) {
        uni.showToast({ title: "当前订单已处理" });
        resetPageList();
        getList();
      } else {
        uni.navigateTo({
          url:
            "/pagesShipment/form/shipmentForm?id=" +
            id +
            `&scaleStatus=${state.scaleStatus}`, // 要跳转到的页面路径
        });
      }
    }
  });
};
const getList = (v?: boolean) => {
  if (v) {
    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
      pageList.pageNum++;
    } else {
      pageList.noMoreData = true;
      return;
    }
  }
  pageList.isLoading = true;
  ShipmentApi.getOrderPage({
    pageSize: pageList.pageSize,
    pageNumber: pageList.pageNum,
    scaleStatus: state.scaleStatus,
    userName: stateNew.keywoard,
  }).then((res) => {
    if (res.code === 200) {
      pageList.isLoading = false;
      (pageList as any).list = (pageList as any).list.concat(res.data.list);
      pageList.total = (res.data as any).total;
    }
  });
};
const handleOk = () => {
  console.log(deleteId.value);
  ShipmentApi.deleteOrder({ ids: [deleteId.value] }).then((res) => {
    if (res.code === 200) {
      resetPageList();
      getList();
    }
  });
};

onShow(() => {
  resetPageList();
  getList();
});

const state = reactive({
  scaleStatus: 0,
});
onLoad((option) => {
  // 接收传递的标题参数
  state.scaleStatus = parseInt((option as any).scaleStatus);
  // 设置页面标题
  if (state.scaleStatus === ScaleStatus.ToBeShipment) {
    uni.setNavigationBarTitle({
      title: "待出货",
    });
  } else if (state.scaleStatus === ScaleStatus.ToBeGrossWeight) {
    uni.setNavigationBarTitle({
      title: "待过毛重",
    });
  }
});
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26rpx 26rpx 0rpx 26rpx;
  .btn {
    background: #00dcee;
    border-radius: 24rpx;
    border: 1px solid #00dcee;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
    margin-left: 50rpx;
    padding: 6rpx 30rpx;
  }
}
.card-box {
  padding: 38rpx 50rpx;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 0rpx 25rpx;
  margin-top: 35rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 26rpx;
  color: #000000;
  line-height: 41rpx;
  .top-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      border-radius: 24rpx;
      border: 1px solid #00dcee;
      padding: 10rpx 30rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #00dcee;
      line-height: 41rpx;
      cursor: pointer;
    }
  }
  .address {
    margin-right: 30rpx;
  }
  .desc {
    font-size: 24rpx;
    color: #999999;
    margin-top: 30rpx;
    display: inline-block;
  }
  .name {
    font-size: 26rpx;
    color: #000000;
    font-weight: bold;
  }
  .flex-box {
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    line-height: 41rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn-box {
    margin-top: 60rpx;
    display: flex;
    ::v-deep button {
      border-radius: 43rpx;
    }
    ::v-deep button + button {
      margin-left: 50rpx;
    }
  }
}
</style>