新增：软件接口图录入

cdTMP/package-lock.json

@@ -32,7 +32,7 @@
                 "vue": "^3.5.27",
                 "vue-clipboard3": "^2.0.0",
                 "vue-color-kit": "^1.0.6",
-                "vue-data-ui": "^3.14.2",
+                "vue-data-ui": "^3.14.5",
                 "vue-router": "^5.0.2",
                 "vuedraggable": "^2.24.3"
             },
@@ -5699,9 +5699,9 @@
             }
         },
         "node_modules/vue-data-ui": {
-            "version": "3.14.2",
-            "resolved": "https://registry.npmmirror.com/vue-data-ui/-/vue-data-ui-3.14.2.tgz",
-            "integrity": "sha512-gxMhF0DXMfJ+TgErs0fKsM7Se+txRQSFhy+DWtw5XhD2HnjxnlbBSuyJDyNvLdHtPWOVeoXzc1TSMvLzsheZnQ==",
+            "version": "3.14.5",
+            "resolved": "https://registry.npmmirror.com/vue-data-ui/-/vue-data-ui-3.14.5.tgz",
+            "integrity": "sha512-VjRJAHvnb0NFqrz/hB8cG4bNnOVzO0J3kJ1lE9Ir3dMFKA37R1lEriu7Q4tlgkoFLmsvhV/wfan2iiLFCBYKWA==",
             "license": "MIT",
             "peerDependencies": {
                 "jspdf": ">=3.0.1",

cdTMP/package.json

@@ -35,7 +35,7 @@
         "vue": "^3.5.27",
         "vue-clipboard3": "^2.0.0",
         "vue-color-kit": "^1.0.6",
-        "vue-data-ui": "^3.14.2",
+        "vue-data-ui": "^3.14.5",
         "vue-router": "^5.0.2",
         "vuedraggable": "^2.24.3"
     },

cdTMP/src/api/project/project.js

@@ -133,6 +133,29 @@ export default {
             params: { id: id }
         })
     },
+    /**
+     * 提交修改或新增软件接口图
+     * @returns 返回新增或修改是否成功
+     */
+    postInterfaceImage(id, data) {
+        return request({
+            url: "/testmanage/project/interface_image/",
+            method: "post",
+            params: { id: id },
+            data
+        })
+    },
+    /**
+     * 提交修改或新增软件接口图
+     * @returns 返回新增或修改是否成功
+     */
+    getInterfaceImage(id) {
+        return request({
+            url: "/testmanage/project/get_interface_image/",
+            method: "get",
+            params: { id: id }
+        })
+    },
     /**
      * 获取所有状态
      * @returns 返回是否填写软件概述等等是否已经填写

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

@@ -0,0 +1,80 @@
+<template>
+    <div class="interface-image-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>软件接口图</template>
+            <div class="flex justify-center items-center">
+                <ImageInput v-model="imageUrl" v-model:fontnote="fontnote" />
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance } from "vue"
+import ImageInput from "./projectModal/ImageInput/index.vue"
+import { Message } from "@arco-design/web-vue"
+import projectApi from "@/api/project/project"
+import { useRoute } from "vue-router"
+
+const { proxy } = getCurrentInstance() as any
+const route = useRoute()
+const visible = ref(false)
+
+// props
+const { reset } = defineProps<{
+    reset: () => void
+}>()
+
+// 题注和图片数据
+const fontnote = ref("")
+const imageUrl = ref("")
+
+const handleSyncOk = async () => {
+    // 验证题注是否为空
+    if (fontnote.value.trim().length <= 0 || !imageUrl.value.trim()) {
+        Message.error("请输入题注和粘贴图片")
+        return false
+    }
+    // 提交数据
+    try {
+        await projectApi.postInterfaceImage(route.query.id, { fontnote: fontnote.value, content: imageUrl.value, type: "image" })
+        Message.success("保存成功")
+    } catch (e) {
+        return false
+    }
+}
+
+const handleOnClose = () => {
+    // 用来清空数据
+    fontnote.value = ""
+    imageUrl.value = ""
+    reset()
+}
+
+const open = async () => {
+    proxy?.$loading?.show("数据加载中...")
+    try {
+        const { data } = await projectApi.getInterfaceImage(route.query.id)
+        fontnote.value = data.fontnote
+        imageUrl.value = data.content
+        visible.value = true
+    } catch (e) {
+    } finally {
+        proxy?.$loading?.hide()
+    }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped></style>

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

@@ -34,26 +34,34 @@
                 </template>
             </template>
         </a-dropdown>
+        <!-- 软件概述... -->
         <project-modal ref="projectModalRef" :reset="fetchAllStatus" />
+        <!-- 接口图 -->
+        <InterfaceImage ref="interfaceImageRef" :reset="fetchAllStatus" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue"
-import ProjectModal from "./projectModal/index.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"
 
 const route = useRoute()
 
 // ref
 const projectModalRef = ref<InstanceType<typeof ProjectModal> | null>(null)
+const interfaceImageRef = ref<InstanceType<typeof InterfaceImage> | null>(null)
 
 // events
 const clickSoftSummary = async () => {
     projectModalRef.value?.open()
 }
+const clickInterfaceImage = async () => {
+    interfaceImageRef.value?.open()
+}
 
 // 进入页面时候请求知道各项目样式情况-ref
 const fetchAllStatus = async () => {
@@ -82,12 +90,10 @@ const inputOptions = ref([
         handler: clickSoftSummary
     },
     {
-        name: "static_soft_item",
+        name: "interface_image",
         title: "接口图",
         status: true,
-        handler: () => {
-            console.log("暂未实现")
-        }
+        handler: clickInterfaceImage
     }
 ])
 const allStatus = computed(() => inputOptions.value.every((item) => item.status))

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

@@ -12,7 +12,7 @@
             </template>
 
             <template v-else>
-                <div class="placeholder">请粘贴图片</div>
+                <div class="placeholder">此处Ctrl+V粘贴图片</div>
             </template>
         </div>
         <!-- 题注：fontnote -->

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

@@ -31,12 +31,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, getCurrentInstance } from "vue"
 import useTable from "./hooks/useTable"
 import projectApi from "@/api/project/project"
 import { useRoute } from "vue-router"
 import { Message } from "@arco-design/web-vue"
-import { getCurrentInstance } from "vue"
 
 const { proxy } = getCurrentInstance() as any