update

src/components/flow/CustomNode.vue

@@ -60,6 +60,9 @@ const component = computed(() => {
     ),
     ConditionalBranch5: markRaw(
       defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch5.vue'))
+    ),
+    ConditionalBranch6: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch6.vue'))
     )
   }
   return allComponent[props.node?.data.componentName]

src/components/flow/Sidebar.vue

@@ -49,7 +49,7 @@ const list = ref([
       color: '#CEAA62'
     },
     children: [
-      // { name: '属性判断', type: '条件分支', icon: '20' },
+      { name: '属性判断', type: '条件分支', icon: '20', componentName: 'ConditionalBranch6' },
       { name: '标签判断', type: '条件分支', icon: '21', componentName: 'ConditionalBranch1' },
       { name: '群组判断', type: '条件分支', icon: '22', componentName: 'ConditionalBranch2' },
       { name: '事件判断', type: '条件分支', icon: '23', componentName: 'ConditionalBranch3' },

src/components/flow/components/conditionalBranch/ConditionalBranch6.vue

+<!-- 定时触发 -->
+<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 = 'student'
+// const role = inject('role')
+
+const { findNode } = useVueFlow()
+// 设置
+const settingVisible = ref(false)
+
+const formRef = ref()
+const form = reactive({
+  score: '',
+  type: '',
+  name: '',
+  attr_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 attrOption = ref()
+onMounted(() => {
+  getAttrList().then(res => {
+    attrOption.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="20" 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.attr_id" placeholder="请选择触发事件">
+            <el-option v-for="item in attrOption" :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>

src/modules/connect/views/View.vue

@@ -470,7 +470,6 @@ const abilityItem = computed(() => {
           <div v-for="cItem in item.child" class="tag">{{ cItem?.title }}</div>
         </div>
         <div v-if="!item.child.length" class="tag-null">无数据</div>
-        <!-- <el-tag v-for="cItem in item.child" class="mr-1" size="large" @click="openMsg">{{ cItem.title }}</el-tag> -->
       </el-tab-pane>
     </el-tabs>
   </AppCard>