auto-imports.d.ts

@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

components.d.ts

@@ -13,6 +13,7 @@ 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']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -21,6 +22,8 @@ declare module '@vue/runtime-core' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -44,8 +47,10 @@ 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']
     ErrorLog: typeof import('./src/components/ErrorLog/index.vue')['default']
     GithubCorner: typeof import('./src/components/GithubCorner/index.vue')['default']
     Hamburger: typeof import('./src/components/Hamburger/index.vue')['default']

src/api/manage.js

@@ -0,0 +1,275 @@
+import axios from "axios";
+
+function getCurrentTimestamp() {
+    return new Date().getTime();
+}
+
+const api = 'http://nbxt.oa.x-lf.cn'
+
+/**
+ * 根据项目id获取项目信息
+ * @param id 项目id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+const projectGetById = (id, token) => {
+    return axios({
+        url: api + "/project/get/id?id=" + id,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+    })
+}
+
+
+/**
+ * 获取项目信息
+ * @param projectId 项目id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+
+export const getproject = (projectId, token) => {
+    return axios({
+        url: api +"/project/get?projectId=" + projectId,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+
+        }
+
+
+    })
+}
+
+
+
+/**
+ * 获取我管理页面的项目列表(接口有问题)
+ * 
+ * @param pageSize 页面大小
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const getManageList = (params ,token ,) => {
+
+    const {pageSize ,is ,page} = params;
+    return axios({
+        url:  `${api}/project/child/get?is=${is}&pageSize=${pageSize}&page=${page}` ,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+            
+
+        }
+
+
+    })
+}
+
+// 我管理的所有接口
+
+
+
+/**
+ * 获取我管理的页面的项目列表
+ * 
+ * @param projectId 项目id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const getManageProjectList = (token) => {
+    return axios({
+        url: api +'/project/child/get' ,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+
+    })
+
+}
+
+
+
+
+
+
+/**
+ * 获取我管理的页面的子系统项目列表
+ * @param projectId 项目id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const getProjectSysList = (projectId,token) => {
+    return axios({
+        url: api +"/module/get?projectId=" + projectId ,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+
+
+    })
+}
+/**
+ * 获取我管理的页面的子模块项目列表(接口没数据)
+ * @param sysId 子系统id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const getProjectModList = (sysId,token) => {
+    return axios({
+        url: api +"/module/get/min?sysId=" + sysId ,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+
+
+    })
+}
+/**
+ * 获取我管理的页面的子模块详细信息
+ * @param id 子模块id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const getProjectModDetail = (id,token) => {
+    return axios({
+        url: api +"/project/module/id?id=" + id ,
+        method: "get",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+
+
+    })
+}
+//功能接口
+
+
+//删除项目
+
+/**
+ * 选择项目删除
+ * @param id 项目id
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const deleteProject = (id,token) => {
+    return axios({
+        url: api +"/project/delete?id=" + id ,
+        method: "delete",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        }
+
+
+    })
+}
+/**
+ * 修改项目信息
+ * @param {Object} body 包含项目更新信息的对象
+ * @param {number} id 项目ID
+ * @param {string} token 访问令牌
+ * @returns {Promise<AxiosResponse<any>>}
+ */
+export const editProject = (body ,id,token) => {
+    return axios({
+        url: api +"/project/edit?id=" + id ,
+        method: "put",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        },
+        data:body
+
+
+    })
+}
+
+/**
+ * 
+ * 新增子模块
+ * @param {Object} body 包含项目更新信息的对象
+ * @param {string} token 访问令牌
+ * @returns {Promise<AxiosResponse<any>>}
+ * 
+ */
+export const addModule = (body,token) => {
+    return axios({
+        url: api +"/project/module/add" ,
+        method: "post",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        },
+        data:body
+
+
+    })
+}
+/**
+ * 
+ * 删除子模块
+ * @param {number} id 子模块ID
+ * @param {string} token 访问令牌
+ * @returns {Promise<AxiosResponse<any>>}
+ * 
+ */
+export const deleteModule = (id,token) => {
+    return axios({
+        url: api +"/project/module/delete?id=" +id ,
+        method: "delete",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        },
+        
+
+
+    })
+}
+/**
+ * 
+ * 修改子模块
+ * @param {number} id 子模块ID
+ * @param {Object} body 包含子模块更新信息的对象
+ * @param {string} token 访问令牌
+ * @returns {Promise<AxiosResponse<any>>}
+ * 
+ */
+export const editModule = ( body,id,token) => {
+    return axios({
+        url: api +"/project/module/edit?id=" +id ,
+        method: "put",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        },
+        data:body
+        
+
+
+    })
+}
+
+
+
+
+
+
+
+
+
+

src/api/participate.js

@@ -0,0 +1,76 @@
+import axios from "axios";
+
+function getCurrentTimestamp() {
+    return new Date().getTime();
+}
+
+const api = 'http://nbxt.oa.x-lf.cn'
+
+/**
+ * 获取我参与的项目列表
+ * 
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const  getParticipateProjectList = (token)=> {
+    return axios({
+        method: 'get',
+        url: `${api}/project/participate/get`,
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Timestamp':getCurrentTimestamp()
+        }
+    })
+}
+/**
+ * 获取我参与的项目的子系统列表
+ * @param projectId 项目ID
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const  getParticipateSystemList = ( projectId,token)=> {
+    return axios({
+        method: 'get',
+        url: `${api}/module/get?projectId=${projectId}`,
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Timestamp':getCurrentTimestamp()
+        }
+    })
+}
+/**
+ * 获取我参与的项目的子模块列表
+ * @param SysId 项目ID
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const  getParticipateModuleList = ( SysId,token)=> {
+    return axios({
+        method: 'get',
+        url: `${api}/module/get/min?sysId=${SysId}`,
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Timestamp':getCurrentTimestamp()
+        }
+    })
+}
+/**
+ * 获取我参与的项目的子模块的详细信息
+ * @param ModId 项目ID
+ * @param token 访问令牌
+ * @returns {Promise<AxiosResponse<any>> | *}
+ */
+export const  getParticipateDetail = ( ModId,token)=> {
+    return axios({
+        method: 'get',
+        url: `${api}/project/module/id?id=${ModId}`,
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Timestamp':getCurrentTimestamp()
+        }
+    })
+}
+
+
+
+

src/api/user.js

@@ -1,12 +1,13 @@
 import request from '@/utils/request';
 
