refs #1075
This commit is contained in:
Cüneyt Şentürk
@ -6,9 +6,16 @@
|
||||
|
||||
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
|
||||
:placeholder="placeholder">
|
||||
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
|
||||
<div v-if="addNew.status && selectOptions.lenght > 0" class="el-select-dropdown__wrap" slot="empty">
|
||||
<span></span>
|
||||
</div>
|
||||
<div v-if="selectOptions.lenght <= 0" class="el-select-dropdown__wrap" slot="empty">
|
||||
<span>
|
||||
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<span>{{ add_new_text }}</span>
|
||||
</li>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<template slot="prefix">
|
||||
<span class="el-input__suffix-inner el-select-icon">
|
||||
@ -35,14 +42,14 @@
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<li v-if="addNew" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<span>{{ add_new_text }}</span>
|
||||
</li>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
|
||||
:placeholder="placeholder">
|
||||
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
|
||||
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
@ -71,14 +78,14 @@
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<li v-if="addNew" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<span>{{ add_new_text }}</span>
|
||||
</li>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
|
||||
:placeholder="placeholder">
|
||||
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
|
||||
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
@ -107,14 +114,14 @@
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<li v-if="addNew" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<span>{{ add_new_text }}</span>
|
||||
</li>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
|
||||
:placeholder="placeholder">
|
||||
<div v-if="addNew" class="el-select-dropdown__wrap" slot="empty">
|
||||
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
@ -143,16 +150,26 @@
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<li v-if="addNew" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
|
||||
<span>{{ add_new_text }}</span>
|
||||
</li>
|
||||
</el-select>
|
||||
|
||||
<component v-bind:is="add_new_html" @interface="onRedirectConfirm"></component>
|
||||
</base-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select, Option, OptionGroup } from 'element-ui';
|
||||
|
||||
import AkauntingModal from './AkauntingModal';
|
||||
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
|
||||
import AkauntingSelect from './AkauntingSelect';
|
||||
import AkauntingDate from './AkauntingDate';
|
||||
import AkauntingRecurring from './AkauntingRecurring';
|
||||
|
||||
import Form from './../plugins/form';
|
||||
|
||||
export default {
|
||||
name: "akaunting-select",
|
||||
|
||||
@ -183,9 +200,21 @@ export default {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
},
|
||||
addNew: false,
|
||||
addNewText: null,
|
||||
addNewPath: null,
|
||||
|
||||
addNew: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
text: 'Add New Item',
|
||||
status: false,
|
||||
path: null,
|
||||
type: 'modal', // modal, inline
|
||||
field: 'name'
|
||||
};
|
||||
},
|
||||
description: "Selectbox Add New Item Feature"
|
||||
},
|
||||
|
||||
group: false,
|
||||
multiple:false,
|
||||
disabled:false,
|
||||
@ -194,9 +223,10 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
add_new_text: this.addNewText,
|
||||
add_new_text: this.addNew.text,
|
||||
selectOptions: this.options,
|
||||
real_model: this.model,
|
||||
add_new_html: '',
|
||||
}
|
||||
},
|
||||
|
||||
@ -208,6 +238,8 @@ export default {
|
||||
|
||||
methods: {
|
||||
change() {
|
||||
alert('Helooo');
|
||||
|
||||
this.$emit('change', this.real_model);
|
||||
this.$emit('interface', this.real_model);
|
||||
},
|
||||
@ -216,12 +248,119 @@ export default {
|
||||
// Get Select Input value
|
||||
var value = this.$children[0].$children[0].$children[0].$refs.input.value;
|
||||
|
||||
if (this.addNew.type == 'inline') {
|
||||
this.addInline(value);
|
||||
} else {
|
||||
this.onModal(value);
|
||||
}
|
||||
/*
|
||||
this.$emit('new_item', {
|
||||
value: value,
|
||||
path: this.addNewPath,
|
||||
title: this.addNewText,
|
||||
path: this.addNew.path,
|
||||
title: this.addNew.text,
|
||||
});
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
addInline(value) {
|
||||
|
||||
},
|
||||
|
||||
onModal(value) {
|
||||
let add_new = this.addNew;
|
||||
|
||||
axios.get(this.addNew.path)
|
||||
.then(response => {
|
||||
add_new.modal = true;
|
||||
add_new.html = response.data.html;
|
||||
|
||||
this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
|
||||
resolve({
|
||||
template: '<div><akaunting-modal :show="addNew.modal" @cancel="addNew.modal = false" :title="addNew.text" :message="addNew.html">' +
|
||||
+ '<template #card-footer>'
|
||||
+ '<div class="float-right">'
|
||||
+ '<button type="button" class="btn btn-outline-secondary">'
|
||||
+ '<span>Cancel</span>'
|
||||
+ '</button>'
|
||||
+ '<button type="button" class="btn btn-success button-submit">'
|
||||
+ '<div class="aka-loader d-none"></div>'
|
||||
+ '<span>Confirm</span>'
|
||||
+ '</button>'
|
||||
+ '</div>'
|
||||
+ '</template>'
|
||||
+ '</akaunting-modal></div>',
|
||||
|
||||
components: {
|
||||
AkauntingRadioGroup,
|
||||
AkauntingSelect,
|
||||
AkauntingModal,
|
||||
AkauntingDate,
|
||||
AkauntingRecurring,
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
form: new Form('form-create-category'),
|
||||
addNew: add_new,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRedirectConfirm() {
|
||||
let redirect_form = new Form('redirect-form');
|
||||
|
||||
this.$emit('interface', redirect_form);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
/*
|
||||
this.selectOptions[3] = value;
|
||||
|
||||
let newOption = {
|
||||
value: "3",
|
||||
currentLabel: value,
|
||||
label: value
|
||||
};
|
||||
|
||||
this.$children[0].$children[0].handleOptionSelect(newOption);
|
||||
this.$children[0].$children[0].onInputChange('3');
|
||||
|
||||
this.real_model = "3";
|
||||
|
||||
this.$emit('change', this.real_model);
|
||||
*/
|
||||
})
|
||||
.catch(e => {
|
||||
this.errors.push(e);
|
||||
})
|
||||
.finally(function () {
|
||||
// always executed
|
||||
});
|
||||
},
|
||||
|
||||
onRedirectConfirm() {
|
||||
this.redirectForm = new Form('redirect-form');
|
||||
|
||||
axios.post(this.redirectForm.action, this.redirectForm.data())
|
||||
.then(response => {
|
||||
if (response.data.redirect) {
|
||||
location = response.data.redirect;
|
||||
}
|
||||
|
||||
if (response.data.success) {
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.method_show_html = error.message;
|
||||
});
|
||||
},
|
||||
|
||||
addModal() {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
Reference in New Issue
Block a user