WxxyDeveloper/Jsl-OA-Web-Re
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

删除和编辑功能

Browse Source
This commit is contained in:
“XCYH” 2024-04-21 02:49:08 +08:00
parent 5410c3adf0
commit 8680c52ad9
4 changed files with 196 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
auto-imports.d.ts vendored
View File

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

1
components.d.ts vendored
View File

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

46
src/api/manage.js
View File

@ -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
})
}

195
src/views/personal/project/detail/manage.vue
View File

@ -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(() => {
//取消删除
});
}