多项功能改进

2025-05-15 18:54:14 +08:00
parent 70e719abbe
commit 09fe532bb6
15 changed files with 230 additions and 99 deletions
--- a/cdTMP/src/views/project/ParentPreview/index.vue
+++ b/cdTMP/src/views/project/ParentPreview/index.vue
@@ -1,17 +1,14 @@
 <script lang="tsx">
-import { computed, defineComponent, ref, Teleport } from "vue"
+import { defineComponent, 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"
+// hooks
+import useHoverText from "./useHoverText"
+import useKeyToMaInfo from "./useKeyToMaInfo"

 export default defineComponent({
    name: "ParentPreview",
@@ -19,76 +16,28 @@ export default defineComponent({
        parentKey: { type: String, default: "" } // 在ma-form已经判断所以必然有值，索引上级key
    },
    setup(props) {
+        // 1.获取路由上的-项目id
        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判断是哪个级别节点
+        // 2.获取传入的key信息，给上级节点
        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
-            }
-        }
+        // 3.hover变化按钮hook
+        const { hoverText, buttonLikeRef, onMouseenter, onMouseleave } = useHoverText()
+        // 4.里面处理不同columns，返回的函数可以对ma-info的DOM进行构建
+        const { maInfoDom, fetchNodeDataAndSetMaInfo } = useKeyToMaInfo()
+        // 5.根据不同长度
        switch (keyLength) {
            case 2:
                // 请求设计需求节点
-                fetchNodeData(dutApi.getDutOne({ project_id, key: props.parentKey }), "dut")
+                fetchNodeDataAndSetMaInfo(dutApi.getDutOne({ project_id, key: props.parentKey }), "dut")
                break
            case 3:
                // 请求测试项节点
-                fetchNodeData(designApi.getDesignDemandOne({ project_id, key: props.parentKey }), "design")
+                fetchNodeDataAndSetMaInfo(designApi.getDesignDemandOne({ project_id, key: props.parentKey }), "design")
                break
            case 4:
                // 请求用例节点
-                fetchNodeData(demandApi.getTestDemandOne({ project_id, key: props.parentKey }), "demand")
+                fetchNodeDataAndSetMaInfo(demandApi.getTestDemandOne({ project_id, key: props.parentKey }), "demand")
                break
            default:
                break
@@ -112,12 +61,13 @@ export default defineComponent({
                            </div>
                        ),
                        content: () => (
+                            // 内容插槽
                            <div
                                style={{
                                    width: "600px"
                                }}
                            >
-                                {maInfoDom}
+                                {maInfoDom.value}
                            </div>
                        )
                    }}
@@ -157,6 +107,9 @@ export default defineComponent({
 .button-like:hover {
    width: 120px;
    border-radius: 22px;
+    transition: all 0.1s;
+    border: 1px solid rgb(64, 128, 255);
+    color: rgb(64, 128, 255);
 }
 .click-content {
    min-width: 500px;
--- a/cdTMP/src/views/project/ParentPreview/useHoverText.ts
+++ b/cdTMP/src/views/project/ParentPreview/useHoverText.ts
@@ -0,0 +1,13 @@
+import { ref } from "vue"
+
+export default function useHoverText() {
+    const hoverText = ref("")
+    const buttonLikeRef = ref<HTMLDivElement | null>(null)
+    const onMouseenter = () => {
+        hoverText.value = "查看上级"
+    }
+    const onMouseleave = () => {
+        hoverText.value = ""
+    }
+    return { hoverText, buttonLikeRef, onMouseenter, onMouseleave }
+}
--- a/cdTMP/src/views/project/ParentPreview/useKeyToMaInfo.tsx
+++ b/cdTMP/src/views/project/ParentPreview/useKeyToMaInfo.tsx
@@ -0,0 +1,52 @@
+import { computed, ref } from "vue"
+import Empty from "@/components/Empty/index.vue"
+import MaInfo from "@/components/ma-info/index.vue"
+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"
+
+export default function useKeyToMaInfo() {
+    // 初始状态为空
+    let maInfoDom = ref(<Empty></Empty>)
+    // 3个列信息
+    // ma-info变量
+    const dutOriginColumns = useDutColumn(undefined)
+    const dutColumns = computed(() => {
+        // 去掉上传字段
+        return dutOriginColumns.value.filter((it) => it.dataIndex !== "upload")
+    })
+    const designColumns = useDesignColumn(undefined)
+    const demandColumns = useDemandColumn(undefined)
+    // 函数：传入switch后的Promise以及是什么类型展示信息
+    const fetchNodeDataAndSetMaInfo = 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.value = <MaInfo columns={dutColumns.value} data={dutInfoJudge.value} tableLayout="auto"></MaInfo>
+                break
+            case "design":
+                maInfoDom.value = <MaInfo columns={designColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                break
+            case "demand":
+                maInfoDom.value = <MaInfo columns={demandColumns.value} data={res.data} tableLayout="auto"></MaInfo>
+                break
+            default:
+                break
+        }
+    }
+    return { maInfoDom, fetchNodeDataAndSetMaInfo }
+}
--- a/cdTMP/src/views/project/design-demand/DemandSubForm/index.tsx
+++ b/cdTMP/src/views/project/design-demand/DemandSubForm/index.tsx
@@ -6,7 +6,6 @@ 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",
@@ -49,7 +48,7 @@ const DemandSubForm = defineComponent({
        // Dom
        return () => (
            // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
+            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel} width='86%'>
                {{
                    title: () => <span>[设计需求]-{title.value}</span>,
                    default: () => (
--- a/cdTMP/src/views/project/design-demand/hooks/useCrudOpMore.ts
+++ b/cdTMP/src/views/project/design-demand/hooks/useCrudOpMore.ts
@@ -103,7 +103,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
        operationColumn: true,
        operationColumnAlign: "center",
        formOption: {
-            width: 1200,
+            width: "86%",
            layout: [
                {
                    formType: "grid",
--- a/cdTMP/src/views/project/round/hooks/useColumn.ts
+++ b/cdTMP/src/views/project/round/hooks/useColumn.ts
@@ -47,6 +47,7 @@ export default function (crudOrFormRef: any) {
            align: "center",
            dataIndex: "type",
            search: true,
+            width: 200,
            formType: "radio",
            addDefaultValue: "SO",
            dict: {
--- a/cdTMP/src/views/project/testDemand/CaseSubForm/index.tsx
+++ b/cdTMP/src/views/project/testDemand/CaseSubForm/index.tsx
@@ -52,7 +52,12 @@ const CaseSubForm = defineComponent({
        // Dom
        return () => (
            // 注意v-model:visible是不能放在对象解构的
-            <a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
+            <a-modal
+                {...modalOptions}
+                v-model:visible={visible.value}
+                on-before-cancel={handleBeforeCancel}
+                width="86%"
+            >
                {{
                    title: () => <span>[设计需求]-{title.value}</span>,
                    default: () => (
--- a/cdTMP/src/views/project/testDemand/hooks/useColumn.tsx
+++ b/cdTMP/src/views/project/testDemand/hooks/useColumn.tsx
@@ -169,31 +169,35 @@ export default function (crudOrFormRef: any, problemFormRef?: any) {
                }
            ],
            formType: "children-form",
-            type: "group", // 注意这里可能改样式"group"/"table"
+            type: "table", // 注意这里可能改样式"group"/"table"
            formList: [
                {
                    title: "操作",
                    dataIndex: "operation",
                    formType: "editor",
-                    height: 180
+                    height: 180,
+                    width: 360
                },
                {
                    title: "预期",
                    placeholder: "请输入预期结果",
-                    dataIndex: "expect"
+                    dataIndex: "expect",
+                    formType: "textarea",
+                    width: 160
                },
                {
                    title: "结果",
                    dataIndex: "result",
                    formType: "editor",
-                    height: 180
+                    height: 400
                },
                {
                    title: "是否通过",
                    dataIndex: "passed",
                    formType: "radio",
                    dict: { name: "passType", props: { label: "title", value: "key" } },
-                    commonRules: [{ required: true, message: "是否通过必填" }]
+                    commonRules: [{ required: true, message: "是否通过必填" }],
+                    width: 128
                }
            ]
        },
--- a/cdTMP/src/views/project/testDemand/hooks/useCrudOpMore.ts
+++ b/cdTMP/src/views/project/testDemand/hooks/useCrudOpMore.ts
@@ -112,7 +112,7 @@ export default function (crudRef: Ref<InstanceType<typeof MaCrud>>) {
        operationColumnWidth: 180,
        operationColumn: true,
        formOption: {
-            width: 1200,
+            width: "86%",
            layout: [
                {
                    formType: "grid",