完善按钮和详情权限
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m29s

This commit is contained in:
sexygoat
2026-02-28 11:04:32 +08:00
parent 4470a4ef04
commit ce1032c7f9
23 changed files with 984 additions and 760 deletions

View File

@@ -90,7 +90,7 @@
- [x] **IoT卡任务页面** (`/asset-management/iot-card-task`) - [x] **IoT卡任务页面** (`/asset-management/iot-card-task`)
- ✅ 引入 `useAuth` composable - ✅ 引入 `useAuth` composable
- ✅ 为"批量导入IoT卡"按钮添加 `v-permission="'lot_task:bulk_import'"` - ✅ 为"批量导入IoT卡"按钮添加 `v-permission="''"`
- ✅ 验证权限控制正确工作 - ✅ 验证权限控制正确工作
- [x] **设备任务页面** (`/asset-management/device-task`) - [x] **设备任务页面** (`/asset-management/device-task`)

View File

@@ -421,7 +421,8 @@
"withdrawalSettings": "Withdrawal Settings", "withdrawalSettings": "Withdrawal Settings",
"myAccount": "My Account", "myAccount": "My Account",
"carrierManagement": "Carrier Management", "carrierManagement": "Carrier Management",
"orders": "Order Management" "orders": "Order Management",
"orderDetail": "Order Details"
}, },
"deviceManagement": { "deviceManagement": {
"title": "Device Management", "title": "Device Management",

View File

@@ -448,13 +448,16 @@
"standaloneCardList": "IoT卡管理", "standaloneCardList": "IoT卡管理",
"iotCardTask": "IoT卡任务", "iotCardTask": "IoT卡任务",
"deviceTask": "设备任务", "deviceTask": "设备任务",
"taskDetail": "任务详情",
"devices": "设备管理", "devices": "设备管理",
"deviceDetail": "设备详情", "deviceDetail": "设备详情",
"assetAssign": "分配记录", "assetAssign": "分配记录",
"assetAssignDetail": "资产分配详情",
"allocationRecordDetail": "分配记录详情", "allocationRecordDetail": "分配记录详情",
"cardReplacementRequest": "换卡申请", "cardReplacementRequest": "换卡申请",
"authorizationRecords": "授权记录", "authorizationRecords": "授权记录",
"authorizationDetail": "授权记录详情", "authorizationDetail": "授权记录详情",
"authorizationRecordDetail": "授权记录详情",
"enterpriseDevices": "企业设备列表" "enterpriseDevices": "企业设备列表"
}, },
"account": { "account": {
@@ -462,7 +465,8 @@
"customerAccount": "客户账号", "customerAccount": "客户账号",
"myAccount": "我的账户", "myAccount": "我的账户",
"carrierManagement": "运营商管理", "carrierManagement": "运营商管理",
"orders": "订单管理" "orders": "订单管理",
"orderDetail": "订单详情"
}, },
"commission": { "commission": {
"menu": { "menu": {
@@ -470,7 +474,7 @@
"withdrawal": "提现审批", "withdrawal": "提现审批",
"withdrawalSettings": "提现配置", "withdrawalSettings": "提现配置",
"myCommission": "我的佣金", "myCommission": "我的佣金",
"agentCommission": "代理商佣金管理" "agentCommission": "代理商佣金"
} }
}, },
"settings": { "settings": {
@@ -605,7 +609,7 @@
"withdrawal": "提现审批", "withdrawal": "提现审批",
"withdrawalSettings": "提现配置", "withdrawalSettings": "提现配置",
"myCommission": "我的佣金", "myCommission": "我的佣金",
"agentCommission": "代理商佣金管理" "agentCommission": "代理商佣金"
}, },
"table": { "table": {
"withdrawalNo": "提现单号", "withdrawalNo": "提现单号",

View File

@@ -1014,6 +1014,16 @@ export const asyncRoutes: AppRouteRecord[] = [
keepAlive: true keepAlive: true
} }
}, },
{
path: 'task-detail',
name: 'TaskDetail',
component: RoutesAlias.TaskDetail,
meta: {
title: 'menus.assetManagement.taskDetail',
isHide: true,
keepAlive: false
}
},
{ {
path: 'devices', path: 'devices',
name: 'DeviceList', name: 'DeviceList',
@@ -1042,6 +1052,16 @@ export const asyncRoutes: AppRouteRecord[] = [
keepAlive: true keepAlive: true
} }
}, },
{
path: 'asset-assign/detail/:id',
name: 'AssetAssignDetail',
component: RoutesAlias.AssetAssignDetail,
meta: {
title: 'menus.assetManagement.assetAssignDetail',
isHide: true,
keepAlive: false
}
},
// { // {
// path: 'card-replacement-request', // path: 'card-replacement-request',
// name: 'CardReplacementRequest', // name: 'CardReplacementRequest',
@@ -1060,6 +1080,16 @@ export const asyncRoutes: AppRouteRecord[] = [
keepAlive: true keepAlive: true
} }
}, },
{
path: 'authorization-records/detail/:id',
name: 'AuthorizationRecordDetail',
component: RoutesAlias.AuthorizationRecordDetail,
meta: {
title: 'menus.assetManagement.authorizationRecordDetail',
isHide: true,
keepAlive: false
}
},
{ {
path: 'enterprise-devices', path: 'enterprise-devices',
name: 'EnterpriseDevices', name: 'EnterpriseDevices',
@@ -1093,11 +1123,21 @@ export const asyncRoutes: AppRouteRecord[] = [
{ {
path: 'orders', path: 'orders',
name: 'OrderManagement', name: 'OrderManagement',
component: RoutesAlias.OrderList, component: '/order-management/order-list',
meta: { meta: {
title: 'menus.account.orders', title: 'menus.account.orders',
keepAlive: true keepAlive: true
} }
},
{
path: 'orders/detail/:id',
name: 'OrderDetail',
component: '/order-management/order-list/detail',
meta: {
title: 'menus.account.orderDetail',
isHide: true,
keepAlive: false
}
} }
// { // {
// path: 'my-account', // path: 'my-account',

View File

@@ -99,18 +99,22 @@ export enum RoutesAlias {
StandaloneCardList = '/asset-management/iot-card-management', // IoT卡管理 StandaloneCardList = '/asset-management/iot-card-management', // IoT卡管理
IotCardTask = '/asset-management/iot-card-task', // IoT卡任务 IotCardTask = '/asset-management/iot-card-task', // IoT卡任务
DeviceTask = '/asset-management/device-task', // 设备任务 DeviceTask = '/asset-management/device-task', // 设备任务
TaskDetail = '/asset-management/task-detail', // 任务详情IoT卡/设备任务详情)
DeviceList = '/asset-management/device-list', // 设备列表 DeviceList = '/asset-management/device-list', // 设备列表
DeviceDetail = '/asset-management/device-detail', // 设备详情 DeviceDetail = '/asset-management/device-detail', // 设备详情
AssetAssign = '/asset-management/asset-assign', // 资产分配(分配记录) AssetAssign = '/asset-management/asset-assign', // 资产分配(分配记录)
AssetAssignDetail = '/asset-management/asset-assign/detail', // 资产分配详情
CardReplacementRequest = '/asset-management/card-replacement-request', // 换卡申请 CardReplacementRequest = '/asset-management/card-replacement-request', // 换卡申请
AuthorizationRecords = '/asset-management/authorization-records', // 授权记录 AuthorizationRecords = '/asset-management/authorization-records', // 授权记录
AuthorizationRecordDetail = '/asset-management/authorization-records/detail', // 授权记录详情
EnterpriseDevices = '/asset-management/enterprise-devices', // 企业设备列表 EnterpriseDevices = '/asset-management/enterprise-devices', // 企业设备列表
// 账户管理 // 账户管理
CustomerAccountList = '/finance/customer-account', // 客户账号 CustomerAccountList = '/finance/customer-account', // 客户账号
MyAccount = '/finance/my-account', // 我的账户 MyAccount = '/finance/my-account', // 我的账户
CarrierManagement = '/finance/carrier-management', // 运营商管理 CarrierManagement = '/finance/carrier-management', // 运营商管理
OrderList = '/order-management/order-list', // 订单管理 OrderList = '/account/orders', // 订单管理
OrderDetail = '/account/orders/detail', // 订单详情
// 佣金管理 // 佣金管理
WithdrawalApproval = '/finance/commission/withdrawal-approval', // 提现审批 WithdrawalApproval = '/finance/commission/withdrawal-approval', // 提现审批

View File

@@ -475,6 +475,7 @@
activeText: getStatusText(CommonStatus.ENABLED), activeText: getStatusText(CommonStatus.ENABLED),
inactiveText: getStatusText(CommonStatus.DISABLED), inactiveText: getStatusText(CommonStatus.DISABLED),
inlinePrompt: true, inlinePrompt: true,
disabled: !hasAuth('account:modify_status'),
'onUpdate:modelValue': (val: string | number | boolean) => 'onUpdate:modelValue': (val: string | number | boolean) =>
handleStatusChange(row, val as number) handleStatusChange(row, val as number)
}) })