+const api = 'http://nbxt.oa.x-lf.cn'
 
 function getCurrentTimestamp() {
   return new Date().getTime();
 }
 export function login(data) {
   return request({
-    url: '/auth/login',
+    url: api+ '/auth/login',
     method: 'post',
     data,
     headers: {
@@ -17,7 +18,7 @@ export function login(data) {
 
 export function getInfo(token) {
   return request({
-    url: '/user/profile/get',
+    url: api +'/user/profile/get',
     method: 'get',
     // params: {token},
     headers: {
@@ -30,7 +31,7 @@ export function getInfo(token) {
 
 export function logout(token) {
   return request({
-    url: '/auth/logout',
+    url:  api +'/auth/logout',
     method: 'get',
     headers: {
       'Authorization':'Bearer '+token,

src/components/Breadcrumb/index.vue

@@ -41,9 +41,10 @@ export default defineComponent({
       const first = matched[0];
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched);
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' } }].concat(matched);
       }
     
+
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
     },
     isDashboard(route) {

src/layout/components/Navbar.vue

@@ -2,7 +2,7 @@
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
       @toggleClick="toggleSidebar" />
-
+    <!-- 面包屑导航 -->
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">

src/router/index.ts

@@ -11,6 +11,7 @@ const Layout = ():RouteComponent => import('@/layout/index.vue');
 // import chartsRouter from './modules/charts';
 // import nestedRouter from './modules/nested';
 // import tableRouter from './modules/table';
+  import manageRouter from './modules/manage';
 
 /**
  * constantRoutes
@@ -31,6 +32,7 @@ export const constantRoutes:RouteRecordRaw[] = [
       }
     ]
   },
+ 
   {
     path: '/login',
     component: () => import('@/views/login/index.vue'),
@@ -112,87 +114,10 @@ export const constantRoutes:RouteRecordRaw[] = [
  * 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
  */
 export const asyncRoutes:RouteRecordRaw[] = [
-  // {
-  //   path: '/permission',
-  //   component: Layout,
-  //   redirect: '/permission/page',
-  //   name: 'Permission',
-  //   meta: {
-  //     alwaysShow: true, // will always show the root menu
-  //     title: 'Permission',
-  //     icon: 'lock',
-  //     roles: ['admin', 'editor','teacher_user'] // you can set roles in root nav
-  //   },
-  //   children: [
-  //     {
-  //       path: 'page',
-  //       component: () => import('@/views/permission/page.vue'),
-  //       name: 'PagePermission',
-  //       meta: {
-  //         title: 'Page Permission',
-  //         roles: ['admin','teacher_user'] // or you can only set roles in sub nav
-  //       }
-  //     },
-  //     {
-  //       path: 'directive',
-  //       component: () => import('@/views/permission/directive.vue'),
-  //       name: 'DirectivePermission',
-  //       meta: {
-  //         title: 'Directive Permission'
-  //         // if do not set roles, means: this page does not require permission
-  //       }
-  //     },
-  //     {
-  //       path: 'role',
-  //       component: () => import('@/views/permission/role.vue'),
-  //       name: 'RolePermission',
-  //       meta: {
-  //         title: 'Role Permission',
-  //         roles: ['admin','teacher']
-  //       }
-  //     }
-  //   ]
-  // },
-
-  // 个人项目
-  {
-    path: '/myself',
-    component: Layout,
-    redirect: '/myself',
-    meta: {
-      alwaysShow: true, // will always show the root menu
-      title: '个人项目',
-      icon: 'nested',
-      roles: ['admin', 'teacher_user', 'principle', 'developer', 'console']
-    },
-    children: [
-      {
-        // 我负责的
-        path: 'charge',
-        component: () => import('@/views/personal/project/charge.vue'),
-        name: 'Charge',
-        meta: { title: '我负责的', icon: 'user', affix: true, role: ['console'] }
-      },
-      {
-        // 我管理的
-        path: 'manage',
-        component: () => import('@/views/personal/project/manage.vue'),
-        name: 'Manage',
-        meta: { title: '我管理的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
-      },
-      {
-        // 我参与的
-        path: 'participate',
-        component: () => import('@/views/personal/project/participate.vue'),
-        name: 'Participate',
-        meta: { title: '我参与的', icon: 'user', affix: true, role: ['principle', 'developer', 'console'] }
-      },
 
 
   
-
+  manageRouter,
-    ]
-  },
 
 
   // {

src/router/modules/manage.ts

@@ -0,0 +1,81 @@
+
+
+const Layout = () => import('@/layout/index.vue')
+
+const manageRouter = {
+    path: '/myslef',
+    component: Layout,
+    
+    
+    meta: {
+      alwaysShow: false, // 始终显示根菜单
+      title: '个人项目',
+      icon: 'nested',
+      roles: ['admin', 'teacher_user']
+    },
+    children: [
+      {
+        path: 'charge',
+        component: () => import('@/views/personal/project/charge.vue'),
+        name: 'Charge',
+        meta: { title: '我负责的', icon: 'user', affix: 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  },  
+       
+      },
+      {
+        path: 'childModManage',
+        component: () => import('@/views/personal/project/childModel/manage.vue'),
+        name: 'ChildModManage',
+        meta: { title: '我管理的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }  
+      },
+      {
+        path:'manageDetail',
+        component:()=>import('@/views/personal/project/detail/manage.vue'),
+        name: 'ManageDetail',
+        meta: { title: '我管理的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true  }  
+      },
+      //我参与的以及子界面
+      {
+        path: 'participate',
+        component: () => import('@/views/personal/project/participate.vue'),
+        name: 'Participate',
+        meta: { title: '我参与的', icon: 'user', affix: true }
+      },
+      {
+        path: 'childSysParticipate',
+        component: () => import('@/views/personal/project/childSystem/participate.vue'),
+        name: 'ChildSysParticipate',
+        meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true  ,affix:false},  
+       
+      },
+      {
+        path: 'childModParticipate',
+        component: () => import('@/views/personal/project/childModel/participate.vue'),
+        name: 'ChildModParticipate',
+        meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true  }  
+      },
+      {
+        path: 'participateDetail',
+        component:()=>import('@/views/personal/project/detail/participate.vue'),
+        name: 'ParticipateDetail',
+        meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true  }  
+      }
+    ]
+  }
+
+
+export default manageRouter

src/utils/validate.ts

@@ -15,7 +15,7 @@ export function isExternal(path) {
  * @returns {Boolean}
  */
 export function validUsername(str) {
-  const valid_map = ['admin', 'editor', 'teacher_user', 'teacher_demo', 'demo', 'xiao_lfeng', 'yangna'];
+  const valid_map = ['console_user', 'developer_user', 'principal_user'];
   return valid_map.indexOf(str.trim()) >= 0;
 }
 

src/views/personal/project/charge.vue

@@ -1,3 +1,3 @@
 <template>
-    hello
+    hi
 </template>

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

@@ -0,0 +1,218 @@
+<template>
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>项目{{ projectId }}</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
+          <el-button style="width:80px" @click="reset">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>子系统列表</el-button>
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <!--                <el-table-column type="selection" width="55" />-->
+        <el-table-column label="序号" width="120">
+          <template #default="{ row }">{{ row.id }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="子系统名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalName" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="description" label="子系统简介">
+          <template #default="{ row }">
+            <!-- 在模板中直接处理超长文本的显示 -->
+            <span>
+              {{ row.description.length > 20 ? row.description.substring(0, 20) + '...' : row.description }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="deadLine" label="截止时间" #default="{ row }">
+          <span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
+        </el-table-column>
+        <el-table-column property="address" label="操作" #default="{ row }">
+          <el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4"
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+    <el-alert>
+      <router-view />
+    </el-alert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import { getToken } from '@/utils/auth';
+import { getProjectSysList } from '@/api/manage';
+
+//跳转到子模块
+const router = useRouter();
+
+const toChildModel = (id) => {
+  router.push({ name: 'ChildModManage', query: { id: id } })
+};
+
+
+
+interface User {
+  cycle: number
+  deadLine: string
+  description: { description: string }
+  id: number
+  isDelete: number
+  name: string
+  principalName: string
+  projectId: number
+  status: string
+  workLoad: number
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+
+
+
+
+// console.log(searchSys);
+
+const input1 = ref('');
+const input2 = ref('');
+
+const tableData = ref<User[]>([
+
+]);
+const initialTableData = ref<User[]>([]);
+
+// 获取projectid
+const route = useRoute();
+const projectId = route.query.id;
+console.log(projectId);
+
+//处理数据函数
+const parseData = (data) => {
+
+
+  return {
+    cycle: data.cycle,
+    deadLine: data.deadLine,
+    description: data.description,
+    id: data.id,
+    isDelete: data.isDelete,
+    name: data.name,
+    principalName: data.principalName,
+    projectId: data.projectId,
+    status: data.status,
+    workLoad: data.workLoad,
+  }
+}
+
+const fetchData = () => {
+
+  const project = getProjectSysList(projectId, getToken());
+
+  //处理数据
+  project.then(res => {
+    console.log(res);
+
+    const data = res.data.data
+
+
+
+    if (data) {
+      const newData = data.map(item => parseData(item))
+      console.log(newData);
+
+      tableData.value = [...newData, ...tableData.value];
+      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
+
+    }
+
+
+  })
+}
+
+fetchData();
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>

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

@@ -0,0 +1,206 @@
+<template>
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>项目{{ projectid }}</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search()">查询</el-button>
+          <el-button style="width:80px" @click="reset()">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>子系统列表</el-button>
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <!--                <el-table-column type="selection" width="55" />-->
+        <el-table-column label="序号" width="120">
+          <template #default="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="子系统名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalName" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="description" label="子系统简介">
+          <template #default="{ row }">
+            <span>{{ row.description }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="deadLine" label="截止时间" #default="{row}">
+            <span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
+        </el-table-column>
+        <el-table-column property="address" label="操作" #default="{row}">
+          <el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4" 
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { ElTable } from 'element-plus';
+import { useRouter, useRoute } from 'vue-router';
+import { getToken } from '@/utils/auth';
+import { getParticipateSystemList } from '@/api/participate.js';
+
+
+//取值
+const route = useRoute();
+const projectid = route.query.projectId ? route.query.projectId : 1 ;
+
+
+
+
+
+//跳转到子模块
+const router = useRouter();
+
+const toChildModel = (SysId: number) => {
+  router.push({ name: 'ChildModParticipate' , query: { SysId: SysId } })
+};
+
+
+
+interface User {
+  id: number
+  
+  cycle: number
+  description: { description: string }
+  isDeleted: number
+  name: string
+  principalId: number
+  deadLine: string
+  projectId: number
+  workLoad: number
+  status: string
+  principalName:string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+const tableData = ref<User[]>([]);
+const initialTableData = ref<User[]>([]);
+
+const parseData = (data) => {
+  
+
+
+
+
+  return {
+    id: data.id,
+    deadLine: data.deadLine,
+    cycle: data.cycle,
+    description: data.description,
+    isDeleted: data.isDeleted,
+    name: data.name,
+    principalId: data.principalId,
+    projectId: data.projectId,
+    workLoad: data.workLoad,
+    status:data.status,
+    principalName:data.principalName
+  }
+}
+
+//获取子系统列表
+const fetchData = () => {
+  //调用接口
+  const project = getParticipateSystemList(<number>projectid, getToken());
+
+  project.then((res) => {
+    console.log(res);
+
+    
+    const data = res.data.data;
+    console.log(data);
+
+    if (data) {
+      const dataProject = data.map(item => parseData(item));
+
+      tableData.value = [...dataProject, ...tableData.value];
+      console.log(tableData.value);
+      initialTableData.value = tableData.value.slice();
+    }
+
+  }).catch(err => {
+    console.log(err);
+  })
+
+}
+
+fetchData();
+
+const input1 = ref('');
+const input2 = ref('');
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();
+};
+
+
+
+
+
+</script>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>

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

@@ -0,0 +1,320 @@
+<template>
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>子系统{{ sysId }}</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
+          <el-button style="width:80px" @click="reset">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>子模块列表</el-button>
+        <div>
+          <el-button type="primary" style="width:80px" @click="openEditDialog">新增</el-button>
+
+        </div>
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <!-- <el-table-column type="selection" width="55" /> -->
+        <el-table-column label="序号" width="120">
+          <template #default="{ row }">{{ row.id }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="子模块名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalUser" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="description" label="子模块简介" #default="{ row }">
+          <span>{{ row.description }}</span>
+        </el-table-column>
+        <el-table-column property="deadLine" label="截止时间" #default="{ row }">
+          <span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
+        </el-table-column>
+        <el-table-column property="address" label="操作" #default="{ row }">
+          <el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" 
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+
+
+    <!-- 新增弹窗 -->
+    <el-dialog title="新增子模块信息" v-model="dialogVisible" style="width: 27%">
+      <el-form :model="editForm" label-width="100px">
+
+        <!-- <el-form-item label="序号">
+          <el-input v-model="editForm.id" placeholder="请输入id" />
+        </el-form-item> -->
+        <el-form-item label="名称">
+          <el-input v-model="editForm.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-input v-model="editForm.status" placeholder="请输入状态" />
+        </el-form-item>
+        <el-form-item label="工作量">
+          <el-input v-model="editForm.workLoad" placeholder="请输入工作量" />
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-input v-model="editForm.cycle" placeholder="请输入周期" />
+        </el-form-item>
+        <el-form-item label="负责人">
+          <el-select v-model="editForm.principalId" placeholder="请选择负责人">
+            <el-option v-for="person in persons" :key="person.id" :label="person.name" :value="person.id" />
+          </el-select>
+        </el-form-item>
+          <el-form-item label="子系统">
+            <el-input :placeholder="`子系统 ${editForm.projectChildId}`" disabled />
+          </el-form-item>
+          <el-form-item label="截止时间">
+            <el-date-picker v-model="editForm.deadLine" type="date" placeholder="选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="子模块简介">
+            <el-input v-model="editForm.description" placeholder="请输入子模块简介" />
+          </el-form-item>
+          <!-- 添加其他需要编辑的表单项 -->
+      </el-form>
+      <span slot="footer" class="dialog-footer" style="display: flex;flex-direction: row;justify-content: center;">
+        <el-button @click="handleCloseDialog">取消</el-button>
+        <el-button type="primary" @click="submitEditInfo">确认</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable, ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
+import { getProjectModList, addModule } from '@/api/manage';
+import { useRouter, useRoute } from 'vue-router';
+import { getToken } from '@/utils/auth';
+
+//获取参数
+const route = useRoute();
+const sysId = route.query.id;
+
+const router = useRouter();
+const dialogVisible = ref(false);
+const total = ref(5);
+
+
+
+
+//表单显示内容
+const editForm = ref({
+  name: 'name',
+  status: '',
+  workLoad: '',
+  cycle: '',
+  projectChildId: sysId,
+  deadLine: '',
+  description: '',
+  principalId: '',
+
+});
+
+const persons = [
+  {id:0 ,name:"principal_user"},
+  {id:1 ,name:"console_user"},
+  {id:2 ,name:"developer_user"}
+]
+// 点击新增按钮打开弹窗
+const openEditDialog = () => {
+
+
+  dialogVisible.value = true;
+  // console.log(dialogVisible.value);
+
+};
+//关闭弹窗
+const handleCloseDialog = () => {
+  dialogVisible.value = false;
+}
+
+const submitEditInfo = () => {
+  // 将日期对象转换为日期字符串
+  const formattedDate = editForm.value.deadLine instanceof Date ? editForm.value.deadLine.toISOString() : editForm.value.deadLine;
+
+
+  const body = {
+    name: editForm.value.name,
+    status: editForm.value.status,
+    workLoad: editForm.value.workLoad,
+    cycle: editForm.value.cycle,
+    projectChildId: sysId,
+    deadLine: formattedDate,
+    description: editForm.value.description,
+    principalId: editForm.value.principalId,
+  }
+  console.log(body);
+
+  const promise = addModule(body, getToken());
+  console.log(promise);
+
+  promise.then(res => {
+    if (res.data.code === 200) {
+      console.log(res.data);
+
+      dialogVisible.value = false;
+
+      fetchData();
+      ElMessage.success('新增成功');
+    } else {
+      ElMessage.error("新增失败" + res.message);
+      console.log(res.message);
+    }
+  }).catch(err => {
+    console.log(err);
+  })
+
+
+
+
+
+}
+
+// 路由跳转
+const toDetail = (id) => {
+  router.push({ name: 'ManageDetail', query: { id: id } }); // 跳转到子系统详情页面
+};
+
+interface User {
+  id: number
+  name: string
+  principalId: number
+  principalUser: string
+  workLoad: number
+  description: { description: string }
+  status: string
+  deadLine: string
+  cycle: number
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+
+
+const initialTableData = ref<User[]>([]);
+const tableData = ref<User[]>([
+
+]);
+
+
+
+
+
+
+
+//处理接口方法
+const parseData = (data) => {
+
+
+
+  return {
+    id: data.id,
+    name: data.name,
+    principalId: data.principalId,
+    principalUser: data.principalUser,
+    workLoad: data.workLoad,
+    description: data.description,
+    status: data.status,
+    deadLine: data.deadLine,
+    cycle: data.cycle,
+
+  }
+
+}
+
+//接口处理
+const fetchData = () => {
+  //请求数据
+  const project = getProjectModList(sysId, getToken());
+  console.log(project);
+  //处理数据
+  project.then(res => {
+    const data = res.data.data;
+
+    if (data) {
+      const newData = data.map(item => parseData(item))
+      //  console.log(newData);
+
+      tableData.value = [...newData];
+      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
+
+    }
+  }).catch(err => {
+    console.log(err);
+  })
+
+}
+fetchData();
+const input1 = ref('');
+const input2 = ref('');
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();
+};
+
+
+
+</script>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>

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

@@ -0,0 +1,205 @@
+<template>
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>子系统{{ SysId }}</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search()">查询</el-button>
+          <el-button style="width:80px" @click="reset()">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>子模块列表</el-button>
+
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <!--                <el-table-column type="selection" width="55" />-->
+        <el-table-column label="序号" width="120">
+          <template #default="{ row }">{{ row.id }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="子模块名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalUser" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="description" label="子模块简介" />
+          
+        
+        <el-table-column property="deadLine" label="截止时间" #default="{row}">
+            <span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
+        </el-table-column>
+        <el-table-column property="address" label="操作" #default="{ row }">
+          <el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="5" class="mt-4"
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { getParticipateModuleList } from '@/api/participate';
+import { useRouter, useRoute } from 'vue-router';
+import { getToken } from '@/utils/auth';
+
+
+
+const router = useRouter();
+//取值
+const route = useRoute()
+const SysId = route.query.SysId;
+
+// 路由跳转
+const toDetail = (ModId) => {
+  router.push({ name: 'ParticipateDetail', query: { ModId: ModId } }); // 跳转到子系统详情页面
+};
+
+interface User {
+  beginTime: string;
+  childSystemName: string;
+  completeTime: string;
+  cycle: string;
+  description: string;
+  id: number;
+  isDelete: number
+  isFinishi: string
+  name: string;
+  pid: string
+  principalId: number
+  principalUser: string
+  projectId: number
+  status: string
+  type: string
+  workLoad: number
+  deadLine: string
+}
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+
+
+//列表
+const tableData = ref<User[]>([]);
+const initialTableData = ref<User[]>([]);
+
+const parseData = (data) => {
+  
+
+  return {
+    beginTime: data.beginTime,
+    childSystemName: data.childSystemName,
+    completeTime: data.completeTime,
+    cycle: data.cycle,
+    description: data.description,
+    id: data.id,
+    isDelete: data.isDelete,
+    isFinishi: data.isFinishi,
+    name: data.name,
+    pid: data.pid,
+    principalId: data.principalId,
+    principalUser: data.principalUser,
+    projectId: data.projectId,
+    status: data.status,
+    type: data.type,
+    workLoad: data.workLoad,
+    deadLine: data.deadLine
+  }
+}
+
+//接口获取内容
+const fetchData = () => {
+  const project = getParticipateModuleList(SysId, getToken());
+  console.log(project);
+
+  project.then((res) => {
+    const data = res.data.data
+    console.log(data);
+
+    if (data) {
+      const newData = data.map((item) => parseData(item));
+      tableData.value = [...newData, ...tableData.value]
+      
+      
+      initialTableData.value = tableData.value.slice();
+    }
+  }).catch((err) => {
+    console.log(err);
+  });
+
+}
+
+fetchData();
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+const input1 = ref('');
+const input2 = ref('');
+
+// 重置检索条件
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  console.log(tableData.value);
+  
+  tableData.value = initialTableData.value.slice();  // 恢复初始数据
+};
+
+
+</script>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>

src/views/personal/project/detail/manage.vue

@@ -0,0 +1,255 @@
+<template>
+    <div style=" width:100%;">
+        <el-card style="max-width: 100vw;">
+            <template #header><strong>子模块{{ projectId }}</strong></template>
+        </el-card>
+
+        <el-card class="card">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-row v-for="item in projectItems" :key="item.label">
+                        <el-col :span="24">
+                            <div style="margin-top: 10%;"><strong>{{ item.label }}</strong></div>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="12">
+                    <el-row v-for="item in projectItems" :key="item.label">
+                        <el-col :span="24">
+                            <div v-if="item.label !== '07.简介'" style="margin-top: 11%;">
+                                <template v-if="editMode">
+                                    <input v-model="item.value" />
+                                </template>
+                                <template v-else>
+                                    {{ item.value }}
+                                </template>
+                            </div>
+                            <textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 15%; width: 100%;"
+                                v-model="item.value" :disabled="!editMode" rows="4" cols="50">
+                    </textarea>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+        </el-card>
+        <div style="display: flex; justify-content: center;">
+            <el-button @click="toggleEditMode" :type="editMode ? 'success' : 'primary'" style="width:80px">
+                {{ editMode ? '保存' : '编辑' }}
+            </el-button>
+            <el-button style="width:80px ;background-color: #bd3124;color: azure;" @click="deleteModuleClick">删除</el-button>
+        </div>
+
+        <el-alert>
+            <router-view />
+        </el-alert>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { getProjectModDetail, editModule, deleteModule } from '@/api/manage';
+import { getToken } from '@/utils/auth';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+
+const projectItems = ref([
+    { label: '01.模块名称', value: '项目名称1' },
+    { label: '02.模块周期', value: '3个月' },
+    { label: '03.工作量', value: '100小时' },
+    { label: '04.负责人ID', value: '张三' },
+    { label: '05.状态', value: '进行中' },
+    { label: '06.时间', value: '2024-01-01 12:00:00' },
+    { label: '07.简介', value: '大王iu大概iudg拍高端屁股的怕耽搁u对爬过文档爬过无' },
+]);
+
+const editMode = ref(false); // 编辑模式状态
+
+
+
+
+//获取id
+const route = useRoute();
+const projectId = Number(route.query.id);
+
+
+
+//加载数据
+//修改表单内数据
+const parseData = (data) => {
+
+
+    projectItems.value.forEach(item => {
+        if (item.label === '01.模块名称') {
+            item.value = data.name;
+        } else if (item.label === '02.模块周期') {
+            item.value = data.cycle;
+        } else if (item.label === '03.工作量') {
+            item.value = data.workLoad ;
+        } else if (item.label === '04.负责人ID') {
+            item.value = "1";
+        } else if (item.label === '05.状态') {
+            item.value = data.status.toString();
+        } else if (item.label === '06.时间') {
+            item.value = new Date(data.deadLine).toLocaleDateString();
+        } else if (item.label === '07.简介') {
+            item.value = data.description;
+        }
+    })
+}
+
+//获取数据方法
+const fetchData = async () => {
+    const res = await getProjectModDetail(projectId, getToken());
+    console.log(res.data);
+    if (res.data.data) {
+        parseData(res.data.data); // 解析数据
+        ElMessage.success('加载成功!');
+    }
+};
+
+const saveData = async () => {
+    // 创建提交给后端的数据对象
+    let payload = {
+        name: '',
+        description: '',
+        principalId: '', // 需要一种方式来映射或转换为ID
+        workLoad: '',
+        cycle: '',
+        completeTime: '',
+        status: '',
+        deadLine: ''
+    };
+
+    const formatDate = (dateStr) => {
+        const date = new Date(dateStr);
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    };
+
+    projectItems.value.forEach(item => {
+        switch (item.label) {
+            case '01.模块名称':
+                payload.name = item.value;
+                break;
+            case '02.模块周期':
+                payload.cycle = item.value.toString();
+                break;
+            case '03.工作量':
+                payload.workLoad = item.value.toString();
+                break;
+            case '04.负责人':
+                payload.principalId = item.value; // 假设这里的值已经是ID，或者需要其他逻辑处理为ID
+                break;
+            case '05.状态':
+                payload.status = item.value.toString();
+                break;
+            case '06.时间':
+                payload.completeTime = formatDate(item.value);
+                payload.deadLine = formatDate(item.value); // 如果deadLine和completeTime相同
+                break;
+            case '07.简介':
+                payload.description = item.value;
+                break;
+        }
+    });
+
+  
+
+
+
+    console.log(payload);
+
+    const res = editModule(payload, projectId, getToken());
+    res.then(response => {
+        if (response.data.code === 200) {
+            ElMessage.success('保存成功!');
+            fetchData(); // 刷新页面数据
+        } else {
+            ElMessage.error('保存失败!');
+        }
+    }).catch(error => {
+        ElMessage.error('保存失败!'+error);
+    });
+
+
+
+};
+
+
+const toggleEditMode = () => {
+    if (editMode.value) {
+        saveData(); // 如果当前处于编辑模式，调用 saveData 函数保存数据
+    }
+
+    editMode.value = !editMode.value; // 切换编辑模式的状态
+};
+
+fetchData();
+
+//删除模块
+const deleteModuleClick = () => {
+    //确认删除吗
+
+    const confirm = ElMessageBox.confirm('确认删除吗？');
+    confirm.then(() => {
+        const res = deleteModule(projectId, getToken());
+        console.log(res);
+        
+        res.then(response => {
+            if (response.data.code === 200) {
+                ElMessage.success('删除成功!');
+                //返回上一级页面
+                window.history.go(-1);
+            } else if(response.data.code === 40019) {
+                ElMessage.error('删除失败!没有权限');
+            }else{
+                ElMessage.error('删除失败!');
+            }
+        }).catch(error => {
+            ElMessage.error('删除失败!'+error);
+        });
+    }).catch(() => {
+        //取消删除
+    });
+}
+
+
+
+
+
+
+
+
+
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+
+.card {
+    width: 28%;
+    margin-left: 50%;
+    transform: translateX(-50%);
+}
+</style>

src/views/personal/project/detail/participate.vue

@@ -0,0 +1,158 @@
+<template>
+    <div style=" width:100%;">
+        <el-card style="max-width: 100vw;">
+            <template #header><strong>子模块{{ projectId }}</strong></template>
+        </el-card>
+
+        <el-card class="card">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-row v-for="item in projectItems" :key="item.label">
+                        <el-col :span="24">
+                            <div style="margin-top: 10%;"><strong>{{ item.label }}</strong></div>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="12">
+                    <el-row v-for="item in projectItems" :key="item.label">
+                        <el-col :span="24">
+                            <div v-if="item.label !== '07.简介'" style="margin-top: 11%;">
+                                <template v-if="editMode">
+                                    <input v-model="item.value" />
+                                </template>
+                                <template v-else>
+                                    {{ item.value }}
+                                </template>
+                            </div>
+                            <textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 15%; width: 100%;"
+                                v-model="item.value" :disabled="!editMode" rows="4" cols="50">
+                    </textarea>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+        </el-card>
+        <div style="display: flex;justify-content: center;">
+            <el-button style="width: 80px;background-color: #409eff;color: azure" @click="toBack" >完成</el-button>
+        </div>
+        
+
+        <el-alert>
+            <router-view />
+        </el-alert>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { getProjectModDetail} from '@/api/manage';
+import { getToken } from '@/utils/auth';
+import { ElMessage } from 'element-plus';
+
+
+const projectItems = ref([
+    { label: '01.模块名称', value: '' },
+    { label: '02.模块周期', value: '' },
+    { label: '03.工作量', value: '' },
+    { label: '04.负责人ID', value: '' },
+    { label: '05.状态', value: '' },
+    { label: '06.时间', value: '' },
+    { label: '07.简介', value: '' },
+]);
+
+const editMode = ref(false); // 编辑模式状态
+
+
+
+
+//获取id
+const route = useRoute();
+const projectId = Number(route.query.ModId);
+
+
+
+//加载数据
+//修改表单内数据
+const parseData = (data) => {
+
+
+    projectItems.value.forEach(item => {
+        if (item.label === '01.模块名称') {
+            item.value = data.name;
+        } else if (item.label === '02.模块周期') {
+            item.value = data.cycle;
+        } else if (item.label === '03.工作量') {
+            item.value = data.workLoad ;
+        } else if (item.label === '04.负责人ID') {
+            item.value = "1";
+        } else if (item.label === '05.状态') {
+            item.value = data.status.toString();
+        } else if (item.label === '06.时间') {
+            item.value = new Date(data.deadLine).toLocaleDateString();
+        } else if (item.label === '07.简介') {
+            item.value = data.description;
+        }
+    })
+}
+
+//获取数据方法
+const fetchData = async () => {
+    console.log(projectId);
+    
+    const res = await getProjectModDetail(projectId, getToken());
+    console.log(res);
+    if (res.data.data) {
+        parseData(res.data.data); // 解析数据
+        ElMessage.success('加载成功!');
+    }
+};
+
+
+//完成返回上一级
+const toBack = () => {
+    window.history.go(-1);
+}
+
+
+
+fetchData();
+
+
+
+
+
+
+
+
+
+
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+
+.card {
+    width: 28%;
+    margin-left: 50%;
+    transform: translateX(-50%);
+}
+</style>

src/views/personal/project/manage.vue

@@ -1,124 +1,471 @@
 <template>
   <div style=" width:100%">
     <el-card style="max-width: 100vw;margin: 1.5vw;">
-          <template #header><strong >项目1</strong></template>
+      <template #header><strong>我管理的</strong></template>
       <div style="display:flex;flex-direction:row;justify-content: space-around ">
         <div>
           名称
-                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
         </div>
         <div>
           状态
-                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
         </div>
         <div>
-                  <el-button type="primary" style="width:80px">查询</el-button>
+          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
-                      <el-button style="width:80px">重置</el-button>
+          <el-button style="width:80px" @click="reset">重置</el-button>
         </div>
       </div>
+
     </el-card>
+
     <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
       <div style="display:flex;flex-direction: row;justify-content: space-between">
-                <el-button
+        <el-button text type=''>项目列表</el-button>
-                        text
+        <div style="text-align: right;">
-                        type=''
+          <el-button type="primary" style="width:80px" @click="showEditDialog">编辑</el-button>
-                >子系统列表</el-button
+          <el-button style="width:80px ;background-color: #bd3124;color: azure;"
-                >
+            @click="handleDeleteProjects">删除</el-button>
         </div>
-            <el-table
+      </div>
-                    ref="multipleTableRef"
+
-                    :data="tableData"
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
-                    style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
-                    @selection-change="handleSelectionChange"
+        <el-table-column type="selection" width="55" />
-            >
-  <!--                <el-table-column type="selection" width="55" />-->
         <el-table-column label="序号" width="120">
-                    <template #default="scope">{{ scope.row.date }}</template>
+          <template #default="{ row }">{{ row.id }}</template>
         </el-table-column>
-                <el-table-column property="name" label="子系统名称" width="120" />
+        <el-table-column property="name" label="项目名称" width="120" />
-                <el-table-column property="address" label="工作量" show-overflow-tooltip />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
-                <el-table-column property="address" label="周期"  />
+        <el-table-column property="cycle" label="周期" />
-                <el-table-column property="address" label="负责人"  />
+        <el-table-column property="principalUser" label="负责人" />
-                <el-table-column property="address" label="状态"  />
+        <el-table-column property="status" label="状态" />
-                <el-table-column property="address" label="子系统简介"  />
+
-                <el-table-column property="address" label="截止时间"  />
+
-                <el-table-column property="address" label="操作"  >
+        <el-table-column property="isFinish" label="文档（点击下载）">
-                    <el-button
+          <template #default="{ row }">
-                            link
+            <template v-if="row.files && row.files.URI">
-                            style="color:deepskyblue"
+              <a :href="row.files.URI" target="_blank" style="color: deepskyblue">
-                    >查看详情</el-button
+                下载文档
-                    >
+              </a>
+            </template>
+            <template v-else>
+              无
+            </template>
+          </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="description" label="项目简介">
+          <template v-slot="{ row }">
+            <span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span>
+          </template>
+        </el-table-column>
+        <el-table-column property="deadLine" label="截止时间" />
+        <el-table-column property="name" label="操作" #default="{ row }">
+          <el-button link style="color:deepskyblue" @click="toChildSystem(row.id)">查看详情</el-button>
         </el-table-column>
       </el-table>
-            <el-pagination
+      <el-pagination larger background layout="prev, pager, next" @current-change="handleCurrentChange"
-                    larger
+        :current-page="currentPage" :page-size="pageSize" :total="total"
-                    background
+        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
-                    layout="prev, pager, next"
-                    :total="50"
-                    class="mt-4"
-                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
-            />
     </el-card>
+    <el-dialog v-model="isDialogVisible" title="编辑项目" :close-on-click-modal="false">
+      <el-form :model="editFormData">
+        <el-form-item label="项目名称">
+          <el-input v-model="editFormData.name"></el-input>
+        </el-form-item>
+        <el-form-item label="项目描述">
+          <el-input v-model="editFormData.description"></el-input>
+        </el-form-item>
+        <el-form-item label="负责人ID">
+          <el-input v-model="editFormData.principalUser"></el-input>
+        </el-form-item>
+        <el-form-item label="工作量">
+          <el-input v-model="editFormData.workLoad"></el-input>
+        </el-form-item>
+        <el-form-item label="周期">
+          <el-input v-model="editFormData.cycle"></el-input>
+        </el-form-item>
+        <el-form-item label="截止时间">
+          <el-input v-model="editFormData.deadLine"></el-input>
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-input v-model="editFormData.tags"></el-input>
+        </el-form-item>
+        <el-form-item label="文档">
+          <el-input v-model="editFormData.files"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="submitEditForm">提交</el-button>
+          <el-button @click="isDialogVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
 
   </div>
-  </template>
 
-  <script lang="ts" setup>
+</template>
-  import { ref } from 'vue';
-  import { ElTable } from 'element-plus';
-  interface User {
-      date: string
-      name: string
-      address: string
-  }
 
-  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+<script setup lang="ts">
-  const multipleSelection = ref<User[]>([]);
+import { ref, watch } from 'vue';
+import { ElTable, ElTableColumn, ElPagination, ElButton, ElInput, ElTag, ElMessageBox, ElMessage } from 'element-plus';
+import { getToken } from '@/utils/auth';
+import { useRouter } from 'vue-router';
+import { getManageList, deleteProject, editProject } from '@/api/manage.js';
 
-  const handleSelectionChange = (val: User[]) => {
+
-    multipleSelection.value = val;
+
+
+
+
+// 初始化路由
+const router = useRouter();
+
+// 定义响应式变量
+const pageSize = ref(5);
+const currentPage = ref(1);
+const total = ref(6);
+const input1 = ref('');
+const input2 = ref('');
+const tableData = ref<User[]>([]);
+const selectedIds = ref([]);
+
+
+
+
+
+
+// 定义用户接口
+interface User {
+  id: number;
+  cycle: number;
+  name: string;
+  description: string;
+  workLoad: number;
+  status: string;
+  deadLine: string;
+  tags: Array<any>;
+  files: Array<any>;
+  principalUser: string;
+}
+
+// 定义解析数据的函数
+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
   };
+};
 
-  const tableData: User[] = [
+// 定义处理当前页码变化的函数
-    {
+watch(currentPage, () => {
-      date: '2016-05-03',
+  fetchData();
-      name: 'Tom',
+});
-      address: 'No. 189, Grove St, Los Angeles'
+
-    },
+// 定义获取数据的函数
-    {
+const fetchData = () => {
-      date: '2016-05-02',
+  const params = {
-      name: 'Tom',
+    page: currentPage.value,
-      address: 'No. 189, Grove St, Los Angeles'
+    pageSize: pageSize.value,
-    },
+    is: 1
-    {
+  };
-      date: '2016-05-04',
+  const project = getManageList(params, getToken());
-      name: 'Tom',
+  project.then(res => {
-      address: 'No. 189, Grove St, Los Angeles'
+    const data = res.data.data.list;
-    },
+    const dataTotal = res.data.data.total;
-    {
+    
-      date: '2016-05-01',
+
-      name: 'Tom',
+  
-      address: 'No. 189, Grove St, Los Angeles'
+
+    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("没有可用数据");
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+fetchData();
+
+// 定义处理当前页码变化的函数
+const handleCurrentChange = (page) => {
+  currentPage.value = page;
+};
+
+// 定义处理选择变化的函数
+const handleSelectionChange = (selection) => {
+  selectedIds.value = selection.map(item => item.id);
+};
+
+// 定义确认删除项目的函数
+const confirmDelete = (selectedIds) => {
+  const message = `确认删除 ID 为 ${selectedIds} 的项目吗？`;
+  ElMessageBox.confirm(message, {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    center: true,
+  }).then(async () => {
+    const token = getToken();
+    for (let id of selectedIds) {
+      await deleteProject(id, token)
+        .then(() => {
+          console.log("项目删除成功", id);
+          fetchData();
+          ElMessage.success('项目删除成功');
+        })
+        .catch(error => {
+          console.error("删除失败", error);
+          ElMessage.error('删除操作失败');
+        });
+    }
+  }).catch(() => {
+    ElMessage.info('删除操作已取消');
+  });
+};
+
+// 定义处理项目删除的函数
+const handleDeleteProjects = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage({
+      message: '请选择一个进行删除',
+      type: 'warning',
+      duration: 3000
+    });
+    return;
+  }
+  confirmDelete(selectedIds.value);
+};
+
+const initialTableData = ref<User[]>([]);
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
   }
 
-  ];
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();
+};
+
+// 定义跳转到子系统的函数
+const toChildSystem = (id) => {
+  router.push({ name: 'ChildSysManage', query: { id: id } });//目前只有4有数据
+};
+
+//编辑功能
+
+//创建响应式变量和数据
+const isDialogVisible = ref(false);
+
+interface EditFormData {
+  id: number;
+  cycle: number;
+  name: string;
+  description: string;
+  workLoad: number;
+  status: string;
+  deadLine: string;
+  tags: Array<any>;
+  files: Array<any>;
+  principalUser: string;
+}
+
+const editFormData = ref<EditFormData>({
+  id: 0, // 默认为0，表示新建时的默认值
+  cycle: 0,
+  name: '',
+  description: '',
+  workLoad: 0,
+  status: '',
+  deadLine: '',
+  tags: [],
+  files: [],
+  principalUser: ''
+});
+//添加显示数据
+const showEditDialog = () => {
+  if (selectedIds.value.length === 0 || selectedIds.value.length > 1) {
+    ElMessage({
+      message: '请选择一个项目进行编辑',
+      type: 'warning',
+      duration: 3000
+    });
+    return;
+  }
+
+  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;
   
     
-  </script>
+    isDialogVisible.value = true;
-  <style>
+  } else {
-  .my-autocomplete li {
+    ElMessage.error('选中的项目未找到');
+  }
+};
+
+
+//提交表单按钮以及提交
+const submitEditForm = async () => {
+
+  // 假设有一个API方法updateProject来处理PUT请求
+  console.log(editFormData);
+    const body = {
+      id: editFormData.value.id,
+      name: editFormData.value.name,
+      description: editFormData.value.description,
+      workLoad: editFormData.value.workLoad,
+      cycle: editFormData.value.cycle,
+      deadLine: editFormData.value.deadLine,
+      tags: editFormData.value.tags.toString(),
+      files: editFormData.value.files.toString(),
+      principalUser: editFormData.value.principalUser,
+      status: editFormData.value.status
+    }
+    console.log(body);
+    
+  editProject(body, editFormData.value.id, getToken()).then(res => {
+    console.log(res);
+    if (res.data.code === 200) {
+      ElMessage.success('更新成功');
+    } else {
+      ElMessage.error('更新失败');
+    }
+
+    isDialogVisible.value = false;
+    fetchData(); // 重新加载列表数据
+  }).catch(err => {
+    console.log(err);
+    ElMessage.error('更新失败');
+  });
+
+
+
+};
+
+
+
+</script>
+
+<style>
+.my-autocomplete li {
   line-height: normal;
   padding: 7px;
-  }
+}
-  .my-autocomplete li .name {
+
+.my-autocomplete li .name {
   text-overflow: ellipsis;
   overflow: hidden;
-  }
+}
-  .my-autocomplete li .addr {
+
+.my-autocomplete li .addr {
   font-size: 12px;
   color: #b4b4b4;
-  }
+}
-  .my-autocomplete li .highlighted .addr {
+
+.my-autocomplete li .highlighted .addr {
   color: #ddd;
-  }
+}
-  </style>
+
+/* 自定义弹窗样式 */
+.el-message-box {
+  background-color: #fff;
+  /* 设置背景颜色 */
+  border: 2px solid #eee;
+  /* 设置边框样式 */
+  border-radius: 8px;
+  /* 设置边框圆角 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* 添加阴影效果 */
+}
+
+.el-message-box__message {
+  color: #333;
+  /* 设置文本颜色 */
+}
+
+.el-message-box__btns {
+  display: flex;
+  justify-content: space-around;
+  /* 设置按钮水平居中 */
+}
+
+
+.el-message-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* 垂直居中 */
+  align-items: center;
+  /* 水平居中 */
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.el-message-box__message {
+  margin-bottom: 20px;
+  /* 设置文字与按钮之间的距离 */
+}
+
+.el-message-box__btns {
+  display: flex;
+  justify-content: center;
+  /* 水平居中 */
+  gap: 10px;
+  /* 设置按钮间隔 */
+}
+
+.el-message-box__close {
+  display: none;
+  /* 隐藏默认关闭按钮 */
+
+}
+</style>

src/views/personal/project/participate.vue

@@ -1,3 +1,218 @@
 <template>
-    hi
+  <div style=" width:100%">
+    <el-card style="max-width: 100vw;margin: 1.5vw;">
+      <template #header><strong>我参与的</strong></template>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          名称
+          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          状态
+          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+        </div>
+        <div>
+          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
+          <el-button style="width:80px" @click="reset">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text type=''>项目列表</el-button>
+      </div>
+      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
+        @selection-change="handleSelectionChange">
+        <!-- <el-table-column type="selection" width="55" /> -->
+        <el-table-column label="序号" width="120">
+          <template #default="{row}">{{ row.id }}</template>
+        </el-table-column>
+        <el-table-column property="name" label="项目名称" width="120" />
+        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
+        <el-table-column property="cycle" label="周期" />
+        <el-table-column property="principalUser" label="负责人" />
+        <el-table-column property="status" label="状态" />
+        <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="files" 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 property="description" label="项目简介" />
+        <el-table-column property="deadline" label="截止时间" />
+        <el-table-column property="address" label="操作" #default="{ row }">
+          
+            <el-button link style="color:deepskyblue" @click="toChildSystem( row.id)">查看详情</el-button>
+          
+          
+        </el-table-column>
+      </el-table>
+      <el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize" :current-page="currentPage"
+      @current-change="handleCurrentChange" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+    </el-card>
+
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { getParticipateProjectList } from '@/api/participate.js';
+import { getToken } from '@/utils/auth';
+
+const router = useRouter();
+
+// 设置页码
+const pageSize = ref(2);
+const currentPage = ref(1);
+const total = ref(4);
+
+// 定义用户数据接口
+interface User {
+  id: number;
+  cycle: number;
+  name: string;
+  description: string;
+  workLoad: number;
+  files: { URI: string };
+  status: string;
+  principalUser: string;
+  deadline: string;
+  tags: Array<any>;
+}
+
+// 响应式数据
+const input1 = ref('');
+const input2 = ref('');
+const tableData = ref<User[]>([
+
+]);
+const initialTableData = ref<User[]>([]);
+
+// 处理返回数据函数
+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,
+    files: files,
+    status: data.status,
+    principalUser: data.principalUser,
+    deadline: data.deadLine,
+    tags: tags
+  };
+};
+
+// 处理接口数据
+const fetchData = () => {
+  const project = getParticipateProjectList(getToken());
+  console.log(project);
+  
+  project.then(res => {
+    const data = res.data.data.list;
+    const dataTotal = res.data.data.total;
+    const dataPageSize = res.data.data.pageSize;
+
+    console.log(dataTotal, dataPageSize);
+    
+    total.value = dataTotal;
+    pageSize.value = dataPageSize;
+
+    if (data) {
+      const dataProject = data.map(item => parseData(item));
+      tableData.value = [...dataProject, ...tableData.value];
+      initialTableData.value = tableData.value.slice();
+    } else {
+      console.log('没有数据');
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+};
+
+// 调用获取数据的函数
+fetchData();
+
+// 处理路由跳转
+const toChildSystem = (id) => {
+  router.push({ name: 'ChildSysParticipate', query: { projectId: id } });
+};
+
+// 监听表格行选择事件
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const multipleSelection = ref<User[]>([]);
+
+const handleSelectionChange = (val: User[]) => {
+  multipleSelection.value = val;
+};
+
+// 统一检索函数
+const search = () => {
+  const keyword = input1.value.trim().toLowerCase();
+  const status = input2.value.trim().toLowerCase();
+
+  // 如果搜索关键词和状态都为空，则恢复初始数据
+  if (keyword === '' && status === '') {
+    tableData.value = initialTableData.value.slice();
+    return;
+  }
+
+  // 根据关键词和状态进行检索
+  tableData.value = initialTableData.value.filter(item => {
+    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
+    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
+    return matchKeyword && matchStatus;
+  });
+};
+
+
+// 定义处理当前页码变化的函数
+const handleCurrentChange = (page) => {
+  currentPage.value = page;
+};
+// 重置检索条件
+const reset = () => {
+  input1.value = '';
+  input2.value = '';
+  tableData.value = initialTableData.value.slice();
+};
+</script>
+
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>