提交 3112c6ea authored 作者: lihuihui's avatar lihuihui

开发旅程组件

上级 fc48b505
import httpRequest from '@/utils/axios'
// 获取实验旅程中的群组列表
export function getGroupsList() {
return httpRequest.get('/api/lab/v1/experiment/itinerary/groups')
}
// 获取实验旅程中的属性列表
export function getAttrList() {
return httpRequest.get('/api/lab/v1/experiment/itinerary/user-attr')
}
// 新建用户
export function createMember(data: { name: string; status: string; experiment_connection_id: string; gender: string; mobile: string; fields: string }) {
return httpRequest.post('/api/lab/v1/experiment/member/create', data)
}
<script setup lang="ts">
import TriggeringConditions1 from './components/triggeringConditions/TriggeringConditions1.vue'
import TriggeringConditions2 from './components/triggeringConditions/TriggeringConditions2.vue'
const component = computed(() => {
const allComponent: any = {
TriggeringConditions1: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions1.vue'))
),
TriggeringConditions2: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions2.vue'))
),
TriggeringConditions3: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions3.vue'))
),
TriggeringConditions4: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions4.vue'))
),
TriggeringConditions5: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions5.vue'))
),
TriggeringConditions6: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions6.vue'))
),
TriggeringConditions7: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions7.vue'))
),
TriggeringConditions8: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions8.vue'))
)
}
return allComponent[props.node?.data.componentName]
})
const props = defineProps<{ node: any }>()
console.log(props, 'props')
</script>
<template>
<component :is="TriggeringConditions2"></component>
<component :is="component" v-bind="props"></component>
</template>
......@@ -51,7 +51,13 @@ const onDrop = (event: DragEvent) => {
const position = project({ x: event.clientX - left, y: event.clientY - top })
const newNode = { id: getId(), type: 'custom', position, label: data.name, data }
const newNode = {
id: getId(),
type: 'custom',
position,
label: data.name,
data
}
addNodes([newNode])
......
......@@ -8,14 +8,14 @@ const list = ref([
color: '#4C5AB3'
},
children: [
{ name: '实时触发', type: '触发条件', icon: '13' },
{ name: '加入群组', type: '触发条件', icon: '14' },
{ name: '变更属性', type: '触发条件', icon: '15' },
{ name: '公众号', type: '触发条件', icon: '1' },
{ name: '抖音', type: '触发条件', icon: '6' },
{ name: '小红书', type: '触发条件', icon: '8' },
{ name: '微博', type: '触发条件', icon: '7' },
{ name: '钉钉', type: '触发条件', icon: '2' }
{ name: '实时触发', type: '触发条件', icon: '13', componentName: 'TriggeringConditions1' },
{ name: '加入群组', type: '触发条件', icon: '14', componentName: 'TriggeringConditions2' },
{ name: '变更属性', type: '触发条件', icon: '15', componentName: 'TriggeringConditions3' },
{ name: '公众号', type: '触发条件', icon: '1', componentName: 'TriggeringConditions4' },
{ name: '抖音', type: '触发条件', icon: '6', componentName: 'TriggeringConditions5' },
{ name: '小红书', type: '触发条件', icon: '8', componentName: 'TriggeringConditions6' },
{ name: '微博', type: '触发条件', icon: '7', componentName: 'TriggeringConditions7' },
{ name: '自定义', type: '触发条件', icon: '12', componentName: 'TriggeringConditions8' }
]
},
{
......
......@@ -14,13 +14,23 @@ const { findNode } = useVueFlow()
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ id: '', name: '', type: '', trigger_type: '单次触发', trigger_time: '', answer_analysis: '' })
const form = reactive({
repeat_trigger: { num: '1', date_unit: '0', time: new Date(), date: '' },
id: '',
name: '',
type: '',
trigger_type: '0',
trigger_time: '',
answer_analysis: ''
})
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
......@@ -44,7 +54,7 @@ function handleClosed() {
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="13" :multicolour="true" w="24" h="24"></Icon>
<Icon class="icon" name="13" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
......@@ -59,14 +69,46 @@ function handleClosed() {
</el-row>
<el-form-item label="触发类型" prop="trigger_type">
<el-radio-group v-model="form.trigger_type">
<el-radio label="单次触发" />
<el-radio label="重复触发" />
<el-radio label="立即触发" />
<el-radio label="0">单次触发</el-radio>
<el-radio label="1">重复触发</el-radio>
<el-radio label="2">立即触发</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
</el-form-item>
<template v-if="form.trigger_type === '0'">
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
</el-form-item>
</template>
<template v-if="form.trigger_type === '1'">
<el-form-item label="触发时间">
<div style="display: flex">
<span></span>
<el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
<el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
<el-option value="0" label="天"></el-option>
<el-option value="1" label="周"></el-option>
<el-option value="2" label="月"></el-option>
</el-select>
<span></span>
<el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
<span>触发</span>
</div>
</el-form-item>
<el-form-item label="起止时间">
<div>
<span style="font-size: 12px; color: #ccc"
>提示: 不设起止日期,发布期间会按上面的触发时间规则一直重复触发</span
>
<el-date-picker
v-model="form.repeat_trigger.date"
type="datetimerange"
range-separator="To"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</div>
</el-form-item>
</template>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
......@@ -91,14 +133,46 @@ function handleClosed() {
<el-card header="标准答案" shadow="never">
<el-form-item label="触发类型" prop="trigger_type">
<el-radio-group v-model="form.trigger_type">
<el-radio label="单次触发" />
<el-radio label="重复触发" />
<el-radio label="立即触发" />
<el-radio label="0">单次触发</el-radio>
<el-radio label="1">重复触发</el-radio>
<el-radio label="2">立即触发</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
</el-form-item>
<template v-if="form.trigger_type === '0'">
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
</el-form-item>
</template>
<template v-if="form.trigger_type === '1'">
<el-form-item label="触发时间">
<div style="display: flex">
<span></span>
<el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
<el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
<el-option value="0" label="天"></el-option>
<el-option value="1" label="周"></el-option>
<el-option value="2" label="月"></el-option>
</el-select>
<span></span>
<el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
<span>触发</span>
</div>
</el-form-item>
<el-form-item label="起止时间">
<div>
<span style="font-size: 12px; color: #ccc"
>提示: 不设起止日期,发布期间会按上面的触发时间规则一直重复触发</span
>
<el-date-picker
v-model="form.repeat_trigger.date"
type="datetimerange"
range-separator="To"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</div>
</el-form-item>
</template>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
......
......@@ -3,6 +3,7 @@
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { getGroupsList } from '@/api/flow'
const props = defineProps({ node: Object })
......@@ -14,13 +15,15 @@ const { findNode } = useVueFlow()
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ id: '', name: '', type: '', trigger_type: '单次触发', trigger_time: '', answer_analysis: '' })
const form = reactive({ group_id: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
......@@ -38,13 +41,25 @@ function updateNode() {
function handleClosed() {
formRef.value.resetFields()
}
// 获取群组列表
const groupsOption = ref([])
const getGroups = function () {
getGroupsList().then(res => {
groupsOption.value = res.data.items
})
}
onMounted(() => {
getGroups()
})
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="14" :multicolour="true" w="24" h="24"></Icon>
<Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
......@@ -57,15 +72,13 @@ function handleClosed() {
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item label="触发类型" prop="trigger_type">
<el-radio-group v-model="form.trigger_type">
<el-radio label="单次触发" />
<el-radio label="重复触发" />
<el-radio label="立即触发" />
</el-radio-group>
</el-form-item>
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
<el-form-item>
<el-select style="width: 100%" v-model="form.group_id" placeholder="请选择需要监控的群组">
<el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
</el-select>
<span style="font-size: 12px; text-align: right; color: #ccc"
>您选择的群组中,新加入的用户将会触发该旅程</span
>
</el-form-item>
</template>
<!-- 老师设置组件 -->
......@@ -89,15 +102,11 @@ function handleClosed() {
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item label="触发类型" prop="trigger_type">
<el-radio-group v-model="form.trigger_type">
<el-radio label="单次触发" />
<el-radio label="重复触发" />
<el-radio label="立即触发" />
</el-radio-group>
</el-form-item>
<el-form-item label="触发时间" prop="trigger_time">
<el-date-picker v-model="form.trigger_time" type="date" />
<el-form-item>
<el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
<span style="font-size: 12px; text-align: right; color: #ccc"
>您选择的群组中,新加入的用户将会触发该旅程</span
>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
......
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { getAttrList } from '@/api/flow'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ attr_id: '', condition_id: '', attr_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
// 获取群组列表
const attrOption = ref([])
const getAttr = function () {
getAttrList().then(res => {
attrOption.value = res.data.items
})
}
// 选择属性后联动后面的选项
const conditionOption = ref([])
const changeAttr = function () {
form.condition_id = ''
const options = {
strings: [
{ value: '0', label: '等于' },
{ value: '1', label: '不等于' },
{ value: '2', label: '包含' },
{ value: '3', label: '不包含' },
{ value: '4', label: '空值' },
{ value: '5', label: '非空' }
],
numbers: [
{ value: '0', label: '=' },
{ value: '1', label: '≠' },
{ value: '2', label: '>' },
{ value: '3', label: '≥' },
{ value: '4', label: '<' },
{ value: '5', label: '≤' },
{ value: '6', label: '区间' },
{ value: '7', label: '空值' },
{ value: '8', label: '非空' }
]
}
conditionOption.value =
attrOption.value.find(item => item.id === form.attr_id).type === '1' ? options.strings : options.numbers
}
onMounted(() => {
getAttr()
})
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<div>
<div style="display: flex">
<el-select @change="changeAttr" style="width: 130px" v-model="form.attr_id" placeholder="请选择属性">
<el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
</el-select>
<el-select style="margin: 0 10px; width: 130px" v-model="form.condition_id" placeholder="请选择">
<el-option
:key="item.id"
v-for="item in conditionOption"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
<el-input v-model="form.attr_value" style="width: 200px" placeholder="请输入"></el-input>
</div>
<p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户,将会触发该旅程</p>
</div>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<div>
<div style="display: flex">
<el-select @change="changeAttr" style="width: 130px" v-model="form.attr_id" placeholder="请选择属性">
<el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
</el-select>
<el-select style="margin: 0 10px; width: 130px" v-model="form.condition_id" placeholder="请选择">
<el-option
:key="item.id"
v-for="item in conditionOption"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
<el-input v-model="form.attr_value" style="width: 200px" placeholder="请输入"></el-input>
</div>
<p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户,将会触发该旅程</p>
</div>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
stepActive.value = 0
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
const stepOneOptions = [
{ label: '关注公众号', value: '0' },
{ label: '留言文本', value: '1' },
{ label: '留言图片', value: '2' },
{ label: '留言语音', value: '3' },
{ label: '留言视频', value: '4' },
{ label: '点击菜单', value: '5' },
{ label: '点击菜单会话项', value: '6' },
{ label: '扫描二维码', value: '7' },
{ label: '取消关注', value: '8' },
{ label: '其他', value: '9' }
]
const stepTwoOptions = [
{ label: '关注公众号', value: '0' },
{ label: '留言图片', value: '1' },
{ label: '留言语音', value: '2' },
{ label: '留言视频', value: '3' },
{ label: '扫描二维码', value: '4' },
{ label: '取消关注', value: '5' },
{ label: '其他', value: '6' }
]
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
<el-input v-model="form.step_three_value" v-if="stepActive === 2" placeholder="请输入"></el-input>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
<el-input v-model="form.step_three_value" v-if="stepActive === 2" placeholder="请输入"></el-input>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
<el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
<el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { getAttrList } from '@/api/flow'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
stepActive.value = 0
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
const stepOneOptions = [
{ label: '用户发送文本私信', value: '0' },
{ label: '用户发送表情私信', value: '1' },
{ label: '用户发送卡片私信', value: '2' },
{ label: '在主页Tab提交预约', value: '3' }
]
const stepTwoOptions = [
{ label: '向用户发送文本私信', value: '0' },
{ label: '向用户发送图片私信', value: '1' },
{ label: '向用户发送视频私信', value: '2' }
]
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
<el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
<el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { getAttrList } from '@/api/flow'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
stepActive.value = 0
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
const stepOneOptions = [
{ label: '被用户关注', value: '0' },
{ label: '主页被点赞', value: '1' },
{ label: '主页被收藏', value: '2' },
{ label: '笔记被点赞', value: '3' },
{ label: '笔记被收藏', value: '4' },
{ label: '笔记被转发', value: '5' }
]
const stepTwoOptions = []
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="8" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
<el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
<el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { getAttrList } from '@/api/flow'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
stepActive.value = 0
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
const stepOneOptions = [
{ label: '关注微博', value: '0' },
{ label: '发送私信', value: '1' }
]
const stepTwoOptions = [
{ label: '发送私信', value: '0' },
{ label: '发送图片', value: '1' }
]
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
<el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
<el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
updateNode()
settingVisible.value = false
stepActive.value = 0
})
}
function updateNode() {
const node = findNode(props.node.id)
if (node) Object.assign(node.data, form)
}
function handleClosed() {
formRef.value.resetFields()
}
const stepOneOptions = [
{ label: '访问网页', value: '0' },
{ label: '激活APP', value: '1' },
{ label: '启动APP', value: '2' },
{ label: '退出APP', value: '3' },
{ label: '展示APP页面', value: '4' },
{ label: '点击APP元素', value: '5' },
{ label: '退出APP页面', value: '6' },
{ label: '离开网页', value: '7' }
]
const stepTwoOptions = computed(() => {
return form.step_one_id === '0'
? [
{ label: '访问网页', value: '0' },
{ label: '离开网页', value: '1' }
]
: [
{ label: '激活APP', value: '0' },
{ label: '启动APP', value: '1' },
{ label: '退出APP', value: '2' },
{ label: '点击APP元素', value: '3' },
{ label: '展示APP页面', value: '4' },
{ label: '退出APP页面', value: '5' }
]
})
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
<Icon class="icon" name="12" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form ref="formRef" :model="form" :rules="rules" label-suffix=":">
<!-- 学生设置组件 -->
<template v-if="role === 'student'">
<el-row justify="space-between">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
<el-form-item label="分值">{{ form.score }} </el-form-item>
</el-row>
<el-form-item>
<el-radio-group @change="form.step_two_value = ''" v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select
placeholder="请选择关联使用自定义链接名称"
style="width: 100%"
v-model="form.step_two_value"
v-if="stepActive === 1"
>
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
<el-input
v-model="form.step_three_value"
v-if="stepActive === 2"
:placeholder="form.step_one_id === '0' ? '请输入网页地址' : '请输入APP名称'"
></el-input>
</el-form-item>
</template>
<!-- 老师设置组件 -->
<template v-if="role === 'teacher'">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件类型">{{ form.type }}</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件名称">{{ form.name }}</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组件分值" prop="score">
<el-input v-model="form.score" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="已设置组件分值">110</el-form-item>
</el-col>
</el-row>
<el-card header="标准答案" shadow="never">
<el-form-item>
<el-radio-group @change="form.step_two_value = ''" v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
item.label
}}</el-radio>
</el-radio-group>
<el-select
placeholder="请选择关联使用自定义链接名称"
style="width: 100%"
v-model="form.step_two_value"
v-if="stepActive === 1"
>
<el-option v-for="item in stepTwoOptions" :value="item.value" :label="item.label"></el-option>
</el-select>
<el-input
v-model="form.step_three_value"
v-if="stepActive === 2"
:placeholder="form.step_one_id === '0' ? '请输入网页地址' : '请输入APP名称'"
></el-input>
</el-form-item>
</el-card>
<el-card header="答案解析" shadow="never" style="margin-top: 20px">
<el-form-item prop="answer_analysis">
<el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
</el-form-item>
</el-card>
</template>
</el-form>
<template #footer>
<el-row justify="center">
<!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
<el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
<el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
</el-row>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.node-item {
position: relative;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
......@@ -7,14 +7,7 @@ const elements = ref([
type: 'custom',
label: '实时触发',
position: { x: 0, y: 0 },
data: { name: '实时触发', type: '触发条件', score: 10 }
},
{
id: '2',
type: 'custom',
label: '实时触发',
position: { x: 100, y: 100 },
data: { name: '实时触发', type: '触发条件', score: 12 }
data: { name: '实时触发', type: '触发条件', score: 10, componentName: 'TriggeringConditions6' }
}
])
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论