From 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 08 一月 2026 14:57:56 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_天津军泰伟业' into dev_天津军泰伟业
---
src/views/example/DynamicTableExample.vue | 574 +++++++++++++++++++++++++++-----------------------------
1 files changed, 279 insertions(+), 295 deletions(-)
diff --git a/src/views/example/DynamicTableExample.vue b/src/views/example/DynamicTableExample.vue
index 038cd43..c79b461 100644
--- a/src/views/example/DynamicTableExample.vue
+++ b/src/views/example/DynamicTableExample.vue
@@ -1,101 +1,91 @@
<template>
<div class="app-container">
<div class="search-form">
- <el-form :inline="true" :model="searchForm">
+ <el-form :inline="true"
+ :model="searchForm">
<el-form-item label="閮ㄩ棬">
- <el-input
- v-model="searchForm.department"
- placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
- clearable
- style="width: 200px"
- />
+ <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-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 type="primary"
+ @click="handleSearch">鎼滅储</el-button>
<el-button @click="handleReset">閲嶇疆</el-button>
- <el-button type="success" @click="handleAdd">鏂板</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"
- />
+ <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-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 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 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-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 type="primary"
+ @click="handleSubmit">纭畾</el-button>
<el-button @click="dialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="handleSubmit">纭畾</el-button>
</div>
</template>
</el-dialog>
@@ -103,252 +93,246 @@
</template>
<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import DynamicTable from '@/components/DynamicTable/index.vue'
+ 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 loading = ref(false);
+ const dialogVisible = ref(false);
+ const dialogTitle = ref("");
+ const editIndex = ref(-1);
+ const selectedRows = ref([]);
-// 鎼滅储琛ㄥ崟
-const searchForm = reactive({
- department: '',
- name: ''
-})
+ // 鎼滅储琛ㄥ崟
+ 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 [
+ // 琛ㄦ牸鏁版嵁
+ const tableData = ref([
{
- label: '鐘舵��',
- value: 'status',
- options: [
- { label: '鍚敤', value: '1' },
- { label: '绂佺敤', value: '0' }
- ]
+ id: 1,
+ department: "鎶�鏈儴",
+ name: "寮犱笁",
+ employeeId: "EMP001",
+ status: "1",
+ level: "2",
+ position: "1",
},
{
- label: '绾у埆',
- value: 'level',
- options: [
- { label: '鍒濈骇', value: '1' },
- { label: '涓骇', value: '2' },
- { label: '楂樼骇', value: '3' }
- ]
+ id: 2,
+ department: "浜轰簨閮�",
+ name: "鏉庡洓",
+ employeeId: "EMP002",
+ status: "0",
+ level: "1",
+ position: "2",
},
{
- label: '鑱屼綅',
- value: 'position',
- options: [
- { label: '鍛樺伐', value: '1' },
- { label: '涓荤', value: '2' },
- { label: '缁忕悊', value: '3' }
- ]
+ 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 dynamicTableRef = ref(null)
-const formRef = ref(null)
+ const handleSelectionChange = selection => {
+ selectedRows.value = selection;
+ };
-// 浜嬩欢澶勭悊鍑芥暟
-const handleSearch = () => {
- // 瀹炵幇鎼滅储閫昏緫
- console.log('鎼滅储鏉′欢:', searchForm)
- ElMessage.success('鎼滅储鍔熻兘寰呭疄鐜�')
-}
+ const handleSelectChange = (row, prop, value) => {
+ console.log("閫夋嫨鍙樺寲:", row, prop, value);
+ // 鍙互鍦ㄨ繖閲屽鐞嗘暟鎹洿鏂伴�昏緫
+ };
-const handleReset = () => {
- searchForm.department = ''
- searchForm.name = ''
-}
+ const handleInputChange = (row, prop, value) => {
+ console.log("杈撳叆鍙樺寲:", row, prop, value);
+ // 鍙互鍦ㄨ繖閲屽鐞嗘暟鎹洿鏂伴�昏緫
+ };
-const handleAdd = () => {
- dialogTitle.value = '鏂板鍛樺伐'
- editIndex.value = -1
- resetForm()
- dialogVisible.value = true
-}
+ const handleSizeChange = size => {
+ pagination.size = size;
+ // 閲嶆柊鍔犺浇鏁版嵁
+ };
-const handleEdit = (row, index) => {
- dialogTitle.value = '缂栬緫鍛樺伐'
- editIndex.value = index
- Object.assign(form, row)
- dialogVisible.value = true
-}
+ const handleCurrentChange = current => {
+ pagination.current = current;
+ // 閲嶆柊鍔犺浇鏁版嵁
+ };
-const handleDelete = async (row, index) => {
- try {
- await ElMessageBox.confirm('纭畾瑕佸垹闄よ繖鏉¤褰曞悧锛�', '鎻愮ず', {
- type: 'warning'
- })
-
- tableData.value.splice(index, 1)
- ElMessage.success('鍒犻櫎鎴愬姛')
- } catch (error) {
- // 鐢ㄦ埛鍙栨秷鍒犻櫎
- }
-}
+ const handleSubmit = async () => {
+ try {
+ await formRef.value.validate();
-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
+ 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("缂栬緫鎴愬姛");
}
- tableData.value.push(newRow)
- ElMessage.success('鏂板鎴愬姛')
- } else {
- // 缂栬緫
- Object.assign(tableData.value[editIndex.value], form)
- ElMessage.success('缂栬緫鎴愬姛')
+
+ dialogVisible.value = false;
+ } catch (error) {
+ console.error("琛ㄥ崟楠岃瘉澶辫触:", error);
}
-
- dialogVisible.value = false
- } catch (error) {
- console.error('琛ㄥ崟楠岃瘉澶辫触:', error)
- }
-}
+ };
-const resetForm = () => {
- Object.assign(form, {
- department: '',
- name: '',
- employeeId: '',
- status: '',
- level: '',
- position: ''
- })
- formRef.value?.resetFields()
-}
+ const resetForm = () => {
+ Object.assign(form, {
+ department: "",
+ name: "",
+ employeeId: "",
+ status: "",
+ level: "",
+ position: "",
+ });
+ formRef.value?.resetFields();
+ };
-// 缁勪欢鎸傝浇鏃跺垵濮嬪寲鏁版嵁
-onMounted(() => {
- pagination.total = tableData.value.length
-})
+ // 缁勪欢鎸傝浇鏃跺垵濮嬪寲鏁版嵁
+ onMounted(() => {
+ pagination.total = tableData.value.length;
+ });
</script>
<style scoped>
-.app-container {
- padding: 20px;
-}
+ .app-container {
+ padding: 20px;
+ }
-.search-form {
- margin-bottom: 20px;
- padding: 20px;
- background-color: #f5f5f5;
- border-radius: 4px;
-}
+ .search-form {
+ margin-bottom: 20px;
+ padding: 20px;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ }
-.table-container {
- background-color: #fff;
- border-radius: 4px;
- padding: 20px;
-}
+ .table-container {
+ background-color: #fff;
+ border-radius: 4px;
+ padding: 20px;
+ }
-.dialog-footer {
- text-align: right;
-}
+ .dialog-footer {
+ text-align: right;
+ }
</style>
--
Gitblit v1.9.3