184 lines
4.7 KiB
Vue
184 lines
4.7 KiB
Vue
<template>
|
|
<div class="side-panel">
|
|
<div class="side-panel-header">
|
|
<h6 class="text-center">
|
|
افزودن آیتم جدید
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="redios-castom px-3 py-2 ">
|
|
<div class="side-panel-content">
|
|
<form @submit.prevent="saveNewItemForm()" class="text__14">
|
|
<form-builder
|
|
ref="newFormItemBuilder"
|
|
:formElements="formElement"
|
|
:formData="formData"
|
|
></form-builder>
|
|
|
|
<div class="mb-3">
|
|
<button-component
|
|
type="submit"
|
|
classes="btn-outline-primary mx-3"
|
|
buttonText="افزودن"
|
|
:buttonLoading="buttonLoading"
|
|
></button-component>
|
|
|
|
<button-component
|
|
classes="btn-danger"
|
|
buttonText="انصراف"
|
|
:buttonLoading="buttonLoading"
|
|
@click="closeNewFormItem"
|
|
></button-component>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
emits: ["close-new-form-item","add-item-content"],
|
|
props: {
|
|
editFormData: {
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
watch: {
|
|
editFormData: {
|
|
handler(newVal) {
|
|
this.formData = newVal;
|
|
},
|
|
},
|
|
},
|
|
mounted(){
|
|
this.formData = this.editFormData;
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
buttonLoading: false,
|
|
formData: {
|
|
name: "",
|
|
key: "",
|
|
placeholder: "",
|
|
type: "",
|
|
},
|
|
formElement: {
|
|
title: "مشخصات اصلی",
|
|
items: [
|
|
{
|
|
key: "label",
|
|
label: "عنوان",
|
|
type: "string",
|
|
placeholder: "عنوان را وارد کنید",
|
|
required: "1",
|
|
validation_regex: "{3-100}",
|
|
validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
|
|
multi_select: "0",
|
|
options: [],
|
|
},
|
|
{
|
|
key: "key",
|
|
label: "کلیدواژه",
|
|
type: "string",
|
|
placeholder: "کلیدواژه را وارد کنید",
|
|
required: "1",
|
|
validation_regex: "{3-100}",
|
|
validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
|
|
multi_select: "0",
|
|
options: [],
|
|
},
|
|
{
|
|
key: "placeholder",
|
|
label: "راهنما",
|
|
type: "string",
|
|
placeholder: "راهنمای اولیه مختصر را وارد کنید",
|
|
required: "1",
|
|
validation_regex: "{3-100}",
|
|
validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
|
|
multi_select: "0",
|
|
options: [],
|
|
},
|
|
{
|
|
key: "value",
|
|
label: "مقدار",
|
|
type: "string",
|
|
placeholder: "مقدار را وارد کنید",
|
|
required: "1",
|
|
validation_regex: "{3-100}",
|
|
validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
|
|
multi_select: "0",
|
|
options: [],
|
|
},
|
|
{
|
|
key: "type",
|
|
label: "نوع",
|
|
type: "select",
|
|
placeholder: "نوع را وارد کنید",
|
|
required: "1",
|
|
validation_regex: "{3-100}",
|
|
validation_error: "عبارت باید حداقل 3 و حداکثر 100 حرف باشد",
|
|
multi_select: "0",
|
|
options: [
|
|
{
|
|
title: "صوتی",
|
|
value: "sound",
|
|
},
|
|
{
|
|
title: "فیلم",
|
|
value: "video",
|
|
},
|
|
{
|
|
title: "تصویر",
|
|
value: "img",
|
|
},
|
|
{
|
|
title: "عبارت(نمایشی)",
|
|
value: "label",
|
|
},
|
|
{
|
|
title: "متن",
|
|
value: "textarea",
|
|
},
|
|
{
|
|
title: "انتخابی",
|
|
value: "select",
|
|
},
|
|
|
|
{
|
|
title: "متن کوتاه",
|
|
value: "string",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
closeNewFormItem() {
|
|
this.$emit("close-new-form-item");
|
|
},
|
|
saveNewItemForm() {
|
|
const formData = this.$refs.newFormItemBuilder.localFormData;
|
|
this.$emit("add-item-content", formData);
|
|
},
|
|
resetForm() {
|
|
this.formData = {
|
|
name: "",
|
|
key: "",
|
|
placeholder: "",
|
|
type: "",
|
|
};
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|