From 2788d3b1376fd6d74471fbe74ae1eeb293763786 Mon Sep 17 00:00:00 2001
From: yzw <2431960323@qq.com>
Date: Wed, 15 Feb 2023 20:16:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=8B=E4=BB=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9A=84=E6=9F=A5=E8=AF=A2=E3=80=81=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=81=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../D3Visualization/GraphEventHandler.js      |   2 +-
 src/store/modules/kg.js                       |  27 ++-
 src/views/Test/test2.vue                      |  81 +++++--
 src/views/manage/event/basic/index.vue        | 225 +++++++++++++++++-
 4 files changed, 303 insertions(+), 32 deletions(-)

diff --git a/src/components/D3Visualization/GraphEventHandler.js b/src/components/D3Visualization/GraphEventHandler.js
index 9cdf7f1..c00b3e2 100644
--- a/src/components/D3Visualization/GraphEventHandler.js
+++ b/src/components/D3Visualization/GraphEventHandler.js
@@ -108,7 +108,7 @@ export class GraphEventHandler {
       this.selectItem(relationship)
       this.onItemSelected({type: 'relationship', item: {id: relationship.id, type: relationship.type, properties: relationship.propertyList}})
       // 存储关系数据到vuex中，其他模块可使用
-      store.commit('kg/SET_KG', {type: 'relation', item: {id: relationship.id, labels: relationship.type, properties: relationship.propertyList}})
+      store.commit('kg/SET_KG', {type: 'relation', item: {id: relationship.id, labels: [relationship.type], properties: relationship.propertyList}})
     } else {
       this.deselectItem()
     }
diff --git a/src/store/modules/kg.js b/src/store/modules/kg.js
index 44e0d76..85b8290 100644
--- a/src/store/modules/kg.js
+++ b/src/store/modules/kg.js
@@ -12,12 +12,37 @@ const state = getDefaultState()
 
 const mutations = {
     RESET_KG: (state) => {
-        state = getDefaultState()
+        state.type = 'node'
+        state.data = {}
+        // state = getDefaultState()
+        // console.log('mutation', state)
     },
     SET_KG: (state, obj) => {
         state.type = obj.type
         state.data = obj.item
     },
+    SET_VALUE: (state, obj) => {
+        for(let i=0; i<state.data.properties.length; i++) {
+            let prop = state.data.properties[i]
+            if (prop.key == obj.key) {
+                prop.value = obj.value
+                break
+            }
+        }
+    },
+    DELETE_VALUE: (state, key) => {
+        let properties = state.data.properties
+        let index = -1
+        for(let i=0; i<properties.length; i++) {
+            if(properties[i].key == key) {
+                index = i
+                break
+            }
+        }
+        if(index != -1) {
+            properties.splice(index, 1)
+        }
+    }
 }
 
 const actions = {
diff --git a/src/views/Test/test2.vue b/src/views/Test/test2.vue
index fa4dda3..c28cf88 100644
--- a/src/views/Test/test2.vue
+++ b/src/views/Test/test2.vue
@@ -1,32 +1,67 @@
 <template>
-  <div>
-     <i :class="{ 'arrowRight': !flag, 'arrowDown': flag}" class="el-icon-arrow-right" style="margin-left:5px" @click="flag = !flag"></i>
-  </div>
+  <el-table
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template v-slot:header >
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="输入关键字搜索"/>
+      </template>
+      <template v-slot:default="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        flag : false
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        search: ''
       }
-    }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    },
   }
-</script>
-
-
-<style scoped>
-.arrowRight{
-  cursor: pointer;
-  transition: 0.2s;
-  transform-origin: center;
-  transform: rotateZ(0deg);
-}
-.arrowDown{
-  cursor: pointer;
-  transition: 0.2s;
-  transform-origin: center;
-  transform: rotateZ(90deg);
-}
-</style>
-
+</script>
\ No newline at end of file
diff --git a/src/views/manage/event/basic/index.vue b/src/views/manage/event/basic/index.vue
index f5c8dce..337d786 100644
--- a/src/views/manage/event/basic/index.vue
+++ b/src/views/manage/event/basic/index.vue
@@ -52,15 +52,79 @@
     <transition name="slide-fade">
       <div class="edit-pane" v-show="editOpen">
         <!-- 展示键值对 -->
-        <div>{{curType}}</div>
+        <div class="edit-pane-title">
+          <span>{{ curType }}: {{ curTypeName }}</span>
+        </div>
+        <div>
+          <span>ID {{ curId }}</span>
+        </div>
+        <el-table
+          :data="
+            curProperties.filter(
+              (data) =>
+                !search ||
+                data.key.toLowerCase().includes(search.toLowerCase()) ||
+                data.value.toLowerCase().includes(search.toLowerCase())
+            )
+          "
+          stripe
+          max-height="400"
+          style="width: 100%"
+        >
+          <el-table-column label="属性名" prop="key" sortable>
+          </el-table-column>
+          <el-table-column label="属性值" prop="value" sortable>
+          </el-table-column>
+          <el-table-column align="right">
+            <template v-slot:header>
+              <el-input v-model="search" size="mini" placeholder="输入关键字" />
+            </template>
+            <template v-slot:default="scope">
+              <el-button
+                size="mini"
+                @click="handleEdit(scope.$index, scope.row)"
+                icon="el-icon-edit"
+              ></el-button>
+              <el-button
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)"
+                icon="el-icon-delete"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button
+          type="danger"
+          size="small"
+          round
+          @click="deleteWhole"
+          class="delete-botton"
+          >删除整个{{ this.curType }}</el-button
+        >
       </div>
     </transition>
