merchant_feedov_web/src/views/admin/order/PackageRecharge/index.vue

<!-- 套餐充值订单 -->
<template>
    <div class="silent-expire-alarm">
        <!-- 搜索条件区 -->
        <div class="search-section">
            <a-form :model="searchForm" layout="inline">
                <a-form-item field="cardNumber" label="订单编号">
                    <a-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" allow-clear />
                </a-form-item>
                <a-form-item field="customerName" label="ICCID">
                    <a-input v-model="searchForm.customerName" placeholder="请输入ICCID" allow-clear />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" @click="handleSearch">搜索</a-button>
                        <a-button @click="resetSearch">重置</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </div>
        <div class="audit-btn">
            <a-button @click="openAudit" type="text">
                <template #icon>
                    <icon-plus-circle />
                </template>
                <template #default>审核</template>
            </a-button>
        </div>
        <!-- 数据表格 -->
        <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
            <template #operate="{ record }">
                <a-button @click="openContract(record)" type="text">上传合同</a-button>
            </template>
            <template #detail="{ record }">
                <a-button @click="openDetail(record)" type="text">订单详情</a-button>
            </template>
        </a-table>
        <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
            okText="保存" cancelText="关闭">
            <a-form :model="formContract" auto-label-width>
                <a-form-item field="orderNumber" label="单号">
                    <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
                    <div class="audit-txt">{{ formContract.orderNumber }}</div>
                </a-form-item>
                <a-form-item field="customerName" label="客户">
                    <!-- <a-input v-model="formContract.customerName" disabled placeholder="请输入客户" /> -->
                    <div class="audit-txt" style="color:#418035;">{{ formContract.customerName }}</div>
                </a-form-item>
                <a-form-item field="fileList" label="销售合同">
                    <a-upload action="/" :default-file-list="formContract.fileList" />
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
            okText="确定审核" cancelText="关闭">
            <a-form :model="formAudit" auto-label-width>
                <a-form-item field="customerName" label="客户">
                    <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
                    <div class="audit-txt" style="color:#418035;">演示账号02</div>
                </a-form-item>
                <a-form-item field="cardType" label="卡类型">
                    <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
                    <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨<div class="audit-tag">共1张卡</div>
                    </div>
                </a-form-item>
                <a-form-item field="money" label="资费">
                    <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
                    <div class="audit-txt">“移动100M月包” <div class="audit-tag">订购12个月</div>
                    </div>
                </a-form-item>
                <a-form-item field="orderStatus" label="订单状态">
                    <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
                    <a-radio-group v-model="formAudit.orderStatus" :options="options" />
                </a-form-item>
                <a-form-item field="auditOpinion" label="审核意见">
                    <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
                    <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
                </a-form-item>
                <a-form-item field="fileList" label="销售合同">
                    <a-upload action="/" :default-file-list="formAudit.fileList" />
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="showDetail" width="800px" title="订单详情" :hide-cancel="true" @cancel="detailCancel">
            <div class="detail-box">
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">订单编号</div>
                        <div class="item-content">53357981207</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">订单状态</div>
                        <div class="item-content">已发货</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">发货日期</div>
                        <div class="item-content">2024-10-24 17:46:33</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">运营商</div>
                        <div class="item-content">泰国AIS</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">资费信息</div>
                        <div class="item-content">1.0G/月</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">最短订阅周期</div>
                        <div class="item-content">3个月</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">最长订阅周期</div>
                        <div class="item-content">--</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">流量结算方式</div>
                        <div class="item-content">按单流量消耗计费</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">结算周期</div>
                        <div class="item-content">月</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">流量资费计费</div>
                        <div class="item-content">0.8美金/G;MRC:0元;网络接入0元</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">卡类型</div>
                        <div class="item-content">工业级PlugIn</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">卡板费</div>
                        <div class="item-content">1美金</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">流量池</div>
                        <div class="item-content">组池</div>
                    </div>
                    <div class="detail-item">
                        <div class="item-label">沉默期</div>
                        <div class="item-content">6个月</div>
                    </div>
                </div>
                <div class="detail-item-box">
                    <div class="detail-item">
                        <div class="item-label">卡数量</div>
                        <div class="item-content">10000;已分配0，已退回0，已转移0
                            <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-table">
                <a-table :columns="columnsDetail" :data="dataDetail" />
            </div>
        </a-modal>
        <a-modal v-model:visible="showCard" width="800px" title="分配卡号" @cancel="showCard = false"
            @before-ok="submitCard" okText="确认" cancelText="取消">
            <a-textarea :auto-size="{
                minRows: 15,
                maxRows: 15
            }" v-model="cardNumber" max-length="1000" :show-word-limit="true"
                placeholder="请输入iccid,一行一个或者逗号分隔；不支持两种混合号码。" allow-clear />
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const searchForm = reactive({
    cardNumber: '',
    customerName: '',
});

