0930

src/views/zhinengxunjian/banzhuzhuangtai.vue

@@ -22,18 +22,37 @@
       </div>
 
       <!-- 搜索和筛选区 -->
-      <div class="search-filter">
-        <div class="search-container">
-          <el-input
-            v-model="searchKeyword"
-            placeholder="搜索班组名称或编号"
-            class="search-input"
-            suffix-icon="el-icon-search"
-            @keyup.enter="handleSearch"
-          ></el-input>
-          <el-button icon="Refresh" @click="() => { searchKeyword = ''; handleSearch(); }">重置</el-button>
-          <el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
+      <transition :enter-active-class="'el-zoom-in-center'" :leave-active-class="'el-zoom-out-center'">
+        <div v-show="showSearch" class="search-filter">
+          <div class="search-container">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+              <el-form-item label="班组名称" prop="teamName">
+                <el-input v-model="queryParams.teamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="负责区域" prop="region">
+                <el-input v-model="queryParams.region" placeholder="请输入负责区域" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="组长" prop="leader">
+                <el-input v-model="queryParams.leader" placeholder="请输入组长姓名" clearable @keyup.enter="handleQuery"></el-input>
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+                  <el-option label="正常运行" value="正常运行"></el-option>
+                  <el-option label="人员紧张" value="人员紧张"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </div>
+      </transition>
+
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+        <el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
+        <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
       </div>
 
       <!-- 班组卡片和图表区域 -->
@@ -178,13 +197,35 @@
 </template>
 
 <script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick, reactive, toRefs } from 'vue';
+import router from '@/router';
+import * as echarts from 'echarts'; // 导入ECharts
+import renwuImage from '@/assets/images/renwu.png';
+import { getCurrentInstance } from 'vue';
+
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
 import router from '@/router';
 import * as echarts from 'echarts'; // 导入ECharts
 import renwuImage from '@/assets/images/renwu.png';
+import { getCurrentInstance } from 'vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 // 搜索条件
 const searchKeyword = ref('');
+const showSearch = ref(true);
+const queryFormRef = ref();
+
+// 搜索参数
+const data = reactive({
+  queryParams: {
+    teamName: '',
+    region: '',
+    leader: '',
+    status: ''
+  }
+});
+const { queryParams } = toRefs(data);
 
 // 班组数据
 const rawTeamData = ref([
@@ -252,12 +293,24 @@ const total = ref(rawTeamData.value.length);
 const filteredTeams = computed(() => {
   let teams = [...rawTeamData.value];
 
-  if (searchKeyword.value) {
-    const keyword = searchKeyword.value.toLowerCase();
-    teams = teams.filter(
-      (team) =>
-        team.name.toLowerCase().includes(keyword) || team.region.toLowerCase().includes(keyword) || team.leader.toLowerCase().includes(keyword)
-    );
+  // 使用queryParams进行过滤
+  if (queryParams.value.teamName) {
+    const keyword = queryParams.value.teamName.toLowerCase();
+    teams = teams.filter((team) => team.name.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.region) {
+    const keyword = queryParams.value.region.toLowerCase();
+    teams = teams.filter((team) => team.region.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.leader) {
+    const keyword = queryParams.value.leader.toLowerCase();
+    teams = teams.filter((team) => team.leader.toLowerCase().includes(keyword));
+  }
+
+  if (queryParams.value.status) {
+    teams = teams.filter((team) => team.status === queryParams.value.status);
   }
 
   return teams;
@@ -296,6 +349,19 @@ const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
 };
 
+// 执行搜索
+const handleQuery = () => {
+  currentPage.value = 1;
+};
+
+// 重置搜索
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
+  currentPage.value = 1;
+};
+
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;