kgraph-ui/src/views/temporary/class/relationEditor.vue.bak

<!-- 实体类-关系属性 -->
<template>
  <div class="flex-row">
    <div class="flex1" style="padding-right:24px;min-width:340px; ">
      <!--<h2>relationList</h2>-->
      <div class="ant-tabs-nav-wrap">
        <div class="ant-tabs-nav-scroll">
          <div class="ant-tabs-nav ant-tabs-nav-animated">
            <div @click="handleTabChange">
              <div
                role="tab"
                accessKey="1"
                class="ant-tabs-tab"
                :class="{'ant-tabs-tab-active': accesskey === '1'}"
              >
                以此为起点
              </div>
              <div
                role="tab"
                accessKey="2"
                class=" ant-tabs-tab"
                :class="{'ant-tabs-tab-active':accesskey === '2'}"
              >以此为终点
              </div>
            </div>
            <div
              id="move"
              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
              style="display: block; transform: translate3d(0px, 0px, 0px); width: 88px;"
            />
          </div>
        </div>
      </div>
      <a-button class="openAddRelationSty" @click="AddRelationClass">添加 </a-button>
      <a-spin :spinning="spinning">
        <a-list
          item-layout="horizontal"
          :data-source="relationListData"
          class="flex1"
          style="max-height: 515px; min-height: 300px; overflow: auto;"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta style="position: relative; padding-right: 70px;" @click="handleChangeEntityRouter(item.relClsID)">
              <p slot="title" :class="$route.params.relationId===item.relClsID ? 'selected' : '' " style="display: flex;position: relative">
                <a-tooltip v-if="entClsType === 'START' " placement="topLeft">
                  <template slot="title">
                    <span>{{ item.startEntClsName }}->{{ item.relClsName }} ->{{ item.endEntCls&&item.endEntCls.entClsName }}</span>
                  </template>
                  <a class="rela-box">{{ item.startEntClsName }}->{{ item.relClsName }} ->{{ item.endEntCls&&item.endEntCls.entClsName }}</a>
                </a-tooltip>
                <a-tooltip v-else placement="topLeft">
                  <template slot="title">
                    <span>{{ item.endEntCls&&item.endEntCls.entClsName }}->{{ item.relClsName }} ->{{ item.startEntClsName }}</span>
                  </template>
                  <a class="rela-box">{{ item.endEntCls&&item.endEntCls.entClsName }}->{{ item.relClsName }} ->{{ item.startEntClsName }}</a>
                </a-tooltip>
                <span
                  class="eddit-box"
                  @click.stop="handleDelRelationClass(item.relClsID)"
                >
                  <a-icon type="minus-circle" /></span>
                <span class="cancel-box" @click.stop="handleEditRelationClassName(item)">
                  <a-icon type="edit" /></span>
              </p>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-spin>
    </div>
    <router-view :key="key" class="flex2" />
  </div>
</template>

<script>
const api = require('@/api/index')
const relationListData = []
var odiv
export default {
  name: 'RelationEditor',
  props: ['entClsName'],
  data() {
    return {
      relationListData,
      accesskey: '1',
      entClsType: 'START', // 默认是实体类为起点
      spinning: false,
      backGroundColor: ''
    }
  },
  computed: {
    key: function() {
      return this.$route.params ? this.$route.params.relationId : ''
    }
  },
  created() {
    const id = this.$route.params.classId
    this.refreshRelationClassList(id, this.entClsType)
  },
  mounted() {
    odiv = document.getElementById('move')
  },
  methods: {
    /**
       * 删除关系类
       * @param id
       */
    handleDelRelationClass(id) {
      const vm = this
      this.$confirm({
        title: '你确定要删除吗?',
        onOk() {
          api.relationClass.deleteRelationClass(id).then((data) => {
            if (data !== false) {
              vm.$trigger('relationClass:nodeDestroyed', id)
              vm.refreshRelationClassList(vm.$route.params.classId, vm.entClsType)// 刷新关系类列表
              vm.$message.success('删除关系类删除成功')
            }
          })
        },
        onCancel() {
          console.log('取消删除')
        }
      })
    },
    /**
       * 新增关系类
       * @param id
       */
    AddRelationClass() {
      this.$open('createRelationClassModal', {
        pramsId: this.$route.params.classId,
        entClsName: this.entClsName,
        entClsType: this.entClsType,
        backGroundColor: this.backGroundColor

      }, function(data) {
        if (data) {
          this.$message.success('添加关系类成功')
          this.refreshRelationClassList(this.$route.params.classId, data.entClsType) // 刷新关系类列表
        }
      })
      console.log('backGroundColor' + '1111')
    },
    /**
       * 实体路由跳转
       * @param id
       */
    handleChangeEntityRouter(id) {
      this.isActive = id
      this.$router.push({ name: 'relation_edit', params: { relationId: id }})
    },
    /**
       * 刷新关系类列表
       * @param id
       */
    refreshRelationClassList(id, entClsType) {
      this.spinning = true
      api.relationClass.getAllRelationClassList(id, entClsType).then((data) => {
        this.spinning = false
        this.relationListData = data
      })
    },
    /**
       * 修改关系类名称
       */
    handleEditRelationClassName(opt) {
      console.log(opt)
      this.$open('editRelationClassNameModal', {
        params: opt
      }, function(data) {
        if (data) {
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType) // 刷新关系类列表
          this.$message.success('修改关系类名称成功')
        }
      })
    },
    handleTabChange(e) {
      switch (e.target.accessKey) {
        case '1':
          odiv.style.transform = `translate3d(5px, 0px, 0px)`,
          this.accesskey = '1'
          this.entClsType = 'START' // 以此实体类为起点
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType)
          break
        case '2':
          odiv.style.transform = `translate3d(${140}px, 0px, 0px)`
          this.accesskey = '2'
          this.entClsType = 'ENT' // 以此实体类为终点
          this.refreshRelationClassList(this.$route.params.classId, this.entClsType)
          break
      }
    }
  }
}
</script>

<style scoped>
    .eddit-box,
    .cancel-box { position: absolute; top: 0; width: 35px; height: 35px; text-indent: 0; text-align: center; }
    .cancel-box { right: 0; }
    .eddit-box { right: 35px; }
    .rela-box { display: block; width: 235px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>