feat: 充值管理查看详情

src/views/iot-card/Recharge/Detail.vue

@@ -0,0 +1,63 @@
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="1000px"
+        :visible="true"
+        title="详情"
+        okText="确定"
+        cancelText="取消"
+        @ok="handleCancel"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-descriptions
+                :column="2"
+                bordered
+                :contentStyle="{ minWidth: '300px' }"
+                :labelStyle="{ minWidth: '120px' }"
+            >
+                <a-descriptions-item label="充值金额">{{
+                    data.chargeMoney
+                }}</a-descriptions-item>
+                <a-descriptions-item label="账户id">{{
+                    data?.rechargeId
+                }}</a-descriptions-item>
+                <a-descriptions-item label="平台对接">{{
+                    data.configName
+                }}</a-descriptions-item>
+                <a-descriptions-item label="订单号">{{
+                    data.orderNumber
+                }}</a-descriptions-item>
+                <a-descriptions-item label="支付方式">{{
+                    data.paymentType
+                }}</a-descriptions-item>
+                <a-descriptions-item label="支付URL">
+                    <div style="height: 100px; overflow: auto">
+                        {{ data.url ? data.url : '' }}
+                    </div>
+                </a-descriptions-item>
+                <a-descriptions-item label="订单时间">{{
+                    data.createTime
+                        ? moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')
+                        : '-'
+                }}</a-descriptions-item>
+            </a-descriptions>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import moment from 'moment';
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const handleCancel = () => {
+    emit('close');
+};
+</script>

src/views/iot-card/Recharge/index.vue

@@ -70,6 +70,7 @@
         </JTable>
         <!-- 充值 -->
         <Save v-if="visible" @change="saveChange" />
+        <Detail v-if="detailVisible" :data="current" @close="close" />
     </div>
 </template>
 
@@ -78,10 +79,13 @@ import moment from 'moment';
 import type { ActionsType } from '@/components/Table';
 import { queryRechargeList } from '@/api/iot-card/cardManagement';
 import Save from './Save.vue';
+import Detail from './Detail.vue';
 
 const rechargeRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const visible = ref<boolean>(false);
+const detailVisible = ref<boolean>(false);
+const current = ref<Record<string, any>>({});
 
 const columns = [
     {
@@ -139,7 +143,10 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 title: '查看',
             },
             icon: 'EyeOutlined',
-            onClick: () => {},
+            onClick: () => {
+              detailVisible.value = true;
+              current.value = data;
+            },
         },
     ];
 };
@@ -159,6 +166,13 @@ const saveChange = (val: any) => {
         rechargeRef.value?.reload();
     }
 };
+
+/**
+ * 查看详情弹窗关闭
+ */
+const close = () => {
+    detailVisible.value = false;
+};
 </script>
 
 <style scoped lang="less">