refactor: change property assignment logic in DialogProperties to options store

src/components/dialog/DialogProperties.vue

@@ -271,33 +271,7 @@ function confirmDelete(items: unknown[], index: number) {
 }
 
 async function assignTemp() {
-  const res = await getPropertyList({ pageSize: 999, activeOnly: true });
+  propertiesOption.value = optionStore.globalOption?.propertiesField;
-  const targetOptions = optionStore.globalOption?.propertiesField ?? [];
-
-  if (!res) return;
-
-  const propList = res.result.map((v) => {
-    return {
-      label: locale.value === 'eng' ? v.nameEN : v.name,
-      value: toCamelCase(v.nameEN),
-      type: v.type.type,
-    };
-  });
-
-  propertiesOption.value = [...targetOptions];
-
-  const existingValues = new Set(
-    propertiesOption.value.map((item: { value: string }) => item.value),
-  );
-  const newProps = propList.filter((prop) => !existingValues.has(prop.value));
-
-  if (newProps) {
-    propertiesOption.value.splice(
-      propertiesOption.value.length - 4,
-      0,
-      ...newProps,
-    );
-  }
 
   tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
   tempWorkflowId.value = workflowId.value;

src/stores/options/index.ts

@@ -1,8 +1,11 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useProperty } from 'src/stores/property';
+import { toCamelCase } from '../utils';
 
 const useOptionStore = defineStore('optionStore', () => {
+  const { getPropertyList } = useProperty();
   const { locale } = useI18n();
 
   const globalOption = ref();
@@ -12,6 +15,36 @@ const useOptionStore = defineStore('optionStore', () => {
     rawOption.value = await fetch('/option/option.json').then((r) => r.json());
 
     _switchOptionLang();
+
+    const res = await getPropertyList({ pageSize: 999, activeOnly: true });
+    const targetOptions = globalOption.value?.propertiesField ?? [];
+
+    if (!res) return;
+
+    const propList = res.result.map((v) => {
+      return {
+        label: locale.value === 'eng' ? v.nameEN : v.name,
+        value: toCamelCase(v.nameEN),
+        type: v.type.type,
+      };
+    });
+
+    globalOption.value.propertiesField = [...targetOptions];
+
+    const existingValues = new Set(
+      globalOption.value.propertiesField.map(
+        (item: { value: string }) => item.value,
+      ),
+    );
+    const newProps = propList.filter((prop) => !existingValues.has(prop.value));
+
+    if (newProps) {
+      globalOption.value.propertiesField.splice(
+        globalOption.value.propertiesField.length - 4,
+        0,
+        ...newProps,
+      );
+    }
   })();
 
   watch(locale, _switchOptionLang);