Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/views/rule-engine/Scene/Save/Device/AddModal.vue

@@ -59,7 +59,7 @@ 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, timeUnitEnum } from '@/views/rule-engine/Scene/Save/components/Timer/util'
+import {continuousValue, handleTimerOptions, timeUnitEnum} from '@/views/rule-engine/Scene/Save/components/Timer/util'
 
 type Emit = {
   (e: 'cancel'): void
@@ -161,46 +161,50 @@ const handleOptions = (data: TriggerDeviceOptions) => {
 
   if (data.timer) {
     const _timer = data.timer;
-    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') {
-      _options.type = '上线';
-      _options.action = '';
-      _options.typeIcon = 'icon-a-Group4713';
-    }
-
-    if (data.operator === 'offline') {
-      _options.type = '离线';
-      _options.action = '';
-      _options.typeIcon = 'icon-a-Group4892';
-    }
-
-    if (data.operator === 'reportProperty') {
-      _options.type = '属性上报';
-      _options.action = '';
-      _options.typeIcon = 'icon-file-upload-outline';
-    }
-    return _options;
+    const { time, extraTime, when } = handleTimerOptions(_timer)
+    _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') {
+    _options.type = '上线';
+    _options.action = '';
+    _options.typeIcon = 'icon-a-Group4713';
+  }
+
+  if (data.operator === 'offline') {
+    _options.type = '离线';
+    _options.action = '';
+    _options.typeIcon = 'icon-a-Group4892';
+  }
+
+  if (data.operator === 'reportProperty') {
+    _options.type = '属性上报';
+    _options.action = '';
+    _options.typeIcon = 'icon-file-upload-outline';
+  }
+  return _options;
 }
 
 const prev = () => {

src/views/rule-engine/Scene/Save/Timer/AddModel.vue

@@ -0,0 +1,65 @@
+<template>
+  <j-modal
+      title='触发规则'
+      visible
+      :width='820'
+      @click='save'
+      @cancel='cancel'
+  >
+    <Timer
+        ref='timerRef' v-model:value='addModel.timer'
+    />
+  </j-modal>
+</template>
+
+<script setup lang="ts" name="timerAddModel">
+import Timer from '../components/Timer'
+import type { OperationTimer } from '@/views/rule-engine/Scene/typings'
+import {nextTick, PropType} from "vue";
+import {TriggerDevice} from "@/views/rule-engine/Scene/typings";
+import {handleTimerOptions} from "@/views/rule-engine/Scene/Save/components/Timer/util";
+
+type Emit = {
+  (e: 'cancel'): void
+  (e: 'save', data: TriggerDevice, options: Record<string, any>): void
+}
+
+const props = defineProps({
+  timer: {
+    type: Object as PropType<OperationTimer>,
+    default: () => ({})
+  }
+})
+const emit = defineEmits<Emit>()
+
+const timerRef = ref()
+
+interface AddModelType {
+  timer: OperationTimer
+}
+
+const addModel = reactive<AddModelType>({
+  timer: props.timer
+})
+
+const save = async () => {
+  const timerData = await timerRef.value?.validateFields()
+  if (timerData) {
+    const options = handleTimerOptions(timerData)
+    emit("save", timerData, options)
+  }
+}
+
+const cancel = () => {
+  emit("cancel")
+}
+
+nextTick(() => {
+  Object.assign(addModel, props.timer)
+})
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,30 +1,67 @@
 <template>
     <div class='timer'>
-        <Timer ref='timerRef' v-model:value='data.trigger.timer' />
+      <j-form-item
+        :rules="rules"
+        name="timer"
+      >
+        <template #label>
+          <TitleComponent data='触发规则' style='font-size: 14px;' />
+        </template>
+        <AddButton
+            style='width: 100%'
+            @click='visible = true'
+        >
+          <Title :options='data.options.trigger' />
+        </AddButton>
+      </j-form-item>
+      <j-form-item
+        :rules="actionRules"
+        :name="['branches', 0, 'then']"
+      >
         <Action
             :thenOptions="data.branches ? data?.branches[0].then : []"
             :name="0"
-            @add="onActionAdd"
-            @update="onActionUpdate"
         />
+      </j-form-item>
+      <AddModel
+        v-if="visible"
+        @cancel='visible = false'
+        @save="save"
+        :value="data.trigger.device"
+        :options="data.options.trigger"
+      />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { useSceneStore } from '@/store/scene';
-import Action from '../action/index.vue';
 import { storeToRefs } from 'pinia';
-import Timer from '../components/Timer'
+import Action from '../action/index.vue';
+import AddModel from './AddModal.vue'
+import AddButton from '../components/AddButton.vue'
+import type { OperationTimer } from '@/views/rule-engine/Scene/typings'
 
 const sceneStore = useSceneStore();
 const { data } = storeToRefs(sceneStore);
+const visible = ref(false)
 
-const onActionAdd = (_data: any) => {
-    if (data.value?.branches && _data) {
-        const newThen = [...data.value.branches[0].then, _data];
-        data.value.branches![0].then = newThen
+const rules = [{
+  validator(_: any, v: any) {
+    if (!v) {
+      return Promise.reject(new Error('请配置定时触发规则'));
     }
-};
+    return Promise.resolve();
+  },
+}]
+
+const actionRules = [{
+  validator(_, v) {
+    if (!v || (v && !v.length)) {
+      return Promise.reject('至少配置一个执行动作');
+    }
+    return Promise.resolve();
+  },
+}]
 
 const onActionUpdate = (_data: any, type: boolean) => {
     const indexOf = data.value.branches![0].then.findIndex(
@@ -38,6 +75,11 @@ const onActionUpdate = (_data: any, type: boolean) => {
         }
     }
 };
+
+const save = (data: OperationTimer, options: Record<string, any>) => {
+  data.value.trigger!.timer = data
+  data.value.options!.trigger = options
+}
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/components/Timer/util.ts

@@ -1,4 +1,5 @@
 import { isArray } from 'lodash-es'
+import type { OperationTimer } from "@/views/rule-engine/Scene/typings";
 export const numberToString = {
   1: '星期一',
   2: '星期二',
@@ -49,4 +50,42 @@ export const continuousValue: continuousValueFn = (data, type) => {
     });
   }
   return newArray;
-};
+};
+
+type TimerOption = {
+  when?: string
+  time?: string
+  extraTime?: string
+}
+
+export const handleTimerOptions = (timer: OperationTimer):TimerOption => {
+  let when = '每天'
+  let time = undefined
+  let extraTime = undefined
+
+  if (timer.trigger === 'cron') {
+    time = timer.cron
+    return { time }
+  }
+
+  if (timer.when?.length) {
+    when = timer!.trigger === 'week' ? '每周' : '每月';
+    const whenStrArr = continuousValue(timer.when! || [], timer!.trigger);
+    const whenStrArr3 = whenStrArr.splice(0, 3);
+    when += whenStrArr3.join('、');
+    when += `等${timer.when!.length}天`;
+  }
+
+  if (timer.once) {
+    time = timer.once.time + ' 执行1次';
+  } else if (timer.period) {
+    time = timer.period.from + '-' + timer.period.to;
+    extraTime = `每${timer.period.every}${timeUnitEnum[timer.period.unit]}执行1次`;
+  }
+
+  return {
+    when,
+    time,
+    extraTime
+  }
+}

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

@@ -15,7 +15,12 @@
         <Manual v-else-if='data.triggerType === "manual"' />
         <Timer v-else-if='data.triggerType === "timer"' />
         <j-form-item>
-          <j-text-area
+          <j-textarea
+              v-model:value="data.description"
+              placeholder=''
+              :rows="4"
+              show-count
+              :maxLength="200"
           />
         </j-form-item>
       </j-form>

src/views/rule-engine/Scene/Save/util.ts

@@ -46,4 +46,4 @@ export const useParams = (params: Params) => {
   return {
     columnOptions
   }
-}
+}