feat(业务): 子系统相关我负责的页面进行完善1

components.d.ts

@@ -13,21 +13,16 @@ declare module '@vue/runtime-core' {
     DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
     Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
     EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -41,10 +36,6 @@ declare module '@vue/runtime-core' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -52,12 +43,8 @@ declare module '@vue/runtime-core' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
     GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']
@@ -85,7 +72,4 @@ declare module '@vue/runtime-core' {
     UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
     VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/api/project.js

@@ -76,7 +76,7 @@ export function GetProjectByName(name, token) {
 //根据项目id查询子系统
 export function GetChildSysById(projectId, token) {
   return request({
-    url: '/module/get',
+    url: "/module/get?projectId=" + projectId ,
     method: 'get',
     params: { projectId },
     headers: {
@@ -88,7 +88,7 @@ export function GetChildSysById(projectId, token) {
 }
 
 //根据项目名和子系统名查询子模块
-export function GetChildModuleByName(projectName, childName, token) {
+export function  GetChildSysByName(projectName, childName, token) {
   return request({
     url: '/project/module/get/name',
     method: 'get',
@@ -101,3 +101,44 @@ export function GetChildModuleByName(projectName, childName, token) {
   });
 }
 
+//新增子系统
+export function AddChildSystem(data, token) {
+  return request({
+    url: '/project/child/add',
+    method: 'post',
+    data,
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//新增子模块
+export function AddChildModule(data, token) {
+  return request({
+    url: '/project/module/add',
+    method: 'post',
+    data,
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//删除子模块
+export function DeleteChildModule(id, token) {
+  return request({
+    url: '/project/module/delete',
+    method: 'delete',
+    params:{ id },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}

src/router/index.ts

@@ -188,17 +188,16 @@ export const asyncRoutes:RouteRecordRaw[] = [
       },
       //我负责的子系统和子模块
       {
-        path: 'childSysCharge/:name',
+        path: 'childSysCharge',
         component: () => import('@/views/personal/project/childSystem/charge.vue'),
         name: 'ChildSysCharge',
-        meta: { title: '子系统', breadcrumb: true , affix: true  },
+        meta: { title: '子系统', breadcrumb: true ,  hidden: true  },
-        props: true
       },
       {
         path: 'childModCharge',
         component: () => import('@/views/personal/project/childmodel/charge.vue'),
         name: 'ChildModCharge',
-        meta: { title: '子模块', breadcrumb: true , hidden: true  }
+        meta: { title: '子模块', breadcrumb: true ,  hidden: true  }
       },
       //我管理的子系统和子模块
       {

src/views/personal/project/charge.vue

@@ -232,10 +232,10 @@
         }"
           >
               <el-select v-model="AddFormData.status">
-                <el-option value="0">未开始</el-option>
+                <el-option value="未开始">未开始</el-option>
-                <el-option value="2">进行中</el-option>
+                <el-option value="进行中">进行中</el-option>
-                <el-option value="1">已完成</el-option>
+                <el-option value="已完成">已完成</el-option>
-                <el-option value="-1">暂停</el-option>
+                <el-option value="已暂停">已暂停</el-option>
               </el-select>
           </el-form-item>
           </el-col>
@@ -526,29 +526,9 @@ async function SearchProjectByName() {
   }
 }
 
-/*
+function toChildSystem(id) {
-
+  console.log("projectId:", id);
-async function toChildSystem(projectName) {
+  router.push({ name: 'ChildSysCharge', quary: { id: 4 } });
-  console.log("search token:", token, "project name:", projectName);
-  listLoading.value = true;  // 显示加载状态
-  try {
-    const response = await GetChildProjectByName(projectName, token);
-    if (response && response.data && response.data.name) {
-      console.log("Child project name:", response.data.name);
-      router.push({ name: 'ChildSysCharge', params: { name: response.data.name } });
-    } else {
-      console.error("未获取到预期的子系统名称，响应内容:", response);
-    }
-  } catch (error) {
-    console.error('查询子系统名称失败:', error);
-  } finally {
-    listLoading.value = false;  // 隐藏加载状态
-  }
-}
-*/
-
-function toChildSystem(projectId) {
-  router.push({ name: 'ChildSysCharge', params: { name: projectId } });
 }
 
 

src/views/personal/project/childSystem/charge.vue

@@ -2,13 +2,14 @@
   <el-card style="max-width: 100vw;margin: 1.5vw;">
     <template #header>
       <div class="card-header">
-        <span>项目1</span>
+        <span>项目{{projectId}}</span>
       </div>
     </template>
     <div style="display: flex; gap: 100px">
       <el-input
           style="width: 550px"
           placeholder="请输入"
+
       >
         <template #prepend>名称</template>
       </el-input>
@@ -20,7 +21,7 @@
       </el-input>
       <div>
         <el-button-group>
-          <el-button type="primary">
+          <el-button type="primary" >
             <el-icon><Search /></el-icon>
             查询
           </el-button>
@@ -38,7 +39,7 @@
       <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
         <span>子系统列表</span>
         <div style="display: flex;">
-          <el-button type="primary" >
+          <el-button type="primary" @click="toggleAddDialog()">
             <el-icon><Plus /></el-icon>
             新增
           </el-button>
@@ -50,6 +51,7 @@
       </div>
     </template>
 
+
     <!--表格内容-->
     <el-table :data="tableData" ref="multipleTableRef" style="width: 100%">
       <el-table-column type="selection" width="55" />
@@ -103,7 +105,7 @@
         <template #default="{ row }">
           <div style="display: flex; justify-content: flex-start; margin-bottom: 4px;">
             <el-button link type="primary" size="small" >编辑</el-button>
-            <el-button link type="primary" size="small" >删除</el-button>
+            <el-button link type="primary" size="small" @click="toggleDeleteDialog(row)">删除</el-button>
           </div>
           <div style="margin-bottom: 4px">
             <el-button link type="primary" size="small">指定项目负责人</el-button>
@@ -125,35 +127,152 @@
 
 
   <!--新增子系统对话框-->
-  <el-dialog title="新增子系统" width="500">
+  <el-dialog v-model="AddDialogVisible" title="新增子系统" width="500">
     <el-form label-width="auto" style="max-width: 600px">
       <el-form-item
-          label="项目名称"
+          label="子系统名称"
           :rules="{
             required: true,
             message: 'domain can not be null',
             trigger: 'blur',
           }"
       >
-        <el-input />
+        <el-input v-model="AddFormData.name"/>
       </el-form-item>
-      <el-form-item
+      <el-row>
-          label="周期"
+        <el-col :span="15">
-          :rules="{
+          <el-form-item
-          required: true,
+              label="截止时间"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <div class="block">
+              <el-date-picker
+                  type="date"
+                  placeholder="选择"
+                  v-model="AddFormData.deadLine"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item
+              label="状态"
+              :rules="{
+                required: true,
+                trigger: 'blur',
+        }"
+          >
+            <el-select v-model="AddFormData.status">
+              <el-option value="未开始">未开始</el-option>
+              <el-option value="进行中">进行中</el-option>
+              <el-option value="已完成">已完成</el-option>
+              <el-option value="已暂停">已暂停</el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+              label="负责人id"
+              :rules="{
           message: 'domain can not be null',
           trigger: 'blur',
         }"
+          >
+            <el-input v-model="AddFormData.principalId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+         <el-form-item
+              label="系统id"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <el-input  v-model="AddFormData.projectId"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+              label="工作量"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <el-input  v-model="AddFormData.workLoad"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+              label="周期"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <el-input  v-model="AddFormData.cycle"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item
+          label="描述"
+          :rules="{
+          trigger: 'blur',
+        }"
       >
-        <el-input />
+        <el-input type="textarea" v-model="AddFormData.description"/>
       </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="CancelAdd()">取消</el-button>
+        <el-button type="primary" @click="addChildSystem() ">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+
+  <!--删除项目对话框-->
+  <el-dialog
+      title="删除子系统"
+      width="450"
+      align-center
+      v-model="DeleteDialogVisible"
+  >
+    <span>确认删除该子系统吗?</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="danger" >删除</el-button>
+        <el-button @click="CancelDelete()">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+
+  <!--编辑项目对话框-->
+  <el-dialog title="编辑子系统" width="500">
+    <el-form label-width="auto" style="max-width: 600px">
       <el-form-item
-          label="工作量"
+          label="子系统名称"
           :rules="{
-          required: true,
+            required: true,
-          message: 'domain can not be null',
+            message: 'domain can not be null',
-          trigger: 'blur',
+            trigger: 'blur',
-        }"
+          }"
       >
         <el-input />
       </el-form-item>
@@ -165,25 +284,21 @@
           trigger: 'blur',
         }"
       >
-        <div class="block">
+        <el-input/>
-          <el-date-picker
-              type="date"
-              placeholder="Pick a day"
-          />
-        </div>
       </el-form-item>
       <el-form-item
-          label="项目简介"
+          label="描述"
           :rules="{
+          message: 'domain can not be null',
           trigger: 'blur',
         }"
       >
-        <el-input type="textarea" />
+        <el-input />
       </el-form-item>
       <el-row>
         <el-col :span="12">
           <el-form-item
-              label="负责人"
+              label="项目负责人id"
               :rules="{
           required: true,
           message: 'domain can not be null',
@@ -195,16 +310,32 @@
         </el-col>
         <el-col :span="12">
           <el-form-item
-              label="标签"
+              label="系统id"
               :rules="{
           message: 'domain can not be null',
           trigger: 'blur',
         }"
           >
-            <el-input  />
+            <el-input />
           </el-form-item>
         </el-col>
       </el-row>
+      <el-form-item
+          label="周期"
+          :rules="{
+          trigger: 'blur',
+        }"
+      >
+        <el-input />
+      </el-form-item>
+      <el-form-item
+          label="工作量"
+          :rules="{
+          trigger: 'blur',
+        }"
+      >
+        <el-input />
+      </el-form-item>
       <el-form-item>
         <el-row>
           <el-col :span="20">
@@ -214,134 +345,6 @@
                 required: true,
                 message: 'Please select a status',
                 trigger: 'blur',
-        }"
-            >
-              <el-select >
-                <el-option value="0">未开始</el-option>
-                <el-option value="2">进行中</el-option>
-                <el-option value="1">已完成</el-option>
-                <el-option value="-1">暂停</el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item>
-              <el-upload
-                  multiple
-                  style=" margin-right: 13px;"
-              >
-                <el-button type="success">
-                  <el-icon><UploadFilled /></el-icon>
-                  上传文档
-                </el-button>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button >取消</el-button>
-        <el-button type="primary">
-          确认
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-
-  <!--删除项目对话框-->
-  <el-dialog
-      title="删除项目"
-      width="450"
-      align-center
-  >
-    <span>确认删除该项目吗?</span>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="danger" >删除</el-button>
-        <el-button >取消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-
-  <!--编辑项目对话框-->
-  <el-dialog title="编辑项目" width="500">
-    <el-form label-width="auto" style="max-width: 600px">
-      <el-form-item
-          label="项目名称"
-          :rules="{
-            required: true,
-            message: 'domain can not be null',
-            trigger: 'blur',
-          }"
-      >
-        <el-input />
-      </el-form-item>
-      <el-form-item
-          label="项目简介"
-          :rules="{
-          required: true,
-          message: 'domain can not be null',
-          trigger: 'blur',
-        }"
-      >
-        <el-input/>
-      </el-form-item>
-      <el-form-item
-          label="详细介绍"
-          :rules="{
-          required: true,
-          message: 'domain can not be null',
-          trigger: 'blur',
-        }"
-      >
-        <el-input />
-      </el-form-item>
-      <el-form-item
-          label="核心代码"
-          :rules="{
-          trigger: 'blur',
-        }"
-      >
-        <el-input type="textarea" />
-      </el-form-item>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item
-              label="代码仓库"
-              :rules="{
-          required: true,
-          message: 'domain can not be null',
-          trigger: 'blur',
-        }"
-          >
-            <el-input />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item
-              label="类型"
-              :rules="{
-          message: 'domain can not be null',
-          trigger: 'blur',
-        }"
-          >
-            <el-input />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item>
-        <el-row>
-          <el-col :span="20">
-            <el-form-item
-                label="报酬"
-                :rules="{
-                required: true,
-                message: 'Please select a status',
-                trigger: 'blur',
         }"
             >
               <el-select >
