my-bigScreen/screen-vue/src/views/system/user/list.vue

<template>
  <div class="data-manage-page">
    <CSearch
      @search="handleSearch"
      @reset="handleReset"
    >
      <el-form-item label="用户名称：" class="search-item">
        <el-input
          v-model="searchForm.uname"
          placeholder="请输入用户名称"
          clearable
          class="search-input"
        />
      </el-form-item>
      <el-form-item label="登录账户：" class="search-item">
        <el-input
          v-model="searchForm.userName"
          placeholder="请输入登录账户"
          clearable
          class="search-input"
        />
      </el-form-item>
      <el-form-item label="用户状态：" class="search-item">
        <el-select
          v-model="searchForm.ustatus"
          placeholder="请选择用户状态"
          clearable
          class="search-select"
        >
          <el-option label="停用" value="0" />
          <el-option label="在用" value="1" />
          <el-option label="锁定" value="2" />
        </el-select>
      </el-form-item>
    </CSearch>

    <div class="main-wrapper">
      <div class="main-section">
        <div class="action-section">
          <el-button type="primary" icon="Plus" @click="handleAdd">
            新增
          </el-button>
          <el-button type="success" icon="Download" @click="handleExport">
            导出
          </el-button>
        </div>
        <STable
          :table-data="tableData"
          :loading="loading"
          :pagination="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <template #columns>
            <el-table-column prop="createTime" label="记录日期" width="180" sortable fixed="left" />
            <el-table-column prop="userName" label="登录账户" />
            <el-table-column prop="uname" label="用户名称" />
            <el-table-column prop="sex" label="性别" sortable />
            <el-table-column prop="email" label="电子邮箱" width="225" show-overflow-tooltip="true" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="ustatus" label="状态" min-width="100" align="center" sortable>
              <template #default="scope">
                <el-tag 
                  :type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '2' ? 'warning' : 'danger'"
                >
                  {{ getStatusText(scope.row.ustatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260" align="center" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="handleEdit(scope.row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
				<el-button size="small" type="warning" @click="handleResetPwd(scope.row)">
				  <el-icon><Key /></el-icon>
				  初始化
				</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </template>
        </STable>
      </div>
    </div>
	
    <PDialog
      v-model="dialogVisible"
	  :loading="saveLoading"
      :title="isEdit ? '编辑数据' : '新增数据'"
      @close="handleDialogClose"
      @reset="handleDialogReset"
      @confirm="handleSave"
    >
      <VForm ref="formComponentRef" :form-data="formData" :is-edit="isEdit" />
    </PDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
import { initPasswd } from '@/api/user'
import { getHomeUserList, getHomeUserSave, getHomeUserDelete } from '@/api/bizUser'

import CSearch from '@/components/Search/proSearch.vue'
import STable from '@/components/Table/proTable.vue'
import PDialog from '@/components/Dialog/proDialog.vue'
import VForm from './form.vue'

const formComponentRef = ref(null)
const saveLoading = ref(false)
const loading = ref(false)
const searchForm = reactive({
  uname: '',
  ustatus: '',
  userName: ''
})

const pagination = reactive({
  pageNum: 1,
  pageSize: 20,
  total: 0
})

const tableData = ref([])

const isEdit = ref(false)
const formData = ref({})
const currentRow = ref({})
const dialogVisible = ref(false)

async function getDataList() {
  loading.value = true
  try {
    const reqParams = {
      ... searchForm,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
    }
    const res = await getHomeUserList(reqParams);
    pagination.total = res.total;
    tableData.value = res.list || [];
  } catch (error) {
    console.error('获取数据失败:', error);
    tableData.value = []
  } finally {
    loading.value = false
  }
}

const getStatusText = (status) => {
  const statusMap = {
    '0': '停用',
    '1': '在用',
    '2': '锁定'
  }
  return statusMap[status] || '未知'
}

const handleSearch = () => {
  pagination.pageNum = 1
  getDataList()
}

const handleReset = () => {
  Object.assign(searchForm, {
    uname: '',
    ustatus: '',
    userName: ''
  })
  pagination.pageNum = 1
  getDataList()
}

const handleAdd = () => {
  isEdit.value = false
  formData.value = {}
  currentRow.value = {}
  dialogVisible.value = true
}

const handleEdit = (row) => {
  isEdit.value = true
  formData.value = { ...row }
  currentRow.value = { ...row }
  dialogVisible.value = true
}

const handleExport = () => {
  ElMessage.success('开始导出数据...')
}

const handleDelete = async (row) => {	
	ElMessageBox.confirm('确定要删除该条数据吗?', '删除确认', {
	  type: 'warning',
	  closeOnClickModal: false,
	  showClose: false
	})
	.then(async () => {
	  const reqParams = {
	    userId: row.userId
	  }
	  const res = await getHomeUserDelete(reqParams);
	  ElMessage.success(res.msg);
	  getDataList();
	})
	.catch(() => {
	  ElMessage.info('已取消删除数据操作');
	});
}

const handleResetPwd = async (row) => {
  ElMessageBox.confirm('确定要初始化该用户的密码吗?', '初始化确认', {
    type: 'warning',
    closeOnClickModal: false,
    showClose: false
  })
  .then(async () => {
    const reqParams = {
      userId: row.userId
    }
    const res = await initPasswd(reqParams);
    ElNotification({
		title: '初始化密码',
		message: res.msg,
		type: 'success',
    })
    getDataList();
  })
  .catch(() => {
    ElMessage.info('已取消密码初始化操作');
  });
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  getDataList()
}

const handleCurrentChange = (val) => {
  pagination.pageNum = val
  getDataList()
}

const handleDialogClose = () => {
  formData.value = {}
  isEdit.value = false
  currentRow.value = {}
  dialogVisible.value = false
}

const handleDialogReset = () => {
  if (formComponentRef.value) {
    formComponentRef.value.resetForm()
    ElMessage.info('表单已重置')
  }
}

const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
      ElMessage.warning('表单验证失败，请检查必填项')
      return
    }
  }
  saveLoading.value = true
  try {
	  const reqParams = {
		  ...formData.value,
		  isEdit: isEdit.value,
		  userId: currentRow.value?.userId
	  }
	  const res = await getHomeUserSave(reqParams);
	  saveLoading.value = false;
	  dialogVisible.value = false;
	  ElMessage.success(res.msg);
	  getDataList();
  } catch (error) {
	  console.log(error);
  }
}

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

<style scoped>
.data-manage-page {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.main-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

.main-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.action-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

:deep(.el-button .el-icon) {
  margin-right: 4px;
}
</style>