update: 优化场景联动-执行动作、过滤条件校验

2023-03-20 17:31:26 +08:00 · 2023-03-20 17:31:26 +08:00 · faccbc53f7
parent a094b9b093
commit faccbc53f7
14 changed files with 196 additions and 127 deletions
--- a/src/store/scene.ts
+++ b/src/store/scene.ts
@ -33,7 +33,10 @@ export const defaultBranches = [
        terms: [
          {
            column: undefined,
-            value: undefined,
+            value: {
+              source: 'fixed',
+              value: undefined
+            },
            termType: undefined,
            key: 'params_1',
            type: 'and',
@ -89,6 +92,8 @@ export const useSceneStore = defineStore('scene', () => {
        branches = cloneDeep(defaultBranches)
        if (triggerType === 'device') {
          branches.push(null)
+        } else {
+          branches[0].when.length = []
        }
      } else {
        const branchesLength = branches.length;
--- a/src/views/rule-engine/Scene/Save/Device/AddModal.vue
+++ b/src/views/rule-engine/Scene/Save/Device/AddModal.vue
@ -59,10 +59,12 @@ import { detail as deviceDetail } from '@/api/device/instance'
 import Product from './Product.vue'
 import DeviceSelect from './DeviceSelect.vue'
 import Type from './Type.vue'
-import {continuousValue, handleTimerOptions, timeUnitEnum} from '@/views/rule-engine/Scene/Save/components/Timer/util'
+import { handleTimerOptions } from '@/views/rule-engine/Scene/Save/components/Timer/util'
+import { Form } from 'jetlinks-ui-components'

 type Emit = {
  (e: 'cancel'): void
+  (e: 'change', data: TriggerDevice): void
  (e: 'save', data: TriggerDevice, options: Record<string, any>): void
 }

@ -76,6 +78,7 @@ interface AddModelType extends Omit<TriggerDevice, 'selectorValues'> {
  metadata: metadataType,
  operator: TriggerDeviceOptions
 }
+const formItemContext = Form.useInjectFormItemContext();

 const emit = defineEmits<Emit>()
 const typeRef = ref()
@ -165,26 +168,6 @@ const handleOptions = (data: TriggerDeviceOptions) => {
    _options.when = when;
    _options.time = time;
    _options.extraTime = extraTime;
-    // if (_timer.trigger === 'cron') {
-    //   _options.time = _timer.cron;
-    // } else {
-    //   // console.log('continuousValue', continuousValue(_timer.when! || [], _timer!.trigger))
-    //   let whenStr = '每天';
-    //   if (_timer.when!.length) {
-    //     whenStr = _timer!.trigger === 'week' ? '每周' : '每月';
-    //     const whenStrArr = continuousValue(_timer.when! || [], _timer!.trigger);
-    //     const whenStrArr3 = whenStrArr.splice(0, 3);
-    //     whenStr += whenStrArr3.join('、');
-    //     whenStr += `等${_timer.when!.length}天`;
-    //   }
-    //   _options.when = whenStr;
-    //   if (_timer.once) {
-    //     _options.time = _timer.once.time + ' 执行1次';
-    //   } else if (_timer.period) {
-    //     _options.time = _timer.period.from + '-' + _timer.period.to;
-    //     _options.extraTime = `每${_timer.period.every}${timeUnitEnum[_timer.period.unit]}执行1次`;
-    //   }
-    // }
  }

  if (data.operator === 'online') {
@ -263,6 +246,7 @@ const save = async (step?: number) => {
        productId: addModel.productId
      }
      emit('save', data, _options)
+      formItemContext.onFieldChange()
    }
  }
 }
--- a/src/views/rule-engine/Scene/Save/Device/DeviceList.vue
+++ b/src/views/rule-engine/Scene/Save/Device/DeviceList.vue
@ -75,7 +75,6 @@ type Emit = {
 }

 const params = ref({})
-const context = inject('SceneDeviceAddModel')
 const props = defineProps({
  rowKeys: {
    type: Array as PropType<SelectorValuesItem[]>,
--- a/src/views/rule-engine/Scene/Save/Device/index.vue
+++ b/src/views/rule-engine/Scene/Save/Device/index.vue
@ -2,7 +2,7 @@
  <div class='device'>
    <j-form-item
      :rules='rules'
-      name='device'
+      :name='["trigger", "device"]'
    >
      <template #label>
        <TitleComponent data='触发规则' style='font-size: 14px;' />
@ -13,9 +13,9 @@
      >
        <Title :options='data.options.trigger' />
      </AddButton>
+      <AddModel v-if='visible' @cancel='visible = false' @save='save' :value='data.trigger.device' :options='data.options.trigger' />
    </j-form-item>
    <Terms />
-    <AddModel v-if='visible' @cancel='visible = false' @save='save' :value='data.trigger.device' :options='data.options.trigger' />
  </div>
 </template>

@ -28,6 +28,7 @@ import Title from '../components/Title.vue'
 import Terms from '../components/Terms'
 import type { TriggerDevice } from '@/views/rule-engine/Scene/typings'

+
 const sceneStore = useSceneStore()
 const { data } = storeToRefs(sceneStore)

@ -45,6 +46,7 @@ const rules = [{
 const save = (device: TriggerDevice, options: Record<string, any>) => {
  data.value.trigger!.device = device
  data.value.options!.trigger = options
+  visible.value = false
 }

 </script>
--- a/src/views/rule-engine/Scene/Save/Timer/index.vue
+++ b/src/views/rule-engine/Scene/Save/Timer/index.vue
@ -79,6 +79,7 @@ const onActionUpdate = (_data: any, type: boolean) => {
 const save = (_data: OperationTimer, options: Record<string, any>) => {
  data.value.trigger!.timer = _data
  data.value.options!.trigger = options
+  visible.value = false
 }
 </script>

--- a/src/views/rule-engine/Scene/Save/action/ListItem/FilterGroup.vue
+++ b/src/views/rule-engine/Scene/Save/action/ListItem/FilterGroup.vue
@ -172,7 +172,6 @@ const onDelete = () => {
 const rules = [
  {
    validator(_: any, v?: Record<string, any>) {
-      console.log('-----v',v)
      if (v !== undefined) {
        if (!Object.keys(v).length) {
          return Promise.reject(new Error('该数据已发生变更，请重新配置'))
--- a/src/views/rule-engine/Scene/Save/action/ListItem/Item.vue
+++ b/src/views/rule-engine/Scene/Save/action/ListItem/Item.vue
@ -349,7 +349,7 @@
                        />
                    </div>
                </template>
-                <div v-else class="filter-add-button">
+                <div v-else class="filter-add-button" @click='addFilterParams'>
                    <AIcon type="PlusOutlined" style="padding-right: 4px" />
                    <span>添加过滤条件</span>
                </div>
@ -394,6 +394,7 @@ import { useSceneStore } from '@/store/scene';
 import { storeToRefs } from 'pinia';
 import { iconMap, itemNotifyIconMap, typeIconMap } from './util';
 import FilterGroup from './FilterGroup.vue';
+import { randomString } from '@/utils/utils'

 const sceneStore = useSceneStore();
 const { data: _data } = storeToRefs(sceneStore);
@ -471,6 +472,30 @@ const onSave = (data: ActionsType, options: any) => {
    visible.value = false;
 };

+const addFilterParams = () => {
+  const item: any = {
+    type: 'and',
+    key: randomString(),
+    terms: [
+      {
+        column: undefined,
+        value: {
+          type: 'fixed',
+          value: undefined
+        },
+        termType: undefined,
+        type: 'and',
+        key: randomString()
+      }
+    ]
+  }
+  if (_data.value.branches![props.branchesName].then[props.thenName].actions[props.name].terms) {
+    _data.value.branches![props.branchesName].then[props.thenName].actions[props.name].terms!.push(item)
+  } else {
+    _data.value.branches![props.branchesName].then[props.thenName].actions[props.name].terms = [item]
+  }
+}
+
 const onAdd = () => {
    visible.value = true;
 };
--- a/src/views/rule-engine/Scene/Save/action/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/index.vue
@ -1,57 +1,57 @@
 <template>
-  <div class="actions">
-    <div class="actions-title">
+  <div class='actions'>
+    <div class='actions-title'>
      <span>执行</span>
      <ShakeLimit
-        v-if="props.openShakeLimit"
-        v-model:value="FormModel.branches[name].shakeLimit"
+        v-if='props.openShakeLimit'
+        v-model:value='FormModel.branches[name].shakeLimit'
      />
    </div>
-    <div class="actions-warp">
-      <j-collapse v-model:activeKey="activeKeys">
-        <j-collapse-panel key="1">
+    <div class='actions-warp'>
+      <j-collapse v-model:activeKey='activeKeys'>
+        <j-collapse-panel key='1'>
          <template #header>
                          <span>
                              串行
-                              <span class="panel-tip">
+                              <span class='panel-tip'>
                                  按顺序依次执行动作，适用于基于动作输出参数，判断是否执行后续动作的场景
                              </span>
                          </span>
          </template>
-          <div class="actions-list">
+          <div class='actions-list'>
            <List
-              type="serial"
-              :branchesName="name"
-              :parallel="false"
-              :actions="
+              type='serial'
+              :branchesName='name'
+              :parallel='false'
+              :actions='
                                  serialArray.length ? serialArray[0].actions : []
-                              "
-              @add="(_item) => onAdd(_item, false)"
-              @delete="(_key) => onDelete(_key, false)"
+                              '
+              @add='(_item) => onAdd(_item, false)'
+              @delete='(_key) => onDelete(_key, false)'
            />
          </div>
        </j-collapse-panel>
-        <j-collapse-panel key="2">
+        <j-collapse-panel key='2'>
          <template #header>
                          <span>
                              并行
-                              <span class="panel-tip">
+                              <span class='panel-tip'>
                                  同时执行所有动作，适用于不需要关注执行动作先后顺序和结果的场景
                              </span>
                          </span>
          </template>
-          <div class="actions-list">
+          <div class='actions-list'>
            <List
-              type="parallel"
-              :branchesName="name"
-              :parallel="true"
-              :actions="
+              type='parallel'
+              :branchesName='name'
+              :parallel='true'
+              :actions='
                                  parallelArray.length
                                      ? parallelArray[0].actions
                                      : []
-                              "
-              @add="(_item) => onAdd(_item, true)"
-              @delete="(_key) => onDelete(_key, true)"
+                              '
+              @add='(_item) => onAdd(_item, true)'
+              @delete='(_key) => onDelete(_key, true)'
            />
          </div>
        </j-collapse-panel>
@ -60,64 +60,66 @@
  </div>
 </template>

-<script lang="ts" setup>
-import ShakeLimit from '../components/ShakeLimit/index.vue';
-import { List } from './ListItem';
+<script lang='ts' setup>
+import ShakeLimit from '../components/ShakeLimit/index.vue'
+import { List } from './ListItem'
 import { BranchesThen } from '../../typings'
-import { PropType } from 'vue';
-import { randomString } from '@/utils/utils';
-import { storeToRefs } from 'pinia';
+import { PropType } from 'vue'
+import { randomString } from '@/utils/utils'
+import { storeToRefs } from 'pinia'
 import { useSceneStore } from 'store/scene'
+import { Form } from 'jetlinks-ui-components'

 const sceneStore = useSceneStore()
 const { data: FormModel } = storeToRefs(sceneStore)

+const formItemContext = Form.useInjectFormItemContext();
 const props = defineProps({
-    name: {
-      type: Number,
-      default: 0
-    },
-    thenOptions: {
-        type: Array as PropType<BranchesThen[]>,
-        default: () => [],
-    },
-    openShakeLimit: {
-      type: Boolean,
-      default: false
-    },
-});
+  name: {
+    type: Number,
+    default: 0
+  },
+  thenOptions: {
+    type: Array as PropType<BranchesThen[]>,
+    default: () => []
+  },
+  openShakeLimit: {
+    type: Boolean,
+    default: false
+  }
+})

-const emit = defineEmits(['update', 'add']);
+const emit = defineEmits(['update', 'add'])

-const activeKeys = ref<string[]>(['1']);
-const parallelArray = ref<BranchesThen[]>([]);
-const serialArray = ref<BranchesThen[]>([]);
-const lock = ref<boolean>(false);
+const activeKeys = ref<string[]>(['1'])
+const parallelArray = ref<BranchesThen[]>([])
+const serialArray = ref<BranchesThen[]>([])
+const lock = ref<boolean>(false)

 watch(
-    () => props.thenOptions,
-    (newVal) => {
-        parallelArray.value = newVal.filter((item) => item.parallel);
-        serialArray.value = newVal.filter((item) => !item.parallel);
+  () => props.thenOptions,
+  (newVal) => {
+    parallelArray.value = newVal.filter((item) => item.parallel)
+    serialArray.value = newVal.filter((item) => !item.parallel)

-        const isSerialActions = serialArray.value.some((item) => {
-            return !!item.actions.length;
-        });
+    const isSerialActions = serialArray.value.some((item) => {
+      return !!item.actions.length
+    })

-        if (
-            !lock.value &&
-            parallelArray.value.length &&
-            (!serialArray.value.length || !isSerialActions)
-        ) {
-            activeKeys.value = ['2'];
-            lock.value = true;
-        }
-    },
-    {
-        deep: true,
-        immediate: true,
-    },
-);
+    if (
+      !lock.value &&
+      parallelArray.value.length &&
+      (!serialArray.value.length || !isSerialActions)
+    ) {
+      activeKeys.value = ['2']
+      lock.value = true
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)

 const onDelete = (_key: string, _parallel: boolean) => {
  const thenName = props.thenOptions.findIndex(item => item.parallel === _parallel)
@ -125,7 +127,8 @@ const onDelete = (_key: string, _parallel: boolean) => {
  if (actionIndex !== -1) {
    FormModel.value.branches?.[props.name].then?.[thenName].actions.splice(actionIndex!, 1)
  }
-};
+  formItemContext.onFieldChange()
+}

 const onAdd = (actionItem: any, _parallel: boolean) => {
  const thenName = props.thenOptions.findIndex(item => item.parallel === _parallel)
@ -146,30 +149,31 @@ const onAdd = (actionItem: any, _parallel: boolean) => {
    }
    FormModel.value.branches?.[props.name].then.push(newThenItem)
  }
-};
+  formItemContext.onFieldChange()
+}
 </script>

-<style lang="less" scoped>
+<style lang='less' scoped>
 .actions {
-    .actions-title {
-        display: flex;
-        gap: 16px;
-        align-items: center;
-        margin-bottom: 16px;
-        font-weight: 800;
-        font-size: 14px;
-        line-height: 32px;
-    }
+  .actions-title {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+    font-weight: 800;
+    font-size: 14px;
+    line-height: 32px;
+  }

-    .actions-warp {
-        .actions-list {
-            width: 100%;
-        }
+  .actions-warp {
+    .actions-list {
+      width: 100%;
    }
+  }

-    .panel-tip {
-        padding-left: 8px;
-        color: rgba(#000, 0.45);
-    }
+  .panel-tip {
+    padding-left: 8px;
+    color: rgba(#000, 0.45);
+  }
 }
 </style>
--- a/src/views/rule-engine/Scene/Save/components/Terms/Branches.vue
+++ b/src/views/rule-engine/Scene/Save/components/Terms/Branches.vue
@ -56,7 +56,7 @@
          <Action
            :name='name'
            :openShakeLimit="true"
-            :thenOptions='FormModel.branches[name].then'
+            :thenOptions='FormModel.branches[name]?.then'
          />
        </j-form-item>
      </div>
@ -64,7 +64,7 @@
  </div>
 </template>

-<script lang='ts' setup name='Branchs'>
+<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'
--- a/src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue
+++ b/src/views/rule-engine/Scene/Save/components/Terms/ParamsItem.vue
@ -44,6 +44,7 @@
        :tabsOptions='tabsOptions'
        v-model:value='paramsValue.value.value'
        v-model:source='paramsValue.value.source'
+        @select='valueSelect'
      />
      <ParamsDropdown
        v-else
@ -54,6 +55,7 @@
        :tabsOptions='tabsOptions'
        v-model:value='paramsValue.value.value'
        v-model:source='paramsValue.value.source'
+        @select='valueSelect'
      />
      <j-popconfirm title='确认删除？' @confirm='onDelete'>
        <div v-show='showDelete' class='button-delete'> <AIcon type='CloseOutlined' /></div>
@ -77,9 +79,11 @@ import { inject } from 'vue'
 import { ContextKey } from './util'
 import { useSceneStore } from 'store/scene'
 import { storeToRefs } from 'pinia';
+import { Form } from 'jetlinks-ui-components'

 const sceneStore = useSceneStore()
 const { data: formModel } = storeToRefs(sceneStore)
+const formItemContext = Form.useInjectFormItemContext();

 type Emit = {
  (e: 'update:value', data: TermsType): void
@ -216,6 +220,7 @@ const columnSelect = () => {
    value: undefined
  }
  emit('update:value', { ...paramsValue })
+  formItemContext.onFieldChange()
 }

 const termsTypeSelect = (e: { key: string }) => {
@ -225,6 +230,11 @@ const termsTypeSelect = (e: { key: string }) => {
    value: value
  }
  emit('update:value', { ...paramsValue })
+  formItemContext.onFieldChange()
+}
+
+const valueSelect = () => {
+  formItemContext.onFieldChange()
 }

 const termAdd = () => {
@ -247,6 +257,7 @@ const onDelete = () => {

 nextTick(() => {
  Object.assign(paramsValue, props.value)
+  formItemContext.onFieldChange()
 })

 </script>
--- a/src/views/rule-engine/Scene/Save/components/Terms/Terms.vue
+++ b/src/views/rule-engine/Scene/Save/components/Terms/Terms.vue
@ -23,7 +23,7 @@
          @deleteAll='branchesDeleteAll'
        />
        <div v-else class='actions-terms-warp' :style='{ marginTop: data.branches.length === 2 ? 0 : 24 }'>
-          <div class='actions-terms-title' style='padding: 0'>
+          <div class='actions-terms-title' style='padding: 0;margin-bottom: 24px;'>
            否则
          </div>
          <div class='actions-terms-options no-when'>
@ -43,11 +43,10 @@ import { provide } from 'vue'
 import { ContextKey, handleParamsData } from './util'
 import { getParseTerm } from '@/api/rule-engine/scene'
 import type { FormModelType } from '@/views/rule-engine/Scene/typings'
-import Branches from './Branchs.vue'
+import Branches from './Branches.vue'

 const sceneStore = useSceneStore()
 const { data } = storeToRefs(sceneStore)
-
 const open = ref(false)
 const columnOptions = ref<any>([])

@ -96,7 +95,6 @@ const branchesDeleteAll = () => {
 }

 watchEffect(() => {
-  console.log(data.value.trigger, data.value.trigger?.device)
  if (data.value.trigger?.device) {
    queryColumn(data.value)
  }
--- a/src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue
+++ b/src/views/rule-engine/Scene/Save/components/Terms/TermsItem.vue
@ -29,6 +29,7 @@
          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]'
@ -60,6 +61,7 @@ import DropdownButton from '../DropdownButton'
 import { storeToRefs } from 'pinia';
 import { useSceneStore } from 'store/scene'
 import ParamsItem from './ParamsItem.vue'
+import { isArray } from 'lodash-es'

 const sceneStore = useSceneStore()
 const { data: formModel } = storeToRefs(sceneStore)
@ -103,6 +105,41 @@ const props = defineProps({
  }
 })

+const rules = [
+  {
+    validator(_: any, v: any) {
+      if (v !== undefined) {
+        if (!Object.keys(v).length) {
+          return Promise.reject(new Error('该数据已发生变更，请重新配置'));
+        }
+        if (!v.column) {
+          return Promise.reject(new Error('请选择参数'));
+        }
+
+        if (!v.termType) {
+          return Promise.reject(new Error('请选择操作符'));
+        }
+
+        if (v.value === undefined) {
+          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('请选择或输入参数值'));
+          }
+        }
+      } else {
+        return Promise.reject(new Error('请选择参数'));
+      }
+      return Promise.resolve();
+    },
+  }
+]
+
 const showDelete = ref(false)

 const termsData = computed(() => {
--- a/src/views/rule-engine/Scene/Save/components/Terms/index.less
+++ b/src/views/rule-engine/Scene/Save/components/Terms/index.less
@ -131,11 +131,15 @@

    .ant-form-item {
      margin-bottom: 8px;
-      &:not(:first-child) {
+      &:not(:nth-child(2)) {
        .ant-form-item-explain-error {
          padding-left: 80px !important;
        }
      }
+
+      &.ant-form-item-has-error {
+        margin-bottom: 0;
+      }
    }
  }

--- a/vite.config.ts
+++ b/vite.config.ts
@ -93,10 +93,10 @@ export default defineConfig(({ mode}) => {
                  // target: 'http://192.168.33.22:8800',
                  // target: 'http://192.168.32.244:8881',
                //   target: 'http://47.112.135.104:5096', // opcua
-                  target: 'http://120.77.179.54:8844', // 120测试
+                  target: 'http://192.168.33.46:8844', // 120测试
                //   target: 'http://47.108.63.174:8845', // 测试
                //   target: 'http://120.77.179.54:8844',
-                  ws: 'ws://120.77.179.54:8844',
+                  ws: 'ws://192.168.33.46:8844',
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
              }