refs select and select remote re-factoring
This commit is contained in:
@ -269,7 +269,7 @@ export default {
|
||||
|
||||
created() {
|
||||
// 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)) {
|
||||
this.sort_options.push({
|
||||
key: key,
|
||||
@ -279,8 +279,9 @@ export default {
|
||||
} else {
|
||||
this.options.forEach(function (option, index) {
|
||||
this.sort_options.push({
|
||||
key: option,
|
||||
value: index
|
||||
index: index,
|
||||
key: option.id,
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
|
||||
});
|
||||
}, this);
|
||||
}
|
||||
@ -366,11 +367,11 @@ export default {
|
||||
var value = this.$children[0].$children[0].$refs.input.value;
|
||||
}
|
||||
|
||||
if (this.add_new.type == 'inline') {
|
||||
if (value === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.add_new.type == 'inline') {
|
||||
await this.addInline(value);
|
||||
} else {
|
||||
await this.onModal(value);
|
||||
@ -535,6 +536,10 @@ export default {
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__empty.loading {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
.el-select__footer {
|
||||
text-align: center;
|
||||
border-top: 1px solid #dee2e6;
|
||||
|
@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<base-input
|
||||
v-if="title"
|
||||
:label="title"
|
||||
:name="name"
|
||||
<base-input v-if="title" :label="title" :name="name"
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
@ -11,22 +8,28 @@
|
||||
formClasses
|
||||
]"
|
||||
:error="formError">
|
||||
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled && !multiple"
|
||||
remote
|
||||
reserve-keyword
|
||||
:placeholder="placeholder"
|
||||
|
||||
<el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
|
||||
@change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
:readonly="readonly"
|
||||
:collapse-tags="collapse"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
: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 }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@ -42,7 +45,7 @@
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
{{ add_new_text }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@ -55,383 +58,72 @@
|
||||
</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 v-if="!group" v-for="(option, index) in sortOptions"
|
||||
:key="index"
|
||||
:label="option.value"
|
||||
:value="option.key">
|
||||
<span class="float-left">{{ option.value }}</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-group
|
||||
v-if="group"
|
||||
v-for="(options, name) in selectOptions"
|
||||
v-for="(group_options, name) in sortOptions"
|
||||
:key="name"
|
||||
:label="name">
|
||||
<el-option
|
||||
v-for="(label, value) in options"
|
||||
v-for="(label, value) in group_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>
|
||||
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.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">
|
||||
<el-option class="el-select__footer" :disabled="true" :value="add_new">
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
{{ add_new_text }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !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>
|
||||
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
|
||||
|
||||
<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>
|
||||
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
|
||||
|
||||
<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 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 :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 slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
|
||||
</base-input>
|
||||
|
||||
<span v-else>
|
||||
<el-select
|
||||
:class="'pl-20 mr-40'"
|
||||
v-model="real_model"
|
||||
@input="change"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
:placeholder="placeholder"
|
||||
<el-select v-model="selected" :placeholder="placeholder" filterable remote reserve-keyword
|
||||
@change="change" @visible-change="visibleChange" @remove-tag="removeTag" @clear="clear" @blur="blur" @focus="focus"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
:readonly="readonly"
|
||||
:collapse-tags="collapse"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
|
||||
<p class="el-select-dropdown__empty loading">
|
||||
{{ loadingText }}
|
||||
</p>
|
||||
</div>
|
||||
:loading="loading"
|
||||
>
|
||||
|
||||
<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">
|
||||
{{ 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 }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@ -447,7 +139,7 @@
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
{{ add_new_text }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@ -460,40 +152,47 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<el-option v-if="!group" v-for="option in selectOptions"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id">
|
||||
<span class="float-left">{{ option.name }}</span>
|
||||
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.id]">{{ new_text }}</span>
|
||||
<el-option v-if="!group" v-for="(option, index) in sortOptions"
|
||||
:key="index"
|
||||
:label="option.value"
|
||||
:value="option.key">
|
||||
<span class="float-left">{{ option.value }}</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-group
|
||||
v-if="group"
|
||||
v-for="(options, name) in selectOptions"
|
||||
v-for="(group_options, name) in sortOptions"
|
||||
:key="name"
|
||||
:label="name">
|
||||
<el-option
|
||||
v-for="(label, value) in options"
|
||||
v-for="(label, value) in group_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>
|
||||
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ addNew.new_text }}</span>
|
||||
</el-option>
|
||||
</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">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
{{ add_new_text }}
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
</el-option>
|
||||
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -535,42 +234,54 @@ export default {
|
||||
default: null,
|
||||
description: "Selectbox label text"
|
||||
},
|
||||
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Selectbox input placeholder text"
|
||||
},
|
||||
|
||||
formClasses: {
|
||||
type: Array,
|
||||
default: null,
|
||||
description: "Selectbox input class name"
|
||||
},
|
||||
|
||||
formError: {
|
||||
type: String,
|
||||
default: null,
|
||||
description: "Selectbox input error message"
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
},
|
||||
|
||||
name: {
|
||||
type: String,
|
||||
default: null,
|
||||
description: "Selectbox attribute name"
|
||||
},
|
||||
|
||||
value: {
|
||||
type: [String, Number, Array],
|
||||
type: [String, Number, Array, Object],
|
||||
default: '',
|
||||
description: "Selectbox selected value"
|
||||
},
|
||||
|
||||
options: null,
|
||||
|
||||
model: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
description: "Selectbox selected model"
|
||||
option_sortable: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
description: "Option Sortable type (key|value)"
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
model: {
|
||||
type: [String, Number, Array, Object],
|
||||
default: null,
|
||||
description: "Selectbox selected model"
|
||||
},
|
||||
|
||||
addNew: {
|
||||
@ -594,21 +305,25 @@ export default {
|
||||
default: false,
|
||||
description: "Selectbox option group status"
|
||||
},
|
||||
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
description: "Multible feature status"
|
||||
},
|
||||
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
description: "Selectbox disabled status"
|
||||
},
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
description: "Selectbox disabled status"
|
||||
},
|
||||
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -620,11 +335,13 @@ export default {
|
||||
default: 'Loading...',
|
||||
description: "Selectbox loading message"
|
||||
},
|
||||
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: 'No Data',
|
||||
description: "Selectbox empty options message"
|
||||
},
|
||||
|
||||
noMatchingDataText: {
|
||||
type: String,
|
||||
default: 'No Matchign Data',
|
||||
@ -650,56 +367,116 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
add_new: {
|
||||
text: this.addNew.text,
|
||||
show: false,
|
||||
path: this.addNew.path,
|
||||
type: this.addNew.type, // modal, inline
|
||||
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: '',
|
||||
form: {},
|
||||
|
||||
selected: this.model,
|
||||
|
||||
sort_options: [],
|
||||
new_options: {},
|
||||
loading: false,
|
||||
new_options: false,
|
||||
}
|
||||
},
|
||||
|
||||
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() {
|
||||
if (this.multiple) {
|
||||
if (!this.value.length) {
|
||||
this.real_model = [];
|
||||
// Check Here..
|
||||
this.selected = this.value;
|
||||
|
||||
if (this.model.length) {
|
||||
if (eval(this.model) !== undefined) {
|
||||
this.selected = eval(this.model);
|
||||
} else {
|
||||
let pre_value = [];
|
||||
|
||||
this.value.forEach(item => {
|
||||
pre_value.push(item.toString());
|
||||
});
|
||||
|
||||
this.real_model = pre_value;
|
||||
this.selected = this.model;
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
this.real_model = this.value;
|
||||
if (this.multiple && !this.selected.length) {
|
||||
this.selected = [];
|
||||
}
|
||||
|
||||
this.$emit('interface', this.real_model);
|
||||
this.$emit('interface', this.selected);
|
||||
|
||||
setTimeout(function() {
|
||||
//this.change(); for invoice item
|
||||
this.change();
|
||||
}.bind(this), 800);
|
||||
},
|
||||
|
||||
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) {
|
||||
if (document.getElementById('form-select-' + this.name)) {
|
||||
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() {
|
||||
// Get Select Input value
|
||||
if (this.title) {
|
||||
@ -785,11 +530,11 @@ export default {
|
||||
var value = this.$children[0].$children[0].$refs.input.value;
|
||||
}
|
||||
|
||||
if (this.add_new.type == 'inline') {
|
||||
if (value === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.add_new.type == 'inline') {
|
||||
await this.addInline(value);
|
||||
} else {
|
||||
await this.onModal(value);
|
||||
@ -926,14 +671,18 @@ export default {
|
||||
this.form.loading = false;
|
||||
|
||||
if (response.data.success) {
|
||||
if (!Object.keys(this.options).length) {
|
||||
this.selectOptions = [];
|
||||
}
|
||||
this.sort_options.push({
|
||||
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.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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1046,10 +733,6 @@ export default {
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__empty.loading {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
.el-select__footer {
|
||||
text-align: center;
|
||||
border-top: 1px solid #dee2e6;
|
||||
@ -1085,4 +768,8 @@ export default {
|
||||
margin-right: 35px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge.badge-pill.badge-success {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user