From 77bb73aaef8f85d961b373731a05361cbe6921de Mon Sep 17 00:00:00 2001
From: 张诺 <2864490065@qq.com>
Date: 星期五, 25 七月 2025 14:06:57 +0800
Subject: [PATCH] 提交设备管理优化 以及防抖功能
---
src/views/equipment/management/index.vue | 12 +--
src/components/dialog/DilogTable.vue | 148 +++++++++++++++++++++++++++---------
src/views/equipment/management/mould/equipmentRequisitionDialog.vue | 17 ++++
src/views/equipment/management/mould/managementDialog.vue | 4
src/views/equipment/management/mould/usageRecord.vue | 4
5 files changed, 133 insertions(+), 52 deletions(-)
diff --git a/src/components/dialog/DilogTable.vue b/src/components/dialog/DilogTable.vue
index 9ecba42..9373d79 100644
--- a/src/components/dialog/DilogTable.vue
+++ b/src/components/dialog/DilogTable.vue
@@ -7,13 +7,19 @@
@close="handleClose"
class="dialog-table"
>
- <ETable
- :columns="columns"
- :table-data="tableData"
- :loading="loading"
- :show-selection="false"
- :show-operations="false"
- />
+ <div class="dialog-table-content">
+ <div class="table-wrapper">
+ <ETable
+ :columns="columns"
+ :table-data="tableData"
+ :loading="loadings"
+ :show-selection="false"
+ :show-operations="false"
+ :height="height"
+ :style="{ minHeight: height }"
+ />
+ </div>
+ </div>
</el-dialog>
</template>
@@ -22,44 +28,20 @@
import ETable from '@/components/Table/ETable.vue'
const props = defineProps({
- // 寮圭獥鎺у埗
- modelValue: {
- type: Boolean,
- default: false
- },
- title: {
- type: String,
- default: '鏁版嵁琛ㄦ牸'
- },
- width: {
- type: String,
- default: '80%'
- },
-
- // 琛ㄦ牸鏁版嵁
- tableData: {
- type: Array,
- default: () => []
- },
- columns: {
- type: Array,
- default: () => []
- },
- loading: {
- type: Boolean,
- default: false
- }
+ modelValue: Boolean,
+ title: String,
+ width: String,
+ tableData: Array,
+ columns: Array,
+ loading: Boolean,
+ height: [String, Number]
})
-
+const loadings = computed(() => props.loading || false)
const emit = defineEmits(['update:modelValue'])
-
-// 寮圭獥鏄剧ず鎺у埗
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
-
-// 鍏抽棴寮圭獥
const handleClose = () => {
emit('update:modelValue', false)
}
@@ -109,4 +91,92 @@
}
}
}
+
+.dialog-table-content {
+ display: flex;
+ flex-direction: column;
+ min-height: 300px;
+}
+
+.table-wrapper {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.empty-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 300px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ border: 1px dashed #d9d9d9;
+}
+
+.pagination-wrapper {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ padding: 16px 0;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+
+ :deep(.el-pagination) {
+ --el-pagination-font-size: 14px;
+ --el-pagination-bg-color: #ffffff;
+ --el-pagination-text-color: #606266;
+ --el-pagination-border-radius: 4px;
+
+ .btn-prev,
+ .btn-next {
+ background-color: #f5f7fa;
+ color: #606266;
+
+ &:hover {
+ color: #409eff;
+ }
+
+ &:disabled {
+ color: #c0c4cc;
+ background-color: #f5f7fa;
+ }
+ }
+
+ .el-pager li {
+ background-color: #f5f7fa;
+ color: #606266;
+
+ &:hover {
+ color: #409eff;
+ }
+
+ &.is-active {
+ background-color: #409eff;
+ color: #ffffff;
+ }
+ }
+
+ .el-pagination__sizes .el-select .el-input__wrapper {
+ background-color: #f5f7fa;
+ }
+
+ .el-pagination__jump .el-input__wrapper {
+ background-color: #f5f7fa;
+ }
+ }
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .pagination-wrapper {
+ :deep(.el-pagination) {
+ .el-pagination__sizes,
+ .el-pagination__jump {
+ display: none;
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/equipment/management/index.vue b/src/views/equipment/management/index.vue
index 26930d9..f82ac28 100644
--- a/src/views/equipment/management/index.vue
+++ b/src/views/equipment/management/index.vue
@@ -142,7 +142,8 @@
:title="dialogTableTitle"
:table-data="dialogTableData"
:columns="dialogTableColumns"
- width="60%"
+ width="70%"
+ height="500px"
/>
</el-card>
</div>
@@ -461,13 +462,10 @@
// 璋冪敤璇︽儏鎺ュ彛鑾峰彇鏁版嵁
const { data, code } = await getUsageDetailList(row.id);
-
if (code === 200 && data) {
- console.log('璁惧鎿嶄綔璁板綍:', data);
-
// 澶勭悊鏁扮粍鏁版嵁锛岀洿鎺ユ樉绀烘搷浣滆褰曞垪琛�
- if (Array.isArray(data.records)) {
- dialogTableData.value = data.records;
+ if (Array.isArray(data)) {
+ dialogTableData.value = data;
dialogTableColumns.value = [
{ prop: 'equipmentNo', label: '璁惧缂栧彿', minWidth: 100 },
{ prop: 'equipmentName', label: '璁惧鍚嶇О', minWidth: 120 },
@@ -485,7 +483,6 @@
];
} else {
ElMessage.warning('鏆傛棤鎿嶄綔璁板綍');
- dialogTableVisible.value = false;
}
} else {
ElMessage.error('鑾峰彇璇︽儏鏁版嵁澶辫触');
@@ -550,7 +547,6 @@
if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
ElMessage.success("璁惧宸插畬鍏ㄥ綊杩�");
} else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) {
- ElMessage.success("璁惧閮ㄥ垎褰掕繕鎴愬姛");
} else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) {
ElMessage.success("璁惧棰嗙敤鎴愬姛");
} else {
diff --git a/src/views/equipment/management/mould/equipmentRequisitionDialog.vue b/src/views/equipment/management/mould/equipmentRequisitionDialog.vue
index c8c088d..92768ec 100644
--- a/src/views/equipment/management/mould/equipmentRequisitionDialog.vue
+++ b/src/views/equipment/management/mould/equipmentRequisitionDialog.vue
@@ -134,7 +134,7 @@
</el-form>
<template #footer>
<el-button @click="handleClose">鍙栨秷</el-button>
- <el-button type="primary" @click="handleSubmit" v-if="!isViewMode"
+ <el-button type="primary" @click="debouncedSubmit" v-if="!isViewMode"
>纭畾</el-button
>
</template>
@@ -320,6 +320,21 @@
emit("update:modelValue", false);
}
+// 閫氱敤闃叉姈鍑芥暟
+function debounce(fn, delay = 800) {
+ let timer = null;
+ return function (...args) {
+ if (timer) clearTimeout(timer);
+ timer = setTimeout(() => {
+ fn.apply(this, args);
+ timer = null;
+ }, delay);
+ };
+}
+
+// 闃叉姈鍚庣殑鎻愪氦鏂规硶
+const debouncedSubmit = debounce(handleSubmit, 800);
+
function handleSubmit () {
formRef.value.validate(async (valid) => {
if (!valid) return;
diff --git a/src/views/equipment/management/mould/managementDialog.vue b/src/views/equipment/management/mould/managementDialog.vue
index 8f72187..fc9a5da 100644
--- a/src/views/equipment/management/mould/managementDialog.vue
+++ b/src/views/equipment/management/mould/managementDialog.vue
@@ -75,7 +75,7 @@
</el-select>
</el-form-item> -->
<!-- </el-col> -->
- <el-col :span="11">
+ <!-- <el-col :span="11">
<el-form-item label="浣跨敤閮ㄩ棬" prop="usingDepartment">
<el-input
v-model="formData.usingDepartment"
@@ -84,7 +84,7 @@
style="width: 100%"
/>
</el-form-item>
- </el-col>
+ </el-col> -->
<el-col :span="11">
<el-form-item label="瀛樻斁浣嶇疆" prop="storageLocation">
<el-input
diff --git a/src/views/equipment/management/mould/usageRecord.vue b/src/views/equipment/management/mould/usageRecord.vue
index b092d33..d2bff23 100644
--- a/src/views/equipment/management/mould/usageRecord.vue
+++ b/src/views/equipment/management/mould/usageRecord.vue
@@ -67,7 +67,7 @@
</el-select>
</el-form-item>
</el-col>
- <el-col :span="11">
+ <!-- <el-col :span="11">
<el-form-item label="浣跨敤閮ㄩ棬" prop="usingDepartment">
<el-input
v-model="formData.usingDepartment"
@@ -76,7 +76,7 @@
style="width: 100%"
/>
</el-form-item>
- </el-col>
+ </el-col> -->
<el-col :span="11">
<el-form-item label="瀛樻斁浣嶇疆" prop="storageLocation">
<el-input
--
Gitblit v1.9.3