回收管理预警 tab 切换搜索

src/views/recycle/orderAlert/index.vue

@@ -1,150 +1,178 @@
 <template>
-  <ele-page flex-table>
-    <ele-check-card
-      v-if="alarmData.length > 0"
-      v-model="checked"
-      :items="alarmData"
-      :row="{ gutter: 12 }"
-      :column="{ span: 4 }"
-      style="background-color: #fff; padding: 12px 0 0 12px; border-radius: 6px"
-    >
-      <template #item="{ item }">
-        <div style="padding: 18px" class="flex-col items-center">
-          <ele-text size="md">{{ item.title }}</ele-text>
-          <ele-count-up :end-val="item.content" style="font-size: 26px" />
-        </div>
-      </template>
-    </ele-check-card>
+    <ele-page flex-table>
+        <ele-check-card
+            v-if="alarmData.length > 0"
+            v-model="checked"
+            :items="alarmData"
+            @change="handleCardChange"
+            :row="{ gutter: 12 }"
+            :column="{ span: 4 }"
+            style="
+                background-color: #fff;
+                padding: 12px 0 0 12px;
+                border-radius: 6px;
+            "
+        >
+            <template #item="{ item }">
+                <div style="padding: 18px" class="flex-col items-center">
+                    <ele-text size="md">{{ item.title }}</ele-text>
+                    <ele-count-up
+                        :end-val="item.content"
+                        style="font-size: 26px"
+                    />
+                </div>
+            </template>
+        </ele-check-card>
 
-    <order-page
-      ref="pageRef"
-      :pageConfig="pageConfig"
-      permissionKey="orderAlert"
-      style="padding: 12px 0"
-      :prop-columns="columns"
-    >
-      <template #toolbar>
-        <el-button
-          type="success"
-          plain
-          class="ele-btn-icon"
-          :icon="DownloadOutlined"
-          v-permission="'recycleOrder:orderAlert:export'"
-          @click="exportData"
+        <order-page
+            ref="pageRef"
+            :pageConfig="pageConfig"
+            permissionKey="orderAlert"
+            style="padding: 12px 0"
+            :prop-columns="columns"
         >
-          导出订单明细
-        </el-button>
-      </template>
-    </order-page>
-  </ele-page>
+            <template #toolbar>
+                <el-button
+                    type="success"
+                    plain
+                    class="ele-btn-icon"
+                    :icon="DownloadOutlined"
+                    v-permission="'recycleOrder:orderAlert:export'"
+                    @click="exportData"
+                >
+                    导出订单明细
+                </el-button>
+            </template>
+        </order-page>
+    </ele-page>
 </template>
 
 <script setup>
-  import { ref, reactive, getCurrentInstance } from 'vue';
-  import { DownloadOutlined } from '@/components/icons';
-  import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';
-  const { proxy } = getCurrentInstance();
+    import { ref, reactive, getCurrentInstance } from 'vue';
+    import { DownloadOutlined } from '@/components/icons';
+    import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';
+    const { proxy } = getCurrentInstance();
 
-  defineOptions({ name: 'recycleOrderAlert' });
+    defineOptions({ name: 'recycleOrderAlert' });
 
-  //获取统计数据
-  const alarmData = ref([]);
-  // 预警类型:1物流预警 2到货预警 3审核超时 4确认收货预警
-  // 已揽件-物流异常
-  let alarmTypes = {
-    1: '已揽件-物流异常',
-    2: '已签收-收货超时',
-    3: '已收货-审核超时',
-    4: '已到仓-收货超时'
-  };
-  const getStatisticsData = async () => {
-    proxy.$http.get('/order/orderInfo/getOrderWarnStatistics').then((res) => {
-      if (res.data.code === 200) {
-        alarmData.value = res.data.data.map((item) => ({
-          value: item.alarmType,
-          title: alarmTypes[item.alarmType],
-          content: item.alarmNum,
-          col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
-        }));
-      }
-    });
-  };
-  getStatisticsData();
+    //获取统计数据
+    const alarmData = ref([]);
+    // 预警类型:1物流预警 2到货预警 3审核超时 4确认收货预警
+    // 已揽件-物流异常
+    let alarmTypes = {
+        1: '已揽件-物流异常',
+        2: '已签收-收货超时',
+        3: '已收货-审核超时',
+        4: '已到仓-收货超时'
+    };
+    const getStatisticsData = async () => {
+        proxy.$http
+            .get('/order/orderInfo/getOrderWarnStatistics')
+            .then((res) => {
+                if (res.data.code === 200) {
+                    alarmData.value = res.data.data.map((item) => ({
+                        value: item.alarmType,
+                        title: alarmTypes[item.alarmType],
+                        content: item.alarmNum,
+                        col: {
+                            md: 3,
+                            style: { marginBottom: '12px', width: '180px' }
+                        }
+                    }));
+                }
+            });
+    };
+    getStatisticsData();
 
