huminmin
2 天以前 c1657d7fa4e9c9272da960fb1f7fa2595188571c
src/views/example/SimpleExample.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,135 @@
<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>