|
|
|
|
@ -11,7 +11,39 @@
|
|
|
|
|
:dialog="dialogOptions"
|
|
|
|
|
>
|
|
|
|
|
<template slot="content">
|
|
|
|
|
<vxe-grid ref="xTable" v-bind="gridOptions" />
|
|
|
|
|
<div class="main-constent">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="search">
|
|
|
|
|
<el-input v-model="name" clearable placeholder="搜索名称" />
|
|
|
|
|
<el-button type="primary" style="margin-left: 16px;" @click="handleSearch">查询</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<vxe-grid
|
|
|
|
|
ref="xTable"
|
|
|
|
|
:checkbox-config="{ labelField: '', highlight: true, trigger: 'row', reserve: true , range: true}"
|
|
|
|
|
row-id="id"
|
|
|
|
|
v-bind="gridOptions"
|
|
|
|
|
@checkbox-change="selectChangeEvent"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="title">{{ `已选择实体（${selectionRows.length * 2}）` }}</div>
|
|
|
|
|
<div class="right_list">
|
|
|
|
|
<div v-for="(item,index) in selectionRows" :key="index" class="right_list_item">
|
|
|
|
|
<span>{{ item.startNodeType }}</span>
|
|
|
|
|
<span>{{ item.endNodeType }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title" style="margin-top: 24px;">{{ `已选择实体（${selectionRows.length}）` }}</div>
|
|
|
|
|
<div class="right_list">
|
|
|
|
|
<span v-for="(item,index) in selectionRows" :key="index" class="right-list-item">
|
|
|
|
|
{{ `${item.startNodeType}- ${item.relation}-${item.endNodeType}` }}
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center;margin-top: 10px">
|
|
|
|
|
<el-button type="primary" plain style="width: 80px" @click="() => { dialogOptions.show = false }">取消</el-button>
|
|
|
|
|
<el-button type="primary" style="width: 80px" @click="handleSubmit">保存</el-button>
|
|
|
|
|
@ -42,18 +74,23 @@ export default {
|
|
|
|
|
loading: false,
|
|
|
|
|
columns: [
|
|
|
|
|
{ type: 'checkbox', width: '80px' },
|
|
|
|
|
{ title: '实体', field: 'startNode' },
|
|
|
|
|
{ title: '属性', field: 'relation' },
|
|
|
|
|
{ title: '属性值', field: 'endNode' }
|
|
|
|
|
{ title: '头节点', field: 'startNode' },
|
|
|
|
|
{ title: '头节点类型', field: 'startNodeType' },
|
|
|
|
|
{ title: '关系', field: 'relation' },
|
|
|
|
|
{ title: '尾节点', field: 'endNode' },
|
|
|
|
|
{ title: '尾节点类型', field: 'endNodeType' }
|
|
|
|
|
],
|
|
|
|
|
data: [{ startNode: '裴金禄', relation: '就读院校', endNode: '中国政法大学' },{ startNode: '裴金禄', relation: '毕业时间', endNode: ''}]
|
|
|
|
|
data: []
|
|
|
|
|
},
|
|
|
|
|
// 上页数据
|
|
|
|
|
lastPageData: {}
|
|
|
|
|
lastPageData: {},
|
|
|
|
|
name: '',
|
|
|
|
|
tableData: [],
|
|
|
|
|
selectionRows: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.tableHeight(330)
|
|
|
|
|
this.tableHeight(650)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 显示弹窗
|
|
|
|
|
@ -61,6 +98,8 @@ export default {
|
|
|
|
|
this.dialogOptions.show = true
|
|
|
|
|
this.lastPageData = data
|
|
|
|
|
this.gridOptions.data = []
|
|
|
|
|
this.selectedRowKeys = []
|
|
|
|
|
this.name = ''
|
|
|
|
|
this.fetchData()
|
|
|
|
|
},
|
|
|
|
|
// 查询对应笔录提取到的三元组信息
|
|
|
|
|
@ -73,11 +112,61 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
queryTripletInfo(params).then(res => {
|
|
|
|
|
this.gridOptions.loading = false
|
|
|
|
|
this.gridOptions.data = res.data
|
|
|
|
|
this.tableData = JSON.parse(JSON.stringify(res.data))
|
|
|
|
|
this.gridOptions.data = JSON.parse(JSON.stringify(res.data))
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.gridOptions.loading = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 复选框事件(保留翻页选中的数据)
|
|
|
|
|
selectChangeEvent({ checked, records, reserves, row }) {
|
|
|
|
|
// 勾选选中时
|
|
|
|
|
if (checked) {
|
|
|
|
|
// 第一次选数据，还未进行翻页时
|
|
|
|
|
if (reserves.length == 0) {
|
|
|
|
|
this.selectedRowKeys = records.map(v => v.id)
|
|
|
|
|
this.selectionRows = records
|
|
|
|
|
} else {
|
|
|
|
|
// id集合，翻页存在已选中的数据时,拼接新选中的数据
|
|
|
|
|
this.selectedRowKeys = [...reserves.map(v => v.id), ...records.map(v => v.id)]
|
|
|
|
|
// 数据集合，翻页存在已选中的数据时,拼接新选中的数据
|
|
|
|
|
this.selectionRows = [...reserves, ...records]
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 取消选中时
|
|
|
|
|
const idIndex = this.selectedRowKeys.indexOf(row.id)
|
|
|
|
|
if (idIndex > -1) {
|
|
|
|
|
// 删除取消选中删除指定元素id
|
|
|
|
|
this.$delete(this.selectedRowKeys, idIndex)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let dataIndex = null
|
|
|
|
|
for (let i = 0; i < this.selectionRows.length; i++) {
|
|
|
|
|
if (this.selectionRows[i].id === row.id) {
|
|
|
|
|
dataIndex = i
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 删除取消选中的元素整个对象
|
|
|
|
|
this.$delete(this.selectionRows, dataIndex)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleSearch() {
|
|
|
|
|
const filterVal = String(this.name).trim().toLowerCase()
|
|
|
|
|
if (filterVal) {
|
|
|
|
|
const searchProps = ['startNode', 'startNodeType', 'relation', 'endNode', 'endNodeType']
|
|
|
|
|
const rest = this.tableData.filter(item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1))
|
|
|
|
|
this.gridOptions.data = rest.map(row => {
|
|
|
|
|
const item = Object.assign({}, row)
|
|
|
|
|
searchProps.forEach(key => {
|
|
|
|
|
item[key] = String(item[key])
|
|
|
|
|
})
|
|
|
|
|
return item
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.gridOptions.data = this.tableData
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 保存入库
|
|
|
|
|
handleSubmit() {
|
|
|
|
|
if (this.gridOptions.loading) {
|
|
|
|
|
@ -101,5 +190,62 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
|
|
.main-constent {
|
|
|
|
|
display: flex;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
height: 750px;
|
|
|
|
|
.left {
|
|
|
|
|
width: 750px;
|
|
|
|
|
border-right: 1px solid #EAEAEA;
|
|
|
|
|
padding-right: 30px;
|
|
|
|
|
.search {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 32px 32px 16px 32px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
padding: 30px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
.title {
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
.right_list {
|
|
|
|
|
width: 90%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
|
|
border: 1px solid #EAEAEA;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
height: 250px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.right_list_item {
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
span {
|
|
|
|
|
background: #F5F5F5;
|
|
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right-list-item {
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
background: #F5F5F5;
|
|
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
