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

2023-03-23 22:07:03 +08:00 · 2023-03-23 22:07:03 +08:00 · 5eccbc9758
parent 4578810ab9
commit 5eccbc9758
11 changed files with 238 additions and 130 deletions
--- a/src/store/scene.ts
+++ b/src/store/scene.ts
@ -32,14 +32,20 @@ export const defaultBranches = [
      {
        terms: [
          {
-            column: undefined,
-            value: {
-              source: 'fixed',
-              value: undefined
-            },
-            termType: undefined,
-            key: 'params_1',
+            terms: [
+              {
+                column: undefined,
+                value: {
+                  source: 'fixed',
+                  value: undefined
+                },
+                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,
--- a/src/utils/request.ts
+++ b/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)
--- a/src/views/rule-engine/Scene/Save/action/ListItem/FilterCondition.vue
+++ b/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
--- a/src/views/rule-engine/Scene/Save/components/Terms/Branches.vue
+++ b/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 = {
-    key: `when_${new Date().getTime()}`,
+  const terms = {
    type: 'and',
    terms: [
      {
-        column: undefined,
-        value: {
-          source: 'fixed',
-          value: undefined
-        },
-        termType: undefined,
-        key: 'params_1',
+        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.name].when.push(whenItem)
-  FormModel.value.branches?.push(null)
+  FormModel.value.branches?.[props.name].when?.push(terms)
+  FormModel.value.branches?.push(null as any)
+  FormModel.value.options!.when[props.name]?.terms.push({ termType: '并且', terms: [['','eq','','and']]})
 }

 const optionsClass = computed(() => {
--- a/src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue
+++ b/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.options!.when[props.whenName].terms[props.termsName].terms[props.name].push(['', '', '', '并且'])
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.[props.termsName]?.terms?.push(terms)
+  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.options!.when[props.whenName].terms[props.termsName].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.branchName].terms[props.whenName].terms.splice(props.name, 1)
 }

 nextTick(() => {
--- a/src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue
+++ b/src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue
@ -1,67 +1,46 @@
 <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[whenName].type'
-          @select='typeChange'
-        />
+  <div
+    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>
-      <div
-        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-popconfirm>

-        <j-form-item
-          v-for='(item, index) in termsData'
-          :key='item.key'
-          :name='["branches", branchName, "when", whenName, "terms", index]'
-          :rules='rules'
-        >
-          <ParamsItem
-            v-model:value='formModel.branches[branchName].when[whenName].terms[index]'
-            :isFirst='index === 0'
-            :isLast='index === termsData.length - 1'
-            :showDeleteBtn='termsData.length !== 1'
-            :name='index'
-            :termsName='name'
-            :whenName='whenName'
-            :branchName='branchName'
-          />
-        </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>
+    <j-form-item
+      v-for='(item, index) in termsData'
+      :key='item.key'
+      :name='["branches", branchName, "when", whenName, "terms", props.name, "terms", index]'
+      :rules='rules'
+    >
+      <ParamsItem
+        v-model:value='formModel.branches[branchName].when[whenName].terms[props.name].terms[index]'
+        :isFirst='index === 0'
+        :isLast='index === termsData.length - 1'
+        :showDeleteBtn='termsData.length !== 1'
+        :name='index'
+        :termsName='name'
+        :whenName='whenName'
+        :branchName='branchName'
+      />
+    </j-form-item>
  </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 (
-            isArray(v.value.value) &&
-            v.value.value.some((_v: any) => _v === undefined)
-          ) {
-            return Promise.reject(new Error('请选择或输入参数值'));
-          } else if (v.value.value === undefined) {
-            return Promise.reject(new Error('请选择或输入参数值'));
-          }
+        }
+        if (
+          isArray(v.value.value) &&
+          v.value.value.some((_v: any) => _v === 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.options!.when[props.whenName].terms.splice(props.name, 1)
-}
-
-const typeChange = (e: any) => {
-  formModel.value.options!.when[props.whenName].terms[props.name].termType = e.label
+  formModel.value.branches?.[props.branchName]?.when?.splice(props.whenName, 1)
+  formModel.value.options!.when[props.branchName].terms.splice(props.whenName, 1)
 }

 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.options!.when[props.whenName].push({
-    terms: [{ termType: '并且', terms: [['','eq','','and']]}]
-  })
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName].terms?.push(terms)
+  formModel.value.options!.when[props.branchName].terms[props.whenName].terms.push(['','eq','','and'])
 }

 </script>
--- a/src/views/rule-engine/Scene/Save/components/Terms/WhenItem.vue
+++ b/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>
--- a/src/views/rule-engine/Scene/Save/components/Terms/index.less
+++ b/src/views/rule-engine/Scene/Save/components/Terms/index.less
@ -113,6 +113,7 @@
 }

 .terms-params {
+  position: relative;
  display: flex;
  flex-shrink: 0;

--- a/src/views/rule-engine/Scene/Save/index.vue
+++ b/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')
--- a/vite.config.ts
+++ b/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://192.168.33.46:8844', // 本地开发环境
+                  target: 'http://120.77.179.54:8844', // 120测试
+                  // target: 'http://192.168.33.46:8844', // 本地开发环境
                  ws: 'ws://192.168.33.46:8844',
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
--- a/yarn.lock
+++ b/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"
-  integrity sha512-guypzc4QurKHfVoDrCo28Bx721kbTx8/W9r8jROWINI0J11ZTRi5bMmqK/2783Jg4kI0s4wZBWebRbIHBgoCyA==
+  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#8cb5c9e68e46e6e7eebc0d96b1cdaab24828779f"
+  integrity sha512-yIbmplK+twekevr7n+dGMvO8tvyIqguC60TWeJCmx2mUqpwv8dEnr/cwwpJee4PBLWohvGPywsYgmm7KxVBbcw==
  dependencies:
    "@vueuse/core" "^9.12.0"
    ant-design-vue "^3.2.15"