调整新的点击节点逻辑，属性表单校验调整

hookehuyr
Commit fb7d7268cfebaf797bbac0307c496e298a8cb5e2 fb7d7268 1 parent 4f90d867
Showing 3 changed files with 79 additions and 19 deletions
doc/App.vue
src/editor/vue-flow-editor.scss
src/editor/vue-flow-editor.tsx
--- a/doc/App.vue
View file @fb7d726
+++ b/doc/App.vue
View file @fb7d726
@@ -13,7 +13,9 @@
       :afterDelete="handleAfterDelete"
       :beforeAdd="handleBeforeAdd"
       :afterAdd="handleAfterAdd"
+      @click-canvas="onClickCanvas"
       @dragend-node="onDragEndNode"
+      @click-node="onClickNode"
       @dblclick-node="onDblClickNode"
       @dblclick-edge="onDblClickEdge"
       :controlConfig="state.controlConfig"
@@ -69,12 +71,13 @@
       <template v-slot:model>
         <el-form
           v-if="!!state.detailModel"
-          ref="form"
+          ref="formRef"
+          :rules="rules"
           :model="state.detailModel"
           label-position="top"
           label-width="100px"
         >
-          <template v-if="state.detailModel.activity === undefined">
+          <!-- <template v-if="state.detailModel.activity === undefined"> -->
             <el-tabs
               v-model="state.activeName"
               class=""
@@ -86,7 +89,7 @@
                   <div slot="label">
                     节点名称 <span style="color: red;">*</span>
                   </div>
-                  <el-input v-model="state.detailModel.label" />
+                  <el-input v-model="state.node_name" />
                 </el-form-item>
                 <div>
                   <div style="font-size: 14px; margin-bottom: 10px;">
@@ -192,14 +195,14 @@
                 设置人员配置
               </el-button>
             </div> -->
-          </template>
+          <!-- </template> -->
-          <template v-else>
+          <!-- <template v-else> -->
-            <el-form-item label="活动标题">
+            <!-- <el-form-item label="活动标题">
               <el-input v-model="state.detailModel.text" />
             </el-form-item>
             <el-form-item label="活动副标题">
               <el-input v-model="state.detailModel.desc" />
-            </el-form-item>
+            </el-form-item> -->
             <!-- <el-form-item label="活动类型">
               <el-select v-model="state.detailModel.activity">
                 <el-option
@@ -210,7 +213,7 @@
                 />
               </el-select>
             </el-form-item> -->
-          </template>
+          <!-- </template> -->
         </el-form>
       </template>
       <!-- 工具栏 -->
@@ -224,7 +227,7 @@
       </template>
       <!-- 表单底部按钮 -->
       <template v-slot:foot>
-        <el-button type="primary" @click="save">保存</el-button>
+        <el-button type="primary" @click="saveForm">保存</el-button>
         <el-button @click="cancel">取消</el-button>
       </template>
     </vue-flow-editor>
@@ -238,7 +241,7 @@
 </template>
 <script lang="ts">
-import { reactive, onMounted, watch, nextTick } from 'vue'
+import { ref, reactive, onMounted, watch, nextTick } from 'vue'
 import { AppData } from './data.js'
 import { staticPath } from './utils'
 import { ElNotification } from 'element-plus'
@@ -248,6 +251,7 @@ import { Calendar, Search } from '@element-plus/icons-vue'
 import SelectUserView from './selectUserView.vue'
 import { Function } from 'lodash'
 import { extend } from '@vue/shared'
+import type { FormInstance, FormRules } from 'element-plus'
 const G6 = (window as any).G6.default as any
@@ -255,6 +259,10 @@ function delay(time: number) {
   return new Promise((resolve) => setTimeout(resolve, time))
 }
