From 6d2f26e4c867c1cfba4ebe86d4162edb01da80a0 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期三, 31 十二月 2025 14:32:07 +0800
Subject: [PATCH] 代码调整8
---
src/views/environmentAccess/accessManagement/index.vue | 344 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 341 insertions(+), 3 deletions(-)
diff --git a/src/views/environmentAccess/accessManagement/index.vue b/src/views/environmentAccess/accessManagement/index.vue
index 40dc0c9..587dc78 100644
--- a/src/views/environmentAccess/accessManagement/index.vue
+++ b/src/views/environmentAccess/accessManagement/index.vue
@@ -1,9 +1,347 @@
<template>
- <div></div>
+ <div class="app-container">
+ <el-form :model="filters" :inline="true">
+ <el-form-item label="闂ㄧ鍚嶇О">
+ <el-input
+ v-model="filters.name"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ラ棬绂佸悕绉�"
+ clearable
+ :prefix-icon="Search"
+ @change="getTableData"
+ />
+ </el-form-item>
+ <el-form-item label="闂ㄧ鐘舵��">
+ <el-select
+ v-model="filters.status"
+ style="width: 240px"
+ placeholder="璇烽�夋嫨闂ㄧ鐘舵��"
+ clearable
+ @change="getTableData"
+ >
+ <el-option label="姝ｅ父" value="1"></el-option>
+ <el-option label="寮傚父" value="0"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍖哄煙">
+ <el-input
+ v-model="filters.area"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ュ尯鍩�"
+ clearable
+ :prefix-icon="Search"
+ @change="getTableData"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+ <el-button @click="resetFilters">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <div class="table_list">
+ <div class="actions">
+ <div></div>
+ <div>
+ <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
+ <el-button type="danger" icon="Delete" :disabled="multipleList.length <= 0" @click="batchDelete">鎵归噺鍒犻櫎</el-button>
+ </div>
+ </div>
+ <PIMTable
+ rowKey="id"
+ isSelection
+ :column="columns"
+ :tableData="dataList"
+ :page="{
+ current: pagination.currentPage,
+ size: pagination.pageSize,
+ total: pagination.total,
+ }"
+ @selection-change="handleSelectionChange"
+ @pagination="changePage"
+ >
+ </PIMTable>
+ </div>
+ <!-- 鏂板缂栬緫寮圭獥 -->
+ <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
+ <el-form :model="formData" label-width="100px">
+ <el-form-item label="闂ㄧ鍚嶇О" required>
+ <el-input v-model="formData.name" placeholder="璇疯緭鍏ラ棬绂佸悕绉�"></el-input>
+ </el-form-item>
+ <el-form-item label="鍖哄煙" required>
+ <el-input v-model="formData.area" placeholder="璇疯緭鍏ュ尯鍩�"></el-input>
+ </el-form-item>
+ <el-form-item label="浣嶇疆" required>
+ <el-input v-model="formData.location" placeholder="璇疯緭鍏ュ叿浣撲綅缃�"></el-input>
+ </el-form-item>
+ <el-form-item label="鐘舵��" required>
+ <el-select v-model="formData.status" placeholder="璇烽�夋嫨鐘舵��">
+ <el-option label="姝ｅ父" value="1"></el-option>
+ <el-option label="寮傚父" value="0"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鎻忚堪">
+ <el-input v-model="formData.description" type="textarea" rows="3" placeholder="璇疯緭鍏ユ弿杩颁俊鎭�"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="saveData">纭畾</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</template>
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { Search, Plus, Delete } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import dayjs from 'dayjs';
+
+// 瀹氫箟鍋囨暟鎹�
+const mockData = [
+ { id: 1, name: '涓滈棬闂ㄧ', area: '鐢熶骇鍖�', location: '涓滈棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 08:30:00', description: '涓昏鐢ㄤ簬鍛樺伐涓婁笅鐝�氳' },
+ { id: 2, name: '瑗块棬闂ㄧ', area: '浠撳偍鍖�', location: '瑗块棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 09:15:00', description: '涓昏鐢ㄤ簬鐗╂祦杞﹁締閫氳' },
+ { id: 3, name: '鍗楅棬闂ㄧ', area: '鍔炲叕鍖�', location: '鍗楅棬鍏ュ彛', status: '0', lastUpdate: '2025-12-30 10:20:00', description: '涓昏鐢ㄤ簬璁垮閫氳锛屽綋鍓嶆晠闅�' },
+ { id: 4, name: '鍖楅棬闂ㄧ', area: '鐢熶骇鍖�', location: '鍖楅棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 11:45:00', description: '涓昏鐢ㄤ簬鍘熸潗鏂欒繍杈撹溅杈嗛�氳' },
+ { id: 5, name: '涓帶瀹ら棬绂�', area: '涓帶鍖�', location: '涓帶瀹ら棬鍙�', status: '1', lastUpdate: '2025-12-30 13:20:00', description: '浠呴檺鎺堟潈浜哄憳杩涘叆' },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+ name: '',
+ status: '',
+ area: ''
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+ currentPage: 1,
+ pageSize: 10,
+ total: 0
+});
+
+const multipleList = ref([]);
+const dialogVisible = ref(false);
+const dialogTitle = ref('鏂板闂ㄧ');
+const formData = reactive({
+ id: '',
+ name: '',
+ area: '',
+ location: '',
+ status: '1',
+ description: ''
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+ {
+ label: '闂ㄧ鍚嶇О',
+ align: 'center',
+ prop: 'name',
+ },
+ {
+ label: '鍖哄煙',
+ align: 'center',
+ prop: 'area',
+ },
+ {
+ label: '浣嶇疆',
+ align: 'center',
+ prop: 'location',
+ },
+ {
+ label: '鐘舵��',
+ align: 'center',
+ prop: 'status',
+ formatter: (row) => {
+ return row.status === '1' ? '<el-tag type="success">姝ｅ父</el-tag>' : '<el-tag type="danger">寮傚父</el-tag>';
+ }
+ },
+ {
+ label: '鏈�鍚庢洿鏂�',
+ align: 'center',
+ prop: 'lastUpdate',
+ },
+ {
+ label: '鎻忚堪',
+ align: 'center',
+ prop: 'description',
+ },
+ {
+ dataType: 'action',
+ label: '鎿嶄綔',
+ align: 'center',
+ fixed: 'right',
+ width: 140,
+ operation: [
+ {
+ name: '缂栬緫',
+ type: 'text',
+ clickFun: (row) => {
+ edit(row);
+ },
+ },
+ {
+ name: '鍒犻櫎',
+ type: 'text',
+ clickFun: (row) => {
+ deleteRow(row.id);
+ },
+ },
+ ],
+ },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+ return mockData.filter(item => {
+ const nameMatch = !filters.name || item.name.includes(filters.name);
+ const statusMatch = !filters.status || item.status === filters.status;
+ const areaMatch = !filters.area || item.area.includes(filters.area);
+ return nameMatch && statusMatch && areaMatch;
+ });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+ pagination.total = filteredData.value.length;
+ const start = (pagination.currentPage - 1) * pagination.pageSize;
+ const end = start + pagination.pageSize;
+ dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+ filters.name = '';
+ filters.status = '';
+ filters.area = '';
+ pagination.currentPage = 1;
+ getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+ pagination.currentPage = page;
+ pagination.pageSize = limit;
+ getTableData();
+};
+
+// 澶氶�夊鐞�
+const handleSelectionChange = (selectionList) => {
+ multipleList.value = selectionList;
+};
+
+// 鏂板
+const add = () => {
+ dialogTitle.value = '鏂板闂ㄧ';
+ formData.id = '';
+ formData.name = '';
+ formData.area = '';
+ formData.location = '';
+ formData.status = '1';
+ formData.description = '';
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const edit = (row) => {
+ dialogTitle.value = '缂栬緫闂ㄧ';
+ formData.id = row.id;
+ formData.name = row.name;
+ formData.area = row.area;
+ formData.location = row.location;
+ formData.status = row.status;
+ formData.description = row.description;
+ dialogVisible.value = true;
+};
+
+// 淇濆瓨鏁版嵁
+const saveData = () => {
+ if (!formData.name || !formData.area || !formData.location) {
+ ElMessage.warning('璇峰～鍐欏繀濉瓧娈�');
+ return;
+ }
+
+ const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ if (formData.id) {
+ // 缂栬緫
+ const index = mockData.findIndex(item => item.id === formData.id);
+ if (index !== -1) {
+ mockData[index] = {
+ ...formData,
+ lastUpdate: currentTime
+ };
+ ElMessage.success('缂栬緫鎴愬姛');
+ }
+ } else {
+ // 鏂板
+ const newId = Math.max(...mockData.map(item => item.id), 0) + 1;
+ mockData.unshift({
+ ...formData,
+ id: newId,
+ lastUpdate: currentTime
+ });
+ ElMessage.success('鏂板鎴愬姛');
+ }
+ dialogVisible.value = false;
+ getTableData();
+};
+
+// 鍒犻櫎
+const deleteRow = (id) => {
+ ElMessageBox.confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ラ棬绂佽褰�, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(() => {
+ const index = mockData.findIndex(item => item.id === id);
+ if (index !== -1) {
+ mockData.splice(index, 1);
+ ElMessage.success('鍒犻櫎鎴愬姛');
+ getTableData();
+ }
+ }).catch(() => {});
+};
+
+// 鎵归噺鍒犻櫎
+const batchDelete = () => {
+ if (multipleList.value.length === 0) {
+ ElMessage.warning('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁');
+ return;
+ }
+
+ ElMessageBox.confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夐棬绂佽褰�, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(() => {
+ const ids = multipleList.value.map(item => item.id);
+ mockData.forEach((item, index) => {
+ if (ids.includes(item.id)) {
+ mockData.splice(index, 1);
+ }
+ });
+ ElMessage.success('鍒犻櫎鎴愬姛');
+ getTableData();
+ multipleList.value = [];
+ }).catch(() => {});
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+ getTableData();
+});
</script>
-<style>
+<style lang="scss" scoped>
+.table_list {
+ margin-top: unset;
+}
+.actions {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
</style>
--
Gitblit v1.9.3