cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-14 10:33:16 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix duplicate by enter

Browse Source
This commit is contained in:
sajjad_talkhabi
2023-10-24 21:53:40 +03:30
parent 98aa208766
commit a5786f91d1
1 changed files with 222 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Package/AddEdit.vue
+98 -33
View File
@@ -5,8 +5,14 @@
<v-layout wrap class="px-5 my-3">
<v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field name="name" label="Name" color="black" v-model="formData.name"
:rules="[rules.required, rules.counter]" class="py-3 pr-3"></v-text-field>
<v-text-field
name="name"
label="Name"
color="black"
v-model="formData.name"
:rules="[rules.required, rules.counter]"
class="py-3 pr-3"
></v-text-field>
</v-flex>
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
@@ -21,12 +27,29 @@
</v-flex> -->
<v-flex xs12 md12 sm12></v-flex>
<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative"
v-for="(item, key) in formData.items" :key="key">
<v-flex
xs12
md3
sm3
class="WM-FlexCenter WM-DuplicateInput"
style="position: relative"
v-for="(item, key) in formData.items"
:key="key"
>
<div class="Inner">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete class="py-3 pr-3" :items="items" item-text="name" v-model="item.id"
item-value="id" label="Select Items For Package" color="black" :filter="customFilter">
<v-autocomplete
@keydown.enter.native.prevent="duplicateForm(key)"
:ref="`selectItem-${key}`"
class="py-3 pr-3"
:items="items"
item-text="name"
v-model="item.id"
item-value="id"
label="Select Items For Package"
color="black"
:filter="customFilter"
>
<template v-slot:selection="{ item }">
{{ item.name }} - {{ item.udi }}
</template>
@@ -36,28 +59,58 @@
</template>
</v-autocomplete>
<v-btn absolute small right bottom color="cyan" @click="duplicateForm(key)">
<v-btn
absolute
small
right
bottom
color="cyan"
@click="duplicateForm(key)"
>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
</v-btn>
<v-btn v-if="key > 0" absolute small right top color="pink" @click="removeForm(key)">
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
<v-btn
v-if="key > 0"
absolute
small
right
top
color="pink"
@click="removeForm(key)"
>
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon
>REMOVE
</v-btn>
</div>
</v-flex>
<v-flex xs3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]"
class="py-3"></v-text-field>
<v-text-field
name="UDI"
label="UDI"
color="black"
v-model="formData.udi"
:rules="[rules.required]"
class="py-3"
></v-text-field>
</v-flex>
<!-- </v-row> -->
<v-spacer></v-spacer>
<v-flex xs12>
<hr class="v-divider theme--light" style="margin-top:30px !important">
<hr
class="v-divider theme--light"
style="margin-top: 30px !important"
/>
</v-flex>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 mb-3">
<v-flex xs12 sm12 md12>
<v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
<v-textarea
color="black"
v-model="formData.note"
class="pa-2"
name="address"
>
<template v-slot:label>
<div>description</div>
</template>
@@ -66,14 +119,25 @@
</v-layout>
<v-layout row wrap justify-center align-center>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
<v-btn
class="WM-CyanBlueGradient-BG"
style="padding: 10px 60px"
@click="submitForm()"
>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
</v-flex>
<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
<v-flex
xs12
md2
sm2
class="text-md-center text-sm-center text-xs-center"
>
<router-link :to="{ name: 'AllPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
>
<v-icon class="black--text">keyboard_arrow_left</v-icon>
<span class="black--text">Back</span>
</v-btn>
@@ -98,20 +162,20 @@ export default {
note: "",
items: [
{
name: ''
}
]
name: "",
},
],
},
items: [],
result: ["Pass", "Fail"],
rules: {
required: value => !!value || "Required.",
counter: value =>
required: (value) => !!value || "Required.",
counter: (value) =>
!value ||
value.length == 0 ||
value.length >= 5 ||
"Min 5 characters"
}
"Min 5 characters",
},
};
},
created() {
@@ -126,10 +190,9 @@ export default {
const udi = item.udi ? item.udi.toLowerCase() : null;
const searchText = queryText.toLowerCase();
if (udi) {
return name.indexOf(searchText) > -1 ||
udi.indexOf(searchText) > -1
return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
}
return name.indexOf(searchText) > -1
return name.indexOf(searchText) > -1;
},
async load(id) {
const result = await ApiService.get(urls.editPackage(id));
@@ -142,6 +205,10 @@ export default {
if (result.status == 200) {
this.items = result.data.data;
}
// this.items = [
// { name: "test", udi: "23" },
// { name: "saj", udi: "43" },
// ];
},
async submitForm() {
let result;
@@ -151,10 +218,7 @@ export default {
this.formData
);
} else {
result = await ApiService.post(
urls.storePackage,
this.formData
);
result = await ApiService.post(urls.storePackage, this.formData);
}
if (result && result.status == 200) {
@@ -166,12 +230,13 @@ export default {
this.formData.items.push({
name: "",
});
console.log(this.$refs[`selectItem-1`], infoIndex);
this.$refs[`selectItem-${infoIndex}`][0].focus();
},
removeForm(infoIndex) {
this.formData.items.splice(infoIndex, 1);
},
}
},
};
</script>
<style media="screen">
@@ -183,6 +248,6 @@ export default {
padding: 15px 20px !important;
margin: 0 10px 0 0;
width: 100%;
border: 1px solid rgba(0, 0, 0, .2);
border: 1px solid rgba(0, 0, 0, 0.2);
}
</style>