Endercad
commit
336b00a228
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue