imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace JSON.parse(JSON.stringify()) with lodash-es cloneDeep for deep cloning Vue reactive data (S7784)

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
依瑪貓
2026-03-10 08:23:44 +08:00
parent 2374363484
commit e9e588385b
11 changed files with 76 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -165,6 +165,7 @@ import ConformanceRadioGroup from "./ConformanceSidebar/ConformanceRadioGroup.vu
import ConformanceShowBar from "./ConformanceSidebar/ConformanceShowBar.vue";
import ConformanceTimeRange from "./ConformanceSidebar/ConformanceTimeRange.vue";
import ConformanceSelectResult from "./ConformanceSidebar/ConformanceSelectResult.vue";
import { cloneDeep } from "lodash-es";
const $toast = useToast();
@@ -920,9 +921,7 @@ function getSequenceData() {
task_seq: selectCfmSeqDirectly.value,
};
isSubmitReset();
isSubmitCfmSeqDirectly.value = JSON.parse(
JSON.stringify(selectCfmSeqDirectly.value),
);
isSubmitCfmSeqDirectly.value = cloneDeep(selectCfmSeqDirectly.value);
break;
case "Eventually follows":
dataToSave = {
@@ -930,9 +929,7 @@ function getSequenceData() {
task_seq: selectCfmSeqEventually.value,
};
isSubmitReset();
isSubmitCfmSeqEventually.value = JSON.parse(
JSON.stringify(selectCfmSeqEventually.value),
);
isSubmitCfmSeqEventually.value = cloneDeep(selectCfmSeqEventually.value);
break;
case "Short loop(s)":
dataToSave = { type: "short-loops" };

5
src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
View File

@@ -118,6 +118,7 @@
import { ref, computed, onBeforeUnmount } from "vue";
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
import emitter from "@/utils/emitter";
import { cloneDeep } from "lodash-es";
const props = defineProps(["data", "listSeq", "isSubmit", "category"]);
@@ -129,7 +130,7 @@ const datadata = computed(() => {
// Sort the Activity List
let newData;
if (props.data !== null) {
newData = JSON.parse(JSON.stringify(props.data));
newData = cloneDeep(props.data);
sortNumEngZhtw(newData);
}
return newData;
@@ -195,7 +196,7 @@ function onEnd(evt) {
}
// created
const newlist = JSON.parse(JSON.stringify(props.listSeq));
const newlist = cloneDeep(props.listSeq);
listSequence.value = props.isSubmit ? newlist : [];
emitter.on("reset", (data) => {
listSequence.value = [];

3
src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
View File

@@ -200,6 +200,7 @@ import emitter from "@/utils/emitter";
import ResultCheck from "@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue";
import ResultArrow from "@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue";
import ResultDot from "@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue";
import { cloneDeep } from "lodash-es";
const conformanceStore = useConformanceStore();
const {
@@ -373,7 +374,7 @@ emitter.on("actListData", (data) => {
state.containstTasksData = data;
});
emitter.on("actRadioData", (newData) => {
const data = JSON.parse(JSON.stringify(newData)); // Deep copy the original cases data
const data = cloneDeep(newData);
const categoryMapping = {
cfmSeqStart: ["Start", "selectCfmSeqStart", "selectCfmSeqEnd"],

25
src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
View File

@@ -240,6 +240,7 @@ import { storeToRefs } from "pinia";
import { useConformanceStore } from "@/stores/conformance";
import emitter from "@/utils/emitter";
import TimeRangeDuration from "@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue";
import { cloneDeep } from "lodash-es";
const conformanceStore = useConformanceStore();
const {
@@ -613,21 +614,15 @@ emitter.on("isRadioChange", (data) => {
switch (selectedRuleType.value) {
case "Processing time":
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
state.timeCfmPtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmPtEteAll),
);
state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
break;
case "Waiting time":
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
state.timeCfmWtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmWtEteAll),
);
state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
break;
case "Cycle time":
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
state.timeCfmCtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmCtEteAll),
);
state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
break;
default:
break;
@@ -645,21 +640,15 @@ emitter.on("isRadioActSeqMoreChange", (data) => {
switch (selectedRuleType.value) {
case "Processing time":
state.timeCfmPtEteAll = getDurationTime(cfmPtEteWhole.value, "all");
state.timeCfmPtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmPtEteAll),
);
state.timeCfmPtEteAllDefault = cloneDeep(state.timeCfmPtEteAll);
break;
case "Waiting time":
state.timeCfmWtEteAll = getDurationTime(cfmWtEteWhole.value, "all");
state.timeCfmWtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmWtEteAll),
);
state.timeCfmWtEteAllDefault = cloneDeep(state.timeCfmWtEteAll);
break;
case "Cycle time":
state.timeCfmCtEteAll = getDurationTime(cfmCtEteWhole.value, "all");
state.timeCfmCtEteAllDefault = JSON.parse(
JSON.stringify(state.timeCfmCtEteAll),
);
state.timeCfmCtEteAllDefault = cloneDeep(state.timeCfmCtEteAll);
break;
default:
break;

9
src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
View File

@@ -36,6 +36,7 @@
import { ref, watch } from "vue";
import Durationjs from "@/components/DurationInput.vue";
import { cloneDeep } from "lodash-es";
const props = defineProps(["time", "select"]);
const emit = defineEmits(["min-total-seconds", "max-total-seconds"]);
@@ -55,10 +56,10 @@ const durationMax = ref(null);
/** Deep-copies timeData min/max values to the Vue component boundaries. */
function setTimeValue() {
// Deep copy the original timeData values
minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
minVuemin.value = cloneDeep(timeData.value.min);
minVuemax.value = cloneDeep(timeData.value.max);
maxVuemin.value = cloneDeep(timeData.value.min);
maxVuemax.value = cloneDeep(timeData.value.max);
}
/**

5
src/components/Discover/Conformance/MoreModal.vue
View File

@@ -125,6 +125,7 @@ import { ref, computed, watch, nextTick, useTemplateRef, onBeforeUnmount } from
import { storeToRefs } from "pinia";
import { useConformanceStore } from "@/stores/conformance";
import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
import { cloneDeep } from "lodash-es";
const props = defineProps([
"listModal",
@@ -183,7 +184,7 @@ const traceList = computed(() => {
const caseData = computed(() => {
if (infiniteData.value !== null) {
const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
const data = cloneDeep(infiniteData.value);
data.forEach((item) => {
item.facets.forEach((facet, index) => {
item[`fac_${index}`] = facet.value; // Create a new key-value pair
@@ -201,7 +202,7 @@ const caseData = computed(() => {
});
const columnData = computed(() => {
const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
const data = cloneDeep(props.cases);
if (!data || data.length === 0) return [];
const facetName = (facName) =>
facName

5
src/components/Discover/Map/Filter/TraceFilter.vue
View File

@@ -136,6 +136,7 @@ import { storeToRefs } from "pinia";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useLoadingStore } from "@/stores/loading";
import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
import { cloneDeep } from "lodash-es";
const emit = defineEmits(["filter-trace-selectArea"]);
@@ -228,7 +229,7 @@ const chartData = computed(() => {
});
const caseData = computed(() => {
const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
const data = cloneDeep(infiniteData.value);
data.forEach((item) => {
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -239,7 +240,7 @@ const caseData = computed(() => {
});
const columnData = computed(() => {
const data = JSON.parse(JSON.stringify(baseCases.value)); // Deep copy the original cases data
const data = cloneDeep(baseCases.value);
let result = [
{ field: "id", header: "Case Id" },
{ field: "started_at", header: "Start time" },

7
src/components/Discover/Map/SidebarTraces.vue
View File

@@ -115,6 +115,7 @@ import { storeToRefs } from "pinia";
import { useLoadingStore } from "@/stores/loading";
import { useAllMapDataStore } from "@/stores/allMapData";
import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
import { cloneDeep } from "lodash-es";
const props = defineProps(["sidebarTraces", "cases"]);
const emit = defineEmits(["switch-Trace-Id"]);
@@ -164,7 +165,7 @@ const traceList = computed(() => {
});
const caseData = computed(() => {
const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
const data = cloneDeep(infiniteData.value);
data.forEach((item) => {
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // Create a new key-value pair
@@ -175,7 +176,7 @@ const caseData = computed(() => {
});
const columnData = computed(() => {
const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
const data = cloneDeep(props.cases);
let result = [
{ field: "id", header: "Case Id" },
{ field: "started_at", header: "Start time" },
@@ -215,7 +216,7 @@ watch(showTraceId, (newValue, oldValue) => {
watch(infiniteFirstCases, (newValue) => {
if (infiniteFirstCases.value)
infiniteData.value = JSON.parse(JSON.stringify(newValue));
infiniteData.value = cloneDeep(newValue);
});
/**