From 26e0f4997558b60eda9dcb8979b777b47b31675e Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期六, 19 七月 2025 17:14:43 +0800
Subject: [PATCH] 优化巡检管理显示及数据处理
---
src/views/inspectionManagement/index.vue | 279 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 188 insertions(+), 91 deletions(-)
diff --git a/src/views/inspectionManagement/index.vue b/src/views/inspectionManagement/index.vue
index 4b42e60..7e5edc0 100644
--- a/src/views/inspectionManagement/index.vue
+++ b/src/views/inspectionManagement/index.vue
@@ -56,7 +56,26 @@
@edit="handleAdd"
@viewFile="viewFile"
v-if="tabName === 'task'"
- ></ETable>
+ >
+ <template #inspector="{ row }">
+ <div class="person-tags">
+ <!-- 璋冭瘯淇℃伅锛屼笂绾挎椂鍒犻櫎 -->
+ <!-- {{ console.log('inspector data:', row.inspector) }} -->
+ <template v-if="row.inspector && row.inspector.length > 0">
+ <el-tag
+ v-for="(person, index) in row.inspector"
+ :key="index"
+ size="small"
+ type="primary"
+ class="person-tag"
+ >
+ {{ person }}
+ </el-tag>
+ </template>
+ <span v-else class="no-data">--</span>
+ </div>
+ </template>
+ </ETable>
<el-table ref="table" :data="tableData" height="480" v-loading="tableLoading" border v-else style="width: 100%;height: calc(100vh - 25em)">
<el-table-column label="搴忓彿" type="index" width="60" align="center" />
<el-table-column prop="deviceName" label="璁惧鍚嶇О" :show-overflow-tooltip="true">
@@ -80,10 +99,10 @@
</div>
<pagination
v-if="total>0"
- :page-num="pageNum"
- :page-size="pageSize"
+ :page="pageNum"
+ :limit="pageSize"
:total="total"
- @pagination="handleQuery"
+ @pagination="handlePagination"
:layout="'total, prev, pager, next, jumper'"
/>
</div>
@@ -96,47 +115,58 @@
</template>
<script setup>
-import {Download, Delete, Plus} from "@element-plus/icons-vue";
-import {onMounted, ref} from "vue";
-const { proxy } = getCurrentInstance()
+import { Delete, Plus } from "@element-plus/icons-vue";
+import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
+
+// 缁勪欢寮曞叆
import Pagination from "@/components/Pagination/index.vue";
import ETable from "@/components/Table/ETable.vue";
import FormDia from "@/views/inspectionManagement/components/formDia.vue";
import QrCodeDia from "@/views/inspectionManagement/components/qrCodeDia.vue";
+import ViewFiles from "@/views/inspectionManagement/components/viewFiles.vue";
+import ViewQrCodeFiles from "@/views/inspectionManagement/components/viewQrCodeFiles.vue";
+
+// 鎺ュ彛寮曞叆
import {
- delInspectionTask,
delTimingTask,
inspectionTaskList,
timingTaskList
} from "@/api/inspectionManagement/index.js";
-import ViewFiles from "@/views/inspectionManagement/components/viewFiles.vue";
-import {delQrCode, qrCodeList, qrCodeScanRecordList} from "@/api/inspectionUpload/index.js";
-import ViewQrCodeFiles from "@/views/inspectionManagement/components/viewQrCodeFiles.vue";
+import {
+ delQrCode,
+ qrCodeList,
+ qrCodeScanRecordList
+} from "@/api/inspectionUpload/index.js";
-const formDia = ref()
-const qrCodeDia = ref()
-const viewFiles = ref()
-const viewQrCodeFiles = ref()
+// 鍏ㄥ眬鍙橀噺
+const { proxy } = getCurrentInstance();
+const formDia = ref();
+const qrCodeDia = ref();
+const viewFiles = ref();
+const viewQrCodeFiles = ref();
+
// 鏌ヨ鍙傛暟
const queryParams = reactive({
searchAll: "",
-})
-// 褰撳墠鏍囩
+});
+
+// 鏍囩椤甸厤缃�
const activeTab = ref("task");
const tabName = ref("task");
-// 鏍囩椤垫暟鎹�
const tabs = reactive([
{ name: "task", label: "鐢熶骇宸℃" },
{ name: "qrCodeScanRecord", label: "鐜板満宸℃璁板綍" },
]);
-// 鍗曢�夋
+
+// 鍗曢�夋閰嶇疆
const activeRadio = ref("taskManage");
const radios = reactive([
{ name: "taskManage", label: "瀹氭椂浠诲姟绠＄悊" },
{ name: "task", label: "瀹氭椂浠诲姟璁板綍" },
{ name: "qrCode", label: "浜岀淮鐮佺鐞�" },
]);
-// 琛ㄦ牸
+
+// 琛ㄦ牸鏁版嵁
const selectedRows = ref([]);
const tableData = ref([]);
const operationsArr = ref([]);
@@ -145,27 +175,49 @@
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
+
+// 鍒楅厤缃�
const columns = ref([
{ prop: "taskName", label: "宸℃浠诲姟鍚嶇О", minWidth: 160 },
{ prop: "inspectionLocation", label: "鍦扮偣", minWidth: 120 },
{ prop: "remarks", label: "澶囨敞", minWidth: 150 },
- { prop: "inspector", label: "鎵ц宸℃浜�", minWidth: 150 },
- { prop: "frequencyType", label: "棰戞", minWidth: 150,
+ { prop: "inspector", label: "鎵ц宸℃浜�", minWidth: 150, slot: "inspector" },
+ {
+ prop: "frequencyType",
+ label: "棰戞",
+ minWidth: 150,
+ formatter: (_, __, val) => ({
+ DAILY: "姣忔棩",
+ WEEKLY: "姣忓懆",
+ MONTHLY: "姣忔湀",
+ QUARTERLY: "瀛ｅ害"
+ }[val] || "")
+ },
+ {
+ prop: "frequencyDetail",
+ label: "寮�濮嬫棩鏈熶笌鏃堕棿",
+ minWidth: 150,
formatter: (row, column, cellValue) => {
- if (cellValue === 'DAILY') {
- return '姣忔棩';
- } else if (cellValue === 'MONTHLY') {
- return '姣忔湀';
- } else if (cellValue === 'WEEKLY') {
- return '姣忓懆';
- } else {
- return '瀛ｅ害'
+ // 鍏堝垽鏂槸鍚︽槸瀛楃涓�
+ if (typeof cellValue !== 'string') return '';
+ let val = cellValue;
+ const replacements = {
+ MON: '鍛ㄤ竴',
+ TUE: '鍛ㄤ簩',
+ WED: '鍛ㄤ笁',
+ THU: '鍛ㄥ洓',
+ FRI: '鍛ㄤ簲',
+ SAT: '鍛ㄥ叚',
+ SUN: '鍛ㄦ棩'
+ };
+ // 浣跨敤姝ｅ垯涓�娆℃�ф浛鎹㈡墍鏈夊尮閰嶉」
+ return val.replace(/MON|TUE|WED|THU|FRI|SAT|SUN/g, match => replacements[match]);
}
- }},
- { prop: "frequencyDetail", label: "寮�濮嬫棩鏈熶笌鏃堕棿", minWidth: 150 },
+ },
{ prop: "registrant", label: "鐧昏浜�", minWidth: 100 },
{ prop: "createTime", label: "鐧昏鏃ユ湡", minWidth: 100 },
]);
+
const columns1 = ref([
{ prop: "deviceName", label: "璁惧鍚嶇О", minWidth: 160 },
{ prop: "location", label: "鎵�鍦ㄤ綅缃弿杩�", minWidth: 120 },
@@ -176,119 +228,164 @@
onMounted(() => {
radioChange('taskManage');
});
-// 鏍囩椤电偣鍑�
+
+// 鏍囩椤电偣鍑讳簨浠�
const handleTabClick = (tab) => {
tabName.value = tab.props.name;
tableData.value = [];
getList();
};
+
+// 鍗曢�夊彉鍖�
const radioChange = (value) => {
if (value === "taskManage") {
tableColumns.value = columns.value;
- operationsArr.value = ['edit']
+ operationsArr.value = ['edit'];
} else if (value === "task") {
tableColumns.value = columns.value;
- operationsArr.value = ['viewFile']
+ operationsArr.value = ['viewFile'];
} else {
tableColumns.value = columns1.value;
- operationsArr.value = ['edit']
+ operationsArr.value = ['edit'];
}
+ pageNum.value = 1;
+ pageSize.value = 10;
getList();
-}
-// 鐐瑰嚮鏌ヨ
+};
+
+// 鏌ヨ鎿嶄綔
const handleQuery = () => {
- pageNum.value = 1
- pageSize.value = 10
- getList()
-}
+ pageNum.value = 1;
+ pageSize.value = 10;
+ getList();
+};
+// 鍒嗛〉澶勭悊
+const handlePagination = (val) => {
+ pageNum.value = val.page;
+ pageSize.value = val.limit;
+ getList();
+};
+// 鑾峰彇鍒楄〃鏁版嵁
const getList = () => {
tableLoading.value = true;
+
+ const params = { ...queryParams, size: pageSize.value, current: pageNum.value };
+
+ let apiCall;
if (tabName.value === 'task') {
- if (activeRadio.value === "task") {
- inspectionTaskList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
- } else if (activeRadio.value === "qrCode") {
- qrCodeList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
- } else {
- timingTaskList({...queryParams, size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
+ switch (activeRadio.value) {
+ case "task":
+ apiCall = inspectionTaskList(params);
+ break;
+ case "qrCode":
+ apiCall = qrCodeList(params);
+ break;
+ default:
+ apiCall = timingTaskList(params);
}
} else {
- qrCodeScanRecordList({size: pageSize.value, current: pageNum.value}).then(res => {
- tableLoading.value = false;
- tableData.value = res.data.records;
- total.value = res.data.total;
- })
+ apiCall = qrCodeScanRecordList(params);
}
-
+ apiCall.then(res => {
+ const rawData = res.data.records || [];
+ // 澶勭悊 inspector 瀛楁锛屽皢瀛楃涓茶浆鎹负鏁扮粍锛堥�傜敤浜庢墍鏈夋儏鍐碉級
+ tableData.value = rawData.map(item => {
+ const processedItem = { ...item };
+
+ // 澶勭悊 inspector 瀛楁
+ if (processedItem.inspector) {
+ if (typeof processedItem.inspector === 'string') {
+ // 瀛楃涓叉寜閫楀彿鍒嗗壊
+ processedItem.inspector = processedItem.inspector.split(',').map(s => s.trim()).filter(s => s);
+ } else if (!Array.isArray(processedItem.inspector)) {
+ // 闈炴暟缁勮浆涓烘暟缁�
+ processedItem.inspector = [processedItem.inspector];
+ }
+ } else {
+ // 绌哄�艰涓虹┖鏁扮粍
+ processedItem.inspector = [];
+ }
+
+ return processedItem;
+ });
+ total.value = res.data.total || 0;
+ }).finally(() => {
+ tableLoading.value = false;
+ });
};
+
// 閲嶇疆鏌ヨ
const resetQuery = () => {
- Object.keys(queryParams).forEach((key) => {
- if (key !== "pageNum" && key !== "pageSize") {
+ for (const key in queryParams) {
+ if (!["pageNum", "pageSize"].includes(key)) {
queryParams[key] = "";
}
- });
+ }
handleQuery();
};
-// 鏂板銆佺紪杈�
+// 鏂板 / 缂栬緫
const handleAdd = (row) => {
- console.log(row)
- const type = row === undefined ? 'add' : 'edit'
+ const type = row ? 'edit' : 'add';
nextTick(() => {
if (tabName.value === 'task') {
if (activeRadio.value === "taskManage") {
- formDia.value?.openDialog(type, row)
+ formDia.value?.openDialog(type, row);
} else if (activeRadio.value === "qrCode") {
- qrCodeDia.value?.openDialog(type, row)
+ qrCodeDia.value?.openDialog(type, row);
}
} else {
- viewQrCodeFiles.value?.openDialog(row)
+ viewQrCodeFiles.value?.openDialog(row);
}
- })
+ });
};
+
// 鏌ョ湅闄勪欢
const viewFile = (row) => {
nextTick(() => {
- viewFiles.value?.openDialog(row)
- })
-}
-// 鍒犻櫎浠诲姟
+ viewFiles.value?.openDialog(row);
+ });
+};
+
+// 鍒犻櫎鎿嶄綔
const handleDelete = () => {
- if (selectedRows.value.length === 0) {
+ if (!selectedRows.value.length) {
proxy.$modal.msgWarning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
return;
}
+
const deleteIds = selectedRows.value.map(item => item.id);
- proxy.$modal.confirm('鏄惁纭鍒犻櫎鎵�閫夋暟鎹」锛�').then(function() {
- if (activeRadio.value === "taskManage") {
- return delTimingTask(deleteIds)
- } else {
- return delQrCode(deleteIds)
- }
+ const api = activeRadio.value === "taskManage" ? delTimingTask : delQrCode;
+
+ proxy.$modal.confirm('鏄惁纭鍒犻櫎鎵�閫夋暟鎹」锛�').then(() => {
+ return api(deleteIds);
}).then(() => {
- handleQuery()
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
- }).catch(() => {})
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ handleQuery();
+ }).catch(() => {});
};
-// 閫夋嫨琛�
+
+// 澶氶�夊彉鏇�
const handleSelectionChange = (selection) => {
selectedRows.value = selection;
};
</script>
<style scoped>
+.person-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+.person-tag {
+ margin-right: 4px;
+ margin-bottom: 2px;
+}
+
+.no-data {
+ color: #909399;
+ font-size: 14px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3