recom-gorse/web/src/components/menus/GraphSpaceManage.vue

<template>
  <div>
    <div class="menu-title">
      图谱管理
    </div>
    <div class="menu-content">
      <div>
        <el-form :inline="true" :model="qo" class="demo-form-inline">
          <el-form-item label="图谱名称：">
            <el-input v-model="qo.LIKES_name" placeholder="请输入图谱名称"  style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin: 0px 0 20px 0">
        <el-button type="primary" @click="createRow()" icon="el-icon-plus">新建知识图谱</el-button>
      </div>
      <div>
        <el-table  :data="result.records" style="width: 100%">
          <el-table-column type="index" label="行号" width="100"></el-table-column>
          <el-table-column prop="name" label="图谱名称"></el-table-column>
          <el-table-column prop="comment" label="图谱描述"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click.native.prevent="detailRow(scope.row)" type="text" size="small">
                查看图谱
              </el-button>
              <el-button @click.native.prevent="modifyRow(scope.row)" type="text" size="small">
                编辑
              </el-button>
              <el-button @click.native.prevent="removeRow(scope.row)" type="text" size="small">
                删除
              </el-button>
              <el-button @click.native.prevent="importRow(scope.row)" type="text" size="small" v-if="!scope.row.ontologyId">
                导入本体
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       :current-page="qo.pageNo"
                       :page-size="qo.pageSize"
                       layout="total, prev, pager, next"
                       :total="result.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
            :title="dialogName"
            :visible.sync="cmdDialogVisible"
            width="40%">
      <el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
        <el-form-item label="图谱名称" prop="name" v-if="dialogName == '新建'">
          <el-input v-model="cmd.name" placeholder="请输入图谱名称"></el-input>
        </el-form-item>
        <el-form-item label="图谱名称" prop="name" v-if="dialogName == '编辑'">
          <el-input v-model="cmd.name" placeholder="请输入图谱名称" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="图谱描述" prop="comment">
          <el-input v-model="cmd.comment" placeholder="请输入图谱描述" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cmdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitModify">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="导入本体"
            :visible.sync="importDialogVisible"
            width="40%">
      <el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
        <el-form-item label="选择本体：" prop="ontologyId">
        <el-select v-model="cmd.ontologyId" placeholder="请选择本体" style="width: 100%">
          <el-option v-for="item in ontologyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitImport" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import request from '@/utils/request';

    var _this;
    export default {
        name: "company",
        data() {
            return {
                qo: {
                    pageNo: 1,
                    pageSize: 10,
                    LIKES_name: ''},
                result: {
                    records: [],
                    total: 0
                },
                dialogName: '编辑',
                cmdDialogVisible: false,
                cmd: {},
                rules: {
                    name: [
                        {required: true, message: '请输入图谱名称'}
                    ],
                    comment: [
                        {required: true, message: '请输入图谱描述'}
                    ],
                    ontologyId: [
                        {required: true, message: '请选择本体'}
                    ],
                },
                ontologyList:[],
                importDialogVisible:false,
                loading:false
            }
        },
        mounted() {
            _this = this;
            let _pageNo = this.$route.query.pageNo;
            let _name = this.$route.query.name;
            if (_pageNo) {
                _this.qo.pageNo = parseInt(_pageNo);
            }
            if (_name) {
                _this.qo.LIKES_name = _name;
            }
            _this.queryData();
            _this.queryOntology();
        },
        methods: {
            queryData() {
                request({
                    url: '/graph-case/query_pages',
                    method: 'post',
                    data: _this.qo
                }).then(res => {
                    _this.result.records = res.data.records;
                    _this.result.total = res.data.total;
                });
            },
            queryOntology() {
                request({
                    url: `/ontology/query_list`,
                    method: 'post',
                    data: {EQI_sourceType: 1}
                }).then(res => {
                    _this.ontologyList = res.data;
                });
            },
            handleCurrentChange(val) {
                _this.qo.pageNo = val;
                _this.queryData();
            },
            removeRow(item) {
                _this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        url: '/graph-case/remove/' + item.id,
                        method: 'post'
                    }).then(res => {
                        _this.$message.success("删除成功");
                        _this.queryData();
                    });
                }).catch(() => {
                });
            },
            detailRow(item) {
                this.$router.push({
                    path: "/graphSpace_g",
                    query: {pageNo: _this.qo.pageNo, name: _this.qo.LIKES_name, space: item.name,ontologyId:item.ontologyId,comment:item.comment}
                })
            },
            createRow() {
                _this.cmd = {
                    name: '',
                    comment: ''
                };
                _this.dialogName = '新建';
                _this.cmdDialogVisible = true;
            },
            modifyRow(item) {
                _this.cmd = JSON.parse(JSON.stringify(item));
                _this.dialogName = '编辑';
                _this.cmdDialogVisible = true;
            },
            submitModify() {
                this.$refs.cmd.validate((valid) => {
                    if (valid) {
                        if (_this.cmd.id) {
                            request({
                                url: '/graph-case/modify',
                                method: 'post',
                                data: _this.cmd
                            }).then(res => {
                                _this.$message.success("编辑成功");
                                _this.queryData();
                                _this.cmdDialogVisible = false;
                            });
                        } else { // 新建
                            request({
                                url: '/graph-case/create',
                                method: 'post',
                                data: _this.cmd
                            }).then(res => {
                                _this.$message.success("添加成功");
                                 _this.queryData();
                                _this.cmdDialogVisible = false;
                            });
                        }

                    }
                });
            },
            importRow(item){
                _this.cmd = item;
                _this.cmd.ontologyId = "";
                _this.importDialogVisible = true
            },
            submitImport(){
                this.$refs.cmd.validate((valid) => {
                    if (valid) {
                        _this.loading = true;
                        request({
                            url: '/graph-case/modify',
                            method: 'post',
                            data: _this.cmd
                        }).then(res => {
                            request({
                                url: '/nebula_model/initgraphdatabase/' + _this.cmd.ontologyId + '/' + _this.cmd.name,
                                method: 'get',
                                data: {}
                            }).then(res => {
                                _this.$message.success("导入本体成功");
                                _this.loading = false;
                                _this.importDialogVisible = false;
                                _this.queryData();
                            });
                        });

                    }
                })
            }
        }
    }
</script>

<style lang="scss">
  .ca {
    color: rgb(51, 51, 51);
  }
</style>