我参与的，检索与重置

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,17 +63,85 @@ 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 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[]>([
+  if (keyword === '' && isNaN(status)) {
-  //测试用例
+    tableData.value = initialTableData.value.slice();
-  {
+    return; 
-    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("没有数据");
   }
-})
-.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>

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>