recom-gorse/web/src/components/dialog/NoumenonEdgeModify.vue

<template>
  <!-- 本体间关系信息修改 -->
  <div class="node-box">
    <div class="form-title">关系配置</div>
    <el-form ref="relationForm" label-width="100px" label-position="left">
      <el-form-item label="*关系名称">
        <el-input v-model="modifyCmd.edgeName" disabled></el-input>
      </el-form-item>
      <el-form-item label="关系描述">
        <el-input v-model="modifyCmd.label"></el-input>
      </el-form-item>
      <el-form-item label="是否显示箭头">
        <el-radio v-model="modifyCmd.arrow" :label="true" disabled>是</el-radio>
        <el-radio v-model="modifyCmd.arrow" :label="false" disabled>否</el-radio>
      </el-form-item>
      <el-form-item label="头概念">
        <el-input v-model="modifyCmd.start" disabled></el-input>
      </el-form-item>
      <el-form-item label="尾概念">
        <el-input v-model="modifyCmd.end" disabled></el-input>
      </el-form-item>
    </el-form>
    <div class="form-title">关系属性（选填）</div>
    <el-table :data="fields"
              border
              style="width: 100%">
      <el-table-column prop="field" label="属性名"></el-table-column>
      <el-table-column prop="comment" label="描述"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <!--      <el-table-column prop="len" label="长度"></el-table-column>-->
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="removeAttribute(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-attribute-box" @click="showAddAttributeDialog('source')">添加字段</div>
    <el-button type="primary" @click="submitUpdateEdge" style="float: right;margin-top: 20px">确 定</el-button>
    <el-dialog
        title="新增属性"
        :append-to-body="true"
        :visible.sync="addAttributeDialogVisible"
        width="40%">
      <el-form ref="addAttributeCmd" label-width="80px">
        <el-form-item label="属性名">
          <el-input v-model="addAttributeCmd.field"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addAttributeCmd.comment"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addAttributeCmd.type" style="width: 100%">
            <el-option :label="item" :value="item" v-for="item in type" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="长度">-->
        <!--          <el-input v-model="addAttributeCmd.len"></el-input>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAttributeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddAttribute">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

var vm;
export default {
  data() {
    return {
      modifyCmd: {
        edgeName: '',
        label: '',
        arrow: '',
        start: '',
        end: ''
      },
      fields: [],
      addAttributeDialogVisible: false,
      addAttributeCmd: {
        field: '',
        type: '',
        comment: ''
      },
      selectObj: {
        type: '',
        value: {}
      },
      type: ["INT64", "INT32", "INT16", "INT8", "FLOAT", "DOUBLE", "BOOL", "STRING", "DATE", "TIME", "DATETIME", "FIXED_STRING"],
    }
  },
  created() {
    vm = this;
  },
  mounted() {

  },
  methods: {
    updateValue(edgeName, label, arrow, fields, sourceVid, targetVid) {
      vm.modifyCmd = {
        edgeName: edgeName,
        label: label,
        arrow: arrow,
        start: '',
        end: ''
      };
      vm.fields = fields || [];
      vm.queryNode(sourceVid, "start");
      vm.queryNode(targetVid, "end");
    },
    queryNode(vid, comment) {
      request({
        url: `/nebula_model/findnodebyid/${vm.ontologyId}/${vid}`,
        method: 'get',
        data: {}
      }).then(res => {
        vm.modifyCmd[comment] = res.data.properties.label;
        console.log(vm.modifyCmd)
      });
    },
    removeAttribute(item, index) {
      vm.fields.splice(index, 1);
    },
    showAddAttributeDialog(type) {
      vm.addAttributeCmd = {
        type: '',
        field: '',
        comment: ''
      };
      vm.addAttributeDialogVisible = true;
      vm.attributeType = type;
    },
    submitAddAttribute() {
      vm.fields.push(vm.addAttributeCmd);
      vm.addAttributeDialogVisible = false;
    },
    submitUpdateEdge() { // 更新
      vm.$parent.submitUpdateEdge(vm.modifyCmd);
    },
  }
}

</script>

<style>

.node-box {
  overflow: hidden;
}

.form-title {
  font-size: 16px;
  margin: 15px 0;

}

.add-attribute-box {
  margin-top: 10px;
  color: #409EFF;
  cursor: pointer;
  text-align: right;
}

.info-content > div {
  margin-bottom: 5px;
  line-height: 20px;
}


</style>