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/intelligentInspectionManagement/index.vue | 578 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 575 insertions(+), 3 deletions(-)
diff --git a/src/views/environmentAccess/intelligentInspectionManagement/index.vue b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
index 40dc0c9..47fe867 100644
--- a/src/views/environmentAccess/intelligentInspectionManagement/index.vue
+++ b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
@@ -1,9 +1,581 @@
<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="0"></el-option>
+ <el-option label="鎵ц涓�" value="1"></el-option>
+ <el-option label="宸插畬鎴�" value="2"></el-option>
+ <el-option label="宸插彇娑�" value="3"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="宸℃绫诲瀷">
+ <el-select
+ v-model="filters.type"
+ style="width: 240px"
+ placeholder="璇烽�夋嫨宸℃绫诲瀷"
+ clearable
+ @change="getTableData"
+ >
+ <el-option label="瀹氭湡宸℃" value="0"></el-option>
+ <el-option label="涓存椂宸℃" value="1"></el-option>
+ <el-option label="鏁呴殰宸℃" value="2"></el-option>
+ </el-select>
+ </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-select v-model="formData.type" placeholder="璇烽�夋嫨宸℃绫诲瀷">
+ <el-option label="瀹氭湡宸℃" value="0"></el-option>
+ <el-option label="涓存椂宸℃" value="1"></el-option>
+ <el-option label="鏁呴殰宸℃" value="2"></el-option>
+ </el-select>
+ </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.inspector"
+ placeholder="璇疯緭鍏ュ贰妫�浜哄憳"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="璁″垝寮�濮嬫椂闂�" required>
+ <el-date-picker
+ v-model="formData.planStartTime"
+ type="datetime"
+ placeholder="璇烽�夋嫨璁″垝寮�濮嬫椂闂�"
+ style="width: 100%"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item label="璁″垝缁撴潫鏃堕棿" required>
+ <el-date-picker
+ v-model="formData.planEndTime"
+ type="datetime"
+ placeholder="璇烽�夋嫨璁″垝缁撴潫鏃堕棿"
+ style="width: 100%"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item label="宸℃鍐呭">
+ <el-input
+ v-model="formData.content"
+ 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: "涓滈棬鍖哄煙鏃ュ父宸℃",
+ type: "0",
+ status: "2",
+ planStartTime: "2025-12-30 08:00:00",
+ planEndTime: "2025-12-30 09:00:00",
+ actualStartTime: "2025-12-30 08:05:00",
+ actualEndTime: "2025-12-30 08:55:00",
+ inspector: "寮犱笁",
+ area: "涓滈棬鍖哄煙",
+ content: "妫�鏌ラ棬绂佽澶囪繍琛岀姸鎬併�佺幆澧冪洃娴嬭澶囨暟鎹�",
+ },
+ {
+ id: 2,
+ name: "瑗块棬鍖哄煙涓存椂宸℃",
+ type: "1",
+ status: "2",
+ planStartTime: "2025-12-30 10:00:00",
+ planEndTime: "2025-12-30 11:00:00",
+ actualStartTime: "2025-12-30 10:00:00",
+ actualEndTime: "2025-12-30 10:45:00",
+ inspector: "鏉庡洓",
+ area: "瑗块棬鍖哄煙",
+ content: "妫�鏌ュ紓甯告姤璀﹁澶�",
+ },
+ {
+ id: 3,
+ name: "鍗楅棬闂ㄧ鏁呴殰宸℃",
+ type: "2",
+ status: "1",
+ planStartTime: "2025-12-30 13:00:00",
+ planEndTime: "2025-12-30 14:00:00",
+ actualStartTime: "2025-12-30 13:10:00",
+ actualEndTime: "",
+ inspector: "鐜嬩簲",
+ area: "鍗楅棬鍖哄煙",
+ content: "淇闂ㄧ鏁呴殰",
+ },
+ {
+ id: 4,
+ name: "涓帶瀹ゅ畾鏈熷贰妫�",
+ type: "0",
+ status: "0",
+ planStartTime: "2025-12-31 09:00:00",
+ planEndTime: "2025-12-31 10:00:00",
+ actualStartTime: "",
+ actualEndTime: "",
+ inspector: "璧靛叚",
+ area: "涓帶鍖哄煙",
+ content: "妫�鏌ョ洃鎺ц澶囥�佹湇鍔″櫒杩愯鐘舵��",
+ },
+ {
+ id: 5,
+ name: "鍖楅棬鍖哄煙鏃ュ父宸℃",
+ type: "0",
+ status: "2",
+ planStartTime: "2025-12-30 15:00:00",
+ planEndTime: "2025-12-30 16:00:00",
+ actualStartTime: "2025-12-30 15:00:00",
+ actualEndTime: "2025-12-30 15:50:00",
+ inspector: "寮犱笁",
+ area: "鍖楅棬鍖哄煙",
+ content: "妫�鏌ヨ溅杈嗚瘑鍒澶囥�侀亾闂歌繍琛岀姸鎬�",
+ },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+ name: "",
+ status: "",
+ type: "",
+});
+
+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: "",
+ type: "0",
+ status: "0",
+ planStartTime: "",
+ planEndTime: "",
+ actualStartTime: "",
+ actualEndTime: "",
+ inspector: "",
+ area: "",
+ content: "",
+});
+
+// 鐘舵�佹槧灏�
+const statusMap = {
+ '0': '<el-tag type="warning">寰呮墽琛�</el-tag>',
+ '1': '<el-tag type="primary">鎵ц涓�</el-tag>',
+ '2': '<el-tag type="success">宸插畬鎴�</el-tag>',
+ '3': '<el-tag type="danger">宸插彇娑�</el-tag>',
+};
+
+// 绫诲瀷鏄犲皠
+const typeMap = {
+ 0: "瀹氭湡宸℃",
+ 1: "涓存椂宸℃",
+ 2: "鏁呴殰宸℃",
+};
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+ {
+ label: "宸℃鍚嶇О",
+ align: "center",
+ prop: "name",
+ },
+ {
+ label: "宸℃绫诲瀷",
+ align: "center",
+ prop: "type",
+ formatter: (row) => {
+ return typeMap[row.type];
+ },
+ },
+ {
+ label: "宸℃鐘舵��",
+ align: "center",
+ prop: "status",
+ formatter: (row) => {
+ return statusMap[row.status];
+ },
+ },
+ {
+ label: "璁″垝寮�濮嬫椂闂�",
+ align: "center",
+ prop: "planStartTime",
+ },
+ {
+ label: "璁″垝缁撴潫鏃堕棿",
+ align: "center",
+ prop: "planEndTime",
+ },
+ {
+ label: "瀹為檯寮�濮嬫椂闂�",
+ align: "center",
+ prop: "actualStartTime",
+ formatter: (row) => {
+ return row.actualStartTime || "-";
+ },
+ },
+ {
+ label: "瀹為檯缁撴潫鏃堕棿",
+ align: "center",
+ prop: "actualEndTime",
+ formatter: (row) => {
+ return row.actualEndTime || "-";
+ },
+ },
+ {
+ label: "宸℃浜哄憳",
+ align: "center",
+ prop: "inspector",
+ },
+ {
+ label: "宸℃鍖哄煙",
+ align: "center",
+ prop: "area",
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 180,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ edit(row);
+ },
+ },
+ {
+ name: "寮�濮嬫墽琛�",
+ type: "text",
+ clickFun: (row) => {
+ startInspection(row);
+ },
+ visible: (row) => {
+ return row.status === "0";
+ },
+ },
+ {
+ name: "瀹屾垚宸℃",
+ type: "text",
+ clickFun: (row) => {
+ completeInspection(row);
+ },
+ visible: (row) => {
+ return row.status === "1";
+ },
+ },
+ {
+ name: "鍙栨秷宸℃",
+ type: "text",
+ clickFun: (row) => {
+ cancelInspection(row);
+ },
+ visible: (row) => {
+ return ["0", "1"].includes(row.status);
+ },
+ },
+ {
+ 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 typeMatch = !filters.type || item.type === filters.type;
+ return nameMatch && statusMatch && typeMatch;
+ });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+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.type = "";
+ 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.type = "0";
+ formData.status = "0";
+ formData.planStartTime = "";
+ formData.planEndTime = "";
+ formData.actualStartTime = "";
+ formData.actualEndTime = "";
+ formData.inspector = "";
+ formData.area = "";
+ formData.content = "";
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const edit = (row) => {
+ dialogTitle.value = "缂栬緫宸℃";
+ formData.id = row.id;
+ formData.name = row.name;
+ formData.type = row.type;
+ formData.status = row.status;
+ formData.planStartTime = row.planStartTime;
+ formData.planEndTime = row.planEndTime;
+ formData.actualStartTime = row.actualStartTime;
+ formData.actualEndTime = row.actualEndTime;
+ formData.inspector = row.inspector;
+ formData.area = row.area;
+ formData.content = row.content;
+ dialogVisible.value = true;
+};
+
+// 淇濆瓨鏁版嵁
+const saveData = () => {
+ if (
+ !formData.name ||
+ !formData.planStartTime ||
+ !formData.planEndTime ||
+ !formData.inspector ||
+ !formData.area
+ ) {
+ ElMessage.warning("璇峰~鍐欏繀濉瓧娈�");
+ return;
+ }
+
+ if (formData.id) {
+ // 缂栬緫
+ const index = mockData.findIndex((item) => item.id === formData.id);
+ if (index !== -1) {
+ mockData[index] = {
+ ...mockData[index],
+ ...formData,
+ };
+ ElMessage.success("缂栬緫鎴愬姛");
+ }
+ } else {
+ // 鏂板
+ const newId = Math.max(...mockData.map((item) => item.id), 0) + 1;
+ mockData.unshift({
+ ...formData,
+ id: newId,
+ });
+ ElMessage.success("鏂板鎴愬姛");
+ }
+ dialogVisible.value = false;
+ getTableData();
+};
+
+// 寮�濮嬪贰妫�
+const startInspection = (row) => {
+ const index = mockData.findIndex((item) => item.id === row.id);
+ if (index !== -1) {
+ mockData[index].status = "1";
+ mockData[index].actualStartTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+ ElMessage.success("宸℃宸插紑濮�");
+ getTableData();
+ }
+};
+
+// 瀹屾垚宸℃
+const completeInspection = (row) => {
+ const index = mockData.findIndex((item) => item.id === row.id);
+ if (index !== -1) {
+ mockData[index].status = "2";
+ mockData[index].actualEndTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+ ElMessage.success("宸℃宸插畬鎴�");
+ getTableData();
+ }
+};
+
+// 鍙栨秷宸℃
+const cancelInspection = (row) => {
+ ElMessageBox.confirm("纭畾瑕佸彇娑堣宸℃鍚�?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ const index = mockData.findIndex((item) => item.id === row.id);
+ if (index !== -1) {
+ mockData[index].status = "3";
+ ElMessage.success("宸℃宸插彇娑�");
+ getTableData();
+ }
+ })
+ .catch(() => {});
+};
+
+// 鍒犻櫎
+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