2025.2.5 弹窗

kcui/src/view/Graph.vue

@@ -2,6 +2,12 @@
   <div style="width: 100%;height: 100%;">
     <div style="width: 100%;height: 4vw;background-color: #42b983;">
       <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goBook">跳转1</div>
+      <div class="stText">关键字:</div>
+      <input class="stInput" placeholder="请输入关键字" v-model="keywords"/>
+      <div @click="getInfo"
+           style="width: 4vw;height: 2vw;margin-left:0.2vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height: 2vw;text-align: center;border-radius:2vw;margin-top: 0.1vw;">
+        查询
+      </div>
     </div>
     <div style="width: 100%;height: 80%;">
       <div class="gContainer">
@@ -9,35 +15,49 @@
       </div>
     </div>
 
-
-
-
     <!-- 弹窗 -->
-    <div v-if="isModalVisible" style="height: 5vw;width: 100%;"  class="modal-overlay" @click.self="closeModal">
+    <el-dialog
-      <div class="modal-content">
+        :visible.sync="isModalVisible"
-        <h3>请输入分支内容</h3>
+        title="添加分支内容"
-        <label for="fileId">fileId:</label>
+        width="30%"
-        <input type="text" id="fileId" v-model="newBranchFileId" />
+        top="15vh"
-
+        append-to-body
-        <label for="txtName">节点名称:</label>
+        custom-class="custom-dialog"
-        <input type="text" id="txtName" v-model="newBranchContent" />
+    >
-
+      <el-form label-width="80px">
-        <label for="TxtValue">节点内容:</label>
+        <el-form-item label="fileId">
-        <textarea id="TxtValue" v-model="newBranchValue"></textarea>
+          <el-input v-model="newBranchFileId"></el-input>
-
+        </el-form-item>
-        <label for="parentId">父级节点ID:</label>
+        <el-form-item label="类型">
-        <input type="text" id="parentId" v-model="newBranchParentId" />
+          <el-select v-model="typeValue" placeholder="请选择类型">
-
+            <el-option label="图文" value="图文"></el-option>
-        <label for="relation">关系:</label>
+            <el-option label="视频" value="视频"></el-option>
-        <input type="text" id="relation" v-model="newBranchRelation"
+            <el-option label="动画" value="动画"></el-option>
-               @input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点名称">
+          <el-input v-model="newBranchContent"></el-input>
+        </el-form-item>
+        <el-form-item label="节点内容">
+          <el-input type="textarea" v-model="newBranchValue"></el-input>
+        </el-form-item>
+        <el-form-item label="父级节点ID">
+          <el-input v-model="newBranchParentId" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="关系">
+          <el-input v-model="newBranchRelation"
+                    @input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
+        </el-form-item>
+        <el-form-item label="层级">
+          <el-input-number v-model="newBranchLevel" controls-position="right" :min="1"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button type="primary" @click="addNewBranch">提 交</el-button>
+      </span>
+    </el-dialog>
 
-        <label for="level">层级:</label>
-        <input type="number" id="level" v-model="newBranchLevel" />
-
-        <button @click="addNewBranch">提交</button>
-      </div>
-    </div>
   </div>
 
 </template>
@@ -46,7 +66,7 @@ import {getgraphInfo, test} from "@/api/login";
 import VisGraph from '@/assets/js/graphvis.min.20241008.js'
 import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
 import {config} from '@/assets/defaultConfig.js'
-import {addNode} from "@/api/file";
+import {addNode, getFileIdByDocId} from "@/api/file";
 
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
@@ -69,8 +89,9 @@ export default {
       newBranchFileId: '',
       newBranchLevel: null,
       newBranchParentId: '',
-      newBranchRelation:''
+      newBranchRelation:'',
-
+      typeValue: '',
+      keywords: '',
     }
   },
   methods:{
@@ -80,12 +101,34 @@ export default {
     onCreated(editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
-    getInfo(){
+    // getInfo(){
-      var data = {}
+    //   var data = {}
-      getgraphInfo(data).then((res)=>{
+    //   getgraphInfo(data).then((res)=>{
+    //     this.zhengl(res.data);
+    //
+    //   })
+    // },
+    getInfo() {
+
+      this.data = undefined;
+      if (this.keywords != '' && this.keywords != undefined) {
+        this.visGraph.clearAll();
+        let params = {
+          nodename: this.keywords,
+        };
+        getgraphInfo(params).then((res) => {
           this.zhengl(res.data);
+        })
+      } else {
+
+        let params = {};
 
+        getgraphInfo(params).then((res) => {
+          this.zhengl(res.data);
         })
+      }
+
+
     },
     async drawGraphData() {
       this.graphData = this.demoData;
@@ -122,14 +165,27 @@ export default {
       };
       this.visGraph = new VisGraph(document.getElementById('graph-panel'), configWithEvents);
     },
-    showPopup(node) {
+    async showPopup(node) {
       console.log("o----------")
       console.log(node)
       this.selectedNode = node;
       this.newBranchParentId = node.properties.docId;
       this.newBranchLevel = parseInt(node.properties.level)  + 1;
+
+      try {
+        const response = await this.getFileIdByDocId({ docId: node.properties.docId });
+        this.newBranchFileId = response.fileId;
+      } catch (error) {
+        console.error('Failed to fetch file ID:', error);
+        alert('无法获取文件ID，请稍后再试。');
+        return;
+      }
+
       this.isModalVisible = true; // 显示模态框
     },
+    getFileIdByDocId(data) {
+      return getFileIdByDocId(data);
+    },
     closeModal() {
       this.isModalVisible = false;
       this.newBranchContent = '';
@@ -301,7 +357,7 @@ export default {
     }
   },
   mounted() {
-        this.testInfo();
+        this.doLogin();
         this.getInfo();
 
   }