流程图的TS类型整理修复

hookehuyr
Commit 95425863078cad97c3a2fc76cbe1fe85d0de5255 95425863 1 parent 322f79a2
Showing 1 changed file with 54 additions and 31 deletions
doc/App.vue
--- a/doc/App.vue
View file @9542586
+++ b/doc/App.vue
View file @9542586
@@ -7,7 +7,7 @@
       :grid="showGrid"
       :miniMap="showMiniMap"
       :onRef="onRef"
-      :multipleSelect="true"
+      :multipleSelect="showMultipleSelect"
       :loading="state.editorLoading"
       :beforeDelete="handleBeforeDelete"
       :afterDelete="handleAfterDelete"
@@ -179,7 +179,7 @@
       </template>
       <template v-slot:toolbar>
-        <el-tooltip content="测试工具栏插槽">
+        <el-tooltip content="打印流程图数据结构">
           <div class="vue-flow-editor-toolbar-item" @click="logData">
             <i class="el-icon-search" />
           </div>
@@ -209,13 +209,33 @@ import axios from "./axios";
 import $ from "jquery";
 import { Calendar, Search } from "@element-plus/icons-vue";
 import SelectUserView from "./selectUserView.vue";
+import { Function } from 'lodash';
+import { extend } from '@vue/shared';
 const G6 = (window as any).G6.default as any;
-function delay(time) {
+function delay(time: number) {
   return new Promise(resolve => setTimeout(resolve, time));
 }
+interface myObj {
+  source: string;
+  id: string;
+  label: string;
+}
+
+interface myEvent {
+  item: {
+    get(T: string): {
+      source: any,
+      target: any,
+      style: any,
+      labelCfg: any
+      label: any
+    }
+  }
+}
+
 export default {
   components: {
     Calendar,
@@ -224,9 +244,9 @@ export default {
   },
   setup(props, context) {
     const state = reactive({
-      data: AppData,
+      data: AppData, // 渲染的数据，数据格式参考G6文档
       detailModel: null,
-      editorLoading: false,
+      editorLoading: false, // 开始编辑器的loading状态
       selectOptions: [
         { label: "待确认", value: "0" },
         { label: "填写表单", value: "1" },
@@ -344,7 +364,7 @@ export default {
       console.warn(name);
     }
-    const onAuthAllChange = val => { // 全选可见按钮回调
+    const onAuthAllChange = (val: any) => { // 全选可见按钮回调
       if (val) {
         // 全部选中
         state.field_auths.forEach(ele => {
@@ -357,7 +377,7 @@ export default {
         });
       }
     };
-    const onAuthAllEditChange = val => { // 全选可编辑按钮回调
+    const onAuthAllEditChange = (val: any) => { // 全选可编辑按钮回调
       console.warn(val);
     };
@@ -366,10 +386,10 @@ export default {
       state.dialogUserFormVisible = true;
     };
-    const onCloseUserView = (status) => {
+    const onCloseUserView = (status: boolean) => {
       state.dialogUserFormVisible = status;
     }
-    const onConfirmUserView = (data) => {
+    const onConfirmUserView = (data: any) => {
       console.log(data);
     }
     /******************* END *******************/
@@ -377,14 +397,14 @@ export default {
     /********** 流程图功能函数 **********/
-    let editor;
+    let editor: { openModel: () => void; closeModel: () => void; updateModel: (arg0: any) => void; editorState: { graph: { save: () => { nodes: any; edges: any; }; }; }; };
     /**
-     * Handle the event when a node is double-clicked.
+     * 双击节点回调
      *
      * @param {Object} e - The event object
      */
-    function onDblclickNode(e) {
+    function onDblclickNode(e: myEvent) {
       const model = G6.Util.clone(e.item.get("model"));
       model.style = model.style || {};
       model.labelCfg = model.labelCfg || { style: {} };
@@ -394,11 +414,11 @@ export default {
     }
     /**
-     * Handles the double click event on an edge.
+     * 双击连接线回调
      *
      * @param {Event} e - The event object representing the double click event.
      */
-    function onDblClickEdge(e) {
+    function onDblClickEdge(e: myEvent) {
       const { source, target, style, labelCfg, label } = e.item.get("model");
       const model = {
         label,
@@ -419,8 +439,6 @@ export default {
     /**
      * Cancels the operation and closes the editor model.
      *
-     * @param {}
-     * @return {}
      */
     function cancel() {
       editor.closeModel();
@@ -429,8 +447,6 @@ export default {
     /**
      * Saves the changes made in the editor.
      *
-     * @param {type} paramName - description of parameter
-     * @return {type} description of return value
      */
     function save() {
       editor.updateModel(state.detailModel);
@@ -438,13 +454,13 @@ export default {
     }
     /**
-     * Handles the before delete event of the model.
+     * 删除前校验
      *
      * @param {Object} model - The model object.
      * @param {string} type - The type of the model.
      * @return {Promise} A promise that resolves when the event is handled.
      */
-    async function handleBeforeDelete(model, type) {
+    async function handleBeforeDelete(model: myObj, type: string): Promise<any> {
       if (type === "node") {
         if (model.label === "开始") {
           state.editorLoading = true;
@@ -457,12 +473,12 @@ export default {
     }
     /**
-     * Handles the logic after deleting a model.
+     * 删除后动作
      *
      * @param {Object} model - The model being deleted.
      * @param {string} type - The type of the model being deleted.
      */
-    function handleAfterDelete(model, type) {
+    function handleAfterDelete(model: myObj, type: string) {
       if (type === "edge") {
         console.log("delete edge");
       } else {
@@ -471,13 +487,13 @@ export default {
     }
     /**
-     * A function to handle something before adding.
+     * 添加前校验
      *
      * @param {object} model - The model object.
      * @param {string} type - The type of the model.
      * @return {Promise} A promise that resolves to a result or rejects with an error.
      */
-    function handleBeforeAdd(model, type) {
+    function handleBeforeAdd(model: myObj, type: string): Promise<any> {
       if (type === "edge") {
         if (model.source === "end-node") {
           ElNotification.error("结束节点不能输出连线其他节点");
@@ -500,18 +516,24 @@ export default {
       }
     }
-    function handleAfterAdd(model, type) {
+    /**
+     * 添加后动作
+     *
+     * @param {model} model - The model being handled.
+     * @param {type} type - The type of the event.
+     */
+    function handleAfterAdd(model: myObj, type: string) {
       if (type === "edge") {
         console.log(`新增连接线`);
       }
     }
     /**
-     * Logs the data from the editor's graph.
+     * 打印流程图数据结构
      *
-     * @return {undefined} No return value.
+     * @return {void} No return value.
      */
-    function logData() {
+    function logData(): void {
       let { nodes, edges } = editor.editorState.graph.save();
       nodes = nodes.map(
         ({ data, id, label, shape, x, y, text, desc, img }) => ({
@@ -538,8 +560,9 @@ export default {
     return {
       state,
-      showGrid: true,
+      showGrid: true, // 是否开启网格
-      showMiniMap: true,
+      showMiniMap: true, // 是否开启缩略图
+      showMultipleSelect: true, // 编辑器是否可以多选
       onDblclickNode,
       onDblClickEdge,
@@ -560,7 +583,7 @@ export default {
       logData,
-      onRef: e => (editor = e),
+      onRef: (e: any) => (editor = e),
       staticPath
     };
   }