Industrial-image-management-system---web/src/views/enterprise-settings/admin-permissions/index.vue

<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="管理员权限管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新增管理员</template>
          </a-button>
          <a-button @click="batchOperation">
            <template #icon><icon-settings /></template>
            <template #default>批量操作</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 管理员类型 -->
      <template #adminType="{ record }">
        <a-tag :color="getAdminTypeColor(record.adminType)">
          {{ record.adminType }}
        </a-tag>
      </template>
      
      <!-- 状态显示 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      
      <!-- 权限范围 -->
      <template #permissions="{ record }">
        <a-space>
          <a-tag 
            v-for="permission in record.permissions.slice(0, 3)" 
            :key="permission" 
            size="small"
          >
            {{ permission }}
          </a-tag>
          <a-tag v-if="record.permissions.length > 3" size="small">
            +{{ record.permissions.length - 3 }}
          </a-tag>
        </a-space>
      </template>
      
      <!-- 在线状态 -->
      <template #onlineStatus="{ record }">
        <a-space>
          <div 
            :class="record.isOnline ? 'online-dot' : 'offline-dot'"
            class="status-dot"
          ></div>
          {{ record.isOnline ? '在线' : '离线' }}
        </a-space>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="resetPassword(record)">重置密码</a-link>
          <a-link 
            @click="toggleStatus(record)"
            :class="record.status === 'active' ? 'text-red-500' : 'text-green-500'"
          >
            {{ record.status === 'active' ? '禁用' : '启用' }}
          </a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
let searchForm = reactive({
  username: '',
  adminType: '',
  status: '',
  createTime: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'username',
    label: '用户名',
    type: 'input' as const,
    props: {
      placeholder: '请输入用户名'
    }
  },
  {
    field: 'adminType',
    label: '管理员类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择管理员类型',
      options: [
        { label: '超级管理员', value: '超级管理员' },
        { label: '系统管理员', value: '系统管理员' },
        { label: '业务管理员', value: '业务管理员' },
        { label: '财务管理员', value: '财务管理员' }
      ]
    }
  },
  {
    field: 'status',
    label: '状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '正常', value: 'active' },
        { label: '禁用', value: 'disabled' },
        { label: '锁定', value: 'locked' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '用户名', dataIndex: 'username', width: 120 },
  { title: '真实姓名', dataIndex: 'realName', width: 100 },
  { title: '管理员类型', dataIndex: 'adminType', slotName: 'adminType', width: 120 },
  { title: '联系电话', dataIndex: 'phone', width: 120 },
  { title: '邮箱', dataIndex: 'email', width: 200 },
  { title: '权限范围', dataIndex: 'permissions', slotName: 'permissions', width: 250 },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '最后登录', dataIndex: 'lastLoginTime', width: 160 },
  { title: '登录次数', dataIndex: 'loginCount', width: 100 },
  { title: '在线状态', dataIndex: 'onlineStatus', slotName: 'onlineStatus', width: 100 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 80 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 250, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    username: 'superadmin',
    realName: '系统管理员',
    adminType: '超级管理员',
    phone: '13800138001',
    email: 'admin@windtech.com',
    permissions: ['用户管理', '系统设置', '数据管理', '权限管理', '日志查看'],
    createTime: '2023-01-01 10:00:00',
    lastLoginTime: '2024-03-15 09:30:00',
    loginCount: 1256,
    isOnline: true,
    status: 'active',
    remark: '系统超级管理员，拥有所有权限'
  },
  {
    id: 2,
    username: 'projectadmin',
    realName: '张项目经理',
    adminType: '业务管理员',
    phone: '13800138002',
    email: 'zhang@windtech.com',
    permissions: ['项目管理', '合同管理', '团队管理'],
    createTime: '2023-02-15 14:20:00',
    lastLoginTime: '2024-03-14 16:45:00',
    loginCount: 892,
    isOnline: false,
    status: 'active',
    remark: '负责项目相关业务管理'
  },
  {
    id: 3,
    username: 'financeadmin',
    realName: '李财务经理',
    adminType: '财务管理员',
    phone: '13800138003',
    email: 'li@windtech.com',
    permissions: ['财务管理', '预算管理', '成本控制'],
    createTime: '2023-03-01 11:10:00',
    lastLoginTime: '2024-03-13 10:20:00',
    loginCount: 654,
    isOnline: true,
    status: 'active',
    remark: '负责财务相关业务管理'
  },
  {
    id: 4,
    username: 'techsupport',
    realName: '王技术支持',
    adminType: '系统管理员',
    phone: '13800138004',
    email: 'wang@windtech.com',
    permissions: ['系统维护', '数据备份', '技术支持'],
    createTime: '2023-04-10 15:30:00',
    lastLoginTime: '2024-03-10 14:15:00',
    loginCount: 432,
    isOnline: false,
    status: 'disabled',
    remark: '技术支持人员，目前停用中'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 4,
  showTotal: true,
  showPageSize: true
})

// 获取管理员类型颜色
const getAdminTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '超级管理员': 'red',
    '系统管理员': 'blue',
    '业务管理员': 'green',
    '财务管理员': 'orange'
  }
  return colorMap[type] || 'gray'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'active': 'green',
    'disabled': 'red',
    'locked': 'orange'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'active': '正常',
    'disabled': '禁用',
    'locked': '锁定'
  }
  return textMap[status] || status
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    username: '',
    adminType: '',
    status: '',
    createTime: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新增管理员功能开发中...')
}

const batchOperation = () => {
  Message.info('批量操作功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看管理员详情: ${record.realName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑管理员: ${record.realName}`)
}

const resetPassword = (record: any) => {
  Message.info(`重置密码: ${record.realName}`)
}

const toggleStatus = (record: any) => {
  const action = record.status === 'active' ? '禁用' : '启用'
  Message.info(`${action}管理员: ${record.realName}`)
}

onMounted(() => {
  search()
})
</script>

<style scoped>
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.online-dot {
  background-color: #52c41a;
}

.offline-dot {
  background-color: #d9d9d9;
}

.text-red-500 {
  color: #ef4444;
}

.text-green-500 {
  color: #22c55e;
}
</style>