页面搜索重置全部完成

src/views/personal/project/childSystem/manage.vue

@@ -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 type="primary" style="width:80px" @click="search">查询</el-button>
-          <el-button style="width:80px">重置</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();
+};
    
     
       

src/views/personal/project/childSystem/participate.vue

@@ -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[]>([
+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 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();
 };
 
 

src/views/personal/project/childmodel/manage.vue

@@ -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 type="primary" style="width:80px" @click="search">查询</el-button>
-          <el-button style="width:80px">重置</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();
+};
 
 
 

src/views/personal/project/childmodel/participate.vue

@@ -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 }">
+        <el-table-column property="description" label="子模块简介" />
-          <span>{{ row.description.description }}</span>
+          
-        </el-table-column>
+        
         <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[]>([
+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 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();  // 恢复初始数据
 };
 

src/views/personal/project/manage.vue

@@ -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 type="primary" style="width:80px" @click="search">查询</el-button>
-          <el-button style="width:80px">重置</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 pageSize = ref(5);
-const total = ref(10); // 总条数
+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 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, // 当前页码
+    page: currentPage.value,
-    pageSize: pageSize.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)); // 使用先前定义的函数处理数据
+      const newData = data.map(item => parseData(item));
-      // 使用 tableData.value 进行添加
       tableData.value = newData;
-      console.log(tableData.value);
+      initialTableData.value = tableData.value.slice();
-
-
-
     } else {
-      console.log("没有数据");
+      console.log("没有可用数据");
     }
-  })
+  }).catch(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}的项目吗？`;
+  const message = `确认删除 ID 为 ${selectedIds} 的项目吗？`;
-
+  ElMessageBox.confirm(message, {
-  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;

src/views/personal/project/participate.vue

@@ -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"
+      <el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize" :current-page="currentPage"
-        style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
+      @current-change="handleCurrentChange" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
     </el-card>
 
   </div>
@@ -76,12 +76,11 @@ import { getToken } from '@/utils/auth';
 const router = useRouter();
 
 // 设置页码
-const total = ref(2);
+const pageSize = ref(2);
-const pageSize = ref(3);
+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,32 +98,6 @@ 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[]>([]);
@@ -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];
-
+      initialTableData.value = tableData.value.slice();
-      tableData.value = [...dataProject, ...tableData.value];  // 将接口数据和现有数据合并
-      console.log(tableData.value);
-      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
     } else {
-      console.log("没有数据");
+      console.log('没有数据');
     }
   }).catch(err => {
     console.log(err);
@@ -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;