提交 1899b5fd authored 作者: 王鹏飞's avatar 王鹏飞

chore: 新增触发条件组件配置生成规则

上级 0ad97f26
...@@ -3,7 +3,7 @@ import { useConnection } from '@/composables/useAllData' ...@@ -3,7 +3,7 @@ import { useConnection } from '@/composables/useAllData'
import Icon from '@/components/ConnectionIcon.vue' import Icon from '@/components/ConnectionIcon.vue'
const props = defineProps<{ const props = defineProps<{
connectionIds: string[] connectionIds?: string[]
}>() }>()
// 所有连接 // 所有连接
...@@ -11,7 +11,7 @@ const { connectionList } = useConnection() ...@@ -11,7 +11,7 @@ const { connectionList } = useConnection()
// 绑定的连接 // 绑定的连接
const connections = computed(() => { const connections = computed(() => {
return connectionList.value.filter(item => props.connectionIds.includes(item.id)) return connectionList.value.filter(item => props.connectionIds?.includes(item.id))
}) })
const list = ref([ const list = ref([
......
<!-- 学生设置组件 --> <!-- 组件设置 -->
<script setup lang="ts"> <script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { useVueFlow } from '@vue-flow/core' import { useVueFlow } from '@vue-flow/core'
......
<!-- 学生设置组件 --> <!-- 查看组件设置 -->
<script setup lang="ts"> <script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
......
<!-- 组件数据规则 -->
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
interface Props {
title?: string
model?: any
node: any
step?: boolean
onSubmit?: (form: any) => void
}
const props = withDefaults(defineProps<Props>(), { title: '配置数据生成规则', step: false })
const formRef = ref<FormInstance>()
const form = reactive({
user_total: 10000,
calculated_user_total: 0,
correct_operation_type: '1',
correct_operation_rule: '1',
correct_operation_method: '1',
correct_operation_method_value: '',
correct_operation_user_total: 8000,
error_operation_type: '1',
error_operation_rule: '1',
error_operation_method: '1',
error_operation_method_value: ''
})
const calculatedUserTotalText = computed(() => {
return form.calculated_user_total ?? '--'
})
watchEffect(() => {
Object.assign(form, props.model)
})
const rules = ref<FormRules>({})
const stepActive = ref(0)
const stepMaxNum = ref(2)
// 上一步
function handlePrev() {
stepActive.value--
}
// 下一步
function handleNext() {
stepActive.value++
}
// 保存
async function handleSubmit() {
props.onSubmit ? props.onSubmit(form) : await formRef.value?.validate().then(updateNode)
}
function updateNode() {
if (props.node) Object.assign(props.node.data, { rule: { ...form } })
}
// 计算中
const isCalculating = ref(false)
// 计算
function handleCalculate() {
isCalculating.value = true
setTimeout(() => {
isCalculating.value = false
form.calculated_user_total = 8000
}, 1000)
}
</script>
<template>
<el-dialog :title="title" append-to-body width="700px" class="rule-template">
<slot>
<slot name="header">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<el-row justify="space-between">
<slot name="header-form-prepend"></slot>
<el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
<el-form-item label="组件答案"><slot name="header-answer" /></el-form-item>
<slot name="header-form-append"></slot>
</el-row>
</el-form>
</slot>
<el-tabs v-if="step" v-model="stepActive" stretch type="border-card">
<el-tab-pane label="STEP 1:计算初始化数据量" :name="0">
<slot name="step1">
<!-- 触发条件 -->
<el-row justify="center" style="padding: 40px 0">
<el-form label-suffix=":" label-width="160px">
<el-form-item label="用户总数">
<span class="rule-num">{{ form.user_total }}</span>
</el-form-item>
<el-form-item label="满足答案的用户总数">
<span class="rule-num">{{ form.calculated_user_total }}</span>
<el-button type="primary" :loading="isCalculating" @click="handleCalculate">计算</el-button>
</el-form-item>
</el-form>
</el-row>
</slot>
</el-tab-pane>
<el-tab-pane label="STEP 2:配置生成规则" :name="1">
<slot name="step2">
<div class="rule-result-header">
<p>用户总数:{{ form.user_total }}</p>
<p>满足答案的用户总数:{{ calculatedUserTotalText }}</p>
</div>
<div class="rule-result-body">
<div class="rule-result-col">
<p class="rule-result-tips">
<el-icon class="is-success"><SuccessFilled /></el-icon>操作正确,选取数据数量:
</p>
<el-form-item>
<el-radio-group v-model="form.correct_operation_type">
<el-radio label="1">全部数据</el-radio>
<el-radio label="2">部分数据</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.correct_operation_type === '2'">
<el-form-item label="选取规则">
<el-radio-group v-model="form.correct_operation_rule">
<el-radio label="1">随机</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选取方式">
<el-radio-group v-model="form.correct_operation_method">
<el-radio label="1">百分比</el-radio>
<el-radio label="2">数值</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="请输入">
<el-input
v-model="form.correct_operation_method_value"
v-if="form.correct_operation_method === '1'">
<template #append>%</template>
</el-input>
<el-input v-model="form.correct_operation_method_value" v-else></el-input>
</el-form-item>
</template>
</div>
<el-divider direction="vertical" style="height: auto" />
<div class="rule-result-col">
<p class="rule-result-tips">
<el-icon class="is-error"><CircleCloseFilled /></el-icon>操作错误,根据实际操作结果选取数据数量:
</p>
<el-form-item>
<el-radio-group v-model="form.error_operation_type">
<el-radio label="1">全部数据</el-radio>
<el-radio label="2">部分数据</el-radio>
<el-radio label="3">不选取</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.error_operation_type === '2'">
<el-form-item label="选取规则">
<el-radio-group v-model="form.error_operation_rule">
<el-radio label="1">随机</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选取方式">
<el-radio-group v-model="form.error_operation_method">
<el-radio label="1">百分比</el-radio>
<el-radio label="2">数值</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="请输入">
<el-input v-model="form.error_operation_method_value" v-if="form.error_operation_method === '1'">
<template #append>%</template>
</el-input>
<el-input v-model="form.error_operation_method_value" v-else></el-input>
</el-form-item>
</template>
</div>
</div>
</slot>
</el-tab-pane>
<el-tab-pane label="STEP 3:预期数据量计算" :name="2">
<slot name="step3">
<div class="rule-result-header">
<p>用户总数:{{ form.user_total }}</p>
<p>满足答案的用户总数:{{ calculatedUserTotalText }}</p>
</div>
<div class="rule-result-body">
<div class="rule-result-col">
<p class="rule-result-tips">
<el-icon class="is-success"><SuccessFilled /></el-icon>操作正确,选取数据数量:
</p>
<p class="rule-num">{{ form.correct_operation_user_total }}</p>
</div>
<el-divider direction="vertical" style="height: auto" />
<div class="rule-result-col">
<p class="rule-result-tips">
<el-icon class="is-error"><CircleCloseFilled /></el-icon>操作错误,根据实际操作结果选取数据数量:
</p>
<p class="rule-num">{{ form.error_operation_type === '3' ? '0' : '实际判断结果计算' }}</p>
</div>
</div>
</slot>
</el-tab-pane>
</el-tabs>
</slot>
<template #footer>
<el-row justify="center" v-if="step">
<el-button plain auto-insert-space @click="$emit('update:modelValue', false)" v-if="stepActive === 0"
>关闭</el-button
>
<el-button plain auto-insert-space @click="handlePrev" v-if="stepActive >= 1">上一步</el-button>
<el-button type="primary" auto-insert-space @click="handleNext" v-if="stepActive < stepMaxNum"
>下一步</el-button
>
<el-button
type="primary"
auto-insert-space
@click="handleSubmit().then(() => $emit('update:modelValue', false))"
v-if="stepActive === stepMaxNum">
保存
</el-button>
</el-row>
<el-row justify="center" v-else>
<el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
<el-button
type="primary"
auto-insert-space
@click="handleSubmit().then(() => $emit('update:modelValue', false))">
保存
</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style lang="scss">
.rule-template {
.el-form-item {
margin-bottom: 10px;
}
.rule-num {
margin-right: 20px;
font-size: 20px;
font-weight: bold;
color: var(--main-color);
text-align: center;
}
.rule-result-header {
padding: 10px 0;
margin-bottom: 30px;
display: flex;
justify-content: space-around;
color: #9a9a9a;
border-bottom: 1px solid #dcdfe6;
}
.rule-result-body {
display: flex;
column-gap: 20px;
}
.rule-result-col {
flex: 1;
padding: 10px 0;
}
.rule-result-tips {
margin-bottom: 20px;
display: flex;
align-items: center;
white-space: nowrap;
.el-icon {
font-size: 20px;
margin-right: 5px;
}
}
.is-success {
color: #81b337;
}
.is-error {
color: #aa0231;
}
}
</style>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -31,4 +32,6 @@ const settingVisible = ref(false) ...@@ -31,4 +32,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node">
<el-form label-suffix=":">
<el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
<el-form-item label="用户总数">10000</el-form-item>
<el-form-item label="预计选取用户总数">10000</el-form-item>
</el-form>
<p>定时触发条件无需设置数据生成规则</p>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue' ...@@ -5,6 +5,7 @@ import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue')) const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))
const props = defineProps<{ node: any }>() const props = defineProps<{ node: any }>()
...@@ -32,4 +33,6 @@ const settingVisible = ref(false) ...@@ -32,4 +33,6 @@ const settingVisible = ref(false)
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" /> <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 --> <!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" /> <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
<!-- 数据生成规则 -->
<Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template> </template>
<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
defineProps<{ node: any }>()
</script>
<template>
<RuleTemplate :node="node" step>
<template #header-answer>答案</template>
<template #header-form-append>
<el-form-item label="事件">
<el-select>
<el-option value="关注公众号"></el-option>
</el-select>
</el-form-item>
</template>
</RuleTemplate>
</template>
import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/trip/rule',
component: () => import('./views/Index.vue')
}
]
export { routes }
<!-- 固定旅程模板配置 -->
<script setup lang="ts">
import TripFlow from '@/components/flow/Index.vue'
import TripFlowSidebar from '@/components/flow/Sidebar.vue'
const form = reactive({
start_type: 1,
auto_start: 1,
auto_start_time: '',
auto_start_type: 1,
stop_type: 1
})
const elements = ref([
{
id: '1',
type: 'custom',
position: { x: 100, y: 100 },
label: '定时触发',
data: { name: '定时触发', type: '触发条件', icon: '13', componentName: 'TCRealTimeTrigger' }
},
{
id: '2',
type: 'custom',
position: { x: 200, y: 100 },
label: '加入群组',
data: { name: '加入群组', type: '触发条件', icon: '14', componentName: 'TCJoinGroup' }
},
{
id: '3',
type: 'custom',
position: { x: 300, y: 100 },
label: '变更属性',
data: { name: '变更属性', type: '触发条件', icon: '15', componentName: 'TCChangeProps' }
},
{
id: '4',
type: 'custom',
position: { x: 400, y: 100 },
label: '公众号',
data: { name: '公众号', type: '触发条件', icon: '1', componentName: 'TCOffiaccount', connection_type: 1 }
},
{
id: '5',
type: 'custom',
position: { x: 500, y: 100 },
label: '抖音',
data: { name: '抖音', type: '触发条件', icon: '6', componentName: 'TCDouyin', connection_type: 6 }
},
{
id: '6',
type: 'custom',
position: { x: 600, y: 100 },
label: '小红书',
data: { name: '小红书', type: '触发条件', icon: '8', componentName: 'TCXiaohongshu', connection_type: 8 }
},
{
id: '7',
type: 'custom',
position: { x: 700, y: 100 },
label: '微博',
data: { name: '微博', type: '触发条件', icon: '7', componentName: 'TCWeibo', connection_type: 7 }
},
{
id: '8',
type: 'custom',
position: { x: 800, y: 100 },
label: '自定义',
data: { name: '自定义', type: '触发条件', icon: '12', componentName: 'TCCustom', connection_type: 12 }
},
{
id: '9',
type: 'custom',
position: { x: 900, y: 100 },
label: '小鹅通',
data: { name: '小鹅通', type: '触发条件', icon: '3', componentName: 'TCXiaoetong', connection_type: 3 }
},
{
id: '10',
type: 'custom',
position: { x: 1000, y: 100 },
label: '问卷星',
data: { name: '问卷星', type: '触发条件', icon: '4', componentName: 'TCWenjuanxing', connection_type: 4 }
}
])
function handleSubmit() {}
</script>
<template>
<AppCard title="实验数据规则配置">
<el-form label-suffix=":">
<el-row>
<el-col :span="6"><el-form-item label="实验名称"></el-form-item></el-col>
<el-col :span="6"><el-form-item label="实验类型"></el-form-item></el-col>
<el-col :span="6"><el-form-item label="用户旅程模板"></el-form-item></el-col>
<el-col :span="6"><el-form-item label="模板类型"></el-form-item></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="数据生成启动控制">
<el-radio-group v-model="form.start_type">
<el-radio :label="1">人工启动</el-radio>
<el-radio :label="2">自动启动</el-radio>
</el-radio-group>
<el-radio-group v-model="form.auto_start" v-if="form.start_type === 2">
<el-radio :label="1">
<span>每隔</span>
<el-input v-model="form.auto_start_time" style="width: 200px">
<template #append>
<el-select v-model="form.auto_start_type" style="width: 90px">
<el-option :value="1" label="小时" />
<el-option :value="2" label="天" />
</el-select>
</template>
</el-input>
</el-radio>
<el-radio :label="2">学生完成旅程配置</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据生成停止控制">
<el-radio-group v-model="form.stop_type">
<el-radio :label="1">一次性生成</el-radio>
<el-radio :label="2" disabled>覆盖生成</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<TripFlow v-model="elements" action="rule" :nodes-draggable="false" :nodes-connectable="false">
<template #left-panel>
<TripFlowSidebar />
</template>
<template #footer>
<el-row justify="center">
<el-button plain auto-insert-space>取消</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
</el-row>
</template>
</TripFlow>
</AppCard>
</template>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论