From 8680c52ad9bdcd3bd65f7e543e75e326ba4fd894 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CXCYH=E2=80=9D?= <“1561381013@qq.com”>
Date: Sun, 21 Apr 2024 02:49:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=92=8C=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                            |   1 +
 components.d.ts                              |   1 +
 src/api/manage.js                            |  46 +++++
 src/views/personal/project/detail/manage.vue | 195 ++++++++++++++-----
 4 files changed, 196 insertions(+), 47 deletions(-)

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 8139ac9..24e619c 100644
--- a/auto-imports.d.ts
+++ b/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']
 }
diff --git a/components.d.ts b/components.d.ts
index 3410aed..8c0f53f 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/api/manage.js b/src/api/manage.js
index 5a97cf7..6691ec5 100644
--- a/src/api/manage.js
+++ b/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
+        
+
+
+    })
+}
+
+
 
 
 
diff --git a/src/views/personal/project/detail/manage.vue b/src/views/personal/project/detail/manage.vue
index 389bbd1..035ea54 100644
--- a/src/views/personal/project/detail/manage.vue
+++ b/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%;">{{
-                item.value
-            }}</div>
-                            <el-select v-if="item.label === '05.状态'" v-model="selectedStatus" placeholder="请选择状态"
-                                style="width: 150px ;margin-top: 10%">
-                               
-                            </el-select>
-                            <textarea style="resize: none;margin-top: 10%;width: 150px;" v-if="item.label === '07.简介'"
-                                v-model="item.value" rows="4" cols="50"></textarea>
+                            <div v-if="item.label !== '07.简介'" style="margin-top: 10%;">
+                                <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: 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 style="width:80px ;background-color: #bd3124;color: azure;">删除</el-button>
-
+            <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 >
+        <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 => {
-    if (item.label === '01.模块名称') {
-        item.value = data.name;
-    } else if (item.label === '02.模块周期') {
-        item.value = data.workLoad;
-    } else if (item.label === '03.工作量') {
-        item.value = data.workLoad + "人/天";
-    } else if (item.label === '04.负责人') {
-        item.value = data.principalUser;
-    } else if (item.label === '05.状态') {
-        item.value = data.workLoad ? data.workLoad : '未知';
-    } else if (item.label === '06.时间') {
-        item.value =  new Date(data.deadLine).toLocaleDateString();
-    } else if (item.label === '07.简介') {
-        item.value = data.description;
-    }
-})
+    projectItems.value.forEach(item => {
+        if (item.label === '01.模块名称') {
+            item.value = data.name;
+        } else if (item.label === '02.模块周期') {
+            item.value = data.workLoad;
+        } else if (item.label === '03.工作量') {
+            item.value = data.workLoad ;
+        } else if (item.label === '04.负责人') {
+            item.value = "1";
+        } else if (item.label === '05.状态') {
+            item.value = data.workLoad.toString();
+        } else if (item.label === '06.时间') {
+            item.value = new Date(data.deadLine).toLocaleDateString();
+        } else if (item.label === '07.简介') {
+            item.value = data.description;
+        }
+    })
 }
 
 //获取数据方法
-const fetchData = () => {
-    const project = getProjectModDetail(projectId, getToken());
+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: ''
+    };
 
-    project.then(res => {
-        const data = res.data.data;
-        console.log(data);
-        if (data) {
-            parseData(data);
+    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());
+        res.then(response => {
+            if (response.data.code === 200) {
+                ElMessage.success('删除成功!');
+                //返回上一级页面
+                window.history.go(-1);
+            } else {
+                ElMessage.error('删除失败!');
+            }
+        }).catch(error => {
+            ElMessage.error('删除失败!'+error);
+        });
+    }).catch(() => {
+        //取消删除
+    });
+}