practiceGit/周新忠学习笔记/4.1/vue_prj/src/components/User.vue

<template>
  <div class="user-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="用户名">
              <el-input v-model="searchForm.name" placeholder="输入姓名搜索" clearable @clear="fetchUserList" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="searchUsers">搜索</el-button>
              <el-button type="success" icon="Plus" @click="handleAdd">新增用户</el-button>
            </el-form-item>
          </el-form>
          <el-button @click="fetchUserList" icon="Refresh">刷新</el-button>
        </div>
      </template>

      <el-table :data="userList" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="property" label="权限等级" width="100" />
        <el-table-column prop="createAt" label="创建时间" />

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑用户' : '新增用户'" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.pass" />
        </el-form-item>
        <el-form-item label="权限等级">
          <el-input-number v-model="form.property" :min="1" :max="5" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import service from '../api/service.js' // 确保这是你封装好的 axios 实例
import { ElMessage } from 'element-plus'

const userList = ref([])
const loading = ref(false)

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true
  try {
    // 注意：这里的路径要对应你后端绑定的路由
    const res = await service.get('/getUsers')

    // GoFrame 规范路由通常返回 {code:0, data: { list: [], total: 0 }}
    // 根据你后端的具体返回结构“剥壳”
    if (res.code === 0 || res.code === 200) {
      console.log(res.data)
      userList.value = res.data.users
    } else {
      ElMessage.error(res.message || '获取数据失败')
    }
  } catch (error) {
    console.error('Fetch Error:', error)
  } finally {
    loading.value = false
  }
}
//面板可见度
const dialogVisible =ref(false)

//搜索
const searchForm = reactive({
  name:""
})

//区分添加还是编辑
const addOrUpdate =ref(false)

//添加
const handleAdd=()=>{
  dialogVisible.value=true
  addOrUpdate.value=false
}

const form =reactive({
  id:0,
  name:"",
  property:0,
  pass:"",
})



//编辑
const handleEdit = (row: any) => {
  addOrUpdate.value=true
  dialogVisible.value = true
  form.id = row.id
  form.name = row.name
  form.property = row.property
}

//删除
const handleDelete=(row: any)=>{
  service.delete("/admin/user/delete",{params:{id:row.id}}).then(res=>{
    if (res.code==200||res.code==0){
      ElMessage.success("删除用户成功")
      fetchUserList()
    }
    else {
      ElMessage.error(res.message)
    }
  })
}

//保存编辑
const submitForm=()=>{
  service.post("/admin/user/editUser",form).then(
    res=>{
      console.log(res)
      if (res.code===0||res.code===200){
        if (addOrUpdate.value){
          ElMessage.success("更新成功")
        }
        else {
          ElMessage.success("添加成功")
        }
        form.id = 0
        form.name = ""
        form.property = 0
        form.pass=""
        fetchUserList()
        dialogVisible.value=false
      }
      else {
        ElMessage.error(res.message)
      }
    }
  )
}

const searchUsers=()=>{
  service.get("/admin/user/search",{params:{keyword:searchForm.name}}).then(
    res=>{
      if (res.code==0||res.code==200){
        userList.value=res.data.users
      }
      else {
        ElMessage.error(res.message)
      }
    }
  )
}


onMounted(() => {
  fetchUserList()
})

//关闭窗口
const closeDialog=()=>{
  dialogVisible.value=false
  form.id=0
  form.name=""
  form.property=0
  form.pass=""
}
</script>

<style scoped>
.user-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>