新增：静态、动态环境内容

cdTMP/src/api/project/project.js

@@ -156,6 +156,28 @@ export default {
             params: { id: id }
         })
     },
+    /**
+     * 获取静态软件项、静态硬件项、动态软件项、动态硬件项的数据
+     * @returns 返回数据
+     */
+    getStaticDynamicItems(id, category) {
+        return request({
+            url: "/testmanage/project/get_static_dynamic_items/",
+            method: "get",
+            params: { id: id, category }
+        })
+    },
+    /**
+     * 提交修改或新增静态软件项、静态硬件项、动态软件项、动态硬件项
+     * @returns null
+     */
+    postStaticDynamicItems(data) {
+        return request({
+            url: "/testmanage/project/post_static_dynamic_item/",
+            method: "post",
+            data
+        })
+    },
     /**
      * 获取所有状态
      * @returns 返回是否填写软件概述等等是否已经填写

cdTMP/src/layout/components/projectInfoOther/StaticDynamicTable.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="static-dynamic-table-container">
+        <a-modal
+            v-model:visible="visible"
+            width="50%"
+            draggable
+            :on-before-ok="handleSyncOk"
+            unmount-on-close
+            ok-text="确认保存"
+            cancel-text="关闭不保存"
+            :maskClosable="false"
+            @close="handleOnClose"
+        >
+            <template #title>{{ theTitle }}</template>
+            <WordLikeTable v-model="tableData" v-model:fontnote="fontnote" />
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Message } from "@arco-design/web-vue"
+import { getCurrentInstance, ref } from "vue"
+import WordLikeTable from "./projectModal/wordLikeTable/index.vue"
+import { useRoute } from "vue-router"
+import { cloneDeep } from "lodash-es"
+import projectApi from "@/api/project/project"
+
+const { proxy } = getCurrentInstance() as any
+const route = useRoute()
+
+// props
+const { reset } = defineProps<{
+    reset: () => void
+}>()
+
+const visible = ref(false)
+const theTitle = ref("")
+
+const tableInitValue = [
+    ["", "", ""],
+    ["", "", ""],
+    ["", "", ""]
+]
+const tableData = ref(tableInitValue)
+const fontnote = ref("")
+
+const handleSyncOk = async () => {
+    // 验证题注是否为空
+    if (tableData.value.length <= 0) {
+        Message.error("请输入表格内容再提交")
+        return false
+    }
+    try {
+        // 请求接口
+        await projectApi.postStaticDynamicItems({
+            id: route.query.id,
+            category: theTitle.value,
+            table: tableData.value,
+            fontnote: fontnote.value
+        })
+        Message.success("保存成功")
+    } catch (e) {
+        return false
+    }
+}
+
+const handleOnClose = () => {
+    // 用来清空数据
+    tableData.value = cloneDeep(tableInitValue)
+    fontnote.value = ""
+    reset()
+}
+
+const open = async (title: string) => {
+    proxy?.$loading?.show("数据加载中...")
+    theTitle.value = title
+    try {
+        // 获取数据并赋值给tableData
+        const res = await projectApi.getStaticDynamicItems(route.query.id, title)
+        if (res.code === 25001) {
+            const data = res.data
+            tableData.value = data.table
+            fontnote.value = data.fontnote
+        }
+        visible.value = true
+    } catch (e) {
+    } finally {
+        proxy?.$loading?.hide()
+    }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped></style>

cdTMP/src/layout/components/projectInfoOther/index.vue

@@ -38,30 +38,37 @@
         <project-modal ref="projectModalRef" :reset="fetchAllStatus" />
         <!-- 接口图 -->
         <InterfaceImage ref="interfaceImageRef" :reset="fetchAllStatus" />
+        <!-- 静态软件项、静态硬件项、动态软件项、动态硬件项 -->
+        <StaticDynamicTable ref="staticDynamiRef" :reset="fetchAllStatus" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, ref, useTemplateRef } from "vue"
 import projectApi from "@/api/project/project"
 import { useRoute } from "vue-router"
 import { Message } from "@arco-design/web-vue"
 import ProjectModal from "./projectModal/index.vue"
 import InterfaceImage from "./InterfaceImage.vue"
+import StaticDynamicTable from "./StaticDynamicTable.vue"
 
 const route = useRoute()
 
 // ref
 const projectModalRef = ref<InstanceType<typeof ProjectModal> | null>(null)
 const interfaceImageRef = ref<InstanceType<typeof InterfaceImage> | null>(null)
+const staticDynamiRef = useTemplateRef("staticDynamiRef")
 
 // events
-const clickSoftSummary = async () => {
+const clickStuctDatas = async (category: string) => {
-    projectModalRef.value?.open()
+    projectModalRef.value?.open(category)
 }
 const clickInterfaceImage = async () => {
     interfaceImageRef.value?.open()
 }
+const clickStaticDynamic = async (title: string) => {
+    staticDynamiRef.value?.open(title)
+}
 
 // 进入页面时候请求知道各项目样式情况-ref
 const fetchAllStatus = async () => {
@@ -87,13 +94,43 @@ const inputOptions = ref([
         name: "soft_summary",
         title: "软件概述",
         status: false,
-        handler: clickSoftSummary
+        handler: () => clickStuctDatas("软件概述")
     },
     {
         name: "interface_image",
         title: "接口图",
-        status: true,
+        status: false,
         handler: clickInterfaceImage
+    },
+    {
+        name: "static_soft_item",
+        title: "静态软件项表",
+        status: false,
+        handler: () => clickStaticDynamic("静态软件项")
+    },
+    {
+        name: "static_soft_hardware",
+        title: "静态硬件项表",
+        status: false,
+        handler: () => clickStaticDynamic("静态硬件项")
+    },
+    {
+        name: "dynamic_des",
+        title: "动态环境描述",
+        status: false,
+        handler: () => clickStuctDatas("动态环境描述")
+    },
+    {
+        name: "dynamic_soft_item",
+        title: "动态软件项表",
+        status: false,
+        handler: () => clickStaticDynamic("动态软件项")
+    },
+    {
+        name: "dynamic_soft_hardware",
+        title: "动态硬件项表",
+        status: false,
+        handler: () => clickStaticDynamic("动态硬件项")
     }
 ])
 const allStatus = computed(() => inputOptions.value.every((item) => item.status))

cdTMP/src/layout/components/projectInfoOther/projectModal/hooks/useTable.tsx

@@ -1,5 +1,5 @@
 import { TableColumnData } from "@arco-design/web-vue"
-import { ref, reactive, onUnmounted } from "vue"
+import { ref, reactive } from "vue"
 // 粘贴图片组件
 import ImageInput from "../ImageInput/index.vue"
 // wordlike组件

cdTMP/src/layout/components/projectInfoOther/projectModal/index.vue

@@ -46,10 +46,27 @@ const { reset } = defineProps<{
 }>()
 
 const visible = ref(false)
-const title = ref("软件概述-新增")
+const title = ref("")
 
 const { columns, data, handleChange, addTextRow, addPicRow, addTableRow, handleOnClose } = useTable(reset)
 
+// enums - 维护一个obj来储存同类对应的内容
+const dictMap = {
+    软件概述: {
+        createTitle: "软件概述-新增",
+        modifyTitle: "软件概述-修改",
+        getFunc: projectApi.getSoftSummary,
+        postFunc: projectApi.postSoftSummary,
+        errorMsg: "获取软件概述失败"
+    },
+    动态环境描述: {
+        createTitle: "动态环境描述-新增",
+        modifyTitle: "动态环境描述-修改",
+        errorMsg: "获取动态环境描述失败"
+    }
+}
+
+// functions and events
 const handleSyncOk = async () => {
     try {
         await projectApi.postSoftSummary({ id: route.query.id, data: data.value })
@@ -61,16 +78,17 @@ const handleSyncOk = async () => {
     return false
 }
 
-const open = async () => {
+const open = async (category: string) => {
     proxy?.$loading?.show("数据加载中...")
+    const currentCate = dictMap[category]
     try {
-        const res = await projectApi.getSoftSummary(route.query.id)
+        const res = await currentCate.getFunc(route.query.id)
         const code = res.code // 25001表示有数据，25002表示没有数据
-        title.value = code === 25001 ? "软件概述-修改" : "软件概述-新增"
+        title.value = code === 25001 ? currentCate.modifyTitle : currentCate.createTitle
         data.value = res.data
         visible.value = true
     } catch (e) {
-        Message.error("获取软件概述信息失败")
+        Message.error(currentCate.errorMsg)
     } finally {
         proxy?.$loading?.hide()
     }