我参与的，检索与重置

src/api/charge.js

@@ -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`,
@@ -22,3 +22,6 @@ const  getChargeProjectList = (token)=> {
         }
     })
 }
+
+
+

src/views/personal/project/charge.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>
@@ -23,15 +23,15 @@
       </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="workLoad" label="工作量" show-overflow-tooltip />
-        <el-table-column property="address" label="周期" />
+        <el-table-column property="cycle" label="周期" />
-        <el-table-column property="address" label="负责人" />
+        <el-table-column property="principalUser" label="负责人" />
-        <el-table-column property="address" label="状态"/>
+        <el-table-column property="isFinish" 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,30 +63,21 @@ const input = ref('');
 
 
 interface User {
-  id: number
+  id: number;
-  cycle: number
+  cycle: number;
-  name: string
+  name: string;
-  description: string
+  description: string;
-  workLoad: number
+  workLoad: number;
-  card: string
+  card: string;
-  isFinish: number
+  isFinish: number;
-  principalUser: string
+  principalUser: string;
-  dateline: string
+  dateline: string;
 }
 
-const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+// 响应式数据
-const multipleSelection = ref<User[]>([]);
+const input1 = ref('');
-
+const input2 = ref('');
-const handleSelectionChange = (val: User[]) => {
-  multipleSelection.value = val;
-};
-
-//获取数据
-const project = getManageList(getToken());
-
-//响应式
 const tableData = ref<User[]>([
-  //测试用例
   {
     id: 4,
     cycle: 2,
@@ -99,7 +85,7 @@ const tableData = ref<User[]>([
     description: "xxxxxxx",
     workLoad: 12,
     card: "java",
-    isFinish: 2,
+    isFinish: 3,
     principalUser: "teacher_user",
     dateline: "2021-12-31"
   },
@@ -110,26 +96,25 @@ const tableData = ref<User[]>([
     description: "xxxxxxx",
     workLoad: 12,
     card: "java",
-    isFinish: 2,
+    isFinish: 1,
     principalUser: "teacher_user",
     dateline: "2021-12-31"
-  },
+  }
-
-
 
 ]);
-
+const initialTableData = ref<User[]>([]);
 
 // 处理接口数据 
-project.then(res => {
+const fetchData = () => {
-
+  const project = getChargeProjectList(getToken());
+  project.then(res => {
     const data = res.data;
-  console.log(data);
     if (data) {
+      // 假设 data 是从接口返回的数据，这里做一个示例
       const dataProject: User = {
         id: 4,
         cycle: 2,
-      name: "项目2",
+        name: "项目3",
         description: "xxxxxxx",
         workLoad: 12,
         card: "java",
@@ -137,18 +122,59 @@ project.then(res => {
         principalUser: "teacher_user",
         dateline: "2021-12-31"
       };
-    // 使用 tableData.value 进行添加
+
       tableData.value.push(dataProject);
-
+      initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData
-
     } else {
       console.log("没有数据");
     }
-})
+  }).catch(err => {
-.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>

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

@@ -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"

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

@@ -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>

src/views/personal/project/detail/charge.vue

@@ -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>