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

2023-03-09 19:38:30 +08:00 · 2023-03-09 19:38:30 +08:00 · 204a916e48
parent c97571e5cf 0330a7702f
commit 204a916e48
18 changed files with 625 additions and 229 deletions
--- a/src/components/FRuleEditor/Debug/index.vue
+++ b/src/components/FRuleEditor/Debug/index.vue
@ -15,7 +15,7 @@
      <a-table :columns="columns" :data-source="property" :pagination="false" bordered size="small">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'id'">
-            <a-input v-model:value="record.id" size="small"></a-input>
+            <j-auto-complete :options="options" v-model:value="record.id" size="small" width="130px"/>
          </template>
          <template v-if="column.key === 'current'">
            <a-input v-model:value="record.current" size="small"></a-input>
@ -58,8 +58,8 @@
      </div>
      <div class="log">
        <a-descriptions>
-          <a-descriptions-item v-for="item in ruleEditorStore.state.log" :label="moment(item.time).format('HH:mm:ss')" :key="item.time"
-            :span="3">
+          <a-descriptions-item v-for="item in ruleEditorStore.state.log" :label="moment(item.time).format('HH:mm:ss')"
+            :key="item.time" :span="3">
            <a-tooltip placement="top" :title="item.content">
              {{ item.content }}
            </a-tooltip>
@ -78,6 +78,7 @@ import { message } from 'ant-design-vue';
 import { useRuleEditorStore } from '@/store/ruleEditor';
 import moment from 'moment';
 import { getWebSocket } from '@/utils/websocket';
+import { PropertyMetadata } from '@/views/device/Product/typings';


 const props = defineProps({
@ -135,25 +136,25 @@ const runScript = () => {
  });

  if (ws.value) {
-    ws.value.unsubscribe();
+    ws.value.unsubscribe?.();
  }
  if (!props.virtualRule?.script) {
    isBeginning.value = true;
    message.warning('请编辑规则');
    return;
  }
-  ws.value = getWebSocket(`virtual-property-debug-${ruleEditorStore.state.property}-${new Date().getTime()}`,
-  '/virtual-property-debug',
-  {
-    virtualId: `${virtualIdRef.value}-virtual-id`,
-    property: ruleEditorStore.state.property,
-    virtualRule: {
-      ...props.virtualRule,
-    },
-    properties: _properties || [],
-  })
+  ws.value = getWebSocket(`virtual-property-debug-${props.id}-${new Date().getTime()}`,
+    '/virtual-property-debug',
+    {
+      virtualId: `${virtualIdRef.value}-virtual-id`,
+      property: props.id,
+      virtualRule: {
+        ...props.virtualRule,
+      },
+      properties: _properties || [],
+    })
  ws.value.subscribe((data: any) => {
-      ruleEditorStore.state.log.push({ time: new Date().getTime(), content: JSON.stringify(data.payload) });
+    ruleEditorStore.state.log.push({ time: new Date().getTime(), content: JSON.stringify(data.payload) });
  })
 }
 const beginAction = () => {
@ -163,7 +164,7 @@ const beginAction = () => {
 const stopAction = () => {
  isBeginning.value = true;
  if (ws.value) {
-    ws.value.unsubscribe();
+    ws.value.unsubscribe?.();
  }
 }
 const clearAction = () => {
@ -172,9 +173,21 @@ const clearAction = () => {

 onUnmounted(() => {
  if (ws.value) {
-    ws.value.unsubscribe();
+    ws.value.unsubscribe?.();
  }
 })
+
+const options = ref<{ label: string, value: string }[]>()
+const getProperty = () => {
+  const metadata = productStore.current.metadata || '{}';
+  const _p: PropertyMetadata[] = JSON.parse(metadata).properties || [];
+  options.value = _p.filter((p) => p.id !== props.id).map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+  console.log(options.value)
+}
+getProperty()
 </script>
 <style lang="less" scoped>
 .debug-container {
--- a/src/components/FRuleEditor/index.vue
+++ b/src/components/FRuleEditor/index.vue
@ -1,6 +1,5 @@
 <template>
  <Editor key="simple" @change="change" v-model:value="_value" :id="id" />
-  {{ _value }}
  <Advance v-if="ruleEditorStore.state.model === 'advance'" v-model:value="_value" :model="ruleEditorStore.state.model"
    :virtualRule="virtualRule" :id="id" @change="change" />
 </template>
--- a/src/components/Metadata/VirtualRuleParam/index.vue
+++ b/src/components/Metadata/VirtualRuleParam/index.vue
@ -1,6 +1,6 @@
 <template>
  <j-form-item :name="name.concat(['script'])">
-    <f-rule-editor v-model:value="value.script" :id="id"></f-rule-editor>
+    <f-rule-editor v-model:value="value.script" :id="id" :virtualRule="value"></f-rule-editor>
  </j-form-item>
  <template v-if="showWindow">
    <j-form-item label="规则配置" :name="name.concat(['isVirtualRule'])">
--- a/src/views/device/components/Metadata/Base/Edit/ExpandsForm.vue
+++ b/src/views/device/components/Metadata/Base/Edit/ExpandsForm.vue
@ -86,7 +86,7 @@ const metadataStore = useMetadataStore()

 onMounted(() => {
  if (props.type === 'product' || !props.value?.source) {
-    emit('update:value', { ...props.value, source: 'device' })
+    emit('update:value', { source: 'device', ...props.value })
  }
 })

--- a/src/views/device/components/Metadata/Base/index.vue
+++ b/src/views/device/components/Metadata/Base/index.vue
@ -1,9 +1,9 @@
 <template>
-  <j-pro-table :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id" model="TABLE">
-    <template #headerTitle>
+  <div class="table-header">
+    <div>
      <j-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></j-input-search>
-    </template>
-    <template #rightExtraRender>
+    </div>
+    <div>
      <PermissionButton type="primary" :uhas-permission="`${permission}:update`" key="add" @click="handleAddClick"
        :disabled="operateLimits('add', type)" :tooltip="{
          title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
@ -14,45 +14,52 @@
        新增
      </PermissionButton>
      <Edit v-if="metadataStore.model.edit" :type="target" :tabs="type" @refresh="refreshMetadata"></Edit>
+    </div>
+  </div>
+  <a-table :loading="loading" :data-source="data" :columns="columns" row-key="id" model="TABLE" size="small"
+    :pagination="pagination">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'level'">
+        {{ levelMap[record.expands?.level] || '-' }}
+      </template>
+      <template v-if="column.dataIndex === 'async'">
+        {{ record.async ? '是' : '否' }}
+      </template>
+      <template v-if="column.dataIndex === 'valueType'">
+        {{ record.valueType?.type }}
+      </template>
+      <template v-if="column.dataIndex === 'source'">
+        {{ sourceMap[record.expands?.source] }}
+      </template>
+      <template v-if="column.dataIndex === 'type'">
+        <j-tag v-for="item in (record.expands?.type || [])" :key="item">
+          {{ expandsType[item] }}
+        </j-tag>
+      </template>
+      <template v-if="column.dataIndex === 'action'">
+        <j-space>
+          <PermissionButton :uhas-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
+            :udisabled="operateLimits('updata', type)" @click="handleEditClick(record)" :tooltip="{
+              title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑',
+            }">
+            <AIcon type="EditOutlined" />
+          </PermissionButton>
+          <PermissionButton :uhas-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
+            :pop-confirm="{
+              title: '确认删除？', onConfirm: async () => {
+                await removeItem(record);
+              },
+            }"
+            :tooltip="{
+              title: '删除',
+            }"
+          >
+            <AIcon type="DeleteOutlined" />
+          </PermissionButton>
+        </j-space>
+      </template>
    </template>
-    <template #level="slotProps">
-      {{ levelMap[slotProps.expands?.level] || '-' }}
-    </template>
-    <template #async="slotProps">
-      {{ slotProps.async ? '是' : '否' }}
-    </template>
-    <template #valueType="slotProps">
-      {{ slotProps.valueType?.type }}
-    </template>
-    <template #source="slotProps">
-      {{ sourceMap[slotProps.expands?.source] }}
-    </template>
-    <template #type="slotProps">
-      <j-tag v-for="item in (slotProps.expands?.type || [])" :key="item">
-        {{ expandsType[item] }}
-      </j-tag>
-    </template>
-    <template #action="slotProps">
-      <j-space>
-        <PermissionButton :uhas-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
-          :udisabled="operateLimits('updata', type)" @click="handleEditClick(slotProps)" :tooltip="{
-            title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑',
-          }">
-          <AIcon type="EditOutlined" />
-        </PermissionButton>
-        <PermissionButton :uhas-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
-          :pop-confirm="{
-            title: '确认删除？', onConfirm: async () => {
-              await removeItem(slotProps);
-            },
-          }" :tooltip="{
-            title: '删除',
-          }">
-          <Aicon type="DeleteOutlined" />
-        </PermissionButton>
-      </j-space>
-    </template>
-  </j-pro-table>
+  </a-table>
 </template>
 <script setup lang="ts" name="BaseMetadata">
 import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