@@ -366,25 +369,67 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { useRoute } from 'vue-router';
-import { GetChildSysById } from '@/api/project';
+import { AddChildSystem, GetChildSysById } from '@/api/project';
-import { getToken } from '@/utils/auth'; // 确保导入你的 API 函数
+import { getToken } from '@/utils/auth';
+import { DeleteFilled, Plus, RefreshRight, Search, UploadFilled } from '@element-plus/icons-vue'; // 确保导入你的 API 函数
 
+const listLoading = ref(false);
+const AddDialogVisible = ref(false);
+const DeleteDialogVisible = ref(false);
 const route = useRoute();
-const projectId = ref(route.params.name);
+const projectId =route.query.id
+console.log("projectId", projectId);
 const tableData = ref([]);
 const token = getToken();
-
+const AddFormData = reactive({
-onMounted(async () => {
+  deadLine:'',
-  if (projectId.value) {
+  name: '',
-    try {
+  status: '',
-      const response = await GetChildSysById(projectId.value, token);
+  description: '',
-      tableData.value = response.data;  // 假设响应数据直接可用
+  principalId: '',
-    } catch (error) {
+  projectId:'',
-      console.error("Error fetching data:", error);
+  cycle: '',
-    }
+  workLoad: '',
-  }
 });
+
+//新增子系统
+async function addChildSystem() {
+  console.log("add token:", token);
+  try {
+    const res = await AddChildSystem(AddFormData, token);
+    if (res.data) {
+      listLoading.value = true;
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+      })
+    } else {
+      console.error("未获取到预期数据，响应内容:", res);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+
+function toggleAddDialog() {
+  AddDialogVisible.value = !AddDialogVisible.value;
+}
+
+function CancelAdd() {
+  AddDialogVisible.value = false;
+}
+
+function toggleDeleteDialog(row) {
+  console.log("Delete row:", row);  // 打印行数据，用于调试
+  DeleteDialogVisible.value = !DeleteDialogVisible.value;
+}
+
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
 </script>
 

src/views/personal/project/childmodel/charge.vue

@@ -0,0 +1,440 @@
+<template>
+  <el-card style="max-width: 100vw;margin: 1.5vw;">
+    <template #header>
+      <div class="card-header">
+        <span>子系统1</span>
+      </div>
+    </template>
+    <div style="display: flex; gap: 100px">
+      <el-input
+          style="width: 550px"
+          placeholder="请输入"
+
+      >
+        <template #prepend>名称</template>
+      </el-input>
+      <el-input
+          style="width: 550px"
+          placeholder="请输入"
+      >
+        <template #prepend>状态</template>
+      </el-input>
+      <div>
+        <el-button-group>
+          <el-button type="primary" >
+            <el-icon><Search /></el-icon>
+            查询
+          </el-button>
+          <el-button>
+            <el-icon><RefreshRight /></el-icon>
+            重置
+          </el-button>
+        </el-button-group>
+      </div>
+    </div>
+    <template #footer>Footer content</template>
+  </el-card>
+  <el-card  style="max-width: 100vw;margin: 1.5vw;">
+    <template #header>
+      <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
+        <span>子模块列表</span>
+        <div style="display: flex;">
+          <el-button type="primary" @click="toggleAddDialog()">
+            <el-icon><Plus /></el-icon>
+            新增
+          </el-button>
+          <el-button type="danger">
+            <el-icon><DeleteFilled /></el-icon>
+            删除
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+
+    <!--表格内容-->
+    <el-table :data="tableData" ref="multipleTableRef" style="width: 100%">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="id" label="序号">
+        <template v-slot="{row}">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name"  label="子模块名称">
+        <template v-slot="{row}">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="workLoad" label="工作量">
+        <template v-slot="{row}">
+          <span>{{ row.workLoad}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cycle" label="周期">
+        <template v-slot="{row}">
+          <span>{{ row.cycle }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="principalUser" label="负责人">
+        <template v-slot="{row}">
+          <span>{{ row.principalUser }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="180">
+        <template #default="scope">
+          <el-popover effect="light" width="auto">
+            <template #reference>
+              <el-tag >
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="子模块简介">
+        <template v-slot="{row}">
+          <span>{{ row.description }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deadLine" label="截止时间">
+        <template v-slot="{row}">
+          <span>{{ row.deadLine }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template #default="{ row }">
+          <div style="display: flex; justify-content: flex-start; margin-bottom: 4px;">
+            <el-button link type="primary" size="small" >编辑</el-button>
+            <el-button link type="primary" size="small" @click="toggleDeleteDialog(row)">删除</el-button>
+          </div>
+          <div style="margin-bottom: 4px">
+            <el-button link type="primary" size="small">指定项目负责人</el-button>
+          </div>
+          <div style="margin-bottom: 4px">
+            <el-button link type="primary" size="small">查看详情</el-button>
+          </div>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <div style="display: flex; justify-content: center;margin-top: 2vh">
+      <el-pagination
+          background
+          layout="prev, pager, next"
+      />
+    </div>
+  </el-card>
+
+
+  <!--新增子模块对话框-->
+  <el-dialog v-model="AddDialogVisible" title="新增子模块" width="500">
+    <el-form label-width="auto" style="max-width: 600px">
+      <el-form-item
+          label="子模块名称"
+          :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+      >
+        <el-input v-model="AddFormData.name"/>
+      </el-form-item>
+      <el-row>
+        <el-col :span="15">
+          <el-form-item
+              label="截止时间"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <div class="block">
+              <el-date-picker
+                  type="date"
+                  placeholder="选择"
+                  v-model="AddFormData.deadLine"
+              />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item
+              label="状态"
+              :rules="{
+                required: true,
+                trigger: 'blur',
+        }"
+          >
+            <el-select v-model="AddFormData.status">
+              <el-option value="未开始">未开始</el-option>
+              <el-option value="进行中">进行中</el-option>
+              <el-option value="已完成">已完成</el-option>
+              <el-option value="已暂停">已暂停</el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+              label="模块负责人"
+              :rules="{
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+          >
+            <el-input v-model="AddFormData.principalId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+              label="子系统id"
+              :rules="{
+              required: true,
+              message: 'domain can not be null',
+              trigger: 'blur',
+        }"
+          >
+            <el-input  v-model="AddFormData.projectChildId"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item
+          label="工作量"
+          :rules="{
+          required: true,
+          message: 'domain can not be null',
+          trigger: 'blur',
+    }"
+      >
+        <el-input  v-model="AddFormData.workLoad"/>
+      </el-form-item>
+      <el-form-item
+          label="描述"
+          :rules="{
+          trigger: 'blur',
+        }"
+      >
+        <el-input type="textarea" v-model="AddFormData.description"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="CancelAdd()">取消</el-button>
+        <el-button type="primary" @click="addChildModule()">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+
+  <!--删除子模块对话框-->
+  <el-dialog
+      title="删除子模块"
+      width="450"
+      align-center
+      v-model="DeleteDialogVisible"
+  >
+    <span>确认删除该子模块吗?</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="danger" @click="deleteChildModule()">删除</el-button>
+        <el-button @click="CancelDelete()">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+
+  <!--编辑子模块对话框-->
+  <el-dialog title="编辑子模块" width="500">
+    <el-form label-width="auto" style="max-width: 600px">
+      <el-form-item
+          label="子模块名称"
+          :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+      >
+        <el-input />
+      </el-form-item>
+      <el-form-item
+          label="截止时间"
+          :rules="{
+          required: true,
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+      >
+        <el-input/>
+      </el-form-item>
+      <el-form-item
+          label="描述"
+          :rules="{
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+      >
+        <el-input />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+              label="项目负责人id"
+              :rules="{
+          required: true,
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+          >
+            <el-input />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+              label="系统id"
+              :rules="{
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+          >
+            <el-input />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item
+          label="周期"
+          :rules="{
+          trigger: 'blur',
+        }"
+      >
+        <el-input />
+      </el-form-item>
+      <el-form-item
+          label="工作量"
+          :rules="{
+          trigger: 'blur',
+        }"
+      >
+        <el-input />
+      </el-form-item>
+      <el-form-item>
+        <el-row>
+          <el-col :span="20">
+            <el-form-item
+                label="状态"
+                :rules="{
+                required: true,
+                message: 'Please select a status',
+                trigger: 'blur',
+        }"
+            >
+              <el-select >
+                <el-option value="0">未开始</el-option>
+                <el-option value="2">进行中</el-option>
+                <el-option value="1">已完成</el-option>
+                <el-option value="-1">暂停</el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button >取消</el-button>
+        <el-button type="primary" >
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { ref, onMounted, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { AddChildModule, AddChildSystem, DeleteChildModule, GetChildSysById } from '@/api/project';
+import { getToken } from '@/utils/auth';
+import { DeleteFilled, Plus, RefreshRight, Search, UploadFilled } from '@element-plus/icons-vue'; // 确保导入你的 API 函数
+
+const listLoading = ref(false);
+const AddDialogVisible = ref(false);
+const DeleteDialogVisible = ref(false);
+const route = useRoute();
+const projectId = ref(route.params.projectId);
+const tableData = ref([]);
+const token = getToken();
+const AddFormData = reactive({
+  deadLine:'',
+  name: '',
+  status: '',
+  description: '',
+  principalId: '',
+  projectChildId:'',
+  workLoad: '',
+});
+const deleteData = reactive({
+  id: '',
+})
+
+
+//新增子模块
+async function addChildModule() {
+  console.log("add token:", token);
+  try {
+    const res = await AddChildModule(AddFormData, token);
+    if (res.data) {
+      listLoading.value = true;
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+      })
+    } else {
+      console.error("未获取到预期数据，响应内容:", res);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+
+//删除子模块
+async function deleteChildModule() {
+  console.log("delete token:", token);
+  try {
+    const res = await DeleteChildModule(deleteData.id, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      })
+      DeleteDialogVisible.value = false;
+    } else {
+      console.error("删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function toggleAddDialog() {
+  AddDialogVisible.value = !AddDialogVisible.value;
+}
+
+function CancelAdd() {
+  AddDialogVisible.value = false;
+}
+
+function toggleDeleteDialog(row) {
+  console.log("Delete row:", row);  // 打印行数据，用于调试
+  DeleteDialogVisible.value = !DeleteDialogVisible.value;
+}
+
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
+</script>
+