From ba07ace535232e5ea77cf0a89cd1c079895e1441 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 23 七月 2025 17:22:28 +0800
Subject: [PATCH] 1、新增弹窗表格 2、完善设备管理
---
src/api/equipment/requisition/index.js | 9 +
src/views/equipment/management/index.vue | 244 +++++++++++++++++++++++++++-------
src/components/dialog/DilogTable.vue | 112 ++++++++++++++++
3 files changed, 311 insertions(+), 54 deletions(-)
diff --git a/src/api/equipment/requisition/index.js b/src/api/equipment/requisition/index.js
index 65c23d1..3ba406d 100644
--- a/src/api/equipment/requisition/index.js
+++ b/src/api/equipment/requisition/index.js
@@ -20,4 +20,13 @@
method: 'post',
data
})
+}
+
+// /equipmentUsageDetail/list?usageId=3
+// 璁惧棰嗙敤褰掕繕璁板綍鏌ヨ
+export function getUsageDetailList(usageId) {
+ return request({
+ url: `/equipmentUsageDetail/list?usageId=${usageId}`,
+ method: 'get'
+ })
}
\ No newline at end of file
diff --git a/src/components/dialog/DilogTable.vue b/src/components/dialog/DilogTable.vue
new file mode 100644
index 0000000..9ecba42
--- /dev/null
+++ b/src/components/dialog/DilogTable.vue
@@ -0,0 +1,112 @@
+<template>
+ <el-dialog
+ v-model="visible"
+ :title="title"
+ :width="width"
+ :destroy-on-close="true"
+ @close="handleClose"
+ class="dialog-table"
+ >
+ <ETable
+ :columns="columns"
+ :table-data="tableData"
+ :loading="loading"
+ :show-selection="false"
+ :show-operations="false"
+ />
+ </el-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+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
+ }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// 寮圭獥鏄剧ず鎺у埗
+const visible = computed({
+ get: () => props.modelValue,
+ set: (value) => emit('update:modelValue', value)
+})
+
+// 鍏抽棴寮圭獥
+const handleClose = () => {
+ emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-table {
+ :deep(.el-dialog) {
+ background-color: #f8f9fa;
+ }
+
+ :deep(.el-dialog__header) {
+ background-color: #f1f3f4;
+ border-bottom: 1px solid #e4e7ed;
+ padding: 20px 24px 16px;
+
+ .el-dialog__title {
+ color: #303133;
+ font-weight: 600;
+ }
+ }
+
+ :deep(.el-dialog__body) {
+ background-color: #f8f9fa;
+ padding: 20px 24px;
+
+ .el-table {
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+ }
+
+ .el-table th.el-table__cell {
+ background-color: #fafbfc;
+ color: #606266;
+ font-weight: 600;
+ border-bottom: 1px solid #ebeef5;
+ }
+
+ .el-table td.el-table__cell {
+ background-color: #ffffff;
+ border-bottom: 1px solid #f5f7fa;
+ }
+
+ .el-table__row:hover > td {
+ background-color: #f8f9fa !important;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/equipment/management/index.vue b/src/views/equipment/management/index.vue
index 0654e82..656e162 100644
--- a/src/views/equipment/management/index.vue
+++ b/src/views/equipment/management/index.vue
@@ -52,7 +52,7 @@
>鍒犻櫎</el-button
>
</el-row>
- <!-- 琛ㄦ牸缁勪欢 -->
+ <!-- 琛ㄦ牸缁勪欢 -->
<div>
<data-table
:showOverflowTooltip="false"
@@ -65,32 +65,11 @@
@edit="handleEdit"
@viewRow="handleView"
@selection-change="handleSelectionChange"
- :operations="['edit', 'viewRow']"
- :operationsWidth="200"
+ @custom-click="handleCustomButtonClick"
+ :operations="getTableOperations()"
+ :operationsWidth="getOperationsWidth()"
+ :customButtons="getCustomButtons()"
>
- <!-- 瀛楁鍚嶇О鍒楃殑鑷畾涔夋彃妲� - 鏄剧ず涓烘爣绛� -->
- <template
- v-if="activeTab === 'coalQualityMaintenance'"
- #fieldIds="{ row }"
- >
- <template
- v-if="
- typeof row.fieldIds === 'string' && row.fieldIds.includes(',')
- "
- >
- <el-tag
- v-for="(field, index) in row.fieldIds.split(',')"
- :key="index"
- size="small"
- style="margin-right: 4px; margin-bottom: 2px"
- type="primary"
- >
- </el-tag>
- </template>
- <template v-else>
- <el-tag size="small" type="primary"> </el-tag>
- </template>
- </template>
</data-table>
</div>
<pagination
@@ -126,6 +105,15 @@
:form="form"
@submit="getList"
/> -->
+
+ <!-- 鏌ョ湅璇︽儏寮圭獥 -->
+ <DilogTable
+ v-model="dialogTableVisible"
+ :title="dialogTableTitle"
+ :table-data="dialogTableData"
+ :columns="dialogTableColumns"
+ width="60%"
+ />
</el-card>
</div>
</template>
@@ -140,7 +128,7 @@
import Pagination from "@/components/Pagination";
import managementDialog from "./mould/managementDialog.vue";
import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue";
-import UsageRecord from "./mould/usageRecord.vue";
+import DilogTable from "@/components/dialog/DilogTable.vue";
// API 鏈嶅姟瀵煎叆
import { useDelete } from "@/hooks/useDelete.js";
@@ -148,30 +136,60 @@
getManagementList,
delEquipment,
} from "@/api/equipment/management/index.js";
-import { getUsageRecordList } from "@/api/equipment/requisition/index.js";
+import { getUsageRecordList, getUsageDetailList } from "@/api/equipment/requisition/index.js";
-// 鍝嶅簲寮忕姸鎬佺鐞�
-const form = ref({});
-const title = ref("");
-const copyForm = ref({});
-const addOrEdit = ref("add");
-const manaDialog = ref(false);
-const equipmentRequisitionDialog = ref(false);
-const usageRecordDialog = ref(false);
-const loading = ref(false);
-const activeTab = ref("management");
-const selectedRows = ref([]);
-const tableData = ref([]);
+// 鍝嶅簲寮忕姸鎬佺鐞� - 浣跨敤瑙ｆ瀯鍜岄粯璁ゅ��
+const initFormState = () => ({ consumables: false });
-// 鍒嗛〉鐘舵��
-const pageNum = ref(1);
-const pageSizes = ref(10);
-const total = ref(0);
-
-// 鏌ヨ鍙傛暟
-const queryParams = reactive({
- searchAll: "",
+const state = reactive({
+ form: initFormState(),
+ title: "",
+ copyForm: {},
+ addOrEdit: "add",
+ loading: false,
+ activeTab: "management",
+ selectedRows: [],
+ tableData: [],
+ // 寮圭獥鐘舵��
+ dialogs: {
+ management: false,
+ equipmentRequisition: false,
+ usageRecord: false,
+ detailTable: false,
+ },
+ // 璇︽儏琛ㄦ牸鐘舵��
+ detailTable: {
+ data: [],
+ columns: [],
+ title: "",
+ },
+ // 鍒嗛〉鐘舵��
+ pagination: {
+ pageNum: 1,
+ pageSize: 10,
+ total: 0,
+ },
+ // 鏌ヨ鍙傛暟
+ queryParams: {
+ searchAll: "",
+ },
});
+
+// 浣跨敤瑙ｆ瀯绠�鍖栬闂�
+const {
+ form,
+ title,
+ copyForm,
+ addOrEdit,
+ loading,
+ activeTab,
+ selectedRows,
+ tableData,
+ dialogs,
+ detailTable,
+ pagination,
+ queryParams,
+} = toRefs(state);
// 鏍囩椤甸厤缃� - 渚夸簬鍚庣画鎵╁睍
const tabsConfig = {
@@ -204,12 +222,16 @@
{ prop: "equipmentNo", label: "璁惧缂栧彿", minWidth: 100 },
{ prop: "equipmentName", label: "璁惧鍚嶇О", minWidth: 100 },
{ prop: "usageQuantity", label: "棰嗙敤鏁伴噺", minWidth: 100 },
+ {prop: "returnQuantity" , label: "褰掕繕鏁伴噺", minWidth: 100,
+ formatter: (row) => row.returnQuantity || 0
+ },
{
prop: "equipmentStatus",
label: "浣跨敤鐘舵��",
minWidth: 100,
formatter: (row) => (row.equipmentStatus == 1 ? "浣跨敤涓�" : "宸插綊杩�"),
},
+
{ prop: "usageStartTime", label: "浣跨敤寮�濮嬫椂闂�", minWidth: 100 },
{ prop: "usageEndTime", label: "浣跨敤缁撴潫鏃堕棿", minWidth: 100 },
{ prop: "remarks", label: "澶囨敞", minWidth: 100 },
@@ -261,6 +283,61 @@
const columns = computed(() => currentTabConfig.value?.columns || []);
const selectedCount = computed(() => selectedRows.value.length);
+// 鍔ㄦ�佽幏鍙栬〃鏍兼搷浣滈厤缃�
+const getTableOperations = () => {
+ if (activeTab.value === 'equipmentRequisition') {
+ return [ 'viewRow']; // 璁惧棰嗙敤椤甸潰鍙樉绀虹紪杈戝拰鏌ョ湅
+ }
+ return ['edit', 'viewRow']; // 榛樿鎿嶄綔
+};
+
+// 鍔ㄦ�佽幏鍙栨搷浣滃垪瀹藉害
+const getOperationsWidth = () => {
+ if (activeTab.value === 'equipmentRequisition') {
+ return 250; // 涓哄綊杩樻寜閽鐣欐洿澶氱┖闂�
+ }
+ return 200; // 榛樿瀹藉害
+};
+
+// 鍔ㄦ�佽幏鍙栬嚜瀹氫箟鎸夐挳閰嶇疆
+const getCustomButtons = () => {
+ const buttons = [];
+
+ // 鍦ㄨ澶囬鐢ㄩ〉闈㈡坊鍔犲綊杩樻寜閽�
+ if (activeTab.value === 'equipmentRequisition') {
+ buttons.push({
+ name: 'return',
+ label: '褰掕繕',
+ type: 'success',
+ size: 'small',
+ link: true,
+ show: (row) => row.equipmentStatus == 1 || row.equipmentStatus == 2, // 鍙湁浣跨敤涓殑璁惧鎵嶆樉绀哄綊杩樻寜閽�
+ disabled: (row) => false,
+ });
+ }
+
+ return buttons;
+};
+
+// 澶勭悊鑷畾涔夋寜閽偣鍑讳簨浠�
+const handleCustomButtonClick = ({ buttonName, row }) => {
+ switch (buttonName) {
+ case 'return':
+ handleReturn(row);
+ break;
+ // 鍙互鍦ㄨ繖閲屾坊鍔犳洿澶氳嚜瀹氫箟鎸夐挳鐨勫鐞嗛�昏緫
+ default:
+ console.warn(`鏈鐞嗙殑鑷畾涔夋寜閽�: ${buttonName}`);
+ }
+};
+const handleReturn = (row) => {
+ form.value = { ...row };
+ addOrEdit.value = "return"; // 璁剧疆涓哄綊杩樻ā寮�
+ title.value = `褰掕繕璁惧`;
+ copyForm.value = { ...row };
+ equipmentRequisitionDialog.value = true;
+ console.log("褰掕繕璁惧锛�", row);
+};
// 浜嬩欢澶勭悊鍑芥暟
const handleTabClick = (tab) => {
activeTab.value = tab.props.name;
@@ -323,14 +400,74 @@
}
};
-const handleView = (row) => {
+const handleView = async (row) => {
+ // 閽堝璁惧绠＄悊椤甸潰锛氱洿鎺ユ墦寮�缂栬緫寮圭獥鏌ョ湅
+ if (activeTab.value === 'management') {
+ form.value = { ...row };
+ addOrEdit.value = "viewRow";
+ title.value = `鏌ョ湅${currentTabConfig.value.label}`;
+ copyForm.value = { ...row };
+ manaDialog.value = true;
+ return;
+ }
+
+ // 閽堝璁惧棰嗙敤椤甸潰锛氭墦寮�璇︽儏璁板綍琛ㄦ牸
+ if (activeTab.value === 'equipmentRequisition') {
+ try {
+ dialogTableTitle.value = `${row.equipmentName || '璁惧'} - 鎿嶄綔璁板綍璇︽儏`;
+
+ // 鏄剧ず鍔犺浇鐘舵��
+ dialogTableVisible.value = true;
+ dialogTableData.value = [];
+
+ // 璋冪敤璇︽儏鎺ュ彛鑾峰彇鏁版嵁
+ const { data, code } = await getUsageDetailList(row.id);
+
+ if (code === 200 && data) {
+ console.log('璁惧鎿嶄綔璁板綍:', data);
+
+ // 澶勭悊鏁扮粍鏁版嵁锛岀洿鎺ユ樉绀烘搷浣滆褰曞垪琛�
+ if (Array.isArray(data.records)) {
+ dialogTableData.value = data.records;
+ dialogTableColumns.value = [
+ { prop: 'equipmentNo', label: '璁惧缂栧彿', minWidth: 100 },
+ { prop: 'equipmentName', label: '璁惧鍚嶇О', minWidth: 120 },
+ { prop: 'specification', label: '瑙勬牸鍨嬪彿', minWidth: 100 },
+ {
+ prop: 'operationType',
+ label: '鎿嶄綔绫诲瀷',
+ minWidth: 80,
+ formatter: (row) => row.operationType === 1 ? '棰嗙敤' : '褰掕繕'
+ },
+ { prop: 'quantity', label: '鎿嶄綔鏁伴噺', minWidth: 80 },
+ { prop: 'operator', label: '鎿嶄綔浜�', minWidth: 80 },
+ { prop: 'remark', label: '澶囨敞', minWidth: 150, showOverflowTooltip: true },
+ { prop: 'createTime', label: '鎿嶄綔鏃堕棿', minWidth: 150 }
+ ];
+ } else {
+ ElMessage.warning('鏆傛棤鎿嶄綔璁板綍');
+ dialogTableVisible.value = false;
+ }
+ } else {
+ ElMessage.error('鑾峰彇璇︽儏鏁版嵁澶辫触');
+ dialogTableVisible.value = false;
+ }
+
+ } catch (error) {
+ console.error('鑾峰彇璇︽儏澶辫触:', error);
+ ElMessage.error('鑾峰彇璇︽儏鏁版嵁澶辫触');
+ dialogTableVisible.value = false;
+ }
+ return;
+ }
+
+ // 鍏朵粬椤甸潰鐨勯粯璁ゅ鐞�
form.value = { ...row };
addOrEdit.value = "viewRow";
title.value = `鏌ョ湅${currentTabConfig.value.label}`;
copyForm.value = { ...row };
- if (activeTab.value === "equipmentRequisition") {
- equipmentRequisitionDialog.value = true;
- } else if (activeTab.value === "usageRecord") {
+
+ if (activeTab.value === "usageRecord") {
usageRecordDialog.value = true;
} else {
manaDialog.value = true;
@@ -371,8 +508,7 @@
// 璁惧棰嗙敤寮圭獥鎻愪氦澶勭悊
const onEquipmentRequisitionSubmit = (formData) => {
- console.log("璁惧棰嗙敤鎻愪氦鏁版嵁锛�", formData);
- if (formData.equipmentStatus == 1) {
+ if (formData.equipmentStatus == 2) {
ElMessage.success("璁惧褰掕繕鎴愬姛");
} else {
ElMessage.success("璁惧棰嗙敤鎴愬姛");
--
Gitblit v1.9.3