选择测试项目，配置属性相关。

src/api/project/index.ts

@@ -66,3 +66,29 @@ export function getTestProjectList(data: object): AxiosPromise {
     data: data,
   });
 }
+
+// 获取 工程配置页面  所有功能模块的接口
+export function getProjectConfigMokuaiPage(): AxiosPromise {
+  return request({
+    url: "/api/v1/test/model/selectDetailList",
+    method: "post",
+    data: {},
+  });
+}
+
+// 更新测试模块  后台的将流程信息保存到了 测试项目下
+export function updateTestModule(data: object): AxiosPromise {
+  return request({
+    url: "/api/v1/test/engrProject/update",
+    method: "post",
+    data: data,
+  });
+}
+
+// 获取测试工程项目信息
+export function getTestProjectInfo(id: string): AxiosPromise {
+  return request({
+    url: `/api/v1/test/engrProject/get/${id}`,
+    method: "get",
+  });
+}

src/store/modules/common.ts

@@ -16,6 +16,7 @@ export const useCommonStore = defineStore("commonStore", {
     pageSize: 9, // 首页每页显示的条数
 
     currentProjectId: "", //在首页点击某一项的配置工程的时候使用
+    currentTestItemId: "", //选择的测试项目
   }),
   persist: true,
 });

src/views/main/components/menu.vue