-  /** 页面组件实例 */
-  const pageRef = ref(null);
 
-  const pageConfig = reactive({
-    pageUrl: '/order/orderInfo/getOrderWarnList',
-    exportUrl: '/order/orderInfo/orderWarnExport',
-    fileName: '订单预警',
-    cacheKey: 'recycleOrderAlertTable'
-  });
+    /** 页面组件实例 */
+    const pageRef = ref(null);
 
-  const columns = ref([
-    {
-      type: 'selection',
-      columnKey: 'selection',
-      width: 50,
-      align: 'center',
-      fixed: 'left'
-    },
-    { label: '单号', prop: 'orderNumber', slot: 'orderNumber', minWidth: 230 },
-    { label: '客户', prop: 'customer', slot: 'customer', minWidth: 360 },
-    { label: '金额', prop: 'amount', slot: 'amount', minWidth: 160 },
-    {
-      label: '状态',
-      prop: 'status',
-      slot: 'status',
-      width: '166'
-    },
-    { label: '时间', prop: 'time', slot: 'time', minWidth: 210 },
-    { label: '预警时间', prop: 'alarmTime', minWidth: 160 },
-    { label: '备注', prop: 'remarks', slot: 'remarks' },
-    {
-      columnKey: 'action',
-      label: '操作',
-      width: 182,
-      align: 'center',
-      slot: 'action',
-      hideInPrint: true,
-      hideInExport: true,
-      fixed: 'right'
-    }
-  ]);
+    const pageConfig = reactive({
+        pageUrl: '/order/orderInfo/getOrderWarnList',
+        exportUrl: '/order/orderInfo/orderWarnExport',
+        fileName: '订单预警',
+        cacheKey: 'recycleOrderAlertTable',
+        where: {
+          alarmType: ''
+        }
+    });
 
-  //导出数据
-  function exportData() {
-    pageRef.value?.exportData('订单预警');
-  }
+    const columns = ref([
+        {
+            type: 'selection',
+            columnKey: 'selection',
+            width: 50,
+            align: 'center',
+            fixed: 'left'
+        },
+        {
+            label: '单号',
+            prop: 'orderNumber',
+            slot: 'orderNumber',
+            minWidth: 230
+        },
+        { label: '客户', prop: 'customer', slot: 'customer', minWidth: 360 },
+        { label: '金额', prop: 'amount', slot: 'amount', minWidth: 160 },
+        {
+            label: '状态',
+            prop: 'status',
+            slot: 'status',
+            width: '166'
+        },
+        { label: '时间', prop: 'time', slot: 'time', minWidth: 210 },
+        { label: '预警时间', prop: 'alarmTime', minWidth: 160 },
+        { label: '备注', prop: 'remarks', slot: 'remarks' },
+        {
+            columnKey: 'action',
+            label: '操作',
+            width: 182,
+            align: 'center',
+            slot: 'action',
+            hideInPrint: true,
+            hideInExport: true,
+            fixed: 'right'
+        }
+    ]);
 
-  // 选中值
-  const checked = ref();
-  // 数据
-  const items = ref([
-    {
-      value: 1,
-      title: '已揽件-物流异常',
-      content: 12,
-      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
-    },
-    {
-      value: 2,
-      title: '已签收-收货超时',
-      content: 5,
-      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
-    },
-    {
-      value: 3,
-      title: '已收货-审核超时',
-      content: 12,
-      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
-    },
-    {
-      value: 4,
-      title: '已到仓-收货超时',
-      content: 12,
-      col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
+    //导出数据
+    function exportData() {
+        pageRef.value?.exportData('订单预警');
     }
-  ]);
+
+    // 卡片选中
+    const handleCardChange = (value) => {
+        pageConfig.where.alarmType = value;
+        pageRef.value?.reload();
+    };
+
+    // 选中值
+    const checked = ref();
+    // 数据
+    const items = ref([
+        {
+            value: 1,
+            title: '已揽件-物流异常',
+            content: 12,
+            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
+        },
+        {
+            value: 2,
+            title: '已签收-收货超时',
+            content: 5,
+            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
+        },
+        {
+            value: 3,
+            title: '已收货-审核超时',
+            content: 12,
+            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
+        },
+        {
+            value: 4,
+            title: '已到仓-收货超时',
+            content: 12,
+            col: { md: 3, style: { marginBottom: '12px', width: '180px' } }
+        }
+    ]);
 </script>

src/views/recycleOrder/components/order-page-all.vue

@@ -423,7 +423,7 @@
 
   /** 搜索 */
   const reload = (where) => {
-    tableRef.value?.reload?.({ page: 1, where });
+    tableRef.value?.reload?.(where);
   };
 
   /** 批量操作 */