adminBigData/src/views/manager/index.vue

<template>
  <div class="page_item">
    <div class="page_search">
      <div class="search_content">
        <div class="content_left">
          <el-input v-model="keyWord" placeholder="请输入姓名或账号">
            <template #append>
              <el-button :icon="Search" @click="GoSearch()" />
            </template>
          </el-input>
        </div>
        <div class="content_right">
          <el-button>刷新</el-button>
          <el-button type="primary" @click="AddManager" >新增用户</el-button>
        </div>
      </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_table">
      <el-table :data="tableData" stripe :key="tableKey" v-loading="tableLoading" element-loading-text="拼命加载中……"
        element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" row-key="studentId">
          <el-table-column type="index" label="序号" align="center" width="50" />
          <el-table-column prop="username" label="账号" align="center"  show-overflow-tooltip />
          <el-table-column prop="nickname" label="姓名" align="center"  show-overflow-tooltip />
          <el-table-column prop="phoneNo" label="手机号" align="center"  show-overflow-tooltip />
          <el-table-column prop="status" label="状态" align="center"  show-overflow-tooltip>
            <template #default="scope">
              <div class="table_row_status">
                <!-- 正常 -->
                <div class="yes_release_icon" v-if="scope.row.status == 1"></div>
                <!-- 封禁 -->
                <div class="ready_close_icon" v-else-if="scope.row.status==2"></div>
                {{ scope.row.statusLabel }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="lastLoginAt" label="最后登录时间" align="center"  show-overflow-tooltip />
          <el-table-column label="操作" align="center" fixed="right" min-width="120">
            <template #default="scope">
              <div class="table_row_option">
                <div class="button_editor" @click="EditManager(scope.row)">编辑</div>
                <div class="button_editor" @click="EditPassword(scope.row)">重置密码</div>
                <div class="button_delete" @click="DeleteManager(scope.row)">删除</div>
              </div>
            </template>
          </el-table-column>
      </el-table>
    </div>

    <div class="page_dialog">
      <AddAdmin v-if="dialogData.showDialog" @update="RefTable" />
      <ResetPassword v-if="passwordDialog.dialogShow" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount, provide} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getUserList } from '@/api/school'
import { deleteManager } from '@/api/manager'
import AddAdmin from '@/views/manager/addAdmin.vue'
import ResetPassword from '@/components/resetPassword.vue'
const tableData = ref([]); // 表格数据
const tableLoading = ref(false); //表 格加载loading
const tableKey = ref(0); // 用于强制刷新table
const keyWord = ref(''); // 搜索关键词
const dialogData = reactive({
  showDialog: false,
  id: '',
  pageType: ''
}) // 添加/修改用户弹窗数据
const passwordDialog = reactive({
  dialogShow: false,
  id: '',
  name: '',
  label: '',
  remark: ''
}) // 重置密码弹窗数据
provide('dialogData', dialogData)
provide('passwordDialog', passwordDialog)
// 获取运维人员列表
const GetUserList = async() => {
  try{
    tableLoading.value=true;
    const res = await getUserList({
      queryStr: keyWord.value
    })
    if(res.code == 200 && res.data) {
      const { data } = res
      tableData.value = data
    }
  } catch(error) {
    console.error('获取数据失败:', error)
  } finally {
    tableLoading.value = false
  }
}
const GoSearch = () => {
  GetUserList()
}
// 组件挂载时自动加载数据
onMounted(() => {
  GetUserList()//加载表格数据
})

// 表格相关方法
function GetIndexNumber(index) {
  return index + 1
}
const AddManager = () => {
  dialogData.showDialog = true
  dialogData.pageType = 'add'
}
const EditManager = (row) => {
  dialogData.showDialog = true
  dialogData.pageType = 'edit'
  dialogData.id = row.id 
}
const RefTable = (val) => {
  dialogData.showDialog = val
  GetUserList()
}
const DeleteManager = (row) => {
  console.log(row)
  ElMessageBox.confirm('确定删除该学校吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await deleteManager({ ids: [row.id] })
    if(res.code == 200) {
      ElMessage.success(res.msg)
      GetUserList()
    }else {
      ElMessage.error(res.msg)
    }
  })
}
const EditPassword = (row) => {
  console.log(row)
  passwordDialog.dialogShow = true
  passwordDialog.id = row.id
  passwordDialog.name = row.nickname
  passwordDialog.label = '用户姓名'
  passwordDialog.remark = '用户账号'
}

</script>

<style>

</style>