【发布时间】：2021-12-15 18:26:10
【问题描述】：
我有一个申请手机配件的表格。所以基本上这里我有四个表——附件、附件请求、附件请求详细信息、附件供应商。
附件有 vendor_id、条形码、描述。 附件请求具有 user_id、store_id、request_date、status。 配件详细信息有 Accessories_request_id、vendor_id、条形码、描述、数量、状态。 配件供应商只有名字。例如苹果、三星。
这是我的脚本
<script>
var app = new Vue({
el: '#app',
mounted: function() {
this.addLine();
},
data() {
return {
stores: {!! $stores !!},
accessory_vendors: {!! $accessory_vendors !!},
form: {
vendor_id: '',
store_id: '',
barcode: '',
lines: []
},
}
},
methods: {
addLine: function() {
this.form.lines.push({
vendor_id: '',
description: '',
qty: '',
barcode: ''
})
},
removeLine: function(index) {
this.form.lines.splice(index, 1);
},
formSubmit: function(e) {
e.preventDefault();
let currentObj = this;
axios.post('/accessory/store',{
data: this.form,
})
.then(response => {
$(location).attr('href', '/accessory')
})
.catch(function (error) {
alert('Error');
});
},
getAccessory(barcode) {
axios.get("/getdetails/?barcode=" + barcode).then(res => {
//this.form.lines = res.data
data= res.data;
console.log(data)
});
}
}
})
</script>
这是我的页面代码 -
<!-- Page Content -->
<div class="content" id="app">
<!-- Lock Forms -->
<!-- <h2 class="content-heading">Add User</h2> -->
<!-- Register Forms -->
<div class="row">
<div class="col-md-12">
<!-- Bootstrap Register -->
<div class="block block-themed">
<div class="block-header bg-gd-dusk">
<h3 class="block-title">Add Accessory</h3>
</div>
<div class="block-content">
@include('errors.error')
<form enctype="multipart/form-data" @submit="formSubmit">
@csrf
<div class="form-group row">
<div class="col-12">
<label>Select Store</label>
<select class="form-control" name="store_id" v-model="form.store_id" required>
<option v-for="store in stores" :key="store.id" v-bind:value="store.id">@{{store.channel_id}} - @{{store.street_name}}</option>
</select>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Barcode</th>
<th>Vendor</th>
<th>Description</th>
<th>QTY</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(line,k) in form.lines">
<td><input type="text" class="form-control" name="barcode" v-model="line.barcode" @change="getAccessory(line.barcode)" required></td>
<td>
<select v-model="line.vendor_id" class="form-control" name="vendor_id" required>
<option v-bind:value="vendor.id":key="vendor.id" v-for="vendor in accessory_vendors" >@{{vendor.name}}</option>
</select>
</td>
<td><input type="text" v-model="line.description"class="form-control" value="" required></td>
<td><input type="number" v-model="line.qty"class="form-control" required></td>
<td><button class="btn btn-danger btn-sm" @click="removeLine(k)" v-if="form.lines.length != 1" required>Remove</button></td>
</tr>
<tr>
<td colspan="3">
<button type="button" @click="addLine()" class="btn btn-success btn-sm">Add Row</button>
</td>
</tr>
</tbody>
</table>
<div class="form-group row">
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg pull-right">Create</button>
</div>
</div>
</form>
</div>
</div>
<!-- END Bootstrap Register -->
</div>
</div>
</div>
</main>
这是我的控制器代码 --
public function getaccessory()
{
//return 'test';
$barcode = request('barcode');
$getaccessory = DB::table('accessories')
->where('barcode', $barcode)
->select('id', 'vendor_id', 'description')
->get();
return response()->json($getaccessory);
}
我需要关于一件事的帮助 ---
- getAccessory 函数会在我们在条形码输入字段中输入任何内容时从数据库中获取数据，它会在控制台中显示数据。如果结果从条形码文本框匹配到数据库附件表，我希望它应该与供应商和描述绑定，并应该显示给用户。
【问题讨论】：