整理代码

web/src/features/piaotong/digital-accounts/index.vue

@@ -110,6 +110,7 @@ import {
   NIcon,
   NInput,
   NModal,
+  NPopconfirm,
   NSelect,
   NSpace,
   NTag,
@@ -122,7 +123,8 @@ import {
   listDigitalAccountsApi,
   refreshDigitalAccountsApi,
   sendLoginSmsCodeApi,
-  smsLoginApi
+  smsLoginApi,
+  updateDigitalAccountStatusApi
 } from '@/api/piaotong'
 import type { DigitalAccountItem } from '@/api/piaotong'
 import { useAuthStore } from '@/stores/auth'
@@ -144,6 +146,7 @@ const selected = ref<DigitalAccountItem | null>(null)
 const createFormRef = ref<FormInst | null>(null)
 
 const canManage = computed(() => authStore.user?.userType !== 'DIGITAL_OPERATOR')
+const canUpdateStatus = computed(() => authStore.hasPermission('digital-account:status'))
 
 const createForm = reactive({
   account: '',
@@ -197,6 +200,17 @@ const columns: DataTableColumns<DigitalAccountItem> = [
       )
   },
   { title: '最近认证', key: 'lastAuthSuccTime', minWidth: 160 },
+  {
+    title: '平台状态',
+    key: 'status',
+    width: 110,
+    render: (row) =>
+      h(
+        NTag,
+        { type: row.status === 'ENABLED' ? 'success' : 'warning' },
+        { default: () => (row.status === 'ENABLED' ? '可用' : '禁用') }
+      )
+  },
   {
     title: 'API Key',
     key: 'apiKey',
@@ -207,19 +221,49 @@ const columns: DataTableColumns<DigitalAccountItem> = [
     title: '操作',
     key: 'actions',
     fixed: 'right',
-    width: 220,
+    width: 300,
     render: (row) =>
       h('div', { class: 'row-actions' }, [
         h(
           NButton,
-          { size: 'small', secondary: true, onClick: () => openSms(row) },
+          {
+            size: 'small',
+            secondary: true,
+            disabled: row.status !== 'ENABLED',
+            onClick: () => openSms(row)
+          },
           { icon: () => h(NIcon, { component: KeyRound }), default: () => '短信登录' }
         ),
         h(
           NButton,
-          { size: 'small', tertiary: true, onClick: () => openQrcode(row) },
+          {
+            size: 'small',
+            tertiary: true,
+            disabled: row.status !== 'ENABLED',
+            onClick: () => openQrcode(row)
+          },
           { icon: () => h(NIcon, { component: ShieldCheck }), default: () => '认证' }
-        )
+        ),
+        canUpdateStatus.value
+          ? h(
+              NPopconfirm,
+              {
+                onPositiveClick: () => updateAccountStatus(row)
+              },
+              {
+                trigger: () =>
+                  h(
+                    NButton,
+                    { size: 'small', tertiary: true, type: row.status === 'ENABLED' ? 'warning' : 'success' },
+                    { default: () => (row.status === 'ENABLED' ? '禁用' : '恢复') }
+                  ),
+                default: () =>
+                  row.status === 'ENABLED'
+                    ? `确认禁用数电账号 ${row.account} 吗？`
+                    : `确认恢复数电账号 ${row.account} 吗？`
+              }
+            )
+          : null
       ])
   }
 ]
@@ -270,6 +314,13 @@ async function createAccount() {
   }
 }
 
+async function updateAccountStatus(row: DigitalAccountItem) {
+  const nextStatus = row.status === 'ENABLED' ? 'DISABLED' : 'ENABLED'
+  await updateDigitalAccountStatusApi(row.id, nextStatus)
+  message.success(nextStatus === 'ENABLED' ? '数电账号已恢复' : '数电账号已禁用')
+  await load()
+}
+
 async function openSms(row: DigitalAccountItem) {
   selected.value = row
   smsCode.value = ''