0.0.1版本

cdTMP/src/views/testmanage/projBoard/cpns/TimeLine.vue

@@ -25,20 +25,46 @@
                 </a-timeline-item>
                 <div class="info">
                     <a-alert>测试人员填写的项目开始时间、结束时间、轮次时间均会影响生成文档的时间!</a-alert>
+                    <a-button type="primary" @click="handleModalVisible">展示目前文档生成的日期</a-button>
                 </div>
             </a-timeline>
         </div>
+        <!-- a-modal组件，展示生成文档的全部信息 -->
+        <a-modal v-model:visible="visible" hide-cancel :closable="false" width="auto">
+            <template #title> 生成文档时间一览表 </template>
+            <a-card
+                :style="{ width: '600px' }"
+                :title="item.title"
+                hoverable
+                v-for="(item, index) in timeList"
+                :key="item.title"
+            >
+                <p v-for="(value, key, idx) in item" class="flex">
+                    <template v-if="key !== 'title'">
+                        <span class="font-bold w-[300px]">{{ key }}</span>
+                        <span class="">{{ value }}</span>
+                    </template>
+                </p>
+            </a-card>
+        </a-modal>
     </div>
 </template>
 
 <script setup>
+import { useDocTimeShow } from "./useDocTimeShow"
+// 在一开始就请求接口
 // 1.定义props
 const props = defineProps({
     pInfo: {
         type: Object,
         required: true
+    },
+    projectId: {
+        type: String,
+        required: true
     }
 })
+const { visible, handleModalVisible, timeList } = useDocTimeShow(props.projectId)
 </script>
 
 <style lang="less" scoped>
@@ -56,6 +82,10 @@ const props = defineProps({
         position: absolute;
         right: 30px;
         top: 1rem;
+        button {
+            width: 180px;
+            border-radius: 0;
+        }
     }
 }
 .a-col-title {

cdTMP/src/views/testmanage/projBoard/cpns/useDocTimeShow.ts

@@ -0,0 +1,35 @@
+import { ref, computed } from "vue"
+import projectApi from "@/api/project/project"
+export function useDocTimeShow(projectId: number) {
+    const visible = ref<boolean>(false)
+    const handleModalVisible = (): void => {
+        visible.value = true
+    }
+    // 获取时间模块
+    const timeTemp = ref<any[]>([])
+    const getTimeByBackend = async () => {
+        const res = await projectApi.getDocumentTimeShow(projectId)
+        timeTemp.value = res.data
+    }
+    getTimeByBackend()
+    const timeList = computed(() => {
+        timeTemp.value.forEach((item) => {
+            // 遍历所有属性，对值格式进行处理
+            Object.keys(item).forEach((key) => {
+                if (Array.isArray(item[key])) {
+                    item[key] = item[key].join("~")
+                } else {
+                    if (item[key].includes("年")) {
+                        item[key] = item[key].replace('年','').replace('月','').replace('日','')
+                    }
+                }
+            })
+        })
+        return timeTemp.value
+    })
+    return {
+        visible,
+        handleModalVisible,
+        timeList
+    }
+}

cdTMP/src/views/testmanage/projBoard/index.vue

@@ -4,7 +4,7 @@
             <!-- 返回前面一页的按钮，以及项目整体情况 -->
             <Title :pInfo="loadingData"></Title>
             <!-- 时间线显示项目情况 -->
-            <time-line :pInfo="loadingData"></time-line>
+            <time-line :pInfo="loadingData" :projectId="route.params.projectId"></time-line>
             <!-- 以轮次为合集展示需求下面的测试项数、用例数，测试类型下面测试项和用例数量 -->
             <round-info v-for="item in loadingData.statistics" :data="item"></round-info>
         </a-layout-content>
@@ -24,6 +24,10 @@ const fetchData = async () => {
     return projectApi.getBoardInfo(route.params.projectId)
 }
 const { loadingData, isDataLoading } = useFetchData({}, fetchData)
+
+defineOptions({
+    name: "projBoard"
+})
 </script>
 
 <style lang="less" scoped>

cdTMP/src/views/testmanage/projmanage/index.vue

@@ -798,6 +798,10 @@ const crudColumns = ref([
         }
     }
 ])
+
+defineOptions({
+    name: "projmanage"
+})
 </script>
 
 <style lang="less" scoped>