567 lines
13 KiB
Vue
567 lines
13 KiB
Vue
<template>
|
||
<view class="c-card">
|
||
<view class="search">
|
||
<u-search
|
||
placeholder="请输入出货单号"
|
||
v-model="keyword"
|
||
:showAction="false"
|
||
:bgColor="'#fff'"
|
||
:borderColor="'rgba(0, 0, 0, 0.1)'"
|
||
:placeholderColor="'#C1C1C1'"
|
||
@search="handleSearch()"
|
||
@clear="handleSearch()"
|
||
></u-search>
|
||
<view class="btn" @click="handleAdd()"> 创建 </view>
|
||
</view>
|
||
<view class="filter">
|
||
<!-- -->
|
||
<view @click="handleDialog('showTime', true)"
|
||
><text>{{ state.name }}</text
|
||
><u-icon name="arrow-down"></u-icon
|
||
></view>
|
||
<view @click="state.isShowStatus = true"
|
||
><text>{{
|
||
state.currentScaleStatus === -1
|
||
? "单据状态"
|
||
: getScaleStatus(state.currentScaleStatus)
|
||
}}</text
|
||
><u-icon name="arrow-down"></u-icon
|
||
></view>
|
||
<view @click="state.isShowSort = true"
|
||
><text>{{
|
||
state.currentSortName === undefined
|
||
? "排序"
|
||
: `按${
|
||
state.currentSortName === "create_time"
|
||
? "创建时间"
|
||
: "更新时间"
|
||
}降序`
|
||
}}</text
|
||
><u-icon name="arrow-down"></u-icon
|
||
></view>
|
||
<view class="btn" @click="handleDialog('showFilter', true)">筛选</view>
|
||
</view>
|
||
|
||
<view class="time">
|
||
<view v-if="state.name === '昨日' || state.name === '今日'">{{
|
||
state.startTime
|
||
}}</view>
|
||
<view v-else>{{ state.startTime }} - {{ state.endTime }}</view>
|
||
</view>
|
||
|
||
<page-view
|
||
@loadList="
|
||
(v) => {
|
||
getList(v);
|
||
}
|
||
"
|
||
:noMoreData="pageList.noMoreData"
|
||
:list="pageList.list"
|
||
:height="200"
|
||
:isLoading="pageList.isLoading"
|
||
>
|
||
<view class="box" v-for="(item, index) in pageList.list" :key="index">
|
||
<view class="base">
|
||
<view>
|
||
<view class="no"> 出货单号：{{ item.orderNumber }} </view>
|
||
<view class="supplier"> {{ item.deviceName || "-" }} </view>
|
||
</view>
|
||
<view>
|
||
<text class="btn" @click="handleScenePhoto((item as any).id)"
|
||
>现场照片</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="name"
|
||
>{{ item.userName }}
|
||
<text>{{ getScaleStatus((item as any).scaleStatus) }}</text>
|
||
<text v-if="item.repairTime">补单</text>
|
||
</view>
|
||
<view class="type">{{ item.productName }}</view>
|
||
<view class="flex-box">
|
||
<text>定价人：{{ item.userName }}</text>
|
||
<text>创建时间：{{ item.createTime }}</text>
|
||
</view>
|
||
|
||
<view class="more">
|
||
<view
|
||
v-for="(cItem, index) in gridList1"
|
||
:key="index"
|
||
:style="cItem.isCustomStyle ? 'font-size: 22rpx;color:#999' : ''"
|
||
>
|
||
<block v-if="cItem.name === '扣杂'">
|
||
<text v-if="cItem.name">
|
||
{{ item.buttonType === 0 ? "扣杂" : "扣点" }}： </text
|
||
><text>
|
||
{{
|
||
item.buttonType === 0
|
||
? item[cItem.enName as string]
|
||
: item["points"]
|
||
}}
|
||
{{ item.buttonType === 0 ? cItem.unit : "%" }}
|
||
</text>
|
||
</block>
|
||
<block v-else-if="cItem.name === '送货方式'">
|
||
<text v-if="cItem.name">{{ cItem.name }}：</text
|
||
><text
|
||
>{{ cItem.isBefore ? cItem.unit : "" }}
|
||
<text
|
||
v-if="item[cItem.enName as string] === DeliveryMethod.Deliver"
|
||
>送货</text
|
||
>
|
||
<text
|
||
v-if="item[cItem.enName as string] === DeliveryMethod.SelfPickup"
|
||
>自提</text
|
||
>
|
||
{{ cItem.isBefore ? "" : cItem.unit }}
|
||
</text>
|
||
</block>
|
||
<block v-else>
|
||
<text v-if="cItem.name">{{ cItem.name }}：</text
|
||
><text
|
||
>{{ cItem.isBefore ? cItem.unit : "" }}
|
||
{{ item[cItem.enName as string] }}
|
||
{{ cItem.isBefore ? "" : cItem.unit }}
|
||
</text>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</page-view>
|
||
</view>
|
||
|
||
<u-action-sheet
|
||
:closeOnClickOverlay="true"
|
||
:closeOnClickAction="true"
|
||
:actions="state.statusList"
|
||
:title="'单据状态'"
|
||
:show="state.isShowStatus"
|
||
@select="handleSelectStatus"
|
||
@close="state.isShowStatus = false"
|
||
></u-action-sheet>
|
||
<u-action-sheet
|
||
:closeOnClickOverlay="true"
|
||
:closeOnClickAction="true"
|
||
:actions="state.sortList"
|
||
:title="'排序'"
|
||
:show="state.isShowSort"
|
||
@select="handleSelectSort"
|
||
@close="state.isShowSort = false"
|
||
></u-action-sheet>
|
||
|
||
<!-- 时间弹框 -->
|
||
<TimeDialog
|
||
ref="timeDialog"
|
||
:show="showDialog.showTime"
|
||
@handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
|
||
@changeTime="changeTime"
|
||
/>
|
||
<!-- 筛选 -->
|
||
<FilterDialog
|
||
:show="showDialog.showFilter"
|
||
:isShipment="true"
|
||
@handleOk="handleOk"
|
||
@handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
|
||
/>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ReceiveApi, ShipmentApi } from "@/services";
|
||
import { DeliveryMethod, ScaleStatus } from "@/utils/enum";
|
||
import PageView from "@/components/PageView/index.vue";
|
||
import {
|
||
formatDate,
|
||
getCurrentMonthStartAndEnd,
|
||
filterNullUndefined,
|
||
formatStartAndEndTime
|
||
} from "@/utils";
|
||
import TimeDialog from "@/components/Dialog/TimeDialog.vue";
|
||
import FilterDialog from "./components/FilterDialog.vue";
|
||
const showDialog = <
|
||
{
|
||
[key: string]: boolean;
|
||
}
|
||
>reactive({
|
||
showTime: false,
|
||
showFilter: false,
|
||
});
|
||
|
||
const handleDialog = (key: string, v: boolean) => {
|
||
showDialog[key] = v;
|
||
};
|
||
const changeTime = (obj: any) => {
|
||
state.startTime = obj.startTime;
|
||
state.endTime = obj.endTime;
|
||
state.name = obj.name;
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
const state = reactive({
|
||
startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
|
||
endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
|
||
name: "本月",
|
||
currentScaleStatus: -1,
|
||
currentSortName: undefined,
|
||
isShowStatus: false,
|
||
statusList: [
|
||
{
|
||
name: "全部",
|
||
key: -1,
|
||
},
|
||
{
|
||
name: "待出货",
|
||
key: 0,
|
||
},
|
||
{
|
||
name: "待过毛",
|
||
key: 1,
|
||
},
|
||
{
|
||
name: "待审核",
|
||
key: 2,
|
||
},
|
||
{
|
||
name: "待结算",
|
||
key: 3,
|
||
},
|
||
{
|
||
name: "已结算",
|
||
key: 4,
|
||
},
|
||
],
|
||
isShowSort: false,
|
||
sortList: [
|
||
{
|
||
name: "全部",
|
||
key: undefined,
|
||
},
|
||
{
|
||
name: "按创建时间降序",
|
||
key: "create_time",
|
||
},
|
||
{
|
||
name: "按更新时间降序",
|
||
key: "update_time",
|
||
},
|
||
],
|
||
params: {},
|
||
});
|
||
const handleSelectStatus = (v: any) => {
|
||
state.isShowStatus = false;
|
||
state.currentScaleStatus = v.key;
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
const handleSelectSort = (v: any) => {
|
||
state.isShowSort = false;
|
||
state.currentSortName = v.key;
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
|
||
const keyword = ref("");
|
||
const gridList1 = reactive([
|
||
{
|
||
name: "卡号",
|
||
enName: "cardNumber",
|
||
},
|
||
{},
|
||
{
|
||
name: "创建时间",
|
||
enName: "createTime",
|
||
},
|
||
{},
|
||
{
|
||
name: "车牌号",
|
||
enName: "carNumber",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "送货方式",
|
||
enName: "deliveryMethod",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "毛重",
|
||
enName: "grossWeight",
|
||
num: 0,
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "皮重",
|
||
enName: "tare",
|
||
num: 0,
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "净重",
|
||
enName: "netWeight",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "数量",
|
||
enName: "number",
|
||
unit: "件",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "过毛",
|
||
enName: "grossTime",
|
||
unit: "",
|
||
isBefore: false,
|
||
isCustomStyle: true,
|
||
},
|
||
{
|
||
name: "过皮",
|
||
enName: "tareTime",
|
||
unit: "",
|
||
isBefore: false,
|
||
isCustomStyle: true,
|
||
},
|
||
{
|
||
name: "结算重量",
|
||
enName: "settlementWeight",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算单价",
|
||
enName: "unitPrice",
|
||
unit: "元/千克",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算总价",
|
||
enName: "estimatePrice",
|
||
unit: "元",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "实际金额",
|
||
enName: "totalPrice",
|
||
unit: "元",
|
||
isBefore: false,
|
||
},
|
||
]);
|
||
const handleScenePhoto = (id: string) => {
|
||
uni.navigateTo({
|
||
url: "/pagesScenePhoto/index?orderType=2&imagesType=1&id=" + id, // 要跳转到的页面路径
|
||
});
|
||
};
|
||
const getScaleStatus = (type: number) => {
|
||
if (type === ScaleStatus.ToBeShipment) {
|
||
return "待出货";
|
||
} else if (type === ScaleStatus.ToBeGrossWeight) {
|
||
return "待过毛";
|
||
} else if (type === ScaleStatus.ToBeShipmentReview) {
|
||
return "待审核";
|
||
} else if (type === ScaleStatus.ToBeShipmentPay) {
|
||
return "待结算";
|
||
} else if (type === ScaleStatus.ShipmentPaid) {
|
||
return "已结算";
|
||
}
|
||
};
|
||
|
||
const handleAdd = () => {
|
||
uni.navigateTo({
|
||
url: "/pagesApp/shipmentSpl", // 要跳转到的页面路径
|
||
});
|
||
};
|
||
const pageList: PageResult<Order> = reactive({
|
||
isLoading: false,
|
||
noMoreData: false,
|
||
total: 0,
|
||
list: [],
|
||
pageNum: 1,
|
||
pageSize: 100,
|
||
});
|
||
|
||
const resetPageList = () => {
|
||
pageList.noMoreData = false;
|
||
pageList.total = 0;
|
||
pageList.list = [];
|
||
pageList.pageNum = 1;
|
||
pageList.pageSize = 100;
|
||
};
|
||
|
||
const handleOk = (obj: any) => {
|
||
state.params = obj;
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
|
||
const handleSearch = () => {
|
||
resetPageList();
|
||
getList();
|
||
};
|
||
const getList = (v?: boolean) => {
|
||
if (v) {
|
||
if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
|
||
pageList.pageNum++;
|
||
} else {
|
||
pageList.noMoreData = true;
|
||
return;
|
||
}
|
||
}
|
||
let params: any = {
|
||
pageSize: pageList.pageSize,
|
||
pageNum: pageList.pageNum,
|
||
startTime: formatStartAndEndTime(state.startTime, 's'),
|
||
endTime: formatStartAndEndTime(state.endTime, 'e'),
|
||
};
|
||
if (state.currentScaleStatus > -1) {
|
||
params.scaleStatus = state.currentScaleStatus;
|
||
}
|
||
if (state.currentSortName !== undefined) {
|
||
params.sortName = state.currentSortName;
|
||
}
|
||
if (keyword.value !== undefined) {
|
||
params.orderNumber = keyword.value;
|
||
}
|
||
pageList.isLoading = true;
|
||
ShipmentApi.getOrderPage({
|
||
...params,
|
||
...filterNullUndefined(state.params),
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
pageList.isLoading = false;
|
||
(pageList as any).list = (pageList as any).list = pageList.list.concat(
|
||
res.data.list
|
||
);
|
||
pageList.total = (res.data as any).total;
|
||
}
|
||
});
|
||
};
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.c-card {
|
||
margin: 30rpx 25rpx;
|
||
.search {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.btn {
|
||
background: #00dcee;
|
||
border-radius: 24rpx;
|
||
border: 1px solid #00dcee;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
margin-left: 50rpx;
|
||
padding: 6rpx 30rpx;
|
||
}
|
||
}
|
||
|
||
.filter {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
> view {
|
||
display: inline-block;
|
||
display: flex;
|
||
align-items: center;
|
||
text {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.btn {
|
||
font-size: 26rpx;
|
||
color: #00dcee;
|
||
}
|
||
}
|
||
.time {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
margin: 30rpx 0rpx 0rpx 30rpx;
|
||
}
|
||
.box + .box {
|
||
margin-top: 30rpx;
|
||
}
|
||
.box {
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
border-radius: 13rpx;
|
||
padding: 30rpx;
|
||
.base {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.no {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
}
|
||
.supplier {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
}
|
||
.btn {
|
||
border-radius: 24rpx;
|
||
border: 1px solid #00dcee;
|
||
padding: 10rpx 30rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #00dcee;
|
||
line-height: 41rpx;
|
||
}
|
||
}
|
||
.name {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
margin: 15rpx 0rpx;
|
||
text {
|
||
background-color: #ffaf75;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
padding: 5rpx 20rpx;
|
||
margin-left: 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.type {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #ec0f3e;
|
||
margin-bottom: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
.flex-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
|
||
padding-bottom: 20rpx;
|
||
}
|
||
}
|
||
.more {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
padding: 25rpx 0rpx 0rpx 0rpx;
|
||
> view {
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|