+
+    <el-dialog title="编辑" :visible.sync="editValueOpen" width="30%">
+      <el-input
+        type="textarea"
+        :autosize="{ minRows: 2 }"
+        placeholder="请输入内容"
+        v-model="curValue"
+      >
+      </el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editValueOpen = false">取 消</el-button>
+        <el-button type="primary" @click="confirmChange">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script type="text/ecmascript-6">
 import { Visualization } from "@/components/D3Visualization";
 import { setting } from "@/config";
+import { MessageBox, Message } from "element-ui";
 const neo4j = require("neo4j-driver");
 export default {
   components: {
@@ -101,12 +165,39 @@ export default {
       domain: "Event",
       nodeNum: 10,
       editOpen: false,
+      search: "",
+      editValueOpen: false,
+      curKey: "",
+      curValue: "",
     };
   },
   computed: {
     curType() {
-        return this.$store.getters.kg.type
-    }
+      let type = this.$store.getters.kg.type;
+      return type == "node" ? "节点" : "关系";
+    },
+    curTypeName() {
+      let data = this.$store.getters.kg.data;
+      return typeof data.labels == "undefined" ? "" : data.labels.join("、");
+    },
+    curId() {
+      let data = this.$store.getters.kg.data;
+      return typeof data.id == "undefined" ? "" : data.id;
+    },
+    curProperties() {
+      let data = this.$store.getters.kg.data;
+      if (typeof data.properties == "undefined") {
+        return [];
+      }
+      let properties = data.properties;
+      for (let i = 0; i < properties.length; i++) {
+        let prop = properties[i];
+        if (prop.value instanceof Array) {
+          prop.value = prop.value.join("\n");
+        }
+      }
+      return properties;
+    },
   },
   mounted() {
     this.driver = neo4j.driver(
@@ -145,12 +236,123 @@ export default {
           this.driver.close();
         });
     },
+    executeQueryJust(query, msg) {
+      let session = this.driver.session();
+      session
+        .run(query, {})
+        .then((result) => {
+          Message({
+            message: msg,
+            type: "success",
+            duration: 2 * 1000,
+          });
+          session.close();
+        })
+        .catch((error) => {
+          console.log(error);
+          this.driver.close();
+        });
+    },
+    handleEdit(index, row) {
+      this.editValueOpen = true;
+      this.curValue = row.value;
+      this.curKey = row.key;
+    },
+    confirmChange() {
+      this.editValueOpen = false;
+      // 设置vuex新值, 页面数据随之更改
+      this.$store.commit("kg/SET_VALUE", {
+        key: this.curKey,
+        value: this.curValue,
+      });
+      // 执行函数修改neo4j数据库数据
+      // let query_type = '(n)'
+      // if (this.curType == '关系') {
+      //   query_type = '()-[n]->()'
+      // }
+      // let query = `match ${query_type} where id(n)=${this.curId} set n.\`${this.curKey}\` = '${this.curValue}'`;
+      // this.executeQueryJust(query, '字段更新成功');
+    },
+    handleDelete(index, row) {
+      this.$confirm("此操作将永久删除该属性, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 更改前端
+          this.$store.commit("kg/DELETE_VALUE", row.key);
+          // 更改数据库
+          // let query_type = '(n)'
+          // if (this.curType == '关系') {
+          //   query_type = '()-[n]->()'
+          // }
+          // let query = `match ${query_type} where id(n)=${this.curId} set n.\`${row.key}\` = null`;
+          // this.executeQueryJust(query, '字段删除成功')
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+            duration: 2 * 1000,
+          });
+        });
+    },
+    deleteWhole() {
+      if (this.curType == "节点") {
+        this.$confirm(
+          "此操作将永久删除整个节点及相连的关系, 是否继续?",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            // 更改数据库
+            // let query_type = "(n)";
+            // let query = `match ${query_type} where id(n)=${this.curId} detach delete n`;
+            // this.executeQueryJust(query, '节点删除成功')
+            // 更改前端页面
+            this.executeQuery()
+            this.$store.commit('kg/RESET_KG')
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+              duration: 2 * 1000,
+            });
+          });
+      } else {
+        this.$confirm("此操作将永久删除所选关系, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            // 更改数据库
+            // let query_type = "()-[n]->()";
+            // let query = `match ${query_type} where id(n)=${this.curId} delete n`;
+            // this.executeQueryJust(query, "关系删除成功");
+            // 更改前端页面
+            this.executeQuery()
+            this.$store.commit('kg/RESET_KG')
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+              duration: 2 * 1000,
+            });
+          });
+      }
+    },
   },
   watch: {
     records: {
-      handler: function (val, oldVal) {
-
-      },
+      handler: function (val, oldVal) {},
       deep: true,
     },
   },
@@ -188,9 +390,10 @@ export default {
   top: 140px;
   z-index: 1;
 
-  width: 25%;
+  width: 30%;
   max-width: 95%;
   height: 70%;
+  padding: 10px 20px;
   background: rgb(255, 255, 255);
   color: rgb(51, 51, 51);
   font-family: "Open Sans", HelveticaNeue-Light, "Helvetica Neue Light",
@@ -199,6 +402,10 @@ export default {
     rgba(52, 58, 67, 0.08) 0px 1px 2px, rgba(52, 58, 67, 0.08) 0px 1px 4px;
 }
 
+.edit-pane-title {
+  line-height: 32px;
+  font-size: 20px;
+}
 
 .slide-fade-enter-active,
 .slide-fade-leave-active {
@@ -223,6 +430,10 @@ export default {
   transform: rotateZ(180deg);
 }
 
+.delete-botton {
+  margin-top: 20px;
+}
+
 .kgWidget {
   -webkit-user-select: none;
   -moz-user-select: none;