freight-web/src/pagesShipment/form/shipmentForm.vue

330 lines
7.7 KiB
Vue

<template>
<view class="c-card">
<u-form
labelPosition="left"
:model="model1"
:rules="rules"
ref="form"
:labelWidth="80"
:labelStyle="{ padding: '0rpx 10rpx' }"
>
<u-form-item
:prop="`order[${item.key}]`"
:label="item.name"
:required="item.required"
v-for="(item, index) in formAttrList"
:key="index"
@click="item.fn"
>
<u-textarea
v-if="item.type === 'textarea'"
v-model="(model1.order as any)[(item.key as any)]"
:placeholder="`请输入${item.name}`"
></u-textarea>
<u-input
v-if="item.type === 'select' || item.type === 'input'"
v-model="(model1.order as any)[(item.key as any)]"
:placeholder="`请${item.type === 'select' ? '选择' : '输入'}${
item.name
}`"
:clearable="true"
:customStyle="{}"
border="none"
>
<template #suffix>
{{ item.unit }}
</template>
</u-input>
<!-- @afterRead="afterRead"
@delete="deletePic" -->
<!-- <u-upload
v-if="item.type === 'upload'"
:fileList="[]"
name="1"
multiple
:maxCount="10"
></u-upload> -->
<uni-file-picker
v-if="item.type === 'upload'"
v-model="model1.order.fileList"
limit="10"
title="最多可上传10张图片"
:auto-upload="false"
fileMediatype="image"
mode="grid"
ref="filesShipmentRef"
></uni-file-picker>
<u-radio-group
v-if="item.type === 'radio'"
v-model="(model1.order as any)[(item.key as any)]"
placement="row"
>
<u-radio activeColor="#00DCEE" label="送货" :name="0"></u-radio>
&nbsp;&nbsp;&nbsp;
<u-radio activeColor="#00DCEE" label="自提" :name="1"></u-radio>
</u-radio-group>
<template #right v-if="item.type === 'select'">
<u-icon name="arrow-right"></u-icon>
</template>
</u-form-item>
</u-form>
<u-action-sheet
:actions="contrlModalParams.select.selectList"
:title="contrlModalParams.select.title"
:show="contrlModalParams.select.isShow"
@select="contrlModalParams.select.isShow = false"
@close="contrlModalParams.select.isShow = false"
></u-action-sheet>
</view>
<view class="btn-box">
<u-button type="primary" text="保存" @click="save()"></u-button>
</view>
</template>
<script setup lang="ts">
import { PictureApi, ShipmentApi } from "@/services";
import { ImagesType, OrderType, ScaleStatus } from "@/utils/enum";
import { onLoad } from "@dcloudio/uni-app";
const model1 = reactive<any>({
order: {
id: 0,
splTime: "",
takeType: 1,
fileList: [],
},
});
const rules = ref({
"userInfo.userName": {
type: "string",
required: true,
message: "请输入手机号",
trigger: ["blur", "change"],
},
"userInfo.password": {
type: "string",
required: true,
message: "请输入密码",
trigger: ["blur", "change"],
},
});
const contrlModalParams = reactive({
select: {
isShow: false,
title: "标题",
selectList: [
{
name: "选项一",
},
{
name: "选项二",
},
],
},
});
const formAttrList = reactive([
{
name: "客户",
key: "userId",
type: "select",
required: true,
unit: "",
fn: () => {
contrlModalParams.select.isShow = true;
contrlModalParams.select.title = "客户";
},
},
{
name: "出货产品",
key: "productId",
type: "select",
required: true,
unit: "",
fn: () => {
contrlModalParams.select.isShow = true;
contrlModalParams.select.title = "出货产品";
},
},
{
name: "数量",
key: "number",
type: "input",
required: true,
unit: "件",
},
{
name: "毛重",
key: "grossWeight",
type: "input",
required: true,
unit: "KG",
},
{
name: "提货方式",
key: "deliveryMethod",
required: true,
type: "radio",
},
{
name: "车辆信息",
type: "text",
},
{
name: "车牌号",
key: "carNumber",
type: "input",
unit: "",
},
{
name: "司机电话",
key: "phone",
type: "input",
unit: "",
},
{
name: "集装箱",
type: "text",
},
{
name: "箱号",
key: "box",
type: "input",
unit: "",
},
{
name: "封号",
key: "title",
type: "input",
unit: "",
},
{
name: "备注",
key: "notes",
type: "textarea",
},
{
name: "上传照片",
key: "photo",
type: "upload",
},
]);
const filesShipmentRef = ref();
const handleUpload = () => {
// console.log(event.tempFilePaths)
const list = filesShipmentRef.value[0].filesList;
return list.map((item: any) => {
return new Promise((resolve) => {
PictureApi.upload({
files: item,
path: item.path,
}).then((res) => {
if (res.code === 200) {
resolve({
...(res.data as any),
businessId: model1.order.id,
imagesType: ImagesType.NORMARL, // 普通资源
orderType: OrderType.Shipment, // 入库单
});
}
});
});
});
};
/**
* 点击保存 先执行upload接口
* 上传成功后 保存图片资源 和更新订单数据
*/
const save = () => {
Promise.all(handleUpload()).then((res) => {
// 上传多个资源
if (res.length > 0) {
PictureApi.addListAnnex({ annexPos: res }).then((res1) => {
if (res1.code === 200) {
uni.showToast({
title: "图片资源上传成功",
icon: "success",
});
}
});
}
});
let scaleStatus = 0;
if (ScaleStatus.ToBeShipment === model1.order.scaleStatus) {
scaleStatus = ScaleStatus.ToBeGrossWeight;
} else if (ScaleStatus.ToBeGrossWeight === model1.order.scaleStatus) {
scaleStatus = ScaleStatus.ToBeShipmentReview;
}
// 更新出货单
ShipmentApi.updateOrderIn({
orderOutPos: [{ ...model1.order, scaleStatus: scaleStatus }],
}).then((res) => {
if (res.code === 200) {
uni.showToast({
title: "编辑成功",
icon: "success",
});
debugger
if (scaleStatus === ScaleStatus.ToBeGrossWeight) {
uni.navigateTo({
url: "/pagesShipment/grossWeight", // 要跳转到的页面路径
});
} else if (scaleStatus === ScaleStatus.ToBeShipmentReview) {
uni.navigateTo({
url: "/pagesShipment/shipmentSettlement?scaleStatus=2", // 要跳转到的页面路径
});
}
}
});
};
onLoad((option) => {
model1.order.id = (option as any).id;
if (model1.order.id) {
ShipmentApi.getDetailById({ id: model1.order.id }).then((res) => {
if (res.code === 200) {
model1.order = res.data;
}
});
PictureApi.getAnnex({
businessId: model1.order.id,
orderType: 1,
imagesType: ImagesType.NORMARL,
}).then((res) => {
if (res.code === 200) {
}
});
}
});
</script>
<style lang="scss" scoped>
.c-card {
background: #ffffff;
// box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx;
margin: 30rpx 25rpx;
padding: 10rpx 20rpx;
::v-deep .u-form-item {
height: auto;
}
::v-deep .u-form-item + .u-form-item {
border-top: 1rpx solid rgba(233, 233, 233, 0.76);
}
}
.btn-box {
margin-top: 60rpx;
display: flex;
background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
border-radius: 13rpx 13rpx 0rpx 0rpx;
padding: 25rpx 50rpx;
position: sticky;
bottom: 0rpx;
z-index: 999;
::v-deep button {
border-radius: 43rpx;
}
}
</style>