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-19 20:13:50 +08:00
parent e4b4d43c86
commit 551b166b79
6 changed files with 206 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
@ -34,7 +34,7 @@
<el-table-column property="status" label="状态" />
<el-table-column property="description" label="子系统简介" >
<template #default="{row}">
<span >{{ row.description.description }}</span>
<span >{{ row.description }}</span>
</template>
</el-table-column>
@ -69,7 +69,7 @@ const toChildModel = (id) => {
router.push({ name: 'ChildModManage' , query: { id: 3 } })
};
const input = ref('');
interface User {
cycle:number
@ -97,6 +97,9 @@ const handleSelectionChange = (val: User[]) => {
// console.log(searchSys);
const input1 = ref('');
const input2 = ref('');
const tableData = ref<User[]>([
]);
@ -108,12 +111,12 @@ const initialTableData = ref<User[]>([]);
//处理数据函数
const parseData = (data)=>{
const description = JSON.parse(data.description);
return{
cycle:data.cycle,
deadLine:data.deadLine,
description:description,
description: data.description,
id:data.id,
isDelete:data.isDelete,
name:data.name,
@ -130,6 +133,8 @@ const initialTableData = ref<User[]>([]);
//处理数据
project.then(res=>{
console.log(res);
const data = res.data.data
console.log(data);
@ -149,7 +154,30 @@ const initialTableData = ref<User[]>([]);
fetchData();
// 统一检索函数
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();
};

36
src/views/personal/project/childSystem/participate.vue
View File

@ -34,7 +34,7 @@
<el-table-column property="status" label="状态" />
<el-table-column property="description" label="子系统简介">
<template #default="{ row }">
<span>{{ row.description.description }}</span>
<span>{{ row.description }}</span>
</template>
</el-table-column>
<el-table-column property="deadLine" label="截止时间" #default="{row}">
@ -98,25 +98,11 @@ const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
const tableData = ref<User[]>([
{
id: 1,
deadLine: '2022-01-01',
cycle: 1,
description: { description: '子系统1的简介' },
isDeleted: 0,
name: '子系统1',
principalId: 1,
projectId: 1,
workLoad: 1,
status: '待定',
principalName: '测试数据'
}
]);
const tableData = ref<User[]>([]);
const initialTableData = ref<User[]>([]);
const parseData = (data) => {
const description = JSON.parse(data.description);
@ -125,7 +111,7 @@ const parseData = (data) => {
id: data.id,
deadLine: data.deadLine,
cycle: data.cycle,
description: description,
description: data.description,
isDeleted: data.isDeleted,
name: data.name,
principalId: data.principalId,
@ -139,9 +125,12 @@ const parseData = (data) => {
//获取子系统列表
const fetchData = () => {
//调用接口
const project = getParticipateSystemList(<number>projectid-1, getToken());
const project = getParticipateSystemList(<number>projectid, getToken());
project.then((res) => {
console.log(res);
const data = res.data.data;
console.log(data);
@ -161,6 +150,9 @@ const fetchData = () => {
fetchData();
const input1 = ref('');
const input2 = ref('');
// 统一检索函数
const search = () => {
const keyword = input1.value.trim().toLowerCase();
@ -180,14 +172,10 @@ const search = () => {
});
};
const input1 = ref('');
const input2 = ref('');
// 重置检索条件
const reset = () => {
input1.value = '';
input2.value = '';
tableData.value = initialTableData.value.slice(); // 恢复初始数据
tableData.value = initialTableData.value.slice();
};

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

@ -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>
@ -37,7 +37,7 @@
<el-table-column property="principalUser" label="负责人" />
<el-table-column property="status" label="状态" />
<el-table-column property="description" label="子模块简介" #default="{row}" >
<span>{{row.description.description}}</span>
<span>{{row.description}}</span>
</el-table-column>
<el-table-column property="deadLine" label="截止时间" #default="{row}">
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
@ -80,6 +80,7 @@ interface User {
description: { description: string }
status: string
deadLine: string
cycle: number
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -89,7 +90,7 @@ const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val;
};
const input = ref('');
const initialTableData = ref<User[]>([]);
const tableData = ref<User[]>([
@ -106,7 +107,7 @@ const sysId = route.query.id;
//处理接口方法
const parseData = (data) => {
const description = JSON.parse(data.description);
return{
@ -115,9 +116,10 @@ const parseData = (data) => {
principalId: data.principalId,
principalUser: data.principalUser,
workLoad: data.workLoad,
description: description,
description: data.description,
status: data.status,
deadLine: data.deadLine,
cycle: data.cycle,
}
@ -146,6 +148,33 @@ const fetchData = ()=>{
}
fetchData();
const input1 = ref('');
const input2 = ref('');
// 统一检索函数
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();
};

44
src/views/personal/project/childmodel/participate.vue
View File

@ -33,9 +33,9 @@
<el-table-column property="cycle" label="周期" />
<el-table-column property="principalUser" label="负责人" />
<el-table-column property="status" label="状态" />
<el-table-column property="description" label="子模块简介" #default="{ row }">
<span>{{ row.description.description }}</span>
</el-table-column>
<el-table-column property="description" label="子模块简介" />
<el-table-column property="deadLine" label="截止时间" #default="{row}">
<span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
</el-table-column>
@ -74,7 +74,7 @@ interface User {
childSystemName: string;
completeTime: string;
cycle: string;
description: { description: string };
description: string;
id: number;
isDelete: number
isFinishi: string
@ -86,6 +86,7 @@ interface User {
status: string
type: string
workLoad: number
deadLine: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
@ -98,38 +99,18 @@ const handleSelectionChange = (val: User[]) => {
//列表
const tableData = ref<User[]>([
{
beginTime: '2021-11-11',
childSystemName: '子系统1',
completeTime: '2021-11-11',
cycle: "10tian",
description: { description: '子系统1描述' },
id: 1,
isDelete: 0,
isFinishi: '否',
name: '子模块1',
pid: '1',
principalId: 1,
principalUser: '负责人1',
projectId: 1,
status: '待完成',
type: '子系统',
workLoad: 10
}
]);
const tableData = ref<User[]>([]);
const initialTableData = ref<User[]>([]);
const parseData = (data) => {
const descripation = JSON.parse(data.description);
return {
beginTime: data.beginTime,
childSystemName: data.childSystemName,
completeTime: data.completeTime,
cycle: data.cycle,
description: descripation,
description: data.description,
id: data.id,
isDelete: data.isDelete,
isFinishi: data.isFinishi,
@ -138,9 +119,10 @@ const parseData = (data) => {
principalId: data.principalId,
principalUser: data.principalUser,
projectId: data.projectId,
status: '待完成',
status: data.status,
type: data.type,
workLoad: data.workLoad
workLoad: data.workLoad,
deadLine: data.deadLine
}
}
@ -194,6 +176,8 @@ const input2 = ref('');
const reset = () => {
input1.value = '';
input2.value = '';
console.log(tableData.value);
tableData.value = initialTableData.value.slice(); // 恢复初始数据
};

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

@ -12,8 +12,8 @@
<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>
@ -81,7 +81,7 @@
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElTable, ElTableColumn, ElPagination, ElButton, ElInput, ElTag, ElMessageBox, ElMessage } from 'element-plus';
import { getToken } from '@/utils/auth';
@ -89,72 +89,36 @@ import { useRouter } from 'vue-router';
import { getManageList, deleteProject } from '@/api/manage.js';
// 初始化路由
const router = useRouter();
const pageSize = ref(5); // 每页显示的条数
const currentPage = ref(1); // 当前页数
const total = ref(10); // 总条数
// 路由跳转
const toChildSystem = (id) => {
router.push({ name: 'ChildSysManage', query: { id: 2 } }); // 跳转到子系统详情页面
};
//响应式
const tableData = ref<User[]>([]);
const selectedIds = ref([]); // 存储被选中的项目的ID
interface User {
id: number
cycle: number
name: string
description: string
workLoad: number
status: string
deadLine: string
tags: Array<any>
files: Array<any>
principalUser: string
}
// 获取输入框内容
// 定义响应式变量
const pageSize = ref(5);
const currentPage = ref(1);
const total = ref(10);
const input1 = ref('');
const input2 = ref('');
const tableData = ref<User[]>([]);
const selectedIds = ref([]);
// 定义用户接口
interface User {
id: number;
cycle: number;
name: string;
description: string;
workLoad: number;
status: string;
deadLine: string;
tags: Array<any>;
files: Array<any>;
principalUser: string;
}
// const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// const multipleSelection = ref<User[]>([
// ]);
// const handleSelectionChange = (val: User[]) => {
// multipleSelection.value = val;
// };
// 在 Vue 组件中添加 parseData 函数
// 定义解析数据的函数
const parseData = (data) => {
const files = JSON.parse(data.files);
const tags = JSON.parse(data.tags);
return {
id: data.id,
cycle: data.cycle,
@ -169,75 +133,58 @@ const parseData = (data) => {
};
};
// 监听 currentPage 的变化，当 currentPage 变化时请求对应页的数据
// 定义处理当前页码变化的函数
watch(currentPage, () => {
fetchData();
});
//获取所有项目
// 定义获取数据的函数
const fetchData = () => {
const params = {
page: currentPage.value, // 当前页码
pageSize: pageSize.value, // 每页显示的条数
page: currentPage.value,
pageSize: pageSize.value,
is: 1
};
const project = getManageList(params, getToken());
// 处理接口数据
project.then(res => {
const data = res.data.data.list;
console.log(data);
const dataTotal = res.data.data.total;
const dataPageSize = res.data.data.pageSize;
console.log(dataTotal, dataPageSize);
total.value = dataTotal;
pageSize.value = dataPageSize;
if (data) {
const newData = data.map(item => parseData(item)); // 使用先前定义的函数处理数据
// 使用 tableData.value 进行添加
const newData = data.map(item => parseData(item));
tableData.value = newData;
console.log(tableData.value);
initialTableData.value = tableData.value.slice();
} else {
console.log("没有数据");
console.log("没有可用数据");
}
})
.catch(err => {
console.log(err);
});
}).catch(err => {
console.log(err);
});
}
fetchData();
//翻页处理
// 翻页事件处理函数
// 定义处理当前页码变化的函数
const handleCurrentChange = (page) => {
currentPage.value = page; // 更新 currentPage 的值
currentPage.value = page;
};
// 删除项目
// 这个方法将在表格的选择项发生变化时被调用
// 定义处理选择变化的函数
const handleSelectionChange = (selection) => {
selectedIds.value = selection.map(item => item.id); // 更新被选择的项目的ID数组
selectedIds.value = selection.map(item => item.id);
};
// 弹窗设置
// 定义确认删除项目的函数
const confirmDelete = (selectedIds) => {
const message = `确定要删除ID为${selectedIds}的项目吗？`;
ElMessageBox.confirm(
message, {
const message = `确认删除 ID 为 ${selectedIds} 的项目吗？`;
ElMessageBox.confirm(message, {
confirmButtonText: '确认',
cancelButtonText: '取消',
// type: 'warning',
center: true,
}).then(async () => {
const token = getToken();
@ -258,6 +205,7 @@ const confirmDelete = (selectedIds) => {
});
};
// 定义处理项目删除的函数
const handleDeleteProjects = async () => {
if (selectedIds.value.length === 0) {
ElMessage({
@ -267,24 +215,42 @@ const handleDeleteProjects = async () => {
});
return;
}
confirmDelete(selectedIds.value);
};
//编辑功能
const initialTableData = ref<User[]>([]);
// 统一检索函数
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();
};
// 定义跳转到子系统的函数
const toChildSystem = (id) => {
router.push({ name: 'ChildSysManage', query: { id: 2 } });
};
</script>
<style>
.my-autocomplete li {
line-height: normal;

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

@ -59,8 +59,8 @@
</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-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize" :current-page="currentPage"
@current-change="handleCurrentChange" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
</el-card>
</div>
@ -75,13 +75,12 @@ import { getToken } from '@/utils/auth';
const router = useRouter();
//设置页码
const total = ref(2);
const pageSize = ref(3);
// 设置页码
const pageSize = ref(2);
const currentPage = ref(1);
const total = ref(4);
// 定义用户数据接口
interface User {
id: number;
cycle: number;
@ -89,7 +88,7 @@ interface User {
description: string;
workLoad: number;
files: { URI: string };
status: string
status: string;
principalUser: string;
deadline: string;
tags: Array<any>;
@ -99,37 +98,11 @@ interface User {
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: 2,
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);
@ -144,32 +117,29 @@ const parseData = (data) => {
status: data.status,
principalUser: data.principalUser,
deadline: data.deadLine,
tags: tags,
tags: tags
};
};
}
}
// 处理接口数据
// 处理接口数据
const fetchData = () => {
const project = getParticipateProjectList(getToken());
console.log(project);
project.then(res => {
const data = res.data.data.list;
const dataTotal = res.data.data.total;
const dataPageSize = res.data.data.pageSize;
console.log(dataTotal, dataPageSize);
total.value = dataTotal;
pageSize.value = dataPageSize;
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
tableData.value = [...dataProject, ...tableData.value];
initialTableData.value = tableData.value.slice();
} else {
console.log("没有数据");
console.log('没有数据');
}
}).catch(err => {
console.log(err);
@ -181,7 +151,7 @@ fetchData();
// 处理路由跳转
const toChildSystem = (id) => {
router.push({ name: 'ChildSysParticipate' ,query: { projectId: id } });
router.push({ name: 'ChildSysParticipate', query: { projectId: id } });
};
// 监听表格行选择事件
@ -212,15 +182,18 @@ const search = () => {
};
// 定义处理当前页码变化的函数
const handleCurrentChange = (page) => {
currentPage.value = page;
};
// 重置检索条件
const reset = () => {
input1.value = '';
input2.value = '';
tableData.value = initialTableData.value.slice(); // 恢复初始数据
tableData.value = initialTableData.value.slice();
};
</script>
<style>
.my-autocomplete li {
line-height: normal;