|
|
@@ -1,45 +1,24 @@
|
|
|
<template>
|
|
|
<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="
|
|
|
+ <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"
|
|
|
- />
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <el-button type="success" plain class="ele-btn-icon" :icon="DownloadOutlined"
|
|
|
+ v-permission="'recycleOrder:orderAlert:export'" @click="exportData">
|
|
|
导出订单明细
|
|
|
</el-button>
|
|
|
</template>
|
|
|
@@ -48,130 +27,130 @@
|
|
|
</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 pageRef = ref(null);
|
|
|
|
|
|
- const pageConfig = reactive({
|
|
|
- pageUrl: '/order/orderInfo/getOrderWarnList',
|
|
|
- exportUrl: '/order/orderInfo/orderWarnListExport',
|
|
|
- fileName: '订单预警',
|
|
|
- cacheKey: 'recycleOrderAlertTable',
|
|
|
- where: {
|
|
|
- alarmType: ''
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- 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/orderWarnListExport',
|
|
|
+ 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 handleCardChange = (value) => {
|
|
|
- pageConfig.where.alarmType = value;
|
|
|
- pageRef.value?.reload();
|
|
|
- };
|
|
|
+//导出数据
|
|
|
+function exportData() {
|
|
|
+ pageRef.value?.exportData('订单预警', { pageSize: 10000 });
|
|
|
+}
|
|
|
|
|
|
- // 选中值
|
|
|
- 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' } }
|
|
|
- }
|
|
|
- ]);
|
|
|
+// 卡片选中
|
|
|
+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>
|