+interface RuleForm {
+  label: string
+}
+
 interface myObj {
   source: string
   id: string
@@ -284,6 +292,16 @@ export default {
     SelectUserView,
   },
   setup(props, context) {
+
+    const formRef = ref<any>(null);
+
+    const rules = reactive<FormRules<RuleForm>>({
+      label: [
+          { required: true, message: '请输入名称', trigger: 'blur' },
+          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
+        ],
+    })
+
     const state = reactive({
       data: AppData, // 渲染的数据，数据格式参考G6文档
       detailModel: null,
@@ -361,9 +379,13 @@ export default {
       dialogUserFormVisible: false,
       activeName: 'node',
       attr_radio: '基础属性',
+      node_name: '', // 节点名称
+      userTags: [ // 节点负责人
+        { id: "user-1-1", name: "用户1-1" }
+      ],
       auth_all_checked: false,
       auth_all_edit: false,
-      field_auths: [
+      field_auths: [ // 字段权限
         {
           name: '字段1',
           visible: {
@@ -398,7 +420,6 @@ export default {
           },
         },
       ],
-      userTags: [{ id: "user-1-1", name: "用户1-1" }]
     })
     onMounted(() => {
@@ -487,10 +508,21 @@ export default {
       model.labelCfg = model.labelCfg || { style: {} }
       model.data = model.data ? model.data : {}
+
+      // 判断是否是流程节点
+      let model_id = model.id
+      if (model_id !== 'start-node' && model_id!== 'end-node') {
         state.detailModel = model
         editor.openModel()
       }
+    }
+
+    /**
+     * 点击节点回调
+     *
+     * @param {Event} e - The event object representing the click event.
+     */
     function onClickNode(e: myEvent) {
       const model = G6.Util.clone(e.item.get('model'))
       model.style = model.style || {}
@@ -498,7 +530,15 @@ export default {
       model.data = model.data ? model.data : {}
       state.detailModel = model
+
+      // 判断是否是流程节点
+      let model_id = model.id
+      if (model_id !== 'start-node' && model_id!== 'end-node') {
+        state.detailModel = model
         editor.openModel()
+      } else {
+        editor.closeModel()
+      }
     }
     /**
@@ -533,12 +573,21 @@ export default {
     }
     /**
-     * Saves the changes made in the editor.
+     * 保存表单信息
      *
      */
-    function save() {
+    async function saveForm() {
-      editor.updateModel(state.detailModel)
+      // if (!formRef.value) return
-      editor.closeModel()
+      // await formRef.value.validate((valid) => {
+      //   if (!valid) {
+      //     return false
+      //   }
+      // })
+      // editor.updateModel(state.detailModel)
+      // editor.closeModel()
+      console.log(state.node_name)
+      console.log(state.userTags)
+      console.log(state.field_auths)
     }
     /**
@@ -639,6 +688,11 @@ export default {
       state.data.edges = editor.editorState.graph.save().edges
     }
+    function onClickCanvas(e: myEvent) {
+      console.log('单击画布');
+      editor.closeModel()
+    }
+
     /**
      * 拖动节点结束回调
      *
@@ -709,17 +763,20 @@ export default {
     return {
       state,
+      rules,
+      formRef,
       showGrid: true, // 是否开启网格
       showMiniMap: false, // 是否开启缩略图
       showMultipleSelect: true, // 编辑器是否可以多选
+      onClickCanvas,
       onClickNode,
       onDblClickNode,
       onDragEndNode,
       onDblClickEdge,
       cancel,
-      save,
+      saveForm,
       handleBeforeDelete,
       handleAfterDelete,
       handleBeforeAdd,
--- a/src/editor/vue-flow-editor.scss
View file @fb7d726
+++ b/src/editor/vue-flow-editor.scss
View file @fb7d726
@@ -192,7 +192,7 @@ $transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .vue-flow-editor-model {
-    position: absolute;
+    // position: absolute;
     top: 0;
     left: 0;
     right: 0;
@@ -202,7 +202,7 @@ $transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
     transition-duration: 500ms;
     &:before {
-      position: absolute;
+      // position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
--- a/src/editor/vue-flow-editor.tsx
View file @fb7d726
+++ b/src/editor/vue-flow-editor.tsx
View file @fb7d726
@@ -56,6 +56,9 @@ export default {
                 editorState.graph = graph
                 commander.init(graph)
+                graph.on('canvas:click', (e) => {
+                    context.emit('click-canvas', e)
+                })
                 graph.on('node:click', (e) => {
                     context.emit('click-node', e)
                 })