<template>
|
<!-- 核磅录入 -->
|
<div class="page">
|
<view class="packing-registration-bg" />
|
<u-navbar
|
title="核磅录入"
|
:background="background"
|
:border-bottom="false"
|
:title-bold="true"
|
title-color="#000"
|
back-icon-color="#000"
|
/>
|
<u-form
|
:model="form"
|
ref="uForm"
|
:label-width="235"
|
labelAlign="left"
|
:rules="rules"
|
:error-type="['toast']"
|
class="uForm"
|
>
|
<u-form-item
|
label="产品类型："
|
:border-bottom="false"
|
prop="productType"
|
style="font-size: small"
|
>
|
<u-radio-group
|
v-model="form.productType"
|
@change="handleProductTypeChange"
|
style="font-size: small"
|
>
|
<u-radio name="DT01">导体</u-radio>
|
<u-radio name="TG01">铜杆</u-radio>
|
<u-radio name="DT02">导体2.6</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item
|
label="替换二维码："
|
:border-bottom="false"
|
prop="replace"
|
style="font-size: small"
|
>
|
<u-radio-group v-model="form.replace" style="font-size: small">
|
<u-radio name="1">是</u-radio>
|
<u-radio name="0">否</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item
|
label="车牌号："
|
:border-bottom="false"
|
prop="licensePlate"
|
style="font-size: small"
|
>
|
<u-input
|
v-model="form.licensePlate"
|
type="select"
|
placeholder="请输入车牌号"
|
@click="lpn"
|
/>
|
</u-form-item>
|
<u-form-item
|
label="客户名称1："
|
:border-bottom="false"
|
prop="customerName1"
|
style="font-size: small"
|
>
|
<picker
|
class="item-one item-two"
|
style="width: 100%; text-align: right"
|
@change="selClientChange($event, selClientList, 'customerName1')"
|
:value="selClientIndex1"
|
:range="selClientList"
|
range-key="label"
|
>
|
<view>
|
<text
|
:style="{
|
color: selClientIndex1 == null ? '#a5abb4' : '#0c0c0c',
|
}"
|
>{{
|
selClientIndex1 == null
|
? "请选择"
|
: selClientList[selClientIndex1].label
|
}}</text
|
>
|
</view>
|
</picker>
|
<u-icon
|
v-if="selClientIndex1 == null"
|
name="arrow-right"
|
color="#687792"
|
size="28"
|
></u-icon>
|
</u-form-item>
|
<u-form-item
|
label="发货通知单号1："
|
:border-bottom="false"
|
prop="shippingNoticeNo1"
|
style="font-size: small"
|
:label-width="245"
|
>
|
<u-input v-model="form.shippingNoticeNo1" placeholder="" disabled />
|
</u-form-item>
|
<u-form-item
|
label="客户名称2："
|
:border-bottom="false"
|
prop="customerName2"
|
style="font-size: small"
|
>
|
<picker
|
class="item-one item-two"
|
style="width: 100%; text-align: right"
|
@change="selClientChange($event, selClientList, 'customerName2')"
|
:value="selClientIndex2"
|
:range="selClientList"
|
range-key="label"
|
>
|
<view>
|
<text
|
:style="{
|
color: selClientIndex2 == null ? '#a5abb4' : '#0c0c0c',
|
}"
|
>{{
|
selClientIndex2 == null
|
? "请选择"
|
: selClientList[selClientIndex2].label
|
}}</text
|
>
|
</view>
|
</picker>
|
<u-icon
|
v-if="selClientIndex2 == null"
|
name="arrow-right"
|
color="#687792"
|
size="28"
|
></u-icon>
|
</u-form-item>
|
<u-form-item
|
label="发货通知单号2："
|
:border-bottom="false"
|
prop="shippingNoticeNo2"
|
style="font-size: small"
|
:label-width="245"
|
>
|
<u-input v-model="form.shippingNoticeNo2" placeholder="" disabled />
|
</u-form-item>
|
<u-form-item
|
label="生产车间："
|
:border-bottom="false"
|
prop="workshop"
|
style="font-size: small"
|
>
|
<picker
|
class="item-one item-two"
|
style="width: 100%; text-align: right"
|
@change="workshopChange($event, workshopList)"
|
:value="workshopIndex"
|
:range="workshopList"
|
range-key="label"
|
:disabled="!form.productType"
|
>
|
<view>
|
<text
|
:style="{ color: workshopIndex == null ? '#a5abb4' : '#0c0c0c' }"
|
>{{
|
workshopIndex == null
|
? "请选择"
|
: workshopList[workshopIndex].label
|
}}</text
|
>
|
</view>
|
</picker>
|
<u-icon
|
v-if="workshopIndex == null"
|
name="arrow-right"
|
color="#687792"
|
size="28"
|
></u-icon>
|
</u-form-item>
|
<u-form-item
|
label="司磅员："
|
:border-bottom="false"
|
prop="weighingOperator"
|
style="font-size: small"
|
>
|
<picker
|
class="item-one item-two"
|
style="width: 100%; text-align: right"
|
@change="weighmanChange($event, weighmanList)"
|
:value="weighmanIndex"
|
:range="weighmanList"
|
range-key="label"
|
>
|
<view>
|
<text
|
:style="{ color: weighmanIndex == null ? '#a5abb4' : '#0c0c0c' }"
|
>{{
|
weighmanIndex == null
|
? "请选择"
|
: weighmanList[weighmanIndex].label
|
}}</text
|
>
|
</view>
|
</picker>
|
<u-icon
|
v-if="weighmanIndex == null"
|
name="arrow-right"
|
color="#687792"
|
size="28"
|
></u-icon>
|
</u-form-item>
|
<u-form-item
|
label="叉车工："
|
:border-bottom="false"
|
prop="forkliftOperator"
|
style="font-size: small"
|
>
|
<u-input
|
v-model="form.forkliftOperator"
|
type="select"
|
placeholder="请选择"
|
@click="openForkliftDriverList"
|
/>
|
</u-form-item>
|
</u-form>
|
<u-button type="primary" class="bottom-button1" @click="submit"
|
>创建</u-button
|
>
|
|
<!--车牌号 -->
|
<modalBg ref="modalBg" :confirm="confirm">
|
<u-field
|
v-model="form.licensePlate"
|
label="车牌号："
|
placeholder="请输入"
|
:border-bottom="false"
|
>
|
</u-field>
|
</modalBg>
|
<!-- 叉车工 -->
|
<u-modal
|
v-model="showModal"
|
title=""
|
:show-cancel-button="true"
|
:show-confirm-button="true"
|
@confirm="confirmSelection"
|
@cancel="cancel"
|
>
|
<scroll-view scroll-y="true" style="height: 100%; transform: translateZ(0); -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;"></scroll-view>
|
<view class="popup-content">
|
<view class="popup-header">
|
<checkbox-group @change="checkboxChange">
|
<label
|
class="checkbox-item"
|
v-for="(item, index) in checkboxList"
|
:key="index"
|
>
|
<checkbox :value="item.value" :checked="item.checked" />
|
<text class="label">{{ item.label }}</text>
|
</label>
|
</checkbox-group>
|
</view>
|
</view>
|
<scroll-view/>
|
</u-modal>
|
</div>
|
</template>
|
|
<script>
|
import modalBg from "@/components/modal/modal-bg.vue";
|
import content_bg from "@/static/custom/packing/backBg.png";
|
export default {
|
components: {
|
modalBg,
|
},
|
data() {
|
return {
|
checkboxList: [],
|
background: {
|
backgroundImage: `url(${content_bg})`,
|
backgroundAttachment: "fixed",
|
backgroundSize: "100% auto",
|
backgroundRepeat: "no-repeat",
|
},
|
show: false,
|
num: 1,
|
form: {
|
replace: "0",
|
productType: "",
|
licensePlate: "",
|
customerName1: "",
|
shippingNoticeNo1: "",
|
customerName2: "",
|
shippingNoticeNo2: "",
|
workshop: "",
|
weighingOperator: "",
|
forkliftOperator: "",
|
},
|
rules: {
|
productType: [
|
{
|
required: true,
|
message: "请选择产品类型",
|
trigger: ["change"],
|
},
|
],
|
replace: [
|
{
|
required: true,
|
message: "请选择是否替换二维码",
|
trigger: ["change", "blur"],
|
},
|
],
|
licensePlate: [
|
{
|
required: true,
|
message: "请输入车牌号",
|
trigger: ["change", "blur"],
|
},
|
],
|
workshop: [
|
{
|
required: true,
|
message: "请选择生产车间",
|
trigger: ["change"],
|
},
|
],
|
weighingOperator: [
|
{
|
required: true,
|
message: "请选择司磅员",
|
trigger: ["change"],
|
},
|
],
|
forkliftOperator: [
|
{
|
type: "string",
|
required: true,
|
message: "请至少选择一个叉车工",
|
trigger: ["change"],
|
},
|
],
|
},
|
// 客户名称
|
selClientList: [],
|
selClientIndex1: null,
|
selClientIndex2: null,
|
// 生产车间
|
workshopList: [],
|
workshopIndex: null,
|
// 司磅员
|
weighmanList: [],
|
weighmanIndex: null,
|
showModal: false,
|
selectedItems: [],
|
id1: "",
|
id2: "",
|
isSubmitting: false,
|
};
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
// 仅在组件初次加载时获取数据
|
if (this.selClientList.length === 0) {
|
this.fetchClients();
|
}
|
if (this.workshopList.length === 0) {
|
this.fetchWorkshops();
|
}
|
if (this.checkboxList.length === 0) {
|
this.fetchForkliftOperators();
|
}
|
if (this.weighmanList.length === 0) {
|
this.fetchWeighmen();
|
}
|
},
|
onShow() {
|
// 重置表单数据
|
this.form = {
|
replace: "0",
|
productType: "",
|
licensePlate: "",
|
customerName1: "",
|
shippingNoticeNo1: "",
|
customerName2: "",
|
shippingNoticeNo2: "",
|
workshop: "",
|
weighingOperator: "",
|
forkliftOperator: "",
|
};
|
this.selClientIndex1 = null;
|
this.selClientIndex2 = null;
|
this.workshopIndex = null;
|
this.weighmanIndex = null;
|
this.checkboxList = this.checkboxList.map((item) => ({
|
...item,
|
checked: false,
|
}));
|
this.$refs.uForm && this.$refs.uForm.resetValidation();
|
},
|
methods: {
|
/**
|
* 获取客户列表
|
*/
|
fetchClients() {
|
this.$u.api.NuclearScaleEntry.selClient()
|
.then((res) => {
|
console.log("客户名称", res);
|
if (res.code === 0) {
|
res.data.forEach((i) => {
|
const obj = Object.assign({
|
label: i.customerName,
|
value: i.customerName,
|
shippingNoticeNo: i.shippingNoticeNo,
|
id: i.id,
|
});
|
this.selClientList.push(obj);
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || "获取客户名称失败",
|
icon: "none",
|
});
|
}
|
})
|
.catch((err) => {
|
uni.showToast({
|
title: "网络错误，获取客户名称失败",
|
icon: "none",
|
});
|
console.error("获取客户名称错误:", err);
|
});
|
},
|
|
/**
|
* 获取车间列表
|
*/
|
fetchWorkshops() {
|
this.$u.api
|
.dictData({
|
dictType: "workshop",
|
})
|
.then((res) => {
|
if (res.code === 0 && res.data.length > 0) {
|
res.data.forEach((i) => {
|
const obj = Object.assign({
|
label: i.label,
|
value: i.value,
|
});
|
this.workshopList.push(obj);
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || "获取车间列表失败",
|
icon: "none",
|
});
|
}
|
})
|
.catch((err) => {
|
uni.showToast({
|
title: "网络错误，获取车间列表失败",
|
icon: "none",
|
});
|
console.error("获取车间列表错误:", err);
|
});
|
},
|
|
/**
|
* 获取叉车工列表
|
*/
|
fetchForkliftOperators() {
|
this.$u.api
|
.dictData({
|
dictType: "forklift",
|
})
|
.then((res) => {
|
if (res.code === 0 && res.data.length > 0) {
|
res.data.forEach((i) => {
|
const obj = Object.assign({
|
label: i.label,
|
value: i.label,
|
});
|
this.checkboxList.push(obj);
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || "获取叉车工列表失败",
|
icon: "none",
|
});
|
}
|
})
|
.catch((err) => {
|
uni.showToast({
|
title: "网络错误，获取叉车工列表失败",
|
icon: "none",
|
});
|
console.error("获取叉车工列表错误:", err);
|
});
|
},
|
|
/**
|
* 获取司磅员列表
|
*/
|
fetchWeighmen() {
|
this.$u.api
|
.dictData({
|
dictType: "weighing",
|
})
|
.then((res) => {
|
if (res.code === 0 && res.data.length > 0) {
|
res.data.forEach((i) => {
|
const obj = Object.assign({
|
label: i.label,
|
value: i.label,
|
});
|
this.weighmanList.push(obj);
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || "获取司磅员列表失败",
|
icon: "none",
|
});
|
}
|
})
|
.catch((err) => {
|
uni.showToast({
|
title: "网络错误，获取司磅员列表失败",
|
icon: "none",
|
});
|
console.error("获取司磅员列表错误:", err);
|
});
|
},
|
// 复选框变化事件
|
checkboxChange(e) {
|
const values = e.detail.value;
|
this.checkboxList = this.checkboxList.map((item) => {
|
return {
|
...item,
|
checked: values.includes(item.value),
|
};
|
});
|
},
|
|
// 确认选择
|
confirmSelection() {
|
// 将选中的叉车工标签数组转为以逗号分隔的字符串
|
this.form.forkliftOperator = this.checkboxList
|
.filter((item) => item.checked)
|
.map((item) => item.label)
|
.join(",");
|
},
|
cancel() {},
|
openForkliftDriverList() {
|
this.showModal = true;
|
},
|
// 客户名称
|
selClientChange(e, storage, code) {
|
if (storage.length <= 0) {
|
this.selClientIndex1 = null;
|
this.selClientIndex2 = null;
|
return;
|
}
|
const selectedIndex = e.target.value;
|
const selectedCustomer = storage[selectedIndex];
|
|
// 检查是否选择了相同的客户
|
if (code === "customerName1" && this.selClientIndex2 === selectedIndex) {
|
uni.showToast({
|
title: "不能选择相同的客户",
|
icon: "none",
|
});
|
return;
|
}
|
if (code === "customerName2" && this.selClientIndex1 === selectedIndex) {
|
uni.showToast({
|
title: "不能选择相同的客户",
|
icon: "none",
|
});
|
return;
|
}
|
|
if (code === "customerName2") {
|
this.selClientIndex2 = selectedIndex;
|
this.form.customerName2 = selectedCustomer.label;
|
this.form.shippingNoticeNo2 = selectedCustomer.shippingNoticeNo;
|
this.id2 = selectedCustomer.id;
|
}
|
if (code === "customerName1") {
|
this.selClientIndex1 = selectedIndex;
|
this.form.customerName1 = selectedCustomer.label;
|
this.form.shippingNoticeNo1 = selectedCustomer.shippingNoticeNo;
|
this.id1 = selectedCustomer.id;
|
}
|
},
|
// 生产车间
|
workshopChange(e, storage) {
|
if (storage.length <= 0) {
|
this.workshopIndex = null;
|
return;
|
}
|
|
const productType = this.form.productType;
|
const selectedWorkshop = storage[e.target.value];
|
|
// 检查产品类型是否为铜杆(值为TG01)
|
if (productType === "TG01") {
|
// 铜杆只能选择铜杆相关车间
|
if (!selectedWorkshop.label.includes("铜杆")) {
|
uni.showModal({
|
title: "提示",
|
content: "铜杆产品只能选择铜杆相关车间",
|
showCancel: false,
|
});
|
return;
|
}
|
} else {
|
// 导体产品不能选择铜杆车间
|
if (selectedWorkshop.label.includes("铜杆")) {
|
uni.showModal({
|
title: "提示",
|
content: "导体产品不能选择铜杆车间",
|
showCancel: false,
|
});
|
return;
|
}
|
}
|
|
this.workshopIndex = e.target.value;
|
this.form.workshop = selectedWorkshop.label;
|
},
|
// 司磅员
|
weighmanChange(e, storage) {
|
if (storage.length <= 0) {
|
this.weighmanIndex = null;
|
return;
|
}
|
this.weighmanIndex = e.target.value;
|
this.form.weighingOperator = storage[this.weighmanIndex].label;
|
},
|
lpn() {
|
this.$refs.modalBg.open();
|
},
|
// 弹框保存
|
confirm() {},
|
|
/**
|
* 产品类型变化时清空车间选择
|
*/
|
handleProductTypeChange() {
|
this.workshopIndex = null;
|
this.form.workshop = "";
|
},
|
// 提交按钮
|
async submit() {
|
if (this.isSubmitting) return;
|
|
try {
|
// 统一表单验证
|
if (!(await this.validateForm())) return;
|
|
// 构建提交数据
|
const submitData = this.buildSubmitData().customerList;
|
console.log("提交的数据", submitData);
|
this.isSubmitting = true;
|
const res = await this.$u.api.NuclearScaleEntry.createMain(submitData);
|
|
if (res.code === 0) {
|
this.$u.toast("提交成功");
|
uni.navigateBack();
|
} else {
|
uni.showToast({
|
title: res.msg || "提交失败：业务处理错误",
|
icon: "none",
|
});
|
console.error("业务错误:", res);
|
}
|
} catch (err) {
|
if (err.type === "validation") {
|
uni.showToast({
|
title: err.message,
|
icon: "none",
|
});
|
} else if (err.message.includes("Network Error")) {
|
uni.showToast({
|
title: "网络连接错误，请检查网络后重试",
|
icon: "none",
|
});
|
} else {
|
uni.showToast({
|
title: "系统错误，请稍后重试",
|
icon: "none",
|
});
|
}
|
console.error("提交表单错误:", err);
|
} finally {
|
this.isSubmitting = false;
|
}
|
},
|
|
// 统一表单验证
|
async validateForm() {
|
// 使用uView表单验证
|
if (!(await this.$refs.uForm.validate())) {
|
return false;
|
}
|
|
// 客户名称验证
|
if (!this.form.customerName1 || !this.form.customerName2) {
|
throw { type: "validation", message: "请先选择客户名称" };
|
}
|
|
return true;
|
},
|
|
// 构建提交数据
|
buildSubmitData() {
|
// 创建客户数据的辅助函数
|
const createCustomerItem = (customerIndex) => ({
|
customerName: this.form[`customerName${customerIndex}`],
|
shippingNoticeNo: this.form[`shippingNoticeNo${customerIndex}`],
|
shippingNoticeId: this[`id${customerIndex}`],
|
replace: this.form.replace,
|
productType: this.form.productType,
|
licensePlate: this.form.licensePlate,
|
workshop: this.form.workshop,
|
weighingOperator: this.form.weighingOperator,
|
forkliftOperator: this.form.forkliftOperator,
|
});
|
|
// 构建客户列表
|
const customerList = [1, 2].map(createCustomerItem);
|
|
return {
|
customerList,
|
};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "index.scss";
|
|
/* 弹窗样式 */
|
.popup-content {
|
padding: 30rpx;
|
max-height: 70vh;
|
overflow-y: auto;
|
}
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
margin-bottom: 20rpx;
|
}
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
|
.confirm-btn {
|
color: #007aff;
|
font-size: small;
|
}
|
|
/* 复选框样式 */
|
.checkbox-item {
|
width: 230px;
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f5f5f5;
|
background-color: #f8f9fa;
|
|
.label {
|
position: relative;
|
left: 130px;
|
}
|
}
|
|
.checkbox-item:last-child {
|
border-bottom: none;
|
}
|
|
.checkbox-item .label {
|
margin-left: 20rpx;
|
}
|
|
.item-one {
|
font-size: small;
|
color: #0c0c0c;
|
margin-right: 6rpx;
|
}
|
|
.item-two {
|
font-size: small;
|
color: #a5abb4;
|
margin-right: 6rpx;
|
}
|
</style>
|
