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

feature-sht #3

Merged
yannqing merged 18 commits from feature-sht into master 2024-04-25 16:30:58 +08:00
Conversation 0 Commits 18 Files Changed 19 +259 -218
7 changed files with 259 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fd4592489c - Show all commits

2
src/api/charge.js → src/api/participate.js
View File

@ -12,7 +12,7 @@ const api = 'http://nbxt.oa.x-lf.cn'
* @param token 访问令牌
* @returns {Promise<AxiosResponse<any>> | *}
*/
export const getChargeProjectList = (token)=> {
export const getParticipateProjectList = (token)=> {
return axios({
method: 'get',
url: `${api}/project/participate/get`,

30
src/router/modules/manage.ts
View File

@ -15,9 +15,9 @@ const manageRouter = {
},
children: [
{
path: 'participate',
component: () => import('@/views/personal/project/participate.vue'),
name: 'participate',
path: 'charge',
component: () => import('@/views/personal/project/charge.vue'),
name: 'Charge',
meta: { title: '我负责的', icon: 'user', affix: true }
},
//我管理的以及子页面
@ -50,28 +50,28 @@ const manageRouter = {
},
//我参与的以及子界面
{
path: 'charge',
component: () => import('@/views/personal/project/charge.vue'),
name: 'Charge',
path: 'participate',
component: () => import('@/views/personal/project/participate.vue'),
name: 'Participate',
meta: { title: '我参与的', icon: 'user', affix: true }
},
{
path: 'childSysCharge',
component: () => import('@/views/personal/project/childSystem/charge.vue'),
name: 'ChildSysCharge',
path: 'childSysParticipate',
component: () => import('@/views/personal/project/childSystem/participate.vue'),
name: 'ChildSysParticipate',
meta: { title: '我参与的 / 子系统', breadcrumb: true , hidden: true ,affix:false},
},
{
path: 'childModCharge',
component: () => import('@/views/personal/project/childModel/charge.vue'),
name: 'ChildModCharge',
path: 'childModParticipate',
component: () => import('@/views/personal/project/childModel/participate.vue'),
name: 'ChildModParticipate',
meta: { title: '我参与的 / 子系统 / 子模块', breadcrumb: true , hidden: true }
},
{
path: 'chargeDetail',
component:()=>import('@/views/personal/project/detail/charge.vue'),
name: 'ChargeDetail',
path: 'participateDetail',
component:()=>import('@/views/personal/project/detail/participate.vue'),
name: 'ParticipateDetail',
meta: { title: '我参与的 / 子系统 / 子模块 /详情', breadcrumb: true , hidden: true }
}
]

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

@ -1,199 +1,3 @@
<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="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>
hi
</template>

2
src/views/personal/project/childSystem/charge.vue → src/views/personal/project/childSystem/participate.vue
View File

@ -73,7 +73,7 @@
const router = useRouter();
const toChildModel = () => {
router.push({name:'ChildModCharge'})
router.push({name:'ChildModParticipate'})
};
const input = ref('');

2
src/views/personal/project/childmodel/charge.vue → src/views/personal/project/childmodel/participate.vue
View File

@ -77,7 +77,7 @@
// 路由跳转
const toDetail = () => {
router.push({ name: 'ChargeDetail' }); // 跳转到子系统详情页面
router.push({ name: 'ParticipateDetail' }); // 跳转到子系统详情页面
};
interface User {

0
src/views/personal/project/detail/charge.vue → src/views/personal/project/detail/participate.vue
View File

241
src/views/personal/project/participate.vue
View File

@ -1,3 +1,240 @@
<template>
hi
</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="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>