107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="side-panel">
|
|||
|
|
<div class="side-panel-header">
|
|||
|
|
<h6>
|
|||
|
|
انتخاب ستونها در حالت نمایش فهرستی(جدولی)
|
|||
|
|
</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="side-panel-content">
|
|||
|
|
<form @submit.prevent="saveColumn">
|
|||
|
|
<div class="row form-group">
|
|||
|
|
<label for="key" class="col-md-3">کلیدواژه: </label>
|
|||
|
|
<select
|
|||
|
|
class="form-control col-md-9"
|
|||
|
|
placeholder="کلیدواژه"
|
|||
|
|
type="key"
|
|||
|
|
id="key"
|
|||
|
|
name="key"
|
|||
|
|
v-model="localFormElement.key"
|
|||
|
|
>
|
|||
|
|
<option
|
|||
|
|
v-for="option in selectedForm.flatedItems"
|
|||
|
|
:value="option.key"
|
|||
|
|
>{{ option.label }}({{ option.key }})</option
|
|||
|
|
>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="row form-group">
|
|||
|
|
<label for="title" class="col-md-3">عنوان: </label>
|
|||
|
|
<input
|
|||
|
|
class="form-control col-md-9"
|
|||
|
|
placeholder="عنوان"
|
|||
|
|
type="title"
|
|||
|
|
id="title"
|
|||
|
|
name="title"
|
|||
|
|
v-model="localFormElement.title"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="row form-group">
|
|||
|
|
<label for="width" class="col-md-3">وزن: </label>
|
|||
|
|
<input
|
|||
|
|
class="form-control col-md-9"
|
|||
|
|
placeholder="وزن"
|
|||
|
|
type="width"
|
|||
|
|
id="width"
|
|||
|
|
name="width"
|
|||
|
|
v-model="localFormElement.width"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="row form-group">
|
|||
|
|
<div class="d-flex justify-content-between">
|
|||
|
|
<button-component
|
|||
|
|
classes="btn btn-primary d-inline-flex btn-default"
|
|||
|
|
buttonText="افزودن"
|
|||
|
|
type="submit"
|
|||
|
|
>
|
|||
|
|
</button-component>
|
|||
|
|
<button-component
|
|||
|
|
classes="d-inline-flex btn-danger"
|
|||
|
|
@click="closeFormShow"
|
|||
|
|
buttonText="بستن"
|
|||
|
|
>
|
|||
|
|
<!-- <span class="tavasi tavasi-Component-71--1"></span> -->
|
|||
|
|
</button-component>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: ["selectedItem", "selectedForm"],
|
|||
|
|
emits: ["close-form-show", "update-column"],
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
displayMode:'table',
|
|||
|
|
localFormElement: {
|
|||
|
|
title: null,
|
|||
|
|
key: null,
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.localFormElement = structuredClone(this.selectedItem);
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
selectedItem(newval) {
|
|||
|
|
this.localFormElement = structuredClone(newval);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
closeFormShow() {
|
|||
|
|
this.$emit("close-form-show");
|
|||
|
|
},
|
|||
|
|
saveColumn() {
|
|||
|
|
const clonedLocalFormElement = structuredClone(this.localFormElement);
|
|||
|
|
this.$emit("update-column", clonedLocalFormElement);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|