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-17 21:56:23 +08:00
parent d27d68d8d0
commit 7e1dc44569
13 changed files with 897 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components.d.ts vendored
View File

@ -20,7 +20,6 @@ declare module '@vue/runtime-core' {
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@ -38,24 +37,15 @@ declare module '@vue/runtime-core' {
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRate: typeof import('element-plus/es')['ElRate']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree']
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']
@ -82,7 +72,4 @@ declare module '@vue/runtime-core' {
UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
}
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
}

24
src/api/charge.js Normal file
View File

@ -0,0 +1,24 @@
import axios from "axios";
function getCurrentTimestamp() {
return new Date().getTime();
}
const api = 'http://nbxt.oa.x-lf.cn'
/**
* 获取我参与的项目列表
*
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
const getChargeProjectList = (token)=> {
return axios({
method: 'get',
url: `${api}/project/participate/get`,
headers: {
'Authorization': `Bearer ${token}`,
'Timestamp':getCurrentTimestamp()
}
})
}

76
src/api/manage.js
View File

@ -48,14 +48,14 @@ export const getproject = (projectId, token) => {
/**
* 获取项目信息
* @param projectId 项目id
* 获取我管理页面的项目列表(接口有问题)
*
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const searchModel = (projectId ,token) => {
export const getManageList = (token) => {
return axios({
url: api +"/module/get?projectId=" + projectId ,
url: api +"/project/child/get" ,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
@ -69,3 +69,71 @@ export const searchModel = (projectId ,token) => {
})
}
// 我管理的所有接口
/**
* 获取我管理的页面的搜索
*
* @param projectId 项目id
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getManageListById = (projectId, token) => {
return axios({
url: api +'/project/get/' + projectId,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}
/**
* 获取我管理的页面的项目列表
*
* @param projectId 项目id
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getManageProjectList = (token) => {
return axios({
url: api +'/project/child/get' ,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}
/**
* 获取我管理的页面的子模块项目列表(接口没数据)
*
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getProjectList = (token) => {
return axios({
url: api +"/project/module/get" ,
method: "get",
headers: {
'Authorization': 'Bearer ' + token,
'Timestamp': getCurrentTimestamp()
}
})
}

2
src/layout/components/Navbar.vue
View File

@ -2,7 +2,7 @@
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSidebar" />
<!-- 面包屑导航 -->
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">

107
src/router/index.ts
View File

@ -11,6 +11,7 @@ const Layout = ():RouteComponent => import('@/layout/index.vue');
// import chartsRouter from './modules/charts';
// import nestedRouter from './modules/nested';
// import tableRouter from './modules/table';
import manageRouter from './modules/manage';
/**
* constantRoutes
@ -113,110 +114,10 @@ export const constantRoutes:RouteRecordRaw[] = [
* 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
*/
export const asyncRoutes:RouteRecordRaw[] = [
// {
// path: '/permission',
// component: Layout,
// redirect: '/permission/page',
// name: 'Permission',
// meta: {
// alwaysShow: true, // will always show the root menu
// title: 'Permission',
// icon: 'lock',
// roles: ['admin', 'editor','teacher_user'] // you can set roles in root nav
// },
// children: [
// {
// path: 'page',
// component: () => import('@/views/permission/page.vue'),
// name: 'PagePermission',
// meta: {
// title: 'Page Permission',
// roles: ['admin','teacher_user'] // or you can only set roles in sub nav
// }
// },
// {
// path: 'directive',
// component: () => import('@/views/permission/directive.vue'),
// name: 'DirectivePermission',
// meta: {
// title: 'Directive Permission'
// // if do not set roles, means: this page does not require permission
// }
// },
// {
// path: 'role',
// component: () => import('@/views/permission/role.vue'),
// name: 'RolePermission',
// meta: {
// title: 'Role Permission',
// roles: ['admin','teacher']
// }
// }
// ]
// },
// 个人项目
{
path: '/myself',
component: Layout,
redirect: 'noRedirect',
meta: {
alwaysShow: false, // 始终显示根菜单
title: '个人项目',
icon: 'nested',
roles: ['admin', 'teacher_user']
},
children: [
{
path: 'participate',
component: () => import('@/views/personal/project/participate.vue'),
name: 'participate',
meta: { title: '我负责的', icon: 'user', affix: true }
},
//我管理的以及子页面
{
path: 'manage',
component: () => import('@/views/personal/project/manage.vue'),
name: 'Manage',
meta: { title: '我管理的', icon: 'user', affix: true, },
},
{
path: 'childSysManage',
component: () => import('@/views/personal/project/childSystem/manage.vue'),
name: 'ChildSysManage',
meta: { title: '子系统', breadcrumb: true , hidden: true },
},
{
path: 'childModManage',
component: () => import('@/views/personal/project/childModel/manage.vue'),
name: 'ChildModManage',
meta: { title: '子模块', breadcrumb: true , hidden: true }
},
//我参与的以及子界面
{
path: 'charge',
component: () => import('@/views/personal/project/charge.vue'),
name: 'Charge',
meta: { title: '我参与的', icon: 'user', affix: true }
},
{
path: 'childSysCharge',
component: () => import('@/views/personal/project/childSystem/manage.vue'),
name: 'ChildSysCharge',
meta: { title: '子系统', breadcrumb: true , hidden: true },
},
{
path: 'childModCharge',
component: () => import('@/views/personal/project/childModel/manage.vue'),
name: 'ChildModCharge',
meta: { title: '子模块', breadcrumb: true , hidden: true }
},
]
}
,
manageRouter,
// {

81
src/router/modules/manage.ts Normal file
View File

@ -0,0 +1,81 @@
const Layout = () => import('@/layout/index.vue')
const manageRouter = {
path: '/myslef',
component: Layout,
meta: {
alwaysShow: false, // 始终显示根菜单
title: '个人项目',
icon: 'nested',
roles: ['admin', 'teacher_user']
},
children: [
{
path: 'participate',
component: () => import('@/views/personal/project/participate.vue'),
name: 'participate',
meta: { title: '我负责的', icon: 'user', affix: true }
},
//我管理的以及子页面
{
path: 'manage',
component: () => import('@/views/personal/project/manage.vue'),
name: 'Manage',
meta: { title: '我管理的', icon: 'user', affix: true, },
},
{
path: 'childSysManage',
component: () => import('@/views/personal/project/childSystem/manage.vue'),
name: 'ChildSysManage',
meta: { title: '我管理的 / 子系统', breadcrumb: true , hidden: true },
},
{
path: 'childModManage',
component: () => import('@/views/personal/project/childModel/manage.vue'),
name: 'ChildModManage',
meta: { title: '我管理的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
},
{
path:'manageDetail',
component:()=>import('@/views/personal/project/detail/manage.vue'),
name: 'ManageDetail',
meta: { title: '我管理的 / 子系统 / 子模块 / 详情', breadcrumb: true , hidden: true }
},
//我参与的以及子界面
{
path: 'charge',
component: () => import('@/views/personal/project/charge.vue'),
name: 'Charge',
meta: { title: '我参与的', icon: 'user', affix: true }
},
{
path: 'childSysCharge',
component: () => import('@/views/personal/project/childSystem/charge.vue'),
name: 'ChildSysCharge',
meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true ,affix:false},
},
{
path: 'childModCharge',
component: () => import('@/views/personal/project/childModel/charge.vue'),
name: 'ChildModCharge',
meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
},
{
path: 'chargeDetail',
component:()=>import('@/views/personal/project/detail/charge.vue'),
name: 'ChargeDetail',
meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true }
}
]
}
export default manageRouter

285
src/views/personal/project/charge.vue
View File

@ -1,136 +1,173 @@
<template>
<div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><strong >我参与的</strong></template>
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
名称
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
状态
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
<el-button type="primary" style="width:80px">查询</el-button>
<el-button style="width:80px">重置</el-button>
</div>
</div>
</el-card>
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
<div style="display:flex;flex-direction: row;justify-content: space-between">
<el-button
text
type=''
>项目列表</el-button
>
</div>
<el-table
ref="multipleTableRef"
:data="tableData"
style="max-width: 100vw;"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column label="序号" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="项目名称" width="120" />
<el-table-column property="address" label="工作量" show-overflow-tooltip />
<el-table-column property="address" label="周期" />
<el-table-column property="address" label="负责人" />
<el-table-column property="address" label="状态" />
<el-table-column property="address" label="子系统简介" />
<el-table-column property="address" label="截止时间" />
<el-table-column property="address" label="操作" >
<el-button
link
style="color:deepskyblue"
@click="toChildSystem"
>查看详情</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>
<div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><strong>我参与的</strong></template>
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
名称
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
状态
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
<el-button type="primary" style="width:80px">查询</el-button>
<el-button style="width:80px">重置</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
</el-card>
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
<div style="display:flex;flex-direction: row;justify-content: space-between">
<el-button text type=''>项目列表</el-button>
</div>
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
@selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column label="序号" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="项目名称" width="120" />
<el-table-column property="address" label="工作量" show-overflow-tooltip />
<el-table-column property="address" label="周期" />
<el-table-column property="address" label="负责人" />
<el-table-column property="address" label="状态"/>
<el-table-column property="address" label="项目简介" />
<el-table-column property="address" label="截止时间" />
<el-table-column property="address" label="操作">
<el-button link style="color:deepskyblue" @click="toChildSystem">查看详情</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>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
import { getManageList } from '@/api/manage.js';
import { getToken } from '@/utils/auth';
const router = useRouter();
// 路由跳转
const toChildSystem = () => {
router.push({ name: 'ChildSysManage' }); // 跳转到子系统详情页面
router.push({ name: 'ChildSysCharge' }); // 跳转到子系统详情页面
};
const input = ref('');
interface User {
date: string
name: string
address: string
interface User {
id: number
cycle: number
name: string
description: string
workLoad: number
card: string
isFinish: number
principalUser: string
dateline: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
//获取数据
const project = getManageList(getToken());
//响应式
const tableData = ref<User[]>([
//测试用例
{
id: 4,
cycle: 2,
name: "项目2",
description: "xxxxxxx",
workLoad: 12,
card: "java",
isFinish: 2,
principalUser: "teacher_user",
dateline: "2021-12-31"
},
{
id: 4,
cycle: 2,
name: "项目2",
description: "xxxxxxx",
workLoad: 12,
card: "java",
isFinish: 2,
principalUser: "teacher_user",
dateline: "2021-12-31"
},
]);
// 处理接口数据
project.then(res => {
const data = res.data;
console.log(data);
if (data) {
const dataProject: User = {
id: 4,
cycle: 2,
name: "项目2",
description: "xxxxxxx",
workLoad: 12,
card: "java",
isFinish: 2,
principalUser: "teacher_user",
dateline: "2021-12-31"
};
// 使用 tableData.value 进行添加
tableData.value.push(dataProject);
} else {
console.log("没有数据");
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
];
</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;
}
</style>
})
.catch(err => {
console.log(err);
});
</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;
}
</style>

82
src/views/personal/project/childSystem/manage.vue
View File

@ -41,7 +41,9 @@
<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>
<el-alert >
<router-view />
</el-alert>
</div>
</template>
@ -49,8 +51,8 @@
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
import { searchModel } from '@/api/manage.js';
import { getToken } from '@/utils/auth';
// import { searchModel } from '@/api/manage.js';
// import { getToken } from '@/utils/auth';
//跳转到子模块
const router = useRouter();
@ -84,36 +86,50 @@ const handleSelectionChange = (val: User[]) => {
//搜索子系统
//获取数据
const searchSys = searchModel(1, getToken());
console.log(searchSys);
const tableData = ref<User[]>([]);
// console.log(searchSys);
const tableData = ref<User[]>([
{
id: 1,
cycle: 1,
description: '子系统1',
isDelete: 0,
isFinish: 1,
name: '子系统1',
principalId: 1,
projectId: 1,
status: true,
type: 1,
workLoad: 1
}
]);
//处理数据
searchSys.then(res => {
const data = res.data.data;
console.log(data);
// searchSys.then(res => {
// const data = res.data.data;
// console.log(data);
if (data) {
tableData.value = data.map(item =>{
const addproject: User = {
id: item.id,
cycle: item.cycle,
description: item.description,
isDelete: item.isDelete,
isFinish: item.isFinish,
name: item.name,
principalId: item.principalId,
projectId: item.projectId,
status: item.status,
type: item.type,
workLoad: item.workLoad
};
// if (data) {
// tableData.value = data.map(item =>{
// const addproject: User = {
// id: item.id,
// cycle: item.cycle,
// description: item.description,
// isDelete: item.isDelete,
// isFinish: item.isFinish,
// name: item.name,
// principalId: item.principalId,
// projectId: item.projectId,
// status: item.status,
// type: item.type,
// workLoad: item.workLoad
// };
tableData.value.push(addproject);
// tableData.value.push(addproject);
})
// })
@ -121,16 +137,16 @@ searchSys.then(res => {
}else{
console.log("没有数据");
// }else{
// console.log("没有数据");
}
// }
console.log(tableData.value);
// console.log(tableData.value);
}).catch(err => {
console.log(err);
});
// }).catch(err => {
// console.log(err);
// });

143
src/views/personal/project/childmodel/charge.vue
View File

@ -0,0 +1,143 @@
<template>
<div style=" width:100%">
<el-card style="max-width: 100vw;margin: 1.5vw;">
<template #header><strong >子系统1</strong></template>
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
名称
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
状态
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
<el-button type="primary" style="width:80px">查询</el-button>
<el-button style="width:80px">重置</el-button>
</div>
</div>
</el-card>
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
<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 style="width:80px ;background-color: #bd3124;color: azure;">删除</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 label="序号" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="子模块名称" width="120" />
<el-table-column property="address" label="工作量" show-overflow-tooltip />
<el-table-column property="address" label="周期" />
<el-table-column property="address" label="负责人" />
<el-table-column property="address" label="状态" />
<el-table-column property="address" label="子系统简介" />
<el-table-column property="address" label="截止时间" />
<el-table-column property="address" label="操作" >
<el-button
link
style="color:deepskyblue"
@click="toDetail"
>查看详情</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>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
// 路由跳转
const toDetail = () => {
router.push({ name: 'ChargeDetail' }); // 跳转到子系统详情页面
};
interface User {
date: string
name: string
address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
const input = ref('');
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
];
</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;
}
</style>

12
src/views/personal/project/childmodel/manage.vue
View File

@ -51,7 +51,7 @@
<el-button
link
style="color:deepskyblue"
@click=""
@click="toDetail"
>查看详情</el-button
>
</el-table-column>
@ -65,7 +65,7 @@
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
/>
</el-card>
<router-view/>
</div>
</template>
@ -73,8 +73,16 @@
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
// 路由跳转
const toDetail = () => {
router.push({ name: 'ManageDetail' }); // 跳转到子系统详情页面
};
interface User {
date: string
name: string

101
src/views/personal/project/detail/charge.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div style=" width:100%;">
<el-card style="max-width: 100vw;">
<template #header><strong>子模块1</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 !== '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-option label="未开始" value="未开始"></el-option>
<el-option label="进行中" value="进行中"></el-option>
<el-option label="已完成" value="已完成"></el-option>
<el-option label="异常暂停" value="异常暂停"></el-option>
</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>
</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>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const projectItems = ref([
{ label: '01.模块名称', value: '名称1' },
{ label: '02.模块周期', value: '3个月' },
{ label: '03.工作量', value: '100小时' },
{ label: '04.负责人', value: '张三' },
{ label: '05.状态', value: '进行中' },
{ label: '06.时间', value: '2024-01-01 12:00:00' },
{ label: '07.简介', value: '大王iu大概iudg拍高端屁股的怕耽搁u对爬过文档爬过无' },
]);
const selectedStatus = ref('进行中');
</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>

103
src/views/personal/project/detail/manage.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div style=" width:100%;">
<el-card style="max-width: 100vw;">
<template #header><strong>子模块1</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 !== '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-option label="未开始" value="未开始"></el-option>
<el-option label="进行中" value="进行中"></el-option>
<el-option label="已完成" value="已完成"></el-option>
<el-option label="异常暂停" value="异常暂停"></el-option>
</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>
</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>
</div>
<el-alert >
<router-view />
</el-alert>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const projectItems = ref([
{ label: '01.模块名称', value: '项目名称1' },
{ label: '02.模块周期', value: '3个月' },
{ label: '03.工作量', value: '100小时' },
{ label: '04.负责人', value: '张三' },
{ label: '05.状态', value: '进行中' },
{ label: '06.时间', value: '2024-01-01 12:00:00' },
{ label: '07.简介', value: '大王iu大概iudg拍高端屁股的怕耽搁u对爬过文档爬过无' },
]);
const selectedStatus = ref('进行中');
</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>

243
src/views/personal/project/manage.vue
View File

@ -5,14 +5,14 @@
<div style="display:flex;flex-direction:row;justify-content: space-around ">
<div>
名称
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
状态
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
</div>
<div>
<el-button type="primary" style="width:80px">查询</el-button>
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
<el-button style="width:80px">重置</el-button>
</div>
</div>
@ -25,52 +25,102 @@
@selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column label="序号" width="120">
<template v-slot="{$index}">{{ $index+1 }}</template>
<template v-slot="{ $index }">{{ $index + 1 }}</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="isFinish" label="状态" />
<el-table-column property="description" label="子系统简介" />
<el-table-column property="id" label="截止时间" />
<el-table-column property="isFinish" label="文档（点击下载）">
<el-button link style="color:deepskyblue">接口文档</el-button>
<el-button link style="color:deepskyblue">需求文档</el-button>
</el-table-column>
<el-table-column property="tags" label="标签">
<template v-slot="{ row }">
<span v-for="(tag, index) in row.tags" :key="index">{{ tag.toString() }} </span>
</template>
</el-table-column>
<el-table-column property="description" label="项目简介" >
<template v-slot="{row}">
<span v-for="(des, index) in row.description" :key="index">{{ des.toString() }} </span>
</template>
</el-table-column>
<el-table-column property="dateline" label="截止时间" />
<el-table-column property="name" label="操作">
<el-button link style="color:deepskyblue" @click="toChildSystem">查看详情</el-button>
</el-table-column>
</el-table>
<el-pagination larger background layout="prev, pager, next" :total="50" class="mt-4"
<el-pagination larger background layout="prev, pager, next" :total="40" class="mt-4"
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
</el-card>
<el-alert>
<router-view />
</el-alert>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref ,onMounted} from 'vue';
import { ElTable } from 'element-plus';
import { getproject } from '@/api/manage.js';
import { getManageListById } from '@/api/manage.js';
import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router';
import { useRouter } from 'vue-router';
import { getManageList } from '@/api/manage.js';
const router = useRouter();
// 路由跳转
const toChildSystem = () => {
router.push({ name: 'ChildSysManage' ,params:{ token : getToken()}}); // 跳转到子系统详情页面
router.push({ name: 'ChildSysManage' }); // 跳转到子系统详情页面
};
//页面加载直接获取数据
onMounted(() => {
getAllProject();
});
interface User {
id: number
total: number
cycle: number
name: string
description: string
description: Array<any>
workLoad: number
isFinish: number
principalUser: string
status: string
deadline: string
tags: Array<any>
files: Array<any>
isDelete: boolean
principal_id: number
updatedAt: string
createdAt: string
completeTime: string
beginTime: string
}
// 数组转出
// 获取输入框内容
const input1 = ref('');
const input2 = ref('');
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
@ -78,99 +128,102 @@ const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
// const tableData: User[] = [
// {
// date: '2016-05-03',
// name: 'Tom',
// address: 'No. 189, Grove St, Los Angeles'
// },
// {
// date: '2016-05-02',
// name: 'Tom',
// address: 'No. 189, Grove St, Los Angeles'
// },
// {
// date: '2016-05-04',
// name: 'Tom',
// address: 'No. 189, Grove St, Los Angeles'
// },
// {
// date: '2016-05-01',
// name: 'Tom',
// address: 'No. 189, Grove St, Los Angeles'
// }
// 在 Vue 组件中添加 parseData 函数
const parseData = (data) => {
const description = JSON.parse(data.description);
const files = JSON.parse(data.files);
const tags = JSON.parse(data.tags);
return {
id: data.id,
total:20,
cycle: data.cycle,
name: data.name,
description: description,
workLoad: data.workLoad,
status: data.status,
deadline: data.deadline,
tags: tags,
files: files,
isDelete: data.isDelete,
principal_id: data.principalId,
updatedAt: data.updatedAt,
createdAt: data.createdAt,
completeTime: data.completeTime,
beginTime: data.beginTime
};
};
//获取所有项目
const getAllProject = () => {
const project = getManageList(getToken());
// 处理接口数据
project.then(res => {
const data = res.data.data;
console.log(data);
if (data) {
const newData = data.map(item => parseData(item)); // 使用先前定义的函数处理数据
// 使用 tableData.value 进行添加
tableData.value = newData;
console.log(tableData.value);
} else {
console.log("没有数据");
}
})
.catch(err => {
console.log(err);
});
}
// 查询
const search = () => {
//获取数据
const project = getManageListById(input1.value, getToken());
// 处理接口数据
project.then(res => {
const data = res.data.data;
console.log(data);
if (data) {
const newData = parseData(data); // 使用先前定义的函数处理数据
// 使用 tableData.value 进行添加
tableData.value.push(newData);
console.log(tableData.value);
} else {
console.log("没有数据");
}
})
.catch(err => {
console.log(err);
});
}
// ];
//获取数据
const project = getproject(2, getToken());
//响应式
const tableData = ref<User[]>([
//测试用例
{
id: 4,
cycle: 2,
name: "shij",
description: "null",
workLoad: 1,
isFinish: 2,
principalUser: "teacher_user",
},
{
id: 4,
cycle: 2,
name: "shij",
description: "null",
workLoad: 1,
isFinish: 2,
principalUser: "teacher_user",
},
{
id: 4,
cycle: 2,
name: "shij",
description: "null",
workLoad: 1,
isFinish: 2,
principalUser: "teacher_user",
},
]);
// 处理接口数据
project.then(res => {
const data = res.data.data[0];
if (data) {
const dataProject: User = {
id: data.id,
cycle: data.cycle,
name: data.name,
description: data.description,
workLoad: data.workLoad,
isFinish: data.isFinish,
principalUser: data.principalUser
};
// 使用 tableData.value 进行访问
tableData.value.push(dataProject);
} else {
console.log("没有数据");
}
})
.catch(err => {
console.log(err);
});
const input = ref('');