806 lines
29 KiB
Vue
806 lines
29 KiB
Vue
<template>
|
||
<div>
|
||
<v-chart
|
||
:key="treeCounter"
|
||
:option="option"
|
||
style="height: 90dvh; width: 90%"
|
||
ref="chart"
|
||
@mouseover="handleChartClick"
|
||
lazy
|
||
></v-chart>
|
||
<template v-if="showDiv">
|
||
<div
|
||
v-if="showButtons"
|
||
class="rounded shadow container-fluid p-2"
|
||
@mouseenter="onMouseEnter"
|
||
@mouseleave="onMouseLeave"
|
||
:style="{
|
||
position: 'absolute',
|
||
top: position.top,
|
||
left: position.left,
|
||
backgroundColor: 'white',
|
||
border: '1px solid #dee2e6',
|
||
padding: '5px',
|
||
width: '15em',
|
||
}"
|
||
>
|
||
<div class="row me-auto tooltip-button">
|
||
<div class="col-9 d-flex border-bottom mb-1">
|
||
<button
|
||
v-tooltip="`افزودن فرزند`"
|
||
class="btn"
|
||
style="color: #dee2e6"
|
||
@click="onButtonClick('add')"
|
||
>
|
||
<svg class="icon icon-Component-133--1">
|
||
<use xlink:href="#icon-Component-133--1"></use>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
v-tooltip="`ویرایش کردن`"
|
||
class="btn"
|
||
@click="onButtonClick('edit')"
|
||
>
|
||
<svg class="icon icon-Component-242--1">
|
||
<use xlink:href="#icon-Component-242--1"></use>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
v-tooltip="`پاک کردن`"
|
||
class="btn"
|
||
@click="onButtonClick('delete')"
|
||
>
|
||
<svg class="icon icon-Component-295--1">
|
||
<use xlink:href="#icon-Component-295--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="col-3 mb-1">
|
||
<button v-tooltip="`خارج شدن`" class="btn" @click="closeButtons">
|
||
<svg class="icon icon-Component-21--1">
|
||
<use xlink:href="#icon-Component-21--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="row my-3">
|
||
<div v-if="buttonAction == 'add'" class="col w-90 px-3">
|
||
<form>
|
||
<div class="row align-items-center">
|
||
<div class="col-8 m-0">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="inlineFormInputName"
|
||
placeholder="کلمه جدید"
|
||
v-model="addText"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-2">
|
||
<button
|
||
class="btn accept-button"
|
||
@click.prevent="addNewChildren(addText)"
|
||
>
|
||
<svg class="icon icon-Component-233--1">
|
||
<use xlink:href="#icon-Component-233--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="col-2">
|
||
<button class="btn reject-button" @click="buttonAction = ''">
|
||
<svg class="icon icon-Component-21--1">
|
||
<use xlink:href="#icon-Component-21--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div v-else-if="buttonAction == 'edit'" class="col w-90 px-3">
|
||
<form>
|
||
<div class="row align-items-center">
|
||
<div class="col-8">
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="inlineFormInputName"
|
||
:placeholder="tooltipText"
|
||
v-model="editText"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-2">
|
||
<button
|
||
class="btn accept-button"
|
||
@click.prevent="editNode(editText)"
|
||
>
|
||
<svg class="icon icon-Component-233--1">
|
||
<use xlink:href="#icon-Component-233--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="col-2">
|
||
<button class="btn reject-button" @click="buttonAction = ''">
|
||
<svg class="icon icon-Component-21--1">
|
||
<use xlink:href="#icon-Component-21--1"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div v-else class="col">
|
||
<p>{{ tooltipText }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import researchApi from "@apis/researchApi";
|
||
import HttpService from "@services/httpService";
|
||
import { mapActions, mapState } from "pinia";
|
||
import { useCommonStore } from "~/stores/commonStore";
|
||
//
|
||
import { use } from "echarts/core";
|
||
import { TreeChart } from "echarts/charts";
|
||
import { TooltipComponent, ToolboxComponent } from "echarts/components";
|
||
import { CanvasRenderer } from "echarts/renderers";
|
||
use([TooltipComponent, TreeChart, CanvasRenderer, ToolboxComponent]);
|
||
/**
|
||
* @vue-prop {Array} [dataTreeMap=] - آرایه‌ای از داده‌های نقشه درخت
|
||
*
|
||
* @vue-data {Number} treeCounter - شمارنده درخت
|
||
* @vue-data {Boolean} showButtons - وضعیت نمایش دکمه‌ها
|
||
* @vue-data {Boolean} showDiv - وضعیت نمایش divدکمه ها
|
||
* @vue-data {String} buttonAction - اقدام دکمه
|
||
* @vue-data {String} addText - متن افزودن
|
||
* @vue-data {String} editText - متن ویرایش
|
||
* @vue-data {undefined|Object} httpService - سرویس HTTP
|
||
* @vue-data {Object} itemData - داده آیتم
|
||
* @vue-data {String} tooltipText - متن ابزارک راهنما
|
||
* @vue-data {Object} position - موقعیت ابزارک راهنما
|
||
* @vue-data {String} position.top - موقعیت عمودی ابزارک راهنما
|
||
* @vue-data {String} position.left - موقعیت افقی ابزارک راهنما
|
||
* @vue-data {Object} option - گزینه‌های پیکربندی نمودار
|
||
* @vue-data {Object} option.tooltip - تنظیمات ابزارک راهنما
|
||
* @vue-data {String} option.tooltip.trigger - نوع راه‌اندازی ابزارک راهنما
|
||
* @vue-data {String} option.tooltip.triggerOn - رویدادی که ابزارک راهنما بر اساس آن راه‌اندازی می‌شود
|
||
* @vue-data {Array} option.series - آرایه‌ای از سری‌های نمودار
|
||
* @vue-data {Object} option.series[0] - سری اول نمودار
|
||
* @vue-data {String} option.series[0].type - نوع سری (درخت)
|
||
* @vue-data {Number} option.series[0].id - شناسه سری
|
||
* @vue-data {String} option.series[0].name - نام سری
|
||
* @vue-data {Array} option.series[0].data - داده‌های سری
|
||
* @vue-data {String} option.series[0].top - موقعیت بالای نمودار
|
||
* @vue-data {String} option.series[0].left - موقعیت چپ نمودار
|
||
* @vue-data {String} option.series[0].bottom - موقعیت پایین نمودار
|
||
* @vue-data {String} option.series[0].right - موقعیت راست نمودار
|
||
* @vue-data {String} option.series[0].while - عرض نمودار
|
||
* @vue-data {String} option.series[0].height - ارتفاع نمودار
|
||
* @vue-data {Number} option.series[0].zoom - میزان بزرگ‌نمایی نمودار
|
||
* @vue-data {Number} option.series[0].symbolSize - اندازه نماد
|
||
* @vue-data {String} option.series[0].edgeForkPosition - موقعیت شاخه‌های لبه
|
||
* @vue-data {String} option.series[0].edgeShape - شکل لبه
|
||
* @vue-data {Number} option.series[0].initialTreeDepth - عمق اولیه درخت
|
||
* @vue-data {String} option.series[0].orient - جهت نمودار
|
||
* @vue-data {Object} option.series[0].lineStyle - سبک خط
|
||
* @vue-data {Number} option.series[0].lineStyle.width - عرض خط
|
||
* @vue-data {Object} option.series[0].label - برچسب‌ها
|
||
* @vue-data {String} option.series[0].label.backgroundColor - رنگ پس‌زمینه برچسب
|
||
* @vue-data {Array} option.series[0].label.position - موقعیت برچسب
|
||
* @vue-data {Number} option.series[0].label.distance - فاصله برچسب
|
||
* @vue-data {String} option.series[0].label.verticalAlign - تراز عمودی برچسب
|
||
* @vue-data {String} option.series[0].label.align - تراز برچسب
|
||
* @vue-data {Number} option.series[0].label.borderWidth - عرض مرز برچسب
|
||
* @vue-data {Number} option.series[0].label.borderDashOffset - فاصله نقطه‌چین مرز برچسب
|
||
* @vue-data {Array} option.series[0].label.borderRadius - شعاع گوشه‌های مرز برچسب
|
||
* @vue-data {Array} option.series[0].label.padding - پدینگ برچسب
|
||
* @vue-data {Number} option.series[0].label.lineHeight - ارتفاع خط برچسب
|
||
* @vue-data {Object} option.series[0].leaves - برگ‌ها
|
||
* @vue-data {Object} option.series[0].leaves.label - برچسب‌های برگ
|
||
* @vue-data {String} option.series[0].leaves.label.position - موقعیت برچسب برگ
|
||
* @vue-data {String} option.series[0].leaves.label.verticalAlign - تراز عمودی برچسب برگ
|
||
* @vue-data {String} option.series[0].leaves.label.align - تراز برچسب برگ
|
||
* @vue-data {Object} option.series[0].emphasis - تاکید
|
||
* @vue-data {String} option.series[0].emphasis.focus - تمرکز تاکید
|
||
* @vue-data {String} option.series[0].emphasis.blurScope - محدوده مات شدن تاکید
|
||
* @vue-data {Boolean} option.series[0].expandAndCollapse - وضعیت باز و بسته شدن
|
||
* @vue-data {Number} option.series[0].animationDuration - مدت زمان انیمیشن
|
||
* @vue-data {Number} option.series[0].animationDurationUpdate - مدت زمان به‌روزرسانی انیمیشن
|
||
*/
|
||
|
||
export default {
|
||
props: {
|
||
dataTreeMap: {
|
||
default() {
|
||
return [];
|
||
},
|
||
type: Array,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
treeCounter: 1,
|
||
showButtons: false,
|
||
showDiv: false,
|
||
buttonAction: "",
|
||
addText: "",
|
||
editText: "",
|
||
httpService: undefined,
|
||
|
||
itemData: {},
|
||
tooltipText: "",
|
||
position: { top: "0px", left: "0px" },
|
||
option: {
|
||
tooltip: {
|
||
trigger: "item",
|
||
triggerOn: "mousemove",
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
itemSize: 15,
|
||
feature: {
|
||
myTool1: {
|
||
show: true,
|
||
title: " نمایش ",
|
||
icon: '<path d="M19.017 16.243c-1.431-0.009-2.588-1.166-2.597-2.596v-0.001c0.004-0.466 0.133-0.902 0.354-1.276l-0.006 0.012c-0.112-0.009-0.229-0.035-0.349-0.035-2.152 0-3.896 1.744-3.896 3.896s1.744 3.896 3.896 3.896c2.152 0 3.896-1.744 3.896-3.896v0c0-0.12-0.025-0.231-0.035-0.348-0.362 0.215-0.797 0.344-1.261 0.348h-0.001z"></path><path d="M16.42 7.152c-0.067-0.001-0.146-0.002-0.225-0.002-5.746 0-10.661 3.558-12.662 8.591l-0.032 0.092-0.133 0.411 0.133 0.411c2.035 5.125 6.951 8.683 12.697 8.683 0.079 0 0.157-0.001 0.236-0.002h-0.012c0.067 0.001 0.146 0.002 0.225 0.002 5.746 0 10.661-3.558 12.662-8.591l0.032-0.092 0.133-0.411-0.133-0.411c-2.035-5.125-6.951-8.683-12.697-8.683-0.079 0-0.157 0.001-0.236 0.002h0.012zM16.42 22.737c-0.107 0.004-0.234 0.006-0.36 0.006-4.417 0-8.218-2.642-9.907-6.432l-0.027-0.069c1.718-3.858 5.518-6.499 9.935-6.499 0.127 0 0.253 0.002 0.378 0.006l-0.018-0.001c0.107-0.004 0.234-0.006 0.36-0.006 4.417 0 8.218 2.642 9.907 6.432l0.027 0.069c-1.718 3.858-5.518 6.499-9.935 6.499-0.127 0-0.253-0.002-0.378-0.006h0.018z"></path>',
|
||
|
||
onclick: function () {
|
||
this.myToolClick("نمایش");
|
||
}.bind(this),
|
||
|
||
iconStyle: {
|
||
color: "",
|
||
},
|
||
},
|
||
myTool2: {
|
||
show: true,
|
||
title: " ویرایش ",
|
||
icon: '<path d="M9.333 25.856c-0.001 0-0.001 0-0.002 0-0.127 0-0.246-0.031-0.352-0.085l0.004 0.002-0.027 0.019-0.123-0.117c-0.024-0.021-0.046-0.041-0.066-0.064l-0-0-3.249-3.105 2.035-3.256 4.533 4.38-1.007 0.695h12.192c0.423 0 0.765 0.343 0.765 0.765s-0.343 0.765-0.765 0.765v0zM8.332 17.375l11.501-10.416c0.521-0.631 1.304-1.031 2.18-1.031 0.735 0 1.404 0.281 1.906 0.741l-0.002-0.002 1.333 1.5c0.385 0.41 0.621 0.963 0.621 1.571 0 0.714-0.325 1.351-0.836 1.773l-0.004 0.003-10.74 11.569z"></path>',
|
||
|
||
onclick: function () {
|
||
this.myToolClick("ویرایش");
|
||
}.bind(this),
|
||
iconStyle: {
|
||
color: "black",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "tree",
|
||
id: 0,
|
||
name: "tree1",
|
||
data: [],
|
||
top: "0%",
|
||
left: "40%",
|
||
bottom: "30%",
|
||
right: "5%",
|
||
while: "100%",
|
||
height: "100%",
|
||
zoom: 1,
|
||
symbolSize: 10,
|
||
// roam: true,
|
||
edgeForkPosition: "30%",
|
||
|
||
edgeShape: "curve",
|
||
// expandAndCollapse: true,
|
||
initialTreeDepth: 5,
|
||
orient: "RL",
|
||
// symbol: "none",
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
|
||
label: {
|
||
color: "#fff",
|
||
fontFamily: "sahel",
|
||
fontSize: 15,
|
||
align: "center",
|
||
position: "left",
|
||
verticalAlign: "middle",
|
||
borderRadius: 3,
|
||
padding: 6,
|
||
borderWidth: 2,
|
||
// shadowColor: "rgba(51, 41, 41, 1)",
|
||
// shadowBlur: 2.5,
|
||
// shadowOffsetX: 2,
|
||
// shadowOffsetY: 2,
|
||
width: 140,
|
||
height: 12,
|
||
backgroundColor: "#ee6666",
|
||
distance: 80,
|
||
formatter: function (params) {
|
||
const maxLength = 15;
|
||
const text =
|
||
params.name.length > maxLength
|
||
? params.name.substring(0, maxLength) + "..."
|
||
: params.name;
|
||
return text;
|
||
},
|
||
},
|
||
leaves: {
|
||
label: {
|
||
distance: 80,
|
||
color: "#fff",
|
||
fontFamily: "sahel",
|
||
fontSize: 15,
|
||
align: "center",
|
||
position: "left",
|
||
verticalAlign: "middle",
|
||
borderRadius: 3,
|
||
padding: 6,
|
||
borderWidth: 2,
|
||
// shadowColor: "rgba(51, 41, 41, 1)",
|
||
// shadowBlur: 2.5,
|
||
// shadowOffsetX: 2,
|
||
// shadowOffsetY: 2,
|
||
width: 140,
|
||
height: 12,
|
||
backgroundColor: "#fff",
|
||
formatter: function (params) {
|
||
const maxLength = 15;
|
||
const text =
|
||
params.name.length > maxLength
|
||
? params.name.substring(0, maxLength) + "..."
|
||
: params.name;
|
||
return text;
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
curveness: 0.6,
|
||
},
|
||
emphasis: {
|
||
focus: "relative",
|
||
blurScope: "coordinateSystem",
|
||
},
|
||
expandAndCollapse: true,
|
||
animationDuration: 550,
|
||
animationDurationUpdate: 750,
|
||
symbolOffset: [30, 0],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
watch: {
|
||
dataTreeMap: {
|
||
handler(newData) {
|
||
this.option.series[0].data = newData;
|
||
this.treeCounter++;
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
dataForTreeMapGetter(newValue) {
|
||
this.option.series[0].data = newValue;
|
||
this.treeCounter++;
|
||
},
|
||
},
|
||
beforeMount() {
|
||
this.httpService = new HttpService();
|
||
},
|
||
mounted() {
|
||
this.option.series[0].data = this.dataForTreeMapGetter;
|
||
this.option.toolbox.feature.myTool1.iconStyle.color = "black";
|
||
this.option.toolbox.feature.myTool2.iconStyle.color = "#fff";
|
||
},
|
||
computed: {
|
||
...mapState(useCommonStore, [
|
||
// "dataForTreeMapGetter",
|
||
"researchTermsGetter",
|
||
]),
|
||
},
|
||
|
||
methods: {
|
||
// ...mapActions(useResearchStore, ["dataForTreeMapSetter"]),
|
||
/**
|
||
*تغیرات مربوط به حالت نمایش و ویرایش در چارت
|
||
|
||
*/
|
||
myToolClick(item) {
|
||
if (item == "نمایش") {
|
||
this.showDiv = false;
|
||
this.option.toolbox.feature.myTool1.iconStyle.color = "black";
|
||
this.option.toolbox.feature.myTool2.iconStyle.color = "#fff";
|
||
} else {
|
||
this.showDiv = true;
|
||
this.option.toolbox.feature.myTool1.iconStyle.color = "#fff";
|
||
this.option.toolbox.feature.myTool2.iconStyle.color = "black";
|
||
}
|
||
},
|
||
/**
|
||
* نشان دادن دکمه‌ها در هنگام وارد شدن ماوس
|
||
|
||
*/
|
||
onMouseEnter() {
|
||
this.showButtons = true;
|
||
},
|
||
/**
|
||
* پنهان کردن دکمه‌ها در هنگام خارج شدن ماوس
|
||
|
||
*/
|
||
onMouseLeave() {
|
||
this.showButtons = false;
|
||
},
|
||
/**
|
||
* وقتی کاربر روی نقاط چارت کلیک می‌کند، این تابع وظیفه نمایش اطلاعات مربوط به آن نقطه را دارد.
|
||
* @param {Object} params - اطلاعات مربوط به کلیک شده روی چارت
|
||
*/
|
||
handleChartClick(params) {
|
||
const { offsetX, offsetY } = params.event;
|
||
// تنظیم موقعیت نمایش اطلاعات
|
||
this.position = { top: `${offsetY - 150}px`, left: `${offsetX}px` };
|
||
// نمایش متن توضیحات
|
||
this.tooltipText = params.name || "No data";
|
||
// ذخیره اطلاعات آیتم کلیک شده
|
||
this.itemData = params;
|
||
this.buttonAction = "";
|
||
this.addText = "";
|
||
this.editText = "";
|
||
// نمایش دکمه‌های مربوط به این آیتم
|
||
this.showButtons = true;
|
||
},
|
||
|
||
/**
|
||
* وقتی کاربر روی دکمه‌های اضافه کردن یا حذف کلیک می‌کند، این تابع عملکرد متناسب با دکمه انجام می‌دهد.
|
||
* @param {string} buttonName - نام دکمه‌ای که کلیک شده است ('add' یا 'delete')
|
||
*/
|
||
onButtonClick(buttonName) {
|
||
this.buttonAction = buttonName;
|
||
// تعیین عملیات اضافه کردن یا حذف بر اساس دکمه انتخاب شده
|
||
if (buttonName == "add") this.fetchingExistingChildren();
|
||
else if (buttonName == "delete") this.removeNode();
|
||
// else if (buttonName == "edit") this.editNode();
|
||
},
|
||
|
||
/**
|
||
* این تابع دکمه‌های نمایش داده شده بر روی چارت را پنهان می‌کند.
|
||
*/
|
||
closeButtons() {
|
||
this.showButtons = false;
|
||
},
|
||
|
||
/**
|
||
* این تابع مسئول اضافه کردن آیتم‌های جدید به چارت است.
|
||
* @param {string} item - عنوان آیتم جدید
|
||
*/
|
||
addNewChildren(item) {
|
||
let data = this.itemData.data;
|
||
// تهیه پارامترهای مورد نیاز برای ارسال درخواست
|
||
const payload = {
|
||
projectid: this.researchTermsGetter?.id,
|
||
parent: "",
|
||
listtype: 0,
|
||
title: item,
|
||
listid: "",
|
||
id: "",
|
||
};
|
||
// تنظیم مقادیر پارامترها بر اساس شرایط
|
||
if (data.pid === "Root") {
|
||
payload.id = undefined;
|
||
payload.parent = 0;
|
||
delete payload.listid;
|
||
} else {
|
||
payload.listid = data?.id;
|
||
payload.parent = data?.id;
|
||
delete payload.id;
|
||
}
|
||
// ارسال درخواست به سرور
|
||
let url = researchApi.subject.add;
|
||
this.httpService
|
||
.postRequest(url, payload)
|
||
.then((res) => {
|
||
// نمایش پیام موفقیت
|
||
this.mySwalToast({
|
||
title: "موفق",
|
||
html: " با موفقیت انجام شد ",
|
||
icon: "success",
|
||
});
|
||
// اضافه کردن آیتم‌های جدید به داده‌های مربوطه
|
||
res.data.forEach((element, index) => {
|
||
var node = {
|
||
item: element,
|
||
text: element.title,
|
||
name: element.title,
|
||
id: element.id,
|
||
pid: 0,
|
||
opened: false,
|
||
selected: false,
|
||
disabled: false,
|
||
loading: false,
|
||
children: [],
|
||
};
|
||
|
||
data.children.push(node);
|
||
// اضافه کردن آیتم به چارت
|
||
if (payload.parent === 0) {
|
||
this.option.series[0].data[0].children.push(node);
|
||
} else {
|
||
this.addChildToParent(
|
||
this.option.series[0].data[0],
|
||
payload.parent,
|
||
node
|
||
);
|
||
}
|
||
this.treeCounter++;
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
// نمایش پیام خطا
|
||
console.error("Error adding new children:", error);
|
||
this.mySwalToast({
|
||
title: "خطا",
|
||
html: "مشکلی پیش آمد",
|
||
icon: "error",
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.buttonAction = "";
|
||
});
|
||
},
|
||
|
||
/**
|
||
* این تابع مسئول اضافه کردن یک آیتم فرزند به آیتم پدر می‌باشد.
|
||
* @param {Object} node - آیتم پدر
|
||
* @param {string} parentId - شناسه آیتم پدر
|
||
* @param {Object} newChild - آیتم فرزند جدید
|
||
* @returns {boolean} - مقدار منطقی True در صورت موفقیت آمیز بودن اضافه کردن، در غیر این صورت False
|
||
*/
|
||
addChildToParent(node, parentId, newChild) {
|
||
if (node.id === parentId) {
|
||
node.children.push(newChild);
|
||
return true;
|
||
}
|
||
|
||
if (node.children) {
|
||
for (let child of node.children) {
|
||
if (this.addChildToParent(child, parentId, newChild)) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
|
||
return false;
|
||
},
|
||
/**
|
||
* این تابع مسئول دریافت و نمایش آیتم‌های موجود زیر یک آیتم پدر است.
|
||
*/
|
||
fetchingExistingChildren() {
|
||
let dataParent = this.itemData.data;
|
||
if (dataParent.children.length > 1) {
|
||
return;
|
||
}
|
||
try {
|
||
// دریافت لیست آیتم‌های زیر یک آیتم پدر از سرور
|
||
this.getListTree(dataParent.id).then((list) => {
|
||
// اضافه کردن هر آیتم به لیست فرزندان آیتم پدر
|
||
list.forEach((element, index) => {
|
||
const dataColor = dataParent.label.backgroundColor;
|
||
|
||
var node = {
|
||
item: element,
|
||
text: element.title,
|
||
name: element.title,
|
||
id: element.id,
|
||
pid: dataParent.id,
|
||
opened: false,
|
||
selected: false,
|
||
disabled: false,
|
||
loading: false,
|
||
children: [],
|
||
label: {
|
||
backgroundColor: dataColor,
|
||
},
|
||
itemStyle: {
|
||
color: dataColor,
|
||
},
|
||
};
|
||
dataParent.children.push(node);
|
||
// اضافه کردن آیتم به چارت
|
||
if (dataParent.id === 0) {
|
||
this.option.series[0].data[0].children.push(node);
|
||
} else {
|
||
this.addChildToParent(
|
||
this.option.series[0].data[0],
|
||
dataParent.id,
|
||
node
|
||
);
|
||
}
|
||
this.treeCounter++;
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error("Error fetching children nodes:", error);
|
||
}
|
||
},
|
||
/**
|
||
* این تابع مسئول حذف یک آیتم از چارت می‌باشد.
|
||
*/
|
||
removeNode() {
|
||
let removeData = this.itemData.data;
|
||
if (removeData.pid === "Root") return;
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: `از حذف <b>${removeData.text}</b> اطمینان دارید؟ `,
|
||
icon: "warning",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
this.getRemov(removeData);
|
||
this.closeButtons();
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* این تابع مسئول حذف یک آیتم از چارت می‌باشد.
|
||
* @param {Object} nodeToRemove - آیتمی که قرار است حذف شود
|
||
*/
|
||
removeNodeFromChart(nodeToRemove) {
|
||
// حذف آیتم از چارت
|
||
if (nodeToRemove.pid === 0) {
|
||
let index = this.option.series[0].data[0].children.findIndex(
|
||
(child) => child.item.id === nodeToRemove.item.id
|
||
);
|
||
if (index !== -1) {
|
||
this.option.series[0].data[0].children.splice(index, 1);
|
||
}
|
||
} else {
|
||
let parentData = this.getParentData(nodeToRemove);
|
||
if (parentData) {
|
||
let index = parentData.children.findIndex(
|
||
(child) => child.item.id === nodeToRemove.item.id
|
||
);
|
||
if (index !== -1) {
|
||
parentData.children.splice(index, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
this.treeCounter++; // افزایش شمارنده درخت
|
||
},
|
||
/**
|
||
* این تابع مسئول یافتن و بازگشت آیتم پدر مربوط به یک آیتم است.
|
||
* @param {Object} node - آیتم فرزند
|
||
* @returns {Object} - آیتم پدر
|
||
*/
|
||
getParentData(node) {
|
||
let parentData = null;
|
||
// جستجوی آیتم پدر با استفاده از شناسه آن
|
||
function findParent(nodeId, data) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].id === nodeId) {
|
||
parentData = data[i];
|
||
break;
|
||
} else if (data[i].children && data[i].children.length) {
|
||
findParent(nodeId, data[i].children);
|
||
}
|
||
}
|
||
}
|
||
// فراخوانی تابع جستجوی آیتم پدر
|
||
findParent(node.pid, this.option.series[0].data[0].children);
|
||
return parentData;
|
||
},
|
||
/**
|
||
* این تابع مسئول دریافت لیست آیتم‌های زیر یک آیتم پدر از سرور است.
|
||
* @param {string} parentId - شناسه آیتم پدر
|
||
* @returns {Promise} - لیست آیتم‌های زیر آیتم پدر
|
||
*/
|
||
getListTree(parentId = 0) {
|
||
const payload = {
|
||
projectid: this.researchTermsGetter?.id,
|
||
parent: parentId,
|
||
sortby: "id",
|
||
offset: 0,
|
||
limit: 100,
|
||
listtype: 0,
|
||
};
|
||
let url = researchApi.subject.list;
|
||
// ارسال درخواست به سرور و بازگشت پاسخ به صورت Promise
|
||
return this.httpService.formDataRequest(url, payload).then((res) => {
|
||
return res.data;
|
||
});
|
||
},
|
||
/**
|
||
* این تابع مسئول حذف یک آیتم از چارت می‌باشد.
|
||
* @param {Object} item - آیتمی که قرار است حذف شود
|
||
*/
|
||
getRemov(item) {
|
||
const payload = {
|
||
subjectid: item.id,
|
||
projectid: this.researchTermsGetter?.id,
|
||
listid: item.id,
|
||
};
|
||
let url = researchApi.subject.delete;
|
||
this.httpService.postRequest(url, payload).then((res) => {
|
||
this.mySwalToast({
|
||
title: "موفق",
|
||
html: "با موفقیت حذف شد",
|
||
icon: "success",
|
||
});
|
||
// حذف آیتم از چارت
|
||
this.removeNodeFromChart(item);
|
||
});
|
||
},
|
||
/**
|
||
* این تابع مسئول ویرایش یک آیتم از چارت می‌باشد.
|
||
* @param {string} item - عنوان جدید آیتم
|
||
*/
|
||
editNode(item) {
|
||
let data = this.itemData.data;
|
||
const payload = {
|
||
subjectid: data.id,
|
||
projectid: this.researchTermsGetter?.id,
|
||
title: item,
|
||
};
|
||
let url = researchApi.subject.edit;
|
||
this.httpService
|
||
.formDataRequest(url, payload)
|
||
.then((res) => {
|
||
this.mySwalToast({
|
||
title: "موفق",
|
||
html: "تغییر نام با موفقیت انجام شد ",
|
||
icon: "success",
|
||
});
|
||
data.name = item;
|
||
data.text = item;
|
||
|
||
// پیدا کردن و به‌روز رسانی آیتم در چارت
|
||
const updateNodeText = (node, id, newText) => {
|
||
if (node.id === id) {
|
||
node.name = newText;
|
||
node.text = newText;
|
||
return true;
|
||
}
|
||
if (node.children) {
|
||
for (let child of node.children) {
|
||
if (updateNodeText(child, id, newText)) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
updateNodeText(this.option.series[0].data[0], data.id, item);
|
||
|
||
this.treeCounter++;
|
||
this.closeButtons();
|
||
})
|
||
.finally(() => {
|
||
this.buttonAction = "";
|
||
});
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.tooltip-button {
|
||
button {
|
||
color: #dee2e6 !important;
|
||
&:hover {
|
||
color: black !important;
|
||
}
|
||
}
|
||
}
|
||
.reject-button {
|
||
color: #dee2e6 !important;
|
||
&:hover {
|
||
color: rgb(231, 10, 10) !important;
|
||
}
|
||
}
|
||
.accept-button {
|
||
color: #dee2e6 !important;
|
||
&:hover {
|
||
color: rgb(37, 223, 12) !important;
|
||
}
|
||
}
|
||
</style>
|