From 6e8f8e36fe2bccea4598ff600415694e174f6383 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Fri, 14 Nov 2025 17:08:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9C=AA=E8=AF=86=E5=88=AB=E5=95=86?=
 =?UTF-8?q?=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hard/hard-recog/index.vue | 356 ++++++++++++++++++++++++++++
 1 file changed, 356 insertions(+)
 create mode 100644 src/views/hard/hard-recog/index.vue

diff --git a/src/views/hard/hard-recog/index.vue b/src/views/hard/hard-recog/index.vue
new file mode 100644
index 0000000..9e0d0d3
--- /dev/null
+++ b/src/views/hard/hard-recog/index.vue
@@ -0,0 +1,356 @@
+<template>
+    <div class="layout-padding">
+        <div class="layout-padding-auto layout-padding-view">
+            <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+                <el-row>
+                    <el-form-item style="width: 300px" label="用户" prop="userIds">
+                        <select-user v-model="state.queryForm.userIds" />
+                    </el-form-item>
+                    <el-form-item style="width: 300px" label="商户" prop="mchIds">
+                        <select-mch v-model="state.queryForm.mchIds" :apiParams="{ parentIsNull: false }" />
+                    </el-form-item>
+                    <el-form-item style="width: 300px" label="设备类型" prop="hardTypeCode">
+                        <dict-select v-model="state.queryForm.hardTypeCode" dict-code="hard_type" />
+                    </el-form-item>
+                    <el-form-item style="width: 450px" label="创建时间" prop="payTimeList">
+                        <el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss"
+                            type="datetimerange" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button icon="Search" type="primary" @click="getDataList">
+                            {{ $t("common.queryBtn") }}
+                        </el-button>
+                        <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+                    </el-form-item>
+                </el-row>
+            </el-form>
+            <el-row>
+                <div class="mb8" style="width: 100%">
+                    <right-toolbar v-model:showSearch="showSearch" @exportExcel="exportExcel" @queryTable="getDataList"
+                        class="ml10 mr20" style="float: right" />
+                </div>
+            </el-row>
+            <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+                :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+                @sort-change="sortChangeHandle" :show-summary="false" :summary-method="getSummaries">
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column type="index" label="#" width="50" />
+                <el-table-column width="200" label="用户">
+                    <template #default="{ row }">
+                        <div class="flex flex-row items-center justify-center">
+                            <preview-image width="50px" height="50px" :src="row.userAvatar" />
+                            <div
+                                class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+                                <span> {{ row.username }}</span>
+                                <span> {{ row.userMobile }}</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column width="200px" label="商品">
+                    <template #default="{ row }">
+                        <div class="desc">
+                            <span>商品</span>
+                            <el-tooltip :content="row.productDesc" placement="top-start">
+                                <span class="text-line">{{ row.productDesc }}</span>
+                            </el-tooltip>
+                        </div>
+                        <div class="status" v-if="row.hourType">
+                            <span>用餐时间段</span>
+                            <span>
+                                <dict-tag :options="daily_menu" :value="row.hourType" />
+                            </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column width="250px" label="设备信息">
+                    <template #default="{ row }">
+                        <div class="status">
+                            <span>商户</span>
+                            <span>
+                                {{ row.merchantName }}
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>设备名</span>
+                            <span>
+                                {{ row.hardName }}
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>设备类型</span>
+                            <span>
+                                <dict-tag :options="hard_type" :value="row.hardType" />
+                            </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column width="250px" label="订单信息">
+                    <template #default="{ row }">
+                        <div class="status">
+                            <span>订单类型</span>
+                            <span>
+                                <dict-tag :options="hard_order_type" :value="row.orderType" />
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>支付方式</span>
+                            <span>
+                                <dict-tag :options="hard_pay_type" :value="row.payType" />
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>订单状态</span>
+                            <span>
+                                <dict-tag :options="hard_order_status" :value="row.orderStatus" />
+                            </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column width="200px" prop="paymentInformation" label="付款信息">
+                    <template #default="{ row }">
+                        <div class="status">
+                            <span>商品总价</span>
+                            <span class="color-success">
+                                {{ displayPrice(row.totalPrice, "元", 2) }}
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>额外支付</span>
+                            <span class="color-danger">
+                                {{ displayPrice(row.extraPrice, "元", 2) }}
+                            </span>
+                        </div>
+                        <div class="status">
+                            <span>实际支付</span>
+                            <span class="color-primary">
+                                {{ displayPrice(row.payPrice, "元", 2) }}
+                            </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column width="270px" label="退款信息">
+                    <template #default="{ row }">
+                        <div v-if="row.payRefundId">
+                            <div class="status">
+                                <span>退款金额</span>
+                                <span class="color-success">
+                                    {{ displayPrice(row.refundPrice, "元", 2) }}
+                                </span>
+                            </div>
+                            <div class="status">
+                                <span>退款状态</span>
+                                <span class="color-success">
+                                    <dict-tag :options="hard_refund_status" :value="row.refundStatus" />
+                                </span>
+                            </div>
+                            <div class="status">
+                                <span>退款时间</span>
+                                <span>
+                                    {{ row.refundTime }}
+                                </span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="支付时间" align="center" prop="payTime" width="250px">
+                    <template #default="{ row }">
+                        <div class="status">
+                            <span>创建时间</span>
+                            <span>{{ row.createTime }} </span>
+                        </div>
+                        <div class="status">
+                            <span>支付时间</span>
+                            <span>{{ row.payTime }} </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="150">
+                    <template #default="{ row }">
+                        <el-button icon="InfoFilled" link type="primary" @click="doRefund(row)">
+                            订单详情
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+                v-bind="state.pagination" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="hard-recog">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as hardOrder from "/@/api/hard/hard-order"
+import { getDicts } from "/@/api/admin/dict"
+import { useDict } from "/@/hooks/dict"
+import { displayPrice } from "/@/utils/formatMoney"
+import { VNode } from "vue"
+
+const { push } = useRouter()
+
+// 定义查询字典
+const { hard_pay_type, hard_order_type, hard_order_status, hard_type, hard_refund_status, daily_menu } = useDict(
+    "hard_pay_type",
+    "hard_order_type",
+    "hard_order_status",
+    "hard_type",
+    "hard_refund_status",
+    "daily_menu",
+)
+
+// 定义变量内容
+const tabList = ref<any>([{}])
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    queryForm: {
+    },
+    pageList: hardOrder.noRecogPageJoin,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+onMounted(async () => {
+    const { data } = await getDicts("hard_order_type")
+    data.unshift({ label: "全部", value: null })
+    tabList.value = data
+})
+
+// 清空搜索条件
+const resetQuery = () => {
+    // 清空搜索条件
+    queryRef.value?.resetFields()
+    // 清空多选
+    selectObjs.value = []
+    state.queryForm.deptId = ""
+    state.queryForm.deptIds = []
+    // draggableDepTreeRef.value.resetData()
+    getDataList()
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id)
+    multiple.value = !objs.length
+}
+
+// 导出excel
+const exportExcel = () => {
+    downBlobFile("/hard/hard-order/export", Object.assign(state.queryForm, { ids: selectObjs }), "订单记录.xlsx")
+}
+
+const doRefund = (row: any) => {
+    push({ path: "/hard/hard-after-sale/order-refund", query: { id: row.id, type: "view" } })
+}
+
+// 表格行尾合计
+const getSummaries = (param: SummaryMethodProps) => {
+    const { columns, data } = param
+    const sums: (string | VNode | number)[] = []
+    columns.forEach((column, index) => {
+        if (index === 0) {
+            sums[index] = "合计"
+            return
+        }
+        if (column.property === "paymentInformation") {
+            const priceVNode: VNode[] & string[] = []
+                ;[
+                    { column: "totalPrice", columnName: "商品总价", color: "#67C260" },
+                    { column: "extraPrice", columnName: "额外支付", color: "#F56E9B" },
+                    { column: "payPrice", columnName: "实际支付", color: "#355CF6" },
+                ].forEach(({ column, columnName, color }: any, index: number) => {
+                    const values = data.map((item) => Number(item[column]))
+                    if (!values.every((value) => Number.isNaN(value))) {
+                        priceVNode.push(
+                            h("div", {}, [
+                                h("span", { style: { marginRight: "40px", minWidth: "60px", fontWeight: "bold" } }, [columnName]),
+                                h("span", { style: { color, minWidth: "50px", flex: 1 } }, [
+                                    displayPrice(
+                                        values.reduce((prev, curr) => {
+                                            const value = Number(curr)
+                                            if (!Number.isNaN(value)) {
+                                                return prev + curr
+                                            } else {
+                                                return prev
+                                            }
+                                        }, 0),
+                                        "元",
+                                        2,
+                                    ),
+                                ]),
+                            ]),
+                        )
+                    } else {
+                        priceVNode.push("NaN")
+                    }
+                })
+            sums[index] = h("div", { style: {} }, [...priceVNode])
+        } else {
+            sums[index] = ""
+        }
+    })
+
+    return sums
+}
+</script>
+
+<style lang="scss" scoped>
+.text-line {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.desc {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+
+    span {
+        display: inline-block;
+    }
+
+    span:nth-child(1) {
+        min-width: 60px;
+        max-width: 100px;
+        text-align: left;
+    }
+
+    span:nth-child(2) {
+        flex: 1;
+        min-width: 50px;
+    }
+}
+
+.status {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2px;
+
+    span {
+        display: inline-block;
+    }
+
+    span:nth-child(1) {
+        min-width: 60px;
+        max-width: 100px;
+        text-align: left;
+    }
+
+    span:nth-child(2) {
+        flex: 1;
+        min-width: 50px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>
\ No newline at end of file