feature-sht #3
|
|
@ -12,7 +12,7 @@ const api = 'http://nbxt.oa.x-lf.cn'
|
||||||
* @param token 访问令牌
|
* @param token 访问令牌
|
||||||
* @returns {Promise<AxiosResponse<any>> | *}
|
* @returns {Promise<AxiosResponse<any>> | *}
|
||||||
*/
|
*/
|
||||||
export const getChargeProjectList = (token)=> {
|
export const getParticipateProjectList = (token)=> {
|
||||||
return axios({
|
return axios({
|
||||||
method: 'get',
|
method: 'get',
|
||||||
url: `${api}/project/participate/get`,
|
url: `${api}/project/participate/get`,
|
||||||
|
|
@ -15,9 +15,9 @@ const manageRouter = {
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'participate',
|
path: 'charge',
|
||||||
component: () => import('@/views/personal/project/participate.vue'),
|
component: () => import('@/views/personal/project/charge.vue'),
|
||||||
name: 'participate',
|
name: 'Charge',
|
||||||
meta: { title: '我负责的', icon: 'user', affix: true }
|
meta: { title: '我负责的', icon: 'user', affix: true }
|
||||||
},
|
},
|
||||||
//我管理的以及子页面
|
//我管理的以及子页面
|
||||||
|
|
@ -50,28 +50,28 @@ const manageRouter = {
|
||||||
},
|
},
|
||||||
//我参与的以及子界面
|
//我参与的以及子界面
|
||||||
{
|
{
|
||||||
path: 'charge',
|
path: 'participate',
|
||||||
component: () => import('@/views/personal/project/charge.vue'),
|
component: () => import('@/views/personal/project/participate.vue'),
|
||||||
name: 'Charge',
|
name: 'Participate',
|
||||||
meta: { title: '我参与的', icon: 'user', affix: true }
|
meta: { title: '我参与的', icon: 'user', affix: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'childSysCharge',
|
path: 'childSysParticipate',
|
||||||
component: () => import('@/views/personal/project/childSystem/charge.vue'),
|
component: () => import('@/views/personal/project/childSystem/participate.vue'),
|
||||||
name: 'ChildSysCharge',
|
name: 'ChildSysParticipate',
|
||||||
meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true ,affix:false},
|
meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true ,affix:false},
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'childModCharge',
|
path: 'childModParticipate',
|
||||||
component: () => import('@/views/personal/project/childModel/charge.vue'),
|
component: () => import('@/views/personal/project/childModel/participate.vue'),
|
||||||
name: 'ChildModCharge',
|
name: 'ChildModParticipate',
|
||||||
meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
|
meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'chargeDetail',
|
path: 'participateDetail',
|
||||||
component:()=>import('@/views/personal/project/detail/charge.vue'),
|
component:()=>import('@/views/personal/project/detail/participate.vue'),
|
||||||
name: 'ChargeDetail',
|
name: 'ParticipateDetail',
|
||||||
meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true }
|
meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,199 +1,3 @@
|
||||||
<template>
|
<template>
|
||||||
<div style=" width:100%">
|
hi
|
||||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
</template>
|
||||||
<template #header><strong>我参与的</strong></template>
|
|
||||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
|
||||||
<div>
|
|
||||||
名称
|
|
||||||
<el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
状态
|
|
||||||
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
|
||||||
<el-button style="width:80px" @click="reset">重置</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="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="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 { getChargeProjectList } from '@/api/charge.js';
|
|
||||||
import { getToken } from '@/utils/auth';
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
interface User {
|
|
||||||
id: number;
|
|
||||||
cycle: number;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
workLoad: number;
|
|
||||||
card: string;
|
|
||||||
isFinish: number;
|
|
||||||
principalUser: string;
|
|
||||||
dateline: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const input1 = ref('');
|
|
||||||
const input2 = ref('');
|
|
||||||
const tableData = ref<User[]>([
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
cycle: 2,
|
|
||||||
name: "项目2",
|
|
||||||
description: "xxxxxxx",
|
|
||||||
workLoad: 12,
|
|
||||||
card: "java",
|
|
||||||
isFinish: 3,
|
|
||||||
principalUser: "teacher_user",
|
|
||||||
dateline: "2021-12-31"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
cycle: 2,
|
|
||||||
name: "项目2",
|
|
||||||
description: "xxxxxxx",
|
|
||||||
workLoad: 12,
|
|
||||||
card: "java",
|
|
||||||
isFinish: 1,
|
|
||||||
principalUser: "teacher_user",
|
|
||||||
dateline: "2021-12-31"
|
|
||||||
}
|
|
||||||
|
|
||||||
]);
|
|
||||||
const initialTableData = ref<User[]>([]);
|
|
||||||
|
|
||||||
// 处理接口数据
|
|
||||||
const fetchData = () => {
|
|
||||||
const project = getChargeProjectList(getToken());
|
|
||||||
project.then(res => {
|
|
||||||
const data = res.data;
|
|
||||||
if (data) {
|
|
||||||
// 假设 data 是从接口返回的数据，这里做一个示例
|
|
||||||
const dataProject: User = {
|
|
||||||
id: 4,
|
|
||||||
cycle: 2,
|
|
||||||
name: "项目3",
|
|
||||||
description: "xxxxxxx",
|
|
||||||
workLoad: 12,
|
|
||||||
card: "java",
|
|
||||||
isFinish: 2,
|
|
||||||
principalUser: "teacher_user",
|
|
||||||
dateline: "2021-12-31"
|
|
||||||
};
|
|
||||||
|
|
||||||
tableData.value.push(dataProject);
|
|
||||||
initialTableData.value = tableData.value.slice(); // 将tableData的内容赋值给initialTableData
|
|
||||||
} else {
|
|
||||||
console.log("没有数据");
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 调用获取数据的函数
|
|
||||||
fetchData();
|
|
||||||
|
|
||||||
// 处理路由跳转
|
|
||||||
const toChildSystem = () => {
|
|
||||||
router.push({ name: 'ChildSysCharge' });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听表格行选择事件
|
|
||||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
|
||||||
const multipleSelection = ref<User[]>([]);
|
|
||||||
|
|
||||||
const handleSelectionChange = (val: User[]) => {
|
|
||||||
multipleSelection.value = val;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 统一检索函数
|
|
||||||
const search = () => {
|
|
||||||
const keyword = input1.value.trim().toLowerCase();
|
|
||||||
const status = parseInt(input2.value);
|
|
||||||
|
|
||||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
|
||||||
if (keyword === '' && isNaN(status)) {
|
|
||||||
tableData.value = initialTableData.value.slice();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据关键词和状态进行检索
|
|
||||||
tableData.value = initialTableData.value.filter(item => {
|
|
||||||
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
|
||||||
const matchStatus = (isNaN(status) || item.isFinish === status);
|
|
||||||
return matchKeyword && matchStatus;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// 重置检索条件
|
|
||||||
const reset = () => {
|
|
||||||
input1.value = '';
|
|
||||||
input2.value = '';
|
|
||||||
tableData.value = initialTableData.value.slice(); // 恢复初始数据
|
|
||||||
};
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const toChildModel = () => {
|
const toChildModel = () => {
|
||||||
router.push({name:'ChildModCharge'})
|
router.push({name:'ChildModParticipate'})
|
||||||
};
|
};
|
||||||
|
|
||||||
const input = ref('');
|
const input = ref('');
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
|
|
||||||
// 路由跳转
|
// 路由跳转
|
||||||
const toDetail = () => {
|
const toDetail = () => {
|
||||||
router.push({ name: 'ChargeDetail' }); // 跳转到子系统详情页面
|
router.push({ name: 'ParticipateDetail' }); // 跳转到子系统详情页面
|
||||||
};
|
};
|
||||||
|
|
||||||
interface User {
|
interface User {
|
||||||
|
|
@ -1,3 +1,240 @@
|
||||||
<template>
|
<template>
|
||||||
hi
|
<div style=" width:100%">
|
||||||
</template>
|
<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="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
状态
|
||||||
|
<el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||||
|
<el-button style="width:80px" @click="reset">重置</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 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="status" label="状态" />
|
||||||
|
<el-table-column property="tags" label="标签">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column property="files" label="文档(点击下载)">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<template v-if="row.files && row.files.URI">
|
||||||
|
<a :href="row.files.URI" target="_blank" style="color: deepskyblue">
|
||||||
|
下载文档
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
无
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column property="description" label="项目简介" />
|
||||||
|
<el-table-column property="deadline" 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="total" class="mt-4" :page-size="pageSize"
|
||||||
|
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 { getParticipateProjectList } from '@/api/participate.js';
|
||||||
|
import { getToken } from '@/utils/auth';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
//设置页码
|
||||||
|
const total = ref(2);
|
||||||
|
const pageSize = ref(3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
cycle: number;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
workLoad: number;
|
||||||
|
files: { URI: string };
|
||||||
|
status: string
|
||||||
|
principalUser: string;
|
||||||
|
deadline: string;
|
||||||
|
tags: Array<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const input1 = ref('');
|
||||||
|
const input2 = ref('');
|
||||||
|
const tableData = ref<User[]>([
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
cycle: 2,
|
||||||
|
name: "项目2",
|
||||||
|
description: "xxxxxxx",
|
||||||
|
workLoad: 12,
|
||||||
|
files: { URI: 'http://www.baidu.com' },
|
||||||
|
status: "暂停",
|
||||||
|
principalUser: "teacher_user",
|
||||||
|
deadline: "2021-12-31",
|
||||||
|
tags: ["java", "spring"]
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
cycle: 2,
|
||||||
|
name: "项目2",
|
||||||
|
description: "xxxxxxx",
|
||||||
|
workLoad: 12,
|
||||||
|
files: { URI: 'http://www.baidu.com' },
|
||||||
|
status: "进行中",
|
||||||
|
principalUser: "teacher_user",
|
||||||
|
deadline: "2021-12-31",
|
||||||
|
tags: ["java", "spring"]
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
]);
|
||||||
|
const initialTableData = ref<User[]>([]);
|
||||||
|
|
||||||
|
//处理返回数据函数
|
||||||
|
const parseData = (data) => {
|
||||||
|
const files = JSON.parse(data.files);
|
||||||
|
const tags = JSON.parse(data.tags);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: data.id,
|
||||||
|
cycle: data.cycle,
|
||||||
|
name: data.name,
|
||||||
|
description: data.description,
|
||||||
|
workLoad: data.workLoad,
|
||||||
|
files: files,
|
||||||
|
status: data.status,
|
||||||
|
principalUser: data.principalUser,
|
||||||
|
deadline: data.deadLine,
|
||||||
|
tags: tags,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理接口数据
|
||||||
|
const fetchData = () => {
|
||||||
|
const project = getParticipateProjectList(getToken());
|
||||||
|
console.log(project);
|
||||||
|
|
||||||
|
project.then(res => {
|
||||||
|
const data = res.data.data.list;
|
||||||
|
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
// 假设 data 是从接口返回的数据，这里做一个示例
|
||||||
|
const dataProject = data.map(item => parseData(item));
|
||||||
|
console.log(dataProject);
|
||||||
|
|
||||||
|
tableData.value = [...dataProject, ...tableData.value]; // 将接口数据和现有数据合并
|
||||||
|
console.log(tableData.value);
|
||||||
|
initialTableData.value = tableData.value.slice(); // 将tableData的内容赋值给initialTableData
|
||||||
|
} else {
|
||||||
|
console.log("没有数据");
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 调用获取数据的函数
|
||||||
|
fetchData();
|
||||||
|
|
||||||
|
// 处理路由跳转
|
||||||
|
const toChildSystem = () => {
|
||||||
|
router.push({ name: 'ChildSysParticipate' });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听表格行选择事件
|
||||||
|
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||||
|
const multipleSelection = ref<User[]>([]);
|
||||||
|
|
||||||
|
const handleSelectionChange = (val: User[]) => {
|
||||||
|
multipleSelection.value = val;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 统一检索函数
|
||||||
|
const search = () => {
|
||||||
|
const keyword = input1.value.trim().toLowerCase();
|
||||||
|
const status = input2.value.trim().toLowerCase();
|
||||||
|
|
||||||
|
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||||
|
if (keyword === '' && status === '') {
|
||||||
|
tableData.value = initialTableData.value.slice();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据关键词和状态进行检索
|
||||||
|
tableData.value = initialTableData.value.filter(item => {
|
||||||
|
const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
|
||||||
|
const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
|
||||||
|
return matchKeyword && matchStatus;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 重置检索条件
|
||||||
|
const reset = () => {
|
||||||
|
input1.value = '';
|
||||||
|
input2.value = '';
|
||||||
|
tableData.value = initialTableData.value.slice(); // 恢复初始数据
|
||||||
|
};
|
||||||
|
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue
Block a user