<template>
<view class="add-form">
<view class="page-title">Add Machine</view>
<u-form :model="formData" label-width="150rpx">
<u-form-item label="machine" prop="machine_no">
<u-input v-model="formData.machine_no" placeholder="machine"></u-input>
</u-form-item>
<u-form-item label="备注" prop="remark">
<u-input v-model="formData.remark" placeholder="请输入备注"></u-input>
</u-form-item>
<u-form-item class="button-row">
<u-button @click="goBack" type="success" class="btns">返回</u-button>
<u-button @click="submitForm" type="primary" class="btns">提交</u-button>
</u-form-item>
</u-form>
<view class="add-icon" @click="Scan">
<u-icon name="scan" size="25" color="#2979ff"></u-icon>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
machine_no: '',
remark: ''
}
};
},
methods: {
Scan() {
uni.scanCode({
onlyFromCamera: true,
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
},
goBack() {
uni.navigateBack({
delta: 1
});
},
submitForm() {
console.log('提交表单', this.formData);
const postData = {
machine_no: this.formData.machine_no,
remark: this.formData.remark,
uid: 1
};
uni.request({
url: this.$baseUrl + "/api/addMachine",
method: 'POST',
data: postData,
header: {
'Content-Type': 'application/json'
},
success: res => {
uni.showToast({ title: '添加数据成功', icon: 'none' });
},
fail: err => {
uni.showToast({ title: '添加数据失败', icon: 'none' });
}
});
}
}
};
</script>
<style lang="scss">
.add-form {
padding: 20px;
}
.page-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.button-row {
display: flex;
justify-content: space-between;
}
.btns {
margin: 0 35rpx;
}
.add-icon {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>