fu-hsi-web/src/views/caseDetails/components/TripletInfo.vue

<!--
 * @description: 三元组信息
 * @fileName: TripletInfo
 * @author: 17076
 * @date: 2024/7/1-下午5:08
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOptions"
  >
    <template slot="content">
      <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>
      </div>
    </template>
  </cs-dialog>
</template>

<script>
import { queryTripletInfo, saveTripletInfo } from '@/api/caseDetails'
import mixin from '@/views/mixin'
export default {
  name: 'TripletInfo',
  mixins: [mixin],
  data() {
    return {
      dialogOptions: {
        show: false,
        title: {
          title: '选择三元组信息入库'
        },
        width: '1300px',
        top: '50px',
        hiddenFooter: true,
        appendToBody: true
      },
      gridOptions: {
        ...mixin.data().gridOptions,
        loading: false,
        height: 650,
        columns: [
          { type: 'checkbox', width: '80px' },
          { title: '头节点', field: 'startNode' },
          { title: '头节点类型', field: 'startNodeType' },
          { title: '关系', field: 'relation' },
          { title: '尾节点', field: 'endNode' },
          { title: '尾节点类型', field: 'endNodeType' }
        ],
        data: []
      },
      // 上页数据
      lastPageData: {},
      name: '',
      tableData: [],
      selectionRows: []
    }
  },
  methods: {
    // 显示弹窗
    show(data) {
      this.lastPageData = data
      this.gridOptions.data = []
      this.selectionRows = []
      this.name = ''
      this.fetchData()
    },
    // 查询对应笔录提取到的三元组信息
    fetchData() {
      this.gridOptions.loading = true
      const params = {
        caseId: this.$route.params['id'],
        name: this.lastPageData.name,
        recordId: this.lastPageData['id']
      }
      queryTripletInfo(params).then(res => {
        this.gridOptions.loading = false
        this.tableData = JSON.parse(JSON.stringify(res.data))
        this.gridOptions.data = JSON.parse(JSON.stringify(res.data))
        for (const item of this.gridOptions.data) {
          if (item.addNeo4j === '1') {
            this.selectionRows.push(item)
          }
        }
        if (this.selectionRows && this.selectionRows.length > 0) {
          // 已选数据选中
          const _this = this
          _this.$nextTick(() => {
            _this.gridOptions.data.map(column => {
              _this.selectionRows.map(item => {
                if (item.id === column.id) {
                  _this.$refs.xTable.setCheckboxRow(column, true)
                }
              })
            })
          })
        }
        this.dialogOptions.show = true
      }).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) {
        this.$baseMessage.error('模型分析中，请稍后!')
        return
      }
      const loading = this.$baseLoading(1, '保存中...')
      const ids = []
      this.$refs.xTable.getCheckboxRecords().map(item => {
        ids.push(item.id)
      })
      saveTripletInfo({ ids, recordId: this.lastPageData['id'] }).then(res => {
        loading.close()
        const { code, msg } = res
        code === 200 ? this.$baseMessage.success(msg || '保存成功!') : this.$baseMessage.error(msg || '保存失败!')
        this.dialogOptions.show = false
      }).catch(() => { loading.close() })
    }
  }
}
</script>

<style scoped lang="scss">
.main-constent {
  display: flex;
  background: #FFFFFF;
  height: 750px;
  width: 1240px;
  .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>