kgraph-ui/src/views/knowledge/graphEntity/manager.vue.bak

<template>
  <div style="height: 100%">
    <div
      class="panel"
      style="padding:0;height: 50px;margin-bottom: 5px;line-height: 50px;"
    >
      <a-form
        style="display: inline-block;margin-right: 5px;margin-left: 10px;"
        v-if="$route.path.indexOf('entity_v2') > -1"
      >
        <a-form-item>
          <a-input
            placeholder="请输入实体名称"
            v-model="searchValue"
            style="width: 280px;margin-right: 10px"
          />
          <button class="ant-btn ant-btn-primary mr-5" @click="handleSearch">
            查询实体名称
          </button>
          <button class="ant-btn ant-btn-primary" @click="clearSearch">
            清空查询
          </button>
        </a-form-item>
      </a-form>
      <a-row style="display: inline-block">
        <a-button
          style="margin-right: 5px;margin-left: 10px;"
          type="primary"
          @click="entClsImport"
          v-if="editable && OWL_IMPORT"
        >
          <a-icon type="upload" />实体类导入
        </a-button>
        <!-- <a-button style="margin-right: 5px" type="primary" @click="entClsExportModal" v-if="editable && OWL_EXPORT">
          <a-icon type="export" />实体类导出
        </a-button> -->
        <a-button
          style="margin-right: 5px"
          type="primary"
          v-if="editable && ENTCLS_GRAPH_VIEW"
          @click="entClsChart"
        >
          <a-icon type="dot-chart" />
          实体类可视化
        </a-button>
        <a-button
          style="margin-right: 5px"
          type="primary"
          @click="entImportModal"
          v-if="!editable && BF_ENT_IMPORT"
        >
          <a-icon type="upload" />集成访问服务导入
        </a-button>
        <a-button
          type="primary"
          @click="entExportModal"
          v-if="!editable && BF_ENT_EXPORT"
        >
          <a-icon type="export" />集成访问服务导出
        </a-button>
      </a-row>
    </div>
    <div
      class="flex-row"
      :style="{
        height:
          $route.path.indexOf('entity_v2') > -1 ? 'calc(100% - 60px)' : '100%',
      }"
    >
      <div id="leftPanel" class="flex-col" style="overflow-y: hidden">
        <div class="flex1 flex-col panel">
          <b class="panel-header">
            <a-icon type="deployment-unit" />&nbsp;实体类
          </b>
          <a-spin
            tip="Loading..."
            :spinning="spinning"
            class="select-input flex1"
          >
            <ent-cls-list
              :searchResult="searchResult"
              :searchValue="searchValue"
              @emitId="getEntClsId"
              :activeId="$route.params.classId"
              v-if="
                $route.path.indexOf('entity') > -1 && searchResult.length > 0
              "
            ></ent-cls-list>
          </a-spin>
          <z-tree
            class="select-input flex1"
            :editable="editable"
            style="margin-top:10px;"
            v-if="searchResult.length == 0 && spinning == false"
            @nodeSelected="entityClassNodeSelected"
            @getAllRootList="entClsRootList"
          ></z-tree>
          <!--<keep-alive include="ent-cls-ztree">-->
          <!--<router-view class="select-input flex1" name="treeList" :editable="editable"-->
          <!--@nodeSelected="entityClassNodeSelected" @getAllRootList="entClsRootList"-->
          <!--:key="treeKey1"/>-->
          <!--</keep-alive>-->
        </div>
        <router-view
          v-if="$route.path.indexOf('entity_v2') === -1"
          class="flex1 panel"
          name="entityList"
          :key="treeKey"
        />
      </div>
      <router-view
        id="rightPanel"
        name="main"
        class="flex1 panel flex-col"
        :key="key"
        :seaValue="searchValue"
        :activeId="$route.params.classId"
      />
    </div>
  </div>
</template>

