<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="210" labelAlign="left" :rules="rules" :error-type="['toast']"
|
class="uForm">
|
<u-form-item label="产品类型：" :border-bottom="false" prop="productType">
|
<u-radio-group v-model="form.productType" @change="handleProductTypeChange">
|
<u-radio name="1">导体</u-radio>
|
<u-radio name="2">铜杆</u-radio>
|
<u-radio name="3">导体2.6</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item label="替换二维码：" :border-bottom="false" prop="replace">
|
<u-radio-group v-model="form.replace">
|
<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">
|
<u-input v-model="form.licensePlate" type="select" placeholder="请输入车牌号" @click="lpn" />
|
</u-form-item>
|
<u-form-item label="客户名称1：" :border-bottom="false" prop="customerName1">
|
<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">
|
<u-input v-model="form.shippingNoticeNo1" placeholder="" disabled />
|
</u-form-item>
|
<u-form-item label="客户名称2：" :border-bottom="false" prop="customerName2">
|
<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">
|
<u-input v-model="form.shippingNoticeNo2" placeholder="" disabled />
|
</u-form-item>
|
<u-form-item label="生产车间：" :border-bottom="false" prop="workshop">
|
<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">
|
<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">
|
<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">
|
<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>
|
</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];
|
|
// 检查产品类型是否为铜杆(值为2)
|
if (productType === '2') {
|
// 铜杆只能选择铜杆相关车间
|
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: 28rpx;
|
}
|
|
/* 复选框样式 */
|
.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: 30rpx;
|
color: #0c0c0c;
|
margin-right: 6rpx;
|
}
|
|
.item-two {
|
font-size: 30rpx;
|
color: #a5abb4;
|
margin-right: 6rpx;
|
}
|
</style>
|
