添加快捷分类查询

2026-03-06 17:21:01 +08:00
parent 6d706e8961
commit 2080f3921c
8 changed files with 473 additions and 0 deletions
--- a/src/views/erp/purchase/in/index.vue
+++ b/src/views/erp/purchase/in/index.vue
@@ -17,6 +17,30 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -409,9 +433,40 @@ onActivated(() => {
    getList()
  }
 })
+
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
 .mobile-purchase-in {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/purchase/inquiry/index.vue
+++ b/src/views/erp/purchase/inquiry/index.vue
@@ -11,6 +11,37 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待询价
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        询价中
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 30 }"
+        @click="handleQuickFilter(30)"
+      >
+        已完成
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -233,9 +264,41 @@ onMounted(async () => {
  productList.value = await ProductApi.getProductSimpleList()
  userList.value = await UserApi.getSimpleUserList()
 })
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
+
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
+
 .mobile-purchase-inquiry {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/purchase/order/index.vue
+++ b/src/views/erp/purchase/order/index.vue
@@ -23,6 +23,30 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -361,9 +385,41 @@ onMounted(async () => {
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  userList.value = await UserApi.getSimpleUserList()
 })
+
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
+
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
 .mobile-purchase-order {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/purchase/return/index.vue
+++ b/src/views/erp/purchase/return/index.vue
@@ -11,6 +11,30 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -251,9 +275,41 @@ onMounted(async () => {
  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
  accountList.value = await AccountApi.getAccountSimpleList()
 })
+
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
+
 .mobile-purchase-return {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/purchaserequisition/index.vue
+++ b/src/views/erp/purchaserequisition/index.vue
@@ -11,6 +11,51 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 1 }"
+        @click="handleQuickFilter(1)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 2 }"
+        @click="handleQuickFilter(2)"
+      >
+        已审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 3 }"
+        @click="handleQuickFilter(3)"
+      >
+        已驳回
+      </div>
+<!--      <div-->
+<!--        class="quick-filter-item"-->
+<!--        :class="{ active: queryParams.status === 4 }"-->
+<!--        @click="handleQuickFilter(4)"-->
+<!--      >-->
+<!--        已取消-->
+<!--      </div>-->
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 5 }"
+        @click="handleQuickFilter(5)"
+      >
+        已采购
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -403,9 +448,40 @@ const handleUpdateStatus = async (id: number, status: number) => {
 onMounted(() => {
  getList()
 })
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 </script>

 <style lang="scss" scoped>
+
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
 .mobile-requisition {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/sale/order/index.vue
+++ b/src/views/erp/sale/order/index.vue
@@ -23,6 +23,30 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -350,9 +374,41 @@ onMounted(async () => {
  customerList.value = await CustomerApi.getCustomerSimpleList()
  userList.value = await UserApi.getSimpleUserList()
 })
+
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 </script>

 <style lang="scss" scoped>
+
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
 .mobile-sale-order {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/sale/out/index.vue
+++ b/src/views/erp/sale/out/index.vue
@@ -23,6 +23,32 @@
      </div>
    </div>

+
+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -486,11 +512,41 @@ onActivated(() => {
    getList()
  }
 })
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 // TODO 芋艿：可优化功能：列表界面，支持导入
 // TODO 芋艿：可优化功能：详情界面，支持打印
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
 .mobile-sale-out {
  padding: 12px;
  background: #f5f5f5;
--- a/src/views/erp/sale/return/index.vue
+++ b/src/views/erp/sale/return/index.vue
@@ -23,6 +23,30 @@
      </div>
    </div>

+    <div class="mobile-header__quick-filter">
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === undefined }"
+        @click="handleQuickFilter(undefined)"
+      >
+        全部订单
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 10 }"
+        @click="handleQuickFilter(10)"
+      >
+        待审核
+      </div>
+      <div
+        class="quick-filter-item"
+        :class="{ active: queryParams.status === 20 }"
+        @click="handleQuickFilter(20)"
+      >
+        已审核
+      </div>
+    </div>
+
    <!-- 卡片列表 -->
    <div class="mobile-list" v-loading="loading">
      <div v-if="list.length === 0 && !loading" class="mobile-empty">
@@ -297,11 +321,42 @@ onMounted(async () => {
  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
  accountList.value = await AccountApi.getAccountSimpleList()
 })
+
+/** 快捷分类筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
 // TODO 芋艿：可优化功能：列表界面，支持导入
 // TODO 芋艿：可优化功能：详情界面，支持打印
 </script>

 <style lang="scss" scoped>
+
+.mobile-header__quick-filter {
+  display: flex;
+  gap: 12px;
+  margin: 8px 0;
+  justify-content: flex-start;
+
+  .quick-filter-item {
+    padding: 4px 12px;
+    font-size: 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    color: #909399;
+    background: transparent;
+    transition: all 0.2s;
+
+    &.active {
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+
+
 .mobile-sale-return {
  padding: 12px;
  background: #f5f5f5;