From 75a462f8ee30491f05d29ccac1b65d31e835957b Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 20 八月 2025 15:57:14 +0800
Subject: [PATCH] 档案管理调整
---
src/views/example/DynamicTableExample.vue | 354 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 354 insertions(+), 0 deletions(-)
diff --git a/src/views/example/DynamicTableExample.vue b/src/views/example/DynamicTableExample.vue
new file mode 100644
index 0000000..038cd43
--- /dev/null
+++ b/src/views/example/DynamicTableExample.vue
@@ -0,0 +1,354 @@
+<template>
+ <div class="app-container">
+ <div class="search-form">
+ <el-form :inline="true" :model="searchForm">
+ <el-form-item label="閮ㄩ棬">
+ <el-input
+ v-model="searchForm.department"
+ placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
+ clearable
+ style="width: 200px"
+ />
+ </el-form-item>
+ <el-form-item label="濮撳悕">
+ <el-input
+ v-model="searchForm.name"
+ placeholder="璇疯緭鍏ュ鍚�"
+ clearable
+ style="width: 200px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleSearch">鎼滅储</el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
+ <el-button type="success" @click="handleAdd">鏂板</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <div class="table-container">
+ <DynamicTable
+ ref="dynamicTableRef"
+ :data="tableData"
+ :dict-types="dictTypes"
+ :loading="loading"
+ :show-selection="true"
+ :show-actions="true"
+ :show-pagination="true"
+ :pagination="pagination"
+ height="calc(100vh - 280px)"
+ @selection-change="handleSelectionChange"
+ @edit="handleEdit"
+ @delete="handleDelete"
+ @select-change="handleSelectChange"
+ @input-change="handleInputChange"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+
+ <!-- 鏂板/缂栬緫瀵硅瘽妗� -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ width="600px"
+ append-to-body
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="100px"
+ >
+ <el-form-item label="閮ㄩ棬" prop="department">
+ <el-input v-model="form.department" placeholder="璇疯緭鍏ラ儴闂�" />
+ </el-form-item>
+ <el-form-item label="濮撳悕" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ鍚�" />
+ </el-form-item>
+ <el-form-item label="宸ュ彿" prop="employeeId">
+ <el-input v-model="form.employeeId" placeholder="璇疯緭鍏ュ伐鍙�" />
+ </el-form-item>
+
+ <!-- 鍔ㄦ�佽〃鍗曢」锛氭牴鎹瓧鍏哥敓鎴� -->
+ <el-form-item
+ v-for="dictItem in dynamicFormItems"
+ :key="dictItem.value"
+ :label="dictItem.label"
+ :prop="dictItem.value"
+ >
+ <el-select
+ v-model="form[dictItem.value]"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ >
+ <el-option
+ v-for="option in dictItem.options"
+ :key="option.value"
+ :label="option.label"
+ :value="option.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleSubmit">纭畾</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import DynamicTable from '@/components/DynamicTable/index.vue'
+
+// 鍝嶅簲寮忔暟鎹�
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const editIndex = ref(-1)
+const selectedRows = ref([])
+
+// 鎼滅储琛ㄥ崟
+const searchForm = reactive({
+ department: '',
+ name: ''
+})
+
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([
+ {
+ id: 1,
+ department: '鎶�鏈儴',
+ name: '寮犱笁',
+ employeeId: 'EMP001',
+ status: '1',
+ level: '2',
+ position: '1'
+ },
+ {
+ id: 2,
+ department: '浜轰簨閮�',
+ name: '鏉庡洓',
+ employeeId: 'EMP002',
+ status: '0',
+ level: '1',
+ position: '2'
+ },
+ {
+ id: 3,
+ department: '璐㈠姟閮�',
+ name: '鐜嬩簲',
+ employeeId: 'EMP003',
+ status: '1',
+ level: '3',
+ position: '1'
+ }
+])
+
+// 瀛楀吀绫诲瀷閰嶇疆
+const dictTypes = ref([
+ 'sys_normal_disable', // 鐘舵�佸瓧鍏�
+ 'sys_user_level', // 绾у埆瀛楀吀
+ 'sys_user_position' // 鑱屼綅瀛楀吀
+])
+
+// 鍒嗛〉閰嶇疆
+const pagination = reactive({
+ current: 1,
+ size: 10,
+ total: 0
+})
+
+// 琛ㄥ崟鏁版嵁
+const form = reactive({
+ department: '',
+ name: '',
+ employeeId: '',
+ status: '',
+ level: '',
+ position: ''
+})
+
+// 琛ㄥ崟楠岃瘉瑙勫垯
+const rules = {
+ department: [
+ { required: true, message: '璇疯緭鍏ラ儴闂�', trigger: 'blur' }
+ ],
+ name: [
+ { required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'blur' }
+ ],
+ employeeId: [
+ { required: true, message: '璇疯緭鍏ュ伐鍙�', trigger: 'blur' }
+ ]
+}
+
+// 鍔ㄦ�佽〃鍗曢」
+const dynamicFormItems = computed(() => {
+ // 杩欓噷鍙互鏍规嵁瀛楀吀鏁版嵁鍔ㄦ�佺敓鎴愯〃鍗曢」
+ return [
+ {
+ label: '鐘舵��',
+ value: 'status',
+ options: [
+ { label: '鍚敤', value: '1' },
+ { label: '绂佺敤', value: '0' }
+ ]
+ },
+ {
+ label: '绾у埆',
+ value: 'level',
+ options: [
+ { label: '鍒濈骇', value: '1' },
+ { label: '涓骇', value: '2' },
+ { label: '楂樼骇', value: '3' }
+ ]
+ },
+ {
+ label: '鑱屼綅',
+ value: 'position',
+ options: [
+ { label: '鍛樺伐', value: '1' },
+ { label: '涓荤', value: '2' },
+ { label: '缁忕悊', value: '3' }
+ ]
+ }
+ ]
+})
+
+// 缁勪欢寮曠敤
+const dynamicTableRef = ref(null)
+const formRef = ref(null)
+
+// 浜嬩欢澶勭悊鍑芥暟
+const handleSearch = () => {
+ // 瀹炵幇鎼滅储閫昏緫
+ console.log('鎼滅储鏉′欢:', searchForm)
+ ElMessage.success('鎼滅储鍔熻兘寰呭疄鐜�')
+}
+
+const handleReset = () => {
+ searchForm.department = ''
+ searchForm.name = ''
+}
+
+const handleAdd = () => {
+ dialogTitle.value = '鏂板鍛樺伐'
+ editIndex.value = -1
+ resetForm()
+ dialogVisible.value = true
+}
+
+const handleEdit = (row, index) => {
+ dialogTitle.value = '缂栬緫鍛樺伐'
+ editIndex.value = index
+ Object.assign(form, row)
+ dialogVisible.value = true
+}
+
+const handleDelete = async (row, index) => {
+ try {
+ await ElMessageBox.confirm('纭畾瑕佸垹闄よ繖鏉¤褰曞悧锛�', '鎻愮ず', {
+ type: 'warning'
+ })
+
+ tableData.value.splice(index, 1)
+ ElMessage.success('鍒犻櫎鎴愬姛')
+ } catch (error) {
+ // 鐢ㄦ埛鍙栨秷鍒犻櫎
+ }
+}
+
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection
+}
+
+const handleSelectChange = (row, prop, value) => {
+ console.log('閫夋嫨鍙樺寲:', row, prop, value)
+ // 鍙互鍦ㄨ繖閲屽鐞嗘暟鎹洿鏂伴�昏緫
+}
+
+const handleInputChange = (row, prop, value) => {
+ console.log('杈撳叆鍙樺寲:', row, prop, value)
+ // 鍙互鍦ㄨ繖閲屽鐞嗘暟鎹洿鏂伴�昏緫
+}
+
+const handleSizeChange = (size) => {
+ pagination.size = size
+ // 閲嶆柊鍔犺浇鏁版嵁
+}
+
+const handleCurrentChange = (current) => {
+ pagination.current = current
+ // 閲嶆柊鍔犺浇鏁版嵁
+}
+
+const handleSubmit = async () => {
+ try {
+ await formRef.value.validate()
+
+ if (editIndex.value === -1) {
+ // 鏂板
+ const newRow = {
+ id: Date.now(),
+ ...form
+ }
+ tableData.value.push(newRow)
+ ElMessage.success('鏂板鎴愬姛')
+ } else {
+ // 缂栬緫
+ Object.assign(tableData.value[editIndex.value], form)
+ ElMessage.success('缂栬緫鎴愬姛')
+ }
+
+ dialogVisible.value = false
+ } catch (error) {
+ console.error('琛ㄥ崟楠岃瘉澶辫触:', error)
+ }
+}
+
+const resetForm = () => {
+ Object.assign(form, {
+ department: '',
+ name: '',
+ employeeId: '',
+ status: '',
+ level: '',
+ position: ''
+ })
+ formRef.value?.resetFields()
+}
+
+// 缁勪欢鎸傝浇鏃跺垵濮嬪寲鏁版嵁
+onMounted(() => {
+ pagination.total = tableData.value.length
+})
+</script>
+
+<style scoped>
+.app-container {
+ padding: 20px;
+}
+
+.search-form {
+ margin-bottom: 20px;
+ padding: 20px;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+}
+
+.table-container {
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 20px;
+}
+
+.dialog-footer {
+ text-align: right;
+}
+</style>
--
Gitblit v1.9.3