chengfei-test-system/src/views/modules/project-config/project-config.vue

<script setup lang="ts">
import HJFlow from "@/components/hjflow/src/hjflow/index.vue";
import {
  HJFlowInstance,
  HJMethodName,
  HJNodeData,
} from "@/components/hjflow/src/types/comTypes";
import { Edge } from "@vue-flow/core";

import ProjectMessage from "./com/project-message.vue";
import FunctionModule from "./com/function-col.vue";
import TitleHeader from "@/views/modules/project-config/com/titleHeader.vue";
import { AutoTestNodeData, InforPropertyModel } from "./configs/properites";
import type { FormInstance } from "element-plus";

const flowRef = ref<HJFlowInstance>();
const nodes = ref<HJNodeData[]>([]);
const edges = ref<Edge[]>([]);
// vue 的相关操作
const onNodeOperation = (name: HJMethodName, node: HJNodeData): void => {
  if (name === HJMethodName.EditNode) {
    selectedNode.value = null;
    selectedNode.value = JSON.parse(JSON.stringify(node));
    infoVisible.value = true;
  } else if (name === HJMethodName.SaveTemplate) {
    console.log("保存模版数据");
  }
};

// 右侧信息
// ======= 信息展示 =======
const infoVisible = ref(false);
const selectedNode = ref<AutoTestNodeData | null>(null); //双击的节点数据
const onSaveConfigs = () => {
  console.log("onSaveConfigs", selectedNode.value);
  flowRef.value &&
    flowRef.value.updateNodeData(
      JSON.parse(JSON.stringify(selectedNode.value))
    );
  infoVisible.value = false;
  selectedNode.value = null;
};

onMounted(() => {
  // 接口调用完成要初始化 ，为的是保存一个最初的数据
  flowRef.value && flowRef.value.initFlow([], []);
});
</script>

<template>
  <div class="project-config-container">
    <ProjectMessage />
    <FunctionModule />
    <HJFlow
      class="hjflow-box"
      ref="flowRef"
      v-model:nodes-data="nodes"
      v-model:edges-data="edges"
      :show-panel="true"
      :panel-btns="['toSnake', 'layoutTB', 'saveTemplate']"
      @hjMethod="onNodeOperation"
    />
    <div class="right-message-box">
      <TitleHeader>属性配置</TitleHeader>
      <div class="form-box" v-if="infoVisible">
        <el-form rer="formRef" label-position="top">
          <el-form-item label="节点名称">
            <el-input
              v-model="selectedNode!.data.information.nodeName"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-for="property in selectedNode?.data?.information?.properties"
            :label="property.proName"
            :key="property.proName"
          >
            <el-input v-model="property.bindValue"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom-box">
        <div class="save-btn" @click="onSaveConfigs">
          <svg-icon icon-class="save" />
          保存节点信息
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.project-config-container {
  display: flex;
  width: 100%;
  height: calc(100vh - $main-header-height);
}
.hjflow-box {
  //width: 100%;
  flex: 1;
  height: 100%;
}

.right-message-box {
  width: 296px;
  flex-shrink: 0;
  background-color: rgba(80, 80, 80, 1);
  height: calc(100vh - $main-header-height);
  position: relative;

  .form-box {
    width: 100%;
    padding: 24px;
  }

  .bottom-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    //height: 80px;
    padding: 10px 0;
    background-color: $hj-black-2;

    .save-btn {
      width: 130px;
      height: 36px;
      line-height: 36px;
      margin: 0 auto;
      background: var(--fc-color-7);
      color: var(--hj-white-1);
      text-align: center;
      border-radius: 4px 4px 4px 4px;
      cursor: pointer;
    }
  }
}

:deep(.el-form-item--label-top .el-form-item__label) {
  height: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: left;
}
</style>