edit

src/js/request.js

@@ -718,6 +718,22 @@ const moduleGetBySysId = (sysId, token) => {
         }
     })
 }*/
+
+
+const moduleDelete = (id ,token) =>{
+    return axios({
+        url: api + "/module/delete/{id}",
+        method: "delete",
+        params: {
+            id: id
+        },
+        headers: {
+            'Authorization':'Bearer '+token,
+            'Content-Type': 'application/json;charset=utf-8',
+            'Timestamp': getCurrentTimestamp()
+        }
+    })
+}
 export default {
 
     login,
@@ -762,6 +778,7 @@ export default {
 
     moduleGetByProjectId,
     moduleGetBySysId,
+    moduleDelete,
 
     messageGet,
 

src/router/index.js

@@ -70,6 +70,11 @@ const router = createRouter({
                             name: 'WorkLoad/I_Manage/ChildModule',
                             component: () => import('@/views/WorkLoadPage/ChildModule.vue')
                         },
+                        {
+                            path: '/WorkLoad/I_Manage/IChildModule',
+                            name: 'Workload/IChildModule',
+                            component: () => import('@/views/WorkLoadPage/IChildModule.vue')
+                        },
                         {
                             path: '/WorkLoad/I_Manage/UserManageModule',
                             name: 'WorkLoadI_ManageUserManageModule',
@@ -86,8 +91,8 @@ const router = createRouter({
                             component: () => import('@/views/WorkLoadPage/AuthorityManageModule.vue')
                         },
                         {
-                            path: '/WorkLoad/I_Manage/ChildSystem',
+                            path: '/WorkLoad/I_Manage/I_Manage_ChildSystem',
-                            name: 'WorkLoad/I_Manage/ChildSystem',
+                            name: 'WorkLoad/I_Manage/IChildSystem',
                             component: () => import('@/views/WorkLoadPage/I_Manage_ChildSystem.vue')
                         },
                         {

src/views/WorkLoadPage/IChildModule.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="container">
+        <a-breadcrumb class="mt-6 ml-6">
+            <a-breadcrumb-item><a href="">我的项目</a></a-breadcrumb-item>
+            <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
+            <a-breadcrumb-item><a href="">子模块</a></a-breadcrumb-item>
+        </a-breadcrumb>
+        <div class="flex absolute right-8 mt-6 space-x-4">
+            <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
+            <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子模块</button>
+        </div>
+    </div>
+    <div class="mt-12 ml-8 flex space-x-16 h-full">
+        <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
+            <p class="text-lg">子系统名称：后台管理系统</p>
+            <p>子系统周期：10天</p>
+            <p>项目开始时间：</p>
+            <p>项目完成时间：</p>
+            <div class="space-y-2">
+                <p>工作量：</p>
+                <p>20人/天</p>
+            </div>
+        </div>
+
+        <div v-for="(ChildModule, index) in ChildModules" :key="index"  class="flex space-x-9">
+            <a-card class="relative bg-blue-400 w-72 h-36 text-white rounded-xl">
+                <div class="flex space-x-9">
+                    <p class="absolute left-4 top-4">{{ChildModule.name}}</p>
+                    <p class="absolute right-4 top-4">负责人: 无</p>
+                </div>
+                <div class="flex flex-col mt-8">
+                    <p class="text-green-100">剩余 3 天</p>
+                    <CaretUpOutlined class="absolute bottom-[32%] ml-2"/>
+                </div>
+                <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
+                    <div class="text-blue-400 flex absolute left-5">
+                        <CheckOutlined class="mt-1"/>
+                        <p >进行中</p>
+                    </div>
+                    <div class="flex absolute right-16">
+                        <p class="text-blue-400 font-bold text-2xl">2</p>
+                        <p class="text-blue-400 mt-2">人/天</p>
+                    </div>
+                    <button class="absolute right-8 w-6 h-6 flex items-center justify-center bg-blue-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/LoginRegisterModule')">
+                        <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                        </svg>
+                    </button>
+                </div>
+            </a-card>
+        </div>
+    </div>
+  <!--新增子模块对话框-->
+    <a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子模块">
+        <a-form>
+            <div class="flex space-x-5">
+                <a-form-item class="my-4" label="子模块名称："><a-input  class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
+                <a-form-item class="my-4" label="状态：">
+                    <a-select
+                            ref="select"
+                            style="width: 145px;margin-left: 1.7vw"
+                            @focus="focus"
+                    >
+                        <a-select-option value="jack">进行中</a-select-option>
+                        <a-select-option value="lucy">未开始</a-select-option>
+                        <a-select-option value="disabled">已完成</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </div>
+            <div class="flex space-x-5">
+                <a-form-item class="my-4" label="周期："><a-input  class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
+                <a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
+            </div>
+            <div class="flex space-x-5">
+                <a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
+                <a-form-item class="my-4"  label="系统描述：">
+                    <a-textarea :rows="1" class="w-36 h-8" />
+                </a-form-item>
+            </div>
+
+        </a-form>
+    </a-modal >
+</template>
+<script setup>
+import {CaretUpOutlined, CheckOutlined} from '@ant-design/icons-vue';
+import {onMounted, ref} from 'vue';
+
+const AddModule = ref(false)
+function showAddModal(){
+    AddModule.value = true;
+}
+//根据子系统id获取子模块
+const token = window.localStorage.getItem('token')
+const ChildModules = ref([]);
+
+const params = new URLSearchParams(window.location.search);
+const sysId = params.get('id');
+
+onMounted(() => {
+    // request.moduleGetBySysId(sysId, token).then((res) => {
+    //     console.log("ChildModules:", res)
+    //     ChildModules.value = res.data.data
+    // })
+})
+
+
+</script>

src/views/WorkLoadPage/I_Manage_ChildSystem.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="container ml-6">
         <a-breadcrumb class="mt-6 ml-6">
-            <a-breadcrumb-item><a href="/workLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
+            <a-breadcrumb-item><a href="/workLoad/PersonalProject">我的项目</a></a-breadcrumb-item>
             <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
         </a-breadcrumb>
         <div class="flex absolute right-8 mt-6 space-x-4">
-            <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
+            <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white" @click="toggleEditing">编辑</button>
             <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button>
         </div>
         <div class="mt-12 ml-8 flex space-x-16 h-full" >
@@ -28,11 +28,18 @@
                                 <p class="ml-3 text-xl">{{ChildSystem.name}}</p>
                             </div>
                             <div class="ml-auto mr-10">
-                                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
+                                <button v-if="data.editing &&showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
                                     <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                                     </svg>
                                 </button>
+                                <a-button  type="link" v-else-if="!data.editing && showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-red-400 text-white rounded-full transition duration-300 ease-in-out transform " @click="deleteCard(index)">
+                                    <CloseOutlined   style="font-size: large" />
+                                </a-button>
+
+                                <a-modal v-model:open="openDelete" cancel-text="取消" ok-text="确定" title="删除子系统" @ok="DeleteOk()">
+                                    <p class="text-red-500">确认删除此系统吗？</p>
+                                </a-modal>
                             </div>
                         </div>
                     </a-card>
@@ -63,45 +70,15 @@
                 <a-form-item class="my-4" label="周期："><a-input v-model:value="formData.cycle" class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
                 <a-form-item class="my-4" label="工作量："><a-input v-model:value="formData.workLoad" type="number" class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
             </div>
-            <!--      <div class="flex space-x-5">-->
-            <!--        <a-form-item class="my-4" label="负责人："><a-input v-model="formData.responsiblePerson" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
 
-            <!--          <a-form-item class="my-4" label="发布情况：">-->
-            <!--              <a-select-->
-            <!--                      ref="select"-->
-            <!--                      style="width: 145px;margin-left: 1.7vw"-->
-            <!--                      @focus="focus"-->
-            <!--                      v-model="formData.responsiblePerson"-->
-            <!--              >-->
-            <!--                  <a-select-option value="true">是</a-select-option>-->
-            <!--                  <a-select-option value="false">否</a-select-option>-->
-            <!--              </a-select>-->
-            <!--          </a-form-item>-->
-
-            <!--      </div>-->
             <div class="flex space-x-5">
                 <a-form-item class="my-4" label="负责人Id："><a-input v-model:value="formData.principalId" type="number" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
-                <!--            <a-form-item class="my-4" label="项目id："><a-input v-model="formData.projectId" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
             </div>
-            <!--        <div class="flex space-x-5">-->
+
-            <!--            <a-form-item class="my-4" label="开始时间："><a-input v-model="formData.beginTime" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
-            <!--            <a-form-item class="my-4" label="结束时间："><a-input v-model="formData.completeTime" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
-            <!--        </div>-->
             <div class="flex space-x-8">
-                <!--            <a-form-item class="my-4" label="type："><a-input v-model="formData.type" class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
+
-                <!--1已发布，0未发布-->
                 <a-form-item class="my-4" label="状态："><a-input type="number" v-model:value="formData.status" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
-                <!--            <a-form-item class="my-4" label="是否删除：">-->
+
-                <!--                <a-select-->
-                <!--                        ref="select"-->
-                <!--                        style="width: 145px;margin-left: 1.7vw"-->
-                <!--                        @focus="focus"-->
-                <!--                        v-model="formData.isDelete"-->
-                <!--                >-->
-                <!--                    <a-select-option value="true">是</a-select-option>-->
-                <!--                    <a-select-option value="false">否</a-select-option>-->
-                <!--                </a-select>-->
-                <!--            </a-form-item>-->
             </div>
             <div class="flex space-x-5">
                 <a-form-item class="my-4"  label="系统描述：">
@@ -115,6 +92,7 @@
 import {onMounted, reactive, ref, watch} from "vue";
 import request from "@/js/request.js";
 import router from "@/router/index.js";
+import {CloseOutlined} from '@ant-design/icons-vue';
 
 const showButton = reactive([]);
 const AddModule = ref(false)
@@ -135,12 +113,15 @@ const ChildProjects = reactive({
         principalUser: ''
     }]
 }); // 使用ref创建响应式数据
-const ChildSystems = ref([]);
+const ChildSystems = ref([
+
+]);
 const data =reactive({
     is:1,
     id:null,
     tags:[],
-    isFinish:[0,1,2,-1]
+    isFinish:[0,1,2,-1],
+    editing:true
 })
 
 onMounted(() => {
@@ -161,7 +142,7 @@ onMounted(() => {
 function EnterChildModule(ChildSystem){
     console.log(ChildSystem.id)
     window.localStorage.setItem('id',ChildSystem.id)
-    router.push('/workLoad/I_Manage/ChildModule')
+    router.push("/WorkLoad/IChildModule")
 }
 // 打开add窗口
 watch(() => AddModule.value, () => {
@@ -184,14 +165,6 @@ const formData = reactive({
     projectId: '',
 //  pid: ''
 });
-// const dataToSend = {
-//     name: formData.value.name,
-//     status: formData.value.status,
-//     cycle: formData.value.cycle,
-//     workLoad: formData.value.workLoad,
-//     responsiblePerson: formData.value.responsiblePerson,
-//     description: formData.value.description,
-// };
 
 const handleAdd = () => {
     // 获取表单数据
@@ -205,4 +178,30 @@ const handleAdd = () => {
     // 关闭模态框
     AddModule.value = false;
 };
+
+
+
+// 编辑
+
+// const editing =ref(false)  // 添加editing属性，默认为false
+function  toggleEditing(index) {
+    // ChildSystems[index].editing = !ChildSystems[index].editing;
+    // console.log(editing.value)
+    console.log(6666666666)
+    data.editing =false
+
+    console.log(editing.value)
+}
+const openDelete = ref(false)
+function deleteCard(index) {
+
+    openDelete.value = true;
+    ChildSystems.splice(index, 1);
+}
+function DeleteOk() {
+    request.moduleDelete(id, token).then((res) => {
+        console.log("childModules:", res)
+    })
+    openDelete.value = false;
+}
 </script>

src/views/WorkLoadPage/PersonalProject.vue

@@ -175,7 +175,7 @@ function  getMyselfProject(){
 function MainMessage(project) {
     console.log(project.id)
     window.localStorage.setItem('id',project.id)
-    router.push('/WorkLoad/I_Manage/ChildSystem')
+    router.push('/WorkLoad/I_Manage/I_Manage_ChildSystem')
 
 
 }