update: 场景联动条件优化

src/components/ValueItem/index.vue

@@ -53,6 +53,7 @@
             v-model:value="myValue"
             placeholder="请输入图片链接"
             allowClear
+            @change='inputChange'
         >
             <template #addonAfter>
                 <j-upload
@@ -182,6 +183,7 @@ const handleFileChange = (info: UploadChangeParam<UploadFile<any>>) => {
         const url = info.file.response?.result;
         myValue.value = url;
         emit('update:modelValue', url);
+        emit('change', url);
     }
 };
 

src/views/rule-engine/Scene/Save/components/DropdownButton/Time.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='dropdown-time-picker'>
     <j-time-picker
-      v-if='!_type'
+      v-if='type === "time"'
       open
       v-model:value='myValue'
       class='manual-time-picker'
@@ -59,9 +59,6 @@ const change = (e: Dayjs) => {
   emit('change', e.format(myFormat))
 }
 
-const _type = computed(() => {
-  return props.value?.includes('-')
-})
 </script>
 
 <style lang='less'>

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

@@ -23,7 +23,7 @@
             <div class='select-box-content'>
               <DropdownTimePicker
                 v-if='["time","date"].includes(item.component)'
-                :type='item.component'
+                type='time'
                 v-model:value='myValue'
                 @change='timeChange'
               />

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

@@ -19,19 +19,23 @@
       >
         <j-popconfirm
           title='该操作将清空其它所有否则条件，确认删除？'
-          placement='topRight'
+          placement="topRight"
           @confirm='onDeleteAll'
         >
-          <AIcon type='CloseOutlined' v-show='showDelete' />
+          <div class='terms-params-delete' v-show='showDelete'>
+            <AIcon type='CloseOutlined' />
+          </div>
         </j-popconfirm>
 
         <div class='actions-terms-list-content'>
           <template v-if='showWhen'>
             <TermsItem
-              v-for='(item, index) in data.when'
+              v-for='(item, index) in whenData'
               :key='item.key'
+              :name='index'
+              :showDeleteBtn='whenData.length !== 1'
               :isFirst='index === 0'
-              :isLast='index === data.when.length -1'
+              :isLast='index === whenData.length -1'
               :branchName='name'
               :whenName='index'
               :data='item'
@@ -92,6 +96,10 @@ const showWhen = computed(() => {
   return props.data.when.length
 })
 
+const whenData = computed(() => {
+  return props.data.when
+})
+
 const onDelete = () => {
 
 }
