|
@@ -1,13 +1,21 @@
|
|
<template>
|
|
<template>
|
|
<div class="props">
|
|
<div class="props">
|
|
<div v-for="(a, index) in data.actions" class="mb-12">
|
|
<div v-for="(a, index) in data.actions" class="mb-12">
|
|
- <div class="flex middle between">
|
|
|
|
- <div class="flex middle">动作{{ index + 1 }}</div>
|
|
|
|
- <!-- <t-icon
|
|
|
|
- name="close"
|
|
|
|
- class="hover"
|
|
|
|
- @click="data.actions.splice(index, 1)"
|
|
|
|
- /> -->
|
|
|
|
|
|
+ <div class="flex middle between" style="position:relative;">
|
|
|
|
+ <div class="flex middle">
|
|
|
|
+ 动作{{ index + 1 }}
|
|
|
|
+ <t-tooltip content="单位ms,默认不延迟执行">
|
|
|
|
+ <t-input-number
|
|
|
|
+ class="input-none"
|
|
|
|
+ style="position:absolute;left:76px"
|
|
|
|
+ v-model="a.timeout"
|
|
|
|
+ theme="normal"
|
|
|
|
+ :min="1"
|
|
|
|
+ placeholder="延迟"
|
|
|
|
+ />
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<close-icon class="hover"
|
|
<close-icon class="hover"
|
|
@click="data.actions.splice(index, 1)"/>
|
|
@click="data.actions.splice(index, 1)"/>
|
|
</div>
|
|
</div>
|
|
@@ -261,15 +269,19 @@
|
|
</template>
|
|
</template>
|
|
<template v-else-if="a.action == 15">
|
|
<template v-else-if="a.action == 15">
|
|
<Network v-model="a.network" mode="1" />
|
|
<Network v-model="a.network" mode="1" />
|
|
-
|
|
|
|
|
|
+ <template v-for="(item,idx) in a.list">
|
|
|
|
+ <div class="flex middle between mt-16">
|
|
|
|
+ <div class="flex middle" style="font-size:12px">数据{{ idx+1 }}</div>
|
|
|
|
+ <close-icon class="hover" @click="a.list.splice(index, 1)"/>
|
|
|
|
+ </div>
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
<label>数据对象</label>
|
|
<label>数据对象</label>
|
|
<t-tree-select
|
|
<t-tree-select
|
|
- v-model="a.params"
|
|
|
|
|
|
+ v-model="item.params"
|
|
:data="penTree"
|
|
:data="penTree"
|
|
filterable
|
|
filterable
|
|
placeholder="默认自己"
|
|
placeholder="默认自己"
|
|
- @change="getProps(a)"
|
|
|
|
|
|
+ @change="getProps(item)"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
@@ -281,7 +293,7 @@
|
|
<div class="right">
|
|
<div class="right">
|
|
<t-dropdown
|
|
<t-dropdown
|
|
:min-column-width="160"
|
|
:min-column-width="160"
|
|
- @click="onAddValue(a, $event)"
|
|
|
|
|
|
+ @click="onAddValue(item, $event)"
|
|
>
|
|
>
|
|
<add-circle-icon class="hover"/>
|
|
<add-circle-icon class="hover"/>
|
|
<!-- <t-icon name="add-circle" class="hover" /> -->
|
|
<!-- <t-icon name="add-circle" class="hover" /> -->
|
|
@@ -294,12 +306,12 @@
|
|
class="input"
|
|
class="input"
|
|
>
|
|
>
|
|
<t-input
|
|
<t-input
|
|
- v-model="a.input"
|
|
|
|
|
|
+ v-model="item.input"
|
|
style="pointer-events: auto;"
|
|
style="pointer-events: auto;"
|
|
placeholder="自定义"
|
|
placeholder="自定义"
|
|
@enter="
|
|
@enter="
|
|
- onAddValue(a, { key: a.input });
|
|
|
|
- a.input = '';
|
|
|
|
|
|
+ onAddValue(item, { key: item.input });
|
|
|
|
+ item.input = '';
|
|
"
|
|
"
|
|
/>
|
|
/>
|
|
</t-dropdown-item>
|
|
</t-dropdown-item>
|
|
@@ -315,21 +327,21 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template
|
|
<template
|
|
- v-if="Object.keys(a.value).length"
|
|
|
|
|
|
+ v-if="Object.keys(item.value).length"
|
|
class="center gray mt-8"
|
|
class="center gray mt-8"
|
|
>
|
|
>
|
|
- <div class="prop-grid mt-8" v-for="(value, key) in a.value">
|
|
|
|
|
|
+ <div class="prop-grid mt-8" v-for="(value, key) in item.value">
|
|
<div class="ml-8">
|
|
<div class="ml-8">
|
|
<t-tooltip :content="key">
|
|
<t-tooltip :content="key">
|
|
- {{ getPropDesc(a, key) }}
|
|
|
|
|
|
+ {{ getPropDesc(item, key) }}
|
|
</t-tooltip>
|
|
</t-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="value-input">
|
|
<div class="value-input">
|
|
- <t-input v-model="a.value[key]" @change="valueChange($event,a.value,key)" placeholder="值" />
|
|
|
|
|
|
+ <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
|
|
</div>
|
|
</div>
|
|
<div class="right px-8" style="line-height: 20px">
|
|
<div class="right px-8" style="line-height: 20px">
|
|
<delete-icon class="hover"
|
|
<delete-icon class="hover"
|
|
- @click="delete a.value[key]"/>
|
|
|
|
|
|
+ @click="delete item.value[key]"/>
|
|
<!-- <t-icon
|
|
<!-- <t-icon
|
|
name="delete"
|
|
name="delete"
|
|
class="hover"
|
|
class="hover"
|
|
@@ -341,6 +353,14 @@
|
|
<div v-else class="center gray mt-8">暂无数据</div>
|
|
<div v-else class="center gray mt-8">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label></label>
|
|
|
|
+ <t-button style="width:150px" @click="addData(a)">
|
|
|
|
+ 添加数据
|
|
|
|
+ </t-button>
|
|
|
|
+ </div>
|
|
<div class="form-item mt-8" v-if="a.network&&a.network.protocol==='http'">
|
|
<div class="form-item mt-8" v-if="a.network&&a.network.protocol==='http'">
|
|
<label>回调</label>
|
|
<label>回调</label>
|
|
<CodeEditor
|
|
<CodeEditor
|
|
@@ -421,12 +441,184 @@
|
|
<label>消息名</label>
|
|
<label>消息名</label>
|
|
<t-input v-model="a.value" placeholder="消息名" />
|
|
<t-input v-model="a.value" placeholder="消息名" />
|
|
</div>
|
|
</div>
|
|
|
|
+ <template v-for="(item,idx) in a.list">
|
|
|
|
+ <div class="flex middle between mt-16">
|
|
|
|
+ <div class="flex middle" style="font-size:12px">消息数据{{ idx+1 }}</div>
|
|
|
|
+ <close-icon class="hover" @click="a.list.splice(index, 1)"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label>消息对象</label>
|
|
|
|
+ <t-tree-select
|
|
|
|
+ v-model="item.params"
|
|
|
|
+ :data="penTree"
|
|
|
|
+ filterable
|
|
|
|
+ placeholder="默认自己"
|
|
|
|
+ @change="getProps(item)"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label>消息数据</label>
|
|
|
|
+ <div class="w-full">
|
|
|
|
+ <div class="prop-grid head">
|
|
|
|
+ <div>属性名</div>
|
|
|
|
+ <div>属性值</div>
|
|
|
|
+ <div class="right">
|
|
|
|
+ <t-dropdown
|
|
|
|
+ :min-column-width="160"
|
|
|
|
+ @click="onAddValue(item, $event)"
|
|
|
|
+ >
|
|
|
|
+ <add-circle-icon class="hover"/>
|
|
|
|
+ <t-dropdown-menu>
|
|
|
|
+ <t-dropdown-item
|
|
|
|
+ key="custom"
|
|
|
|
+ value="custom"
|
|
|
|
+ disabled="true"
|
|
|
|
+ divider="true"
|
|
|
|
+ class="input"
|
|
|
|
+ >
|
|
|
|
+ <t-input
|
|
|
|
+ v-model="item.input"
|
|
|
|
+ style="pointer-events: auto;"
|
|
|
|
+ placeholder="自定义"
|
|
|
|
+ @enter="
|
|
|
|
+ onAddValue(item, { key: item.input });
|
|
|
|
+ item.input = '';
|
|
|
|
+ "
|
|
|
|
+ />
|
|
|
|
+ </t-dropdown-item>
|
|
|
|
+ <t-dropdown-item
|
|
|
|
+ v-for="prop in cprops"
|
|
|
|
+ :key="prop.value"
|
|
|
|
+ :value="prop.value"
|
|
|
|
+ >
|
|
|
|
+ {{ prop.label }}
|
|
|
|
+ </t-dropdown-item>
|
|
|
|
+ </t-dropdown-menu>
|
|
|
|
+ </t-dropdown>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <template
|
|
|
|
+ v-if="Object.keys(item.value).length"
|
|
|
|
+ class="center gray mt-8"
|
|
|
|
+ >
|
|
|
|
+ <div class="prop-grid mt-8" v-for="(value, key) in item.value">
|
|
|
|
+ <div class="ml-8">
|
|
|
|
+ <t-tooltip :content="key">
|
|
|
|
+ {{ getPropDesc(item, key) }}
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="value-input">
|
|
|
|
+ <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right px-8" style="line-height: 20px">
|
|
|
|
+ <delete-icon class="hover"
|
|
|
|
+ @click="delete item.value[key]"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div v-else class="center gray mt-8">暂无数据</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label></label>
|
|
|
|
+ <t-button style="width:150px" @click="addData(a)">
|
|
|
|
+ 添加消息数据
|
|
|
|
+ </t-button>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
<template v-else-if="a.action == 17">
|
|
<template v-else-if="a.action == 17">
|
|
<div class="form-item mt-8">
|
|
<div class="form-item mt-8">
|
|
<label>消息名</label>
|
|
<label>消息名</label>
|
|
<t-input v-model="a.value" placeholder="消息名" />
|
|
<t-input v-model="a.value" placeholder="消息名" />
|
|
</div>
|
|
</div>
|
|
|
|
+ <template v-for="(item,idx) in a.list">
|
|
|
|
+ <div class="flex middle between mt-16">
|
|
|
|
+ <div class="flex middle" style="font-size:12px">消息数据{{ idx+1 }}</div>
|
|
|
|
+ <close-icon class="hover" @click="a.list.splice(index, 1)"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label>消息对象</label>
|
|
|
|
+ <t-tree-select
|
|
|
|
+ v-model="item.params"
|
|
|
|
+ :data="penTree"
|
|
|
|
+ filterable
|
|
|
|
+ placeholder="默认自己"
|
|
|
|
+ @change="getProps(item)"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label>消息数据</label>
|
|
|
|
+ <div class="w-full">
|
|
|
|
+ <div class="prop-grid head">
|
|
|
|
+ <div>属性名</div>
|
|
|
|
+ <div>属性值</div>
|
|
|
|
+ <div class="right">
|
|
|
|
+ <t-dropdown
|
|
|
|
+ :min-column-width="160"
|
|
|
|
+ @click="onAddValue(item, $event)"
|
|
|
|
+ >
|
|
|
|
+ <add-circle-icon class="hover"/>
|
|
|
|
+ <t-dropdown-menu>
|
|
|
|
+ <t-dropdown-item
|
|
|
|
+ key="custom"
|
|
|
|
+ value="custom"
|
|
|
|
+ disabled="true"
|
|
|
|
+ divider="true"
|
|
|
|
+ class="input"
|
|
|
|
+ >
|
|
|
|
+ <t-input
|
|
|
|
+ v-model="item.input"
|
|
|
|
+ style="pointer-events: auto;"
|
|
|
|
+ placeholder="自定义"
|
|
|
|
+ @enter="
|
|
|
|
+ onAddValue(item, { key: item.input });
|
|
|
|
+ item.input = '';
|
|
|
|
+ "
|
|
|
|
+ />
|
|
|
|
+ </t-dropdown-item>
|
|
|
|
+ <t-dropdown-item
|
|
|
|
+ v-for="prop in cprops"
|
|
|
|
+ :key="prop.value"
|
|
|
|
+ :value="prop.value"
|
|
|
|
+ >
|
|
|
|
+ {{ prop.label }}
|
|
|
|
+ </t-dropdown-item>
|
|
|
|
+ </t-dropdown-menu>
|
|
|
|
+ </t-dropdown>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <template
|
|
|
|
+ v-if="Object.keys(item.value).length"
|
|
|
|
+ class="center gray mt-8"
|
|
|
|
+ >
|
|
|
|
+ <div class="prop-grid mt-8" v-for="(value, key) in item.value">
|
|
|
|
+ <div class="ml-8">
|
|
|
|
+ <t-tooltip :content="key">
|
|
|
|
+ {{ getPropDesc(item, key) }}
|
|
|
|
+ </t-tooltip>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="value-input">
|
|
|
|
+ <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" placeholder="值" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right px-8" style="line-height: 20px">
|
|
|
|
+ <delete-icon class="hover"
|
|
|
|
+ @click="delete item.value[key]"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div v-else class="center gray mt-8">暂无数据</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+ <div class="form-item mt-8">
|
|
|
|
+ <label></label>
|
|
|
|
+ <t-button style="width:150px" @click="addData(a)">
|
|
|
|
+ 添加消息数据
|
|
|
|
+ </t-button>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -574,9 +766,12 @@ const onChangeAction = (action: any) => {
|
|
break;
|
|
break;
|
|
case 15:
|
|
case 15:
|
|
action.network = {type: 'publish',protocol: 'mqtt', options: {}};
|
|
action.network = {type: 'publish',protocol: 'mqtt', options: {}};
|
|
- action.params = '';
|
|
|
|
- action.value = {};
|
|
|
|
|
|
+ // action.params = '';
|
|
|
|
+ // action.value = {};
|
|
action.targetType = 'id';
|
|
action.targetType = 'id';
|
|
|
|
+ action.list = [
|
|
|
|
+ {params:undefined,value:{}}
|
|
|
|
+ ];
|
|
getProps(action);
|
|
getProps(action);
|
|
break;
|
|
break;
|
|
default:
|
|
default:
|
|
@@ -715,12 +910,12 @@ const getPropDesc = (a: any, key: any) => {
|
|
|
|
|
|
const onAddValue = (action: any, data: any) => {
|
|
const onAddValue = (action: any, data: any) => {
|
|
if (!action.value[data.key]) {
|
|
if (!action.value[data.key]) {
|
|
- action.value[data.key] = undefined;
|
|
|
|
|
|
+ action.value[data.key] = "";
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
const valueChange = (e,aValue:any,key:any)=>{
|
|
const valueChange = (e,aValue:any,key:any)=>{
|
|
- aValue[key] = changeType(e);
|
|
|
|
|
|
+ aValue[key] = changeType(e)||"";
|
|
}
|
|
}
|
|
|
|
|
|
const codeChange = (e:any,a:any)=>{
|
|
const codeChange = (e:any,a:any)=>{
|
|
@@ -734,6 +929,13 @@ const decimalPlaces = (val: number) => {
|
|
return Math.round(+val * 100) / 100;
|
|
return Math.round(+val * 100) / 100;
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+const addData = (a:any)=>{
|
|
|
|
+ if(!a.list){
|
|
|
|
+ a.list = [];
|
|
|
|
+ }
|
|
|
|
+ a.list.push({params:undefined,value:{}})
|
|
|
|
+}
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
<style lang="postcss" scoped>
|
|
<style lang="postcss" scoped>
|
|
.props {
|
|
.props {
|
|
@@ -747,5 +949,11 @@ const decimalPlaces = (val: number) => {
|
|
padding: 0 8px;
|
|
padding: 0 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .input-none{
|
|
|
|
+ :deep(.t-input){
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|