From 4dd78fbd638b9f9bbd6741eadf359087b142d755 Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Tue, 31 Jan 2023 18:09:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=85=E5=80=BC=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E3=80=81=E5=85=85=E5=80=BC=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=EF=BC=8C=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot-card/cardManagement.ts            |  14 +-
 .../iot-card/CardManagement/BindDevice.vue    |   1 +
 src/views/iot-card/Recharge/Save.vue          | 191 ++++++++++++++++++
 src/views/iot-card/Recharge/index.vue         | 168 ++++++++++++++-
 4 files changed, 370 insertions(+), 4 deletions(-)
 create mode 100644 src/views/iot-card/Recharge/Save.vue

diff --git a/src/api/iot-card/cardManagement.ts b/src/api/iot-card/cardManagement.ts
index 768aba60..0a4f53d5 100644
--- a/src/api/iot-card/cardManagement.ts
+++ b/src/api/iot-card/cardManagement.ts
@@ -121,4 +121,16 @@ export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
  * 根据id查看详情
  * @param id
  */
-export const queryDetail = (id: any) => server.get(`/network/card/${id}`);
\ No newline at end of file
+export const queryDetail = (id: any) => server.get(`/network/card/${id}`);
+
+/**
+ * 查询物联卡充值缴费日志
+ * @param data
+ */
+export const queryRechargeList = (data: any) => server.post(`/network/card/recharge/_log`, data)
+
+/**
+ * 充值
+ * @param data
+ */
+export const recharge = (data: any) => server.post(`/network/card/_recharge`, data)
\ No newline at end of file
diff --git a/src/views/iot-card/CardManagement/BindDevice.vue b/src/views/iot-card/CardManagement/BindDevice.vue
index cdf48031..acdba8df 100644
--- a/src/views/iot-card/CardManagement/BindDevice.vue
+++ b/src/views/iot-card/CardManagement/BindDevice.vue
@@ -19,6 +19,7 @@
                 ref="bindDeviceRef"
                 :columns="columns"
                 :request="queryUnbounded"
