merchant_feedov_web/src/views/lotCard/orderMange/index.vue

<template>
    <!-- 订单管理 -->
    <div class="container">
        <div class="head-title">
            <span>{{ route.meta.title }} </span>
            <span class="head-title-right">
                <a-button class="m-r-10" type="primary" @click="handleDialog({})"> {{ $t('lotCard.titleSim')
                    }}</a-button>
                <a-button type="primary" @click="handleIssuedDialog({})">{{ $t('lotCard.titleOrder') }}</a-button>
            </span>
        </div>
        <!-- 搜索条件区 -->
        <div class="search-section">
            <a-form :model="searchForm" ref="formRef" layout="inline">
                <a-form-item field="ICCID" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
                    :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
                    <a-input v-model="searchForm.ICCID" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
                        allow-clear />
                </a-form-item>
                <a-form-item field="dataBundleId" :label="$t('lotCard.dataBundleId')">
                    <a-input v-model="searchForm.cardNumber"
                        :placeholder="$t('lotCard.please') + $t('lotCard.dataBundleId')" allow-clear />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
                        <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </div>

        <a-table row-key="ICCID" :data="dataSource" :columns="columns" :pagination="pagination"
            :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
            <template #id="{ record }">
                <!-- 结束套餐 -->
                <a-popconfirm :content="$t('lotCard.confirmOrderEnd')" :ok-text="$t('form.Confirm')"
                    :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('lotCard.orderEnd') }}</a>
                </a-popconfirm>
            </template>

        </a-table>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import { Message, Notification } from '@arco-design/web-vue'
import { orderList } from "@/api/path/lotCard.api"

const { proxy } = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
    "orderId": "",
    "is_Refuel": "",
    "refuelingId": "",
    "dataBundleId": "",
    "quantity": 0,
    "ICCID": "",
    "sendLang": "",
    "price": "",
    "totalAmount": "",
    "currency": "",
    "userId": 0,
    "current": 1,
    "size": 10
});

const dataSource = ref([]);
const route = useRoute();
const pagination = ref({
    total: 0,
    pageSize: 10,
    current: 1,
})

const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const selectedKeys = ref([])

const dialogRef = ref()
const issuedDialogRef = ref()
const orderDialogRef = ref()


const intData = async () => {
    const param = {
        current: pagination.value.current,
        size: pagination.value.pageSize,
        ...searchForm.value,
    }
    const { data } = await orderList(param)
    dataSource.value = data.records || []
    pagination.value.total = data.total
}

const handleDialog = (data) => {
    if (selectedKeys.value.length > 0) {
        dialogRef.value.open(selectedKeys.value)
        return
    }
    dialogRef.value.open([data.ICCID])
};

const handleIssuedDialog = (data) => {
    if (selectedKeys.value.length > 0) {
        issuedDialogRef.value.open(selectedKeys.value)
        return
    }
    issuedDialogRef.value.open([data.ICCID])
}

const handleOrderDialog = (data) => {
    orderDialogRef.value.open(data)
}


const handleUnsubscribeDialog = async (data) => {
    // 订阅关系状态
    // 1：未激活
    // 2: 已过期
    // 3: 已激活99：已退款
    let info = {}
    let param = {}
    // TODO 入参获取不到，结束套餐可能位置存在错误
    if (data.status == 1) {
        param = {
            "orderId": "12410291340347056782",
            "thirdOrderId": "1848992146566851025"
        }
        info = await unsubscribe(param)
    }
    if (data.status == 3) {
        param = {
            "iccidPackageList": [
                {
                    "iccid": "1845700383613420930",
                    "imsi": "454120387374989",
                    "packageid": "1851137028516811138"
                }
            ]
        }
        info = await release(param)

    }
    if (info.code == 200) {
        Message.success({
            content: data.msg,
            duration: 2000,
        });
    }
};


const handleSearch = () => {
    formRef.value.validate((errors) => {
        if (!errors) {
            intData()
        }
    });
}
const resetSearch = () => {
    proxy.$refs.formRef.resetFields()
    intData()
}




onMounted(() => {
    intData()
})
</script>

<style scoped lang="less">
.head-title-right {
    .m-r-10 {
        margin-right: 10px;
    }

}

.search-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

.container {
    .head-title {
        display: flex;
        justify-content: space-between;
    }

    .form-row {
        display: flex;

        .form-row-col {
            width: 25%;
            display: flex;
            align-items: center;

            .form-row-label {
                width: 120px;
                text-align: right;
            }
        }
    }
}
</style>