824 lines
29 KiB
Vue
824 lines
29 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="mt-3 text__15 text__green" v-if="description">
|
||
|
|
<span>{{ description }} </span>
|
||
|
|
</div>
|
||
|
|
<!-- tab/grouped mode -->
|
||
|
|
<template v-if="Array.isArray(localFormElements)">
|
||
|
|
<!-- start:horizontal mode -->
|
||
|
|
<template v-if="displayMode == 'horizontal'">
|
||
|
|
<div class="horizontal">
|
||
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||
|
|
<li
|
||
|
|
v-for="(groupItem, index) in localFormElements"
|
||
|
|
:key="'groupItem' + index"
|
||
|
|
@click="setTab(index)"
|
||
|
|
class="nav-item"
|
||
|
|
role="presentation"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
class="nav-link position-relative"
|
||
|
|
id="home-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
:href="'#' + groupItem.key"
|
||
|
|
role="tab"
|
||
|
|
:aria-controls="groupItem.key"
|
||
|
|
aria-selected="true"
|
||
|
|
:class="{ active: groupItem?.active ?? false }"
|
||
|
|
>{{ groupItem.title }}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tab-content" id="myTabContent">
|
||
|
|
<div
|
||
|
|
class="tab-pane fade show active p-3"
|
||
|
|
id="home"
|
||
|
|
role="tabpanel"
|
||
|
|
aria-labelledby="home-tab"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-if="localFormElements[currentTab]?.hasChildren"
|
||
|
|
class="accordion"
|
||
|
|
id="accordionExample"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(innerGroupItem, j) in localFormElements[currentTab]
|
||
|
|
?.items"
|
||
|
|
:key="'innerGroupItem' + j"
|
||
|
|
class="card"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="card-header"
|
||
|
|
:id="'heading' + j"
|
||
|
|
style="height: 3rem"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="d-flex justify-content-between"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
aria-expanded="false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
>
|
||
|
|
<p style="font-size: 12px; color: black">
|
||
|
|
{{ innerGroupItem.title }}
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
class="btn btn-link btn-block text-end collapsed button-meno"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
aria-expanded="false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
>
|
||
|
|
<span class="tavasi tavasi-Component-358--1"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card-header" :id="'heading' + j">
|
||
|
|
<h2 class="mb-0">
|
||
|
|
<button
|
||
|
|
class="btn btn-link btn-block"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
:aria-expanded="innerGroupItem.active ?? false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
:class="{ active: innerGroupItem.active ?? false }"
|
||
|
|
>
|
||
|
|
{{ innerGroupItem.title }}
|
||
|
|
</button>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:id="'collapse' + j"
|
||
|
|
class="collapse"
|
||
|
|
:class="{ show: innerGroupItem.active ?? false }"
|
||
|
|
:aria-labelledby="'heading' + j"
|
||
|
|
data-parent="#accordionExample"
|
||
|
|
>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="position-relative ms-5">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div :key="'body'+j" class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index1) in localFormElements[
|
||
|
|
currentTab
|
||
|
|
]?.items[j]?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="updateComponentOption($event, formElement)"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="'element' + currentTab + '_' + j + '_' + index1"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="position-relative ms-5">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index1) in localFormElements[
|
||
|
|
currentTab
|
||
|
|
]?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="
|
||
|
|
updateComponentOption($event, formElement)
|
||
|
|
"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="'element' + currentTab + '_' + index1"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<!-- end:horizontal mode -->
|
||
|
|
|
||
|
|
<!-- start:vertical mode -->
|
||
|
|
<div class="row vertical" v-else-if="displayMode == 'vertical'">
|
||
|
|
<div class="col-3">
|
||
|
|
<div
|
||
|
|
class="nav flex-column nav-pills"
|
||
|
|
id="v-pills-tab"
|
||
|
|
role="tablist"
|
||
|
|
aria-orientation="vertical"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
v-for="(groupItem, index) in localFormElements"
|
||
|
|
:key="'groupItem'+index"
|
||
|
|
@click="setTab(index)"
|
||
|
|
class="nav-link"
|
||
|
|
id="v-pills-home-tab"
|
||
|
|
data-bs-toggle="pill"
|
||
|
|
href="#v-pills-home"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="v-pills-home"
|
||
|
|
:aria-selected="currentTab == index"
|
||
|
|
:class="{ active: currentTab == index }"
|
||
|
|
>{{ groupItem.title }}</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-9">
|
||
|
|
<div class="tab-content" id="myTabContent">
|
||
|
|
<div
|
||
|
|
class="tab-pane fade show active"
|
||
|
|
id="home"
|
||
|
|
role="tabpanel"
|
||
|
|
aria-labelledby="home-tab"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-if="localFormElements[currentTab]?.hasChildren"
|
||
|
|
class="accordion"
|
||
|
|
id="accordionExample"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
v-for="(innerGroupItem, j) in localFormElements[currentTab]
|
||
|
|
?.items"
|
||
|
|
:key="'innerGroupItem' + currentTab + '_' + j"
|
||
|
|
class="card"
|
||
|
|
>
|
||
|
|
<div class="card-header" :id="'heading' + j">
|
||
|
|
<h2 class="mb-0">
|
||
|
|
<button
|
||
|
|
class="btn btn-link btn-block"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
:aria-expanded="innerGroupItem.active ?? false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
:class="{ active: innerGroupItem.active ?? false }"
|
||
|
|
>
|
||
|
|
{{ innerGroupItem.title }}
|
||
|
|
</button>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:id="'collapse' + j"
|
||
|
|
class="collapse"
|
||
|
|
:class="{ show: innerGroupItem.active ?? false }"
|
||
|
|
:aria-labelledby="'heading' + j"
|
||
|
|
data-parent="#accordionExample"
|
||
|
|
>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="position-relative ms-5">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index) in localFormElements[
|
||
|
|
currentTab
|
||
|
|
]?.items[j]?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="
|
||
|
|
updateComponentOption($event, formElement)
|
||
|
|
"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="index"
|
||
|
|
:formElement="
|
||
|
|
addValueToFormElement(formElement)
|
||
|
|
"
|
||
|
|
:is="
|
||
|
|
returnComponentNameDefault(formElement.type)
|
||
|
|
"
|
||
|
|
@take-value="
|
||
|
|
takeValueChanged($event, formElement)
|
||
|
|
"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="position-relative ms-5">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index1) in localFormElements[
|
||
|
|
currentTab
|
||
|
|
]?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="
|
||
|
|
updateComponentOption($event, formElement)
|
||
|
|
"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="'element' + currentTab + '_' + index1"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end:vertical mode -->
|
||
|
|
<template v-else-if="displayMode == 'accordion'">
|
||
|
|
<div class="accordion" id="accordionExample">
|
||
|
|
<div
|
||
|
|
v-for="(innerGroupItem, j) in localFormElements"
|
||
|
|
:key="'innerGroupItem'+ j"
|
||
|
|
class="card my-card"
|
||
|
|
>
|
||
|
|
<div class="card-header" :id="'heading' + j">
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="d-flex justify-content-between align-items-center"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
aria-expanded="false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
>
|
||
|
|
<h6 style="color: black">
|
||
|
|
{{ innerGroupItem.title }}
|
||
|
|
</h6>
|
||
|
|
<button
|
||
|
|
class="btn btn-link btn-block text-end collapsed button-meno"
|
||
|
|
type="button"
|
||
|
|
data-bs-toggle="collapse"
|
||
|
|
:data-bs-target="'#collapse' + j"
|
||
|
|
aria-expanded="false"
|
||
|
|
:aria-controls="'collapse' + j"
|
||
|
|
></button>
|
||
|
|
<span class="tavasi tavasi-Component-358--1"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:id="'collapse' + j"
|
||
|
|
class="collapse"
|
||
|
|
:class="{ show: innerGroupItem.active ?? false }"
|
||
|
|
:aria-labelledby="'heading' + j"
|
||
|
|
data-parent="#accordionExample"
|
||
|
|
>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="position-relative">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index1) in localFormElements[j]
|
||
|
|
?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="
|
||
|
|
updateComponentOption($event, formElement)
|
||
|
|
"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="'element' + j + '_' + index1"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="displayMode == 'default'">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index) in localFormElements"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="
|
||
|
|
updateComponentOption($event, formElement)
|
||
|
|
"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="index + formElement.key + render"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type, formElement)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@take-value-validate="$emit('take-value-validate', $event)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass(formElement.type, formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="giveColClass('label', formElement)"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- public mode -->
|
||
|
|
<div v-else class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
v-for="(formElement, index) in localFormElements[currentTab]?.items[j]
|
||
|
|
?.items"
|
||
|
|
:class="formElement.colClass ?? 'col-12'"
|
||
|
|
>
|
||
|
|
<component
|
||
|
|
:otherData="otherData"
|
||
|
|
@updateComponentOption="updateComponentOption($event, formElement)"
|
||
|
|
v-for="(formElement, index1) in localFormElements"
|
||
|
|
:ref="refKeyBase + '_' + formElement.key"
|
||
|
|
:key="'element' + currentTab + '_' + j + '_' + index1"
|
||
|
|
:formElement="addValueToFormElement(formElement)"
|
||
|
|
:is="returnComponentNameDefault(formElement.type)"
|
||
|
|
@take-value-validate="$emit('take-value-validate', $event)"
|
||
|
|
@take-value="takeValueChanged($event, formElement)"
|
||
|
|
@action-affected-item="actionAffectedItem($event, formElement)"
|
||
|
|
@keydown="$emit('keydown', $event)"
|
||
|
|
:class="giveColClass('', formElement)"
|
||
|
|
:inputClass="giveColClass('input', formElement)"
|
||
|
|
:labelClass="'col-12'"
|
||
|
|
class="inside-entity align-items-center"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import HttpService from "@services/httpService";
|
||
|
|
import { cloneDeep } from "lodash";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
refKeyBase: {
|
||
|
|
default: "formbuilder",
|
||
|
|
},
|
||
|
|
displayMode: {
|
||
|
|
default: "horizontal",
|
||
|
|
},
|
||
|
|
readOnly: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
formElements: {
|
||
|
|
default() {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
description: {
|
||
|
|
default() {
|
||
|
|
return "";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
otherData: {
|
||
|
|
default() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
previewMode: {
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
beforeMount() {
|
||
|
|
// this.httpService = new HttpService();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.localFormElements = this.formElements
|
||
|
|
? cloneDeep(this.formElements)
|
||
|
|
: {};
|
||
|
|
this.localFormData = this.formData ? cloneDeep(this.formData) : {};
|
||
|
|
this.render++;
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
formElements: {
|
||
|
|
handler: function (newValue) {
|
||
|
|
this.localFormElements = newValue ? cloneDeep(newValue) : [];
|
||
|
|
},
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
},
|
||
|
|
formData: {
|
||
|
|
handler: function (newValue) {
|
||
|
|
this.localFormData = newValue ? cloneDeep(newValue) : {};
|
||
|
|
},
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// httpService: undefined,
|
||
|
|
render: 100,
|
||
|
|
|
||
|
|
currentTab: 0,
|
||
|
|
prevActiveTabIndex: undefined,
|
||
|
|
|
||
|
|
localFormElements: [],
|
||
|
|
localFormData: {},
|
||
|
|
activeRequest: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
buttonText() {
|
||
|
|
return this.localFormData?.id || this.localFormData?.guid
|
||
|
|
? "بروزرسانی"
|
||
|
|
: "افزودن";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setTab(index) {
|
||
|
|
if (this.prevActiveTabIndex != undefined)
|
||
|
|
this.localFormElements[this.prevActiveTabIndex].active = false;
|
||
|
|
|
||
|
|
this.prevActiveTabIndex = this.currentTab = index;
|
||
|
|
},
|
||
|
|
|
||
|
|
// //برای مثل استان و شهر
|
||
|
|
// updateComponentOption(schema, filter = "") {
|
||
|
|
// console.info("updateComponentOption");
|
||
|
|
// console.log(schema, filter);
|
||
|
|
|
||
|
|
// let refkey = this.refKeyBase + "_" + schema.key;
|
||
|
|
// if (refkey in this.$refs)
|
||
|
|
// this.$refs[refkey][0].setOptions(schema, filter);
|
||
|
|
// },
|
||
|
|
|
||
|
|
findItemSchema(key, items = undefined) {
|
||
|
|
if (!items) items = this.localFormElements;
|
||
|
|
|
||
|
|
// console.log(key)
|
||
|
|
// console.log(items)
|
||
|
|
|
||
|
|
let finded = undefined;
|
||
|
|
for (let i = 0; i < items.length; i++) {
|
||
|
|
if (items[i]?.key == key) return items[i];
|
||
|
|
else if (items[i].items) {
|
||
|
|
finded = this.findItemSchema(key, items[i].items);
|
||
|
|
if (finded) return finded;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return finded;
|
||
|
|
},
|
||
|
|
|
||
|
|
addValueToFormElement(elements) {
|
||
|
|
Object.keys(elements).forEach((key, index) => {
|
||
|
|
if (key == "key") {
|
||
|
|
if (this.localFormData && this.localFormData[elements[key]]) {
|
||
|
|
elements["value"] = this.localFormData[elements[key]];
|
||
|
|
} else {
|
||
|
|
elements["value"] = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return elements;
|
||
|
|
},
|
||
|
|
|
||
|
|
// returnComponentName(type) {
|
||
|
|
// // if (this.readOnly) return "LabelComponent";
|
||
|
|
|
||
|
|
// if (type == "textarea") return "TextareaComponent";
|
||
|
|
// else if (type == "select") return "SelectComponent";
|
||
|
|
// else if (type == "sound") return "AudioComponent";
|
||
|
|
// else if (type == "video") return "VideoComponent";
|
||
|
|
// else if (type == "img") return "ImageComponent";
|
||
|
|
// else if (type == "label") return "LabelComponent";
|
||
|
|
// else if (type == "switch") return "SwitchComponent";
|
||
|
|
// else if (type == "htmleditor") return "HtmlEditor";
|
||
|
|
// else if (type == "date") return "DateComponent";
|
||
|
|
// else if (type == "range_date") return "RangeDateComponent";
|
||
|
|
// else if (type == "checkbox" || type == "radio")
|
||
|
|
// return "CheckboxComponent";
|
||
|
|
// else return "InputComponent";
|
||
|
|
// },
|
||
|
|
returnComponentNameDefault(type, item) {
|
||
|
|
if (this.readOnly) return "LabelComponentForTerm";
|
||
|
|
|
||
|
|
if (type == "textarea") return "TextareaComponentDefault";
|
||
|
|
else if (type == "select") return "SelectComponentDefault";
|
||
|
|
else if (type == "string") return "InputComponentDefault";
|
||
|
|
else if (type == "label") return "LabelComponentForTerm";
|
||
|
|
else if (type == "labelTags") return "LabelTagsComponent";
|
||
|
|
else if (type == "htmleditor") return "HtmlEditor";
|
||
|
|
else if (type == "date") return "DateComponent";
|
||
|
|
else if (type == "range_date") return "RangeDateComponent";
|
||
|
|
// else if (type == "label" && item?.key == "text_main")
|
||
|
|
// return "LabelComponentDefault";
|
||
|
|
// else if (type == "label" && item?.key == "address")
|
||
|
|
// return "LabelComponentAddress";
|
||
|
|
// else if (type == "label" && item?.key !== "text_main")
|
||
|
|
// return "LabelComponentDefaultText";
|
||
|
|
// else return "InputComponent";
|
||
|
|
},
|
||
|
|
|
||
|
|
actionAffectedItem({ action, key, value}, schemaItem){
|
||
|
|
// console.log("actionAffectedItem", $event)
|
||
|
|
this.$emit("action-affected", { action, key, value});
|
||
|
|
},
|
||
|
|
takeValueChanged(value, schemaItem) {
|
||
|
|
let key = schemaItem.key
|
||
|
|
this.localFormData[key] = value ?? null;
|
||
|
|
|
||
|
|
let data = this.localFormData;
|
||
|
|
// console.log('changeFormValues', key, value , data)
|
||
|
|
// console.log('changeFormValues', key, value , data)
|
||
|
|
this.$emit("changeFormValues", data);
|
||
|
|
},
|
||
|
|
|
||
|
|
updateValueFormData(key, value) {
|
||
|
|
// console.log('updateValueFormData', key, value)
|
||
|
|
// console.log('updateValueFormData', key, this.localFormData.value)
|
||
|
|
|
||
|
|
let refkey = this.refKeyBase + '_' + key
|
||
|
|
if(this.$refs[refkey]){
|
||
|
|
// console.log('refkey', refkey, value)
|
||
|
|
// this.$refs[refkey][0].incrementRenderKey()
|
||
|
|
this.$refs[refkey][0].initTextValue(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$set(this.localFormData, key, value);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
////////از پایین فراخوانی نداشت و کامنت شد و اینجاهم کامنت کردم
|
||
|
|
//فقط برای select
|
||
|
|
// takeSelectObjectChanged(object, { key }) {
|
||
|
|
// console.log(object)
|
||
|
|
// console.log(key)
|
||
|
|
|
||
|
|
// if (object?.type == "select") {
|
||
|
|
// this.localFormData[key] = object?.objectValue?.value;
|
||
|
|
// // console.log(object)
|
||
|
|
// this.$emit("changeFormeObject", {
|
||
|
|
// type: object?.type,
|
||
|
|
// objectValue: object?.objectValue?.value,
|
||
|
|
// objectText: object?.objectValue?.text,
|
||
|
|
// key: key,
|
||
|
|
// });
|
||
|
|
// } else {
|
||
|
|
// }
|
||
|
|
|
||
|
|
// let data = this.localFormData;
|
||
|
|
// console.log('takeSelectObjectChanged',data)
|
||
|
|
// this.$emit("changeFormValues", data);
|
||
|
|
// },
|
||
|
|
|
||
|
|
|
||
|
|
giveColClass(type, item) {
|
||
|
|
if (item.classes) {
|
||
|
|
if (type == "") return item.classes;
|
||
|
|
if (type == "label") {
|
||
|
|
return "col-auto"; //item.classes == "col-12" ? "col-12" : "col-auto";
|
||
|
|
}
|
||
|
|
if (type == "input" || type == "string")
|
||
|
|
return item.inputClass ? item.inputClass : item.classes;
|
||
|
|
if (type == "textarea")
|
||
|
|
return item.inputClass ? item.inputClass : item.classes;
|
||
|
|
}
|
||
|
|
return "col-12";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
DateComponent: () => import("@components/forms/DateComponent.vue"),
|
||
|
|
RangeDateComponent: () =>
|
||
|
|
import("@components/forms/RangeDateComponent.vue"),
|
||
|
|
// InputComponent: () => import("@components/forms/InputComponent.vue"),
|
||
|
|
// TextareaComponent: () => import("@components/forms/TextareaComponent.vue"),
|
||
|
|
// SelectComponent: () => import("@components/forms/SelectComponent.vue"),
|
||
|
|
AudioComponent: () => import("@components/forms/AudioComponent.vue"),
|
||
|
|
VideoComponent: () => import("@components/forms/VideoComponent.vue"),
|
||
|
|
ImageComponent: () => import("@components/forms/ImageComponent.vue"),
|
||
|
|
LabelComponent: () => import("@components/forms/LabelComponent.vue"),
|
||
|
|
CheckboxComponent: () => import("@components/forms/CheckboxComponent.vue"),
|
||
|
|
SwitchComponent: () => import("@components/forms/SwitchComponent.vue"),
|
||
|
|
InputComponentDefault: () =>
|
||
|
|
import("@components/forms/InputComponentDefault.vue"),
|
||
|
|
TextareaComponentDefault: () =>
|
||
|
|
import("@components/forms/TextareaComponentDefault.vue"),
|
||
|
|
SelectComponentDefault: () =>
|
||
|
|
import("@components/forms/SelectComponentDefault.vue"),
|
||
|
|
LabelComponentDefault: () =>
|
||
|
|
import("@components/forms/LabelComponentDefault.vue"),
|
||
|
|
LabelComponentForTerm: () =>
|
||
|
|
import("@components/forms/LabelComponentForTerm.vue"),
|
||
|
|
LabelComponentAddress: () =>
|
||
|
|
import("@components/forms/LabelComponentAddress.vue"),
|
||
|
|
LabelComponentDefaultText: () =>
|
||
|
|
import("@components/forms/LabelComponentDefaultText.vue"),
|
||
|
|
HtmlEditor: () => import("@components/forms/HtmlEditor.vue"),
|
||
|
|
LabelTagsComponent: () =>
|
||
|
|
import("@components/forms/LabelTagsComponent.vue"),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.my-card {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-control {
|
||
|
|
&.error {
|
||
|
|
border: 1px solid red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
&.inside-entity {
|
||
|
|
.form-control {
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
border: 2px solid rgb(127, 170, 170);
|
||
|
|
font-size: 14px;
|
||
|
|
height: 3em;
|
||
|
|
&.error {
|
||
|
|
border: 2px solid red !important;
|
||
|
|
}
|
||
|
|
&:focus {
|
||
|
|
border: 2px solid #61bb9e !important;
|
||
|
|
}
|
||
|
|
&.select.in-advanced-search {
|
||
|
|
height: 3em;
|
||
|
|
border: 2px solid rgb(127, 170, 170) !important;
|
||
|
|
&:focus {
|
||
|
|
border: 2px solid rgb(127, 170, 170) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.date-picker {
|
||
|
|
.vpd-input-group {
|
||
|
|
.vpd-icon-btn {
|
||
|
|
position: absolute;
|
||
|
|
right: 13.7em;
|
||
|
|
height: 2.8em;
|
||
|
|
border-radius: 0.5em 0em 0em 0.5em;
|
||
|
|
}
|
||
|
|
.form-control {
|
||
|
|
width: 17.2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.calendar {
|
||
|
|
.card-header {
|
||
|
|
border-bottom: unset;
|
||
|
|
|
||
|
|
div {
|
||
|
|
span {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
transition: transform 0.3s ease, color 0.3s ease;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
&[aria-expanded="true"] {
|
||
|
|
span {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.my-card {
|
||
|
|
margin-bottom: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.horizontal {
|
||
|
|
.nav-tabs {
|
||
|
|
background-color: #eee;
|
||
|
|
.nav-item {
|
||
|
|
padding-top: 0.5em;
|
||
|
|
.nav-link {
|
||
|
|
padding: 0.5rem 2rem !important;
|
||
|
|
color: var(--text-primary);
|
||
|
|
border-bottom: unset !important;
|
||
|
|
&:focus,
|
||
|
|
&:hover {
|
||
|
|
color: var(--primary-color);
|
||
|
|
border-color: transparent;
|
||
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.vertical {
|
||
|
|
margin-top: 1em;
|
||
|
|
}
|
||
|
|
</style>
|