refactor: use tsx refactor selector component

src/views/components/flowChart/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="container"></div>
+</template>
+
+<script lang='ts'>
+import LogicFlow from "@logicflow/core";
+import "@logicflow/core/dist/style/index.css";
+import { onMounted } from "vue";
+
+const data = {
+  // 节点
+  nodes: [
+    {
+      id: 50,
+      type: "rect",
+      x: 100,
+      y: 150,
+      text: "你好",
+    },
+    {
+      id: 21,
+      type: "circle",
+      x: 300,
+      y: 150,
+    },
+  ],
+  // 边
+  edges: [
+    {
+      type: "polyline",
+      sourceNodeId: 50,
+      targetNodeId: 21,
+    },
+  ],
+};
+export default {
+  setup() {
+    onMounted(() => {
+      const lf = new LogicFlow({
+        container: document.querySelector("#container"),
+        stopScrollGraph: true,
+        stopZoomGraph: true,
+        width: 500,
+        height: 500,
+        grid: {
+          type: "dot",
+          size: 20,
+        },
+      });
+
+      lf.render(data);
+    });
+
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/components/selector/index.vue

@@ -1,22 +1,37 @@
 <template>
-  <el-card class="box-card" style="margin:20px">
-    <template #header>
-      <div class="card-header">
-        <span>基本使用</span>
-      </div>
-    </template>
-    <Selector @selectedVal="selectedVal" />
-    <h4>选中范围：{{ selectRange }}</h4>
-  </el-card>
+  <div>
+    <el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key">
+      <template #header>
+        <div class="card-header">
+          <span>{{item.title}}</span>
+        </div>
+      </template>
+      <Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
+      <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
+    </el-card>
+  </div>
 </template>
 
 <script lang='ts'>
 import { ref } from "vue";
-import Selector from "/@/components/selector/index.vue";
+import Selector from "/@/components/selector";
+
 export default {
   components: { Selector },
   setup() {
     let selectRange = ref(null);
+    let dataLists = ref([
+      {
+        title: "基本使用",
+        echo: [],
+        disabled: false,
+      },
+      {
+        title: "回显模式",
+        echo: [2, 7],
+        disabled: true,
+      },
+    ]);
 
     const selectedVal = ({ left, right, whole }) => {
       selectRange.value = `${left}-${right}`;
@@ -24,11 +39,9 @@ export default {
 
     return {
       selectedVal,
-      selectRange
+      selectRange,
+      dataLists,
     };
-  }
+  },
 };
 </script>
-
-<style scoped>
-</style>