编辑功能完成

auto-imports.d.ts

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

components.d.ts

@@ -48,6 +48,7 @@ declare module '@vue/runtime-core' {
     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

@@ -177,23 +177,27 @@ export const deleteProject = (id,token) => {
 
     })
 }
-// 添加项目接口
 /**
- * 添加项目
- * @param data 要添加的项目数据
- * @returns {Promise<AxiosResponse<any>>} 返回API响应
+ * 修改项目信息
+ * @param {Object} body 包含项目更新信息的对象
+ * @param {number} id 项目ID
+ * @param {string} token 访问令牌
+ * @returns {Promise<AxiosResponse<any>>}
  */
-export const addProject = (data ,token) => {
+export const editProject = (body ,id,token) => {
     return axios({
-      url: api + "/project/add", // 替换为实际的项目API端点
-      method: "post", // 使用POST方法添加项目
-      headers: {
-        'Authorization': 'Bearer ' + token,
-        'Timestamp': getCurrentTimestamp()
-      },
-      data: data  // 将要添加的项目数据传递给API
-    });
-  }
+        url: api +"/project/edit?id=" + id ,
+        method: "put",
+        headers: {
+            'Authorization': 'Bearer ' + token,
+            'Timestamp': getCurrentTimestamp()
+        },
+        data:body
+
+
+    })
+}
+
 
 
 

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

@@ -66,7 +66,7 @@ import { getProjectSysList } from '@/api/manage';
 const router = useRouter();
 
 const toChildModel = (id) => {
-  router.push({ name: 'ChildModManage' , query: { id: 3 } })
+  router.push({ name: 'ChildModManage' , query: { id: id } })
 };
 
 
@@ -136,7 +136,7 @@ const initialTableData = ref<User[]>([]);
       console.log(res);
       
       const data = res.data.data
-      console.log(data);
+      
       
       
       if(data){

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

@@ -21,61 +21,86 @@
       <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">新增</el-button>
-          
+          <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 type="selection" width="55" /> -->
         <el-table-column label="序号" width="120">
-          <template #default="{row}">{{row.id }}</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="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 property="description" label="子模块简介" #default="{ row }">
+          <span>{{ row.description }}</span>
         </el-table-column>
-        <el-table-column property="address" label="操作" #default="{row}">
+        <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="50" class="mt-4"
         style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
     </el-card>
-    <router-view />
+    <!-- 编辑弹窗 -->
+    <el-dialog title="编辑信息" :visible.sync="dialogVisible" @click="dialogVisible = true">
+      <el-form ref="editForm" :model="editForm" label-width="100px">
+        <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>
+      <span slot="footer" class="dialog-footer">
+        <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 } from 'element-plus';
+import { ElTable ,ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
 import { getProjectModList } from '@/api/manage';
-import { useRouter ,useRoute} from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { getToken } from '@/utils/auth';
 
 
 
 const router = useRouter();
-
+const dialogVisible = ref(true);
+const editForm = ref({
+  name: '',
+  status: '',
+  // 添加其他需要编辑的表单项
+});
+// 点击编辑按钮打开弹窗
+const openEditDialog = () => {
+  dialogVisible.value = true;
+};
 
 
 // 路由跳转
 const toDetail = (id) => {
-  router.push({ name: 'ManageDetail' ,query: { id: id } }); // 跳转到子系统详情页面
+  router.push({ name: 'ManageDetail', query: { id: id } }); // 跳转到子系统详情页面
 };
 
 interface User {
   id: number
   name: string
   principalId: number
-  principalUser:string
+  principalUser: string
   workLoad: number
   description: { description: string }
   status: string
@@ -94,9 +119,9 @@ const handleSelectionChange = (val: User[]) => {
 
 const initialTableData = ref<User[]>([]);
 const tableData = ref<User[]>([
- 
-]) ;
-  
+
+]);
+
 
 
 
@@ -107,45 +132,45 @@ const sysId = route.query.id;
 
 //处理接口方法
 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,
+
+  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 fetchData = () => {
   //请求数据
-  const project = getProjectModList(sysId,getToken());
+  const project = getProjectModList(sysId, getToken());
   console.log(project);
   //处理数据
-  project.then(res=>{
+  project.then(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
 
-      }
-  }).catch(err=>{
+    if (data) {
+      const newData = data.map(item => parseData(item))
+      //  console.log(newData);
+
+      tableData.value = [...newData, ...tableData.value];
+      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
+
+    }
+  }).catch(err => {
     console.log(err);
   })
-  
+
 }
 fetchData();
 const input1 = ref('');

src/views/personal/project/manage.vue

@@ -23,7 +23,7 @@
       <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 type="primary" style="width:80px" @click="showEditDialog">编辑</el-button>
           <el-button style="width:80px ;background-color: #bd3124;color: azure;"
             @click="handleDeleteProjects">删除</el-button>
         </div>
@@ -73,10 +73,41 @@
         :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>
+    <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>
@@ -86,7 +117,11 @@ 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 } from '@/api/manage.js';
+import { getManageList, deleteProject, editProject } from '@/api/manage.js';
+
+
+
+
 
 
 // 初始化路由
@@ -95,12 +130,17 @@ const router = useRouter();
 // 定义响应式变量
 const pageSize = ref(5);
 const currentPage = ref(1);
-const total = ref(10);
+const total = ref(6);
 const input1 = ref('');
 const input2 = ref('');
 const tableData = ref<User[]>([]);
 const selectedIds = ref([]);
 
+
+
+
+
+
 // 定义用户接口
 interface User {
   id: number;
@@ -149,16 +189,20 @@ const fetchData = () => {
   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 newData = data.map(item => parseData(item));
+      console.log(newData);
+      
       tableData.value = newData;
+      console.log(tableData.value);
+      
       initialTableData.value = tableData.value.slice();
     } else {
       console.log("没有可用数据");
@@ -247,8 +291,106 @@ const reset = () => {
 
 // 定义跳转到子系统的函数
 const toChildSystem = (id) => {
-  router.push({ name: 'ChildSysManage', query: { id: 2 } });
+  router.push({ name: 'ChildSysManage', query: { id: 4 } });//目前只有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;
+  
+    
+    isDialogVisible.value = true;
+  } else {
+    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>