my-bigScreen/screen-vue/src/views/system/user/index.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="记录日期" />
            <el-table-column prop="userName" label="登录账户" />
            <el-table-column prop="uname" label="用户名称" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="email" label="电子邮箱" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="ustatus" label="状态" min-width="100" align="center">
              <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="180" align="center">
              <template #default="scope">
                <el-button size="small" type="primary" link @click="handleEdit(scope.row)">
                  编辑
                </el-button>
                <el-button size="small" type="danger" link @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </template>
        </STable>
      </div>
    </div>
	
    <PDialog
      v-model="dialogVisible"
      :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 } from 'element-plus'
import { Plus, Download } from '@element-plus/icons-vue'
import { getHomeUserList } 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 loading = ref(false)
const searchForm = reactive({
  uname: '',
  ustatus: '',
  userName: ''
})

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

const tableData = ref([])

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

async function getDataList() {
  loading.value = true
  try {
    const reqParmas = {
      ... searchForm,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
    }
    const res = await getHomeUserList(reqParmas);
    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 = {}
  dialogVisible.value = true
}

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

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

const handleDelete = (row) => {
  ElMessage.warning(`删除ID为 ${row.id} 的数据`)
}

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

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

const handleDialogClose = () => {
  formData.value = {}
  isEdit.value = false
  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
    }
  }

  setTimeout(() => {
    ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
    dialogVisible.value = false
    getDataList()
  }, 500)
}

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

<style scoped>
.data-manage-page {
  width: 100%;
  height: 100%;
  padding: 16px;
  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-bottom: 12px;
}

.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;
}

.search-input, .search-select {
  width: 100%;
}
</style>