<script>
import ClassTree from "@/views/knowledge/graphClass/entityClassTree";
import zTree from "@/views/knowledge/graphClass/entityClassZtree";
import entClsList from "@/views/knowledge/graphClass/entClsList";

import { searchEntClsByEntName } from "@/api/graph/entity"
import { getEntityClass } from "@/api/graph/entityClass"

const isTemplateVersion = true;
export default {
  name: "manager",
  components: {
    ClassTree,
    zTree,
    entClsList,
  },
  data() {
    return {
      // 功能权限控制
      OWL_IMPORT: true,
      OWL_EXPORT: true,
      ENTCLS_GRAPH_VIEW: true,
      BF_ENT_IMPORT: true,
      BF_ENT_EXPORT: true,

      baseUrl: window.global.baseUrl(),
      searchValue: "", // 搜索的实体名称字符串
      searchResult: [],
      spinning: false,
      rootEntClsList: [], // 根节点实体类列表
      editable: true, // 判断左侧树是否显示操作按钮
    };
  },
  events: {
    /**
     * 新建实体类成功,打开新建的实体类
     * @param classId 实体类id
     */
    ["entityClass:nodeCreated"](classId) {
      this.entityClassNodeSelected({
        entClsID: classId,
      });
      // this.$router.push({name: 'ECM_item', params: {classId}})
    },
    /**
     * 删除实体类成功,关闭打开的实体类
     * @param classId 实体类id
     */
    ["entityClass:nodeDestroyed"](classId) {
      if (this.$route.params.classId === classId) {
        this.$router.push({ name: "ECM_home" });
      }
    },
    /**
     * 新建实体成功,打开新建的实体
     * @param entityId 实体类id
     */
    ["entity:nodeCreated"](entityId) {
      this.$router.push({ name: "e_base", params: { entityId } });
    },
    /**
     * 删除实体成功,关闭打开的实体
     * @param entityId 实体类id
     */
    ["entity:nodeDestroyed"](entityId) {
      if (this.$route.params.entityId === entityId) {
        this.$router.push({ name: "class_entity" });
      }
    },
    /**
     * 新建实体成功,打开新建的实体类
     * @param relationId 关系类id
     */
    ["relationClass:nodeCreated"](relationId) {
      this.$router.push({ name: "relation_edit", params: { relationId } });
    },
    /**
     * 删除关系类成功,关闭打开的关系类
     * @param relationId 关系类id
     */
    ["relationClass:nodeDestroyed"](relationId) {
      if (this.$route.params.relationId === relationId) {
        this.$router.push({ name: "relation" });
      }
    },
    /**
     * 清空搜索，让左侧树恢复
     */
    ["entityClass:clearSearch"]() {
      this.searchValue = "";
      this.searchResult = [];
      this.spinning = false
    },
  },
  mounted() {
    // 获取用户功能权限
    // if (this.$const.authorityControl) {
    //   this.OWL_IMPORT = !!this.authMap["OWL_IMPORT"];
    //   this.OWL_EXPORT = !!this.authMap["OWL_EXPORT"];
    //   this.ENTCLS_GRAPH_VIEW = !!this.authMap["ENTCLS_GRAPH_VIEW"];
    //   this.BF_ENT_IMPORT = !!this.authMap["BF_ENT_IMPORT"];
    //   this.BF_ENT_EXPORT = !!this.authMap["BF_ENT_EXPORT"];
    // }
    const searchValue = this.$route.query.searchValue;
    if (typeof searchValue !== "undefined") {
      this.searchValue = searchValue
      this.handleSearch()
    }
  },
  methods: {
    getEntClsId(id) {
      const vm = this;
      if (vm.$route.path.indexOf("entity_v2") > -1) {
        vm.$router.push({
          name: "class_entity_v2",
          params: { classId: id },
          query: {
            searchValue: vm.searchValue,
          },
        });
      } else {
        vm.$router.push({
          name: "class_entity",
          params: { classId: id, entClsName: vm.searchValue },
        });
      }
    },
    // 清空搜索
    clearSearch() {
      this.searchValue = "";
      this.searchResult = [];
      this.$router.push({ path: "/mng/class/unknow/entity_v2" });
    },
    // 搜索
    handleSearch() {
      if (this.searchValue === "") {
        this.$message.error("请输入要搜索的实体名称");
        return;
      }
      this.spinning = true;
      // this.$router.push({path: '/mng/class/unknow/entity_v2'})
      searchEntClsByEntName(this.searchValue).then((res) => {
        let item = { entClsID: "uknow", entClsName: "全部" };
        res.unshift(item);
        this.searchResult = res;
        this.spinning = false;
      });
    },
    // 要导出的根节点实体类列表
    entClsRootList(list) {
      this.rootEntClsList = list;
    },
    entityClassNodeSelected(node) {
      if (this.$route.path.indexOf("entity") === -1) {
        // 实体类大标题下跳转
        getEntityClass(node.entClsID).then((data) => {
          if (
            data.entClsAllowAttrType &&
            data.entClsAllowAttrType.includes("ELEM")
          ) {
            this.$router.push({
              name: "base",
              params: { classId: node.entClsID },
            }); // 有基础属性跳到基础属性
          } else {
            this.$router.push({
              name: "relation",
              params: { classId: node.entClsID },
            }); // 否则调到关系属性
          }
        });
      } else {
        // 实体大标题下跳转
        if (this.$route.path.indexOf("entity_v2") > -1) {
          if (isTemplateVersion) {
            // 如果是带实体模板的版本
            this.$router.push({
              name: "class_entity_v2",
              params: { classId: node.entClsID },
              query: { clsName: node.name },
            });
          } else {
            this.$router.push({
              name: "class_entity_v2",
              params: { classId: node.entClsID },
            });
          }
        } else {
          this.$router.push({
            name: "class_entity",
            params: { classId: node.entClsID },
          });
        }
      }
    },
    /**
     * 导入模态框
     */
    entClsImport() {
      this.$open("entClsImportModal", {}, function() {
        // 刷新左侧树
        this.$router.push("/mng/class");
      });
    },
    entClsChart() {
      this.$router.push("/sta/entity_class_view");
    },
    /**
     * 导出模态框
     */
    entClsExportModal() {
      this.$open(
        "entClsExportModal",
        {
          rootEntClsList: this.rootEntClsList, // 根节点实体类列表
        },
        function() {}
      );
    },
    // 实体导入
    entImportModal() {
      this.$open("uploadZipServiceModal", {});
    },
    // 实体导出
    entExportModal() {
      this.$open("entClsServiceExportModal", {});
    },
  },

  beforeCreate() {
    if (this.$route.name === "manager") {
      this.$router.push("/mng/class");
    }
  },
  beforeRouteUpdate(to, from, next) {
    const path = to.path;
    if (path.indexOf("entity") > -1) {
      this.editable = false;
    } else {
      this.editable = true;
      this.searchResult.length = 0;
      this.searchValue = "";
      this.spinning = false;
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      const path = vm.$route.path;
      if (path.indexOf("entity") > -1) {
        vm.editable = false;
      } else {
        vm.editable = true;
      }
    });
  },
  computed: {
    treeKey1() {
      var key =
        this.$route.path + this.$route.params ? this.$route.params.classId : "";
      return key;
    },
    treeKey() {
      var key =
        this.$route.path + this.$route.params ? this.$route.params.classId : "";
      return key;
    },
    key() {
      var key =
        this.$route.path + this.$route.params
          ? this.$route.params.classId + this.$route.params.entityId
          : "";
      return key;
    },
  },
};
</script>

<style scoped>
.rela-box {
  display: block;
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leftPanel {
  height: 100%;
  min-width: 300px;
  overflow: auto;
}
</style>