@ -61,7 +68,7 @@ import { useInstanceStore } from '@/store/instance'
 import { useProductStore } from '@/store/product'
 import { useMetadataStore } from '@/store/metadata'
 import PermissionButton from '@/components/PermissionButton/index.vue'
-import { message } from 'ant-design-vue/es'
+import { TablePaginationConfig, message } from 'ant-design-vue/es'
 import { SystemConst } from '@/utils/consts'
 import { Store } from 'jetlinks-store'
 import { asyncUpdateMetadata, removeMetadata } from '../metadata'
@ -106,6 +113,15 @@ const actions = [
    scopedSlots: true,
  },
 ];
+const pagination = {
+  showTotal: (num: number, range: number[]) => {
+    return `第 ${range[0]} - ${range[1]} 条/总共 ${num} 条`;
+  },
+  showSizeChanger: true,
+  showQuickJumper: false,
+  defaultPageSize: 10,
+  size: 'small',
+} as TablePaginationConfig
 const columns = computed(() => MetadataMapping.get(type)!.concat(actions))
 const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}') as MetadataItem[])
 const searchValue = ref<string>()
@ -196,4 +212,10 @@ const removeItem = async (record: MetadataItem) => {
  }
 };
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+</style>
--- a/src/views/rule-engine/Scene/Save/Timer/index.vue
+++ b/src/views/rule-engine/Scene/Save/Timer/index.vue
@ -1,18 +1,35 @@
 <template>
    <div>
