1451 lines
44 KiB
Vue
1451 lines
44 KiB
Vue
<template>
|
||
<ArtTableFullScreen>
|
||
<div class="standalone-card-list-page" id="table-full-screen">
|
||
<!-- 搜索栏 -->
|
||
<ArtSearchBar
|
||
v-model:filter="formFilters"
|
||
:items="formItems"
|
||
label-width="90"
|
||
@reset="handleReset"
|
||
@search="handleSearch"
|
||
></ArtSearchBar>
|
||
|
||
<ElCard shadow="never" class="art-table-card">
|
||
<!-- 表格头部 -->
|
||
<ArtTableHeader
|
||
:columnList="columnOptions"
|
||
v-model:columns="columnChecks"
|
||
@refresh="handleRefresh"
|
||
>
|
||
<template #left>
|
||
<ElButton
|
||
type="success"
|
||
:disabled="selectedCards.length === 0"
|
||
@click="showAllocateDialog"
|
||
>
|
||
批量分配
|
||
</ElButton>
|
||
<ElButton
|
||
type="warning"
|
||
:disabled="selectedCards.length === 0"
|
||
@click="showRecallDialog"
|
||
>
|
||
批量回收
|
||
</ElButton>
|
||
<ElButton
|
||
type="primary"
|
||
:disabled="selectedCards.length === 0"
|
||
@click="showSeriesBindingDialog"
|
||
>
|
||
批量设置套餐系列
|
||
</ElButton>
|
||
<ElButton type="info" @contextmenu.prevent="showMoreMenu">更多操作</ElButton>
|
||
</template>
|
||
</ArtTableHeader>
|
||
|
||
<!-- 表格 -->
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="cardList"
|
||
:currentPage="pagination.page"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:marginTop="10"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn type="selection" width="55" />
|
||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||
</template>
|
||
</ArtTable>
|
||
|
||
<!-- 批量分配对话框 -->
|
||
<ElDialog
|
||
v-model="allocateDialogVisible"
|
||
title="批量分配"
|
||
width="600px"
|
||
@close="handleAllocateDialogClose"
|
||
>
|
||
<ElForm
|
||
ref="allocateFormRef"
|
||
:model="allocateForm"
|
||
:rules="allocateRules"
|
||
label-width="120px"
|
||
>
|
||
<ElFormItem label="目标店铺" prop="to_shop_id">
|
||
<ElSelect
|
||
v-model="allocateForm.to_shop_id"
|
||
placeholder="请选择或搜索目标店铺"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
:remote-method="searchTargetShops"
|
||
:loading="targetShopLoading"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption
|
||
v-for="shop in targetShopList"
|
||
:key="shop.id"
|
||
:label="shop.shop_name"
|
||
:value="shop.id"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem label="选卡方式" prop="selection_type">
|
||
<ElRadioGroup v-model="allocateForm.selection_type">
|
||
<ElRadio label="list">ICCID列表</ElRadio>
|
||
<ElRadio label="range">号段范围</ElRadio>
|
||
<ElRadio label="filter">筛选条件</ElRadio>
|
||
</ElRadioGroup>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem v-if="allocateForm.selection_type === 'list'" label="ICCID列表">
|
||
<div>已选择 {{ selectedCards.length }} 张卡</div>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem
|
||
v-if="allocateForm.selection_type === 'range'"
|
||
label="起始ICCID"
|
||
prop="iccid_start"
|
||
>
|
||
<ElInput v-model="allocateForm.iccid_start" placeholder="请输入起始ICCID" />
|
||
</ElFormItem>
|
||
<ElFormItem
|
||
v-if="allocateForm.selection_type === 'range'"
|
||
label="结束ICCID"
|
||
prop="iccid_end"
|
||
>
|
||
<ElInput v-model="allocateForm.iccid_end" placeholder="请输入结束ICCID" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem v-if="allocateForm.selection_type === 'filter'" label="运营商">
|
||
<ElSelect
|
||
v-model="allocateForm.carrier_id"
|
||
placeholder="请选择运营商"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption label="中国移动" :value="1" />
|
||
<ElOption label="中国联通" :value="2" />
|
||
<ElOption label="中国电信" :value="3" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem v-if="allocateForm.selection_type === 'filter'" label="卡状态">
|
||
<ElSelect
|
||
v-model="allocateForm.status"
|
||
placeholder="请选择状态"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption label="在库" :value="1" />
|
||
<ElOption label="已分销" :value="2" />
|
||
<ElOption label="已激活" :value="3" />
|
||
<ElOption label="已停用" :value="4" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem v-if="allocateForm.selection_type === 'filter'" label="批次号">
|
||
<ElInput v-model="allocateForm.batch_no" placeholder="请输入批次号" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="备注">
|
||
<ElInput
|
||
v-model="allocateForm.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入备注信息"
|
||
/>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="allocateDialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleAllocate" :loading="allocateLoading">
|
||
确认分配
|
||
</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 批量回收对话框 -->
|
||
<ElDialog
|
||
v-model="recallDialogVisible"
|
||
title="批量回收"
|
||
width="600px"
|
||
@close="handleRecallDialogClose"
|
||
>
|
||
<ElForm ref="recallFormRef" :model="recallForm" :rules="recallRules" label-width="120px">
|
||
<ElFormItem label="来源店铺" prop="from_shop_id">
|
||
<ElSelect
|
||
v-model="recallForm.from_shop_id"
|
||
placeholder="请选择或搜索来源店铺"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
:remote-method="searchFromShops"
|
||
:loading="fromShopLoading"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption
|
||
v-for="shop in fromShopList"
|
||
:key="shop.id"
|
||
:label="shop.shop_name"
|
||
:value="shop.id"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem label="选卡方式" prop="selection_type">
|
||
<ElRadioGroup v-model="recallForm.selection_type">
|
||
<ElRadio label="list">ICCID列表</ElRadio>
|
||
<ElRadio label="range">号段范围</ElRadio>
|
||
<ElRadio label="filter">筛选条件</ElRadio>
|
||
</ElRadioGroup>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem v-if="recallForm.selection_type === 'list'" label="ICCID列表">
|
||
<div>已选择 {{ selectedCards.length }} 张卡</div>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem
|
||
v-if="recallForm.selection_type === 'range'"
|
||
label="起始ICCID"
|
||
prop="iccid_start"
|
||
>
|
||
<ElInput v-model="recallForm.iccid_start" placeholder="请输入起始ICCID" />
|
||
</ElFormItem>
|
||
<ElFormItem
|
||
v-if="recallForm.selection_type === 'range'"
|
||
label="结束ICCID"
|
||
prop="iccid_end"
|
||
>
|
||
<ElInput v-model="recallForm.iccid_end" placeholder="请输入结束ICCID" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem v-if="recallForm.selection_type === 'filter'" label="运营商">
|
||
<ElSelect
|
||
v-model="recallForm.carrier_id"
|
||
placeholder="请选择运营商"
|
||
clearable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption label="中国移动" :value="1" />
|
||
<ElOption label="中国联通" :value="2" />
|
||
<ElOption label="中国电信" :value="3" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem v-if="recallForm.selection_type === 'filter'" label="批次号">
|
||
<ElInput v-model="recallForm.batch_no" placeholder="请输入批次号" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="备注">
|
||
<ElInput
|
||
v-model="recallForm.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入备注信息"
|
||
/>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="recallDialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleRecall" :loading="recallLoading">
|
||
确认回收
|
||
</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 分配结果对话框 -->
|
||
<ElDialog v-model="resultDialogVisible" :title="resultTitle" width="700px">
|
||
<ElDescriptions :column="2" border>
|
||
<ElDescriptionsItem label="操作单号">{{
|
||
allocationResult.allocation_no
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="待处理总数">{{
|
||
allocationResult.total_count
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="成功数">
|
||
<ElTag type="success">{{ allocationResult.success_count }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="失败数">
|
||
<ElTag type="danger">{{ allocationResult.fail_count }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
</ElDescriptions>
|
||
|
||
<div
|
||
v-if="allocationResult.failed_items && allocationResult.failed_items.length > 0"
|
||
style="margin-top: 20px"
|
||
>
|
||
<ElDivider content-position="left">失败项详情</ElDivider>
|
||
<ElTable :data="allocationResult.failed_items" border max-height="300">
|
||
<ElTableColumn prop="iccid" label="ICCID" width="180" />
|
||
<ElTableColumn prop="reason" label="失败原因" />
|
||
</ElTable>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton type="primary" @click="resultDialogVisible = false">确定</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 批量设置套餐系列绑定对话框 -->
|
||
<ElDialog
|
||
v-model="seriesBindingDialogVisible"
|
||
title="批量设置套餐系列绑定"
|
||
width="600px"
|
||
@close="handleSeriesBindingDialogClose"
|
||
>
|
||
<ElForm
|
||
ref="seriesBindingFormRef"
|
||
:model="seriesBindingForm"
|
||
:rules="seriesBindingRules"
|
||
label-width="120px"
|
||
>
|
||
<ElFormItem label="已选择卡数">
|
||
<div>已选择 {{ selectedCards.length }} 张卡</div>
|
||
</ElFormItem>
|
||
<ElFormItem label="套餐系列" prop="series_id">
|
||
<ElSelect
|
||
v-model="seriesBindingForm.series_id"
|
||
placeholder="请选择或搜索套餐系列"
|
||
style="width: 100%"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
:remote-method="searchPackageSeries"
|
||
:loading="seriesLoading"
|
||
clearable
|
||
>
|
||
<ElOption label="清除关联" :value="0" />
|
||
<ElOption
|
||
v-for="series in packageSeriesList"
|
||
:key="series.id"
|
||
:label="series.series_name"
|
||
:value="series.id"
|
||
:disabled="series.status !== 1"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="seriesBindingDialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleSeriesBinding" :loading="seriesBindingLoading">
|
||
确认设置
|
||
</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 套餐系列绑定结果对话框 -->
|
||
<ElDialog v-model="seriesBindingResultDialogVisible" title="设置结果" width="700px">
|
||
<ElDescriptions :column="2" border>
|
||
<ElDescriptionsItem label="成功数">
|
||
<ElTag type="success">{{ seriesBindingResult.success_count }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="失败数">
|
||
<ElTag type="danger">{{ seriesBindingResult.fail_count }}</ElTag>
|
||
</ElDescriptionsItem>
|
||
</ElDescriptions>
|
||
|
||
<div
|
||
v-if="seriesBindingResult.failed_items && seriesBindingResult.failed_items.length > 0"
|
||
style="margin-top: 20px"
|
||
>
|
||
<ElDivider content-position="left">失败项详情</ElDivider>
|
||
<ElTable :data="seriesBindingResult.failed_items" border max-height="300">
|
||
<ElTableColumn prop="iccid" label="ICCID" width="180" />
|
||
<ElTableColumn prop="reason" label="失败原因" />
|
||
</ElTable>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton type="primary" @click="seriesBindingResultDialogVisible = false"
|
||
>确定</ElButton
|
||
>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 卡详情对话框 -->
|
||
<ElDialog v-model="cardDetailDialogVisible" title="卡片详情" width="900px">
|
||
<div v-if="cardDetailLoading" style="text-align: center; padding: 40px">
|
||
<ElIcon class="is-loading" :size="40"><Loading /></ElIcon>
|
||
<div style="margin-top: 16px">加载中...</div>
|
||
</div>
|
||
|
||
<ElDescriptions v-else-if="currentCardDetail" :column="3" border>
|
||
<ElDescriptionsItem label="卡ID">{{ currentCardDetail.id }}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="ICCID" :span="2">{{
|
||
currentCardDetail.iccid
|
||
}}</ElDescriptionsItem>
|
||
|
||
<ElDescriptionsItem label="卡接入号">{{
|
||
currentCardDetail.msisdn || '--'
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="运营商">{{
|
||
currentCardDetail.carrier_name || '--'
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="运营商类型">{{
|
||
getCarrierTypeText(currentCardDetail.carrier_type)
|
||
}}</ElDescriptionsItem>
|
||
|
||
<ElDescriptionsItem label="卡类型">{{
|
||
currentCardDetail.card_type || '--'
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="卡业务类型">{{
|
||
getCardCategoryText(currentCardDetail.card_category)
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="成本价">{{
|
||
formatCardPrice(currentCardDetail.cost_price)
|
||
}}</ElDescriptionsItem>
|
||
|
||
<ElDescriptionsItem label="分销价">{{
|
||
formatCardPrice(currentCardDetail.distribute_price)
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="状态">
|
||
<ElTag :type="getCardDetailStatusTagType(currentCardDetail.status)">
|
||
{{ getCardDetailStatusText(currentCardDetail.status) }}
|
||
</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="激活状态">
|
||
<ElTag :type="currentCardDetail.activation_status === 1 ? 'success' : 'info'">
|
||
{{ currentCardDetail.activation_status === 1 ? '已激活' : '未激活' }}
|
||
</ElTag>
|
||
</ElDescriptionsItem>
|
||
|
||
<ElDescriptionsItem label="实名状态">
|
||
<ElTag :type="currentCardDetail.real_name_status === 1 ? 'success' : 'warning'">
|
||
{{ currentCardDetail.real_name_status === 1 ? '已实名' : '未实名' }}
|
||
</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="网络状态">
|
||
<ElTag :type="currentCardDetail.network_status === 1 ? 'success' : 'danger'">
|
||
{{ currentCardDetail.network_status === 1 ? '开机' : '停机' }}
|
||
</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="累计流量使用"
|
||
>{{ currentCardDetail.data_usage_mb }} MB</ElDescriptionsItem
|
||
>
|
||
|
||
<ElDescriptionsItem label="首次佣金">
|
||
<ElTag :type="currentCardDetail.first_commission_paid ? 'success' : 'info'">
|
||
{{ currentCardDetail.first_commission_paid ? '已支付' : '未支付' }}
|
||
</ElTag>
|
||
</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="累计充值">{{
|
||
formatCardPrice(currentCardDetail.accumulated_recharge)
|
||
}}</ElDescriptionsItem>
|
||
<ElDescriptionsItem label="创建时间">{{
|
||
formatDateTime(currentCardDetail.created_at)
|
||
}}</ElDescriptionsItem>
|
||
|
||
<ElDescriptionsItem label="更新时间" :span="2">{{
|
||
formatDateTime(currentCardDetail.updated_at)
|
||
}}</ElDescriptionsItem>
|
||
</ElDescriptions>
|
||
|
||
<ElEmpty v-else description="未找到卡片信息" />
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton type="primary" @click="cardDetailDialogVisible = false">关闭</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 更多操作右键菜单 -->
|
||
<ArtMenuRight
|
||
ref="moreMenuRef"
|
||
:menu-items="moreMenuItems"
|
||
:menu-width="180"
|
||
@select="handleMoreMenuSelect"
|
||
/>
|
||
</ElCard>
|
||
</div>
|
||
</ArtTableFullScreen>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { h } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { CardService, ShopService, PackageSeriesService } from '@/api/modules'
|
||
import { ElMessage, ElTag, ElIcon } from 'element-plus'
|
||
import { Loading } from '@element-plus/icons-vue'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import type { SearchFormItem } from '@/types'
|
||
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
||
import { formatDateTime } from '@/utils/business/format'
|
||
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
|
||
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
|
||
import type {
|
||
StandaloneIotCard,
|
||
StandaloneCardStatus,
|
||
AllocateStandaloneCardsRequest,
|
||
RecallStandaloneCardsRequest,
|
||
AllocateStandaloneCardsResponse,
|
||
BatchSetCardSeriesBindingResponse
|
||
} from '@/types/api/card'
|
||
import type { PackageSeriesResponse } from '@/types/api'
|
||
|
||
defineOptions({ name: 'StandaloneCardList' })
|
||
|
||
const router = useRouter()
|
||
const loading = ref(false)
|
||
const allocateDialogVisible = ref(false)
|
||
const allocateLoading = ref(false)
|
||
const recallDialogVisible = ref(false)
|
||
const recallLoading = ref(false)
|
||
const resultDialogVisible = ref(false)
|
||
const resultTitle = ref('')
|
||
const tableRef = ref()
|
||
const allocateFormRef = ref<FormInstance>()
|
||
const recallFormRef = ref<FormInstance>()
|
||
const selectedCards = ref<StandaloneIotCard[]>([])
|
||
const allocationResult = ref<AllocateStandaloneCardsResponse>({
|
||
allocation_no: '',
|
||
total_count: 0,
|
||
success_count: 0,
|
||
fail_count: 0,
|
||
failed_items: null
|
||
})
|
||
|
||
// 套餐系列绑定相关
|
||
const seriesBindingDialogVisible = ref(false)
|
||
const seriesBindingLoading = ref(false)
|
||
const seriesBindingResultDialogVisible = ref(false)
|
||
const seriesBindingFormRef = ref<FormInstance>()
|
||
const seriesLoading = ref(false)
|
||
const packageSeriesList = ref<PackageSeriesResponse[]>([])
|
||
const seriesBindingForm = reactive({
|
||
series_id: undefined as number | undefined
|
||
})
|
||
const seriesBindingRules = reactive<FormRules>({
|
||
series_id: [{ required: true, message: '请选择套餐系列', trigger: 'change' }]
|
||
})
|
||
const seriesBindingResult = ref<BatchSetCardSeriesBindingResponse>({
|
||
success_count: 0,
|
||
fail_count: 0,
|
||
failed_items: null
|
||
})
|
||
|
||
// 卡详情弹窗相关
|
||
const cardDetailDialogVisible = ref(false)
|
||
const cardDetailLoading = ref(false)
|
||
const currentCardDetail = ref<any>(null)
|
||
|
||
// 更多操作右键菜单
|
||
const moreMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
|
||
|
||
// 店铺相关
|
||
const targetShopLoading = ref(false)
|
||
const fromShopLoading = ref(false)
|
||
const targetShopList = ref<any[]>([])
|
||
const fromShopList = ref<any[]>([])
|
||
|
||
// 搜索表单初始值
|
||
const initialSearchState = {
|
||
status: undefined,
|
||
carrier_id: undefined,
|
||
iccid: '',
|
||
msisdn: '',
|
||
is_distributed: undefined
|
||
}
|
||
|
||
// 搜索表单
|
||
const formFilters = reactive({ ...initialSearchState })
|
||
|
||
// 批量分配表单
|
||
const allocateForm = reactive<Partial<AllocateStandaloneCardsRequest>>({
|
||
selection_type: 'list',
|
||
to_shop_id: undefined,
|
||
iccids: [],
|
||
iccid_start: '',
|
||
iccid_end: '',
|
||
carrier_id: undefined,
|
||
status: undefined,
|
||
batch_no: '',
|
||
remark: ''
|
||
})
|
||
|
||
// 批量分配表单验证规则
|
||
const allocateRules = reactive<FormRules>({
|
||
to_shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }],
|
||
selection_type: [{ required: true, message: '请选择选卡方式', trigger: 'change' }],
|
||
iccid_start: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
if (allocateForm.selection_type === 'range' && !value) {
|
||
callback(new Error('请输入起始ICCID'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
iccid_end: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
if (allocateForm.selection_type === 'range' && !value) {
|
||
callback(new Error('请输入结束ICCID'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 批量回收表单
|
||
const recallForm = reactive<Partial<RecallStandaloneCardsRequest>>({
|
||
selection_type: 'list',
|
||
from_shop_id: undefined,
|
||
iccids: [],
|
||
iccid_start: '',
|
||
iccid_end: '',
|
||
carrier_id: undefined,
|
||
batch_no: '',
|
||
remark: ''
|
||
})
|
||
|
||
// 批量回收表单验证规则
|
||
const recallRules = reactive<FormRules>({
|
||
from_shop_id: [{ required: true, message: '请选择来源店铺', trigger: 'change' }],
|
||
selection_type: [{ required: true, message: '请选择选卡方式', trigger: 'change' }],
|
||
iccid_start: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
if (recallForm.selection_type === 'range' && !value) {
|
||
callback(new Error('请输入起始ICCID'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
iccid_end: [
|
||
{
|
||
required: true,
|
||
validator: (rule, value, callback) => {
|
||
if (recallForm.selection_type === 'range' && !value) {
|
||
callback(new Error('请输入结束ICCID'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
page: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
})
|
||
|
||
// 搜索表单配置
|
||
const formItems: SearchFormItem[] = [
|
||
{
|
||
label: '状态',
|
||
prop: 'status',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '在库', value: 1 },
|
||
{ label: '已分销', value: 2 },
|
||
{ label: '已激活', value: 3 },
|
||
{ label: '已停用', value: 4 }
|
||
]
|
||
},
|
||
{
|
||
label: '运营商',
|
||
prop: 'carrier_id',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '中国移动', value: 1 },
|
||
{ label: '中国联通', value: 2 },
|
||
{ label: '中国电信', value: 3 }
|
||
]
|
||
},
|
||
{
|
||
label: 'ICCID',
|
||
prop: 'iccid',
|
||
type: 'input',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请输入ICCID'
|
||
}
|
||
},
|
||
{
|
||
label: '卡接入号',
|
||
prop: 'msisdn',
|
||
type: 'input',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请输入卡接入号'
|
||
}
|
||
},
|
||
{
|
||
label: '是否已分销',
|
||
prop: 'is_distributed',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '是', value: true },
|
||
{ label: '否', value: false }
|
||
]
|
||
}
|
||
]
|
||
|
||
// 列配置
|
||
const columnOptions = [
|
||
{ label: 'ICCID', prop: 'iccid' },
|
||
{ label: '卡接入号', prop: 'msisdn' },
|
||
{ label: '卡类型', prop: 'card_type' },
|
||
{ label: '卡业务类型', prop: 'card_category' },
|
||
{ label: '运营商', prop: 'carrier_name' },
|
||
{ label: '成本价', prop: 'cost_price' },
|
||
{ label: '分销价', prop: 'distribute_price' },
|
||
{ label: '状态', prop: 'status' },
|
||
{ label: '激活状态', prop: 'activation_status' },
|
||
{ label: '网络状态', prop: 'network_status' },
|
||
{ label: '实名状态', prop: 'real_name_status' },
|
||
{ label: '累计流量(MB)', prop: 'data_usage_mb' },
|
||
{ label: '首次佣金', prop: 'first_commission_paid' },
|
||
{ label: '累计充值', prop: 'accumulated_recharge' },
|
||
{ label: '创建时间', prop: 'created_at' }
|
||
]
|
||
|
||
const cardList = ref<StandaloneIotCard[]>([])
|
||
|
||
// 获取状态标签类型
|
||
const getStatusType = (status: StandaloneCardStatus) => {
|
||
switch (status) {
|
||
case 1:
|
||
return 'info'
|
||
case 2:
|
||
return 'warning'
|
||
case 3:
|
||
return 'success'
|
||
case 4:
|
||
return 'danger'
|
||
default:
|
||
return 'info'
|
||
}
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status: StandaloneCardStatus) => {
|
||
switch (status) {
|
||
case 1:
|
||
return '在库'
|
||
case 2:
|
||
return '已分销'
|
||
case 3:
|
||
return '已激活'
|
||
case 4:
|
||
return '已停用'
|
||
default:
|
||
return '未知'
|
||
}
|
||
}
|
||
|
||
// 打开卡详情弹窗
|
||
const goToCardDetail = async (iccid: string) => {
|
||
cardDetailDialogVisible.value = true
|
||
cardDetailLoading.value = true
|
||
currentCardDetail.value = null
|
||
|
||
try {
|
||
const res = await CardService.getIotCardDetailByIccid(iccid)
|
||
if (res.code === 0 && res.data) {
|
||
currentCardDetail.value = res.data
|
||
} else {
|
||
ElMessage.error(res.message || '查询失败')
|
||
cardDetailDialogVisible.value = false
|
||
}
|
||
} catch (error: any) {
|
||
console.error('查询卡片详情失败:', error)
|
||
ElMessage.error(error?.message || '查询失败，请检查ICCID是否正确')
|
||
cardDetailDialogVisible.value = false
|
||
} finally {
|
||
cardDetailLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 卡详情辅助函数
|
||
const getCarrierTypeText = (type: string) => {
|
||
const typeMap: Record<string, string> = {
|
||
CMCC: '中国移动',
|
||
CUCC: '中国联通',
|
||
CTCC: '中国电信',
|
||
CBN: '中国广电'
|
||
}
|
||
return typeMap[type] || type
|
||
}
|
||
|
||
const getCardCategoryText = (category: string) => {
|
||
const categoryMap: Record<string, string> = {
|
||
normal: '普通卡',
|
||
industry: '行业卡'
|
||
}
|
||
return categoryMap[category] || category
|
||
}
|
||
|
||
const getCardDetailStatusText = (status: number) => {
|
||
const statusMap: Record<number, string> = {
|
||
1: '在库',
|
||
2: '已分销',
|
||
3: '已激活',
|
||
4: '已停用'
|
||
}
|
||
return statusMap[status] || '未知'
|
||
}
|
||
|
||
const getCardDetailStatusTagType = (status: number) => {
|
||
const typeMap: Record<number, any> = {
|
||
1: 'info',
|
||
2: 'warning',
|
||
3: 'success',
|
||
4: 'danger'
|
||
}
|
||
return typeMap[status] || 'info'
|
||
}
|
||
|
||
const formatCardPrice = (price: number) => {
|
||
return `¥${(price / 100).toFixed(2)}`
|
||
}
|
||
|
||
// 动态列配置
|
||
const { columnChecks, columns } = useCheckedColumns(() => [
|
||
{
|
||
prop: 'iccid',
|
||
label: 'ICCID',
|
||
minWidth: 200,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
return h(
|
||
'span',
|
||
{
|
||
style: { color: 'var(--el-color-primary)', cursor: 'pointer' },
|
||
onClick: () => goToCardDetail(row.iccid)
|
||
},
|
||
row.iccid
|
||
)
|
||
}
|
||
},
|
||
{
|
||
prop: 'msisdn',
|
||
label: '卡接入号',
|
||
width: 130
|
||
},
|
||
{
|
||
prop: 'card_type',
|
||
label: '卡类型',
|
||
width: 100
|
||
},
|
||
{
|
||
prop: 'card_category',
|
||
label: '卡业务类型',
|
||
width: 100
|
||
},
|
||
{
|
||
prop: 'carrier_name',
|
||
label: '运营商',
|
||
width: 150
|
||
},
|
||
{
|
||
prop: 'cost_price',
|
||
label: '成本价',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => `¥${(row.cost_price / 100).toFixed(2)}`
|
||
},
|
||
{
|
||
prop: 'distribute_price',
|
||
label: '分销价',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => `¥${(row.distribute_price / 100).toFixed(2)}`
|
||
},
|
||
{
|
||
prop: 'status',
|
||
label: '状态',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
return h(ElTag, { type: getStatusType(row.status) }, () => getStatusText(row.status))
|
||
}
|
||
},
|
||
{
|
||
prop: 'activation_status',
|
||
label: '激活状态',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
const type = row.activation_status === 1 ? 'success' : 'info'
|
||
const text = row.activation_status === 1 ? '已激活' : '未激活'
|
||
return h(ElTag, { type }, () => text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'network_status',
|
||
label: '网络状态',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
const type = row.network_status === 1 ? 'success' : 'danger'
|
||
const text = row.network_status === 1 ? '开机' : '停机'
|
||
return h(ElTag, { type }, () => text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'real_name_status',
|
||
label: '实名状态',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
const type = row.real_name_status === 1 ? 'success' : 'warning'
|
||
const text = row.real_name_status === 1 ? '已实名' : '未实名'
|
||
return h(ElTag, { type }, () => text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'data_usage_mb',
|
||
label: '累计流量(MB)',
|
||
width: 120
|
||
},
|
||
{
|
||
prop: 'first_commission_paid',
|
||
label: '首次佣金',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => {
|
||
const type = row.first_commission_paid ? 'success' : 'info'
|
||
const text = row.first_commission_paid ? '已支付' : '未支付'
|
||
return h(ElTag, { type, size: 'small' }, () => text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'accumulated_recharge',
|
||
label: '累计充值',
|
||
width: 100,
|
||
formatter: (row: StandaloneIotCard) => `¥${(row.accumulated_recharge / 100).toFixed(2)}`
|
||
},
|
||
{
|
||
prop: 'created_at',
|
||
label: '创建时间',
|
||
width: 180,
|
||
formatter: (row: StandaloneIotCard) => formatDateTime(row.created_at)
|
||
}
|
||
])
|
||
|
||
onMounted(() => {
|
||
getTableData()
|
||
})
|
||
|
||
// 获取单卡列表
|
||
const getTableData = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params = {
|
||
page: pagination.page,
|
||
page_size: pagination.pageSize,
|
||
...formFilters
|
||
}
|
||
// 清理空值
|
||
Object.keys(params).forEach((key) => {
|
||
if (params[key] === '' || params[key] === undefined) {
|
||
delete params[key]
|
||
}
|
||
})
|
||
|
||
const res = await CardService.getStandaloneIotCards(params)
|
||
if (res.code === 0) {
|
||
cardList.value = res.data.items || []
|
||
pagination.total = res.data.total || 0
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
ElMessage.error('获取单卡列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
Object.assign(formFilters, { ...initialSearchState })
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 刷新表格
|
||
const handleRefresh = () => {
|
||
getTableData()
|
||
}
|
||
|
||
// 处理表格分页变化
|
||
const handleSizeChange = (newPageSize: number) => {
|
||
pagination.pageSize = newPageSize
|
||
getTableData()
|
||
}
|
||
|
||
const handleCurrentChange = (newCurrentPage: number) => {
|
||
pagination.page = newCurrentPage
|
||
getTableData()
|
||
}
|
||
|
||
|
||
// 表格选择变化
|
||
const handleSelectionChange = (selection: StandaloneIotCard[]) => {
|
||
selectedCards.value = selection
|
||
}
|
||
|
||
// 加载目标店铺列表
|
||
const loadTargetShops = async (shopName?: string) => {
|
||
targetShopLoading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: 1,
|
||
page_size: 20
|
||
}
|
||
if (shopName) {
|
||
params.shop_name = shopName
|
||
}
|
||
const res = await ShopService.getShops(params)
|
||
if (res.code === 0) {
|
||
targetShopList.value = res.data.items || []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取目标店铺列表失败:', error)
|
||
} finally {
|
||
targetShopLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 搜索目标店铺
|
||
const searchTargetShops = async (query: string) => {
|
||
await loadTargetShops(query || undefined)
|
||
}
|
||
|
||
// 加载来源店铺列表
|
||
const loadFromShops = async (shopName?: string) => {
|
||
fromShopLoading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: 1,
|
||
page_size: 20
|
||
}
|
||
if (shopName) {
|
||
params.shop_name = shopName
|
||
}
|
||
const res = await ShopService.getShops(params)
|
||
if (res.code === 0) {
|
||
fromShopList.value = res.data.items || []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取来源店铺列表失败:', error)
|
||
} finally {
|
||
fromShopLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 搜索来源店铺
|
||
const searchFromShops = async (query: string) => {
|
||
await loadFromShops(query || undefined)
|
||
}
|
||
|
||
// 显示批量分配对话框
|
||
const showAllocateDialog = () => {
|
||
if (selectedCards.value.length === 0) {
|
||
ElMessage.warning('请先选择要分配的卡')
|
||
return
|
||
}
|
||
allocateDialogVisible.value = true
|
||
Object.assign(allocateForm, {
|
||
selection_type: 'list',
|
||
to_shop_id: undefined,
|
||
iccids: selectedCards.value.map((card) => card.iccid),
|
||
iccid_start: '',
|
||
iccid_end: '',
|
||
carrier_id: undefined,
|
||
status: undefined,
|
||
batch_no: '',
|
||
remark: ''
|
||
})
|
||
// 加载默认店铺列表
|
||
loadTargetShops()
|
||
if (allocateFormRef.value) {
|
||
allocateFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 显示批量回收对话框
|
||
const showRecallDialog = () => {
|
||
if (selectedCards.value.length === 0) {
|
||
ElMessage.warning('请先选择要回收的卡')
|
||
return
|
||
}
|
||
recallDialogVisible.value = true
|
||
Object.assign(recallForm, {
|
||
selection_type: 'list',
|
||
from_shop_id: undefined,
|
||
iccids: selectedCards.value.map((card) => card.iccid),
|
||
iccid_start: '',
|
||
iccid_end: '',
|
||
carrier_id: undefined,
|
||
batch_no: '',
|
||
remark: ''
|
||
})
|
||
// 加载默认店铺列表
|
||
loadFromShops()
|
||
if (recallFormRef.value) {
|
||
recallFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 关闭批量分配对话框
|
||
const handleAllocateDialogClose = () => {
|
||
if (allocateFormRef.value) {
|
||
allocateFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 关闭批量回收对话框
|
||
const handleRecallDialogClose = () => {
|
||
if (recallFormRef.value) {
|
||
recallFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 执行批量分配
|
||
const handleAllocate = async () => {
|
||
if (!allocateFormRef.value) return
|
||
|
||
await allocateFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
// 根据选卡方式构建请求参数
|
||
const params: Partial<AllocateStandaloneCardsRequest> = {
|
||
selection_type: allocateForm.selection_type!,
|
||
to_shop_id: allocateForm.to_shop_id!,
|
||
remark: allocateForm.remark
|
||
}
|
||
|
||
if (allocateForm.selection_type === 'list') {
|
||
params.iccids = selectedCards.value.map((card) => card.iccid)
|
||
if (params.iccids.length === 0) {
|
||
ElMessage.warning('请先选择要分配的卡')
|
||
return
|
||
}
|
||
} else if (allocateForm.selection_type === 'range') {
|
||
params.iccid_start = allocateForm.iccid_start
|
||
params.iccid_end = allocateForm.iccid_end
|
||
} else if (allocateForm.selection_type === 'filter') {
|
||
if (allocateForm.carrier_id) params.carrier_id = allocateForm.carrier_id
|
||
if (allocateForm.status) params.status = allocateForm.status
|
||
if (allocateForm.batch_no) params.batch_no = allocateForm.batch_no
|
||
}
|
||
|
||
allocateLoading.value = true
|
||
try {
|
||
const res = await CardService.allocateStandaloneCards(params)
|
||
|
||
if (res.code === 0) {
|
||
allocationResult.value = res.data
|
||
resultTitle.value = '批量分配结果'
|
||
allocateDialogVisible.value = false
|
||
resultDialogVisible.value = true
|
||
// 清空选择
|
||
if (tableRef.value) {
|
||
tableRef.value.clearSelection()
|
||
}
|
||
selectedCards.value = []
|
||
// 刷新列表
|
||
getTableData()
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
ElMessage.error('批量分配失败，请重试')
|
||
} finally {
|
||
allocateLoading.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 执行批量回收
|
||
const handleRecall = async () => {
|
||
if (!recallFormRef.value) return
|
||
|
||
await recallFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
// 根据选卡方式构建请求参数
|
||
const params: Partial<RecallStandaloneCardsRequest> = {
|
||
selection_type: recallForm.selection_type!,
|
||
from_shop_id: recallForm.from_shop_id!,
|
||
remark: recallForm.remark
|
||
}
|
||
|
||
if (recallForm.selection_type === 'list') {
|
||
params.iccids = selectedCards.value.map((card) => card.iccid)
|
||
if (params.iccids.length === 0) {
|
||
ElMessage.warning('请先选择要回收的卡')
|
||
return
|
||
}
|
||
} else if (recallForm.selection_type === 'range') {
|
||
params.iccid_start = recallForm.iccid_start
|
||
params.iccid_end = recallForm.iccid_end
|
||
} else if (recallForm.selection_type === 'filter') {
|
||
if (recallForm.carrier_id) params.carrier_id = recallForm.carrier_id
|
||
if (recallForm.batch_no) params.batch_no = recallForm.batch_no
|
||
}
|
||
|
||
recallLoading.value = true
|
||
try {
|
||
const res = await CardService.recallStandaloneCards(params)
|
||
|
||
if (res.code === 0) {
|
||
allocationResult.value = res.data
|
||
resultTitle.value = '批量回收结果'
|
||
recallDialogVisible.value = false
|
||
resultDialogVisible.value = true
|
||
// 清空选择
|
||
if (tableRef.value) {
|
||
tableRef.value.clearSelection()
|
||
}
|
||
selectedCards.value = []
|
||
// 刷新列表
|
||
getTableData()
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
ElMessage.error('批量回收失败，请重试')
|
||
} finally {
|
||
recallLoading.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 显示套餐系列绑定对话框
|
||
const showSeriesBindingDialog = async () => {
|
||
if (selectedCards.value.length === 0) {
|
||
ElMessage.warning('请先选择要设置的卡')
|
||
return
|
||
}
|
||
|
||
// 加载套餐系列列表
|
||
await loadPackageSeriesList()
|
||
|
||
seriesBindingDialogVisible.value = true
|
||
seriesBindingForm.series_id = undefined
|
||
if (seriesBindingFormRef.value) {
|
||
seriesBindingFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 加载套餐系列列表（支持名称搜索，默认20条）
|
||
const loadPackageSeriesList = async (seriesName?: string) => {
|
||
seriesLoading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: 1,
|
||
page_size: 20,
|
||
status: 1 // 只获取启用的
|
||
}
|
||
if (seriesName) {
|
||
params.series_name = seriesName
|
||
}
|
||
const res = await PackageSeriesService.getPackageSeries(params)
|
||
if (res.code === 0 && res.data.items) {
|
||
packageSeriesList.value = res.data.items
|
||
}
|
||
} catch (error) {
|
||
console.error('获取套餐系列列表失败:', error)
|
||
ElMessage.error('获取套餐系列列表失败')
|
||
} finally {
|
||
seriesLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 搜索套餐系列
|
||
const searchPackageSeries = async (query: string) => {
|
||
await loadPackageSeriesList(query || undefined)
|
||
}
|
||
|
||
// 关闭套餐系列绑定对话框
|
||
const handleSeriesBindingDialogClose = () => {
|
||
if (seriesBindingFormRef.value) {
|
||
seriesBindingFormRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
// 执行套餐系列绑定
|
||
const handleSeriesBinding = async () => {
|
||
if (!seriesBindingFormRef.value) return
|
||
|
||
await seriesBindingFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
const iccids = selectedCards.value.map((card) => card.iccid)
|
||
|
||
if (iccids.length === 0) {
|
||
ElMessage.warning('请先选择要设置的卡')
|
||
return
|
||
}
|
||
|
||
seriesBindingLoading.value = true
|
||
try {
|
||
const res = await CardService.batchSetCardSeriesBinding({
|
||
iccids,
|
||
series_allocation_id: seriesBindingForm.series_id! // 注意：API参数名仍是series_allocation_id，但前端使用series_id
|
||
})
|
||
|
||
if (res.code === 0) {
|
||
seriesBindingResult.value = res.data
|
||
seriesBindingDialogVisible.value = false
|
||
seriesBindingResultDialogVisible.value = true
|
||
|
||
// 清空选择
|
||
if (tableRef.value) {
|
||
tableRef.value.clearSelection()
|
||
}
|
||
selectedCards.value = []
|
||
|
||
// 刷新列表
|
||
getTableData()
|
||
|
||
// 显示消息提示
|
||
if (res.data.fail_count === 0) {
|
||
ElMessage.success('套餐系列绑定设置成功')
|
||
} else if (res.data.success_count === 0) {
|
||
ElMessage.error('套餐系列绑定设置失败')
|
||
} else {
|
||
ElMessage.warning(
|
||
`部分设置成功：成功 ${res.data.success_count} 项，失败 ${res.data.fail_count} 项`
|
||
)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
seriesBindingLoading.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 更多操作菜单项配置
|
||
const moreMenuItems = computed((): MenuItemType[] => [
|
||
{
|
||
key: 'distribution',
|
||
label: '网卡分销',
|
||
icon: ''
|
||
},
|
||
{
|
||
key: 'recharge',
|
||
label: '批量充值',
|
||
icon: ''
|
||
},
|
||
{
|
||
key: 'recycle',
|
||
label: '网卡回收',
|
||
icon: ''
|
||
},
|
||
{
|
||
key: 'download',
|
||
label: '批量下载',
|
||
icon: ''
|
||
},
|
||
{
|
||
key: 'changePackage',
|
||
label: '变更套餐',
|
||
icon: ''
|
||
}
|
||
])
|
||
|
||
// 显示更多操作菜单
|
||
const showMoreMenu = (e: MouseEvent) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
moreMenuRef.value?.show(e)
|
||
}
|
||
|
||
// 处理更多操作菜单选择
|
||
const handleMoreMenuSelect = (item: MenuItemType) => {
|
||
switch (item.key) {
|
||
case 'distribution':
|
||
cardDistribution()
|
||
break
|
||
case 'recharge':
|
||
batchRecharge()
|
||
break
|
||
case 'recycle':
|
||
cardRecycle()
|
||
break
|
||
case 'download':
|
||
batchDownload()
|
||
break
|
||
case 'changePackage':
|
||
changePackage()
|
||
break
|
||
}
|
||
}
|
||
|
||
// 网卡分销 - 正在开发中
|
||
const cardDistribution = () => {
|
||
ElMessage.info('功能正在开发中')
|
||
}
|
||
|
||
// 批量充值 - 正在开发中
|
||
const batchRecharge = () => {
|
||
ElMessage.info('功能正在开发中')
|
||
}
|
||
|
||
// 网卡回收 - 正在开发中
|
||
const cardRecycle = () => {
|
||
ElMessage.info('功能正在开发中')
|
||
}
|
||
|
||
// 批量下载 - 正在开发中
|
||
const batchDownload = () => {
|
||
ElMessage.info('功能正在开发中')
|
||
}
|
||
|
||
// 变更套餐 - 正在开发中
|
||
const changePackage = () => {
|
||
ElMessage.info('功能正在开发中')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.standalone-card-list-page {
|
||
// Card list page styles
|
||
}
|
||
</style>
|