回收订单预警

src/views/recycle/orderAlert/index.vue

@@ -1,187 +1,121 @@
 <template>
-  <order-page ref="pageRef" :pageConfig="pageConfig">
-    <template #toolbar>
-      <ele-check-card v-model="checked" :items="items" :row="{ gutter: 12 }">
-        <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>
-
-      <el-button
-        type="warning"
-        plain
-        v-permission="'recycleOrder:awaitDelivery:batchAudit'"
-        @click="handleBatchAudit"
-      >
-        批量初审
-      </el-button>
-      <el-button
-        type="success"
-        plain
-        v-permission="'recycleOrder:awaitDelivery:batchReceive'"
-        @click="handleBatchReceive()"
-      >
-        批量确认收货
-      </el-button>
-    </template>
-
-    <template #action="{ row }">
-      <div>
+  <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>
+
+    <order-page
+      ref="pageRef"
+      :pageConfig="pageConfig"
+      permissionKey="orderAlert"
+      style="padding: 12px 0"
+      :prop-columns="columns"
+    >
+      <template #toolbar>
         <el-button
           type="success"
-          link
-          v-permission="'recycleOrder:awaitDelivery:detail'"
-          @click="toOrderDetail(row)"
+          plain
+          class="ele-btn-icon"
+          :icon="DownloadOutlined"
+          v-permission="'recycleOrder:orderAlert:export'"
+          @click="exportData"
         >
-          [订单详情]
+          导出订单明细
         </el-button>
-        <el-button
-          type="warning"
-          link
-          v-permission="'recycleOrder:awaitDelivery:log'"
-          @click="openOrderLog(row)"
-        >
-          [订单日志]
-        </el-button>
-        <el-button
-          type="danger"
-          link
-          v-permission="'recycleOrder:awaitDelivery:cancel'"
-          @click="cancelOrder(row)"
-        >
-          [取消订单]
-        </el-button>
-        <el-button
-          type="primary"
-          link
-          v-permission="'recycleOrder:awaitDelivery:fallback'"
-          @click="fallbackOrder(row)"
-        >
-          [回退状态]
-        </el-button>
-        <el-button
-          type="warning"
-          link
-          v-permission="'recycleOrder:awaitDelivery:userTag'"
-          @click="openEditUserTag(row)"
-        >
-          [用户标签]
-        </el-button>
-        <el-button
-          type="success"
-          link
-          v-permission="'recycleOrder:awaitDelivery:receive'"
-          @click="handleBatchReceive(row)"
-        >
-          [确认收货]
-        </el-button>
-        <el-button
-          type="danger"
-          link
-          v-permission="'recycleOrder:awaitDelivery:interception'"
-          @click="applyForInterception(row)"
-        >
-          [申请拦截退回]
-        </el-button>
-      </div>
-    </template>
-
-    <order-log ref="orderLogRef" />
-    <userBindTag ref="userTagRef" />
-  </order-page>
+      </template>
+    </order-page>
+  </ele-page>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
-  import { ElMessageBox } from 'element-plus/es';
-  import { EleMessage } from 'ele-admin-plus/es';
+  import { ref, reactive, getCurrentInstance } from 'vue';
   import { DownloadOutlined } from '@/components/icons';
-  import OrderPage from '@/views/recycleOrder/components/order-page.vue';
-  import { useDictData } from '@/utils/use-dict-data';
-  import { useRouter } from 'vue-router';
-
-  //订单日志
-  import orderLog from '@/views/recycleOrder/components/order-log.vue';
-  //用户标签
-  import userBindTag from '@/views/recycleOrder/components/user-bind-tag.vue';
-
-  defineOptions({ name: 'recycleOrderawaitDelivery' });
+  import OrderPage from '@/views/recycleOrder/components/order-page-all.vue';
+  const { proxy } = getCurrentInstance();
+
+  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();
 
-  let router = useRouter();
   /** 页面组件实例 */
   const pageRef = ref(null);
 
   const pageConfig = reactive({
-    pageUrl: '',
-    exportUrl: '',
-    fileName: '待签收订单',
-    cacheKey: 'awaitDeliveryTable'
+    pageUrl: '/order/orderInfo/getOrderWarnList',
+    exportUrl: '/order/orderInfo/orderWarnExport',
+    fileName: '订单预警',
+    cacheKey: 'recycleOrderAlertTable'
   });
 
-  //批量初审
-  function handleBatchAudit() {
-    pageRef.value?.operatBatch({
-      title: '确认批量审核？',
-      url: '/recycleOrder/batchAudit'
-    });
-  }
-
-  //批量取消订单
-  function handleBatchReceive(row) {
-    pageRef.value?.operatBatch({
-      title: '确认收货？',
-      row,
-      url: '/recycleOrder/batchAudit'
-    });
-  }
-
-  //订单详情
-  function toOrderDetail(row) {
-    router.push({ path: '/recycleOrder/detail', query: { id: row.postId } });
-  }
-
-  //订单日志
-  const orderLogRef = ref(null);
-  function openOrderLog(row) {
-    console.log(row, orderLogRef.value, 'row');
-
-    orderLogRef.value?.handleOpen(row);
-  }
-
-  //用户绑定标签
-  const userTagRef = ref(null);
-  function openEditUserTag(row) {
-    userTagRef.value?.handleOpen(row);
-  }
-
-  function messageBoxConfirm({ message, url, row }) {
-    ElMessageBox.confirm(message, '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '关闭',
-      type: 'warning'
-    }).then(() => {
-      console.log(row, 'row');
-    });
-  }
+  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'
+    }
+  ]);
 
-  //取消订单
-  function cancelOrder(row) {
-    messageBoxConfirm({ message: '确认取消?', url: '', row });
-  }
-  //回退状态
-  function fallbackOrder(row) {
-    messageBoxConfirm({ message: '确认回退状态?', url: '', row });
-  }
-  //确认收货
-  function materialPickup(row) {
-    messageBoxConfirm({ message: '确认收货?', url: '', row });
-  }
-  //申请拦截退回
-  function applyForInterception(row) {
-    messageBoxConfirm({ message: '确认申请拦截退回?', url: '', row });
+  //导出数据
+  function exportData() {
+    pageRef.value?.exportData('订单预警');
   }
 
   // 选中值

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

@@ -7,7 +7,7 @@
       <ele-pro-table
         ref="tableRef"
         row-key="orderId"
-        :columns="columns"
+        :columns="propColumns.length > 0 ? propColumns : columns"
         :datasource="datasource"
         :show-overflow-tooltip="true"
         v-model:selections="selections"
@@ -340,7 +340,8 @@
       })
     },
     exportUrl: { type: String, default: '/system/post/export' },
-    permissionKey: { type: String, default: 'search' }
+    permissionKey: { type: String, default: 'search' },
+    propColumns: { type: Array, default: () => [] }
   });
   const usePermission = computed(() => (opts) => {
     return `recycleOrder:${props.permissionKey}:${opts}`;