shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refs select and select remote re-factoring

Browse Source
This commit is contained in:
Cüneyt Şentürk
2020-11-10 16:55:21 +03:00
parent 683b2a372d
commit 57759aa718
2 changed files with 254 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/js/components/AkauntingSelect.vue
View File

@ -269,7 +269,7 @@ export default {
created() { created() {
// Option set sort_option data // Option set sort_option data
if (Object.keys(this.options).length) { if (!Array.isArray(this.options)) {
for (const [key, value] of Object.entries(this.options)) { for (const [key, value] of Object.entries(this.options)) {
this.sort_options.push({ this.sort_options.push({
key: key, key: key,
@ -279,8 +279,9 @@ export default {
} else { } else {
this.options.forEach(function (option, index) { this.options.forEach(function (option, index) {
this.sort_options.push({ this.sort_options.push({
key: option, index: index,
value: index key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
}); });
}, this); }, this);
} }
@ -366,11 +367,11 @@ export default {
var value = this.$children[0].$children[0].$refs.input.value; var value = this.$children[0].$children[0].$refs.input.value;
} }
if (this.add_new.type == 'inline') {
if (value === '') { if (value === '') {
return false; return false;
} }
if (this.add_new.type == 'inline') {
await this.addInline(value); await this.addInline(value);
} else { } else {
await this.onModal(value); await this.onModal(value);
@ -535,6 +536,10 @@ export default {
padding: 10px 0 0 !important; padding: 10px 0 0 !important;
} }
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer { .el-select__footer {
text-align: center; text-align: center;
border-top: 1px solid #dee2e6; border-top: 1px solid #dee2e6;

683
resources/assets/js/components/AkauntingSelectRemote.vue
View File

@ -1,8 +1,5 @@
<template> <template>
<base-input <base-input v-if="title" :label="title" :name="name"
v-if="title"
:label="title"
:name="name"
:readonly="readonly" :readonly="readonly"
:disabled="disabled" :disabled="disabled"
:class="[ :class="[
@ -11,22 +8,28 @@
formClasses formClasses
]" ]"
:error="formError"> :error="formError">
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled && !multiple"
remote <el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
reserve-keyword @change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
:placeholder="placeholder" :disabled="disabled"
:multiple="multiple"
:readonly="readonly"
:collapse-tags="collapse"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading"
>
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty"> <p class="el-select-dropdown__empty">
{{ noMatchingDataText }} {{ noMatchingDataText }}
</p> </p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer"> <li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</li> </li>
@ -42,7 +45,7 @@
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</li> </li>
@ -55,383 +58,72 @@
</span> </span>
</template> </template>
<el-option v-if="!group" v-for="(label, value) in selectOptions" <el-option v-if="!group" v-for="(option, index) in sortOptions"
:key="value" :key="index"
:label="label" :label="option.value"
:value="value"> :value="option.key">
<span class="float-left">{{ label }}</span> <span class="float-left">{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span> <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
v-if="group" v-if="group"
v-for="(options, name) in selectOptions" v-for="(group_options, name) in sortOptions"
:key="name" :key="name"
:label="name"> :label="name">
<el-option <el-option
v-for="(label, value) in options" v-for="(label, value) in group_options"
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span> <span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span> <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new"> <el-option class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple" <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty"> <span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix"> <select :name="name" :id="name" v-model="selected" class="d-none">
<span class="el-input__suffix-inner el-select-icon"> <option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="disabled && multiple && !collapse" multiple disabled
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option>
</el-option-group>
<el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem">
<i class="fas fa-plus"></i>
<span>
{{ add_new_text }}
</span>
</div>
</el-option>
</el-select>
<component v-bind:is="add_new_html" @submit="onSubmit"></component>
<select :name="name" v-model="real_model" class="d-none">
<option v-for="(label, value) in selectOptions" :key="value" :value="value">{{ label }}</option>
</select> </select>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
</base-input> </base-input>
<span v-else> <span v-else>
<el-select <el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
:class="'pl-20 mr-40'" @change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
v-model="real_model" :disabled="disabled"
@input="change" :multiple="multiple"
filterable :readonly="readonly"
remote :collapse-tags="collapse"
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading"
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty"> >
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
</p>
</div>
<div v-else-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty"> <p class="el-select-dropdown__empty">
{{ noMatchingDataText }} {{ noMatchingDataText }}
</p> </p>
<ul class="el-scrollbar__view el-select-dropdown__list"> <ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item el-select__footer"> <li class="el-select-dropdown__item el-select__footer">
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</li> </li>
@ -447,7 +139,7 @@
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</li> </li>
@ -460,40 +152,47 @@
</span> </span>
</template> </template>
<el-option v-if="!group" v-for="option in selectOptions" <el-option v-if="!group" v-for="(option, index) in sortOptions"
:key="option.id" :key="index"
:label="option.name" :label="option.value"
:value="option.id"> :value="option.key">
<span class="float-left">{{ option.name }}</span> <span class="float-left">{{ option.value }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.id]">{{ new_text }}</span> <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
v-if="group" v-if="group"
v-for="(options, name) in selectOptions" v-for="(group_options, name) in sortOptions"
:key="name" :key="name"
:label="name"> :label="name">
<el-option <el-option
v-for="(label, value) in options" v-for="(label, value) in group_options"
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span> <span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span> <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
<el-option v-if="!loading && addNew.status && selectOptions != null && selectOptions.length != 0" class="el-select__footer" :disabled="true" :value="add_new"> <el-option class="el-select__footer" :disabled="true" :value="add_new">
<div @click="onAddItem"> <div @click="onAddItem">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<span> <span>
{{ add_new_text }} {{ addNew.text }}
</span> </span>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
<span class="badge badge-success badge-resize float-right mr-2" v-if="new_options[real_model]">{{ new_text }}</span> <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
<select :name="name" :id="name" v-model="selected" class="d-none">
<option v-for="option in sortOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
</select>
</span> </span>
</template> </template>
@ -535,42 +234,54 @@ export default {
default: null, default: null,
description: "Selectbox label text" description: "Selectbox label text"
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '', default: '',
description: "Selectbox input placeholder text" description: "Selectbox input placeholder text"
}, },
formClasses: { formClasses: {
type: Array, type: Array,
default: null, default: null,
description: "Selectbox input class name" description: "Selectbox input class name"
}, },
formError: { formError: {
type: String, type: String,
default: null, default: null,
description: "Selectbox input error message" description: "Selectbox input error message"
}, },
icon: {
type: String,
description: "Prepend icon (left)"
},
name: { name: {
type: String, type: String,
default: null, default: null,
description: "Selectbox attribute name" description: "Selectbox attribute name"
}, },
value: { value: {
type: [String, Number, Array], type: [String, Number, Array, Object],
default: '', default: '',
description: "Selectbox selected value" description: "Selectbox selected value"
}, },
options: null, options: null,
model: { option_sortable: {
type: [String, Number], type: String,
default: null, default: 'value',
description: "Selectbox selected model" description: "Option Sortable type (key|value)"
}, },
icon: { model: {
type: String, type: [String, Number, Array, Object],
description: "Prepend icon (left)" default: null,
description: "Selectbox selected model"
}, },
addNew: { addNew: {
@ -594,21 +305,25 @@ export default {
default: false, default: false,
description: "Selectbox option group status" description: "Selectbox option group status"
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Multible feature status" description: "Multible feature status"
}, },
readonly: { readonly: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Selectbox disabled status" description: "Selectbox disabled status"
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
description: "Selectbox disabled status" description: "Selectbox disabled status"
}, },
collapse: { collapse: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -620,11 +335,13 @@ export default {
default: 'Loading...', default: 'Loading...',
description: "Selectbox loading message" description: "Selectbox loading message"
}, },
noDataText: { noDataText: {
type: String, type: String,
default: 'No Data', default: 'No Data',
description: "Selectbox empty options message" description: "Selectbox empty options message"
}, },
noMatchingDataText: { noMatchingDataText: {
type: String, type: String,
default: 'No Matchign Data', default: 'No Matchign Data',
@ -650,56 +367,116 @@ export default {
data() { data() {
return { return {
list: [],
add_new: { add_new: {
text: this.addNew.text, text: this.addNew.text,
show: false, show: false,
path: this.addNew.path, path: this.addNew.path,
type: this.addNew.type, // modal, inline type: this.addNew.type, // modal, inline
field: this.addNew.field, field: this.addNew.field,
buttons: this.addNew.buttons buttons: this.addNew.buttons,
}, },
add_new_text: this.addNew.text,
new_text: this.addNew.new_text,
selectOptions: this.options,
real_model: this.model,
add_new_html: '', add_new_html: '',
form: {},
selected: this.model,
sort_options: [],
new_options: {},
loading: false, loading: false,
new_options: false,
} }
}, },
created() { created() {
this.new_options = {}; // Option set sort_option data
if (!Array.isArray(this.options)) {
for (const [key, value] of Object.entries(this.options)) {
this.sort_options.push({
key: key,
value: value
});
}
} else {
this.options.forEach(function (option, index) {
this.sort_options.push({
index: index,
key: option.id,
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
});
}, this);
}
},
computed: {
sortOptions() {
this.sort_options.sort(function (a, b) {
var nameA = a.value.toUpperCase(); // ignore upper and lowercase
var nameB = b.value.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
return this.sort_options;
},
}, },
mounted() { mounted() {
if (this.multiple) { // Check Here..
if (!this.value.length) { this.selected = this.value;
this.real_model = [];
if (this.model.length) {
if (eval(this.model) !== undefined) {
this.selected = eval(this.model);
} else { } else {
let pre_value = []; this.selected = this.model;
}
this.value.forEach(item => {
pre_value.push(item.toString());
});
this.real_model = pre_value;
} }
} else { if (this.multiple && !this.selected.length) {
this.real_model = this.value; this.selected = [];
} }
this.$emit('interface', this.real_model); this.$emit('interface', this.selected);
setTimeout(function() { setTimeout(function() {
//this.change(); for invoice item this.change();
}.bind(this), 800); }.bind(this), 800);
}, },
methods: { methods: {
change() {
this.$emit('interface', this.selected);
this.$emit('change', this.selected);
},
visibleChange(event) {
this.$emit('visible-change', event);
},
removeTag(event) {
this.$emit('remove-tag', event);
},
clear(event) {
this.$emit('clear', event);
},
blur(event) {
this.$emit('blur', event);
},
focus(event) {
this.$emit('focus', event);
},
remoteMethod(query) { remoteMethod(query) {
if (document.getElementById('form-select-' + this.name)) { if (document.getElementById('form-select-' + this.name)) {
document.getElementById('form-select-' + this.name).getElementsByTagName("input")[0].readOnly = false; document.getElementById('form-select-' + this.name).getElementsByTagName("input")[0].readOnly = false;
@ -745,38 +522,6 @@ export default {
} }
}, },
change() {
if (typeof(this.real_model) === 'object' && !Array.isArray(this.real_model)) {
return false;
}
if (Array.isArray(this.real_model) && !this.real_model.length) {
return false;
}
this.$emit('interface', this.real_model);
this.$emit('change', this.real_model);
if (Array.isArray(this.selectOptions)) {
this.selectOptions.forEach(item => {
if (item.id == this.real_model) {
this.$emit('label', item.name);
this.$emit('option', item);
return true;
}
});
}
},
onPressEnter() {
alert('Press Enter');
},
OnPressTab() {
alert('Press Tab');
},
async onAddItem() { async onAddItem() {
// Get Select Input value // Get Select Input value
if (this.title) { if (this.title) {
@ -785,11 +530,11 @@ export default {
var value = this.$children[0].$children[0].$refs.input.value; var value = this.$children[0].$children[0].$refs.input.value;
} }
if (this.add_new.type == 'inline') {
if (value === '') { if (value === '') {
return false; return false;
} }
if (this.add_new.type == 'inline') {
await this.addInline(value); await this.addInline(value);
} else { } else {
await this.onModal(value); await this.onModal(value);
@ -926,14 +671,18 @@ export default {
this.form.loading = false; this.form.loading = false;
if (response.data.success) { if (response.data.success) {
if (!Object.keys(this.options).length) { this.sort_options.push({
this.selectOptions = []; key: response.data.data[this.add_new.field.key].toString(),
} value: response.data.data[this.add_new.field.value],
});
this.selectOptions.push(response.data.data);
//this.selectOptions[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];
this.new_options[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value]; this.new_options[response.data.data[this.add_new.field.key]] = response.data.data[this.add_new.field.value];
this.real_model = response.data.data[this.add_new.field.key];//.toString();
if (this.multiple) {
this.selected.push(response.data.data[this.add_new.field.key].toString());
} else {
this.selected = response.data.data[this.add_new.field.key].toString();
}
this.add_new.show = false; this.add_new.show = false;
@ -972,68 +721,6 @@ export default {
}, },
}, },
watch: {
options: function (options) {
// update options
this.selectOptions = options;
if (Object.keys(this.new_options).length) {
if (!Object.keys(this.options).length) {
this.selectOptions = [];
}
Object.values(this.new_options).forEach(item => {
this.selectOptions.push(item);
});
}
},
real_model: function (value) {
if (this.multiple) {
return;
}
if (this.real_model != value) {
this.change();
}
let e = $.Event('keyup');
e.keyCode= 9; // tab
$('#' + this.name).trigger(e);
let event = new window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
window.dispatchEvent(event);
},
value: function (value) {
if (this.multiple) {
if (Array.isArray(this.real_model) && !this.real_model.length) {
this.real_model = value;
} else {
let pre_value = [];
value.forEach(item => {
pre_value.push(item.toString());
});
this.real_model = pre_value;
}
} else {
//this.real_model = value.toString();
this.real_model = value;
}
},
model: function (value) {
if (this.multiple) {
this.real_model = value;
} else {
this.real_model = value;
}
}
},
} }
</script> </script>
@ -1046,10 +733,6 @@ export default {
padding: 10px 0 0 !important; padding: 10px 0 0 !important;
} }
.el-select-dropdown__empty.loading {
padding: 10px 0 !important;
}
.el-select__footer { .el-select__footer {
text-align: center; text-align: center;
border-top: 1px solid #dee2e6; border-top: 1px solid #dee2e6;
@ -1085,4 +768,8 @@ export default {
margin-right: 35px; margin-right: 35px;
position: relative; position: relative;
} }
.badge.badge-pill.badge-success {
border-radius: 0.375rem;
}
</style> </style>