update

.eslintrc-auto-import.json

@@ -115,7 +115,6 @@
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
-    "useArrayFindLast": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,

auto-imports.d.ts

-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-auto-import
+// Generated by 'unplugin-auto-import'
 export {}
 declare global {
   const $$: typeof import('vue/macros')['$$']
@@ -112,7 +109,6 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -280,5 +276,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
 }

src/components/flow/CustomEdge.vue

@@ -38,7 +38,8 @@ export default {
         position: 'absolute',
         transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
       }"
-      @click="removeEdges([id])">
+      @click="removeEdges([id])"
+    >
       <el-icon style="color: var(--main-color)"><CircleClose /></el-icon>
     </div>
   </EdgeLabelRenderer>

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

@@ -4,12 +4,64 @@ import { useVueFlow } from '@vue-flow/core'
 import NodeTemplate from '../NodeTemplate.vue'
 import Icon from '@/components/ConnectionIcon.vue'
 import { getAttrList } from '@/api/flow'
+import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
+import { Plus, CloseBold } from '@element-plus/icons-vue'
 
 const props = defineProps({ node: Object })
 
 const action = inject('action')
-const role = 'student'
-// const role = inject('role')
+const role = inject('role')
+
+// 获取逻辑运算符名称
+function getLogicalName(value) {
+  return value === 'or' ? '或' : '且'
+}
+
+// 获取运算符列表
+function getOperatorList(type) {
+  if (type === '1') return stringOperatorList
+  if (type === '2' || type === '3') return numberOperatorList
+  if (type === '4' || type === '5') return dateOperatorList
+  return stringOperatorList
+}
+
+// 切换逻辑运算符
+function toggleOperate(rule) {
+  rule.current_logic_operate = rule.current_logic_operate === 'or' ? 'and' : 'or'
+}
+
+// 添加条件
+function handleAdd(items) {
+  items.push({ attr_id: '', attr: '', attr_name: '', attr_type: '', operate: '', operate_name: '', value: '' })
+}
+
+// 删除
+function handleRemove(items, index) {
+  items.splice(index, 1)
+}
+
+// 属性改变
+function handleAttrChange(value, item) {
+  const found = userAttrList.value.find(item => item.id === value)
+  item.attr = found?.english_name || ''
+  item.attr_name = found?.name || ''
+  item.attr_type = found?.type || ''
+  // 清空条件数据
+  item.operate = ''
+  item.operate_name = ''
+  item.value = ''
+}
+
+// 条件改变
+function handleOperateChange(value, item) {
+  const found = getOperatorList(item.attr_type).find(item => item.value === value)
+  item.operate_name = found?.label || ''
+  item.value = ''
+  // 区间
+  if (value === 'range') {
+    item.value = { start: undefined, end: undefined }
+  }
+}
 
 const { findNode } = useVueFlow()
 // 设置
