AccountManagement.vue

<template>
  <div class="account-management">
    <div class="toolbar">
      <p class="description">管理系统登录账号</p>
      <el-button @click="isAddDialogOpen = true" type="primary" size="small">
        <i class="el-icon-plus"></i>
        添加账号
      </el-button>
    </div>

    <div class="account-table">
      <el-table :data="accounts" style="width: 100%" border>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="role" label="角色" width="120">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="所属区域" width="220"></el-table-column>
        <el-table-column label="联系方式" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.phone || scope.row.email || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastLogin" label="最近登录" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.lastLogin || '从未登录' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="small" 
              @click="editAccount(scope.row)"
            >
              编辑
            </el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="deleteAccount(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加/编辑账号对话框 -->
    <el-dialog
      :title="editingAccount ? '编辑账号' : '添加账号'"
      :visible.sync="isAddDialogOpen"
      width="600px"
    >
      <el-form :model="accountForm" :rules="accountRules" ref="accountForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="accountForm.username" 
                placeholder="请输入用户名"
                :disabled="!!editingAccount"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="accountForm.name" 
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="角色" prop="role">
              <el-select v-model="accountForm.role" style="width: 100%;">
                <el-option label="网格管理员" value="网格管理员"></el-option>
                <el-option label="区县管理员" value="区县管理员"></el-option>
                <el-option label="地市管理员" value="地市管理员"></el-option>
                <el-option label="省级管理员" value="省级管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域" prop="region">
              <el-input 
                v-model="accountForm.region" 
                placeholder="请输入所属区域"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input 
                v-model="accountForm.phone" 
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input 
                v-model="accountForm.email" 
                type="email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="状态" prop="status">
          <el-select v-model="accountForm.status" style="width: 100%;">
            <el-option label="启用" value="active"></el-option>
            <el-option label="禁用" value="inactive"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="submitAccountForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 模拟账号数据
const mockAccounts = [
  { id: 'ACC001', username: 'grid001', name: '李网格长', role: '网格管理员', region: '南京市玄武区A网格', phone: '13543210987', status: 'active', lastLogin: '2025-09-28 15:30:00', createTime: '2025-09-01 09:00:00' },
  { id: 'ACC002', username: 'county001', name: '王区长', role: '区县管理员', region: '南京市玄武区', phone: '13432109876', status: 'active', lastLogin: '2025-09-28 14:20:00', createTime: '2025-09-01 09:00:00' },
  { id: 'ACC003', username: 'city001', name: '张市长', role: '地市管理员', region: '南京市', phone: '13321098765', status: 'active', lastLogin: '2025-09-28 10:15:00', createTime: '2025-09-01 09:00:00' }
]

export default {
  name: 'AccountManagement',
  data() {
    return {
      accounts: mockAccounts,
      isAddDialogOpen: false,
      editingAccount: null,
      accountForm: {
        username: '',
        name: '',
        role: '网格管理员',
        region: '',
        phone: '',
        email: '',
        status: 'active'
      },
      accountRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入所属区域', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    editAccount(account) {
      this.editingAccount = account
      this.accountForm = { ...account }
      this.isAddDialogOpen = true
    },
    deleteAccount(id) {
      this.$confirm('确定要删除该账号吗？此操作不可撤销。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.accounts = this.accounts.filter(a => a.id !== id)
        this.$message.success('账号删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    submitAccountForm() {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          if (this.editingAccount) {
            // 更新账号信息
            const index = this.accounts.findIndex(a => a.id === this.editingAccount.id)
            if (index !== -1) {
              this.$set(this.accounts, index, { ...this.editingAccount, ...this.accountForm })
              this.$message.success('账号信息更新成功')
            }
          } else {
            // 添加新账号
            const newAccount = {
              ...this.accountForm,
              id: `ACC${Date.now()}`,
              createTime: new Date().toLocaleString('zh-CN')
            }
            this.accounts.push(newAccount)
            this.$message.success('账号添加成功')
          }
          
          // 重置表单和状态
          this.resetAccountForm()
          this.isAddDialogOpen = false
          this.editingAccount = null
        }
      })
    },
    resetAccountForm() {
      this.accountForm = {
        username: '',
        name: '',
        role: '网格管理员',
        region: '',
        phone: '',
        email: '',
        status: 'active'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.account-management {
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .description {
      color: #909399;
      margin: 0;
    }
  }
  
  .account-table {
    margin-bottom: 20px;
  }
}
</style>