-      <Action :thenOptions="data.branches ? data?.branches[0].then : []" :name="0" />
+        <Action
+            :thenOptions="data.branches ? data?.branches[0].then : []"
+            :name="0"
+            @add="onActionAdd"
+            @update="onActionUpdate"
+        />
    </div>
 </template>

 <script lang="ts" setup>
-import { useSceneStore } from '@/store/scene'
-import Action from '../action/index.vue'
+import { useSceneStore } from '@/store/scene';
+import Action from '../action/index.vue';
 import { storeToRefs } from 'pinia';
+import { ActionsType } from '@/components/Table';

-const sceneStore = useSceneStore()
-const { data } = storeToRefs(sceneStore)
+const sceneStore = useSceneStore();
+const { data } = storeToRefs(sceneStore);
+
+const onActionAdd = (_data: ActionsType) => {
+  console.log(_data)
+    // if (data?.branches && _data) {
+    //     const newThen = [...data?.branches?.[0].then, data];
+    //     data.branches[0].then = newThen;
+    // }
+};
+
+const onActionUpdate = (_data: ActionsType, type: boolean) => {
+  console.log(_data, type)
+};
 </script>

 <style scoped>
-
 </style>
--- a/src/views/rule-engine/Scene/Save/action/Device/actions/EditTable.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/actions/EditTable.vue
@ -8,12 +8,20 @@
    >
        <template #bodyCell="{ column, text, record }">
            <div>
-                <template v-if="['valueType', 'name'].includes(column.dataIndex)">
+                <template
+                    v-if="['valueType', 'name'].includes(column.dataIndex)"
+                >
                    <span>{{ text }}</span>
                </template>
                <template v-else>
-                    <j-input />
-                    <!-- TODO -->
+                    <ParamsDropdown
+                        icon="icon-canshu"
+                        placeholder="请选择"
+                        :options="[]"
+                        :tabsOptions="tabOptions"
+                        :metricOption="upperOptions(record.valueType)"
+                        v-model:value="record.value"
+                    />
                </template>
            </div>
        </template>
@ -21,7 +29,8 @@
 </template>

 <script lang="ts" setup>
-import { PropType } from "vue";
+import { PropType } from 'vue';
+import ParamsDropdown from '../../../components/ParamsDropdown';

 type Emits = {
    (e: 'update:modelValue', data: Record<string, any>[]): void;
@ -31,9 +40,27 @@ const _emit = defineEmits<Emits>();
 const _props = defineProps({
    modelValue: {
        type: Array as PropType<Record<string, any>[]>,
-        default: '',
-    }
+        default: () => undefined,
+    },
+    builtInList: {
+        type: Array,
+        default: () => [],
+    },
 });
+
+const tabOptions = [
+    {
+        label: '手动输入',
+        component: 'string',
+        key: 'fixed',
+    },
+    {
+        label: '内置参数',
+        component: 'tree',
+        key: 'upper',
+    },
+];
+
 const columns = [
    {
        title: '参数名称',
@ -54,11 +81,31 @@ const columns = [

 const dataSource = computed({
    get: () => {
-        return _props.modelValue || []
+        return _props.modelValue || [];
    },
    set: (val: any) => {
        _emit('update:modelValue', val);
-    }
-})
+    },
+});

+const filterParamsData = (type?: string, data?: any[]): any[] => {
+    if (type && data) {
+        return data.filter((item) => {
+            if (item.children) {
+                const _children = filterParamsData(type, item.children);
+                item.children = _children;
+                return _children.length ? true : false;
+            } else if (item.type === type) {
+                //   optionMap.current.set(item.id, item);
+                return true;
+            }
+            return false;
+        });
+    }
+    return data || [];
+};
+
+const upperOptions = (_type: string) => {
+    return filterParamsData(_type, _props?.builtInList) || [];
+};
 </script>
