我管理的删除项目完成

auto-imports.d.ts

@@ -2,4 +2,5 @@
 export {}
 declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 }

src/api/manage.js

@@ -50,16 +50,18 @@ export const getproject = (projectId, token) => {
 /**
  * 获取我管理页面的项目列表(接口有问题)
  * 
+ * @param pageSize 页面大小
  * @param token 访问令牌
  * @returns {Promise<AxiosResponse<any>> | *}
  */
-export const getManageList = (token) => {
+export const getManageList = (params ,token ,) => {
+
+    const {pageSize ,is ,page} = params;
     return axios({
-        url: api +"/project/child/get" ,
+        url:  `${api}/project/child/get?is=${is}&pageSize=${pageSize}&page=${page}` ,
         method: "get",
         headers: {
             'Authorization': 'Bearer ' + token,
-           
             'Timestamp': getCurrentTimestamp()
             
 
@@ -72,25 +74,7 @@ export const getManageList = (token) => {
 // 我管理的所有接口
 
 
-/**
- * 获取我管理的页面的搜索
- * 
- * @param projectId 项目id
- * @param token 访问令牌
- * @returns {Promise<AxiosResponse<any>> | *}
- */
-export const getManageListById = (projectId, token) => {
-    return axios({
-        url: api +'/project/get/' + projectId,
-        method: "get",
-        headers: {
-            'Authorization': 'Bearer ' + token,
-            'Timestamp': getCurrentTimestamp()
-        }
 
-    })
-
-}
 /**
  * 获取我管理的页面的项目列表
  * 
@@ -116,24 +100,6 @@ export const getManageProjectList = (token) => {
 
 
 
-/**
- * 获取我管理的页面的子模块项目列表
- * 
- * @param token 访问令牌
- * @returns {Promise<AxiosResponse<any>> | *}
- */
-export const getProjectList = (token) => {
-    return axios({
-        url: api +"/project/module/get" ,
-        method: "get",
-        headers: {
-            'Authorization': 'Bearer ' + token,
-            'Timestamp': getCurrentTimestamp()
-        }
-
-
-    })
-}
 /**
  * 获取我管理的页面的子系统项目列表
  * @param projectId 项目id
@@ -188,6 +154,46 @@ export const getProjectModDetail = (id,token) => {
 
     })
 }
+//功能接口
+
+
+//删除项目
+
+/**
+ * 选择项目删除
+ * @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 data 要添加的项目数据
+ * @returns {Promise<AxiosResponse<any>>} 返回API响应
+ */
+export const addProject = (data ,token) => {
+    return axios({
+      url: api + "/project/add", // 替换为实际的项目API端点
+      method: "post", // 使用POST方法添加项目
+      headers: {
+        'Authorization': 'Bearer ' + token,
+        'Timestamp': getCurrentTimestamp()
+      },
+      data: data  // 将要添加的项目数据传递给API
+    });
+  }
 
 
 

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/login/index.vue

@@ -113,8 +113,8 @@ export default defineComponent({
     };
     return {
       loginForm: {
-        username: 'teacher_user',
-        password: '123456'
+        username: 'principal_user',
+        password: 'jsl_nbxt'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],

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

@@ -28,17 +28,17 @@
           <template #default="{row}">{{ row.id }}</template>
         </el-table-column>
         <el-table-column property="name" label="子系统名称" width="120" />
-        <el-table-column property="cycle" label="工作量" show-overflow-tooltip />
-        <el-table-column property="workLoad" label="周期" />
-        <el-table-column property="address" label="负责人" />
-        <el-table-column property="isFinish" label="状态" />
+        <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.description }}</span>
           </template>
             
         </el-table-column>
-        <el-table-column property="createdAt" label="截止时间" />
+        <el-table-column property="deadLine" label="截止时间" />
         <el-table-column property="address" label="操作" #default="{row}">
           <el-button link style="color:deepskyblue" @click="toChildModel(row.id)">查看详情</el-button>
         </el-table-column>
@@ -64,21 +64,22 @@ import { getProjectSysList } from '@/api/manage';
 const router = useRouter();
 
 const toChildModel = (id) => {
-  router.push({ name: 'ChildModManage' , query: { id: id } })
+  router.push({ name: 'ChildModManage' , query: { id: 3 } })
 };
 
 const input = ref('');
 
 interface User {
-    id: number
-    principalId: number
-    projectId: number
-    name: string
     cycle:number
-    workLoad: number
+    deadLine:string
     description: {description :string}
+    id:number
     isDelete:number
-    createdAt: string
+    name:string
+    principalName:string
+    projectId:number
+    status:string
+    workLoad:number
 }
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@@ -108,27 +109,29 @@ const initialTableData = ref<User[]>([]);
     const description = JSON.parse(data.description);
 
     return{
-          id: data.id,
             cycle:data.cycle,
+            deadLine:data.deadLine,
             description:description,
+            id:data.id,
             isDelete:data.isDelete,
-       
             name:data.name,
-          principalId: data.principalId,
+            principalName:data.principalName,
             projectId:data.projectId,
+            status:data.status,
             workLoad:data.workLoad,
-          createdAt: data.createdAt
     }
   }
   
   const fetchData = () => {
-    const project = getProjectSysList(projectId,getToken());
+    
+    const project = getProjectSysList( projectId ? Number(projectId) - 1 : 0,getToken());
 
     //处理数据
     project.then(res=>{
       const data = res.data.data
+      console.log(data);
+      
       
-      // console.log(data)
       if(data){
            const newData = data.map(item=>parseData(item))
            console.log(newData);

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

@@ -30,7 +30,7 @@
         <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="principalName" label="负责人" />
         <el-table-column property="status" label="状态" />
         <el-table-column property="description" label="子系统简介">
           <template #default="{ row }">
@@ -86,7 +86,7 @@ interface User {
   projectId: number
   workLoad: number
   status: string
-  principalUser:string
+  principalName:string
 }
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@@ -108,7 +108,7 @@ const tableData = ref<User[]>([
     projectId: 1,
     workLoad: 1,
     status: '待定',
-    principalUser: '等数据ing'
+    principalName: '测试数据'
   }
 ]);
 const initialTableData = ref<User[]>([]);
@@ -129,8 +129,8 @@ const parseData = (data) => {
     principalId: data.principalId,
     projectId: data.projectId,
     workLoad: data.workLoad,
-    status:"待定",
-    principalUser:"等数据ing"
+    status:data.status,
+    principalName:data.principalName
   }
 }
 

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

@@ -1,7 +1,7 @@
 <template>
   <div style=" width:100%">
     <el-card style="max-width: 100vw;margin: 1.5vw;">
-      <template #header><strong>子系统{{ id }}</strong></template>
+      <template #header><strong>子系统{{ sysId }}</strong></template>
       <div style="display:flex;flex-direction:row;justify-content: space-around ">
         <div>
           名称
@@ -22,7 +22,7 @@
         <el-button text type=''>子模块列表</el-button>
         <div>
           <el-button type="primary" style="width:80px">新增</el-button>
-          <el-button style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button>
+          
         </div>
       </div>
       <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
@@ -32,14 +32,14 @@
           <template #default="{row}">{{row.id }}</template>
         </el-table-column>
         <el-table-column property="name" label="子模块名称" width="120" />
-        <el-table-column property="address" label="工作量" show-overflow-tooltip />
-        <el-table-column property="address" label="周期" />
+        <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="address" label="状态" />
-        <el-table-column property="address" label="子模块简介" #default="{row}" >
+        <el-table-column property="status" label="状态" />
+        <el-table-column property="description" label="子模块简介" #default="{row}" >
             <span>{{row.description.description}}</span>
         </el-table-column>  
-        <el-table-column property="address" label="截止时间" />
+        <el-table-column property="deadLine" label="截止时间" />
         <el-table-column property="address" label="操作" #default="{row}">
           <el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
         </el-table-column>
@@ -62,6 +62,8 @@ import { getToken } from '@/utils/auth';
 
 const router = useRouter();
 
+
+
 // 路由跳转
 const toDetail = (id) => {
   router.push({ name: 'ManageDetail' ,query: { id: id } }); // 跳转到子系统详情页面
@@ -74,7 +76,8 @@ interface User {
   principalUser:string
   workLoad: number
   description: { description: string }
-  status: boolean
+  status: string
+  deadLine: string
 }
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@@ -96,7 +99,7 @@ const tableData = ref<User[]>([
 
 //获取参数
 const route = useRoute();
-const id = route.query.id;
+const sysId = route.query.id;
 
 
 //处理接口方法
@@ -111,7 +114,9 @@ const parseData = (data) => {
       principalUser: data.principalUser,
       workLoad: data.workLoad,
       description: description,
-      status: data.status
+      status: data.status,
+      deadLine: data.deadLine,
+
   }
 
 }
@@ -119,7 +124,7 @@ const parseData = (data) => {
 //接口处理
 const fetchData = ()=>{
   //请求数据
-  const project = getProjectModList(3,getToken());
+  const project = getProjectModList(sysId,getToken());
   console.log(project);
   //处理数据
   project.then(res=>{

src/views/personal/project/manage.vue

@@ -12,7 +12,7 @@
           <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 type="primary" style="width:80px">查询</el-button>
           <el-button style="width:80px">重置</el-button>
         </div>
       </div>
@@ -23,31 +23,40 @@
       <div style="display:flex;flex-direction: row;justify-content: space-between">
         <el-button text type=''>项目列表</el-button>
         <div style="text-align: right;">
-          <el-button type="primary" style="width:80px">新增</el-button>
-          <el-button style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button>
+          <el-button type="primary" style="width:80px" >编辑</el-button>
+          <el-button style="width:80px ;background-color: #bd3124;color: azure;"
+            @click="handleDeleteProjects">删除</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 type="selection" width="55" />
         <el-table-column label="序号" width="120">
-          <template v-slot="{ $index }">{{ $index + 1 }}</template>
+          <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="isFinish" label="状态" />
+        <el-table-column property="status" label="状态" />
 
 
         <el-table-column property="isFinish" label="文档（点击下载）">
-          <el-button link style="color:deepskyblue">接口文档</el-button>
-          <el-button link style="color:deepskyblue">需求文档</el-button>
+          <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="tags" label="标签">
-          <template v-slot="{ row }">
-            <span v-for="(tag, index) in row.tags" :key="index">{{ tag.toString() }} </span>
+          <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="项目简介">
@@ -55,14 +64,16 @@
             <span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span>
           </template>
         </el-table-column>
-        <el-table-column property="dateline" label="截止时间" />
+        <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 larger background layout="prev, pager, next" :total="40" class="mt-4"
+      <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" />
     </el-card>
+    
     <el-alert>
       <router-view />
     </el-alert>
@@ -71,27 +82,33 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { ElTable } from 'element-plus';
-import { getManageListById } from '@/api/manage.js';
+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 } from '@/api/manage.js';
+import { getManageList, deleteProject } from '@/api/manage.js';
+
 
 
 
 const router = useRouter();
 
+const pageSize = ref(5); // 每页显示的条数
+const currentPage = ref(1); // 当前页数
+const total = ref(10); // 总条数
+
+
+
+
 // 路由跳转
 const toChildSystem = (id) => {
-  router.push({ name: 'ChildSysManage' ,query: { id: id } }); // 跳转到子系统详情页面
+  router.push({ name: 'ChildSysManage', query: { id: 2 } }); // 跳转到子系统详情页面
 };
 
-//页面加载直接获取数据
-onMounted(() => {
-  getAllProject();
-});
+//响应式
+const tableData = ref<User[]>([]);
 
+const selectedIds = ref([]); // 存储被选中的项目的ID
 
 
 
@@ -99,21 +116,16 @@ onMounted(() => {
 
 interface User {
   id: number
-  total: number
   cycle: number
   name: string
-  description: Array<any>
+  description: string
   workLoad: number
   status: string
-  deadline: string
+  deadLine: string
   tags: Array<any>
   files: Array<any>
-  isDelete: boolean
-  principal_id: number
-  updatedAt: string
-  createdAt: string
-  completeTime: string
-  beginTime: string
+  principalUser: string
+
 
 }
 
@@ -128,49 +140,58 @@ const input1 = ref('');
 const input2 = ref('');
 
 
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-const multipleSelection = ref<User[]>([
+// const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+// const multipleSelection = ref<User[]>([
 
-]);
+// ]);
 
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
+// const handleSelectionChange = (val: User[]) => {
+//   multipleSelection.value = val;
+// };
 
 // 在 Vue 组件中添加 parseData 函数
 const parseData = (data) => {
-  const description = JSON.parse(data.description);
+
   const files = JSON.parse(data.files);
   const tags = JSON.parse(data.tags);
 
   return {
     id: data.id,
-    total: 20,
     cycle: data.cycle,
     name: data.name,
-    description: description,
+    description: data.description,
     workLoad: data.workLoad,
     status: data.status,
-    deadline: data.deadline,
+    deadLine: data.deadLine,
     tags: tags,
     files: files,
-    isDelete: data.isDelete,
-    principal_id: data.principalId,
-    updatedAt: data.updatedAt,
-    createdAt: data.createdAt,
-    completeTime: data.completeTime,
-    beginTime: data.beginTime
+    principalUser: data.principalUser
   };
 };
 
+
+// 监听 currentPage 的变化，当 currentPage 变化时请求对应页的数据
+watch(currentPage, () => {
+  fetchData();
+});
+
 //获取所有项目
-const getAllProject = () => {
-  const project = getManageList(getToken());
+const fetchData = () => {
+
+  const params = {
+    page: currentPage.value, // 当前页码
+    pageSize: pageSize.value, // 每页显示的条数
+    is: 1
+
+  };
+
+  const project = getManageList(params, getToken());
+
 
 
   // 处理接口数据 
   project.then(res => {
-    const data = res.data.data;
+    const data = res.data.data.list;
     console.log(data);
     if (data) {
       const newData = data.map(item => parseData(item)); // 使用先前定义的函数处理数据
@@ -189,44 +210,68 @@ const getAllProject = () => {
     });
 }
 
+fetchData();
 
-// 查询
-const search = () => {
-  //获取数据
-  const project = getManageListById(input1.value, getToken());
 
-  // 处理接口数据 
-  project.then(res => {
+//翻页处理
+// 翻页事件处理函数
+const handleCurrentChange = (page) => {
+  currentPage.value = page; // 更新 currentPage 的值
+};
 
-    const data = res.data.data;
-    console.log(data);
-    if (data) {
-      const newData = parseData(data); // 使用先前定义的函数处理数据
-      // 使用 tableData.value 进行添加
 
-      tableData.value.push(newData);
-      console.log(tableData.value);
+// 删除项目
+// 这个方法将在表格的选择项发生变化时被调用
+const handleSelectionChange = (selection) => {
+  selectedIds.value = selection.map(item => item.id); // 更新被选择的项目的ID数组
+};
 
-    } else {
-      console.log("没有数据");
-    }
+
+
+// 弹窗设置
+
+const confirmDelete = (selectedIds) => {
+  const message = `确定要删除ID为${selectedIds}的项目吗？`;
+
+  ElMessageBox.confirm(
+    message, {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    // type: 'warning',
+    center: true,
+  }).then(async () => {
+    const token = getToken();
+    for (let id of selectedIds) {
+      await deleteProject(id, token)
+        .then(() => {
+          console.log("项目删除成功", id);
+          fetchData();
+          ElMessage.success('项目删除成功');
         })
-    .catch(err => {
-      console.log(err);
+        .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 tableData = ref<User[]>([
-  //测试用例
-
-
-
-
-]);
-
+//编辑功能 
 
 
 
@@ -259,4 +304,60 @@ const tableData = ref<User[]>([
 .my-autocomplete li .highlighted .addr {
   color: #ddd;
 }
+
+/* 自定义弹窗样式 */
+.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>