我参与的，检索与重置
This commit is contained in:
“XCYH”
parent
7e1dc44569
commit
dd85d5eea4
@ -12,7 +12,7 @@ const api = 'http://nbxt.oa.x-lf.cn'
|
||||
* @param token 访问令牌
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
const getChargeProjectList = (token)=> {
|
||||
export const getChargeProjectList = (token)=> {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url: `${api}/project/participate/get`,
|
||||
@ -21,4 +21,7 @@ const getChargeProjectList = (token)=> {
|
||||
'Timestamp':getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
<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 style="width:80px">重置</el-button>
|
||||
<el-button type="primary" style="width:80px" @click="search">查询</el-button>
|
||||
<el-button style="width:80px" @click="reset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -23,17 +23,17 @@
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<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="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="操作">
|
||||
@ -51,16 +51,11 @@
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getManageList } from '@/api/manage.js';
|
||||
import { getChargeProjectList } from '@/api/charge.js';
|
||||
import { getToken } from '@/utils/auth';
|
||||
const router = useRouter();
|
||||
|
||||
// 路由跳转
|
||||
const toChildSystem = () => {
|
||||
router.push({ name: 'ChildSysCharge' }); // 跳转到子系统详情页面
|
||||
};
|
||||
|
||||
const input = ref('');
|
||||
|
||||
|
||||
|
||||
@ -68,17 +63,85 @@ const input = ref('');
|
||||
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
cycle: number
|
||||
name: string
|
||||
description: string
|
||||
workLoad: number
|
||||
card: string
|
||||
isFinish: number
|
||||
principalUser: string
|
||||
dateline: string
|
||||
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[]>([]);
|
||||
|
||||
@ -86,69 +149,32 @@ const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const project = getManageList(getToken());
|
||||
// 统一检索函数
|
||||
const search = () => {
|
||||
const keyword = input1.value.trim().toLowerCase();
|
||||
const status = parseInt(input2.value);
|
||||
|
||||
//响应式
|
||||
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("没有数据");
|
||||
// 如果搜索关键词和状态都为空，则恢复初始数据
|
||||
if (keyword === '' && isNaN(status)) {
|
||||
tableData.value = initialTableData.value.slice();
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// 根据关键词和状态进行检索
|
||||
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>
|
||||
|
||||
@ -25,10 +25,7 @@
|
||||
|
||||
>子模块列表</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"
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55" />-->
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -36,11 +36,7 @@
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user