+                model="TABLE"
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
diff --git a/src/views/iot-card/Recharge/Save.vue b/src/views/iot-card/Recharge/Save.vue
new file mode 100644
index 00000000..4199d358
--- /dev/null
+++ b/src/views/iot-card/Recharge/Save.vue
@@ -0,0 +1,191 @@
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="600px"
+        :visible="true"
+        title="充值"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div>
+            <div class="modal-info">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="margin-right: 6px"
+                />暂只支持移动OneLink平台
+            </div>
+            <a-form
+                layout="vertical"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
+                <a-form-item label="平台对接" name="configId">
+                    <a-select
+                        v-model:value="modelRef.configId"
+                        :options="configList"
+                        allowClear
+                        show-search
+                        style="width: 100%"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="账户id" name="rechargeId">
+                    <a-input
+                        v-model:value="modelRef.rechargeId"
+                        placeholder="请输入账户id"
+                    />
+                </a-form-item>
+                <a-form-item label="充值金额" name="chargeMoney">
+                    <a-input-number
+                        allowClear
+                        :precision="2"
+                        style="width: 100%"
+                        v-model:value="modelRef.chargeMoney"
+                        :min="1"
+                        :max="500"
+                        placeholder="请输入1~500之间的金额"
+                    />
+                </a-form-item>
+
+                <a-form-item label="支付方式" name="paymentType">
+                    <a-select
+                        allowClear
+                        :options="PaymentMethod"
+                        v-model:value="modelRef.paymentType"
+                        placeholder="请选择支付方式"
+                    >
+                    </a-select>
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { queryPlatformNoPage, recharge } from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+import { PaymentMethod } from '@/views/iot-card/data';
+
+const emit = defineEmits(['change']);
+
+const btnLoading = ref<boolean>(false);
+const configList = ref<Record<string, any>[]>([]);
+
+const formRef = ref();
+
+const modelRef = reactive({
+    configId: undefined,
+    rechargeId: '',
+    chargeMoney: undefined,
+    paymentType: undefined,
+});
+
+const rules = {
+    configId: [
+        {
+            required: true,
+            message: '请选择平台对接',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    rechargeId: [
+        {
+            required: true,
+            message: '请输入账户id',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    chargeMoney: [
+        {
+            required: true,
+            message: '请输入充值金额',
+        },
+        // {
+        //     min: 1,
+        //     max: 500,
+        //     message: '请输入1~500之间的数字',
+        // },
+    ],
+    paymentType: [
+        {
+            required: true,
+            message: '请选择支付方式',
+        },
+    ],
+};
+
+const queryProvidersList = () => {
+    queryPlatformNoPage({
+        paging: false,
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'operatorName',
+                        termType: 'eq',
+                        value: 'onelink',
+                    },
+                    {
+                        column: 'state',
+                        termType: 'eq',
+                        value: 'enabled',
+                        type: 'and',
+                    },
+                ],
+            },
+        ],
+    }).then((res: any) => {
+        configList.value = res.result.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+        }));
+    });
+};
+
+const handleCancel = () => {
+    emit('change');
+    formRef.value.resetFields();
+};
+
+const handleOk = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            btnLoading.value = true;
+            const resp: any = await recharge(toRaw(modelRef));
+            btnLoading.value = false;
+            if (resp.status === 200) {
+                if (resp.result === '失败') {
+                    message.error('缴费失败');
+                } else {
+                    window.open(resp.result);
+                }
+                emit('change');
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
+
+queryProvidersList();
+</script>
+
+<style scoped lang="less">
+.modal-info {
+    color: rgba(0, 0, 0, 0.55);
+    background-color: #f6f6f6;
+    padding: 6px 12px;
+    margin-bottom: 12px;
+}
+</style>
diff --git a/src/views/iot-card/Recharge/index.vue b/src/views/iot-card/Recharge/index.vue
index 4f1bbbc0..27fdab16 100644
--- a/src/views/iot-card/Recharge/index.vue
+++ b/src/views/iot-card/Recharge/index.vue
@@ -1,8 +1,170 @@
 <!-- 充值管理 -->
 <template>
-    <div class="page-container">充值管理</div>
+    <div class="page-container">
+        <Search
+            :columns="columns"
+            target="iot-card-management-search"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="rechargeRef"
+            :columns="columns"
+            :request="queryRechargeList"
+            model="TABLE"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :params="params"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="visible = true">
+                        充值
+                    </a-button>
+                    <div class="tips-text">
+                        <span style="margin-right: 8px; font-size: 16px">
+                            <AIcon type="ExclamationCircleOutlined"></AIcon>
+                        </span>
+                        本平台仅提供充值入口，具体充值结果需以运营商的充值结果为准
+                    </div>
+                </a-space>
+            </template>
+            <template #createTime="slotProps">
+                {{
+                    slotProps.createTime
+                        ? moment(slotProps.createTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+        <!-- 充值 -->
+        <Save v-if="visible" @change="saveChange" />
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import moment from 'moment';
+import type { ActionsType } from '@/components/Table';
+import { queryRechargeList } from '@/api/iot-card/cardManagement';
+import Save from './Save.vue';
 
-<style scoped lang="less"></style>
+const rechargeRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const visible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: '充值金额',
+        dataIndex: 'chargeMoney',
+        key: 'chargeMoney',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '支付方式',
+        dataIndex: 'paymentType',
+        key: 'paymentType',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '订单号',
+        dataIndex: 'orderNumber',
+        key: 'orderNumber',
+        ellipsis: true,
+    },
+    {
+        title: '支付URL',
+        dataIndex: 'url',
+        key: 'url',
+    },
+    {
+        title: '订单时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {},
+        },
+    ];
+};
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+/**
+ * 充值关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    if (val) {
+        rechargeRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.tips-text {
+    padding-left: 24px;
+    background: #fff;
+    font-size: 14px;
+}
+</style>