modify
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 6m13s

This commit is contained in:
sexygoat
2026-04-02 13:42:57 +08:00
parent 411206e039
commit 8df7024a45
83 changed files with 1830 additions and 1865 deletions

View File

@@ -86,7 +86,11 @@
>
<el-form ref="batchFormRef" :model="batchForm" :rules="batchRules" label-width="120px">
<el-form-item label="任务类型" prop="task_type">
<el-select v-model="batchForm.task_type" placeholder="请选择任务类型" style="width: 100%">
<el-select
v-model="batchForm.task_type"
placeholder="请选择任务类型"
style="width: 100%"
>
<el-option label="实名认证轮询" value="polling:realname" />
<el-option label="卡数据轮询" value="polling:carddata" />
<el-option label="套餐轮询" value="polling:package" />
@@ -261,7 +265,11 @@
</el-select>
</el-form-item>
<el-form-item label="任务类型" prop="task_type">
<el-select v-model="singleForm.task_type" placeholder="请选择任务类型" style="width: 100%">
<el-select
v-model="singleForm.task_type"
placeholder="请选择任务类型"
style="width: 100%"
>
<el-option label="实名认证轮询" value="polling:realname" />
<el-option label="卡数据轮询" value="polling:carddata" />
<el-option label="套餐轮询" value="polling:package" />
@@ -278,277 +286,62 @@
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick, h } from 'vue'
import { ElMessage, ElMessageBox, ElTag, type FormInstance, type FormRules } from 'element-plus'
import { ManualTriggerService, CarrierService, ShopService, CardService } from '@/api/modules'
import type {
ManualTriggerLog,
ManualTriggerHistoryQueryParams,
BatchManualTriggerRequest,
ConditionManualTriggerRequest,
SingleManualTriggerRequest,
TaskType
} from '@/types/api'
import type { SearchFormItem } from '@/types'
import { formatDateTime } from '@/utils/business/format'
import { useTableContextMenu } from '@/composables/useTableContextMenu'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { ref, reactive, computed, onMounted, nextTick, h } from 'vue'
import { ElMessage, ElMessageBox, ElTag, type FormInstance, type FormRules } from 'element-plus'
import { ManualTriggerService, CarrierService, ShopService, CardService } from '@/api/modules'
import type {
ManualTriggerLog,
ManualTriggerHistoryQueryParams,
BatchManualTriggerRequest,
ConditionManualTriggerRequest,
SingleManualTriggerRequest,
TaskType
} from '@/types/api'
import type { SearchFormItem } from '@/types'
import { formatDateTime } from '@/utils/business/format'
import { useTableContextMenu } from '@/composables/useTableContextMenu'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
const loading = ref(false)
const tableData = ref<ManualTriggerLog[]>([])
const tableRef = ref()
const contextMenuRef = ref()
const currentClickRow = ref<ManualTriggerLog | null>(null)
const loading = ref(false)
const tableData = ref<ManualTriggerLog[]>([])
const tableRef = ref()
const contextMenuRef = ref()
const currentClickRow = ref<ManualTriggerLog | null>(null)
const batchDialogVisible = ref(false)
const conditionDialogVisible = ref(false)
const singleDialogVisible = ref(false)
const batchDialogVisible = ref(false)
const conditionDialogVisible = ref(false)
const singleDialogVisible = ref(false)
const batchFormRef = ref<FormInstance>()
const conditionFormRef = ref<FormInstance>()
const singleFormRef = ref<FormInstance>()
const batchFormRef = ref<FormInstance>()
const conditionFormRef = ref<FormInstance>()
const singleFormRef = ref<FormInstance>()
const carrierList = ref<any[]>([])
const shopTreeData = ref<any[]>([])
const cardList = ref<any[]>([])
const carrierList = ref<any[]>([])
const shopTreeData = ref<any[]>([])
const cardList = ref<any[]>([])
// 分页数据
const pagination = reactive({
page: 1,
page_size: 10,
total: 0
})
// 搜索表单
const searchForm = reactive({
task_type: undefined as TaskType | undefined
})
// 批量触发表单
const batchForm = reactive({
task_type: '' as TaskType | '',
card_ids_text: ''
})
// 条件触发表单
const conditionForm = reactive<ConditionManualTriggerRequest>({
task_type: '' as TaskType | '',
limit: 100,
card_status: undefined,
card_type: undefined,
carrier_code: undefined,
enable_polling: undefined,
package_ids: undefined,
shop_id: undefined
})
// 单卡触发表单
const singleForm = reactive({
card_id: undefined as number | undefined,
task_type: '' as TaskType | ''
})
const batchRules: FormRules = {
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }]
}
const conditionRules: FormRules = {
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
limit: [{ required: true, message: '请输入限制数量', trigger: 'blur' }]
}
const singleRules: FormRules = {
card_id: [{ required: true, message: '请输入卡ID', trigger: 'blur' }],
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }]
}
const {
showContextMenuHint,
hintPosition,
getRowClassName,
handleCellMouseEnter,
handleCellMouseLeave
} = useTableContextMenu()
// 搜索表单配置
const searchFormItems = computed<SearchFormItem[]>(() => [
{
label: '任务类型',
prop: 'task_type',
type: 'select',
config: {
clearable: true,
placeholder: '请选择任务类型'
},
options: () => [
{ label: '实名认证轮询', value: 'polling:realname' },
{ label: '卡数据轮询', value: 'polling:carddata' },
{ label: '套餐轮询', value: 'polling:package' }
]
}
])
const getStatusTag = (status: string) => {
const typeMap: Record<string, 'info' | 'warning' | 'success' | 'danger'> = {
pending: 'info',
processing: 'warning',
completed: 'success',
cancelled: 'danger'
}
return typeMap[status] || 'info'
}
const getProgressPercentage = (row: ManualTriggerLog) => {
if (row.total_count === 0) return 0
return Math.round((row.processed_count / row.total_count) * 100)
}
// 动态列配置
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'task_type_name',
label: '任务类型',
minWidth: 150
},
{
prop: 'trigger_type_name',
label: '触发类型',
minWidth: 120
},
{
prop: 'status',
label: '状态',
minWidth: 100,
slots: {
default: ({ row }: any) =>
h(ElTag, { type: getStatusTag(row.status) }, () => row.status_name)
}
},
{
label: '进度',
minWidth: 200,
slots: {
default: ({ row }: any) =>
h('div', { style: 'display: flex; align-items: center; gap: 8px;' }, [
h('span', { style: 'font-size: 12px;' }, `${row.processed_count}/${row.total_count}`),
h('el-progress', {
percentage: getProgressPercentage(row),
'stroke-width': 6,
'show-text': false,
style: 'flex: 1;'
})
])
}
},
{
prop: 'success_count',
label: '成功数',
minWidth: 100
},
{
prop: 'failed_count',
label: '失败数',
minWidth: 100
},
{
prop: 'triggered_at',
label: '触发时间',
minWidth: 180,
formatter: (row: any) => formatDateTime(row.triggered_at)
},
{
prop: 'completed_at',
label: '完成时间',
minWidth: 180,
formatter: (row: any) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
}
])
const columnOptions = computed(() =>
columns.value.map((col) => ({
label: col.label,
prop: col.prop || col.label,
visible: true
}))
)
const contextMenuItems = computed<MenuItemType[]>(() => {
const items: MenuItemType[] = [{ label: '刷新', key: 'refresh' }]
if (
currentClickRow.value &&
(currentClickRow.value.status === 'pending' || currentClickRow.value.status === 'processing')
) {
items.push({
label: '取消任务',
key: 'cancel',
permission: 'polling_manual_trigger_cancel'
})
}
return items
})
const loadData = async () => {
loading.value = true
try {
const queryParams: ManualTriggerHistoryQueryParams = {
page: pagination.page,
page_size: pagination.page_size,
...searchForm
}
const { data } = await ManualTriggerService.getHistory(queryParams)
tableData.value = data.items
pagination.total = data.total
} catch (error) {
ElMessage.error('加载触发历史失败')
} finally {
loading.value = false
}
}
const handleSearch = () => {
pagination.page = 1
loadData()
}
const handleReset = () => {
Object.assign(searchForm, {
task_type: undefined
// 分页数据
const pagination = reactive({
page: 1,
page_size: 10,
total: 0
})
pagination.page = 1
loadData()
}
const handleRefresh = () => {
loadData()
}
// 搜索表单
const searchForm = reactive({
task_type: undefined as TaskType | undefined
})
const handleSizeChange = (size: number) => {
pagination.page_size = size
loadData()
}
const handleCurrentChange = (page: number) => {
pagination.page = page
loadData()
}
const showBatchTriggerDialog = () => {
Object.assign(batchForm, {
task_type: '',
// 批量触发表单
const batchForm = reactive({
task_type: '' as TaskType | '',
card_ids_text: ''
})
batchDialogVisible.value = true
nextTick(() => {
batchFormRef.value?.clearValidate()
})
}
const showConditionTriggerDialog = () => {
Object.assign(conditionForm, {
task_type: '',
// 条件触发表单
const conditionForm = reactive<ConditionManualTriggerRequest>({
task_type: '' as TaskType | '',
limit: 100,
card_status: undefined,
card_type: undefined,
@@ -557,207 +350,422 @@ const showConditionTriggerDialog = () => {
package_ids: undefined,
shop_id: undefined
})
conditionDialogVisible.value = true
nextTick(() => {
conditionFormRef.value?.clearValidate()
// 单卡触发表单
const singleForm = reactive({
card_id: undefined as number | undefined,
task_type: '' as TaskType | ''
})
}
const showSingleTriggerDialog = () => {
Object.assign(singleForm, {
card_id: undefined,
task_type: ''
})
singleDialogVisible.value = true
loadCards() // 加载初始卡列表
nextTick(() => {
singleFormRef.value?.clearValidate()
})
}
const batchRules: FormRules = {
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }]
}
const handleBatchSubmit = async () => {
if (!batchFormRef.value) return
await batchFormRef.value.validate(async (valid) => {
if (!valid) return
const conditionRules: FormRules = {
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
limit: [{ required: true, message: '请输入限制数量', trigger: 'blur' }]
}
try {
// 解析卡ID列表
const cardIds = batchForm.card_ids_text
.split(/[,\n]/)
.map((id) => id.trim())
.filter((id) => id)
.map((id) => parseInt(id))
.filter((id) => !isNaN(id))
const singleRules: FormRules = {
card_id: [{ required: true, message: '请输入卡ID', trigger: 'blur' }],
task_type: [{ required: true, message: '请选择任务类型', trigger: 'change' }]
}
if (cardIds.length > 1000) {
ElMessage.warning('卡ID数量不能超过1000个')
return
}
const {
showContextMenuHint,
hintPosition,
getRowClassName,
handleCellMouseEnter,
handleCellMouseLeave
} = useTableContextMenu()
const requestData: BatchManualTriggerRequest = {
task_type: batchForm.task_type as TaskType,
card_ids: cardIds.length > 0 ? cardIds : undefined
}
await ManualTriggerService.batchTrigger(requestData)
ElMessage.success('批量触发成功')
batchDialogVisible.value = false
loadData()
} catch (error) {
ElMessage.error('批量触发失败')
// 搜索表单配置
const searchFormItems = computed<SearchFormItem[]>(() => [
{
label: '任务类型',
prop: 'task_type',
type: 'select',
config: {
clearable: true,
placeholder: '请选择任务类型'
},
options: () => [
{ label: '实名认证轮询', value: 'polling:realname' },
{ label: '卡数据轮询', value: 'polling:carddata' },
{ label: '套餐轮询', value: 'polling:package' }
]
}
})
}
])
const handleConditionSubmit = async () => {
if (!conditionFormRef.value) return
await conditionFormRef.value.validate(async (valid) => {
if (!valid) return
try {
const requestData: ConditionManualTriggerRequest = {
task_type: conditionForm.task_type as TaskType,
limit: conditionForm.limit,
card_status: conditionForm.card_status,
card_type: conditionForm.card_type,
carrier_code: conditionForm.carrier_code,
enable_polling: conditionForm.enable_polling,
package_ids: conditionForm.package_ids,
shop_id: conditionForm.shop_id
}
await ManualTriggerService.conditionTrigger(requestData)
ElMessage.success('条件触发成功')
conditionDialogVisible.value = false
loadData()
} catch (error) {
ElMessage.error('条件触发失败')
const getStatusTag = (status: string) => {
const typeMap: Record<string, 'info' | 'warning' | 'success' | 'danger'> = {
pending: 'info',
processing: 'warning',
completed: 'success',
cancelled: 'danger'
}
})
}
return typeMap[status] || 'info'
}
const handleSingleSubmit = async () => {
if (!singleFormRef.value) return
await singleFormRef.value.validate(async (valid) => {
if (!valid) return
const getProgressPercentage = (row: ManualTriggerLog) => {
if (row.total_count === 0) return 0
return Math.round((row.processed_count / row.total_count) * 100)
}
try {
await ManualTriggerService.singleTrigger({
card_id: singleForm.card_id!,
task_type: singleForm.task_type as TaskType
// 动态列配置
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'task_type_name',
label: '任务类型',
minWidth: 150
},
{
prop: 'trigger_type_name',
label: '触发类型',
minWidth: 120
},
{
prop: 'status',
label: '状态',
minWidth: 100,
slots: {
default: ({ row }: any) =>
h(ElTag, { type: getStatusTag(row.status) }, () => row.status_name)
}
},
{
label: '进度',
minWidth: 200,
slots: {
default: ({ row }: any) =>
h('div', { style: 'display: flex; align-items: center; gap: 8px;' }, [
h('span', { style: 'font-size: 12px;' }, `${row.processed_count}/${row.total_count}`),
h('el-progress', {
percentage: getProgressPercentage(row),
'stroke-width': 6,
'show-text': false,
style: 'flex: 1;'
})
])
}
},
{
prop: 'success_count',
label: '成功数',
minWidth: 100
},
{
prop: 'failed_count',
label: '失败数',
minWidth: 100
},
{
prop: 'triggered_at',
label: '触发时间',
minWidth: 180,
formatter: (row: any) => formatDateTime(row.triggered_at)
},
{
prop: 'completed_at',
label: '完成时间',
minWidth: 180,
formatter: (row: any) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
}
])
const columnOptions = computed(() =>
columns.value.map((col) => ({
label: col.label,
prop: col.prop || col.label,
visible: true
}))
)
const contextMenuItems = computed<MenuItemType[]>(() => {
const items: MenuItemType[] = [{ label: '刷新', key: 'refresh' }]
if (
currentClickRow.value &&
(currentClickRow.value.status === 'pending' || currentClickRow.value.status === 'processing')
) {
items.push({
label: '取消任务',
key: 'cancel',
permission: 'polling_manual_trigger_cancel'
})
ElMessage.success('单卡触发成功')
singleDialogVisible.value = false
}
return items
})
const loadData = async () => {
loading.value = true
try {
const queryParams: ManualTriggerHistoryQueryParams = {
page: pagination.page,
page_size: pagination.page_size,
...searchForm
}
const { data } = await ManualTriggerService.getHistory(queryParams)
tableData.value = data.items
pagination.total = data.total
} catch (error) {
ElMessage.error('加载触发历史失败')
} finally {
loading.value = false
}
}
const handleSearch = () => {
pagination.page = 1
loadData()
}
const handleReset = () => {
Object.assign(searchForm, {
task_type: undefined
})
pagination.page = 1
loadData()
}
const handleRefresh = () => {
loadData()
}
const handleSizeChange = (size: number) => {
pagination.page_size = size
loadData()
}
const handleCurrentChange = (page: number) => {
pagination.page = page
loadData()
}
const showBatchTriggerDialog = () => {
Object.assign(batchForm, {
task_type: '',
card_ids_text: ''
})
batchDialogVisible.value = true
nextTick(() => {
batchFormRef.value?.clearValidate()
})
}
const showConditionTriggerDialog = () => {
Object.assign(conditionForm, {
task_type: '',
limit: 100,
card_status: undefined,
card_type: undefined,
carrier_code: undefined,
enable_polling: undefined,
package_ids: undefined,
shop_id: undefined
})
conditionDialogVisible.value = true
nextTick(() => {
conditionFormRef.value?.clearValidate()
})
}
const showSingleTriggerDialog = () => {
Object.assign(singleForm, {
card_id: undefined,
task_type: ''
})
singleDialogVisible.value = true
loadCards() // 加载初始卡列表
nextTick(() => {
singleFormRef.value?.clearValidate()
})
}
const handleBatchSubmit = async () => {
if (!batchFormRef.value) return
await batchFormRef.value.validate(async (valid) => {
if (!valid) return
try {
// 解析卡ID列表
const cardIds = batchForm.card_ids_text
.split(/[,\n]/)
.map((id) => id.trim())
.filter((id) => id)
.map((id) => parseInt(id))
.filter((id) => !isNaN(id))
if (cardIds.length > 1000) {
ElMessage.warning('卡ID数量不能超过1000个')
return
}
const requestData: BatchManualTriggerRequest = {
task_type: batchForm.task_type as TaskType,
card_ids: cardIds.length > 0 ? cardIds : undefined
}
await ManualTriggerService.batchTrigger(requestData)
ElMessage.success('批量触发成功')
batchDialogVisible.value = false
loadData()
} catch (error) {
ElMessage.error('批量触发失败')
}
})
}
const handleConditionSubmit = async () => {
if (!conditionFormRef.value) return
await conditionFormRef.value.validate(async (valid) => {
if (!valid) return
try {
const requestData: ConditionManualTriggerRequest = {
task_type: conditionForm.task_type as TaskType,
limit: conditionForm.limit,
card_status: conditionForm.card_status,
card_type: conditionForm.card_type,
carrier_code: conditionForm.carrier_code,
enable_polling: conditionForm.enable_polling,
package_ids: conditionForm.package_ids,
shop_id: conditionForm.shop_id
}
await ManualTriggerService.conditionTrigger(requestData)
ElMessage.success('条件触发成功')
conditionDialogVisible.value = false
loadData()
} catch (error) {
ElMessage.error('条件触发失败')
}
})
}
const handleSingleSubmit = async () => {
if (!singleFormRef.value) return
await singleFormRef.value.validate(async (valid) => {
if (!valid) return
try {
await ManualTriggerService.singleTrigger({
card_id: singleForm.card_id!,
task_type: singleForm.task_type as TaskType
})
ElMessage.success('单卡触发成功')
singleDialogVisible.value = false
loadData()
} catch (error) {
ElMessage.error('单卡触发失败')
}
})
}
const handleCancelTask = async (row: ManualTriggerLog) => {
try {
await ElMessageBox.confirm('确定要取消该任务吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await ManualTriggerService.cancelTrigger({ trigger_id: row.id })
ElMessage.success('任务已取消')
loadData()
} catch (error) {
ElMessage.error('单卡触发失败')
if (error !== 'cancel') {
ElMessage.error('取消任务失败')
}
}
})
}
}
const handleCancelTask = async (row: ManualTriggerLog) => {
try {
await ElMessageBox.confirm('确定要取消该任务吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
const handleRowContextMenu = (row: ManualTriggerLog, column: any, event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
currentClickRow.value = row
contextMenuRef.value?.show(event)
}
await ManualTriggerService.cancelTrigger({ trigger_id: row.id })
ElMessage.success('任务已取消')
const handleContextMenuSelect = (item: MenuItemType) => {
if (!currentClickRow.value) return
switch (item.key) {
case 'refresh':
loadData()
break
case 'cancel':
handleCancelTask(currentClickRow.value)
break
}
}
// 加载运营商列表
const loadCarriers = async (carrierName?: string) => {
try {
const { data } = await CarrierService.getCarriers({
page: 1,
page_size: 20,
carrier_name: carrierName
})
carrierList.value = data.items || data.list || []
} catch (error) {
console.error('加载运营商列表失败', error)
}
}
const remoteSearchCarrier = (query: string) => {
if (query) {
loadCarriers(query)
} else {
loadCarriers()
}
}
// 加载店铺树形数据
const loadShops = async () => {
try {
const { data } = await ShopService.getShops()
shopTreeData.value = data.items || data.list || []
} catch (error) {
console.error('加载店铺列表失败', error)
}
}
// 加载卡列表
const loadCards = async (iccid?: string) => {
try {
const { data } = await CardService.getStandaloneIotCards({
page: 1,
page_size: 20,
iccid: iccid
})
cardList.value = data.items || data.list || []
} catch (error) {
console.error('加载卡列表失败', error)
}
}
const remoteSearchCard = (query: string) => {
if (query) {
loadCards(query)
} else {
loadCards()
}
}
onMounted(() => {
loadData()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('取消任务失败')
}
}
}
const handleRowContextMenu = (row: ManualTriggerLog, column: any, event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
currentClickRow.value = row
contextMenuRef.value?.show(event)
}
const handleContextMenuSelect = (item: MenuItemType) => {
if (!currentClickRow.value) return
switch (item.key) {
case 'refresh':
loadData()
break
case 'cancel':
handleCancelTask(currentClickRow.value)
break
}
}
// 加载运营商列表
const loadCarriers = async (carrierName?: string) => {
try {
const { data } = await CarrierService.getCarriers({
page: 1,
page_size: 20,
carrier_name: carrierName
})
carrierList.value = data.items || data.list || []
} catch (error) {
console.error('加载运营商列表失败', error)
}
}
const remoteSearchCarrier = (query: string) => {
if (query) {
loadCarriers(query)
} else {
loadCarriers()
}
}
// 加载店铺树形数据
const loadShops = async () => {
try {
const { data } = await ShopService.getShops()
shopTreeData.value = data.items || data.list || []
} catch (error) {
console.error('加载店铺列表失败', error)
}
}
// 加载卡列表
const loadCards = async (iccid?: string) => {
try {
const { data } = await CardService.getStandaloneIotCards({
page: 1,
page_size: 20,
iccid: iccid
})
cardList.value = data.items || data.list || []
} catch (error) {
console.error('加载卡列表失败', error)
}
}
const remoteSearchCard = (query: string) => {
if (query) {
loadCards(query)
} else {
loadCards()
}
}
onMounted(() => {
loadData()
loadCarriers()
loadShops()
})
loadShops()
})
</script>
<style scoped lang="scss">
.manual-trigger-page {
height: 100%;
display: flex;
flex-direction: column;
}
.manual-trigger-page {
display: flex;
flex-direction: column;
height: 100%;
}
</style>