设计需求、测试项、用例的上级hover显示

cdTMP/src/views/project/ParentPreview/index.vue

@@ -0,0 +1,166 @@
+<script lang="tsx">
+import { computed, defineComponent, ref, Teleport } from "vue"
+import { useRoute } from "vue-router"
+import { Popover } from "@arco-design/web-vue"
+import MaInfo from "@/components/ma-info/index.vue"
+// 请求的API
+import dutApi from "@/api/project/dut"
+import designApi from "@/api/project/designDemand"
+import demandApi from "@/api/project/testDemand"
+// columns导入
+import useDutColumn from "@/views/project/round/hooks/useColumn"
+import useDesignColumn from "@/views/project/dut/hooks/useColumns"
+import useDemandColumn from "@/views/project/design-demand/hooks/useColumns"
+import Empty from "@/components/Empty/index.vue"
+
+export default defineComponent({
+    name: "ParentPreview",
+    props: {
+        parentKey: { type: String, default: "" } // 在ma-form已经判断所以必然有值，索引上级key
+    },
+    setup(props) {
+        const route = useRoute()
+        const project_id = route.query.id // 项目id
+        const hoverText = ref("")
+        const buttonLikeRef = ref<HTMLDivElement | null>(null)
+        const onMouseenter = () => {
+            // 进入时候注册事件
+            hoverText.value = "查看上级"
+        }
+        const onMouseleave = () => {
+            hoverText.value = ""
+        }
+        // ma-info变量
+        const dutOriginColumns = useDutColumn(undefined)
+        const dutColumns = computed(() => {
+            // 去掉上传源代码字段
+            const quUploadColumns = dutOriginColumns.value.filter((it) => it.dataIndex !== "upload")
+            // 判断是否为源代码被测件
+            return quUploadColumns
+        })
+        const designColumns = useDesignColumn(undefined)
+        const demandColumns = useDemandColumn(undefined)
+        // 根据parentKey判断是哪个级别节点
+        const keyLength = props.parentKey.split("-").length
+        // 储存ma-info的dom
+        let maInfoDom = <Empty></Empty>
+        // 处理异步请求的函数
+        const fetchNodeData = async (resPromise: Promise<any>, nodeType: string) => {
+            const res = await resPromise
+            switch (nodeType) {
+                case "dut":
+                    const dutInfo = res.data
+                    const dutInfoJudge = computed(() => {
+                        if (dutInfo.type === "SO") {
+                            // 计算注释率：注释行/总行数
+                            dutInfo.comment_percent = (dutInfo.comment_lines / dutInfo.total_lines) * 100 + "%"
+                        } else {
+                            // 如果是非源代码被测件行数均填写：“不适用”
+                            dutInfo.comment_lines = "不适用"
+                            dutInfo.comment_percent = "不适用"
+                            dutInfo.effective_lines = "不适用"
+                            dutInfo.total_lines = "不适用"
+                        }
+                        return dutInfo
+                    })
+                    maInfoDom = (
+                        <MaInfo columns={dutColumns.value} data={dutInfoJudge.value} tableLayout="auto"></MaInfo>
+                    )
+                    break
+                case "design":
+                    maInfoDom = <MaInfo columns={designColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                    break
+                case "demand":
+                    maInfoDom = <MaInfo columns={demandColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                    break
+                default:
+                    break
+            }
+        }
+        switch (keyLength) {
+            case 2:
+                // 请求设计需求节点
+                fetchNodeData(dutApi.getDutOne({ project_id, key: props.parentKey }), "dut")
+                break
+            case 3:
+                // 请求测试项节点
+                fetchNodeData(designApi.getDesignDemandOne({ project_id, key: props.parentKey }), "design")
+                break
+            case 4:
+                // 请求用例节点
+                fetchNodeData(demandApi.getTestDemandOne({ project_id, key: props.parentKey }), "demand")
+                break
+            default:
+                break
+        }
+
+        return () => (
+            <Teleport to="body">
+                <Popover trigger="click" position="left">
+                    {{
+                        default: () => (
+                            <div class="preview-container">
+                                <div
+                                    class="button-like"
+                                    ref={buttonLikeRef}
+                                    onMouseenter={onMouseenter}
+                                    onMouseleave={onMouseleave}
+                                >
+                                    <icon-find-replace />
+                                    {hoverText.value && <span class="ml-2">{hoverText.value}</span>}
+                                </div>
+                            </div>
+                        ),
+                        content: () => (
+                            <div
+                                style={{
+                                    width: "600px"
+                                }}
+                            >
+                                {maInfoDom}
+                            </div>
+                        )
+                    }}
+                </Popover>
+            </Teleport>
+        )
+    }
+})
+</script>
+
+<style scoped lang="less">
+.preview-container {
+    position: fixed;
+    right: 80px;
+    top: 45%;
+    z-index: 10000;
+}
+.button-like {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+    transition: all 0.1s;
+    overflow: hidden;
+    position: relative;
+    span {
+        white-space: nowrap;
+    }
+}
+.button-like:hover {
+    width: 120px;
+    border-radius: 22px;
+}
+.click-content {
+    min-width: 500px;
+    min-height: 300px;
+    background-color: #fff;
+}
+</style>

cdTMP/src/views/project/design-demand/DemandSubForm/index.tsx

@@ -6,6 +6,7 @@ import useOptions from "./useOptions"
 import subFormHooks from "@/views/project/projPublicHooks/subFormHooks"
 import useBeforeCancel from "@/views/project/projPublicHooks/useBeforeCancel"
 import { cloneDeep } from "lodash-es"
+import ParentPreview from "@/views/project/ParentPreview/index.vue"
 
 const DemandSubForm = defineComponent({
     name: "DemandSubFormForm",

cdTMP/src/views/project/design-demand/hooks/useCrudOpMore.ts

@@ -60,7 +60,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
             crudRef.value.crudFormRef.actionTitle = `${route.query.ident} > ${td[round_key].title} > ${td[round_key].children[dut_key].title} > ${td[round_key].children[dut_key].children[design_key].title} > 测试项-`
             return true
         },
-        beforeOpenEdit: function (record) {
+        beforeOpenEdit: function (record: any) {
             // 1.储存打开前form的content数据到ref中，以便后续比较
             beforeFormContent = cloneDeep(record.testContent)
             // 2.处理标识

cdTMP/src/views/project/design-demand/index.vue

@@ -2,7 +2,13 @@
     <div class="ma-content-block lg:flex justify-between p-4">
         <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
             <!-- CRUD组件 -->
-            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef" @beforeCancel="handleBeforeCancel">
+            <ma-crud
+                :options="crudOptions"
+                :columns="crudColumns"
+                ref="crudRef"
+                @beforeCancel="handleBeforeCancel"
+                :parent-key="route.query.key"
+            >
                 <template #ident="{ record }">
                     {{ showType(record) }}
                 </template>
@@ -44,10 +50,13 @@
 <script setup>
 import { ref } from "vue"
 import commonApi from "@/api/common"
+import { useRoute } from "vue-router"
 // hooks
 import useCrudOpMore from "./hooks/useCrudOpMore"
 import useColumn from "./hooks/useColumns"
 import useRalateDemand from "./hooks/useRalateDemand"
+// inits
+const route = useRoute()
 // refs
 const crudRef = ref(null)
 // 根据传参获取key，分别为轮次、设计需求的key

cdTMP/src/views/project/dut/index.vue

@@ -2,7 +2,7 @@
     <div class="ma-content-block lg:flex justify-between p-4">
         <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
             <!-- CRUD组件 -->
-            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef">
+            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef" :parent-key="route.query.key">
                 <template #ident="{ record }">
                     {{ showType(record) }}
                 </template>

cdTMP/src/views/project/testDemand/index.vue

@@ -2,7 +2,13 @@
     <div class="ma-content-block lg:flex justify-between p-4">
         <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
             <!-- CRUD组件 -->
-            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef" @beforeCancel="handleBeforeCancel">
+            <ma-crud
+                :options="crudOptions"
+                :columns="crudColumns"
+                ref="crudRef"
+                @beforeCancel="handleBeforeCancel"
+                :parent-key="route.query.key"
+            >
                 <template #ident="{ record }">
                     {{ showType(record) }}
                 </template>
@@ -17,6 +23,8 @@ import { ref } from "vue"
 import ProblemForm from "@/views/project/case/components/ProblemForm.vue"
 import useCrudOpMore from "./hooks/useCrudOpMore"
 import useColumn from "./hooks/useColumn"
+import { useRoute } from "vue-router"
+const route = useRoute()
 const problemFormRef = ref(null)
 const title = ref("问题单表单")
 const crudRef = ref()