View File

@@ -450,6 +450,7 @@
activeText: '启用', activeText: '启用',
inactiveText: '禁用', inactiveText: '禁用',
inlinePrompt: true, inlinePrompt: true,
disabled: !hasAuth('enterprise_customer:status'),
'onUpdate:modelValue': (val: string | number | boolean) => 'onUpdate:modelValue': (val: string | number | boolean) =>
handleStatusChange(row, val as number) handleStatusChange(row, val as number)
}) })

View File

@@ -0,0 +1,135 @@
<template>
<div class="asset-assign-detail">
<ElCard shadow="never">
<!-- 页面头部 -->
<div class="detail-header">
<ElButton @click="handleBack">
<template #icon>
<ElIcon><ArrowLeft /></ElIcon>
</template>
返回
</ElButton>
<h2 class="detail-title">资产分配详情</h2>
</div>
<!-- 详情内容 -->
<DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
<!-- 加载中 -->
<div v-if="loading" class="loading-container">
<ElIcon class="is-loading"><Loading /></ElIcon>
<span>加载中...</span>
</div>
</ElCard>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
import { ArrowLeft, Loading } from '@element-plus/icons-vue'
import DetailPage from '@/components/common/DetailPage.vue'
import type { DetailSection } from '@/components/common/DetailPage.vue'
import { CardService } from '@/api/modules'
import type { AssetAllocationRecord } from '@/types/api/card'
import { formatDateTime } from '@/utils/business/format'
defineOptions({ name: 'AssetAssignDetail' })
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const detailData = ref<AssetAllocationRecord | null>(null)
// 详情页配置
const detailSections: DetailSection[] = [
{
title: '基本信息',
fields: [
{ label: '分配单号', prop: 'allocation_no' },
{
label: '分配类型',
formatter: (_, data) => data.allocation_name || '-'
},
{
label: '资产类型',
formatter: (_, data) => data.asset_type_name || '-'
},
{ label: '资产标识符', prop: 'asset_identifier' },
{ label: '来源所有者', prop: 'from_owner_name' },
{ label: '目标所有者', prop: 'to_owner_name' },
{ label: '操作人', prop: 'operator_name' },
{ label: '关联卡数量', prop: 'related_card_count' },
{ label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
{ label: '备注', prop: 'remark', formatter: (value) => value || '-' }
]
}
]
// 返回上一页
const handleBack = () => {
router.back()
}
// 获取详情数据
const fetchDetail = async () => {
const id = Number(route.params.id)
if (!id) {
ElMessage.error('缺少ID参数')
return
}
loading.value = true
try {
const res = await CardService.getAssetAllocationRecordDetail(id)
if (res.code === 0) {
detailData.value = res.data
}
} catch (error) {
console.error(error)
ElMessage.error('获取资产分配详情失败')
} finally {
loading.value = false
}
}
onMounted(() => {
fetchDetail()
})
</script>
<style scoped lang="scss">
.asset-assign-detail {
padding: 20px;
}
.detail-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
.detail-title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 12px;
color: var(--el-text-color-secondary);
.el-icon {
font-size: 32px;
}
}
</style>

View File