const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
    { title: '订单编号', dataIndex: 'cardNumber' },
    { title: 'ICCID', dataIndex: 'customerName' },
    { title: 'MSISDN', dataIndex: 'msisdn' },
    { title: '订单类型', dataIndex: 'orderStatus' },
    { title: '运营商名称', dataIndex: 'cardQuantity' },
    { title: '购买套餐', dataIndex: 'source' },
    { title: '套餐类型', dataIndex: 'packageStatus' },
    { title: '订购时长', dataIndex: 'money' },
    { title: '套餐价格', dataIndex: 'outMoney' },
    { title: '支付状态', dataIndex: 'payStatus' },
    { title: '支付价格', dataIndex: 'payMoney' },
    { title: '支付时间', dataIndex: 'orderTime' },
    // { title: '操作', slotName: 'operate', align: 'center' },
    { title: '详情', slotName: 'detail', align: 'center' },
];
const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
{ title: '池名称及编号', dataIndex: 'nameAndId' },
{ title: '卡状态', dataIndex: 'status' },
]
const dataDetail = ref([{
    iccid: '8986061800002054589N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
},
{
    iccid: '8986061800002054588N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
}, {
    iccid: '8986061800002054587N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
}, {
    iccid: '8986061800002054586N',
    nameAndId: '泰国监控40G共享/53357981207',
    status: '沉默期'
},])
const tableData = ref([]);
// 上传合同的弹框
const uploadContract = ref(false);
const pagination = reactive({
    total: tableData.value.length,
    current: 1,
    pageSize: 10,
});
const openContract = (item) => {
    console.log(item, '???')
    uploadContract.value = true;
    formContract.customerName = item.customerName;
    formContract.orderNumber = item.cardNumber;
};
//订单详情的弹框
const showDetail = ref(false);
// 查看订单详情
const openDetail = (item) => {
    showDetail.value = true;
}
const handleBeforeOk = (done) => {
    console.log(formContract)
    window.setTimeout(() => {
        done()
        // prevent close
        // done(false)
    }, 3000)
};
const handleCancel = () => {
    uploadContract.value = false;
}
const handleSearch = () => {
    console.log('Search form data:', searchForm);
    Message.success('执行搜索操作');
};

const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        if (Array.isArray(searchForm[key])) {
            searchForm[key] = [];
        } else {
            searchForm[key] = null;
        }
    });
    Message.success('搜索条件已重置');
};
// 文件上传的列表
const formContract = reactive({
    orderNumber: '',
    customerName: '',
    fileList: []
})
// 订单状态
const options = [
    { label: '发货', value: '1' },
    { label: '退回', value: '2' },
];
// 审核
const showAudit = ref(false);
const formAudit = reactive({
    customerName: '',
    cardType: '',
    money: '',
    orderStatus: '',
    auditOpinion: '',
    fileList: []
})
// 触发审核的弹框
const openAudit = () => {
    showAudit.value = true;
}
// 确认审核
const submitAudit = () => {
    console.log(formAudit, 'lll')
    window.setTimeout(() => {
        showAudit.value = false;
    }, 1000)
}
// 分配卡号的值
const cardNumber = ref('');
const showCard = ref(false);
const detailCancel = () => {
}
const submitCard = () => {
}
</script>

<style scoped lang="less">
.silent-expire-alarm {
    padding: 20px !important;
    // background: #fcf;
}

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

.arco-table-th {
    white-space: nowrap;
}

.audit-txt {
    display: flex;
    justify-content: center;
    align-items: center;

    .audit-tag {
        margin-left: 20px;
        background: #63c2c6;
        color: #fff;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 50px;
    }
}

.audit-btn {
    margin-bottom: 10px;
}

.detail-box {
    .detail-item-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .detail-item {
            //styleName: Body/Medium;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            display: flex;
            align-items: center;
            min-width: 350px;

            .item-label {
                color: rgba(0, 0, 0, 0.4);
                width: 120px;
                text-align: right;
                margin-right: 10px;
            }

            .item-content {
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}

.detail-table {
    margin-top: 20px;
}
</style>