feat(web): update employee management view

- EmployeeManagementView.vue: update employee management view component
- scripts/EmployeeManagementView.js: update employee management view logic

web/src/views/EmployeeManagementView.vue

@@ -211,8 +211,8 @@
 
           <div class="detail-action-group">
             <button class="minor-action" type="button" :disabled="disableActionDisabled" @click="disableEmployeeAccount">
-              <i class="mdi mdi-account-cancel-outline"></i>
+              <i :class="statusActionCopy.buttonIcon"></i>
-              <span>{{ selectedEmployee.status === '停用' ? '账号已停用' : actionState === 'disable' ? '停用中...' : '停用账号' }}</span>
+              <span>{{ statusActionCopy.buttonLabel }}</span>
             </button>
             <button class="major-action" type="button" :disabled="actionBusy" @click="saveEmployeeChanges">
               <i class="mdi mdi-check-circle-outline"></i>
@@ -559,15 +559,15 @@
 
     <ConfirmDialog
       :open="disableDialogOpen"
-      badge="停用账号"
+      :badge="statusActionCopy.badge"
-      badge-tone="warning"
+      :badge-tone="statusActionCopy.badgeTone"
-      :title="`确认停用 ${selectedEmployee?.name || '该员工'} 的账号吗？`"
+      :title="statusActionCopy.title"
-      description="停用后该员工将无法继续登录系统，相关个人操作入口也会立即失效。"
+      :description="statusActionCopy.description"
       cancel-text="取消"
-      confirm-text="确认停用"
+      :confirm-text="statusActionCopy.confirmText"
-      busy-text="停用中..."
+      :busy-text="statusActionCopy.busyText"
-      confirm-tone="danger"
+      :confirm-tone="statusActionCopy.confirmTone"
-      confirm-icon="mdi mdi-account-cancel-outline"
+      :confirm-icon="statusActionCopy.confirmIcon"
       :busy="actionState === 'disable'"
       @close="closeDisableDialog"
       @confirm="confirmDisableEmployeeAccount"

web/src/views/scripts/EmployeeManagementView.js

@@ -3,7 +3,13 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
 import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { useToast } from '../../composables/useToast.js'
-import { disableEmployee, fetchEmployeeMeta, fetchEmployees, updateEmployee } from '../../services/employees.js'
+import {
+  disableEmployee,
+  enableEmployee,
+  fetchEmployeeMeta,
+  fetchEmployees,
+  updateEmployee
+} from '../../services/employees.js'
 
 const DEFAULT_STATUS_TABS = ['全部员工', '在职', '试用中', '停用']
 const FALLBACK_ROLE_OPTIONS = [
@@ -277,12 +283,41 @@ export default {
         .map((role) => role.label)
     )
     const actionBusy = computed(() => actionState.value === 'save' || actionState.value === 'disable')
-    const disableActionDisabled = computed(
+    const disableActionDisabled = computed(() => actionBusy.value || !selectedEmployee.value)
-      () =>
+    const selectedEmployeeDisabled = computed(() => selectedEmployee.value?.status === '停用')
-        actionBusy.value ||
+    const statusActionCopy = computed(() => {
-        !selectedEmployee.value ||
+      if (selectedEmployeeDisabled.value) {
-        selectedEmployee.value.status === '停用'
+        return {
-    )
+          buttonLabel: actionState.value === 'disable' ? '启用中...' : '启用账号',
+          buttonIcon: 'mdi mdi-account-check-outline',
+          badge: '启用账号',
+          badgeTone: 'info',
+          title: `确认启用 ${selectedEmployee.value?.name || '该员工'} 的账号吗？`,
+          description: '启用后该员工将恢复登录能力，并重新获得个人业务入口访问权限。',
+          confirmText: '确认启用',
+          busyText: '启用中...',
+          confirmTone: 'primary',
+          confirmIcon: 'mdi mdi-account-check-outline',
+          successMessage: '员工账号已启用。',
+          failureMessage: '启用账号失败，请稍后重试。'
+        }
+      }
+
+      return {
+        buttonLabel: actionState.value === 'disable' ? '停用中...' : '停用账号',
+        buttonIcon: 'mdi mdi-account-cancel-outline',
+        badge: '停用账号',
+        badgeTone: 'warning',
+        title: `确认停用 ${selectedEmployee.value?.name || '该员工'} 的账号吗？`,
+        description: '停用后该员工将无法继续登录系统，相关个人操作入口也会立即失效。',
+        confirmText: '确认停用',
+        busyText: '停用中...',
+        confirmTone: 'danger',
+        confirmIcon: 'mdi mdi-account-cancel-outline',
+        successMessage: '员工账号已停用。',
+        failureMessage: '停用账号失败，请稍后重试。'
+      }
+    })
 
     const departmentOptions = computed(() =>
       uniqueSorted(employees.value.map((item) => item.department))
@@ -660,16 +695,29 @@ export default {
         return
       }
 
+      const shouldEnable = selectedEmployeeDisabled.value
+      const actionCopy = shouldEnable
+        ? {
+            successMessage: '员工账号已启用。',
+            failureMessage: '启用账号失败，请稍后重试。'
+          }
+        : {
+            successMessage: '员工账号已停用。',
+            failureMessage: '停用账号失败，请稍后重试。'
+          }
+
       actionState.value = 'disable'
 
       try {
-        const updated = await disableEmployee(selectedEmployee.value.id)
+        const updated = shouldEnable
+          ? await enableEmployee(selectedEmployee.value.id)
+          : await disableEmployee(selectedEmployee.value.id)
         disableDialogOpen.value = false
         selectedEmployee.value = updated
         await loadEmployees()
-        toast('员工账号已停用。')
+        toast(actionCopy.successMessage)
       } catch (error) {
-        toast(error?.message || '停用账号失败，请稍后重试。')
+        toast(error?.message || actionCopy.failureMessage)
       } finally {
         actionState.value = ''
       }
@@ -736,6 +784,8 @@ export default {
       detailAge,
       roleCount,
       selectedRoleLabels,
+      selectedEmployeeDisabled,
+      statusActionCopy,
       actionState,
       actionBusy,
       disableActionDisabled,