--- a/src/views/rule-engine/Scene/Save/action/Device/actions/WriteProperty.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/actions/WriteProperty.vue
@ -0,0 +1,140 @@
+<template>
+    <div>
+        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
+            <j-row>
+                <j-col :span="11">
+                    <j-form-item
+                        :name="['message', 'properties']"
+                        label="读取属性"
+                        :rules="[{ required: true, message: '请选择读取属性' }]"
+                    >
+                        <j-select
+                            showSearch
+                            placeholder="请选择属性"
+                            v-model:value="modelRef.properties"
+                        >
+                            <j-select-option
+                                v-for="item in metadata?.properties || []"
+                                :value="item?.id"
+                                :key="item?.id"
+                                >{{ item?.name }}</j-select-option
+                            >
+                        </j-select>
+                    </j-form-item>
+                </j-col>
+                <j-col :span="2"></j-col>
+                <j-col :span="11">
+                    <j-form-item
+                        :name="['message', 'propertiesValue']"
+                        label="属性值"
+                        :rules="[{ required: true, message: '请选择' }]"
+                    >
+                        <ParamsDropdown
+                            icon="icon-canshu"
+                            placeholder="请选择"
+                            :options="[]"
+                            :tabsOptions="tabOptions"
+                            :metricOption="upperOptions(getType)"
+                            v-model:value="modelRef.propertiesValue"
+                        />
+                    </j-form-item>
+                </j-col>
+            </j-row>
+        </a-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {},
+    },
+    metadata: {
+        type: Object,
+        default: () => {
+            return {
+                properties: [],
+            };
+        },
+    },
+    builtInList: {
+        type: Array,
+        default: () => []
+    },
+});
+
+const formRef = ref();
+
+const modelRef = reactive({
+    properties: '',
+    propertiesValue: '',
+    source: '',
+});
+
+const tabOptions = [
+    {
+        label: '手动输入',
+        component: 'string',
+        key: 'fixed',
+    },
+    {
+        label: '内置参数',
+        component: 'tree',
+        key: 'upper',
+    },
+];
+const getType = computed(() => {
+    return props.metadata.properties.find((item: any) => item.id === modelRef.properties)?.valueType?.type
+})
+
+const filterParamsData = (type?: string, data?: any[]): any[] => {
+    if (type && data) {
+        return data.filter((item) => {
+            if (item.children) {
+                const _children = filterParamsData(type, item.children);
+                item.children = _children;
+                return _children.length ? true : false;
+            } else if (item.type === type) {
+                //   optionMap.current.set(item.id, item);
+                return true;
+            }
+            return false;
+        });
+    }
+    return data || [];
+};
+
+const upperOptions = (type: string) => {
+    return filterParamsData(type, props?.builtInList) || []
+}
+
+watch(
+    () => props.value,
+    (newVal) => {
+        const _keys = Object.keys(newVal)?.[0];
+        if (_keys) {
+            (modelRef.properties = _keys),
+                (modelRef.propertiesValue = newVal[_keys]?.value);
+            modelRef.source = newVal[_keys]?.source;
+        }
+    },
+    { deep: true, immediate: true },
+);
+
+const onFormSave = () => {
+    return new Promise((resolve, reject) => {
+        formRef.value
+            .validate()
+            .then(async (_data: any) => {
+                // 处理回传数据
+                resolve(_data);
+            })
+            .catch((err: any) => {
+                reject(err);
+            });
+    });
+};
+
+defineExpose({ onFormSave });
+</script>
--- a/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/actions/index.vue
@ -9,6 +9,7 @@
                <TopCard
                    :typeList="TypeList"
                    v-model:value="modelRef.message.messageType"
+                    @change="onMessageTypeChange"
                />
            </j-form-item>
            <template v-if="deviceMessageType === 'INVOKE_FUNCTION'">
@ -21,7 +22,7 @@
                        showSearch
                        placeholder="请选择功能"
                        v-model:value="modelRef.message.functionId"
-                        @change="onFunctionChange"
+                        @change="(val) => onFunctionChange(val, [])"
                    >
                        <j-select-option
                            v-for="item in metadata?.functions || []"
@ -36,7 +37,7 @@
                    :name="['message', 'inputs']"
                    :rules="[{ required: true, message: '请输入功能值' }]"
                >
-                    <EditTable v-model="modelRef.message.inputs" />
+                    <EditTable v-model:modelValue="modelRef.message.inputs" :builtInList="builtInList" />
                </j-form-item>
            </template>
            <template v-else-if="deviceMessageType === 'READ_PROPERTY'">
@ -60,44 +61,11 @@
                </j-form-item>
            </template>
            <template v-else-if="deviceMessageType === 'WRITE_PROPERTY'">
-                <j-row>
-                    <j-col :span="11">
-                        <j-form-item
-                            :name="['message', 'properties']"
-                            label="读取属性"
-                            :rules="[
-                                { required: true, message: '请选择读取属性' },
-                            ]"
-                        >
-                            <j-select
-                                showSearch
-                                placeholder="请选择属性"
-                                v-model:value="modelRef.message.properties"
-                            >
-                                <j-select-option
-                                    v-for="item in metadata?.properties || []"
-                                    :value="item?.id"
-                                    :key="item?.id"
-                                    >{{ item?.name }}</j-select-option
-                                >
-                            </j-select>
-                        </j-form-item>
-                    </j-col>
-                    <j-col :span="2"></j-col>
-                    <j-col :span="11">
-                        <j-form-item
-                            :name="['message', 'properties']"
-                            label="读取属性"
-                            :rules="[
-                                { required: true, message: '请选择读取属性' },
-                            ]"
-                        >
-                            <j-select placeholder="请选择">
-                                <!-- TODO -->
-                            </j-select>
-                        </j-form-item>
-                    </j-col>
-                </j-row>
+                <WriteProperty
+                    v-model:value="modelRef.message.properties"
+                    :metadata="metadata"
+                    :builtInList="builtInList"
+                />
            </template>
        </a-form>
    </div>
@ -108,6 +76,13 @@ import { getImage } from '@/utils/comm';
 import TopCard from '../device/TopCard.vue';
 import { detail } from '@/api/device/instance';
 import EditTable from './EditTable.vue';
