Я создал эту форму, используя элемент UI , где я использую автозаполнение. В настоящее время autocomplete добавляет повторяющиеся записи в таблицу, которая уже существует в таблице. Я хочу что-то, чтобы предотвратить добавление повторяющихся записей. Вместо этого, когда выбирается существующее item_name путем проверки upc_ean_isbn (поскольку это уникальный ключ), существующая строка должна быть выделена.
Вот мой код
<template>
<el-form
ref="updateForm"
:model="cart"
status-icon
label-width="100px"
@keydown.enter.native="updateContact"
>
<el-table :data="cart.items" style="width: 100%">
<el-table-column label="Code">
<template slot-scope="scope">
<el-input v-model="scope.row.code" disabled></el-input>
</template>
</el-table-column>
<el-table-column label="Name">
<template slot-scope="scope">
<el-autocomplete
class="inline-input"
v-model="scope.row.item_name"
value-key="item_name"
:fetch-suggestions="querySearch"
placeholder="Please Input"
:trigger-on-focus="false"
@focus="setCurrentItem(scope.row)"
@select="handleSelect"
></el-autocomplete>
</template>
</el-table-column>
<el-table-column label="QTY">
<template slot-scope="scope">
<el-input v-model="scope.row.qty"></el-input>
</template>
</el-table-column>
<el-table-column label="Price">
<template slot-scope="scope">
<el-input v-model="scope.row.price" disabled></el-input>
</template>
</el-table-column>
<el-table-column label="Amount">
<template slot-scope="scope">
<el-input v-model="scope.row.total" disabled></el-input>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="danger" @click="removeLine(scope.$index)">Del</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item>
<el-button @click="addLine">Add</el-button>
</el-form-item>
<el-row>
<el-col :span="6" :offset="14">Sub Total {{subTotal}}</el-col>
<el-col :span="6" :offset="14">
<el-form-item label="Discount" prop>
<el-input placeholder v-model="cart.discount"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :offset="14">Grand total {{grandTotal}}</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
cart: {
items: [],
discount: 0
},
links: [],
currentItem: null,
};
},
methods: {
removeLine(item) {
if (item !== -1) {
this.cart.items.splice(item, 1);
}
},
addLine() {
this.cart.items.push({
code: "",
item_name: "",
qty: 1,
price: 0,
total: 0
});
},
querySearch(queryString, cb) {
var links = this.links;
var results = queryString
? links.filter(this.createFilter(queryString))
: links;
// call callback function to return suggestions
cb(results);
},
createFilter(queryString) {
return link => {
return (
link.item_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
},
loadAll() {
return [
{
id: 2,
upc_ean_isbn: "102",
item_name: "Lucy Olive Oil",
size: "150 ml",
description: "na",
avatar: "no-foto.png",
cost_price: "110.00",
selling_price: "130.00",
quantity: 30,
type: 1,
created_at: "2019-07-05 21:20:10",
updated_at: "2019-07-06 10:41:09"
},
{
id: 8,
upc_ean_isbn: "23001",
item_name: "Pen Desk",
size: "6 inch",
description: "",
avatar: "no photos",
cost_price: "300.00",
selling_price: "350.00",
quantity: 5,
type: 1,
created_at: "2019-10-25 14:42:07",
updated_at: "2019-10-25 14:42:07"
},
{
id: 9,
upc_ean_isbn: "789",
item_name: "Ink",
size: "10 mL",
description: "NA",
avatar: "no photos",
cost_price: "40.00",
selling_price: "60.00",
quantity: 17,
type: 1,
created_at: "2019-10-25 18:22:23",
updated_at: "2019-10-25 18:22:23"
},
{
id: 10,
upc_ean_isbn: "2001",
item_name: "Phone",
size: "na",
description: "na",
avatar: "no photos",
cost_price: "12000.00",
selling_price: "14000.00",
quantity: 5,
type: 1,
created_at: "2019-10-25 18:23:31",
updated_at: "2019-10-25 18:23:31"
},
{
id: 11,
upc_ean_isbn: "999",
item_name: "Tasty tea",
size: "100 g",
description: "",
avatar: "no photos",
cost_price: "30.00",
selling_price: "40.00",
quantity: 30,
type: 1,
created_at: "2019-10-25 18:55:39",
updated_at: "2019-10-25 18:55:39"
}
];
},
setCurrentItem(item) {
this.currentItem = item
},
handleSelect(item) {
this.currentItem.code = item.upc_ean_isbn;
this.currentItem.item_name = item.item_name;
this.currentItem.price = item.selling_price;
this.currentItem.total = this.currentItem.price * this.currentItem.qty
}
},
mounted() {
this.links = this.loadAll();
},
computed: {
subTotal: function() {
return this.cart.items.reduce(function(carry, item) {
return carry + parseFloat(item.qty) * parseFloat(item.price);
}, 0);
},
grandTotal: function() {
return this.subTotal - parseFloat(this.cart.discount);
},
},
watch: {
'cart.items' : {
deep: true,
handler: (items) => {
items.forEach(element => element.total = element.price * element.qty)
}
}
}
};
</script>
Вот мой jsfiddle https://jsfiddle.net/coolr/t8b6zvno/9/
Спасибо