删除和编辑功能

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']
 }

components.d.ts

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

src/api/manage.js

@@ -219,6 +219,52 @@ export const addModule = (body,token) => {
 
     })
 }
+/**
+ * 
+ * 删除子模块
+ * @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/views/personal/project/detail/manage.vue

@@ -2,8 +2,6 @@
     <div style=" width:100%;">
         <el-card style="max-width: 100vw;">
             <template #header><strong>子模块{{ projectId }}</strong></template>
-
-
         </el-card>
 
         <el-card class="card">
@@ -11,48 +9,51 @@
                 <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>
+                            <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 !== '05.状态' && item.label !== '07.简介'" style="margin-top: 10%;">{{
+                            <div v-if="item.label !== '07.简介'" style="margin-top: 10%;">
-                item.value
+                                <template v-if="editMode">
-            }}</div>
+                                    <input v-model="item.value" />
-                            <el-select v-if="item.label === '05.状态'" v-model="selectedStatus" placeholder="请选择状态"
+                                </template>
-                                style="width: 150px ;margin-top: 10%">
+                                <template v-else>
-                               
+                                    {{ item.value }}
-                            </el-select>
+                                </template>
-                            <textarea style="resize: none;margin-top: 10%;width: 150px;" v-if="item.label === '07.简介'"
+                            </div>
-                                v-model="item.value" rows="4" cols="50"></textarea>
+                            <textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 10%; 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 type="primary" style="width:80px">编辑</el-button>
+            <el-button @click="toggleEditMode" :type="editMode ? 'success' : 'primary'" style="width:80px">
-            <el-button style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button>
+                {{ editMode ? '保存' : '编辑' }}
-
+            </el-button>
+            <el-button style="width:80px ;background-color: #bd3124;color: azure;" @click="deleteModuleClick">删除</el-button>
         </div>
 
-
+        <el-alert>
-        <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 { getProjectModDetail, editModule, deleteModule } from '@/api/manage';
 import { getToken } from '@/utils/auth';
 
+
 const projectItems = ref([
     { label: '01.模块名称', value: '项目名称1' },
     { label: '02.模块周期', value: '3个月' },
@@ -63,10 +64,14 @@ const projectItems = ref([
     { label: '07.简介', value: '大王iu大概iudg拍高端屁股的怕耽搁u对爬过文档爬过无' },
 ]);
 
-const selectedStatus = ref('进行中');
+const editMode = ref(false); // 编辑模式状态
 
+
+
+
+//获取id
 const route = useRoute();
-const projectId = route.query.id;
+const projectId = Number(route.query.id);
 
 
 
@@ -75,42 +80,138 @@ const projectId = route.query.id;
 const parseData = (data) => {
 
 
-projectItems.value.forEach(item => {
+    projectItems.value.forEach(item => {
-    if (item.label === '01.模块名称') {
+        if (item.label === '01.模块名称') {
-        item.value = data.name;
+            item.value = data.name;
-    } else if (item.label === '02.模块周期') {
+        } else if (item.label === '02.模块周期') {
-        item.value = data.workLoad;
+            item.value = data.workLoad;
-    } else if (item.label === '03.工作量') {
+        } else if (item.label === '03.工作量') {
-        item.value = data.workLoad + "人/天";
+            item.value = data.workLoad ;
-    } else if (item.label === '04.负责人') {
+        } else if (item.label === '04.负责人') {
-        item.value = data.principalUser;
+            item.value = "1";
-    } else if (item.label === '05.状态') {
+        } else if (item.label === '05.状态') {
-        item.value = data.workLoad ? data.workLoad : '未知';
+            item.value = data.workLoad.toString();
-    } else if (item.label === '06.时间') {
+        } else if (item.label === '06.时间') {
-        item.value =  new Date(data.deadLine).toLocaleDateString();
+            item.value = new Date(data.deadLine).toLocaleDateString();
-    } else if (item.label === '07.简介') {
+        } else if (item.label === '07.简介') {
-        item.value = data.description;
+            item.value = data.description;
-    }
+        }
-})
+    })
 }
 
 //获取数据方法
-const fetchData = () => {
+const fetchData = async () => {
-    const project = getProjectModDetail(projectId, getToken());
+    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: ''
+    };
 
-    project.then(res => {
+    const formatDate = (dateStr) => {
-        const data = res.data.data;
+        const date = new Date(dateStr);
-        console.log(data);
+        const year = date.getFullYear();
-        if (data) {
+        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
-            parseData(data);
+        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());
+        res.then(response => {
+            if (response.data.code === 200) {
+                ElMessage.success('删除成功!');
+                //返回上一级页面
+                window.history.go(-1);
+            } else {
+                ElMessage.error('删除失败!');
+            }
+        }).catch(error => {
+            ElMessage.error('删除失败!'+error);
+        });
+    }).catch(() => {
+        //取消删除
+    });
+}