@@ -30,45 +30,20 @@
:marginTop="10" :marginTop="10"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@row-contextmenu="handleRowContextMenu"
> >
<template #default> <template #default>
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" /> <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
<ElTableColumn label="操作" width="120" fixed="right">
<template #default="scope">
<ElButton type="primary" link @click="viewDetail(scope.row)">查看详情</ElButton>
</template>
</ElTableColumn>
</template> </template>
</ArtTable> </ArtTable>
<!-- 分配详情对话框 --> <!-- 右键菜单 -->
<ElDialog v-model="detailDialogVisible" title="分配详情" width="700px"> <ArtMenuRight
<ElDescriptions v-if="currentRecord" :column="2" border> ref="contextMenuRef"
<ElDescriptionsItem label="分配单号" :span="2">{{ currentRecord.allocation_no }}</ElDescriptionsItem> :menu-items="contextMenuItems"
<ElDescriptionsItem label="分配类型"> :menu-width="120"
<ElTag :type="getAllocationTypeType(currentRecord.allocation_type)"> @select="handleContextMenuSelect"
{{ currentRecord.allocation_name }} />
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="资产类型">
<ElTag :type="getAssetTypeType(currentRecord.asset_type)">
{{ currentRecord.asset_type_name }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="资产标识符" :span="2">{{ currentRecord.asset_identifier }}</ElDescriptionsItem>
<ElDescriptionsItem label="来源所有者">{{ currentRecord.from_owner_name }}</ElDescriptionsItem>
<ElDescriptionsItem label="目标所有者">{{ currentRecord.to_owner_name }}</ElDescriptionsItem>
<ElDescriptionsItem label="操作人">{{ currentRecord.operator_name }}</ElDescriptionsItem>
<ElDescriptionsItem label="关联卡数量">{{ currentRecord.related_card_count }}</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间" :span="2">{{ formatDateTime(currentRecord.created_at) }}</ElDescriptionsItem>
<ElDescriptionsItem label="备注" :span="2">{{ currentRecord.remark || '--' }}</ElDescriptionsItem>
</ElDescriptions>
<template #footer>
<div class="dialog-footer">
<ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
</div>
</template>
</ElDialog>
</ElCard> </ElCard>
</div> </div>
</ArtTableFullScreen> </ArtTableFullScreen>
@@ -81,16 +56,21 @@
import { ElMessage, ElTag } from 'element-plus' import { ElMessage, ElTag } from 'element-plus'
import type { SearchFormItem } from '@/types' import type { SearchFormItem } from '@/types'
import { useCheckedColumns } from '@/composables/useCheckedColumns' import { useCheckedColumns } from '@/composables/useCheckedColumns'
import { useAuth } from '@/composables/useAuth'
import { formatDateTime } from '@/utils/business/format' import { formatDateTime } from '@/utils/business/format'
import type { AssetAllocationRecord, AllocationTypeEnum, AssetTypeEnum } from '@/types/api/card' import type { AssetAllocationRecord, AllocationTypeEnum, AssetTypeEnum } from '@/types/api/card'
import { RoutesAlias } from '@/router/routesAlias'
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
defineOptions({ name: 'AssetAllocationRecords' }) defineOptions({ name: 'AssetAllocationRecords' })
const { hasAuth } = useAuth()
const router = useRouter() const router = useRouter()
const loading = ref(false) const loading = ref(false)
const detailDialogVisible = ref(false)
const tableRef = ref() const tableRef = ref()
const currentRecord = ref<AssetAllocationRecord | null>(null) const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
const currentRow = ref<AssetAllocationRecord | null>(null)
// 搜索表单初始值 // 搜索表单初始值
const initialSearchState = { const initialSearchState = {
@@ -205,7 +185,7 @@
{ {
prop: 'allocation_no', prop: 'allocation_no',
label: '分配单号', label: '分配单号',
minWidth: 180 minWidth: 200
}, },
{ {
prop: 'allocation_name', prop: 'allocation_name',
@@ -338,8 +318,39 @@
// 查看详情 // 查看详情
const viewDetail = (row: AssetAllocationRecord) => { const viewDetail = (row: AssetAllocationRecord) => {
currentRecord.value = row router.push({
detailDialogVisible.value = true path: `${RoutesAlias.AssetAssign}/detail/${row.id}`
})
}
// 右键菜单项配置
const contextMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = []
if (hasAuth('asset_assign:view_detail')) {
items.push({ key: 'detail', label: '详情' })
}
return items
})
// 处理表格行右键菜单
const handleRowContextMenu = (row: AssetAllocationRecord, column: any, event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
currentRow.value = row
contextMenuRef.value?.show(event)
}
// 处理右键菜单选择
const handleContextMenuSelect = (item: MenuItemType) => {
if (!currentRow.value) return
switch (item.key) {
case 'detail':
viewDetail(currentRow.value)
break
}
} }
</script> </script>

View File

@@ -0,0 +1,140 @@
<template>
<div class="authorization-record-detail">
<ElCard shadow="never">
<!-- 页面头部 -->
<div class="detail-header">
<ElButton @click="handleBack">
<template #icon>
<ElIcon><ArrowLeft /></ElIcon>
</template>
返回
</ElButton>
<h2 class="detail-title">授权记录详情</h2>
</div>
<!-- 详情内容 -->
<DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
<!-- 加载中 -->
<div v-if="loading" class="loading-container">
<ElIcon class="is-loading"><Loading /></ElIcon>
<span>加载中...</span>
</div>
</ElCard>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
import { ArrowLeft, Loading } from '@element-plus/icons-vue'
import DetailPage from '@/components/common/DetailPage.vue'
import type { DetailSection } from '@/components/common/DetailPage.vue'
import { AuthorizationService } from '@/api/modules'
import type { AuthorizationItem } from '@/types/api/authorization'
import { formatDateTime } from '@/utils/business/format'
defineOptions({ name: 'AuthorizationRecordDetail' })
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const detailData = ref<AuthorizationItem | null>(null)
// 详情页配置
const detailSections: DetailSection[] = [
{
title: '基本信息',
fields: [
{ label: '企业ID', prop: 'enterprise_id' },
{ label: '企业名称', prop: 'enterprise_name' },
{ label: '卡ID', prop: 'card_id' },
{ label: 'ICCID', prop: 'iccid' },
{ label: '手机号', prop: 'msisdn', formatter: (value) => value || '-' },
{ label: '授权人ID', prop: 'authorized_by' },
{ label: '授权人', prop: 'authorizer_name' },
{
label: '授权人类型',
formatter: (_, data) => {
return data.authorizer_type === 2 ? '平台' : '代理'
}
},
{ label: '授权时间', prop: 'authorized_at', formatter: (value) => formatDateTime(value) },
{
label: '状态',
formatter: (_, data) => {
return data.status === 1 ? '有效' : '已回收'
}
},
{ label: '备注', prop: 'remark', formatter: (value) => value || '-' }
]
}
]
// 返回上一页
const handleBack = () => {
router.back()
}
// 获取详情数据
const fetchDetail = async () => {
const id = Number(route.params.id)
if (!id) {
ElMessage.error('缺少ID参数')
return
}
loading.value = true
try {
const res = await AuthorizationService.getAuthorizationDetail(id)
if (res.code === 0) {
detailData.value = res.data
}
} catch (error) {
console.error(error)
ElMessage.error('获取授权记录详情失败')
} finally {
loading.value = false
}
}
onMounted(() => {
fetchDetail()
})
</script>
<style scoped lang="scss">
.authorization-record-detail {
padding: 20px;
}
.detail-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
.detail-title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 12px;
color: var(--el-text-color-secondary);
.el-icon {
font-size: 32px;
}
}
</style>

View File

@@ -45,50 +45,6 @@
@select="handleContextMenuSelect" @select="handleContextMenuSelect"
/> />
<!-- 授权详情对话框 -->
<ElDialog v-model="detailDialogVisible" title="授权详情" width="700px">
<ElDescriptions v-if="currentRecord" :column="2" border>
<ElDescriptionsItem label="企业ID">{{
currentRecord.enterprise_id
}}</ElDescriptionsItem>
<ElDescriptionsItem label="企业名称">{{
currentRecord.enterprise_name
}}</ElDescriptionsItem>
<ElDescriptionsItem label="卡ID">{{ currentRecord.card_id }}</ElDescriptionsItem>
<ElDescriptionsItem label="ICCID">{{ currentRecord.iccid }}</ElDescriptionsItem>
<ElDescriptionsItem label="手机号">{{
currentRecord.msisdn || '--'
}}</ElDescriptionsItem>
<ElDescriptionsItem label="授权人ID">{{
currentRecord.authorized_by
}}</ElDescriptionsItem>
<ElDescriptionsItem label="授权人">{{
currentRecord.authorizer_name
}}</ElDescriptionsItem>
<ElDescriptionsItem label="授权人类型">
<ElTag :type="getAuthorizerTypeTag(currentRecord.authorizer_type)">
{{ getAuthorizerTypeText(currentRecord.authorizer_type) }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="授权时间" :span="2">{{
formatDateTime(currentRecord.authorized_at)
}}</ElDescriptionsItem>
<ElDescriptionsItem label="状态" :span="2">
<ElTag :type="getStatusTag(currentRecord.status)">
{{ getStatusText(currentRecord.status) }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="备注" :span="2">{{
currentRecord.remark || '--'
}}</ElDescriptionsItem>
</ElDescriptions>
<template #footer>
<div class="dialog-footer">
<ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
</div>
</template>
</ElDialog>
<!-- 修改备注对话框 --> <!-- 修改备注对话框 -->
<ElDialog v-model="remarkDialogVisible" title="修改备注" width="500px"> <ElDialog v-model="remarkDialogVisible" title="修改备注" width="500px">
<ElForm ref="remarkFormRef" :model="remarkForm" :rules="remarkRules" label-width="80px"> <ElForm ref="remarkFormRef" :model="remarkForm" :rules="remarkRules" label-width="80px">
@@ -136,19 +92,18 @@
AuthorizerType AuthorizerType
} from '@/types/api/authorization' } from '@/types/api/authorization'
import { CommonStatus } from '@/config/constants' import { CommonStatus } from '@/config/constants'
import { RoutesAlias } from '@/router/routesAlias'
defineOptions({ name: 'AuthorizationRecords' }) defineOptions({ name: 'AuthorizationRecords' })
const { hasAuth } = useAuth() const { hasAuth } = useAuth()
const router = useRouter() const router = useRouter()
const loading = ref(false) const loading = ref(false)
const detailDialogVisible = ref(false)
const remarkDialogVisible = ref(false) const remarkDialogVisible = ref(false)
const remarkLoading = ref(false) const remarkLoading = ref(false)
const tableRef = ref() const tableRef = ref()
const remarkFormRef = ref<FormInstance>() const remarkFormRef = ref<FormInstance>()
const currentRecordId = ref<number>(0) const currentRecordId = ref<number>(0)
const currentRecord = ref<AuthorizationItem | null>(null)
const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>() const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
const currentRow = ref<AuthorizationItem | null>(null) const currentRow = ref<AuthorizationItem | null>(null)
@@ -394,8 +349,9 @@
// 查看详情 // 查看详情
const viewDetail = (row: AuthorizationItem) => { const viewDetail = (row: AuthorizationItem) => {
currentRecord.value = row router.push({
detailDialogVisible.value = true path: `${RoutesAlias.AuthorizationRecords}/detail/${row.id}`
})
} }
// 显示修改备注对话框 // 显示修改备注对话框
@@ -433,7 +389,9 @@
const contextMenuItems = computed((): MenuItemType[] => { const contextMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ key: 'detail', label: '详情' }) if (hasAuth('authorization_records:view_detail')) {
items.push({ key: 'detail', label: '详情' })
}
if (hasAuth('authorization_records:update_remark')) { if (hasAuth('authorization_records:update_remark')) {
items.push({ key: 'edit', label: '编辑' }) items.push({ key: 'edit', label: '编辑' })

View File

@@ -21,14 +21,14 @@
type="primary" type="primary"
@click="handleBatchAllocate" @click="handleBatchAllocate"
:disabled="!selectedDevices.length" :disabled="!selectedDevices.length"
v-permission="'devices:batch_allocation'" v-permission="'device:batch_allocate'"
> >
批量分配 批量分配
</ElButton> </ElButton>
<ElButton <ElButton
@click="handleBatchRecall" @click="handleBatchRecall"
:disabled="!selectedDevices.length" :disabled="!selectedDevices.length"
v-permission="'devices:batch_recycle'" v-permission="'device:batch_recall'"
> >
批量回收 批量回收
</ElButton> </ElButton>
@@ -36,7 +36,7 @@
type="info" type="info"
@click="handleBatchSetSeries" @click="handleBatchSetSeries"
:disabled="!selectedDevices.length" :disabled="!selectedDevices.length"
v-permission="'devices:batch_setting'" v-permission="'device:batch_set_series'"
> >
批量设置套餐系列 批量设置套餐系列
</ElButton> </ElButton>
@@ -1625,37 +1625,49 @@
const items: MenuItemType[] = [] const items: MenuItemType[] = []
// 添加查看卡片到菜单最前面 // 添加查看卡片到菜单最前面
if (hasAuth('devices:look_binding')) { if (hasAuth('device:view_cards')) {
items.push({ items.push({
key: 'view-cards', key: 'view-cards',
label: '查看卡片' label: '查看卡片'
}) })
} }
items.push( if (hasAuth('device:reboot')) {
{ items.push({
key: 'reboot', key: 'reboot',
label: '重启设备' label: '重启设备'
}, })
{ }
if (hasAuth('device:factory_reset')) {
items.push({
key: 'reset', key: 'reset',
label: '恢复出厂' label: '恢复出厂'
}, })
{ }
if (hasAuth('device:set_speed_limit')) {
items.push({
key: 'speed-limit', key: 'speed-limit',
label: '设置限速' label: '设置限速'
}, })
{ }
if (hasAuth('device:switch_sim')) {
items.push({
key: 'switch-card', key: 'switch-card',
label: '切换SIM卡' label: '切换SIM卡'
}, })
{ }
if (hasAuth('device:set_wifi')) {
items.push({
key: 'set-wifi', key: 'set-wifi',
label: '设置WiFi' label: '设置WiFi'
} })
) }
if (hasAuth('devices:delete')) { if (hasAuth('device:delete')) {
items.push({ items.push({
key: 'delete', key: 'delete',
label: '删除设备' label: '删除设备'

View File

@@ -107,122 +107,12 @@
</template> </template>
</ElDialog> </ElDialog>
<!-- 任务详情对话框 -->
<ElDialog v-model="detailDialogVisible" title="设备导入任务详情" width="900px" align-center>
<ElDescriptions :column="2" border>
<ElDescriptionsItem label="任务编号" :span="2">{{
currentDetail.task_no
}}</ElDescriptionsItem>
<ElDescriptionsItem label="状态">
<ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="批次号">{{ currentDetail.batch_no }}</ElDescriptionsItem>
<ElDescriptionsItem label="文件名" :span="2">{{
currentDetail.file_name
}}</ElDescriptionsItem>
<ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
<ElDescriptionsItem label="成功数">
<span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
<ElDescriptionsItem label="失败数">
<span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="警告数">
<span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="错误信息" :span="2">{{
currentDetail.error_message
}}</ElDescriptionsItem>
</ElDescriptions>
<ElDivider content-position="left">跳过明细</ElDivider>
<div
v-if="currentDetail.skipped_items && currentDetail.skipped_items.length"
style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
>
<ElTable :data="currentDetail.skipped_items" border size="small">
<ElTableColumn label="行号" prop="line" width="80" />
<ElTableColumn label="设备编号" prop="device_no" width="180" />
<ElTableColumn label="跳过原因" prop="reason" min-width="300">
<template #default="{ row }">
{{ row.reason || '未知原因' }}
</template>
</ElTableColumn>
</ElTable>
</div>
<ElEmpty v-else description="无跳过记录" />
<ElDivider content-position="left">警告明细</ElDivider>
<div
v-if="currentDetail.warning_items && currentDetail.warning_items.length"
style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
>
<ElTable :data="currentDetail.warning_items" border size="small">
<ElTableColumn label="行号" prop="line" width="80" />
<ElTableColumn label="设备编号" prop="device_no" width="180" />
<ElTableColumn label="警告信息" prop="reason" min-width="300">
<template #default="{ row }">
{{ row.reason || row.message || '未知警告' }}
</template>
</ElTableColumn>
</ElTable>
</div>
<ElEmpty v-else description="无警告记录" />
<ElDivider content-position="left">失败明细</ElDivider>
<div
v-if="currentDetail.failed_items && currentDetail.failed_items.length"
style="max-height: 300px; overflow-y: auto"
>
<ElTable :data="currentDetail.failed_items" border size="small">
<ElTableColumn label="行号" prop="line" width="80" />
<ElTableColumn label="设备编号" prop="device_no" width="180" />
<ElTableColumn label="失败原因" prop="reason" min-width="300">
<template #default="{ row }">
{{ row.reason || '未知错误' }}
</template>
</ElTableColumn>
</ElTable>
</div>
<ElEmpty v-else description="无失败记录" />
<template #footer>
<ElButton @click="detailDialogVisible = false">关闭</ElButton>
<ElButton
v-if="currentDetail.skip_count > 0"
type="warning"
:icon="Download"
@click="downloadSkippedData"
>
下载跳过数据
</ElButton>
<ElButton
v-if="currentDetail.warning_count > 0"
type="warning"
:icon="Download"
@click="downloadWarningData"
>
下载警告数据
</ElButton>
<ElButton
v-if="currentDetail.fail_count > 0"
type="primary"
:icon="Download"
@click="downloadFailData"
>
下载失败数据
</ElButton>
</template>
</ElDialog>
</ArtTableFullScreen> </ArtTableFullScreen>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { h } from 'vue' import { h } from 'vue'
import { useRouter } from 'vue-router'
import { DeviceService } from '@/api/modules' import { DeviceService } from '@/api/modules'
import { ElMessage, ElTag } from 'element-plus' import { ElMessage, ElTag } from 'element-plus'
import { Download, UploadFilled, Upload } from '@element-plus/icons-vue' import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
@@ -236,9 +126,11 @@
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue' import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { StorageService } from '@/api/modules/storage' import { StorageService } from '@/api/modules/storage'
import type { DeviceImportTask, DeviceImportTaskStatus } from '@/types/api/device' import type { DeviceImportTask, DeviceImportTaskStatus } from '@/types/api/device'
import { RoutesAlias } from '@/router/routesAlias'
defineOptions({ name: 'DeviceTask' }) defineOptions({ name: 'DeviceTask' })
const router = useRouter()
const { hasAuth } = useAuth() const { hasAuth } = useAuth()
const loading = ref(false) const loading = ref(false)
const tableRef = ref() const tableRef = ref()
@@ -246,7 +138,6 @@
const fileList = ref<File[]>([]) const fileList = ref<File[]>([])
const uploading = ref(false) const uploading = ref(false)
const importDialogVisible = ref(false) const importDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>() const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
const currentRow = ref<DeviceImportTask | null>(null) const currentRow = ref<DeviceImportTask | null>(null)
@@ -323,7 +214,6 @@
] ]
const taskList = ref<DeviceImportTask[]>([]) const taskList = ref<DeviceImportTask[]>([])
const currentDetail = ref<any>({})
// 获取状态标签类型 // 获取状态标签类型
const getStatusType = (status: DeviceImportTaskStatus) => { const getStatusType = (status: DeviceImportTaskStatus) => {
@@ -342,22 +232,14 @@
} }
// 查看详情 // 查看详情
const viewDetail = async (row: DeviceImportTask) => { const viewDetail = (row: DeviceImportTask) => {
try { router.push({
const res = await DeviceService.getImportTaskDetail(row.id) path: RoutesAlias.TaskDetail,
if (res.code === 0 && res.data) { query: {
currentDetail.value = { id: row.id,
...res.data, task_type: 'device'
started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-'
}
detailDialogVisible.value = true
} }
} catch (error) { })
console.error('获取任务详情失败:', error)
ElMessage.error('获取任务详情失败')
}
} }
// 动态列配置 // 动态列配置
@@ -674,7 +556,41 @@
const res = await DeviceService.getImportTaskDetail(row.id) const res = await DeviceService.getImportTaskDetail(row.id)
if (res.code === 0 && res.data) { if (res.code === 0 && res.data) {
const detail = res.data const detail = res.data
downloadFailDataFromDetail(detail, row.batch_no) const failReasons =
detail.failed_items?.map((item: any) => ({
line: item.line || '-',
deviceNo: item.device_no || '-',
message: item.reason || '未知错误'
})) || []
if (failReasons.length === 0) {
ElMessage.warning('没有失败数据可下载')
return
}
const headers = ['行号', '设备编号', '失败原因']
const csvRows = [
headers.join(','),
...failReasons.map((item: any) =>
[item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `导入失败数据_${row.batch_no}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('失败数据下载成功')
} }
} catch (error) { } catch (error) {
console.error('下载失败数据失败:', error) console.error('下载失败数据失败:', error)
@@ -682,147 +598,17 @@
} }
} }
// 下载跳过数据(从详情对话框)
const downloadSkippedData = () => {
downloadSkippedDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
}
// 下载跳过数据的通用方法
const downloadSkippedDataFromDetail = (detail: any, batchNo: string) => {
const skippedReasons =
detail.skipped_items?.map((item: any) => ({
line: item.line || '-',
deviceNo: item.device_no || '-',
message: item.reason || '未知原因'
})) || []
if (skippedReasons.length === 0) {
ElMessage.warning('没有跳过数据可下载')
return
}
const headers = ['行号', '设备编号', '跳过原因']
const csvRows = [
headers.join(','),
...skippedReasons.map((item: any) =>
[item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `设备导入跳过数据_${batchNo}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('跳过数据下载成功')
}
// 下载警告数据(从详情对话框)
const downloadWarningData = () => {
downloadWarningDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
}
// 下载警告数据的通用方法
const downloadWarningDataFromDetail = (detail: any, batchNo: string) => {
const warningReasons =
detail.warning_items?.map((item: any) => ({
line: item.line || '-',
deviceNo: item.device_no || '-',
message: item.reason || item.message || '未知警告'
})) || []
if (warningReasons.length === 0) {
ElMessage.warning('没有警告数据可下载')
return
}
const headers = ['行号', '设备编号', '警告信息']
const csvRows = [
headers.join(','),
...warningReasons.map((item: any) =>
[item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `设备导入警告数据_${batchNo}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('警告数据下载成功')
}
// 下载失败数据(从详情对话框)
const downloadFailData = () => {
downloadFailDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
}
// 下载失败数据的通用方法
const downloadFailDataFromDetail = (detail: any, batchNo: string) => {
const failReasons =
detail.failed_items?.map((item: any) => ({
line: item.line || '-',
deviceNo: item.device_no || '-',
message: item.reason || '未知错误'
})) || []
if (failReasons.length === 0) {
ElMessage.warning('没有失败数据可下载')
return
}
const headers = ['行号', '设备编号', '失败原因']
const csvRows = [
headers.join(','),
...failReasons.map((item: any) =>
[item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `导入失败数据_${batchNo}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('失败数据下载成功')
}
// 右键菜单项配置 // 右键菜单项配置
const contextMenuItems = computed((): MenuItemType[] => { const contextMenuItems = computed((): MenuItemType[] => {
if (!currentRow.value) return [] if (!currentRow.value) return []
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ key: 'detail', label: '详情' }) if (hasAuth('device_task:view_detail')) {
items.push({ key: 'detail', label: '详情' })
}
if (currentRow.value.fail_count > 0) { if (currentRow.value.fail_count > 0 && hasAuth('device_task:download_fail_data')) {
items.push({ key: 'failData', label: '失败数据' }) items.push({ key: 'failData', label: '失败数据' })
} }

View File

@@ -47,7 +47,8 @@
hasAuth('iot_card:batch_recharge') || hasAuth('iot_card:batch_recharge') ||
hasAuth('iot_card:network_distribution') || hasAuth('iot_card:network_distribution') ||
hasAuth('iot_card:network_recycle') || hasAuth('iot_card:network_recycle') ||
hasAuth('iot_card:change_package') hasAuth('iot_card:change_package') ||
hasAuth('iot_card:batch_download')
" "
type="info" type="info"
@contextmenu.prevent="showMoreMenu" @contextmenu.prevent="showMoreMenu"
@@ -1502,10 +1503,12 @@
}) })
} }
items.push({ if (hasAuth('iot_card:batch_download')) {
key: 'download', items.push({
label: '批量下载' key: 'download',
}) label: '批量下载'
})
}
if (hasAuth('iot_card:change_package')) { if (hasAuth('iot_card:change_package')) {
items.push({ items.push({
@@ -1518,32 +1521,53 @@
}) })
// 卡操作菜单项配置 // 卡操作菜单项配置
const cardOperationMenuItems = computed((): MenuItemType[] => [ const cardOperationMenuItems = computed((): MenuItemType[] => {
{ const items: MenuItemType[] = []
key: 'query-flow',
label: '查询流量' if (hasAuth('iot_card:query_flow')) {
}, items.push({
{ key: 'query-flow',
key: 'realname-status', label: '查询流量'
label: '查询实名状态' })
},
{
key: 'card-status',
label: '查询卡状态'
},
{
key: 'realname-link',
label: '获取实名链接'
},
{
key: 'start-card',
label: '启用卡片'
},
{
key: 'stop-card',
label: '停用卡片'
} }
])
if (hasAuth('iot_card:query_realname_status')) {
items.push({
key: 'realname-status',
label: '查询实名状态'
})
}
if (hasAuth('iot_card:query_card_status')) {
items.push({
key: 'card-status',
label: '查询卡状态'
})
}
if (hasAuth('iot_card:get_realname_link')) {
items.push({
key: 'realname-link',
label: '获取实名链接'
})
}
if (hasAuth('iot_card:start_card')) {
items.push({
key: 'start-card',
label: '启用卡片'
})
}
if (hasAuth('iot_card:stop_card')) {
items.push({
key: 'stop-card',
label: '停用卡片'
})
}
return items
})
// 显示更多操作菜单 // 显示更多操作菜单
const showMoreMenu = (e: MouseEvent) => { const showMoreMenu = (e: MouseEvent) => {

View File

@@ -126,100 +126,12 @@
</ElButton> </ElButton>
</template> </template>
</ElDialog> </ElDialog>
<!-- 任务详情对话框 -->
<ElDialog v-model="detailDialogVisible" title="IoT卡导入任务详情" width="900px" align-center>
<ElDescriptions :column="2" border>
<ElDescriptionsItem label="任务编号" :span="2">{{
currentDetail.task_no
}}</ElDescriptionsItem>
<ElDescriptionsItem label="状态">
<ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="运营商">{{ currentDetail.carrier_name }}</ElDescriptionsItem>
<ElDescriptionsItem label="文件名" :span="2">{{
currentDetail.file_name
}}</ElDescriptionsItem>
<ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
<ElDescriptionsItem label="成功数">
<span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
<ElDescriptionsItem label="失败数">
<span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="警告数">
<span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
<ElDescriptionsItem label="错误信息" :span="2">{{
currentDetail.error_message
}}</ElDescriptionsItem>
</ElDescriptions>
<ElDivider content-position="left">跳过明细</ElDivider>
<div
v-if="currentDetail.skipped_items && currentDetail.skipped_items.length"
style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
>
<ElTable :data="currentDetail.skipped_items" border size="small">
<ElTableColumn label="行号" prop="line" width="80" />
<ElTableColumn label="ICCID" prop="iccid" width="200" />
<ElTableColumn label="MSISDN" prop="msisdn" width="150" />
<ElTableColumn label="跳过原因" prop="reason" min-width="200">
<template #default="{ row }">
{{ row.reason || '未知原因' }}
</template>
</ElTableColumn>
</ElTable>
</div>
<ElEmpty v-else description="无跳过记录" />
<ElDivider content-position="left">失败明细</ElDivider>
<div
v-if="currentDetail.failed_items && currentDetail.failed_items.length"
style="max-height: 300px; overflow-y: auto"
>
<ElTable :data="currentDetail.failed_items" border size="small">
<ElTableColumn label="行号" prop="line" width="80" />
<ElTableColumn label="ICCID" prop="iccid" width="200" />
<ElTableColumn label="MSISDN" prop="msisdn" width="150" />
<ElTableColumn label="失败原因" prop="reason" min-width="200">
<template #default="{ row }">
{{ row.reason || row.error || '未知错误' }}
</template>
</ElTableColumn>
</ElTable>
</div>
<ElEmpty v-else description="无失败记录" />
<template #footer>
<ElButton @click="detailDialogVisible = false">关闭</ElButton>
<ElButton
v-if="currentDetail.skip_count > 0"
type="warning"
:icon="Download"
@click="downloadSkippedData"
>
下载跳过数据
</ElButton>
<ElButton
v-if="currentDetail.fail_count > 0"
type="primary"
:icon="Download"
@click="downloadFailData"
>
下载失败数据
</ElButton>
</template>
</ElDialog>
</ArtTableFullScreen> </ArtTableFullScreen>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { h } from 'vue' import { h } from 'vue'
import { useRouter } from 'vue-router'
import { CardService, CarrierService } from '@/api/modules' import { CardService, CarrierService } from '@/api/modules'
import { ElMessage, ElTag, ElFormItem, ElSelect, ElOption } from 'element-plus' import { ElMessage, ElTag, ElFormItem, ElSelect, ElOption } from 'element-plus'
import { Download, UploadFilled, Upload } from '@element-plus/icons-vue' import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
@@ -228,15 +140,17 @@
import { useCheckedColumns } from '@/composables/useCheckedColumns' import { useCheckedColumns } from '@/composables/useCheckedColumns'
import { useAuth } from '@/composables/useAuth' import { useAuth } from '@/composables/useAuth'
import { formatDateTime } from '@/utils/business/format' import { formatDateTime } from '@/utils/business/format'
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue' import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue' import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { StorageService } from '@/api/modules/storage' import { StorageService } from '@/api/modules/storage'
import { RoutesAlias } from '@/router/routesAlias'
import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card' import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
import type { Carrier } from '@/types/api' import type { Carrier } from '@/types/api'
defineOptions({ name: 'IotCardTask' }) defineOptions({ name: 'IotCardTask' })
const router = useRouter()
const { hasAuth } = useAuth() const { hasAuth } = useAuth()
const loading = ref(false) const loading = ref(false)
const tableRef = ref() const tableRef = ref()
@@ -244,7 +158,6 @@
const fileList = ref<File[]>([]) const fileList = ref<File[]>([])
const uploading = ref(false) const uploading = ref(false)
const importDialogVisible = ref(false) const importDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const selectedCarrierId = ref<number>() const selectedCarrierId = ref<number>()
const carrierList = ref<Carrier[]>([]) const carrierList = ref<Carrier[]>([])
const carrierLoading = ref(false) const carrierLoading = ref(false)
@@ -341,7 +254,6 @@
] ]
const taskList = ref<IotCardImportTask[]>([]) const taskList = ref<IotCardImportTask[]>([])
const currentDetail = ref<any>({})
// 获取状态标签类型 // 获取状态标签类型
const getStatusType = (status: IotCardImportTaskStatus) => { const getStatusType = (status: IotCardImportTaskStatus) => {
@@ -359,25 +271,15 @@
} }
} }
// 查看详情 // 查看详情 - 跳转到详情页面
const viewDetail = async (row: IotCardImportTask) => { const viewDetail = (row: IotCardImportTask) => {
try { router.push({
const res = await CardService.getIotCardImportTaskDetail(row.id) path: RoutesAlias.TaskDetail,
if (res.code === 0 && res.data) { query: {
currentDetail.value = { id: row.id,
...res.data, task_type: 'card'
started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-',
carrier_name: res.data.carrier_name || '-',
error_message: res.data.error_message || '-'
}
detailDialogVisible.value = true
} }
} catch (error) { })
console.error('获取任务详情失败:', error)
ElMessage.error('获取任务详情失败')
}
} }
// 动态列配置 // 动态列配置
@@ -538,7 +440,42 @@
const res = await CardService.getIotCardImportTaskDetail(row.id) const res = await CardService.getIotCardImportTaskDetail(row.id)
if (res.code === 0 && res.data) { if (res.code === 0 && res.data) {
const detail = res.data const detail = res.data
downloadFailDataFromDetail(detail, row.task_no) const failReasons =
detail.failed_items?.map((item: any) => ({
line: item.line || '-',
iccid: item.iccid || '-',
msisdn: item.msisdn || '-',
message: item.reason || item.error || '未知错误'
})) || []
if (failReasons.length === 0) {
ElMessage.warning('没有失败数据可下载')
return
}
const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
const csvRows = [
headers.join(','),
...failReasons.map((item: any) =>
[item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `IoT卡导入失败数据_${row.task_no}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('失败数据下载成功')
} }
} catch (error) { } catch (error) {
console.error('下载失败数据失败:', error) console.error('下载失败数据失败:', error)
@@ -546,96 +483,6 @@
} }
} }
// 下载跳过数据(从详情对话框)
const downloadSkippedData = () => {
downloadSkippedDataFromDetail(currentDetail.value, currentDetail.value.task_no)
}
// 下载跳过数据的通用方法
const downloadSkippedDataFromDetail = (detail: any, taskNo: string) => {
const skippedReasons =
detail.skipped_items?.map((item: any) => ({
line: item.line || '-',
iccid: item.iccid || '-',
msisdn: item.msisdn || '-',
message: item.reason || '未知原因'
})) || []
if (skippedReasons.length === 0) {
ElMessage.warning('没有跳过数据可下载')
return
}
const headers = ['行号', 'ICCID', 'MSISDN', '跳过原因']
const csvRows = [
headers.join(','),
...skippedReasons.map((item: any) =>
[item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `IoT卡导入跳过数据_${taskNo}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('跳过数据下载成功')
}
// 下载失败数据(从详情对话框)
const downloadFailData = () => {
downloadFailDataFromDetail(currentDetail.value, currentDetail.value.task_no)
}
// 下载失败数据的通用方法
const downloadFailDataFromDetail = (detail: any, taskNo: string) => {
const failReasons =
detail.failed_items?.map((item: any) => ({
line: item.line || '-',
iccid: item.iccid || '-',
msisdn: item.msisdn || '-',
message: item.reason || item.error || '未知错误'
})) || []
if (failReasons.length === 0) {
ElMessage.warning('没有失败数据可下载')
return
}
const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
const csvRows = [
headers.join(','),
...failReasons.map((item: any) =>
[item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
)
]
const csvContent = csvRows.join('\n')
const BOM = '\uFEFF'
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', `IoT卡导入失败数据_${taskNo}.csv`)
link.style.visibility = 'hidden'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
ElMessage.success('失败数据下载成功')
}
// 下载模板 // 下载模板
const downloadTemplate = async () => { const downloadTemplate = async () => {
try { try {
@@ -665,7 +512,7 @@
// 设置列宽 // 设置列宽
ws['!cols'] = [ ws['!cols'] = [
{ wch: 25 }, // ICCID { wch: 25 }, // ICCID
{ wch: 15 } // MSISDN { wch: 15 } // MSISDN
] ]
// 将所有单元格设置为文本格式,防止科学计数法 // 将所有单元格设置为文本格式,防止科学计数法
@@ -779,7 +626,11 @@
const { upload_url, file_key } = uploadUrlRes.data const { upload_url, file_key } = uploadUrlRes.data
ElMessage.info('正在上传文件...') ElMessage.info('正在上传文件...')
await StorageService.uploadFile(upload_url, file, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') await StorageService.uploadFile(
upload_url,
file,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
)
ElMessage.info('正在创建导入任务...') ElMessage.info('正在创建导入任务...')
const importRes = await CardService.importIotCards({ const importRes = await CardService.importIotCards({
@@ -795,7 +646,7 @@
const taskNo = importRes.data.task_no const taskNo = importRes.data.task_no
handleCancelImport() handleCancelImport()
getTableData() await getTableData()
ElMessage.success({ ElMessage.success({
message: `导入任务已创建!任务编号:${taskNo}`, message: `导入任务已创建!任务编号:${taskNo}`,
@@ -816,9 +667,11 @@
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ key: 'detail', label: '详情' }) if (hasAuth('iot_card_task:view_detail')) {
items.push({ key: 'detail', label: '详情' })
}
if (currentRow.value.fail_count > 0) { if (currentRow.value.fail_count > 0 && hasAuth('iot_card_task:download_fail_data')) {
items.push({ key: 'failData', label: '失败数据' }) items.push({ key: 'failData', label: '失败数据' })
} }

View File

@@ -23,7 +23,10 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div style="margin: 10px 0"> <div style="margin: 10px 0">
<ElButton @click="showAddAccountDialog"> <ElButton
v-if="hasAuth(isShopType ? 'shop_account:add' : 'enterprise_account:add')"
@click="showAddAccountDialog"
>
{{ isShopType ? '新增店铺账号' : '新增企业账号' }} {{ isShopType ? '新增店铺账号' : '新增企业账号' }}
</ElButton> </ElButton>
</div> </div>
@@ -91,10 +94,17 @@
<ElDialog v-model="roleDialogVisible" width="900px"> <ElDialog v-model="roleDialogVisible" width="900px">
<template #header> <template #header>
<div class="dialog-header"> <div class="dialog-header">
<span class="dialog-title">分配角色</span> <span class="dialog-title">{{
isShopType ? '分配店铺账号角色' : '分配企业客户角色'
}}</span>
<div class="account-info"> <div class="account-info">
<span class="account-name">{{ currentAccountName }}</span> <span class="account-name">{{ currentAccountName }}</span>
<ElTag v-if="currentAccountType === 3" type="warning" size="small" style="margin-left: 8px"> <ElTag
v-if="currentAccountType === 3"
type="warning"
size="small"
style="margin-left: 8px"
>
代理账号只能分配一个客户角色 代理账号只能分配一个客户角色
</ElTag> </ElTag>
</div> </div>
@@ -208,11 +218,13 @@
import type { SearchFormItem } from '@/types' import type { SearchFormItem } from '@/types'
import type { PlatformAccount, PlatformRole } from '@/types/api' import type { PlatformAccount, PlatformRole } from '@/types/api'
import { formatDateTime } from '@/utils/business/format' import { formatDateTime } from '@/utils/business/format'
import { useAuth } from '@/composables/useAuth'
defineOptions({ name: 'CommonAccountList' }) defineOptions({ name: 'CommonAccountList' })
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const { hasAuth } = useAuth()
// 判断页面类型:通过 query 参数判断 // 判断页面类型:通过 query 参数判断
const isShopType = computed(() => route.query.type === 'shop') const isShopType = computed(() => route.query.type === 'shop')
@@ -373,11 +385,20 @@
{ {
prop: 'operation', prop: 'operation',
label: '操作', label: '操作',
width: 120, width: 160,
fixed: 'right', fixed: 'right',
formatter: (row: PlatformAccount) => { formatter: (row: PlatformAccount) => {
// 根据类型检查权限
const permission = isShopType.value
? 'shop_account:patch_role'
: 'customer_accounts:patch_role'
if (!hasAuth(permission)) {
return h('span', '-')
}
return h(ArtButtonTable, { return h(ArtButtonTable, {
text: '分配角色', text: isShopType.value ? '分配店铺账号角色' : '分配企业客户角色',
onClick: () => showRoleDialog(row) onClick: () => showRoleDialog(row)
}) })
} }

View File

@@ -0,0 +1,245 @@
<template>
<div class="order-detail-page">
<ElCard shadow="never">
<!-- 页面头部 -->
<div class="detail-header">
<ElButton @click="handleBack">
<template #icon>
<ElIcon><ArrowLeft /></ElIcon>
</template>
返回
</ElButton>
<h2 class="detail-title">订单详情</h2>
</div>
<!-- 详情内容 -->
<DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
<!-- 订单项列表 -->
<div
v-if="detailData && detailData.items && detailData.items.length > 0"
class="order-items-section"
>
<h3 class="section-title">订单项列表</h3>
<ElTable :data="detailData.items" border style="margin-top: 10px">
<ElTableColumn prop="package_name" label="套餐名称" min-width="150" />
<ElTableColumn prop="quantity" label="数量" width="100" />
<ElTableColumn prop="unit_price" label="单价" width="120">
<template #default="{ row }">
{{ formatCurrency(row.unit_price) }}
</template>
</ElTableColumn>
<ElTableColumn prop="amount" label="金额" width="120">
<template #default="{ row }">
{{ formatCurrency(row.amount) }}
</template>
</ElTableColumn>
</ElTable>
</div>
<!-- 加载中 -->
<div v-if="loading" class="loading-container">
<ElIcon class="is-loading"><Loading /></ElIcon>
<span>加载中...</span>
</div>
</ElCard>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElCard, ElButton, ElIcon, ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { ArrowLeft, Loading } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
import DetailPage from '@/components/common/DetailPage.vue'
import type { DetailSection } from '@/components/common/DetailPage.vue'
import { OrderService } from '@/api/modules'
import type { Order } from '@/types/api'
import { formatDateTime } from '@/utils/business/format'
defineOptions({ name: 'OrderDetail' })
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const detailData = ref<Order | null>(null)
// 格式化货币 - 将分转换为元
const formatCurrency = (amount: number): string => {
return `¥${(amount / 100).toFixed(2)}`
}
// 获取订单类型文本
const getOrderTypeText = (type: string): string => {
return type === 'single_card'
? t('orderManagement.orderType.singleCard')
: t('orderManagement.orderType.device')
}
// 获取买家类型文本
const getBuyerTypeText = (type: string): string => {
return type === 'personal'
? t('orderManagement.buyerType.personal')
: t('orderManagement.buyerType.agent')
}
// 获取支付方式文本
const getPaymentMethodText = (method: string): string => {
const methodMap: Record<string, string> = {
wallet: t('orderManagement.paymentMethod.wallet'),
wechat: t('orderManagement.paymentMethod.wechat'),
alipay: t('orderManagement.paymentMethod.alipay')
}
return methodMap[method] || method
}
// 获取佣金状态文本
const getCommissionStatusText = (status: number): string => {
const statusMap: Record<number, string> = {
0: t('orderManagement.commissionStatus.notApplicable'),
1: t('orderManagement.commissionStatus.pending'),
2: t('orderManagement.commissionStatus.settled')
}
return statusMap[status] || '-'
}
// 详情页配置
const detailSections: DetailSection[] = [
{
title: '基本信息',
fields: [
{ label: t('orderManagement.table.orderNo'), prop: 'order_no' },
{
label: t('orderManagement.table.orderType'),
formatter: (_, data) => getOrderTypeText(data.order_type)
},
{
label: t('orderManagement.table.paymentStatus'),
formatter: (_, data) => data.payment_status_text || '-'
},
{
label: t('orderManagement.table.totalAmount'),
prop: 'total_amount',
formatter: (value) => formatCurrency(value)
},
{
label: 'IoT卡ID',
prop: 'iot_card_id',
formatter: (value) => value || '-'
},
{
label: t('orderManagement.table.buyerType'),
formatter: (_, data) => data.buyer_type ? getBuyerTypeText(data.buyer_type) : '-'
},
{
label: '买家ID',
prop: 'buyer_id',
formatter: (value) => value || '-'
},
{
label: '代付订单',
formatter: (_, data) => data.is_purchase_on_behalf ? '是' : '否'
},
{
label: t('orderManagement.table.commissionStatus'),
formatter: (_, data) => getCommissionStatusText(data.commission_status)
},
{
label: '佣金配置版本',
prop: 'commission_config_version'
},
{
label: t('orderManagement.table.createdAt'),
prop: 'created_at',
formatter: (value) => formatDateTime(value)
},
{
label: t('orderManagement.table.updatedAt'),
prop: 'updated_at',
formatter: (value) => formatDateTime(value)
}
]
}
]
// 返回上一页
const handleBack = () => {
router.back()
}
// 获取详情数据
const fetchDetail = async () => {
const id = Number(route.params.id)
if (!id) {
ElMessage.error('缺少ID参数')
return
}
loading.value = true
try {
const res = await OrderService.getOrderById(id)
if (res.code === 0) {
detailData.value = res.data
}
} catch (error) {
console.error(error)
ElMessage.error('获取订单详情失败')
} finally {
loading.value = false
}
}
onMounted(() => {
fetchDetail()
})
</script>
<style scoped lang="scss">
.order-detail-page {
padding: 20px;
}
.detail-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
.detail-title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.order-items-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--el-border-color-lighter);
.section-title {
margin: 0 0 16px 0;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 12px;
color: var(--el-text-color-secondary);
.el-icon {
font-size: 32px;
}
}
</style>

View File

@@ -273,6 +273,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { h } from 'vue' import { h } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { OrderService, CardService, DeviceService, PackageManageService } from '@/api/modules' import { OrderService, CardService, DeviceService, PackageManageService } from '@/api/modules'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus' import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus' import type { FormInstance, FormRules } from 'element-plus'
@@ -296,10 +297,12 @@
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue' import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue' import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { formatDateTime } from '@/utils/business/format' import { formatDateTime } from '@/utils/business/format'
import { RoutesAlias } from '@/router/routesAlias'
defineOptions({ name: 'OrderList' }) defineOptions({ name: 'OrderList' })
const { t } = useI18n() const { t } = useI18n()
const router = useRouter()
const { hasAuth } = useAuth() const { hasAuth } = useAuth()
const loading = ref(false) const loading = ref(false)
@@ -855,16 +858,10 @@
} }
// 查看订单详情 // 查看订单详情
const showOrderDetail = async (row: Order) => { const showOrderDetail = (row: Order) => {
try { router.push({
const res = await OrderService.getOrderById(row.id) path: `${RoutesAlias.OrderList}/detail/${row.id}`
if (res.code === 0) { })
currentOrder.value = res.data
detailDialogVisible.value = true
}
} catch (error) {
console.error(error)
}
} }
// 取消订单 // 取消订单
@@ -904,10 +901,15 @@
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ key: 'detail', label: '详情' }) if (hasAuth('orders:view_detail')) {
items.push({ key: 'detail', label: '详情' })
}
// 只有待支付和已支付的订单可以取消 // 只有待支付和已支付的订单可以删除
if (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) { if (
(currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) &&
hasAuth('orders:delete')
) {
items.push({ key: 'cancel', label: '删除' }) items.push({ key: 'cancel', label: '删除' })
} }

View File

@@ -408,10 +408,12 @@
const contextMenuItems = computed((): MenuItemType[] => { const contextMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ if (hasAuth('package_assign:detail')) {
key: 'detail', items.push({
label: '详情' key: 'detail',
}) label: '详情'
})
}
if (hasAuth('package_assign:edit')) { if (hasAuth('package_assign:edit')) {
items.push({ items.push({
@@ -849,7 +851,11 @@
} }
// 处理表格行右键菜单 // 处理表格行右键菜单
const handleRowContextMenu = (row: ShopPackageAllocationResponse, column: any, event: MouseEvent) => { const handleRowContextMenu = (
row: ShopPackageAllocationResponse,
column: any,
event: MouseEvent
) => {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
currentRow.value = row currentRow.value = row

View File

@@ -555,10 +555,12 @@
const contextMenuItems = computed((): MenuItemType[] => { const contextMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ if (hasAuth('package:detail')) {
key: 'detail', items.push({
label: '详情' key: 'detail',
}) label: '详情'
})
}
if (hasAuth('package:edit')) { if (hasAuth('package:edit')) {
items.push({ items.push({

View File

@@ -991,7 +991,9 @@
const contextMenuItems = computed((): MenuItemType[] => { const contextMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = [] const items: MenuItemType[] = []
items.push({ key: 'detail', label: '详情' }) if (hasAuth('series_assign:detail')) {
items.push({ key: 'detail', label: '详情' })
}
if (hasAuth('series_assign:edit')) { if (hasAuth('series_assign:edit')) {
items.push({ key: 'edit', label: '编辑' }) items.push({ key: 'edit', label: '编辑' })
@@ -1005,7 +1007,11 @@
}) })
// 处理表格行右键菜单 // 处理表格行右键菜单
const handleRowContextMenu = (row: ShopSeriesAllocationResponse, column: any, event: MouseEvent) => { const handleRowContextMenu = (
row: ShopSeriesAllocationResponse,
column: any,
event: MouseEvent
) => {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
currentRow.value = row currentRow.value = row

View File

@@ -226,39 +226,49 @@
:title="`设置默认角色 - ${currentShop?.shop_name || ''}`" :title="`设置默认角色 - ${currentShop?.shop_name || ''}`"
width="50%" width="50%"
> >
<div v-loading="defaultRolesLoading"> <div v-loading="defaultRolesLoading || rolesLoading">
<!-- 当前默认角色列表 --> <!-- 当前默认角色显示 -->
<div v-if="selectedRoleId" class="current-role-display">
<div class="current-role-label">当前默认角色</div>
<div class="current-role-value">
{{ availableRoles.find((r) => r.role_id === selectedRoleId)?.role_name || '未知角色' }}
</div>
</div>
<div v-else class="current-role-display no-role">
<div class="current-role-label">当前默认角色</div>
<div class="current-role-value">
暂未设置
</div>
</div>
<!-- 默认角色选择 -->
<div class="default-roles-section"> <div class="default-roles-section">
<div class="section-header"> <div class="section-header">
<span style="color: white">当前默认角色</span> <span style="color: white">选择默认角色</span>
<ElButton type="primary" @click="showAddRoleDialog"> 设置默认角色 </ElButton>
</div> </div>
<ElTable :data="currentDefaultRoles" border stripe style="margin-top: 12px"> <ElSelect
<ElTableColumn prop="role_name" label="角色名称" width="150" /> v-model="selectedRoleId"
<ElTableColumn prop="role_desc" label="角色描述" min-width="200" /> filterable
<ElTableColumn prop="status" label="状态" width="80"> placeholder="请选择默认角色"
<template #default="{ row }"> style="width: 100%; margin-top: 12px"
<ElTag @change="handleRoleChange"
:type="row.status === CommonStatus.ENABLED ? 'success' : 'info'" :loading="rolesLoading"
size="small" >
> <ElOption
{{ getStatusText(row.status) }} v-for="role in availableRoles"
</ElTag> :key="role.role_id"
</template> :label="role.role_name"
</ElTableColumn> :value="role.role_id"
<ElTableColumn label="操作" width="100" fixed="right"> >
<template #default="{ row }"> <div style="display: flex; gap: 8px; align-items: center">
<ElButton type="danger" text size="small" @click="handleDeleteDefaultRole(row)"> <span>{{ role.role_name }}</span>
删除 <ElTag type="success" size="small">客户角色</ElTag>
</ElButton>
</template>
</ElTableColumn>
<template #empty>
<div style="padding: 20px 0; color: #909399">
暂无默认角色请点击"设置默认角色"按钮进行配置
</div> </div>
</template> </ElOption>
</ElTable> </ElSelect>
<div style="margin-top: 8px; color: #909399; font-size: 12px">
只能选择一个客户角色选择后立即生效
</div>
</div> </div>
</div> </div>
<template #footer> <template #footer>
@@ -267,41 +277,6 @@
</div> </div>
</template> </template>
</ElDialog> </ElDialog>
<!-- 设置默认角色对话框 -->
<ElDialog v-model="addRoleDialogVisible" title="设置默认角色" width="50%" append-to-body>
<div v-loading="rolesLoading">
<ElSelect
v-model="selectedRoleId"
filterable
placeholder="请选择默认角色"
style="width: 100%"
>
<ElOption
v-for="role in availableRoles"
:key="role.role_id"
:label="role.role_name"
:value="role.role_id"
>
<div style="display: flex; gap: 8px; align-items: center">
<span>{{ role.role_name }}</span>
<ElTag type="success" size="small">客户角色</ElTag>
</div>
</ElOption>
</ElSelect>
<div style="margin-top: 8px; color: #909399; font-size: 12px">
只能选择一个客户角色设置后将覆盖之前的默认角色
</div>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="addRoleDialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleAddDefaultRoles" :loading="addRoleLoading">
确定
</ElButton>
</div>
</template>
</ElDialog>
</ElCard> </ElCard>
</div> </div>
</ArtTableFullScreen> </ArtTableFullScreen>
@@ -350,12 +325,9 @@
// 默认角色管理相关状态 // 默认角色管理相关状态
const defaultRolesDialogVisible = ref(false) const defaultRolesDialogVisible = ref(false)
const addRoleDialogVisible = ref(false)
const defaultRolesLoading = ref(false) const defaultRolesLoading = ref(false)
const rolesLoading = ref(false) const rolesLoading = ref(false)
const addRoleLoading = ref(false)
const currentShop = ref<ShopResponse | null>(null) const currentShop = ref<ShopResponse | null>(null)
const currentDefaultRoles = ref<ShopRoleResponse[]>([])
const availableRoles = ref<ShopRoleResponse[]>([]) const availableRoles = ref<ShopRoleResponse[]>([])
const selectedRoleId = ref<number | undefined>(undefined) const selectedRoleId = ref<number | undefined>(undefined)
@@ -611,6 +583,7 @@
activeText: getStatusText(CommonStatus.ENABLED), activeText: getStatusText(CommonStatus.ENABLED),
inactiveText: getStatusText(CommonStatus.DISABLED), inactiveText: getStatusText(CommonStatus.DISABLED),
inlinePrompt: true, inlinePrompt: true,
disabled: !hasAuth('shop:modify_status'),
'onUpdate:modelValue': (val: string | number | boolean) => 'onUpdate:modelValue': (val: string | number | boolean) =>
handleStatusChange(row, val as number) handleStatusChange(row, val as number)
}) })
@@ -934,10 +907,12 @@
const items: MenuItemType[] = [] const items: MenuItemType[] = []
// 默认角色 // 默认角色
items.push({ if (hasAuth('shop:default_role')) {
key: 'defaultRoles', items.push({
label: '默认角色' key: 'defaultRoles',
}) label: '默认角色'
})
}
// 编辑 // 编辑
if (hasAuth('shop:edit')) { if (hasAuth('shop:edit')) {
@@ -1015,16 +990,19 @@
const showDefaultRolesDialog = async (row: ShopResponse) => { const showDefaultRolesDialog = async (row: ShopResponse) => {
currentShop.value = row currentShop.value = row
defaultRolesDialogVisible.value = true defaultRolesDialogVisible.value = true
await loadShopDefaultRoles(row.id) await loadAvailableRoles()
await loadShopDefaultRole(row.id)
} }
// 加载店铺默认角色列表 // 加载店铺当前默认角色
const loadShopDefaultRoles = async (shopId: number) => { const loadShopDefaultRole = async (shopId: number) => {
defaultRolesLoading.value = true defaultRolesLoading.value = true
try { try {
const res = await ShopService.getShopRoles(shopId) const res = await ShopService.getShopRoles(shopId)
if (res.code === 0) { if (res.code === 0) {
currentDefaultRoles.value = res.data.roles || [] const roles = res.data.roles || []
// 如果已有默认角色,预选第一个
selectedRoleId.value = roles.length > 0 ? roles[0].role_id : undefined
} }
} catch (error) { } catch (error) {
console.error('获取店铺默认角色失败:', error) console.error('获取店铺默认角色失败:', error)
@@ -1034,15 +1012,6 @@
} }
} }
// 显示设置默认角色对话框
const showAddRoleDialog = async () => {
addRoleDialogVisible.value = true
// 如果已有默认角色,预选第一个
selectedRoleId.value =
currentDefaultRoles.value.length > 0 ? currentDefaultRoles.value[0].role_id : undefined
await loadAvailableRoles()
}
// 加载可用角色列表(仅客户角色) // 加载可用角色列表(仅客户角色)
const loadAvailableRoles = async () => { const loadAvailableRoles = async () => {
rolesLoading.value = true rolesLoading.value = true
@@ -1072,9 +1041,9 @@
} }
} }
// 设置默认角色 // 处理角色变更 - 选择后立即生效
const handleAddDefaultRoles = async () => { const handleRoleChange = async (roleId: number) => {
if (!selectedRoleId.value) { if (!roleId) {
ElMessage.warning('请选择默认角色') ElMessage.warning('请选择默认角色')
return return
} }
@@ -1084,52 +1053,23 @@
return return
} }
addRoleLoading.value = true defaultRolesLoading.value = true
try { try {
// 传递数组但只包含一个角色ID // 传递数组但只包含一个角色ID
const res = await ShopService.assignShopRoles(currentShop.value.id, { const res = await ShopService.assignShopRoles(currentShop.value.id, {
role_ids: [selectedRoleId.value] role_ids: [roleId]
}) })
if (res.code === 0) { if (res.code === 0) {
ElMessage.success('设置默认角色成功') ElMessage.success('设置默认角色成功')
addRoleDialogVisible.value = false
// 刷新默认角色列表
await loadShopDefaultRoles(currentShop.value.id)
} }
} catch (error) { } catch (error) {
console.error('设置默认角色失败:', error) console.error('设置默认角色失败:', error)
// 失败时重新加载当前默认角色
await loadShopDefaultRole(currentShop.value.id)
} finally { } finally {
addRoleLoading.value = false defaultRolesLoading.value = false
} }
} }
// 删除默认角色
const handleDeleteDefaultRole = (role: ShopRoleResponse) => {
ElMessageBox.confirm(`确定要删除默认角色 "${role.role_name}" 吗?`, '删除默认角色', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
if (!currentShop.value) {
ElMessage.error('店铺信息异常')
return
}
try {
await ShopService.deleteShopRole(currentShop.value.id, role.role_id)
ElMessage.success('删除成功')
// 刷新默认角色列表
await loadShopDefaultRoles(currentShop.value.id)
} catch (error) {
console.error('删除默认角色失败:', error)
ElMessage.error('删除默认角色失败')
}
})
.catch(() => {
// 用户取消删除
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -1137,6 +1077,36 @@
// 店铺管理页面样式 // 店铺管理页面样式
} }
.current-role-display {
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 24px;
border: 2px solid var(--el-color-primary);
&.no-role {
border: 2px dashed var(--el-border-color);
.current-role-value {
color: var(--el-text-color-secondary);
}
}
.current-role-label {
font-size: 14px;
color: var(--el-text-color-secondary);
margin-bottom: 12px;
font-weight: 500;
}
.current-role-value {
font-size: 20px;
font-weight: 600;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
}
.default-roles-section { .default-roles-section {
.section-header { .section-header {
display: flex; display: flex;
@@ -1145,6 +1115,7 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #303133; color: #303133;
margin-bottom: 4px;
} }
} }
</style> </style>

View File

@@ -5,6 +5,7 @@
<ArtSearchBar <ArtSearchBar
v-model:filter="searchForm" v-model:filter="searchForm"
:items="searchFormItems" :items="searchFormItems"
:show-expand="false"
@reset="handleReset" @reset="handleReset"
@search="handleSearch" @search="handleSearch"
></ArtSearchBar> ></ArtSearchBar>