提交 1bcc028b authored 作者: lihuihui's avatar lihuihui

update

上级 2efcacf0
<!-- 定时触发 -->
<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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ 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(() => {
form.isEdit = true
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([])
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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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 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>
</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 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>
</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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', 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(() => {
form.isEdit = true
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' }
]
const stepTwoOptions = ref()
onMounted(() => {
// 链接列表
getConnectionList({ type: '7' }).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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<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 :disabled="action === 'view'" 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-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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">
<!-- 第一步 -->
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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 @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 { 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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', 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(() => {
form.isEdit = true
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: '2' }).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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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">
<!-- 第一步 -->
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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 @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 { getGroupsList } from '@/api/flow'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ 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(() => {
form.isEdit = true
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([])
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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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 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>
</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 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>
</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 { getAttrList } from '@/api/flow'
import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
const props = defineProps({ node: Object })
const action = inject('action')
const role = inject('role')
const templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive([{ attr_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(() => {
form.isEdit = true
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
})
}
onMounted(() => {
getAttr()
})
// 添加属性
const handleAdd = function () {
form.push({ attr_id: '', attr_value: '' })
}
// 删除属性
const handleRemove = function (index) {
form.splice(index, 1)
}
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<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 :disabled="action === 'view'" 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 style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
<el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
<el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
</el-select>
<span style="margin: 0 10px">=</span>
<el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
<el-icon
v-if="form.length > 1"
style="margin-left: 10px"
size="20"
color="#cf5b78"
@click="handleRemove(index)"
><RemoveFilled
/></el-icon>
<el-icon
v-if="index === form.length - 1"
style="margin-left: 10px"
size="20"
color="#cf5b78"
@click="handleAdd"
><CirclePlusFilled
/></el-icon>
</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 style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
<el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
<el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
</el-select>
<span style="margin: 0 10px">=</span>
<el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
<el-icon
v-if="form.length > 1"
style="margin-left: 10px"
size="20"
color="#cf5b78"
@click="handleRemove(index)"
><RemoveFilled
/></el-icon>
<el-icon
v-if="index === form.length - 1"
style="margin-left: 10px"
size="20"
color="#cf5b78"
@click="handleAdd"
><CirclePlusFilled
/></el-icon>
</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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ date_type: '0', num: '', time_unit: '0', date: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
form.isEdit = true
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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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.date_type" style="display: block">
<el-radio label="0" size="large" style="display: block">
<span>延时 </span>
<el-input
:disabled="form.date_type !== '0'"
v-model="form.num"
placeholder="请输入"
class="input-with-select"
>
<template #append>
<el-select
:disabled="form.date_type !== '0'"
v-model="form.time_unit"
placeholder="请选择"
style="width: 115px"
>
<el-option label="分钟" value="0" />
<el-option label="小时" value="1" />
<el-option label="日" value="2" />
<el-option label="周" value="3" />
</el-select>
</template>
</el-input>
</el-radio>
<el-radio label="1" size="large" style="display: block">
<span>延时至 </span>
<el-date-picker
:disabled="form.date_type !== '1'"
v-model="form.date"
type="datetime"
placeholder="请选择"
/>
</el-radio>
</el-radio-group>
</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.date_type" style="display: block">
<el-radio label="0" size="large" style="display: block">
<span>延时 </span>
<el-input
:disabled="form.date_type !== '0'"
v-model="form.num"
placeholder="请输入"
class="input-with-select"
>
<template #append>
<el-select
:disabled="form.date_type !== '0'"
v-model="form.time_unit"
placeholder="请选择"
style="width: 115px"
>
<el-option label="分钟" value="0" />
<el-option label="小时" value="1" />
<el-option label="日" value="2" />
<el-option label="周" value="3" />
</el-select>
</template>
</el-input>
</el-radio>
<el-radio label="1" size="large" style="display: block">
<span>延时至 </span>
<el-date-picker
:disabled="form.date_type !== '1'"
v-model="form.date"
type="datetime"
placeholder="请选择"
/>
</el-radio>
</el-radio-group>
</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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ content: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
form.isEdit = true
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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
</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-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
</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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', content: '' })
watch(settingVisible, () => {
if (props.node) Object.assign(form, props.node.data)
})
const rules = ref({
score: [{ required: true, message: '请输入' }]
})
// 保存
function handleSubmit() {
formRef.value.validate().then(() => {
form.isEdit = true
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' }]
// 步骤
let stepActive = ref(0)
</script>
<template>
<NodeTemplate :node="node" @setting="settingVisible = true">
<div class="node-item">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
</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-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
</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 { 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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', 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(() => {
form.isEdit = true
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: '9' }).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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon>
</div>
</NodeTemplate>
<el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
<el-form :disabled="action === 'view'" 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-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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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">
<!-- 第一步 -->
<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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择使用营销资料类型">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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 @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 { 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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', 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(() => {
form.isEdit = true
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">
<template v-if="templateType === '2' && role === 'student'">
<Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
</template>
<template v-else>
<Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
</template>
<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 :disabled="action === 'view'" 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 @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>发送{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</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 @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>发送{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</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>
<!-- 定时触发 -->
<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 templateType = inject('templateType')
onMounted(() => {
// 学生固定旅程吧组件置灰
if (templateType === '2' && role === 'student') {
Object.assign(form, props.node.data)
}
})
const { findNode } = useVueFlow()
// 设置
const settingVisible = ref(false)
const formRef = ref()
const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', 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(() => {
form.isEdit = true
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' }
]
const stepTwoOptions = ref()
onMounted(() => {
// 链接列表
getConnectionList({ type: '6' }).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="square" color="#19AAA5" 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-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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">
<!-- 第一步 -->
<el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
<el-radio :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.id" :label="item.type_name"></el-option>
</el-select>
<!-- 第三步 -->
<div class="means-box" v-if="stepActive === 2">
<el-form-item label="请选择营销资料">
<el-radio-group @change="changeMaterialType" v-model="form.material_type">
<el-radio
style="width: 105px"
:label="item.value"
v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="营销资料">
<el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
<el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
</el-select>
</el-form-item>
</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 @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>
......@@ -26,17 +26,17 @@ export default defineConfig(({ mode }) => ({
cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
},
proxy: {
'/api/lab': {
target: 'http://com-resource-api-test.ezijing.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\/lab/, '')
},
// '/api/lab': {
// target: 'http://com-resource-api-test.ezijing.com',
// changeOrigin: true,
// rewrite: path => path.replace(/^\/api\/lab/, '')
// },
'/api': 'https://saas-dml.ezijing.com',
'/api/resource': {
target: 'http://com-resource-admin-test.ezijing.com',
target: 'https://resource-center.ezijing.com/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\/resource/, '')
},
'/api': 'https://saas-dml.ezijing.com'
}
}
},
resolve: {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论