158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
Vue
<template>
|
|
<div style=" width:100%;">
|
|
<el-card style="max-width: 100vw;">
|
|
<template #header><strong>子模块{{ projectId }}</strong></template>
|
|
</el-card>
|
|
|
|
<el-card class="card">
|
|
<el-row :gutter="20">
|
|
<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>
|
|
</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 !== '07.简介'" style="margin-top: 11%;">
|
|
<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: 15%; 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 style="width: 80px;background-color: #409eff;color: azure" @click="toBack" >完成</el-button>
|
|
</div>
|
|
|
|
|
|
<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 { getToken } from '@/utils/auth';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
|
const projectItems = ref([
|
|
{ label: '01.模块名称', value: '' },
|
|
{ label: '02.模块周期', value: '' },
|
|
{ label: '03.工作量', value: '' },
|
|
{ label: '04.负责人ID', value: '' },
|
|
{ label: '05.状态', value: '' },
|
|
{ label: '06.时间', value: '' },
|
|
{ label: '07.简介', value: '' },
|
|
]);
|
|
|
|
const editMode = ref(false); // 编辑模式状态
|
|
|
|
|
|
|
|
|
|
//获取id
|
|
const route = useRoute();
|
|
const projectId = Number(route.query.ModId);
|
|
|
|
|
|
|
|
//加载数据
|
|
//修改表单内数据
|
|
const parseData = (data) => {
|
|
|
|
|
|
projectItems.value.forEach(item => {
|
|
if (item.label === '01.模块名称') {
|
|
item.value = data.name;
|
|
} else if (item.label === '02.模块周期') {
|
|
item.value = data.cycle;
|
|
} else if (item.label === '03.工作量') {
|
|
item.value = data.workLoad ;
|
|
} else if (item.label === '04.负责人ID') {
|
|
item.value = "1";
|
|
} else if (item.label === '05.状态') {
|
|
item.value = data.status.toString();
|
|
} else if (item.label === '06.时间') {
|
|
item.value = new Date(data.deadLine).toLocaleDateString();
|
|
} else if (item.label === '07.简介') {
|
|
item.value = data.description;
|
|
}
|
|
})
|
|
}
|
|
|
|
//获取数据方法
|
|
const fetchData = async () => {
|
|
console.log(projectId);
|
|
|
|
const res = await getProjectModDetail(projectId, getToken());
|
|
console.log(res);
|
|
if (res.data.data) {
|
|
parseData(res.data.data); // 解析数据
|
|
ElMessage.success('加载成功!');
|
|
}
|
|
};
|
|
|
|
|
|
//完成返回上一级
|
|
const toBack = () => {
|
|
window.history.go(-1);
|
|
}
|
|
|
|
|
|
|
|
fetchData();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.my-autocomplete li {
|
|
line-height: normal;
|
|
padding: 7px;
|
|
}
|
|
|
|
.my-autocomplete li .name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.my-autocomplete li .addr {
|
|
font-size: 12px;
|
|
color: #b4b4b4;
|
|
}
|
|
|
|
.my-autocomplete li .highlighted .addr {
|
|
color: #ddd;
|
|
}
|
|
|
|
.card {
|
|
width: 28%;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
</style> |