fix: 修复场景联动数据结构

src/store/scene.ts

@@ -32,14 +32,20 @@ export const defaultBranches = [
       {
         terms: [
           {
-            column: undefined,
+            terms: [
-            value: {
+              {
-              source: 'fixed',
+                column: undefined,
-              value: undefined
+                value: {
-            },
+                  source: 'fixed',
-            termType: undefined,
+                  value: undefined
-            key: 'params_1',
+                },
+                termType: undefined,
+                key: 'params_1',
+                type: 'and',
+              },
+            ],
             type: 'and',
+            key: 'terms_1_terms_1',
           },
         ],
         type: 'and',
@@ -79,9 +85,22 @@ export const useSceneStore = defineStore('scene', () => {
     name: '',
     id: undefined
   })
+
   const productCache = {}
 
+  const refresh = () => {
+    data.value = {
+      trigger: { type: ''},
+      options: cloneDeep(defaultOptions),
+      branches: cloneDeep(defaultBranches),
+      description: '',
+      name: '',
+      id: undefined
+    }
+  }
+
   const getDetail = async (id: string) => {
+    refresh()
     const resp = await detail(id)
     if (resp.success) {
       const result = resp.result as any
@@ -114,17 +133,6 @@ export const useSceneStore = defineStore('scene', () => {
     }
   }
 
-  const refresh = () => {
-    data.value = {
-      trigger: { type: ''},
-      options: cloneDeep(defaultOptions),
-      branches: cloneDeep(defaultBranches),
-      description: '',
-      name: '',
-      id: undefined
-    }
-  }
-
   return {
     data,
     productCache,

src/utils/request.ts

@@ -145,6 +145,7 @@ const errorHandler = (error: any) => {
             showNotification( 'Request Error', (data.message + '').substr(0, 90), '400')
         } else if (status === 401) {
             showNotification( 'Unauthorized', '用户未登录', '401')
+            console.log('showNotification')
             setTimeout(() => {
                 location.href = `/#${LoginPath}`
             }, 0)

src/views/rule-engine/Scene/Save/action/ListItem/FilterCondition.vue

@@ -210,12 +210,6 @@ watch(() => [columnOptions.value, paramsValue.column], () => {
   }
 })
 
-watchEffect(() => {
-  if (!props.value.error && props.value.column) { // 新增不查找option
-
-  }
-})
-
 const showDouble = computed(() => {
   const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
   return isRange

src/views/rule-engine/Scene/Save/components/Terms/Branches.vue

@@ -29,7 +29,7 @@
 
         <div class='actions-terms-list-content'>
           <template v-if='showWhen'>
-            <TermsItem
+            <WhenItem
               v-for='(item, index) in whenData'
               :key='item.key'
               :name='index'
@@ -37,9 +37,7 @@
               :isFirst='index === 0'
               :isLast='index === whenData.length -1'
               :branchName='name'
-              :whenName='index'
               :data='item'
-              :isFrist='index === 0'
             />
           </template>
           <span v-else class='when-add' @click='addWhen' :style='{ padding: isFirst ? "16px 0" : 0 }'>
@@ -67,10 +65,11 @@
 <script lang='ts' setup name='Branches'>
 import type { PropType } from 'vue'
 import type { ActionBranchesProps } from '@/views/rule-engine/Scene/typings'
-import TermsItem from './TermsItem.vue'
+import WhenItem from './WhenItem.vue'
 import { storeToRefs } from 'pinia';
 import { useSceneStore } from 'store/scene'
 import Action from '../../action/index.vue'
+import { randomString } from '@/utils/utils'
 
 const sceneStore = useSceneStore()
 const { data: FormModel } = storeToRefs(sceneStore)
@@ -110,7 +109,11 @@ const whenData = computed(() => {
 })
 
 const onDelete = () => {
-  FormModel.value.branches?.splice(props.name, 1)
+  if (FormModel.value.branches?.length == 2) {
+    FormModel.value.branches?.splice(props.name, 1, null)
+  } else {
+    FormModel.value.branches?.splice(props.name, 1)
+  }
 }
 
 const onDeleteAll = () => {
@@ -133,24 +136,31 @@ const mouseout = () => {
 }
 
 const addWhen = () => {
-  const whenItem = {
+  const terms = {
-    key: `when_${new Date().getTime()}`,
     type: 'and',
     terms: [
       {
-        column: undefined,
+        terms: [
-        value: {
+          {
-          source: 'fixed',
+            column: undefined,
-          value: undefined
+            value: {
-        },
+              source: 'fixed',
-        termType: undefined,
+              value: undefined
-        key: 'params_1',
+            },
+            termType: undefined,
+            key: `params_${randomString()}`,
+            type: 'and',
+          }
+        ],
+        key: `terms_2_${randomString()}`,
         type: 'and',
       }
-    ]
+    ],
+    key: `terms_${randomString()}`
   }
-  FormModel.value.branches?.[props.name].when.push(whenItem)
+  FormModel.value.branches?.[props.name].when?.push(terms)
-  FormModel.value.branches?.push(null)
+  FormModel.value.branches?.push(null as any)
+  FormModel.value.options!.when[props.name]?.terms.push({ termType: '并且', terms: [['','eq','','and']]})
 }
 
 const optionsClass = computed(() => {

src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue

@@ -240,10 +240,11 @@ const columnSelect = (option: any) => {
     value: undefined
   }
   handOptionByColumn(option)
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name][0] = option.name
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name][1] = paramsValue.termType
   emit('update:value', { ...paramsValue })
   formItemContext.onFieldChange()
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][0] = option.name
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][1] = paramsValue.termType
+
 }
 
 const termsTypeSelect = (e: { key: string, name: string }) => {
@@ -252,18 +253,20 @@ const termsTypeSelect = (e: { key: string, name: string }) => {
     source: tabsOptions.value[0].key,
     value: value
   }
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name][1] = e.name
   emit('update:value', { ...paramsValue })
   formItemContext.onFieldChange()
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][1] = e.name
+
 }
 
 const valueSelect = (_: any, label: string, labelObj: Record<number, any>) => {
+  emit('update:value', { ...paramsValue })
   formItemContext.onFieldChange()
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name][2] = labelObj
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][2] = labelObj
 }
 
 const typeSelect = (e: any) => {
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name][3] = e.label
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][3] = e.label
 }
 
 const termAdd = () => {
@@ -277,13 +280,13 @@ const termAdd = () => {
     type: 'and',
     key: `params_${new Date().getTime()}`
   }
-  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.push(terms)
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.[props.termsName]?.terms?.push(terms)
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms[props.name].push(['', '', '', '并且'])
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.termsName].push(['', '', '', '并且'])
 }
 
 const onDelete = () => {
-  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.splice(props.name, 1)
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.[props.termsName]?.terms?.splice(props.name, 1)
-  formModel.value.options!.when[props.whenName].terms[props.termsName].terms.splice(props.name, 1)
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms.splice(props.name, 1)
 }
 
 nextTick(() => {

src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue

@@ -1,67 +1,46 @@
 <template>
-  <div class='terms-params'>
+  <div
-    <div class='terms-params-warp'>
+    class='terms-params-content'
-      <div v-if='!isFirst' class='term-type-warp'>
+    @mouseover='mouseover'
-        <DropdownButton
+    @mouseout='mouseout'
-          :options='[
+  >
-            { label: "并且", value: "and" },
+    <j-popconfirm
-            { label: "或者", value: "or" },
+      title='确认删除？'
-          ]'
+      @confirm='onDelete'
-          type='type'
+    >
-          v-model:value='formModel.branches[branchName].when[whenName].type'
+      <div v-show='showDelete' class='terms-params-delete'>
-          @select='typeChange'
+        <AIcon type='CloseOutlined' />
-        />
       </div>
-      <div
+    </j-popconfirm>
-        class='terms-params-content'
-        @mouseover='mouseover'
-        @mouseout='mouseout'
-      >
-        <j-popconfirm
-          title='确认删除？'
-          @confirm='onDelete'
-        >
-          <div v-show='showDelete' class='terms-params-delete'>
-            <AIcon type='CloseOutlined' />
-          </div>
-        </j-popconfirm>
 
-        <j-form-item
+    <j-form-item
-          v-for='(item, index) in termsData'
+      v-for='(item, index) in termsData'
-          :key='item.key'
+      :key='item.key'
-          :name='["branches", branchName, "when", whenName, "terms", index]'
+      :name='["branches", branchName, "when", whenName, "terms", props.name, "terms", index]'
-          :rules='rules'
+      :rules='rules'
-        >
+    >
-          <ParamsItem
+      <ParamsItem
-            v-model:value='formModel.branches[branchName].when[whenName].terms[index]'
+        v-model:value='formModel.branches[branchName].when[whenName].terms[props.name].terms[index]'
-            :isFirst='index === 0'
+        :isFirst='index === 0'
-            :isLast='index === termsData.length - 1'
+        :isLast='index === termsData.length - 1'
-            :showDeleteBtn='termsData.length !== 1'
+        :showDeleteBtn='termsData.length !== 1'
-            :name='index'
+        :name='index'
-            :termsName='name'
+        :termsName='name'
-            :whenName='whenName'
+        :whenName='whenName'
-            :branchName='branchName'
+        :branchName='branchName'
-          />
+      />
-        </j-form-item>
+    </j-form-item>
-      </div>
-      <div class='terms-group-add' @click='addTerms' v-if='isLast'>
-        <div class='terms-content'>
-          <AIcon type='PlusOutlined' />
-          <span>分组</span>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang='ts' name='TermsItem'>
 import type { PropType } from 'vue'
 import type { TermsType } from '@/views/rule-engine/Scene/typings'
-import DropdownButton from '../DropdownButton'
 import { storeToRefs } from 'pinia';
 import { useSceneStore } from 'store/scene'
 import ParamsItem from './ParamsItem.vue'
 import { isArray } from 'lodash-es'
+import { randomString } from '@/utils/utils'
 
 const sceneStore = useSceneStore()
 const { data: formModel } = storeToRefs(sceneStore)
@@ -107,7 +86,7 @@ const props = defineProps({
 
 const rules = [
   {
-    validator(_: any, v: any) {
+    validator: async (_: any, v: any) => {
       if (v !== undefined && !v.error) {
         if (!Object.keys(v).length) {
           return Promise.reject(new Error('该数据已发生变更，请重新配置'));
@@ -115,22 +94,17 @@ const rules = [
         if (!v.column) {
           return Promise.reject(new Error('请选择参数'));
         }
-
         if (!v.termType) {
           return Promise.reject(new Error('请选择操作符'));
         }
-
         if (!v.value?.value) {
           return Promise.reject(new Error('请选择或输入参数值'));
-        } else {
+        }
-          if (
+        if (
-            isArray(v.value.value) &&
+          isArray(v.value.value) &&
-            v.value.value.some((_v: any) => _v === undefined)
+          v.value.value.some((_v: any) => _v === undefined)
-          ) {
+        ) {
-            return Promise.reject(new Error('请选择或输入参数值'));
+          return Promise.reject(new Error('请选择或输入参数值'));
-          } else if (v.value.value === undefined) {
-            return Promise.reject(new Error('请选择或输入参数值'));
-          }
         }
       } else {
         return Promise.reject(new Error('请选择参数'));
@@ -159,12 +133,8 @@ const mouseout = () => {
 }
 
 const onDelete = () => {
-  formModel.value.branches?.[props.branchName]?.when?.splice(props.name, 1)
+  formModel.value.branches?.[props.branchName]?.when?.splice(props.whenName, 1)
-  formModel.value.options!.when[props.whenName].terms.splice(props.name, 1)
+  formModel.value.options!.when[props.branchName].terms.splice(props.whenName, 1)
-}
-
-const typeChange = (e: any) => {
-  formModel.value.options!.when[props.whenName].terms[props.name].termType = e.label
 }
 
 const addTerms = () => {
@@ -178,16 +148,14 @@ const addTerms = () => {
           value: undefined
         },
         termType: undefined,
-        key: 'params_1',
+        key: `params_${randomString()}`,
         type: 'and',
       }
     ],
-    key: `terms_${new Date().getTime()}`
+    key: `terms_${randomString()}`
   }
-  formModel.value.branches?.[props.branchName]?.when?.push(terms)
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName].terms?.push(terms)
-  formModel.value.options!.when[props.whenName].push({
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms.push(['','eq','','and'])
-    terms: [{ termType: '并且', terms: [['','eq','','and']]}]
-  })
 }
 
 </script>

src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class='terms-params'>
+    <div class='terms-params-warp'>
+      <div v-if='!isFirst' class='term-type-warp'>
+        <DropdownButton
+          :options='[
+              { label: "并且", value: "and" },
+              { label: "或者", value: "or" },
+            ]'
+          type='type'
+          v-model:value='formModel.branches[branchName].when[name].type'
+          @select='typeChange'
+        />
+      </div>
+      <TermsItem
+        v-for='(item, index) in termsData'
+        :key='item.key'
+        :branchName='branchName'
+        :whenName='props.name'
+        :name='index'
+        :showDeleteBtn='showDeleteBtn'
+        :isFirst='index === 0'
+        :isLast='index === termsData.length -1'
+        :data='item'
+      />
+      <div class='terms-group-add' @click='addWhen' v-if='isLast'>
+        <div class='terms-content'>
+          <AIcon type='PlusOutlined' />
+          <span>分组</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='WhenItem'>
+import type { PropType } from 'vue'
+import TermsItem from './TermsItem.vue'
+import { TermsType } from '@/views/rule-engine/Scene/typings'
+import { useSceneStore } from 'store/scene'
+import DropdownButton from '../DropdownButton'
+import { storeToRefs } from 'pinia';
+import { randomString } from '@/utils/utils'
+
+const sceneStore = useSceneStore()
+const { data: formModel } = storeToRefs(sceneStore)
+
+const props = defineProps({
+  isFirst: {
+    type: Boolean,
+    default: true
+  },
+  data: {
+    type: Object as PropType<TermsType>,
+    default: () => ({
+      when: [],
+      shakeLimit: {},
+      then: []
+    })
+  },
+  showDeleteBtn: {
+    type: Boolean,
+    default: true
+  },
+  class: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: Number,
+    default: 0
+  },
+  branchName: {
+    type: Number,
+    default: 0
+  },
+  isLast: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const termsData = computed(() => {
+  return props.data.terms
+})
+
+const typeChange = (e: any) => {
+  formModel.value.options!.when[props.name].terms[props.name].termType = e.label
+}
+
+const addWhen = () => {
+  const terms = {
+    type: 'and',
+    terms: [
+      {
+        terms: [
+          {
+            column: undefined,
+            value: {
+              source: 'fixed',
+              value: undefined
+            },
+            termType: undefined,
+            key: `params_${randomString()}`,
+            type: 'and',
+          }
+        ],
+        key: `terms_2_${randomString()}`,
+        type: 'and',
+      }
+    ],
+    key: `terms_${randomString()}`
+  }
+  formModel.value.branches?.[props.branchName]?.when?.push(terms)
+  formModel.value.options?.when?.[props.branchName]?.terms.push({ termType: '并且', terms: [['','eq','','and']]})
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/views/rule-engine/Scene/Save/components/Terms/index.less

@@ -113,6 +113,7 @@
 }
 
 .terms-params {
+  position: relative;
   display: flex;
   flex-shrink: 0;
 

src/views/rule-engine/Scene/Save/index.vue

@@ -65,7 +65,8 @@ const save = async () => {
   const formData = await sceneForm.value.validateFields()
   if (formData) {
     loading.value = true
-    const resp = await modify(data.value.id!, data.value).then(res => res)
+    const branches = data.value.branches?.filter(item => item)
+    const resp = await modify(data.value.id!, { ...data.value, branches }).then(res => res)
     loading.value = false
     if (resp.success) {
       menuStore.jumpPage('rule-engine/Scene')

vite.config.ts

@@ -92,8 +92,8 @@ export default defineConfig(({ mode}) => {
               [env.VITE_APP_BASE_API]: {
                   // target: 'http://192.168.33.22:8800',
                   // target: 'http://192.168.32.244:8881',
-                  // target: 'http://120.77.179.54:8844', // 120测试
+                  target: 'http://120.77.179.54:8844', // 120测试
-                  target: 'http://192.168.33.46:8844', // 本地开发环境
+                  // target: 'http://192.168.33.46:8844', // 本地开发环境
                   ws: 'ws://192.168.33.46:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')

yarn.lock

@@ -3700,8 +3700,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.5:
   version "1.0.5"
-  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#147926716787ac22464b5ce81180ce43a93e40cc"
+  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#8cb5c9e68e46e6e7eebc0d96b1cdaab24828779f"
-  integrity sha512-guypzc4QurKHfVoDrCo28Bx721kbTx8/W9r8jROWINI0J11ZTRi5bMmqK/2783Jg4kI0s4wZBWebRbIHBgoCyA==
+  integrity sha512-yIbmplK+twekevr7n+dGMvO8tvyIqguC60TWeJCmx2mUqpwv8dEnr/cwwpJee4PBLWohvGPywsYgmm7KxVBbcw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"