子系统页面优化

src/router/index.js

@@ -31,12 +31,14 @@ const router = createRouter({
                          * 个人项目页面
                          */
                         {
+                            //个人项目
                             path: '/WorkLoad/PersonalProject',
                             name: 'WorkLoadPersonalProject',
                             component: () => import('@/views/WorkLoadPage/PersonalProject.vue'),
                         },
 
                         {
+                            //个人项目的子系统
                             path: '/WorkLoad/PersonalProject/ChildSystem/:id',
                             name: 'WorkLoad/PersonalProject/ChildSystem',
                             component: () => import('@/views/WorkLoadPage/I_Manage_ChildSystem.vue')
@@ -62,19 +64,22 @@ const router = createRouter({
                             component: () => import('@/views/WorkLoadPage/DailyPaper.vue')
                         },
                         {
+                            //我管理的项目
                             path: '/WorkLoad/I_Manage',
                             name: 'WordLoadI_Manage',
                             component: () => import('@/views/WorkLoadPage/I_Manage.vue'),
                         },
                         {
+                            //我负责的项目
                             path: '/WorkLoad/I_Responsible',
                             name: 'WorkLoadI_Responsible',
                             component: () => import('@/views/WorkLoadPage/I_Responsible.vue')
                         },
 
                         {
-                            path: '/WorkLoad/I_Responsible/:id',
+                            //我负责的项目的子系统
-                            name: 'WorkLoadI_ResponsibleProject',
+                            path: '/WorkLoad/I_Responsible/ChildSystem/:id',
+                            name: 'WorkLoad/I_Responsible/ChildSystem',
                             component: () => import('@/views/WorkLoadPage/I_Manage_ChildSystem.vue')
                         },
 
@@ -110,6 +115,7 @@ const router = createRouter({
                             component: () => import('@/views/WorkLoadPage/I_Manage_ChildSystem.vue')
                         },
                         {
+                            //我管理的项目的子系统
                             path: '/WorkLoad/I_Manage/Childsystem/:id',
                             name: 'WorkLoad/I_Manage/ChildSystem',
                             component: () => import('@/views/WorkLoadPage/I_Manage_ChildSystem.vue')

src/views/WorkLoadPage/I_Manage_ChildSystem.vue

@@ -4,20 +4,20 @@
             <a-breadcrumb-item><a href="/workLoad/PersonalProject">我的项目</a></a-breadcrumb-item>
             <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
         </a-breadcrumb>
-        <div v-show="userProfile.id === ChildProjects.data.principalId" class="flex absolute right-8 mt-6 space-x-4">
+        <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" @click="toggleEditing">编辑</button>-->
+            <button v-show="userProfile.id === ChildProjects.data.principalId" 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>
+            <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" >
             <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8" >
-                <p class="text-lg">项目名称：{{ChildProjects.data.name}}</p>
+                <p class="text-lg text-sky-800 font-bold"><FileTextOutlined />项目名称：{{ChildProjects.data.name}}</p>
                 <p>项目周期：{{ChildProjects.data.cycle}} 天</p>
                 <p>项目开始时间：</p>
                 <p>项目完成时间：</p>
                 <div class="space-y-2">
                     <p>工作量：{{ChildProjects.data.workLoad}}人/天</p>
                 </div>
-                <a-button >子系统文档</a-button>
+                <a-button class="w-36">子系统文档</a-button>
             </div>
             <div class="flex  flex-row justify-start space-x-5 container">
                 <div v-for="(ChildSystem, index) in ChildSystems" :key="index" class="flex  flex-row justify-start space-x-5">
@@ -37,8 +37,12 @@
                                     <CloseOutlined   style="font-size: large" />
                                 </a-button>
 
-                                <a-modal v-model:open="openDelete" cancel-text="取消" ok-text="确定" title="删除子系统" @ok="DeleteOk()">
+                                <a-modal v-model:open="openDelete" title="删除子系统">
                                     <p class="text-red-500">确认删除此系统吗？</p>
+                                  <template #footer>
+                                    <a-button danger type="primary" @click="DeleteOk()">确认</a-button>
+                                    <a-button>取消</a-button>
+                                  </template>
                                 </a-modal>
                             </div>
                         </div>
@@ -48,15 +52,19 @@
         </div>
     </div>
   <!--新增子系统对话框-->
-    <a-modal v-model:open="AddModule" @ok="handleAdd" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子系统">
+    <a-modal v-model:open="AddModule" title="新增子系统" width="600px">
-        <a-form>
+        <a-form
-            <div class="flex space-x-5">
+            :label-col="{ span: 9}"
-                <a-form-item class="my-4" label="子系统名称："><a-input v-model:value="formData.name" class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
+            class="p-4 flex-col justify-center"
-                <a-form-item class="my-4" label="完成情况：">
+        >
+            <div class="flex">
+                <a-form-item class="my-4" label="子系统名称：">
+                  <a-input v-model:value="formData.name" class="h-8 w-36 border-gray-300 rounded-md"/>
+                </a-form-item>
+                <a-form-item class="my-4 ml-[20px]" label="完成情况：">
                     <a-select
                             ref="select"
-                            style="width: 145px;margin-left: 1.7vw"
+                            style="width: 142px;"
-
                             v-model:value="formData.isFinish"
                     >
                         <a-select-option value="0">未开始</a-select-option>
@@ -66,35 +74,37 @@
                     </a-select>
                 </a-form-item>
             </div>
-            <div class="flex space-x-5">
+            <div class="flex">
-                <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 ml-4" label="周期：">
-                <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>
+                  <a-input v-model:value="formData.cycle" class="h-8 w-36 border-gray-300 rounded-md"/>
+                </a-form-item>
+                <a-form-item class="my-4 ml-[50px]" label="工作量：">
+                  <a-input v-model:value="formData.workLoad" class="h-8 w-36 border-gray-300 rounded-md" type="number"/>
+                </a-form-item>
             </div>
-
+            <div class="flex">
-            <div class="flex space-x-5">
+                <a-form-item class="my-4 ml-[10px]" label="负责人：">
-                <a-form-item class="my-4" label="负责人：">
                   <a-select
                       ref="select"
-                      style="width: 145px;margin-left: 1.7vw"
+                      style="width: 145px;"
 
                       v-model:value="formData.principalId"
                   >
                     <a-select-option v-for="principal in principalUser.data" :value="principal.id">{{principal.username}}</a-select-option>
                   </a-select>
                 </a-form-item>
+              <a-form-item class="my-4 ml-[45px]" label="状态："><a-input v-model:value="formData.status" class="h-8 w-36 border-gray-300 rounded-md" type="number"/></a-form-item>
             </div>
-
+            <div>
-            <div class="flex space-x-8">
-
-                <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>
-
-            </div>
-            <div class="flex space-x-5">
                 <a-form-item class="my-4"  label="系统描述：">
-                    <a-textarea :rows="1" class="w-[200px] h-[30px]" v-model:value="formData.description" />
+                    <a-textarea v-model:value="formData.description" class="w-[200px] h-[30px]" />
                 </a-form-item>
             </div>
         </a-form>
+      <template #footer>
+        <a-button>取消</a-button>
+        <a-button class="bg-blue-500 mt-4" type="primary" @click="handleAdd">确认</a-button>
+      </template>
     </a-modal >
 </template>
 <script setup>
@@ -102,7 +112,7 @@ import {onMounted, reactive, ref, watch} from "vue";
 import request from "@/js/request.js";
 import router from "@/router/index.js";
 import {useRoute} from "vue-router";
-import {CloseOutlined} from '@ant-design/icons-vue';
+import {CloseOutlined, FileTextOutlined} from '@ant-design/icons-vue';
 import {message} from "ant-design-vue";
 
 const showButton = reactive([]);

src/views/WorkLoadPage/I_Responsible.vue

@@ -31,7 +31,7 @@
     <div class="flex flex-wrap justify-start ">
       <ProjectCard 
       class=""
-      v-for="proj in projList" v-bind="proj" @click="handleCardClick"></ProjectCard>
+      v-for="proj in projList" v-bind="proj" @click="router.push('/WorkLoad/I_Responsible/ChildSystem/'+proj.id)"></ProjectCard>
 
     </div>
     <a-float-button-group v-show="routePath === '/WorkLoad/I_Responsible'" trigger="hover" type="primary" :style="{ right: '94px' }">
@@ -270,10 +270,6 @@ const handleAdd=(publish)=>{
 }
 
 
-const handleCardClick=(id)=>{
-  console.log(id)
-  router.push('/WorkLoad/I_Responsible/'+id)
-}
 watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
     data.tags = []
     selectedTags.value.forEach((item,index)=>{