@@ -101,19 +109,36 @@ const onDeleteAll = () => {
 }
 
 const mouseover = () => {
-  if (props.isFirst && props.data.when.length){
+  if (!props.isFirst){
     showDelete.value = true
   }
 }
 
 const mouseout = () => {
-  if (props.isFirst && props.data.when.length){
+  if (!props.isFirst){
     showDelete.value = false
   }
 }
 
 const addWhen = () => {
-
+  const whenItem = {
+    key: `when_${new Date().getTime()}`,
+    type: 'and',
+    terms: [
+      {
+        column: undefined,
+        value: {
+          source: 'fixed',
+          value: undefined
+        },
+        termType: undefined,
+        key: 'params_1',
+        type: 'and',
+      }
+    ]
+  }
+  FormModel.value.branches?.[props.name].when.push(whenItem)
+  FormModel.value.branches?.push(null)
 }
 
 const optionsClass = computed(() => {

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

@@ -75,6 +75,11 @@ import { getOption } from '../DropdownButton/util'
 import ParamsDropdown, { DoubleParamsDropdown } from '../ParamsDropdown'
 import { inject } from 'vue'
 import { ContextKey } from './util'
+import { useSceneStore } from 'store/scene'
+import { storeToRefs } from 'pinia';
+
+const sceneStore = useSceneStore()
+const { data: formModel } = storeToRefs(sceneStore)
 
 type Emit = {
   (e: 'update:value', data: TermsType): void
@@ -95,10 +100,26 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  showDeleteBtn: {
+    type: Boolean,
+    default: true
+  },
   name: {
     type: Number,
     default: 0
   },
+  termsName: {
+    type: Number,
+    default: 0
+  },
+  branchName: {
+    type: Number,
+    default: 0
+  },
+  whenName: {
+    type: Number,
+    default: 0
+  },
   value: {
     type: Object as PropType<TermsType>,
     default: () => ({
@@ -176,13 +197,13 @@ const showDouble = computed(() => {
 })
 
 const mouseover = () => {
-  if (props.name !== 0){
+  if (props.showDeleteBtn){
     showDelete.value = true
   }
 }
 
 const mouseout = () => {
-  if (props.name !== 0){
+  if (props.showDeleteBtn){
     showDelete.value = false
   }
 }
@@ -205,11 +226,21 @@ const termsTypeSelect = () => {
 }
 
 const termAdd = () => {
-
+  const terms = {
+    column: undefined,
+    value: {
+      source: 'fixed',
+      value: undefined
+    },
+    termType: undefined,
+    type: 'and',
+    key: `params_${new Date().getTime()}`
+  }
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.push(terms)
 }
 
 const onDelete = () => {
-
+  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.splice(props.name, 1)
 }
 
 nextTick(() => {

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

@@ -97,7 +97,19 @@ const queryColumn = (dataModel: FormModelType) => {
 }
 
 const addBranches = () => {
-
+  const branchesItem = {
+    when: [],
+    key: `branches_${new Date().getTime()}`,
+    shakeLimit: {
+      enabled: false,
+      time: 1,
+      threshold: 1,
+      alarmFirst: false,
+    },
+    then: [],
+  }
+  const lastIndex = data.value.branches!.length - 1 || 0
+  data.value.branches?.splice(lastIndex, 1, branchesItem)
 }
 
 const branchesDelete = (index: number) => {

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

@@ -26,21 +26,29 @@
         </j-popconfirm>
 
         <j-form-item
-          v-for='(item, index) in data.terms'
+          v-for='(item, index) in termsData'
           :key='item.key'
           :name='["branches", branchName, "when", whenName, "terms", index]'
         >
           <ParamsItem
             v-model:value='formModel.branches[branchName].when[whenName].terms[index]'
             :isFirst='index === 0'
-            :isLast='index === data.terms.length - 1'
+            :isLast='index === termsData.length - 1'
+            :showDeleteBtn='termsData.length !== 1'
             :name='index'
+            :termsName='name'
+            :whenName='whenName'
+            :branchName='branchName'
             @change='paramsChange'
-            @delete='paramsDelete'
-            @add='paramsAdd'
           />
         </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>
@@ -61,6 +69,14 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  isLast: {
+    type: Boolean,
+    default: true
+  },
+  showDeleteBtn: {
+    type: Boolean,
+    default: true
+  },
   data: {
     type: Object as PropType<TermsType>,
     default: () => ({
@@ -73,6 +89,10 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  name: {
+    type: Number,
+    default: 0
+  },
   branchName: {
     type: Number,
     default: 0
@@ -85,36 +105,48 @@ const props = defineProps({
 
 const showDelete = ref(false)
 
+const termsData = computed(() => {
+  return props.data.terms
+})
+
 const mouseover = () => {
-  if (props.whenName !== 0){
+  if (props.showDeleteBtn){
     showDelete.value = true
   }
 }
 
 const mouseout = () => {
-  if (props.whenName !== 0){
+  if (props.showDeleteBtn){
     showDelete.value = false
   }
 }
 
 const onDelete = () => {
-
+  formModel.value.branches?.[props.branchName]?.when?.splice(props.name, 1)
-}
-
-const onDeleteAll = () => {
-
 }
 
 const paramsChange = () => {
 
 }
 
-const paramsDelete = () => {
+const addTerms = () => {
-
+  const terms = {
-}
+    type: 'and',
-
+    terms: [
-const paramsAdd = () => {
+      {
-
+        column: undefined,
+        value: {
+          source: 'fixed',
+          value: undefined
+        },
+        termType: undefined,
+        key: 'params_1',
+        type: 'and',
+      }
+    ],
+    key: `terms_${new Date().getTime()}`
+  }
+  formModel.value.branches?.[props.branchName]?.when?.push(terms)
 }
 
 </script>

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

@@ -15,7 +15,6 @@
   position: absolute;
   top: -10px;
   right: -10px;
-  display: none;
   width: 20px;
   height: 20px;
   color: #999;
@@ -37,7 +36,7 @@
 .actions-terms {
   .actions-terms-warp {
     display: flex;
-    width: 66.66%;
+    //width: 66.66%;
     margin-bottom: 24px;
 
     &.first-children {