@@ -46,7 +46,7 @@ const router = useRouter();
 const handleMenuClick = (menu: MenuItem) => {
   if (menu.route != currentMenu.value.route) {
     // 如果工程配置没有值，就不跳转，并提示   && !currentProjectId.value
-    if (menu.route === "/main/project-config") {
+    if (menu.route === "/main/project-config" && !currentProjectId.value) {
       ElMessage.warning("请先在首页选择工程");
       return;
     }

src/views/modules/home/home.vue

@@ -154,7 +154,7 @@ import {
 } from "@/api/project";
 
 import { useCommonStoreHook } from "@/store";
-const { currentProjectId, currentMenu, pageSize } =
+const { currentProjectId, currentMenu, pageSize, currentTestItemId } =
   toRefs(useCommonStoreHook());
 
 const checkAll = ref(false);
@@ -281,6 +281,7 @@ const deleteConfirm = async (item) => {
 const router = useRouter();
 const gotoConfigProject = (project) => {
   currentProjectId.value = project.id;
+  currentTestItemId.value = ""; // 要清空数据，不然进入配置页面会导致数据错误
 
   currentMenu.value = {
     name: "工程配置",

src/views/modules/person-manager/person-manager.vue

@@ -1,6 +1,47 @@
+<template>
+  <el-mention
+    v-model="value1"
+    whole
+    :options="options1"
+    style="width: 320px"
+    placeholder="Please input"
+  />
+  <el-divider />
+  <el-mention
+    v-model="value2"
+    :options="options2"
+    :prefix="['@', '#']"
+    whole
+    :check-is-whole="checkIsWhole"
+    style="width: 320px"
+    placeholder="input @ to mention people, # to mention tag"
+    @search="handleSearch"
+  />
+  <p style="color: red">{{ value1 }}||</p>
+</template>
+
 <script setup lang="ts">
-</script>
+import { ref } from "vue";
+import type { MentionOption } from "element-plus";
 
-<template><div>person-manager</div></template>
+const MOCK_DATA: Record<string, string[]> = {
+  "@": ["Fuphoenixes", "kooriookami", "Jeremy", "btea"],
+  "#": ["1.0", "2.0", "3.0"],
+};
+const value1 = ref("");
+const value2 = ref("");
+const options1 = ref<MentionOption[]>(
+  MOCK_DATA["@"].map((value) => ({ value }))
+);
+const options2 = ref<MentionOption[]>([]);
 
-<style scoped lang="scss"></style>
+const handleSearch = (_: string, prefix: string) => {
+  options2.value = (MOCK_DATA[prefix] || []).map((value) => ({
+    value,
+  }));
+};
+
+const checkIsWhole = (pattern: string, prefix: string) => {
+  return (MOCK_DATA[prefix] || []).includes(pattern);
+};
+</script>

src/views/modules/project-config/com/function-col.vue

@@ -2,6 +2,7 @@
 // import useDragAndDrop from "../configs/useDnD";
 
 // import useDragAndDrop from "jxq-ui";
+import { FunctionTypeModel } from "../configs/properites";
 
 import useDragAndDrop from "@/components/hjflow/src/hooks/useDnD";
 
@@ -9,6 +10,7 @@ const { onDragStart } = useDragAndDrop();
 
 import TitleHeader from "./titleHeader.vue";
 import { propertyData } from "../configs/properites";
+import { getProjectConfigMokuaiPage } from "@/api/project";
 
 const activeNames = ref(["1"]);
 const handleChange = (val: any) => {
@@ -18,6 +20,17 @@ const handleChange = (val: any) => {
 const test = (data) => {
   console.log("test", data?.data?.information?.properties);
 };
+
+const allMokuaiDataList = ref<FunctionTypeModel[]>([]);
+const getList = () => {
+  getProjectConfigMokuaiPage().then((res) => {
+    allMokuaiDataList.value = res.data;
+  });
+};
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <template>
@@ -26,21 +39,23 @@ const test = (data) => {
     <el-scrollbar class="collapse-container">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item
-          :name="funType.name"
-          v-for="(funType, index) in propertyData"
+          :name="funType.id"
+          v-for="(funType, index) in allMokuaiDataList"
           :key="funType.id"
-          :title="funType.name"
+          :title="funType?.moduleName"
         >
-          <el-scrollbar class="drag-container">
-            <div
-              class="drag-item"
-              v-for="(dragData, index) in funType.functions"
-              :key="index"
-              :draggable="true"
-              @dragstart="onDragStart($event, dragData)"
-              @click="test(dragData)"
-            >
-              {{ dragData?.data?.information?.functionName ?? "-" }}
+          <el-scrollbar :height="500">
+            <div class="drag-container">
+              <div
+                class="drag-item"
+                v-for="(dragData, index) in funType.functions"
+                :key="index"
+                :draggable="true"
+                @dragstart="onDragStart($event, dragData)"
+                @click="test(dragData)"
+              >
+                {{ dragData?.data?.information?.functionName ?? "-" }}
+              </div>
             </div>
           </el-scrollbar>
         </el-collapse-item>
@@ -65,7 +80,6 @@ const test = (data) => {
   flex-direction: column;
   justify-content: start;
   align-items: center;
-  max-height: 500px;
   width: 100%;
   overflow-y: auto;
   background-color: $hj-black-2;

src/views/modules/project-config/com/project-message.vue

@@ -4,7 +4,7 @@ import TitleHeader from "@/views/modules/project-config/com/titleHeader.vue";
 
 import { useCommonStoreHook } from "@/store";
 import { getProjectById, getTestProjectList } from "@/api/project/index";
-const { currentProjectId } = toRefs(useCommonStoreHook());
+const { currentProjectId, currentTestItemId } = toRefs(useCommonStoreHook());
 
 const emits = defineEmits(["onClickItem"]);
 
@@ -26,7 +26,7 @@ onMounted(() => {
 });
 
 const testProjectList = ref([]);
-const currentSelectedTestProject = ref();
+
 const toGetTestProjectList = () => {
   // 获取完配置工程信息后，获取测试项目列表
   getTestProjectList({
@@ -38,8 +38,10 @@ const toGetTestProjectList = () => {
 // 当点击了项目
 const clickTestProjectItem = (item) => {
   let data = JSON.parse(JSON.stringify(item));
+
+  currentTestItemId.value = item.id;
+
   emits("onClickItem", data);
-  currentSelectedTestProject.value = data;
 };
 </script>
 
@@ -85,9 +87,7 @@ const clickTestProjectItem = (item) => {
         <div
           class="project-list-item"
           :class="[
-            item.id === currentSelectedTestProject?.id
-              ? 'selected-item'
-              : 'normal-item',
+            item.id === currentTestItemId ? 'selected-item' : 'normal-item',
           ]"
           v-for="item in testProjectList"
           :key="item.id"

src/views/modules/project-config/configs/properites.ts

@@ -1,9 +1,10 @@
 import { Node } from "@vue-flow/core";
 
 // 功能块类别
-interface FunctionTypeModel {
+export interface FunctionTypeModel {
   id: string;
-  name: string;
+  moduleName: string;
+  moduleType: string;
   functions: AutoTestNodeData[]; //指的是功能模块 不是函数
 }
 export enum ExcelTypeName {

src/views/modules/project-config/project-config.vue

@@ -12,6 +12,10 @@ 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";
+import { getTestProjectInfo, updateTestModule } from "@/api/project";
+
+import { useCommonStoreHook } from "@/store";
+const { currentTestItemId } = toRefs(useCommonStoreHook());
 
 const flowRef = ref<HJFlowInstance>();
 const nodes = ref<HJNodeData[]>([]);
@@ -23,7 +27,29 @@ const onNodeOperation = (name: HJMethodName, node: HJNodeData): void => {
     selectedNode.value = JSON.parse(JSON.stringify(node));
     infoVisible.value = true;
   } else if (name === HJMethodName.SaveTemplate) {
-    console.log("保存模版数据");
+    //   如果没有选测试项目 给提示
+    if (!currentTestItemId.value) {
+      ElMessage.warning("请选择测试项目");
+      return;
+    }
+
+    if (nodes.value.length === 0) {
+      ElMessage.warning("请编辑功能");
+      return;
+    }
+
+    //   保存模版数据
+    let flowData = {
+      nodes: nodes.value,
+      edges: edges.value,
+    };
+    let p = {
+      id: currentTestItemId.value,
+      routeData: JSON.stringify(flowData),
+    };
+    updateTestModule(p).then(() => {
+      ElMessage.success("保存模版成功");
+    });
   }
 };
 
@@ -44,12 +70,33 @@ const onSaveConfigs = () => {
 onMounted(() => {
   // 接口调用完成要初始化 ，为的是保存一个最初的数据
   flowRef.value && flowRef.value.initFlow([], []);
+
+  //   如果选择的测试项目id有值，就获取数据
+  if (currentTestItemId.value) {
+    getFlowData();
+  }
 });
+
+const getFlowData = () => {
+  getTestProjectInfo(currentTestItemId.value).then((result) => {
+    console.log("getFlowData", result);
+    if (result.data.routeData) {
+      let data = JSON.parse(result.data.routeData);
+      nodes.value = data.nodes;
+      edges.value = data.edges;
+    }
+  });
+};
+
+//选择测试项目相关  每次点击需要重新获取中间的流程的数据
+const onSelectTestPro = (pro) => {
+  getFlowData();
+};
 </script>
 
 <template>
   <div class="project-config-container">
-    <ProjectMessage />
+    <ProjectMessage @onClickItem="onSelectTestPro" />
     <FunctionModule />
     <HJFlow
       class="hjflow-box"
@@ -64,7 +111,7 @@ onMounted(() => {
       <TitleHeader>属性配置</TitleHeader>
       <div class="form-box" v-if="infoVisible">
         <el-form rer="formRef" label-position="top">
-          <el-form-item label="节点名称">
+          <el-form-item label="唯一名称">
             <el-input
               v-model="selectedNode!.data.information.nodeName"
             ></el-input>