| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- ç®åçæç´¢åºå --> |
| | | <el-card class="search-card"> |
| | | <el-form :inline="true"> |
| | | <el-form-item label="é¨é¨"> |
| | | <el-input v-model="searchForm.department" placeholder="请è¾å
¥é¨é¨" clearable /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleSearch">æç´¢</el-button> |
| | | <el-button @click="handleReset">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | |
| | | <!-- å¨æè¡¨æ ¼ --> |
| | | <el-card class="table-card"> |
| | | <template #header> |
| | | <div class="card-header"> |
| | | <span>å工信æ¯è¡¨</span> |
| | | <el-button type="primary" size="small" @click="handleAdd">æ°å¢åå·¥</el-button> |
| | | </div> |
| | | </template> |
| | | |
| | | <DynamicTable |
| | | :data="tableData" |
| | | :dict-types="dictTypes" |
| | | :loading="loading" |
| | | :show-selection="true" |
| | | :show-actions="true" |
| | | height="400px" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="handleEdit" |
| | | @delete="handleDelete" |
| | | /> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import DynamicTable from '@/components/DynamicTable/index.vue' |
| | | |
| | | // æç´¢è¡¨å |
| | | const searchForm = reactive({ |
| | | department: '' |
| | | }) |
| | | |
| | | // è¡¨æ ¼æ°æ® |
| | | const tableData = ref([ |
| | | { |
| | | id: 1, |
| | | department: 'ææ¯é¨', |
| | | name: 'å¼ ä¸', |
| | | employeeId: 'EMP001', |
| | | sys_normal_disable: '1', // ç¶æ |
| | | sys_user_level: '2', // çº§å« |
| | | sys_user_position: '1' // èä½ |
| | | }, |
| | | { |
| | | id: 2, |
| | | department: '人äºé¨', |
| | | name: 'æå', |
| | | employeeId: 'EMP002', |
| | | sys_normal_disable: '0', // ç¶æ |
| | | sys_user_level: '1', // çº§å« |
| | | sys_user_position: '2' // èä½ |
| | | } |
| | | ]) |
| | | |
| | | // åå
¸ç±»å |
| | | const dictTypes = ref([ |
| | | 'sys_normal_disable', // ç¶æï¼å¯ç¨/ç¦ç¨ |
| | | 'sys_user_level', // 级å«ï¼å级/ä¸çº§/é«çº§ |
| | | 'sys_user_position' // èä½ï¼åå·¥/主管/ç»ç |
| | | ]) |
| | | |
| | | // å è½½ç¶æ |
| | | const loading = ref(false) |
| | | |
| | | // äºä»¶å¤ç |
| | | const handleSearch = () => { |
| | | loading.value = true |
| | | // 模ææç´¢ |
| | | setTimeout(() => { |
| | | loading.value = false |
| | | ElMessage.success('æç´¢å®æ') |
| | | }, 1000) |
| | | } |
| | | |
| | | const handleReset = () => { |
| | | searchForm.department = '' |
| | | } |
| | | |
| | | const handleAdd = () => { |
| | | ElMessage.info('æ°å¢åè½å¾
å®ç°') |
| | | } |
| | | |
| | | const handleSelectionChange = (selection) => { |
| | | console.log('éä¸çè¡:', selection) |
| | | } |
| | | |
| | | const handleEdit = (row, index) => { |
| | | ElMessage.info(`ç¼è¾ç¬¬${index + 1}è¡æ°æ®`) |
| | | } |
| | | |
| | | const handleDelete = (row, index) => { |
| | | ElMessage.warning(`å é¤ç¬¬${index + 1}è¡æ°æ®`) |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .app-container { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .search-card { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .table-card { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | :deep(.el-form-item) { |
| | | margin-bottom: 0; |
| | | } |
| | | </style> |