328 lines
12 KiB
Vue
328 lines
12 KiB
Vue
<template>
|
|
<div
|
|
class="container-fluid"
|
|
:style="{
|
|
height: $attrs.height,
|
|
}"
|
|
>
|
|
<!-- <template
|
|
v-for="(schemaItem, i) in myActiveSchema?.form"
|
|
v-if="Array.isArray(schemaItem)"
|
|
>
|
|
<FormBuilder
|
|
:key="i + schemaItem.key + showFormBuilder"
|
|
:formElements="schemaItem"
|
|
:formData="formDataInit"
|
|
:displayMode="'default'"
|
|
@saveComponentValue="changedFormValues"
|
|
@keydown="keydown"
|
|
class="row"
|
|
></FormBuilder>
|
|
</template> -->
|
|
<div class="row" style="height: 90%; overflow: auto">
|
|
<div class="col-12">
|
|
<FormBuilder
|
|
v-if="showFormBuilder"
|
|
:formElements="myActiveSchema.form.items_main"
|
|
:formData="formDataInit"
|
|
:readOnly="readOnlyHandler()"
|
|
:displayMode="'default'"
|
|
@saveComponentValue="changedFormValues"
|
|
class="row"
|
|
></FormBuilder>
|
|
</div>
|
|
|
|
<div class="col-12 mt-2" v-show="showMore">
|
|
<FormBuilder
|
|
v-if="showFormBuilder"
|
|
:formElements="myActiveSchema.form.items_more"
|
|
:formData="formDataInit"
|
|
:displayMode="'default'"
|
|
:readOnly="readOnlyHandler()"
|
|
@saveComponentValue="changedFormValues"
|
|
class="row"
|
|
></FormBuilder>
|
|
</div>
|
|
<div class="col-12 d-flex justify-content-start align-items-start mb-2">
|
|
<ToggleButton
|
|
openText="بیشتر"
|
|
openIcon="Component-25--1"
|
|
closeText="بستن"
|
|
closeIcon="Component-22--1"
|
|
@toggle="clickToggleButton"
|
|
>
|
|
</ToggleButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row px-3 border-top h-auto" style="height: 3em">
|
|
<div class="col-12 d-flex justify-content-end align-items-end">
|
|
<button
|
|
title="ذخیره"
|
|
classes="btn btn-outline-primary fz-13"
|
|
@click="saveFish(valueModal.action)"
|
|
buttonText="ذخیره"
|
|
class="btn btn-outline-primary fz-13 mt-2"
|
|
:class="{ disabled: valueModal?.isReadonly == true }"
|
|
>
|
|
ذخیره
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import entityApi from "~/apis/entityApi.js";
|
|
import { mapState } from "pinia";
|
|
import { cloneDeep } from "lodash";
|
|
import { useCommonStore } from "~/stores/commonStore";
|
|
import { useEntityStore } from "@search/stores/entityStore";
|
|
/**
|
|
* @vue-prop {Object} [valueModal={}] - یک آبجکت از مقادیر مورد نیاز برای فیش
|
|
* @vue-data {undefined} [cloneActiveSchemaGetter=undefined] - یک کپی از ساختار صفحه
|
|
* @vue-data {Boolean} [ShowMore=false] - وضعیت نمایش موارد بیشتر .
|
|
* @vue-data {Object} [formDataInit={}] - آبجکتی که شامل مقادیر ورودی ثابت برای فرم بیلدر است
|
|
* @vue-data {Object} [formDataValues={}] - مقادیر بازگشتی از فرم بیلدر که خود فرد پر کرده است
|
|
* @vue-data {String} [date_create=""] - تاریخ ایجاد فیش
|
|
* @vue-data {String} [username=""] - نام فردی که فیش را ایجاد کرده است
|
|
* @vue-data {String} [address=""] - آدرس ایجاد فیش
|
|
* @vue-data {Number} [showFormBuilder=false] - برای دوباره ساختن فرم بیلدر
|
|
* @vue-event {String} saveFish - این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
|
|
* @vue-computed {Object} mapState.selectedItemEntityGetter - مقدار موجودیتی که کاربر انتخاب کرده است را بازمی‌گرداند.
|
|
* @vue-computed {Object} mapState.activeEntityViewSchemaGetter - ساختار انتخاب شده برای صفحه.
|
|
* @vue-computed {String} repoUrl - ساختار انتخاب شده برای صفحه.
|
|
* @vue-computed {Object} myActiveSchema - ساختار انتخاب شده برای صفحه.
|
|
* @vue-event {String} saveFish - این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
|
|
*/
|
|
|
|
export default {
|
|
props: {
|
|
valueModal: {
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.entity = this.selectedItemEntityGetter;
|
|
this.cloneActiveSchemaGetter = cloneDeep(this.activeEntityViewSchemaGetter);
|
|
|
|
if (this.valueModal.action == "edit") {
|
|
this.itemForEdit = this.valueModal.itemEdit._source;
|
|
|
|
// filter null/null values
|
|
Object.keys(this.itemForEdit).forEach((key) => {
|
|
if (this.itemForEdit[key] == null) return;
|
|
this.formDataInit[key] = this.itemForEdit[key];
|
|
});
|
|
|
|
this.activeTab = 3;
|
|
} else {
|
|
this.date_create = this.todays();
|
|
// this.address = this.referenceText(
|
|
// this.cloneActiveSchemaGetter.contextMenu[0].form.from_footer[0]
|
|
// );
|
|
let list = this.myActiveSchema.form.items_more;
|
|
list.forEach((item) => {
|
|
if (item.key == "address") {
|
|
this.address = this.referenceText(item);
|
|
}
|
|
});
|
|
this.username = userFullname(this.currentUser?.user_data);
|
|
|
|
let title = this.valueModal?.selectedText;
|
|
let words = this.valueModal?.selectedText.split(" ");
|
|
if (words.length > 10) title = words.slice(0, 10).join(" ");
|
|
|
|
this.formDataInit = {
|
|
address: this.address,
|
|
date_create: this.date_create,
|
|
text_main: this.valueModal?.selectedText,
|
|
title: title,
|
|
username: this.username,
|
|
};
|
|
}
|
|
this.showFormBuilder = true;
|
|
},
|
|
data() {
|
|
return {
|
|
entity: {},
|
|
showMore: false,
|
|
cloneActiveSchemaGetter: undefined,
|
|
formDataInit: {},
|
|
formDataValues: {},
|
|
date_create: "",
|
|
address: "",
|
|
username: "",
|
|
showFormBuilder: false,
|
|
// selectedNavigation: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useEntityStore, [
|
|
"activeEntityViewSchemaGetter",
|
|
"selectedItemEntityGetter",
|
|
]),
|
|
...mapState(useCommonStore, ["userPermisionGetter", "currentUser"]),
|
|
myActiveSchema() {
|
|
return this.activeEntityViewSchemaGetter?.contextMenu.find(
|
|
(item) => item.key == "term"
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
//برسی میکنه که آیا اجازه ویرایش فیش بدهد یا نه
|
|
readOnlyHandler() {
|
|
let Schema = this.valueModal.itemSchema;
|
|
let OwnerResearch = this.valueModal.itemEdit?._source.user.user_id;
|
|
if (this.valueModal.isReadonly == true) return true;
|
|
if (!this.valueModal.itemEdit) return false;
|
|
|
|
let isUserAccess = this.isEditable(Schema.key);
|
|
|
|
let isOwnerResearch = "";
|
|
if (this.currentUser.user_id == OwnerResearch) isOwnerResearch = true;
|
|
else isOwnerResearch = false;
|
|
|
|
if (isUserAccess == true || isOwnerResearch == true) return false;
|
|
else return true;
|
|
},
|
|
isEditable(key) {
|
|
if (key) {
|
|
let res = this.hasPermission(key + "_edit");
|
|
return res;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
hasPermission(permission) {
|
|
if (this.currentUser?.user_level > 1) return true;
|
|
|
|
if (this.userPermisionGetter && this.userPermisionGetter?.length)
|
|
return this.userPermisionGetter?.includes(permission);
|
|
return false;
|
|
},
|
|
/**
|
|
* تغییر وضعیت نمایش بیشتر با توجه به ایونت دریافتی.
|
|
* @param {Boolean} event - وضعیت جدید برای نمایش بیشتر.
|
|
* @description این متد وضعیت نمایش بیشتر را بر اساس ایونت دریافتی تغییر می‌دهد.
|
|
* این متد معمولاً به عنوان یک هندلر برای ایونت‌های toggle استفاده می‌شود.
|
|
*/
|
|
clickToggleButton(event) {
|
|
this.showMore = event;
|
|
},
|
|
/**
|
|
* دریافت تاریخ امروز به شکل رشته متنی.
|
|
* @returns {String} تاریخ امروز به فرمت YYYY/MM/DD
|
|
* @description این متد برای دریافت تاریخ امروز به فرمت مشخص شده استفاده می‌شود.
|
|
*/
|
|
todays() {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = today.getMonth() + 1;
|
|
const day = today.getDate();
|
|
this.currentDate = `${year}/${month}/${day}`;
|
|
|
|
return this.datefa(this.currentDate);
|
|
},
|
|
/**
|
|
* تبدیل تاریخ میلادی به تاریخ فارسی.
|
|
* @param {String} date تاریخ میلادی
|
|
* @returns {String} تاریخ فارسی
|
|
* @description این متد برای تبدیل تاریخ میلادی به تاریخ فارسی استفاده می‌شود.
|
|
*/
|
|
datefa(item) {
|
|
var m = item;
|
|
var d = new Date(m).toLocaleDateString("fa-IR");
|
|
return d;
|
|
},
|
|
/**
|
|
* دریافت متن مرجع.
|
|
* @param {Object} fieldFooter متغیر حاوی اطلاعات مرجع
|
|
* @returns {String} متن مرجع
|
|
* @description این متد برای دریافت متن مرجع استفاده می‌شود.
|
|
*/
|
|
referenceText(fieldFooter) {
|
|
if (!fieldFooter.reference) return;
|
|
const regex = /(\{(\w+)\})/gm;
|
|
const str = fieldFooter.reference;
|
|
let m;
|
|
let matches = [];
|
|
|
|
while ((m = regex.exec(str)) !== null) {
|
|
if (m.index === regex.lastIndex) {
|
|
regex.lastIndex++;
|
|
}
|
|
matches.push(m);
|
|
}
|
|
|
|
let reference = str;
|
|
|
|
matches.forEach((match, groupIndex) => {
|
|
let group = match[0];
|
|
let key = group.replace("{", "").replace("}", "");
|
|
reference = reference.replaceAll(group, this.entity[key]);
|
|
});
|
|
this.addressFish = reference;
|
|
return reference;
|
|
},
|
|
/**
|
|
* تغییرات اعمال شده در فرم را ذخیره کنید.
|
|
* @param {Object} form فرم با تغییرات جدید
|
|
* @description این متد برای ذخیره تغییراتی که در فرم اعمال شده‌اند استفاده می‌شود.
|
|
*/
|
|
changedFormValues(data) {
|
|
this.formDataValues = data;
|
|
},
|
|
keydown(item) {},
|
|
/**
|
|
* ذخیره فیش.
|
|
* @param {String} editState وضعیت ویرایش یا اضافه کردن
|
|
* @description این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
|
|
*/
|
|
async saveFish() {
|
|
let formDataValues = { ...this.formDataInit, ...this.formDataValues };
|
|
let url = "";
|
|
|
|
url += entityApi.fish.addTerm;
|
|
let key = "";
|
|
if (this.$route.params?.key) key = this.$route.params.key;
|
|
|
|
url = url.replace("{{index_key}}", key);
|
|
if (formDataValues.term_project)
|
|
url = url.replace("{{project_id}}", formDataValues.term_project);
|
|
else url = url.replace("{{project_id}}", "5"); // موقت بخاطر باگ خاص در اصطلاحات آقای مهدی زاده فعلا
|
|
|
|
const formData = {
|
|
research_key: this.valueModal.itemSchema.key,
|
|
title: formDataValues.title,
|
|
text_main: formDataValues.text_main,
|
|
address: formDataValues.address,
|
|
research_type: this.myActiveSchema?.form.title,
|
|
service: "repo",
|
|
ref_key: key,
|
|
ref_id: this.entity._id,
|
|
text_position: "parag1:10, index1:0, parag2:12, index2:23",
|
|
};
|
|
|
|
try {
|
|
const { $api } = useNuxtApp();
|
|
const res = await $api(url, {
|
|
method: "POST",
|
|
baseURL: repoUrl(),
|
|
body: formData,
|
|
});
|
|
this.mySwalToast({
|
|
html: res.message,
|
|
});
|
|
this.$emit("closeAfterSaving");
|
|
} catch (err) {
|
|
this.fetchingData = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|