@@ -20,7 +72,8 @@ const form = reactive({
   score: '',
   type: '',
   name: '',
-  attr_id: ''
+  attr_id: '',
+  items: [{ attr_id: '', attr: '', attr_name: '', attr_type: '', operate: '', operate_name: '', value: '' }]
 })
 
 watch(settingVisible, () => {
@@ -49,10 +102,10 @@ function handleClosed() {
 }
 
 // 标签列表
-const attrOption = ref()
+const userAttrList = ref([])
 onMounted(() => {
   getAttrList().then(res => {
-    attrOption.value = res.data.items
+    userAttrList.value = res.data.items
   })
 })
 </script>
@@ -75,9 +128,84 @@ onMounted(() => {
           <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>
+          <div class="rule" v-if="form?.items.length">
+            <div class="rule-operator">
+              <span @click="toggleOperate(form)">{{ getLogicalName(form.current_logic_operate) }}</span>
+            </div>
+            <div class="rule-list">
+              <el-row justify="space-between" class="rule-item" v-for="(item, index) in form.items" :key="index">
+                <div>
+                  <el-form-item>
+                    <el-select v-model="item.attr_id" @change="value => handleAttrChange(value, item)">
+                      <el-option
+                        v-for="option in userAttrList"
+                        :key="option.id"
+                        :label="option.name"
+                        :value="option.id"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-select v-model="item.operate" @change="value => handleOperateChange(value, item)">
+                      <el-option
+                        v-for="option in getOperatorList(item.attr_type)"
+                        :key="option.value"
+                        :label="option.alias || option.label"
+                        :value="option.value"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item v-if="!['null', 'not null'].includes(item.operate)">
+                    <!-- 数字区间 -->
+                    <template v-if="['2', '3'].includes(item.attr_type) && item.operate === 'range'">
+                      <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.start" />
+                      <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.end" />
+                    </template>
+                    <!-- 日期区间 -->
+                    <template v-else-if="item.attr_type === '4' && item.operate === 'range'">
+                      <el-date-picker v-model="item.value.start" type="date" value-format="YYYY-MM-DD" />
+                      <el-date-picker v-model="item.value.end" type="date" value-format="YYYY-MM-DD" />
+                    </template>
+                    <!-- 时间区间 -->
+                    <template v-else-if="item.attr_type === '5' && item.operate === 'range'">
+                      <el-date-picker
+                        v-model="item.value.start"
+                        type="datetime"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                        style="width: 180px"
+                      />
+                      <el-date-picker
+                        v-model="item.value.end"
+                        type="datetime"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                        style="width: 180px"
+                      />
+                    </template>
+                    <template
+                      v-else-if="item.attr_type === '4' && (item.operate === 'after' || item.operate === 'before')"
+                    >
+                      <el-date-picker v-model="item.value" type="date" value-format="YYYY-MM-DD" />
+                    </template>
+                    <template
+                      v-else-if="item.attr_type === '5' && (item.operate === 'after' || item.operate === 'before')"
+                    >
+                      <el-date-picker
+                        v-model="item.value"
+                        type="datetime"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                        style="width: 180px"
+                      />
+                    </template>
+                    <template v-else>
+                      <el-input v-model="item.value" />
+                    </template>
+                  </el-form-item>
+                </div>
+                <el-button text :icon="CloseBold" @click="handleRemove(form.items, index)"></el-button>
+              </el-row>
+            </div>
+          </div>
+          <el-button text :icon="Plus" @click="handleAdd(form.items)">添加条件</el-button>
         </el-form-item>
       </template>
       <!-- 老师设置组件 -->
@@ -102,9 +230,84 @@ onMounted(() => {
         </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>
+            <div class="rule" v-if="form?.items.length">
+              <div class="rule-operator">
+                <span @click="toggleOperate(form)">{{ getLogicalName(form.current_logic_operate) }}</span>
+              </div>
+              <div class="rule-list">
+                <el-row justify="space-between" class="rule-item" v-for="(item, index) in form.items" :key="index">
+                  <div>
+                    <el-form-item>
+                      <el-select v-model="item.attr_id" @change="value => handleAttrChange(value, item)">
+                        <el-option
+                          v-for="option in userAttrList"
+                          :key="option.id"
+                          :label="option.name"
+                          :value="option.id"
+                        ></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-select v-model="item.operate" @change="value => handleOperateChange(value, item)">
+                        <el-option
+                          v-for="option in getOperatorList(item.attr_type)"
+                          :key="option.value"
+                          :label="option.alias || option.label"
+                          :value="option.value"
+                        ></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="!['null', 'not null'].includes(item.operate)">
+                      <!-- 数字区间 -->
+                      <template v-if="['2', '3'].includes(item.attr_type) && item.operate === 'range'">
+                        <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.start" />
+                        <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.end" />
+                      </template>
+                      <!-- 日期区间 -->
+                      <template v-else-if="item.attr_type === '4' && item.operate === 'range'">
+                        <el-date-picker v-model="item.value.start" type="date" value-format="YYYY-MM-DD" />
+                        <el-date-picker v-model="item.value.end" type="date" value-format="YYYY-MM-DD" />
+                      </template>
+                      <!-- 时间区间 -->
+                      <template v-else-if="item.attr_type === '5' && item.operate === 'range'">
+                        <el-date-picker
+                          v-model="item.value.start"
+                          type="datetime"
+                          value-format="YYYY-MM-DD HH:mm:ss"
+                          style="width: 180px"
+                        />
+                        <el-date-picker
+                          v-model="item.value.end"
+                          type="datetime"
+                          value-format="YYYY-MM-DD HH:mm:ss"
+                          style="width: 180px"
+                        />
+                      </template>
+                      <template
+                        v-else-if="item.attr_type === '4' && (item.operate === 'after' || item.operate === 'before')"
+                      >
+                        <el-date-picker v-model="item.value" type="date" value-format="YYYY-MM-DD" />
+                      </template>
+                      <template
+                        v-else-if="item.attr_type === '5' && (item.operate === 'after' || item.operate === 'before')"
+                      >
+                        <el-date-picker
+                          v-model="item.value"
+                          type="datetime"
+                          value-format="YYYY-MM-DD HH:mm:ss"
+                          style="width: 180px"
+                        />
+                      </template>
+                      <template v-else>
+                        <el-input v-model="item.value" />
+                      </template>
+                    </el-form-item>
+                  </div>
+                  <el-button text :icon="CloseBold" @click="handleRemove(form.items, index)"></el-button>
+                </el-row>
+              </div>
+            </div>
+            <el-button text :icon="Plus" @click="handleAdd(form.items)">添加条件</el-button>
           </el-form-item>
         </el-card>
         <el-card header="答案解析" shadow="never" style="margin-top: 20px">
@@ -122,6 +325,7 @@ onMounted(() => {
     </template>
   </el-dialog>
 </template>
+<style src="@/assets/styles/rule.scss"></style>
 <style scoped lang="scss">
 .node-item {
   position: relative;