diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index aeb48d4..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,213 +0,0 @@
-/* eslint-env node */
-module.exports = {
-  'root': true,
-  'env': {
-    'browser': true,
-    'node': true,
-    'es6': true
-  },
-  'parser': 'vue-eslint-parser',
-  'parserOptions': {
-    'parser': '@typescript-eslint/parser',
-    'ecmaVersion': 2020,
-    'sourceType': 'module',
-    'jsxPragma': 'React',
-    'ecmaFeatures': {
-      'jsx': true,
-      'tsx': true
-    }
-  },
-  'plugins': ['@typescript-eslint', 'import'],
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'plugin:@typescript-eslint/recommended',
-    'eslint:recommended'
-  ],
-  'globals': {
-    defineEmits: 'readonly',
-    defineProps: 'readonly',
-    defineExpose: 'readonly',
-    withDefaults: 'readonly',
-    WeixinJSBridge: 'readonly',
-    ElLoading: 'readonly',
-    ElMessage: 'readonly',
-    ElMessageBox: 'readonly',
-    ElNotification: 'readonly'
-  },
-  'rules': {
-    'vue/no-multiple-template-root': 'off',
-    'vue/multi-word-component-names': 'off',
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/multiline-html-element-content-newline': 'off',
-    'vue/no-v-html': 'off',
-    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'always'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': 'off',
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
-  }
-};
diff --git a/components.d.ts b/components.d.ts
index b350e78..eaf85bb 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,11 +13,12 @@ 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']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -47,7 +48,6 @@ 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']
-    ElTableRow: typeof import('element-plus/es')['ElTableRow']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
diff --git a/src/api/project.js b/src/api/project.js
new file mode 100644
index 0000000..fe66bd1
--- /dev/null
+++ b/src/api/project.js
@@ -0,0 +1,233 @@
+import request from '@/utils/request';
+
+function getCurrentTimestamp() {
+  return new Date().getTime();
+}
+const api = 'http://nbxt.oa.x-lf.cn'
+
+//我负责的页面获取项目
+export function GetProject(page, pageSize, token) {
+  return request({
+    url:api + '/project/my/get',
+    method: 'get',
+    params: { page, pageSize },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//新增项目
+export function AddProject(data, token) {
+  return request({
+    url:api + '/project/add',
+    method: 'post',
+    data,
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//删除项目
+export function DeleteProject(id, token) {
+  return request({
+    url:api + '/project/delete',
+    method: 'delete',
+    params:{ id },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//编辑项目
+export function EditProject(id, data, token) {
+  return request({
+    url:api + '/project/edit',
+    method: 'put',
+    params:{ id },
+    data,
+    headers: {
+      'Authorization': 'Bearer ' + token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//根据项目名字模糊查询
+export function GetProjectByName(name, token) {
+  return request({
+    url:api + '/project/get/name',
+    method: 'get',
+    params: { name },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//根据项目id查询子系统
+export function GetChildSysById(projectId, token) {
+  return request({
+    url:api +  "/module/get?projectId=" + projectId ,
+    method: 'get',
+    params: { projectId },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//根据项目名和子系统名查询子模块
+export function  GetChildSysByName(projectName, childName, token) {
+  return request({
+    url:api + '/project/module/get/name',
+    method: 'get',
+    params: { projectName, childName },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//新增子系统
+export function AddChildSystem(data, token) {
+  return request({
+    url:api + '/project/child/add',
+    method: 'post',
+    data,
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//删除子系统
+export function DeleteChildSystem(id, token) {
+  return request({
+    url:api + '/project/child/delete',
+    method: 'delete',
+    params:{ id },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//编辑子系统
+export function EditChildSystem(id, data, token) {
+  return request({
+    url:api + "/project/child/edit",
+    method: 'put',
+    data,
+    params: id,
+    headers: {
+      'Authorization': 'Bearer ' + token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//根据子系统id获取子模块
+export function GetChildModById(sysId, token) {
+  return request({
+    url:api +  "/module/get/min?sysId=" + sysId  ,
+    method: 'get',
+    params: { sysId },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//新增子模块
+export function AddChildModule(data, token) {
+  return request({
+    url:api + '/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:api + '/project/module/delete',
+    method: 'delete',
+    params:{ id },
+    headers: {
+      'Authorization':'Bearer '+ token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//编辑子模块
+export function EditChildModule(id, data, token) {
+  return request({
+    url:api + "/project/module/edit",
+    method: 'put',
+    data,
+    params:{ id },
+    headers: {
+      'Authorization': 'Bearer ' + token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+
+//子模块详情
+export function ModuleDetails(id, token) {
+  return request({
+    url:api + "/project/module/id",
+    method: 'get',
+    params:{ id },
+    headers: {
+      'Authorization': 'Bearer ' + token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
+
+//指定项目负责人
+export function GetAppointOptions( token) {
+  return request({
+    url:api + "/project/pri",
+    method: 'get',
+    headers: {
+      'Authorization': 'Bearer ' + token,
+      'content-type': 'application/json;charset=utf-8',
+      'Timestamp': getCurrentTimestamp()
+    }
+  });
+}
diff --git a/src/api/user.js b/src/api/user.js
index ab887fe..78b5f7e 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,5 +1,4 @@
 import request from '@/utils/request';
-
 const api = 'http://nbxt.oa.x-lf.cn'
 
 function getCurrentTimestamp() {
@@ -7,7 +6,7 @@ function getCurrentTimestamp() {
 }
 export function login(data) {
   return request({
-    url: api+ '/auth/login',
+    url: api + '/auth/login',
     method: 'post',
     data,
     headers: {
@@ -31,7 +30,7 @@ export function getInfo(token) {
 
 export function logout(token) {
   return request({
-    url:  api +'/auth/logout',
+    url:api+ '/auth/logout',
     method: 'get',
     headers: {
       'Authorization':'Bearer '+token,
diff --git a/src/router/modules/manage.ts b/src/router/modules/manage.ts
index 7dd06da..ed6a8f6 100644
--- a/src/router/modules/manage.ts
+++ b/src/router/modules/manage.ts
@@ -5,8 +5,8 @@ const Layout = () => import('@/layout/index.vue')
 const manageRouter = {
     path: '/myslef',
     component: Layout,
-    
-    
+
+
     meta: {
       alwaysShow: false, // 始终显示根菜单
       title: '个人项目',
@@ -14,39 +14,59 @@ const manageRouter = {
       roles: ['admin', 'teacher_user']
     },
     children: [
+      //我负责的以及子页面
       {
         path: 'charge',
         component: () => import('@/views/personal/project/charge.vue'),
         name: 'Charge',
         meta: { title: '我负责的', icon: 'user', affix: true }
       },
+      {
+        path: 'childSysCharge',
+        component: () => import('@/views/personal/project/childSystem/charge.vue'),
+        name: 'ChildSysCharge',
+        meta: { title: '我负责的 / 子系统', breadcrumb: true , hidden: true  },
+
+      },
+      {
+        path: 'childModCharge',
+        component: () => import('@/views/personal/project/childmodel/charge.vue'),
+        name: 'ChildModCharge',
+        meta: { title: '我负责的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }
+      },
+      {
+        path:'chargeDetail',
+        component: () => import('@/views/personal/project/detail/charge.vue'),
+        name: 'ChargeDetail',
+        meta: { title: '我负责的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true  }
+      },
+
       //我管理的以及子页面
-     
       {
         path: 'manage',
         component: () => import('@/views/personal/project/manage.vue'),
         name: 'Manage',
         meta: { title: '我管理的', icon: 'user', affix: true,  },
-        
+
       },
       {
         path: 'childSysManage',
         component: () => import('@/views/personal/project/childSystem/manage.vue'),
         name: 'ChildSysManage',
-        meta: { title: '我管理的 / 子系统', breadcrumb: true , hidden: true  },  
-       
+        meta: { title: '我管理的 / 子系统', breadcrumb: true , hidden: true  },
+
       },
       {
         path: 'childModManage',
-        component: () => import('@/views/personal/project/childModel/manage.vue'),
+        component: () => import('@/views/personal/project/childmodel/manage.vue'),
         name: 'ChildModManage',
-        meta: { title: '我管理的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }  
+        meta: { title: '我管理的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }
       },
       {
         path:'manageDetail',
         component:()=>import('@/views/personal/project/detail/manage.vue'),
         name: 'ManageDetail',
-        meta: { title: '我管理的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true  }  
+        meta: { title: '我管理的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true  }
       },
       //我参与的以及子界面
       {
@@ -59,23 +79,23 @@ const manageRouter = {
         path: 'childSysParticipate',
         component: () => import('@/views/personal/project/childSystem/participate.vue'),
         name: 'ChildSysParticipate',
-        meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true  ,affix:false},  
-       
+        meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true  ,affix:false},
+
       },
       {
         path: 'childModParticipate',
-        component: () => import('@/views/personal/project/childModel/participate.vue'),
+        component: () => import('@/views/personal/project/childmodel/participate.vue'),
         name: 'ChildModParticipate',
-        meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }  
+        meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }
       },
       {
         path: 'participateDetail',
         component:()=>import('@/views/personal/project/detail/participate.vue'),
         name: 'ParticipateDetail',
-        meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true  }  
+        meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true  }
       }
     ]
   }
 
 
-export default manageRouter
\ No newline at end of file
+export default manageRouter
diff --git a/src/views/personal/project/charge.vue b/src/views/personal/project/charge.vue
index 5cd477b..93fbd8e 100644
--- a/src/views/personal/project/charge.vue
+++ b/src/views/personal/project/charge.vue
@@ -1,3 +1,683 @@
 <template>
-    hi
-</template>
\ No newline at end of file
+  <div>
+    <!--顶部卡片-->
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header>
+        <div class="card-header">
+          <span>我负责的</span>
+        </div>
+      </template>
+      <div style="display: flex; gap: 100px">
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+            v-model="searchData.name"
+        >
+          <template #prepend>名称</template>
+        </el-input>
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+        >
+          <template #prepend>状态</template>
+        </el-input>
+        <div>
+          <el-button-group>
+            <el-button type="primary" @click="SearchProjectByName()">
+              <el-icon><Search /></el-icon>
+              查询
+            </el-button>
+            <el-button  @click="reset()">
+              <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" @click="toggleMulDeleteDialog()">
+              <el-icon><DeleteFilled /></el-icon>
+              删除
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!--表格内容-->
+      <el-table :data="tableData" ref="multipleTableRef" style="width: 100%"  @selection-change="handleSelectionChange">
+        <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 v-slot="{row}">
+            <span>{{ row.status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="tags" label="标签">
+          <template #default="{ row }">
+            <el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column property="isFinish" label="文档（点击下载）">
+          <template #default="{ row }">
+            <template v-if="row.files && row.files.URI">
+              <a :href="row.files.URI" target="_blank" style="color: deepskyblue">
+                下载文档
+              </a>
+            </template>
+            <template v-else>
+              无
+            </template>
+          </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" @click="toggleEditDialog(row)">编辑</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" @click="toChildSystem(row.id)">查看详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex; justify-content: center;margin-top: 2vh">
+        <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            layout="prev, pager, next"
+            background
+            style="display: flex; justify-content: center; margin-top: 20px;">
+        </el-pagination>
+
+      </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-form-item
+            label="周期"
+            :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="AddFormData.cycle"/>
+        </el-form-item>
+        <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="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <div class="block">
+            <el-date-picker
+                v-model="AddFormData.deadLine"
+                type="date"
+                placeholder="Pick a day"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item
+            label="项目简介"
+            :rules="{
+            trigger: 'blur',
+          }"
+        >
+          <el-input type="textarea" v-model="AddFormData.description" />
+        </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 v-model="AddFormData.principalId" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+                label="标签"
+                :rules="{
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+            >
+              <el-input v-model="AddFormData.tags" />
+            </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 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-col :span="4">
+              <el-form-item>
+                <el-upload
+                    v-model="AddFormData.fakeFile"
+                    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 @click="CancelAdd()">取消</el-button>
+          <el-button type="primary" @click="addProject()">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--删除多个项目对话框-->
+    <el-dialog
+        title="删除项目"
+        width="450"
+        align-center
+        v-model="DeleteMulDialogVisible"
+    >
+      <span>确认删除该项目吗?</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="danger" @click="deleteMultipleProjects()">删除</el-button>
+          <el-button @click="CancelMulDelete()">取消</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="deleteProject()">删除</el-button>
+          <el-button @click="CancelDelete()">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--编辑项目对话框-->
+    <el-dialog v-model="EditDialogVisible" 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="EditFormData.name"/>
+        </el-form-item>
+        <el-form-item
+            label="项目简介"
+            :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="EditFormData.description"/>
+        </el-form-item>
+        <el-form-item
+            label="项目Id"
+            :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="EditFormData.projectId"/>
+        </el-form-item>
+        <el-form-item
+            label="标签"
+            :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="EditFormData.tags"/>
+        </el-form-item>
+        <el-form-item
+            label="状态"
+            :rules="{
+                  required: true,
+                  message: 'Please select a status',
+                  trigger: 'blur',
+          }"
+        >
+          <el-select v-model="EditFormData.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-form-item
+            label="工作量"
+            :rules="{
+          required: true,
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+        >
+          <el-input v-model="EditFormData.workLoad"/>
+        </el-form-item>
+        <el-form-item
+            label="周期"
+            :rules="{
+          required: true,
+          message: 'domain can not be null',
+          trigger: 'blur',
+        }"
+        >
+          <el-input v-model="EditFormData.cycle"/>
+        </el-form-item>
+        <el-form-item
+            label="截止时间"
+            :rules="{
+            required: true,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <div class="block">
+            <el-date-picker
+                v-model="EditFormData.deadLine"
+                type="date"
+                placeholder="Pick a day"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="CancelEdit()">取消</el-button>
+          <el-button type="primary" @click="editProject()">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { Plus, UploadFilled, DeleteFilled, RefreshRight, Search } from '@element-plus/icons-vue';
+import { AddProject, DeleteProject, EditProject, GetAppointOptions, GetProject, GetProjectByName } from '@/api/project';
+import { getToken } from '@/utils/auth';
+
+import { ElButton, ElMessage, ElTableColumn, ElTag } from 'element-plus';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const AddDialogVisible = ref(false);
+const DeleteDialogVisible = ref(false);
+const DeleteMulDialogVisible = ref(false);
+const EditDialogVisible = ref(false);
+const tableData = ref([]);
+const listLoading = ref(false);
+const token = getToken();
+const page = ref('');
+const currentPage = ref(1);
+const pageSize = ref(10);  // 你可以根据需要设置默认的页面大小
+const total = ref(0);
+const editId = reactive({ id:'', })
+const searchData = reactive({ name:'', });
+const deleteDatas = reactive({ ids: '' });
+const deleteData = reactive({ id: '' });
+const AddFormData = reactive({
+  name: '',
+  description: '',
+  tags: '',
+  deadLine: '',
+  workLoad: '',
+  principalId: '',
+  cycle: '',
+  status: '',
+  fakeFile: {
+    name: "element-plus-logo.svg",
+    url: 'https://element-plus.org/images/element-plus-logo.svg'
+  },
+});
+
+const EditFormData = reactive({
+  name:'',
+  description:'',
+  tags:'',
+  principalId:'',
+  projectId:'',
+  files:'',
+  cycle:'',
+  status:'',
+  deadLine:'',
+  workLoad:'',
+})
+
+
+// 定义跳转到子系统的函数
+const toChildSystem = (projectId) => {
+  router.push({ name: 'ChildSysCharge', query: { projectId: projectId } });//目前只有4有数据
+};
+
+// 定义解析数据的函数
+const parseData = (data) => {
+  const files = JSON.parse(data.files);
+  const tags = JSON.parse(data.tags);
+  return {
+    id: data.id,
+    cycle: data.cycle,
+    name: data.name,
+    description: data.description,
+    workLoad: data.workLoad,
+    status: data.status,
+    deadLine: data.deadLine,
+    tags: tags,
+    files: files,
+    principalUser: data.principalUser
+  };
+};
+
+
+//项目列表
+async function getList() {
+  console.log("use token:", token);
+  listLoading.value = true;
+  try {
+    // 确保这里传递了 page 和 pageSize 参数
+    const response = await GetProject(page.value, pageSize.value, token);
+    if (response.data && response.data.list) {
+      tableData.value = response.data.list.map(item => parseData(item));
+      total.value = response.data.total;  // 设置总项目数
+    } else {
+      console.error("未获取到预期数据，响应内容:", response);
+      tableData.value = [];
+      total.value = 0;
+    }
+  } catch (error) {
+    console.error('请求失败:', error);
+    tableData.value = [];
+    total.value = 0;
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function handleCurrentChange(newPage) {
+  page.value = newPage;
+  getList();  // 重新获取当前页的数据
+}
+
+
+//新增项目
+function toggleAddDialog() {
+  AddDialogVisible.value = !AddDialogVisible.value;
+}
+
+async function addProject() {
+  try {
+    const res = await AddProject(AddFormData, token);
+    if (res.code===200) {
+      listLoading.value = true;
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+      })
+      getList();
+    } else {
+      console.error("未获取到预期数据，响应内容:", res);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+function CancelAdd() {
+  AddDialogVisible.value = false;
+}
+
+
+//删除多个项目
+function handleSelectionChange(selection) {
+  deleteDatas.ids = selection.map(item => item.id);
+}
+
+async function deleteMultipleProjects() {
+  try {
+    const res = await DeleteProject(deleteDatas.ids, token);
+    console.log("delete tokens:", token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      DeleteMulDialogVisible.value = false;
+      getList();
+    } else {
+      console.error("删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function toggleMulDeleteDialog() {
+  if (deleteDatas.ids.length === 0) {
+    ElMessage({
+      message: '请选择要删除的项目',
+      type: 'warning',
+      duration: 2500
+    });
+  } else {
+    DeleteMulDialogVisible.value = true;
+  }
+}
+
+function CancelMulDelete() {
+  DeleteDialogVisible.value = false;
+}
+
+
+
+//删除单个项目
+function toggleDeleteDialog(row) {
+  deleteData.id = row.id;
+  DeleteDialogVisible.value = true;
+}
+
+async function deleteProject() {
+  try {
+    const res = await DeleteProject(deleteData.id, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      console.log("删除成功");
+      DeleteDialogVisible.value = false;
+      getList();
+    } else {
+      console.error("删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+//取消删除
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
+
+
+//编辑项目
+function toggleEditDialog(row) {
+  console.log("Editing row:", row);  // 打印行数据，用于调试
+  // 假设 EditFormData 是用于存储编辑表单数据的响应式对象
+  EditFormData.name = row.name;
+  EditFormData.description = row.description;
+  EditFormData.tags = row.tags.toString();
+  EditFormData.files = row.files;
+  EditFormData.cycle = row.cycle;
+  EditFormData.workLoad = row.workLoad;
+  EditFormData.status = row.status;
+  editId.id = row.id
+  EditFormData.principalId = row.principalId;
+  EditFormData.projectId = row.id;
+  EditDialogVisible.value = true;  // 显示编辑对话框
+}
+
+
+function CancelEdit() {
+  EditDialogVisible.value = false;
+}
+
+
+async function editProject() {
+  console.log("edit token:", token);
+  try {
+    const response = await EditProject(editId.id, EditFormData, token);
+    if (response.code===200) {
+      getList();
+    } else {
+      console.error("未获取到预期数据，响应内容:", response);
+    }
+  } finally {
+    listLoading.value = false;
+    EditDialogVisible.value = false;
+  }
+}
+
+//查询项目
+async function SearchProjectByName() {
+  console.log("search token:", token);
+  try {
+    const response = await GetProjectByName(searchData.name, token);
+    if (response.data) {
+      tableData.value = response.data;
+    } else {
+      console.error("未获取到预期数据，响应内容:", response);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function reset() {
+  searchData.name = '';
+  getList();
+}
+
+onMounted(async () => {
+  await getList();  // 确保数据加载完成
+  await getAppointOptions();
+});
+
+</script>
diff --git a/src/views/personal/project/childSystem/charge.vue b/src/views/personal/project/childSystem/charge.vue
new file mode 100644
index 0000000..4cd2c88
--- /dev/null
+++ b/src/views/personal/project/childSystem/charge.vue
@@ -0,0 +1,689 @@
+<template>
+  <div>
+    <!--顶部卡片-->
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header>
+        <div class="card-header">
+          <span>子系统{{projectId}}</span>
+        </div>
+      </template>
+      <div style="display: flex; gap: 100px">
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+            v-model="searchData.name"
+
+        >
+          <template #prepend>名称</template>
+        </el-input>
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+        >
+          <template #prepend>状态</template>
+        </el-input>
+        <div>
+          <el-button-group>
+            <el-button type="primary" @click="SearchSystemByName()">
+              <el-icon><Search /></el-icon>
+              查询
+            </el-button>
+            <el-button @click="reset()">
+              <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" @click="toggleMulDeleteDialog()">
+              <el-icon><DeleteFilled /></el-icon>
+              删除
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!--表格内容-->
+      <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange">
+        <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="principalName" label="负责人">
+          <template v-slot="{row}">
+            <span>{{ row.principalName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template v-slot="{row}">
+            <span>{{ row.status }}</span>
+          </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" @click="toggleEditDialog(row)">编辑</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" @click="toggleAppointDialog(row)">指定子系统负责人</el-button>
+            </div>
+            <div style="margin-bottom: 4px">
+              <el-button link type="primary" size="small" @click="toChildModule(row.id)">查看详情</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,
+                message: 'domain can not be null',
+                trigger: 'blur',
+          }"
+            >
+              <el-input  v-model="AddFormData.cycle"/>
+            </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="{
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+            >
+              <el-input  v-model="AddFormData.projectId" disabled/>
+            </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,
+                  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-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="addChildSystem() ">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--删除多个子系统对话框-->
+    <el-dialog
+        title="删除子系统"
+        width="450"
+        align-center
+        v-model="DeleteMulDialogVisible"
+    >
+      <span>确认删除该项目吗?</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="danger" @click="deleteMulChildSystem()">删除</el-button>
+          <el-button @click="CancelMulDelete()">取消</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="deleteChildSystem()">删除</el-button>
+          <el-button @click="CancelDelete()">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--编辑子系统对话框-->
+    <el-dialog v-model="EditDialogVisible" 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="EditFormData.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="EditFormData.deadLine"
+                />
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="9">
+            <el-form-item
+                label="周期"
+                :rules="{
+         required: true,
+        trigger: 'blur',
+      }"
+            >
+              <el-input v-model="EditFormData.cycle"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                  label="工作量"
+                  :rules="{
+            required: true,
+            trigger: 'blur',
+          }"
+              >
+                <el-input v-model="EditFormData.workLoad"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                  label="状态"
+                  :rules="{
+                  required: true,
+                  message: 'Please select a status',
+                  trigger: 'blur',
+          }"
+              >
+                <el-select v-model="EditFormData.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-form-item>
+        <el-form-item
+            label="描述"
+            :rules="{
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input type="textarea" v-model="EditFormData.description"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="CancelEdit()">取消</el-button>
+          <el-button type="primary" @click="editChildSystem()">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--指定子系统负责人对话框-->
+    <el-dialog v-model="AppointDialogVisible" title="指定子系统负责人">
+      <el-table :data="[currentRowData]" style="width: 100%">
+        <el-table-column prop="id" label="序号"></el-table-column>
+        <el-table-column prop="principalName" label="子系统负责人"></el-table-column>
+        <el-table-column label="选择新负责人">
+          <el-select v-model="selectedPrincipal" placeholder="请选择子系统负责人">
+            <el-option v-for="option in appointOptions.option" :value="option.username">
+              {{option.username}}
+            </el-option>
+          </el-select>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="CancelAppoint()">取消</el-button>
+          <el-button type="primary" @click="confirmAppointment()">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  AddChildSystem,
+  DeleteChildSystem,
+  DeleteProject,
+  EditChildSystem, EditProject, GetAppointOptions,
+  GetChildSysById,
+  GetProjectByName
+} from '@/api/project';
+import { getToken } from '@/utils/auth';
+import { DeleteFilled, Plus, RefreshRight, Search } from '@element-plus/icons-vue';
+import router from '@/router';
+import { ElButton, ElMessage, ElTableColumn } from 'element-plus'; // 确保导入你的 API 函数
+
+const listLoading = ref(false);
+const AddDialogVisible = ref(false);
+const DeleteDialogVisible = ref(false);
+const DeleteMulDialogVisible = ref(false);
+const EditDialogVisible = ref(false);
+const AppointDialogVisible = ref(false);
+const tableData = ref([]);
+const token = getToken();
+const searchData = reactive({ name:'', });
+const editId = reactive({ id:'', })
+const deleteDatas = reactive({ ids: '' });
+const deleteData = reactive({ id: '' });
+const currentRowData = ref([]);
+let appointOptions = reactive({option:''});
+const selectedPrincipal = ref('');
+
+
+//获取项目id
+const route = useRoute();
+const projectId = route.query.projectId
+
+const AddFormData = reactive({
+  deadLine:'',
+  name: '',
+  status: '',
+  description: '',
+  principalId: '',
+  projectId:projectId,
+  cycle: '',
+  workLoad: '',
+});
+
+const EditFormData = reactive({
+  name:'',
+  description:'',
+  principalId:'',
+  workLoad:'',
+  status:'',
+  deadLine:'',
+  cycle:'',
+})
+
+//跳转到子模块
+const toChildModule = (systemId) => {
+  router.push({ name: 'ChildModCharge', query: { systemId: systemId } });//目前只有4有数据
+};
+
+
+//根据项目id获取子系统
+  async function getChildSysById(){
+  if (projectId) {
+    try {
+      const response = await  GetChildSysById(projectId, token);
+      tableData.value = response.data;
+    } catch (error) {
+      console.error('获取子系统数据失败:', error);
+    }
+  }
+};
+
+//查询子系统
+async function SearchSystemByName() {
+  try {
+    const response = await GetProjectByName(searchData.name, token);
+    if (response.data) {
+      tableData.value = response.data;
+    } else {
+      console.error("未获取到预期数据，响应内容:", response);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+
+
+
+//新增子系统
+function toggleAddDialog() {
+  AddFormData.projectId = projectId;
+  AddDialogVisible.value = !AddDialogVisible.value;
+}
+
+async function addChildSystem() {
+  try {
+    const res = await AddChildSystem(AddFormData, token);
+    if (res.code===200) {
+      listLoading.value = true;
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+      })
+      getChildSysById();
+    } else {
+      console.error("未获取到预期数据，响应内容:", res);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+function CancelAdd() {
+  AddDialogVisible.value = false;
+}
+
+//删除多个子系统
+function handleSelectionChange(selection) {
+  deleteDatas.ids = selection.map(item => item.id);
+}
+
+function toggleMulDeleteDialog() {
+  if (deleteDatas.ids.length === 0) {
+    ElMessage({
+      message: '请选择要删除的子系统',
+      type: 'warning',
+      duration: 2500
+    });
+  } else {
+    DeleteMulDialogVisible.value = true;
+  }
+}
+
+async function deleteMulChildSystem() {
+  try {
+    const res = await DeleteChildSystem(deleteDatas.ids, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      console.log("多个子系统删除成功");
+      DeleteMulDialogVisible.value = false;
+      getChildSysById();
+    } else {
+      console.error("'多个子系统删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function CancelMulDelete() {
+  DeleteMulDialogVisible.value = false;
+}
+
+//删除单个子系统
+function toggleDeleteDialog(row) {
+  deleteData.id = row.id;
+  DeleteDialogVisible.value = true;
+}
+
+
+async function deleteChildSystem() {
+  try {
+    const res = await DeleteChildSystem(deleteData.id, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      console.log("单个子系统删除成功");
+      DeleteDialogVisible.value = false;
+      getChildSysById();
+    } else {
+      console.error("单个子系统删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
+
+
+//编辑子系统
+function toggleEditDialog(row) {
+  EditFormData.name = row.name;
+  EditFormData.description = row.description;
+  EditFormData.status = row.status;
+  EditFormData.workLoad = row.workLoad;
+  EditFormData.deadLine = row.deadLine;
+  EditFormData.cycle = row.cycle;
+  editId.id = row.id
+  EditDialogVisible.value = true;  // 显示编辑对话框
+}
+
+function CancelEdit() {
+  EditDialogVisible.value = false;
+}
+
+async function editChildSystem() {
+  try {
+    const response = await EditChildSystem(editId, EditFormData, token);
+    if (response.code === 200) {
+      EditDialogVisible.value = false;
+      listLoading.value = true;
+      getChildSysById();
+      ElMessage({
+        message: '编辑成功',
+        type: 'success',
+      });
+    } else {
+      console.error("编辑失败，响应内容:", response);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+function reset() {
+  searchData.name = '';
+  getChildSysById();
+}
+
+//指定子系统负责人
+async function getAppointOptions() {
+  try {
+    const response = await GetAppointOptions(token);
+    if (response.code === 200) {
+      appointOptions.option = response.data;
+    } else {
+      console.error("无数据");
+    }
+  } catch (error) {
+    console.error('Error fetching status options:', error);
+  }
+};
+
+function toggleAppointDialog(row) {
+  currentRowData.value = row;
+  AppointDialogVisible.value = true;
+  editId.id = row.id
+}
+
+//TODO 指定负责人id，我写死了，你替换为选择的负责人就行了
+const principalUser = reactive({
+  principalId: selectedPrincipal.value
+})
+
+async function confirmAppointment() {
+  console.log("指定新负责人:", selectedPrincipal.value);
+  //TODO 项目id，我也写死了。你自行修改
+  //editId.id = '27'
+  const response = await EditChildSystem(editId, principalUser, token);
+  console.log("指定负责人Result:", response);
+
+  if (response.code===200){
+    AppointDialogVisible.value = false;
+    ElMessage({
+      message: '子系统负责人更新成功',
+      type: 'success',
+      duration: 3000
+    });
+    getChildSysById();
+  } else {
+    ElMessage({
+      message:'子系统负责人更新失败',
+      type: 'warning',
+      duration: 3000
+    })
+  }
+}
+
+
+function CancelAppoint() {
+  AppointDialogVisible.value = false;
+}
+
+onMounted(async () => {
+  await  getChildSysById();
+  await getAppointOptions();
+});
+
+</script>
+
diff --git a/src/views/personal/project/childmodel/charge.vue b/src/views/personal/project/childmodel/charge.vue
new file mode 100644
index 0000000..9b589c9
--- /dev/null
+++ b/src/views/personal/project/childmodel/charge.vue
@@ -0,0 +1,685 @@
+<template>
+  <div>
+    <!--顶部卡片-->
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header>
+        <div class="card-header">
+          <span>子模块{{systemId}}</span>
+        </div>
+      </template>
+      <div style="display: flex; gap: 100px">
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+            v-model="searchData.name"
+        >
+          <template #prepend>名称</template>
+        </el-input>
+        <el-input
+            style="width: 550px"
+            placeholder="请输入"
+        >
+          <template #prepend>状态</template>
+        </el-input>
+        <div>
+          <el-button-group>
+            <el-button type="primary" @click="SearchModuleByName()">
+              <el-icon><Search /></el-icon>
+              查询
+            </el-button>
+            <el-button @click="reset()">
+              <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" @click="toggleMulDeleteDialog()">
+              <el-icon><DeleteFilled /></el-icon>
+              删除
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+
+      <!--表格内容-->
+      <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" @selection-change="handleSelectionChange">
+        <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 prop="status" label="状态">
+          <template v-slot="{row}">
+            <span>{{ row.status }}</span>
+          </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" @click="toggleEditDialog(row)">编辑</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" @click="toggleAppointDialog(row)">指定子模块负责人</el-button>
+            </div>
+            <div style="margin-bottom: 4px">
+              <el-button link type="primary" size="small" @click="toModuleDetail(row.id)">查看详情</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"
+        />
+        <el-pagination larger background layout="prev, pager, next" @current-change="handleCurrentChange"
+                       :current-page="currentPage" :page-size="pageSize" :total="total"
+                       style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+      </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,
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+            >
+              <el-input v-model="AddFormData.cycle"/>
+            </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.projectChildId" disabled/>
+            </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,
+                  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-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="DeleteMulDialogVisible"
+    >
+      <span>确认删除该项目吗?</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="danger" @click="deleteMulChildModule()">删除</el-button>
+          <el-button @click="CancelMulDelete()">取消</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 v-model="EditDialogVisible" 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="EditFormData.name"/>
+        </el-form-item>
+        <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="EditFormData.deadLine"
+            />
+          </div>
+        </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 v-model="EditFormData.principalId"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item
+            label="周期"
+            :rules="{
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="EditFormData.cycle"/>
+        </el-form-item>
+        <el-form-item
+            label="工作量"
+            :rules="{
+            trigger: 'blur',
+          }"
+        >
+          <el-input v-model="EditFormData.workLoad"/>
+        </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 v-model="EditFormData.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-form-item>
+        <el-form-item
+            label="描述"
+            :rules="{
+            message: 'domain can not be null',
+            trigger: 'blur',
+          }"
+        >
+          <el-input type="textarea" v-model="EditFormData.description"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="CancelEdit()">取消</el-button>
+          <el-button type="primary" @click="editChildModule()">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--指定子模块负责人对话框-->
+    <el-dialog v-model="AppointDialogVisible" title="指定子模块负责人">
+      <el-table :data="[currentRowData]" style="width: 100%">
+        <el-table-column prop="id" label="序号"></el-table-column>
+        <el-table-column prop="principalUser" label="子模块负责人"></el-table-column>
+        <el-table-column label="选择新负责人">
+          <el-select v-model="selectedPrincipal" placeholder="请选择子模块负责人">
+            <el-option v-for="option in appointOptions.option" :value="option.username">
+              {{option.username}}
+            </el-option>
+          </el-select>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="CancelAppoint()">取消</el-button>
+          <el-button type="primary" @click="confirmAppointment()">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  AddChildModule, DeleteChildModule,
+  EditChildModule, GetAppointOptions,
+  GetChildModById, GetProjectByName
+} from '@/api/project';
+import { getToken } from '@/utils/auth';
+import { DeleteFilled, Plus, RefreshRight, Search } from '@element-plus/icons-vue';
+import { ElButton, ElTableColumn } from 'element-plus'; // 确保导入你的 API 函数
+
+const listLoading = ref(false);
+const AddDialogVisible = ref(false);
+const DeleteDialogVisible = ref(false);
+const DeleteMulDialogVisible = ref(false);
+const EditDialogVisible = ref(false);
+const AppointDialogVisible = ref(false);
+const tableData = ref([]);
+const token = getToken();
+const editId = reactive({ id:'', })
+const searchData = reactive({ name:'', });
+const deleteDatas = reactive({ ids: '' });
+const deleteData = reactive({ id: '' });
+const currentRowData = ref([]);
+let appointOptions = reactive({option:''});
+const selectedPrincipal = ref('');
+
+
+//获取子系统id
+const route = useRoute();
+const systemId = route.query.systemId
+
+const AddFormData = reactive({
+  deadLine:'',
+  name: '',
+  status: '',
+  description: '',
+  principalId: '',
+  projectChildId:systemId,
+  workLoad: '',
+  cycle:'',
+});
+
+const EditFormData = reactive({
+  name:'',
+  description:'',
+  principalId:'',
+  workLoad:'',
+  status:'',
+  deadLine:'',
+  cycle:'',
+})
+
+
+//跳转到子模块详情
+const router = useRouter()
+const toModuleDetail = (moduleId) => {
+  router.push({ name: 'ChargeDetail', query: { moduleId:moduleId } });
+};
+
+//根据项目id获取子模块
+async function getChildModuleById(){
+  if (systemId) {
+    try {
+      const response = await GetChildModById(systemId, token);
+      tableData.value = response.data;
+    } catch (error) {
+      console.error('获取子系统数据失败:', error);
+    }
+  }
+};
+
+//查询子模块
+async function SearchModuleByName() {
+  try {
+    const response = await GetProjectByName(searchData.name, token);
+    if (response.data) {
+      ElMessage({
+        message: '查询成功',
+        type: 'success',
+      })
+      tableData.value = response.data;
+    } else {
+      ElMessage({
+        message: '查询失败',
+        type: 'warning',
+      })
+      console.error("查询失败:", response);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+//新增子模块
+function toggleAddDialog() {
+  AddFormData.projectChildId = systemId;
+  AddDialogVisible.value = !AddDialogVisible.value;
+}
+
+async function addChildModule() {
+  console.log("add token:", token);
+  try {
+    const res = await AddChildModule(AddFormData, token);
+    if (res.code === 200) {
+      listLoading.value = true;
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+      })
+      getChildModuleById();
+    } else {
+      console.error("未获取到预期数据，响应内容:", res);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+//取消新增
+function CancelAdd() {
+  AddDialogVisible.value = false;
+}
+
+
+//删除多个子模块
+function handleSelectionChange(selection) {
+  deleteDatas.ids = selection.map(item => item.id);
+}
+
+function toggleMulDeleteDialog() {
+  if (deleteDatas.ids.length === 0) {
+    ElMessage({
+      message: '请选择要删除的子模块',
+      type: 'warning',
+      duration: 2500
+    });
+  } else {
+    DeleteMulDialogVisible.value = true;
+  }
+}
+
+async function deleteMulChildModule() {
+  try {
+    const res = await DeleteChildModule(deleteDatas.ids, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      console.log("多个子模块删除成功");
+      DeleteMulDialogVisible.value = false;
+      getChildModuleById();
+    } else {
+      console.error("'多个子模块删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+//取消多个删除
+function CancelMulDelete() {
+  DeleteMulDialogVisible.value = false;
+}
+
+//删除单个子模块
+function toggleDeleteDialog(row) {
+  deleteData.id = row.id;
+  DeleteDialogVisible.value = true;
+}
+
+async function deleteChildModule() {
+  try {
+    const res = await DeleteChildModule(deleteData.id, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      });
+      console.log("单个子模块删除成功");
+      DeleteDialogVisible.value = false;
+      getChildModuleById();
+    } else {
+      console.error("单个子模块删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+//取消单个删除
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
+
+//编辑子模块
+function toggleEditDialog(row) {
+  EditFormData.name = row.name;
+  EditFormData.description = row.description;
+  EditFormData.status = row.status;
+  EditFormData.workLoad = row.workLoad;
+  EditFormData.deadLine = row.deadLine;
+  EditFormData.cycle = row.cycle;
+  editId.id = row.id
+  EditDialogVisible.value = true;  // 显示编辑对话框
+}
+
+async function editChildModule() {
+  try {
+    const response = await EditChildModule(editId, EditFormData, token);
+    if (response.code === 200) {
+      listLoading.value = true;
+      ElMessage({
+        message: '修改成功',
+        type: 'success',
+      })
+      getChildModuleById();
+    } else {
+      console.error("修改失败，响应内容:", response);
+    }
+  } finally {
+    listLoading.value = false;
+    AddDialogVisible.value = false;
+  }
+}
+
+//取消编辑
+function CancelEdit() {
+  EditDialogVisible.value = false;
+}
+
+
+function reset() {
+  searchData.name = '';
+  getChildModuleById();
+}
+
+//指定子模块负责人
+async function getAppointOptions() {
+  try {
+    const response = await GetAppointOptions(token);
+    if (response.code === 200) {
+      appointOptions.option = response.data;
+    } else {
+      console.error("无数据");
+    }
+  } catch (error) {
+    console.error('Error fetching status options:', error);
+  }
+};
+
+function toggleAppointDialog(row) {
+  currentRowData.value = row;
+  AppointDialogVisible.value = true;
+}
+
+
+function confirmAppointment() {
+  console.log("指定新负责人:", selectedPrincipal.value);
+  AppointDialogVisible.value = false;
+  ElMessage({
+    message: '子模块负责人更新成功',
+    type: 'success',
+    duration: 3000
+  });
+  getChildModuleById();
+}
+
+function CancelAppoint() {
+  AppointDialogVisible.value = false;
+}
+
+onMounted(async () => {
+  await getChildModuleById ();
+  await getAppointOptions();
+});
+
+</script>
+
diff --git a/src/views/personal/project/detail/charge.vue b/src/views/personal/project/detail/charge.vue
new file mode 100644
index 0000000..1e513b8
--- /dev/null
+++ b/src/views/personal/project/detail/charge.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>子模块{{moduleId}}详情</span>
+        </div>
+      </template>
+      <!--子模块详情-->
+      <div style="display: flex; justify-content: center">
+        <el-form :model="formData" label-width="auto" style="max-width: 600px">
+          <el-form-item label="01.模块名称">
+            <el-input :disabled="!isEditable" v-model="formData.name"/>
+          </el-form-item>
+          <el-form-item label="02.模块周期">
+            <el-input :disabled="!isEditable" v-model="formData.cycle"/>
+          </el-form-item>
+          <el-form-item label="03.工作量">
+            <el-input :disabled="!isEditable" v-model="formData.workLoad"/>
+          </el-form-item>
+          <el-form-item label="03.负责人">
+            <el-input :disabled="!isEditable" v-model="formData.principalUser"/>
+          </el-form-item>
+          <el-form-item label="05.状态">
+            <el-select :disabled="!isEditable" v-model="formData.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-form-item
+              label="06.截止时间"
+          >
+            <div class="block">
+              <el-date-picker
+                  type="date"
+                  v-model="formData.deadLine"
+                  :disabled="!isEditable"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item label="07.简介">
+            <el-input :disabled="!isEditable" type="textarea" v-model="formData.description"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="enableEditing">{{ isEditable ? '取消编辑' : '编辑' }}</el-button>
+            <el-button @click="toggleDeleteDialog()">删除</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--删除子模块对话框-->
+      <el-dialog
+          title="删除子模块"
+          width="450"
+          align-center    c
+          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-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useRoute,  useRouter } from 'vue-router';
+import { getToken } from '@/utils/auth';
+import { DeleteChildModule,  ModuleDetails } from '@/api/project';
+
+const listLoading = ref(false);
+const token = getToken();
+const DeleteDialogVisible = ref(false);
+const isEditable = ref(false);
+const router = useRouter();
+
+//获取子模块Id
+const route = useRoute();
+const moduleId = route.query.moduleId;
+
+const formData = reactive({
+  name: '',
+  cycle: '',
+  workLoad: '',
+  principalUser: '',
+  status: '',
+  deadLine: '',
+  description: ''
+});
+
+async function moduleDetails() {
+  listLoading.value = true;
+  try {
+    const response = await ModuleDetails(moduleId, token);
+    console.log("API Response:", response);
+    if (response.data) {
+      formData.name = response.data.name !== undefined ? response.data.name : formData.name;
+      formData.cycle = response.data.cycle !== undefined ? response.data.cycle : formData.cycle;
+      formData.workLoad = response.data.workLoad !== undefined ? response.data.workLoad : formData.workLoad;
+      formData.principalUser = response.data.principalUser !== undefined ? response.data.principalUser : formData.principalUser;
+      formData.status = response.data.status !== undefined ? response.data.status : formData.status;
+      formData.deadLine = response.data.deadLine !== undefined ? response.data.deadLine : formData.deadLine;
+      formData.description = response.data.description !== undefined ? response.data.description : formData.description;
+    } else {
+      console.error("未获取到预期数据，响应内容:", response);
+    }
+  } catch (error) {
+    console.error('请求失败:', error);
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+function enableEditing() {
+  isEditable.value = !isEditable.value;
+}
+
+//删除子模块
+function toggleDeleteDialog() {
+  DeleteDialogVisible.value = !DeleteDialogVisible.value;
+}
+
+async function deleteChildModule() {
+  try {
+    const res = await DeleteChildModule(moduleId, token);
+    if (res.code === 200) {
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+      })
+      router.back();
+    } else {
+      console.error("删除失败:", res);
+    }
+  } finally {
+    listLoading.value = false;
+  }
+}
+
+//取消删除
+function CancelDelete() {
+  DeleteDialogVisible.value = false;
+}
+
+onMounted(async () => {
+  await  moduleDetails();  // 确保数据加载完成
+});
+
+</script>
diff --git a/src/views/personal/project/manage.vue b/src/views/personal/project/manage.vue
index fc3fc29..da20d04 100644
--- a/src/views/personal/project/manage.vue
+++ b/src/views/personal/project/manage.vue
@@ -189,20 +189,20 @@ const fetchData = () => {
   project.then(res => {
     const data = res.data.data.list;
     const dataTotal = res.data.data.total;
-    
 
-  
+
+
 
     total.value = dataTotal;
-   
+
 
     if (data) {
       const newData = data.map(item => parseData(item));
       console.log(newData);
-      
+
       tableData.value = newData;
       console.log(tableData.value);
-      
+
       initialTableData.value = tableData.value.slice();
     } else {
       console.log("没有可用数据");
@@ -337,13 +337,13 @@ const showEditDialog = () => {
 
   const idToEdit = selectedIds.value[0];  // 由于是编辑，只选中一个进行编辑
   const projectToEdit = tableData.value.find(project => project.id === idToEdit);
-  
+
   if (projectToEdit) {
     editFormData.value = { ...projectToEdit };
     editFormData.value.tags = projectToEdit.tags.tags;
     editFormData.value.files = projectToEdit.files.URI;
-  
-    
+
+
     isDialogVisible.value = true;
   } else {
     ElMessage.error('选中的项目未找到');
@@ -369,7 +369,7 @@ const submitEditForm = async () => {
       status: editFormData.value.status
     }
     console.log(body);
-    
+
   editProject(body, editFormData.value.id, getToken()).then(res => {
     console.log(res);
     if (res.data.code === 200) {
@@ -384,13 +384,8 @@ const submitEditForm = async () => {
     console.log(err);
     ElMessage.error('更新失败');
   });
-
-
-
 };
 
-
-
 </script>
 
 <style>
@@ -468,4 +463,4 @@ const submitEditForm = async () => {
   /* 隐藏默认关闭按钮 */
 
 }
-</style>
\ No newline at end of file
+</style>