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-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
                    :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
                    <a-button class="m-r-10" type="primary">{{ $t('lotCard.titleOrder') }}</a-button>
                </a-popconfirm>
                <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
                    :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
                    <a-button type="primary">{{ $t('lotCard.titleCancelOrder') }}</a-button>
                </a-popconfirm>
            </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="id" :data="dataSource" :columns="columns" :pagination="pagination"
            :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
            <template #id="{ record }">
                <!-- 订购生成订单 -->
                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
                    :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
                        $t('lotCard.titleOrder') }}</a>
                </a-popconfirm>
                <!-- 取消订单-退订 -->
                <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :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.titleCancelOrder')
                        }}</a>
                </a-popconfirm>
            </template>

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

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import { Message, Notification } from '@arco-design/web-vue'
import { orderList, setOrderDataPlan, orderCancel } 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 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 handleOrderDialog = async (info) => {
    let paramList = []
    if (selectedKeys.value.length > 0) {
        const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))

        paramList = list.map(item => {
            return {
                ICCID: item.ICCID,
                dataBundleId: item.dataBundleId,
                source: item.source,
                quantity: 1
            }
        })
    }
    if (info && Object.keys(info).length > 0) {
        paramList = [{
            ICCID: info.ICCID,
            dataBundleId: info.dataBundleId,
            source: info.source,
            quantity: 1
        }]
    }


    if (selectedKeys.value.length > 0 || info && Object.keys(info).length > 0) {

        const { code, data } = await setOrderDataPlan(paramList)

        if (code == 200) {
            Message.success({
                content: data,
                duration: 2000,
            })
        }
    } else {
        Message.warning({
            content: $t('lotCard.tipsOrder'),
            duration: 2000,
        })
    }
}

// 退订
const handleUnsubscribeDialog = async (record) => {
    // 订阅关系状态
    // 1：未激活
    // 2: 已过期
    // 3: 已激活99：已退款
    let param = {}
    let statusFlag = true
    if (selectedKeys.value.length > 0) {
        const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))
        list.forEach(item => {
            if (!(item.status == 2 || item.status == 3)) statusFlag = false
        })
        param = {
            ids: selectedKeys.value
        }
    }
    if (record && record.id && !(record.status == 2 || record.status == 3)) {
        statusFlag = false
        param = {
            ids: [record.id]
        }
    }


    if ((selectedKeys.value.length > 0 || record && record.id) && statusFlag) {

        const { code, data } = await orderCancel(param)

        if (code == 200) {
            Message.success({
                content: data,
                duration: 2000,
            })
        }
    } else {
        Message.warning({
            content: $t('lotCard.tipsOrder'),
            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>