Состоит из 2 частей:
ModalSettings.vue
<template>
<ModalTemplate :modalInfo="modalInfo" :settings="settings" @update="update"></ModalTemplate>
</template>
<script>
import { fields } from "./_settings.js"
import _ from "lodash"
import ModalTemplate from "~/components/Templates/Modals/ModalSettingsTemplate.vue"
import { mapState } from "vuex"
export default {
data() {
return {
modalInfo: {
name: "modalSettings", // должна быть соответствующая кнопка с data-target="#modalSettings"
title: "Настройка раздела Входящие",
text: ""
},
fields
}
},
computed: {
...mapState({
settings: function(state) {
let res = _.map(this.fields, field => {
field["value"] = state.iJobs[field.name]
return field
})
return res
}
})
},
methods: {
update: function(newValue) {
_.forEach(newValue, field => {
this.$store.commit(field.mutation, field.value)
})
}
},
components: {
ModalTemplate
}
}
</script>
ModalSettingsTemplate.vue
<template>
<div class="modal fade" :id="modalInfo.name" tabindex="-1" role="dialog" :aria-labelledby="modalInfo.name" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ modalInfo.title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" v-if="modalInfo.text !== ''">
{{ modalInfo.text }}
</div>
<div class="modal-body">
<div class="form-group row" v-for="field in settings" :key="field.name">
<label class="col-sm-4 col-form-label">{{ field.title }}</label>
<div class="col-sm-8">
<input type="text" class="form-control" v-model.lazy.number="field.value">
<small class="form-text text-muted">{{ field.help }}</small>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary" @click="updateSettings">Сохранить</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
modalInfo: Object,
settings: Array
},
methods: {
updateSettings: function() {
this.$emit("update", this.settings)
$("#" + this.modalInfo.name).modal("hide")
}
}
}
</script>