+import WriteProperty from './WriteProperty.vue';
+import { queryBuiltInParams } from '@/api/rule-engine/scene';
+import { useSceneStore } from '@/store/scene';
+import { storeToRefs } from 'pinia'
+
+const sceneStore = useSceneStore();
+const { data } = storeToRefs(sceneStore);

 const TypeList = [
    {
@ -172,44 +147,93 @@ const deviceMessageType = computed(() => {
    return modelRef.message.messageType;
 });

-const onFunctionChange = (val: string) => {
+const builtInList = ref<any[]>([]);
+
+const onFunctionChange = (val: string, values?: any[]) => {
    const _item = (metadata.value?.functions || []).find((item: any) => {
        return val === item.id;
    });
    const list = (_item?.inputs || []).map((item: any) => {
+        const _a = values?.find((i) => i.name === item.id);
        return {
            id: item.id,
-            name: item.name,
-            value: undefined,
+            value: _a?.value,
            valueType: item?.valueType?.type,
+            ..._a,
+            name: item.name,
        };
    });
    modelRef.message.inputs = list;
 };

-watchEffect(() => {
-    // console.log(props.values)
-    // console.log(metadata.value)
-    // Object.assign()
-});
+const onMessageTypeChange = (val: string) => {
+    if (['WRITE_PROPERTY', 'INVOKE_FUNCTION'].includes(val)) {
+        const _params = {
+            branch: props.thenName,
+            branchGroup: props.branchGroup,
+            action: props.name - 1,
+        };
+        queryBuiltInParams(unref(data), _params).then((res: any) => {
+            if (res.status === 200) {
+                builtInList.value = res.result
+            }
+        });
+    }
+};

 watch(
-    () => [props.values?.productDetail, props.values.deviceDetail],
-    ([newVal1, newVal2]) => {
-        if (newVal1) {
-            if (props.values?.selector === 'fixed') {
-                detail(newVal2.id).then((resp) => {
-                    if (resp.status === 200) {
-                        metadata.value = JSON.parse(
-                            resp.result?.metadata || '{}',
-                        );
-                    }
-                });
+    () => [
+        props.values?.productDetail,
+        props.values.selectorValues,
+        props.values?.selector,
+    ],
+    ([newVal1, newVal2, newVal3]) => {
+        if (newVal1?.id) {
+            if (newVal3?.selector === 'fixed') {
+                const id = newVal2?.[0]?.value;
+                if (id) {
+                    detail(id).then((resp) => {
+                        if (resp.status === 200) {
+                            metadata.value = JSON.parse(
+                                resp.result?.metadata || '{}',
+                            );
+                        }
+                    });
+                }
            } else {
                metadata.value = JSON.parse(newVal1?.metadata || '{}');
            }
        }
    },
+    { immediate: true, deep: true },
+);
+
+watch(
+    () => props.values?.message,
+    (newVal) => {
+        if (newVal?.messageType) {
+            modelRef.message = newVal;
+            if (newVal.messageType === 'INVOKE_FUNCTION' && newVal.functionId) {
+                onFunctionChange(newVal.functionId, newVal?.inputs);
+            }
+            onMessageTypeChange(newVal.messageType)
+        }
+    },
    { deep: true, immediate: true },
 );
+
+const onFormSave = () => {
+    return new Promise((resolve, reject) => {
+        formRef.value
+            .validate()
+            .then(async (_data: any) => {
+                resolve(_data);
+            })
+            .catch((err: any) => {
+                reject(err);
+            });
+    });
+};
+
+defineExpose({ onFormSave });
 </script>
--- a/src/views/rule-engine/Scene/Save/action/Device/device/Device.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/device/Device.vue
@ -1,11 +1,11 @@
 <template>
-    <!-- <j-advanced-search
+    <j-advanced-search
        :columns="columns"
        type="simple"
        @search="handleSearch"
        class="search"
        target="scene-trigger-device-device"
-    /> -->
+    />
    <a-divider style="margin: 0" />
    <j-pro-table
        ref="actionRef"
--- a/src/views/rule-engine/Scene/Save/action/Device/device/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/device/index.vue
@ -61,6 +61,7 @@
                    v-model:value="modelRef.selectorValues"
                    placeholder="请选择参数"
                    @select="onVariableChange"
+                    :fieldNames="{ label: 'name', value: 'id' }"
                >
                    <template #title="{ name, description }">
                        <a-space>
@ -108,6 +109,7 @@ const props = defineProps({
    },
 });

+// save保存deviceDetail
 const emits = defineEmits(['save', 'cancel']);

 const sceneStore = useSceneStore();
@ -122,6 +124,7 @@ const modelRef = reactive({
    source: '',
    relationName: '',
    upperKey: '',
+    message: undefined,
 });

 const list = ref<any[]>([]);
@ -160,7 +163,7 @@ const filterTree = (nodes: any[]) => {
    if (!nodes?.length) {
        return nodes;
    }
-    return nodes.filter((it) => {
+    const arr = nodes.filter((it) => {
        if (
            it.children.find(
                (item: any) =>
@ -173,43 +176,16 @@ const filterTree = (nodes: any[]) => {
        }
        return false;
    });
-};
-
-const treeDataFilter = (arr: any[]) => {
-    if (Array.isArray(arr) && arr.length) {
-        const list: any[] = [];
-        arr.map((item: any) => {
-            if (item.children) {
-                const children = treeDataFilter(item.children);
-                if (children.length) {
-                    list.push({
-                        ...item,
-                        title: item.name,
-                        value: item.id,
-                        disabled: true,
-                        children,
-                    });
-                }
-            } else {
-                if (
-                    item.children.find(
-                        (item: any) =>
-                            item.id.indexOf(
-                                'deviceId' || 'device_id' || 'device_Id',
-                            ) > -1,
-                    ) &&
-                    !item.children.find(
-                        (item: any) => item.id.indexOf('bolaen') > -1,
-                    )
-                ) {
-                    list.push(item);
-                }
-            }
-        });
-        return list;
-    } else {
-        return [];
-    }
+    return arr.map((item) => {
+        if (item.children) {
+        }
+        return {
+            ...item,
+            title: item.name,
+            value: item.id,
+            disabled: !!item.children,
+        };
+    });
 };

 const sourceChangeEvent = async () => {
@ -220,11 +196,9 @@ const sourceChangeEvent = async () => {
    };
    const resp = await queryBuiltInParams(unref(data), _params);
    if (resp.status === 200) {
-        // const array = filterTree(resp.result as any[]);
+        const array = filterTree(resp.result as any[]);
        //判断相同产品才有按变量
        // if (props.formProductId === DeviceModel.productId)// TODO
-        console.log(array);
-        const arr = treeDataFilter(resp.result as any[]);
        builtInList.value = array;
    }
 };
@ -293,6 +267,7 @@ const filterType = async () => {
 };

 const onSelectorChange = (val: string) => {
+    modelRef.selectorValues = undefined;
    if (val === 'relation') {
        queryRelationList();
    }
@ -300,7 +275,17 @@ const onSelectorChange = (val: string) => {

 const onDeviceChange = (_detail: any) => {
    if (_detail) {
-        emits('save', modelRef, _detail);
+        if (_detail.id) {
+            modelRef.deviceId = _detail.id;
+            modelRef.selectorValues = [
+                { value: _detail.id, name: _detail.name },
+            ] as any;
+            modelRef.message = {} as any;
+        } else {
+            modelRef.deviceId = '';
+            modelRef.selectorValues = [] as any;
+        }
+        emits('save', unref(modelRef), _detail);
    }
 };

@ -310,7 +295,7 @@ const onRelationChange = (val: any, options: any) => {
    modelRef.selectorValues = val;
    modelRef.upperKey = 'scene.deviceId';
    modelRef.relationName = options.label;
-    emits('save', modelRef, {});
+    emits('save', unref(modelRef), {});
 };

 const onTagChange = (val: any[], arr: any[]) => {
@ -321,11 +306,12 @@ const onTagChange = (val: any[], arr: any[]) => {
    if (arr) {
        tagList.value = arr;
    }
+    emits('save', unref(modelRef), {});
 };

 const onVariableChange = (val: any, node: any) => {
    modelRef.deviceId = val;
-    // modelRef.deviceDetail = node;
+    emits('save', unref(modelRef), node);
    modelRef.selectorValues = [{ value: val, name: node.description }] as any;
 };

@ -348,6 +334,21 @@ watch(
        deep: true,
    },
 );
+
+const onFormSave = () => {
+    return new Promise((resolve, reject) => {
+        formRef.value
+            .validate()
+            .then(async (_data: any) => {
+                resolve(_data);
+            })
+            .catch((err: any) => {
+                reject(err);
+            });
+    });
+};
+
+defineExpose({ onFormSave });
 </script>

 <style scoped lang='less'>
--- a/src/views/rule-engine/Scene/Save/action/Device/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Device/index.vue
@ -33,13 +33,16 @@
                :thenName="thenName"
                :values="DeviceModel"
                @save="onDeviceSave"
+                ref="deviceRef"
            />
-            <Action v-else-if="current === 2"
+            <Action
+                v-else-if="current === 2"
                :name="name"
                :branchGroup="branchGroup"
                :thenName="thenName"
                :values="DeviceModel"
-             />
+                ref="actionRef"
+            />
        </div>
        <template #footer>
            <div class="steps-action">
@ -62,7 +65,13 @@ import Product from './Product.vue';
 import Device from './device/index.vue';
 import Action from './actions/index.vue';
 import { onlyMessage } from '@/utils/comm';
-import { detail } from '@/api/device/product'
+import { detail } from '@/api/device/product';
+
+import { useSceneStore } from '@/store/scene';
+import { storeToRefs } from 'pinia';
+
+const sceneStore = useSceneStore();
+const { data } = storeToRefs(sceneStore);

 type Emit = {
    (e: 'cancel'): void;
@ -92,6 +101,8 @@ const props = defineProps({
 });

 const current = ref<number>(0);
+const deviceRef = ref<any>();
+const actionRef = ref<any>();

 const DeviceModel = reactive<DeviceModelType>({
    productId: '',
@ -119,6 +130,71 @@ const onCancel = () => {
    emit('cancel');
 };

+const onSave = (_data: any) => {
+    const item: any = {
+      selector: DeviceModel.selector,
+      source: DeviceModel.source,
+      selectorValues: DeviceModel.selectorValues,
+      productId: DeviceModel.productId,
+      message: _data.message,
+    };
+    //处理按变量
+    if (DeviceModel.selector === 'variable') {
+      item.selector = 'fixed';
+    }
+    if (DeviceModel.selector === 'relation') {
+      item.upperKey = 'scene.deviceId';
+    }
+    const _options: any = {
+        name: '-', //设备名称
+        type: '', //类型
+        properties: '', //属性功能
+        propertiesValue: '', //设置功能
+        selector: DeviceModel.selector, //选择器标识
+        productName: DeviceModel.productDetail.name,
+        relationName: DeviceModel.relationName,
+        triggerName: data.value.options?.trigger?.name || '触发设备',
+        taglist: [],
+        columns: [],
+        otherColumns: [],
+    };
+    _options.name = DeviceModel.deviceDetail?.name;
+    const _type = _data.message.messageType;
+    if (_type === 'INVOKE_FUNCTION') {
+        _options.type = '执行';
+        _options.properties = DeviceModel.propertiesName;
+    }
+    if (_type === 'READ_PROPERTY') {
+        _options.type = '读取';
+        _options.properties = DeviceModel.propertiesName;
+    }
+    if (_type === 'WRITE_PROPERTY') {
+        _options.type = '设置';
+        _options.properties = DeviceModel.propertiesName;
+        _options.propertiesValue =
+            typeof DeviceModel.propertiesValue === 'object'
+                ? JSON.stringify(DeviceModel.propertiesValue)
+                : `${DeviceModel.propertiesValue}`;
+        _options.columns = DeviceModel.columns;
+        _options.otherColumns = DeviceModel.columns;
+        const cur: any = Object.values(_data.message.properties)?.[0];
+        if (cur?.source === 'upper') {
+            _options.propertiesValue = DeviceModel.actionName;
+        }
+    }
+    if (_options.selector === 'tag') {
+        _options.taglist = DeviceModel.tagList.map((it) => ({
+            name: it.column || it.name,
+            type: it.type ? (it.type === 'and' ? '并且' : '或者') : '',
+            value: it.value,
+        }));
+    }
+    if (_options.selector === 'variable') {
+        _options.name = DeviceModel.selectorValues?.[0]?.name;
+    }
+    emit('save', item, _options);
+};
+
 const save = async (step?: number) => {
    let _step = step !== undefined ? step : current.value;
    if (_step === 0) {
@ -126,10 +202,15 @@ const save = async (step?: number) => {
            ? (current.value = 1)
            : onlyMessage('请选择产品', 'error');
    } else if (_step === 1) {
-        DeviceModel.deviceId
-            ? (current.value = 2)
-            : onlyMessage('请选择设备', 'error');
+        if (deviceRef.value) {
+            await deviceRef.value?.onFormSave();
+            current.value = 2;
+        }
    } else {
+        if (actionRef.value) {
+            const _data = await actionRef.value?.onFormSave();
+            onSave(_data);
+        }
    }
 };

@ -148,24 +229,23 @@ const prev = () => {
 const saveClick = () => save();

 const onDeviceSave = (_data: any, _detail: any) => {
-    Object.assign(DeviceModel, _data)
-    DeviceModel.deviceId = _detail.id
-    DeviceModel.deviceDetail = _detail
-}
+    Object.assign(DeviceModel, _data);
+    DeviceModel.deviceDetail = _detail;
+};

 watch(
    () => props.value,
    (newValue) => {
        Object.assign(DeviceModel, newValue);
-        if(newValue?.productId){
-            detail(newValue.productId).then(resp => {
-                if(resp.status === 200){
-                    DeviceModel.productDetail = resp.result
+        if (newValue?.productId) {
+            detail(newValue.productId).then((resp) => {
+                if (resp.status === 200) {
+                    DeviceModel.productDetail = resp.result;
                }
-            })
+            });
        }
    },
-    { immediate: true, deep: true },
+    { immediate: true },
 );
 </script>

--- a/src/views/rule-engine/Scene/Save/action/Modal/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Modal/index.vue
@ -18,12 +18,13 @@
                    },
                ]"
            >
-                <j-card-select
+                <!-- <j-card-select
                    v-model:value="formModel.type"
                    :options="options"
                    type="horizontal"
                    float="right"
-                />
+                /> -->
+                <a-radio-group v-model:value="formModel.type" :options="options" />
            </a-form-item>
            <ActionTypeComponent
                v-bind="props"
@ -43,10 +44,9 @@ import Notify from '../Notify/index.vue';
 import Device from '../Device/index.vue';
 import { PropType } from 'vue';
 import { ActionsType } from '../../../typings';
-import ActionTypeComponent from './ActionTypeComponent.vue'
+import ActionTypeComponent from './ActionTypeComponent.vue';
 import { randomString } from '@/utils/utils';

-
 const props = defineProps({
    branchesName: {
        type: Number,
@ -63,8 +63,8 @@ const props = defineProps({
    data: {
        type: Object as PropType<ActionsType>,
        default: () => ({
-            key: randomString()
-        })
+            key: randomString(),
+        }),
    },
    parallel: {
        type: Boolean,
@ -117,7 +117,11 @@ watch(
    () => props.data,
    (newVal) => {
        if (newVal?.executor) {
-            formModel.type = (newVal?.executor === 'alarm' ? newVal?.alarm?.mode : newVal?.executor) as string
+            formModel.type = (
+                newVal?.executor === 'alarm'
+                    ? newVal?.alarm?.mode
+                    : newVal?.executor
+            ) as string;
        }
    },
    {
@ -129,7 +133,15 @@ const onOk = () => {
    actionForm.value.validate().then((values: any) => {
        actionType.value = values?.type;
        if (values?.type === 'relieve' || values?.type === 'trigger') {
-            emit('save', { ...props.data, executor: 'alarm', alarm: { mode: values.type } }, {});
+            emit(
+                'save',
+                {
+                    ...props.data,
+                    executor: 'alarm',
+                    alarm: { mode: values.type },
+                },
+                {},
+            );
        }
    });
 };
@ -140,10 +152,10 @@ const onCancel = () => {

 const onPropsOk = (data: any, options?: any) => {
    emit('save', { ...data, executor: data.type }, options);
-    actionType.value = ''
+    actionType.value = '';
 };

 const onPropsCancel = () => {
-    actionType.value = ''
-}
+    actionType.value = '';
+};
 </script>
--- a/src/views/rule-engine/Scene/Save/action/Notify/NotifyConfig.vue
+++ b/src/views/rule-engine/Scene/Save/action/Notify/NotifyConfig.vue
@ -1,5 +1,5 @@
 <template>
-    <Search
+    <j-advanced-search
        :columns="columns"
        type="simple"
        target="action-notice-config"
--- a/src/views/rule-engine/Scene/Save/action/Notify/NotifyTemplate.vue
+++ b/src/views/rule-engine/Scene/Save/action/Notify/NotifyTemplate.vue
@ -1,5 +1,5 @@
 <template>
-    <Search
+    <j-advanced-search
        :columns="columns"
        type="simple"
        target="action-notice-template"
--- a/src/views/rule-engine/Scene/Save/action/Notify/NotifyWay.vue
+++ b/src/views/rule-engine/Scene/Save/action/Notify/NotifyWay.vue
@ -1,10 +1,11 @@
 <template>
    <a-spin :spinning="loading">
-        <j-card-select
+        <!-- <j-card-select
            v-model:value="notifyType"
            :options="options"
            :icon-size="106"
-        />
+        /> -->
+        <a-radio-group v-model:value="notifyType" :options="options" @change="onRadioChange" />
    </a-spin>
 </template>

@ -34,13 +35,17 @@ const notifyType = ref('');
 const options = ref<any[]>([]);

 watch(
-    () => notifyType,
+    () => props.value,
    (newVal) => {
-        emit('update:value', newVal)
+        notifyType.value = newVal
    },
    { deep: true, immediate: true },
 );

+const onRadioChange = (e: any) => {
+    emit('update:value', e.target.value)
+}
+
 onMounted(() => {
    loading.value = true
    notice.queryMessageType().then((resp) => {
--- a/src/views/rule-engine/Scene/Save/action/Notify/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Notify/index.vue
@ -122,7 +122,6 @@ const jumpStep = async (val: number) => {
    if (val === 0) {
        current.value = val;
    } else if (val === 1) {
-        console.log(formModel)
        if (formModel.notifyType) {
            current.value = val;
        } else {
--- a/src/views/rule-engine/Scene/Save/action/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/index.vue
@ -23,7 +23,11 @@
                            type="serial"
                            :branchesName="props.name"
                            :parallel="false"
-                            :actions="serialArray.length ? serialArray[0].actions : []"
+                            :actions="
+                                serialArray.length ? serialArray[0].actions : []
+                            "
+                            @add="onAdd"
+                            @delete="onDelete"
                        />
                    </div>
                </a-collapse-panel>
@ -41,7 +45,11 @@
                            type="parallel"
                            :branchesName="props.name"
                            :parallel="true"
-                            :actions="parallelArray.length ? parallelArray[0].actions : []"
+                            :actions="
+                                parallelArray.length
+                                    ? parallelArray[0].actions
+                                    : []
+                            "
                            @add="onAdd"
                            @delete="onDelete"
                        />
@ -57,6 +65,7 @@ import ShakeLimit from '../components/ShakeLimit/index.vue';
 import { List } from './ListItem';
 import { BranchesThen } from '../../typings';
 import { PropType } from 'vue';
+import { randomString } from '@/utils/utils';

 interface ActionsProps {
    name: number;
@ -73,13 +82,15 @@ const props = defineProps({
    openShakeLimit: Boolean,
 });

+const emit = defineEmits(['update', 'add']);
+
 const shakeLimit = ref({
-    enabled: false
+    enabled: false,
 });
 const activeKeys = ref<string[]>(['1']);
 const parallelArray = ref<BranchesThen[]>([]);
 const serialArray = ref<BranchesThen[]>([]);
-const lock = ref<boolean>(false)
+const lock = ref<boolean>(false);

 watch(
    () => props.thenOptions,
@ -96,8 +107,8 @@ watch(
            parallelArray.value.length &&
            (!serialArray.value.length || !isSerialActions)
        ) {
-            activeKeys.value = ['2']
-            lock.value = true
+            activeKeys.value = ['2'];
+            lock.value = true;
        }

        //TODO 回传数据
@ -109,11 +120,37 @@ watch(
 );

 const onDelete = (_key: string) => {
-    console.log(_key)
-}
-const onAdd = (data: any) => {
-    console.log(data)
-}
+    const aIndex = unref(serialArray)[0].actions?.findIndex(
+        (aItem) => aItem.key === _key,
+    );
+    if (aIndex !== -1) {
+        serialArray.value[0].actions?.splice(aIndex, 1);
+        emit('update', serialArray[0], false);
+    }
+};
+const onAdd = (actionItem: any) => {
+    const newParallelArray = [...parallelArray.value];
+    if (newParallelArray.length) {
+        const indexOf = newParallelArray[0].actions?.findIndex(
+            (aItem) => aItem.key === actionItem.key,
+        );
+        if (indexOf !== -1) {
+            newParallelArray[0].actions.splice(indexOf, 1, actionItem);
+        } else {
+            newParallelArray[0].actions.push(actionItem);
+        }
+        parallelArray.value = [...newParallelArray];
+        console.log(parallelArray.value);
+        emit('update', newParallelArray[0], true);
+    } else {
+        actionItem.key = randomString();
+        emit('add', {
+            parallel: true,
+            key: randomString(),
+            actions: [actionItem],
+        });
+    }
+};
 </script>

 <style lang="less" scoped>