<script setup lang="ts"> import { ref, watch } from "vue"; import tree from "./tree.vue"; import { useHook } from "./hook"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import BalanceEditModal from "./BalanceEditModal.vue"; import Search from "@iconify-icons/ep/search"; import Refresh from "@iconify-icons/ep/refresh"; defineOptions({ name: "QyUser" }); const formRef = ref(); const { searchFormParams, onSearch, pageLoading, dataList, pagination, getList, resetForm, handleViewDetail, handleModifyBalance, balanceVisible, selectedUser } = useHook(); watch( () => searchFormParams.mainDepartment, () => { onSearch(); } ); </script> <template> <div class="main"> <tree class="w-[17%] float-left" v-model="searchFormParams.mainDepartment" /> <div class="float-right w-[82%]"> <BalanceEditModal v-model:visible="balanceVisible" :row="selectedUser" @refresh="getList" /> <el-form ref="formRef" :inline="true" :model="searchFormParams" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"> <el-form-item label="姓名:" prop="name"> <el-input v-model="searchFormParams.name" placeholder="请输入" clearable class="!w-[160px]" /> </el-form-item> <el-form-item> <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch"> 搜索 </el-button> <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置 </el-button> </el-form-item> </el-form> <div class="grid-container"> <el-row :gutter="20"> <el-col v-for="(item, index) in dataList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6"> <el-card class="user-card"> <div class="card-content"> <el-avatar :size="60" :src="item.avatar" class="avatar" /> <div class="user-info"> <div class="name">{{ item.name }}</div> <div class="gender">性别:{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div> <div class="create-time">创建时间:{{ item.createTimeStr }}</div> <div class="balance">余额:¥{{ item.balance?.toFixed(2) }}</div> </div> </div> <el-row :gutter="10"> <el-col :span="12"> <el-button type="primary" size="small" class="detail-btn" @click="handleViewDetail(item)"> 查看详情 </el-button> </el-col> <el-col :span="12"> <el-button type="warning" size="small" class="detail-btn" @click="handleModifyBalance(item)"> 修改余额 </el-button> </el-col> </el-row> </el-card> </el-col> </el-row> <div class="pagination-wrapper"> <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize" :total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList" @size-change="getList" /> </div> </div> </div> </div> </template> <style scoped lang="scss"> :deep(.el-dropdown-menu__item i) { margin: 0; } .search-form { :deep(.el-form-item) { margin-bottom: 12px; } } .user-card { margin-bottom: 20px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; .card-content { display: flex; align-items: center; margin-bottom: 15px; .avatar { margin-right: 15px; flex-shrink: 0; } .user-info { .name { font-size: 16px; font-weight: 500; margin-bottom: 6px; } .gender, .create-time { font-size: 12px; color: #909399; line-height: 1.5; } .balance { font-family: monospace; font-size: 14px; color: #67c23a; margin-bottom: 6px; line-height: 1.5; } } } .detail-btn { width: 100%; margin-top: auto; } } .grid-container { margin: 20px 0; padding-bottom: 60px; position: relative; .el-row { margin-bottom: -20px; } } .pagination-wrapper { position: relative; background: var(--el-bg-color); padding: 12px 12px; margin-top: 20px; text-align: center; :deep(.el-pagination) { margin: 0; padding: 8px 0; } } </style>