提交 2c9d1834 authored 作者: lihuihui's avatar lihuihui

update

上级 fd0b9e3b
...@@ -10,12 +10,17 @@ export function getAttrList() { ...@@ -10,12 +10,17 @@ export function getAttrList() {
return httpRequest.get('/api/lab/v1/experiment/itinerary/user-attr') 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)
}
// 链接列表 // 链接列表
export function getConnectionList(params: { created_operator?: string; type?: string; page?: number; page_size?: number }) { export function getConnectionList(params: { created_operator?: string; type?: string; page?: number; page_size?: number }) {
return httpRequest.get('/api/lab/v1/experiment/connection/list', { params }) return httpRequest.get('/api/lab/v1/experiment/connection/list', { params })
} }
// 标签列表
export function getTagsList() {
return httpRequest.get('/api/lab/v1/experiment/itinerary/tags')
}
// 时间列表
export function getEventsList() {
return httpRequest.get('/api/lab/v1/experiment/itinerary/events')
}
...@@ -31,19 +31,36 @@ const component = computed(() => { ...@@ -31,19 +31,36 @@ const component = computed(() => {
TriggeringConditions10: markRaw( TriggeringConditions10: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions10.vue')) defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions10.vue'))
), ),
marketingAction1: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction1.vue'))), MarketingAction1: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction1.vue'))),
marketingAction2: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction2.vue'))), MarketingAction2: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction2.vue'))),
marketingAction3: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction3.vue'))), MarketingAction3: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction3.vue'))),
marketingAction4: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction4.vue'))), MarketingAction4: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction4.vue'))),
marketingAction5: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction5.vue'))), MarketingAction5: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction5.vue'))),
marketingAction6: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction6.vue'))), MarketingAction6: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction6.vue'))),
marketingAction7: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction7.vue'))), MarketingAction7: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction7.vue'))),
marketingAction8: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction8.vue'))), MarketingAction8: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction8.vue'))),
marketingAction9: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction9.vue'))), MarketingAction9: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction9.vue'))),
marketingAction10: markRaw( MarketingAction10: markRaw(
defineAsyncComponent(() => import('./components/marketingAction/marketingAction10.vue')) defineAsyncComponent(() => import('./components/marketingAction/MarketingAction10.vue'))
), ),
marketingAction11: markRaw(defineAsyncComponent(() => import('./components/marketingAction/marketingAction11.vue'))) MarketingAction11: markRaw(
defineAsyncComponent(() => import('./components/marketingAction/MarketingAction11.vue'))
),
ConditionalBranch1: markRaw(
defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch1.vue'))
),
ConditionalBranch2: markRaw(
defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch2.vue'))
),
ConditionalBranch3: markRaw(
defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch3.vue'))
),
ConditionalBranch4: markRaw(
defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch4.vue'))
),
ConditionalBranch5: markRaw(
defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch5.vue'))
)
} }
return allComponent[props.node?.data.componentName] return allComponent[props.node?.data.componentName]
}) })
......
...@@ -28,18 +28,18 @@ const list = ref([ ...@@ -28,18 +28,18 @@ const list = ref([
}, },
children: [ children: [
// { name: '终止旅程', type: '营销动作', icon: '16' }, // { name: '终止旅程', type: '营销动作', icon: '16' },
{ name: '加入群组', type: '营销动作', icon: '14', componentName: 'marketingAction1' }, { name: '加入群组', type: '营销动作', icon: '14', componentName: 'MarketingAction1' },
{ name: '移除群组', type: '营销动作', icon: '17', componentName: 'marketingAction2' }, { name: '移除群组', type: '营销动作', icon: '17', componentName: 'MarketingAction2' },
{ name: '变更属性', type: '营销动作', icon: '15', componentName: 'marketingAction3' }, { name: '变更属性', type: '营销动作', icon: '15', componentName: 'MarketingAction3' },
{ name: '延时处理', type: '营销动作', icon: '18', componentName: 'marketingAction4' }, { name: '延时处理', type: '营销动作', icon: '18', componentName: 'MarketingAction4' },
{ name: '内部通知', type: '营销动作', icon: '19', componentName: 'marketingAction5' }, { name: '内部通知', type: '营销动作', icon: '19', componentName: 'MarketingAction5' },
{ name: '短信', type: '营销动作', icon: '10', componentName: 'marketingAction6' }, { name: '短信', type: '营销动作', icon: '10', componentName: 'MarketingAction6' },
{ name: '邮件', type: '营销动作', icon: '9', componentName: 'marketingAction7' }, { name: '邮件', type: '营销动作', icon: '9', componentName: 'MarketingAction7' },
{ name: '公众号', type: '营销动作', icon: '1', componentName: 'marketingAction8' }, { name: '公众号', type: '营销动作', icon: '1', componentName: 'MarketingAction8' },
{ name: '抖音', type: '营销动作', icon: '6', componentName: 'marketingAction9' }, { name: '抖音', type: '营销动作', icon: '6', componentName: 'MarketingAction9' },
// { name: '小红书', type: '营销动作', icon: '8' }, // { name: '小红书', type: '营销动作', icon: '8' },
{ name: '微博', type: '营销动作', icon: '7', componentName: 'marketingAction10' }, { name: '微博', type: '营销动作', icon: '7', componentName: 'MarketingAction10' },
{ name: '钉钉', type: '营销动作', icon: '2', componentName: 'marketingAction11' } { name: '钉钉', type: '营销动作', icon: '2', componentName: 'MarketingAction11' }
] ]
}, },
{ {
...@@ -49,13 +49,12 @@ const list = ref([ ...@@ -49,13 +49,12 @@ const list = ref([
color: '#CEAA62' color: '#CEAA62'
}, },
children: [ children: [
{ name: '属性判断', type: '条件分支', icon: '20' }, // { name: '属性判断', type: '条件分支', icon: '20' },
{ name: '标签判断', type: '条件分支', icon: '21' }, { name: '标签判断', type: '条件分支', icon: '21', componentName: 'ConditionalBranch1' },
{ name: '群组判断', type: '条件分支', icon: '22' }, { name: '群组判断', type: '条件分支', icon: '22', componentName: 'ConditionalBranch2' },
{ name: '事件判断', type: '条件分支', icon: '23' }, { name: '事件判断', type: '条件分支', icon: '23', componentName: 'ConditionalBranch3' },
{ name: '时间判断', type: '条件分支', icon: '24' }, { name: '时间判断', type: '条件分支', icon: '24', componentName: 'ConditionalBranch4' },
{ name: '公众号', type: '条件分支', icon: '1' }, { name: '公众号', type: '条件分支', icon: '1', componentName: 'ConditionalBranch5' }
{ name: '钉钉', type: '条件分支', icon: '2' }
] ]
} }
]) ])
......
<!-- 定时触发 -->
<script setup>
import { useVueFlow } from '@vue-flow/core'
import NodeTemplate from '../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'
import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
import { getTagsList } 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({
score: '',
type: '',
name: '',
tags: [
{
tag_id: '',
condition_id: '',
tag_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 tags = ref()
onMounted(() => {
getTagsList().then(res => {
tags.value = res.data.items
})
})
const conditionOptions = [
{ label: '等于', value: '0' },
{ label: '不等于', value: '1' },
{ label: '包含', value: '2' },
{ label: '不包含', value: '3' },
{ label: '空值', value: '4' },
{ label: '非空', value: '5' }
]
const addTag = function () {
form.tags.push({
tag_id: '',
condition_id: '',
tag_value: ''
})
}
const removeTag = function (index) {
form.tags.splice(index, 1)
}
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
<Icon class="icon" name="21" 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>
<div style="display: flex; align-items: center; margin-bottom: 15px" v-for="(item, index) in form.tags">
<el-select v-model="item.tag_id" placeholder="请选择标签">
<el-option v-for="opt in tags" :value="opt.id" :label="opt.name"></el-option>
</el-select>
<el-select style="margin: 0 10px" v-model="item.condition_id" placeholder="请选择">
<el-option v-for="opt in conditionOptions" :value="opt.value" :label="opt.label"></el-option>
</el-select>
<el-input v-model="item.tag_value" placeholder="请输入标签值"></el-input>
<el-icon
v-if="form.tags.length > 1"
size="20"
color="#AA1941"
style="margin-left: 10px"
@click="removeTag(index)"
><RemoveFilled
/></el-icon>
<el-icon
v-if="index === form.tags.length - 1"
size="20"
color="#AA1941"
style="margin-left: 10px"
@click="addTag"
><CirclePlusFilled
/></el-icon>
</div>
</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">
<div style="display: flex; align-items: center; margin-bottom: 15px" v-for="(item, index) in form.tags">
<el-select v-model="item.tag_id" placeholder="请选择标签">
<el-option v-for="opt in tags" :value="opt.id" :label="opt.name"></el-option>
</el-select>
<el-select style="margin: 0 10px" v-model="item.condition_id" placeholder="请选择">
<el-option v-for="opt in conditionOptions" :value="opt.value" :label="opt.label"></el-option>
</el-select>
<el-input v-model="item.tag_value" placeholder="请输入标签值"></el-input>
<el-icon
v-if="form.tags.length > 1"
size="20"
color="#AA1941"
style="margin-left: 10px"
@click="removeTag(index)"
><RemoveFilled
/></el-icon>
<el-icon
v-if="index === form.tags.length - 1"
size="20"
color="#AA1941"
style="margin-left: 10px"
@click="addTag"
><CirclePlusFilled
/></el-icon>
</div>
</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'
import { getGroupsList } 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({
score: '',
type: '',
name: '',
radio: '0',
group_id: ''
})
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 groupsOption = ref()
onMounted(() => {
getGroupsList().then(res => {
groupsOption.value = res.data.items
})
})
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
<Icon class="icon" name="22" 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.radio">
<el-radio label="0">在群组中</el-radio>
<el-radio label="1">不在群组中</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-select v-model="form.group_id">
<el-option v-for="item in groupsOption" :value="item.id" :label="item.name"></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.radio">
<el-radio label="0">在群组中</el-radio>
<el-radio label="1">不在群组中</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-select v-model="form.group_id">
<el-option v-for="item in groupsOption" :value="item.id" :label="item.name"></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 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'
import { getEventsList } 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({
score: '',
type: '',
name: '',
event_id: ''
})
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 eventsOption = ref()
onMounted(() => {
getEventsList().then(res => {
eventsOption.value = res.data.items
})
})
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
<Icon class="icon" name="23" 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-select v-model="form.event_id" placeholder="请选择触发事件">
<el-option v-for="item in eventsOption" :value="item.id" :label="item.name"></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-select v-model="form.event_id" placeholder="请选择触发事件">
<el-option v-for="item in eventsOption" :value="item.id" :label="item.name"></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 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({
score: '',
type: '',
name: '',
radio: '0',
date: '',
condition_id: '0',
week: []
})
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()
}
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
<Icon class="icon" name="24" 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 label="时间判断类型">
<el-radio-group v-model="form.radio">
<el-radio label="0">日期范围</el-radio>
<el-radio label="1">星期范围</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="进入该步骤的时间">
<template v-if="form.radio === '0'">
<el-select v-model="form.condition_id" placeholder="请选择" style="width: 115px">
<el-option label="早于" value="0" />
<el-option label="晚于" value="1" />
<el-option label="区间" value="2" />
</el-select>
<el-date-picker
v-if="form.condition_id === '0' || form.condition_id === '1'"
v-model="form.date"
type="date"
placeholder="请选择"
/>
<el-date-picker
v-else
v-model="form.date"
style="width: 100px"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</template>
<template v-else>
<el-checkbox-group v-model="form.week">
<el-checkbox label="周一" />
<el-checkbox label="周二" />
<el-checkbox label="周三" />
<el-checkbox label="周四" />
<el-checkbox label="周五" />
<el-checkbox label="周六" />
<el-checkbox label="周日" />
</el-checkbox-group>
</template>
</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 label="时间判断类型">
<el-radio-group v-model="form.radio">
<el-radio label="0">日期范围</el-radio>
<el-radio label="1">星期范围</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="进入该步骤的时间">
<template v-if="form.radio === '0'">
<el-select v-model="form.condition_id" placeholder="请选择" style="width: 115px">
<el-option label="早于" value="0" />
<el-option label="晚于" value="1" />
<el-option label="区间" value="2" />
</el-select>
<el-date-picker
v-if="form.condition_id === '0' || form.condition_id === '1'"
v-model="form.date"
type="date"
placeholder="请选择"
/>
<el-date-picker
v-else
v-model="form.date"
style="width: 100px"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</template>
<template v-else>
<el-checkbox-group v-model="form.week">
<el-checkbox label="周一" />
<el-checkbox label="周二" />
<el-checkbox label="周三" />
<el-checkbox label="周四" />
<el-checkbox label="周五" />
<el-checkbox label="周六" />
<el-checkbox label="周日" />
</el-checkbox-group>
</template>
</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'
import { getConnectionList } from '@/api/flow'
import { useMapStore } from '@/stores/map'
import { getMaterialList } from '@/api/base'
const store = useMapStore()
const props = defineProps({ node: Object })
const action = inject('action')
// const role = inject('role')
const role = 'student'
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ material_type: '0', step_one_id: '0', step_two_value: '', material_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' }]
const stepTwoOptions = ref()
onMounted(() => {
// 链接列表
getConnectionList({ type: '1' }).then(res => {
stepTwoOptions.value = res.data.list
})
changeMaterialType()
})
// 步骤
let stepActive = ref(0)
// 选择资料类型
let materiaList = ref([])
const changeMaterialType = function () {
form.material_value = ''
getMaterialList({ type: form.material_type }).then(res => {
materiaList.value = res.data.list
})
}
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<Icon name="hexagon" color="#CEAA62" 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-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-form-item>
<el-radio-group v-model="form.material_type">
<el-radio style="width: 105px" label="0">关注中</el-radio>
</el-radio-group>
</el-form-item>
</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.id" :label="item.type_name"></el-option>
</el-select>
</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-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-form-item>
<el-radio-group v-model="form.material_type">
<el-radio style="width: 105px" label="0">关注中</el-radio>
</el-radio-group>
</el-form-item>
</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.id" :label="item.type_name"></el-option>
</el-select>
</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>
...@@ -478,6 +478,14 @@ const abilityItem = computed(() => { ...@@ -478,6 +478,14 @@ const abilityItem = computed(() => {
<style lang="scss"> <style lang="scss">
.tabs-box { .tabs-box {
.el-tabs__item {
&.is-active {
color: #000;
}
}
.el-tabs__active-bar {
display: none;
}
.tag-box { .tag-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论