文档片段全面改进，不使用render

cdTMP/src/views/project/testDemand/CaseSubForm/index.tsx

@@ -1,9 +1,11 @@
-import { defineComponent } from "vue"
+import { defineComponent, ref } from "vue"
 import { Message, TreeNodeData } from "@arco-design/web-vue"
 import { useTreeDataStore } from "@/store"
 import caseApi from "@/api/project/case"
 import useOptions from "./useOptions"
 import subFormHooks from "@/views/project/projPublicHooks/subFormHooks"
+import useBeforeCancel from "@/views/project/projPublicHooks/useBeforeCancel"
+import { cloneDeep } from "lodash-es"
 
 const CaseSubForm = defineComponent({
     name: "DemandSubFormForm",
@@ -26,6 +28,8 @@ const CaseSubForm = defineComponent({
                 title.value = nodeData.title!
                 // 注意这里因为case接口原因，这里需要projectId!!!!!!!!!!!!!!!
                 const res = await caseApi.getCaseOne({ projectId: project_id, key }) // **API变化**
+                // 得到数据时候将beforeFormContent搞定
+                beforeFormContent.value = cloneDeep(res.data.testStep)
                 // 更新表单
                 formData.value = res.data // **属性变化**
                 formData.value.round = key.split("-")[0]
@@ -41,10 +45,14 @@ const CaseSubForm = defineComponent({
         // out use
         expose({ open })
 
+        // hook-判断是否更变内容关闭-只用于测试项和测试用例
+        const beforeFormContent = ref<any>(undefined)
+        const { handleBeforeCancel } = useBeforeCancel(formData, beforeFormContent, visible)
+
         // Dom
         return () => (
             // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value}>
+            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
                 {{
                     title: () => <span>[设计需求]-{title.value}</span>,
                     default: () => (