From 0ce559e6195a189ccc777b0fa439906bffb12b55 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 25 六月 2025 17:58:31 +0800
Subject: [PATCH] 多页面添加查看功能
---
src/views/production/index.vue | 126 +++++++++++++++++++++++-------------------
1 files changed, 69 insertions(+), 57 deletions(-)
diff --git a/src/views/production/index.vue b/src/views/production/index.vue
index 1003361..79c305b 100644
--- a/src/views/production/index.vue
+++ b/src/views/production/index.vue
@@ -4,9 +4,9 @@
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="鎼滅储">
<el-input
- v-model="queryParams.searchAll"
- placeholder="璇疯緭鍏ュ叧閿瘝"
- clearable
+ v-model="queryParams.searchAll"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
/>
</el-form-item>
<el-form-item>
@@ -22,29 +22,39 @@
<el-button type="success" :icon="Plus" @click="openDialog('add')">
鏂板鍔犲伐
</el-button>
- <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length" @click="() => deleteSelected(delPM)">
+ <el-button
+ type="danger"
+ :icon="Delete"
+ :disabled="!selectedRows.length"
+ @click="() => deleteSelected(delPM)"
+ >
鍒犻櫎
</el-button>
- </div> <!-- 鏁版嵁琛ㄦ牸 -->
+ </div>
+ <!-- 鏁版嵁琛ㄦ牸 -->
<ETable
- :showOverflowTooltip="false"
- :loading="loading"
- :table-data="tableData"
- :columns="columns"
- :current-page="queryParams.current"
- :page-size="queryParams.size"
- @selection-change="handleSelectionChange"
- @edit="row => openDialog('edit', row)"
- :show-selection="true"
- :border="true"
- style="width: 100%;height: calc(100vh - 26em)"
+ :showOverflowTooltip="false"
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ :current-page="queryParams.current"
+ :page-size="queryParams.size"
+ @selection-change="handleSelectionChange"
+ @edit="(row) => openDialog('edit', row)"
+ :show-selection="true"
+ :border="true"
+ @viewRow="(row) => (viewRow('viewRow', row))"
+ :operations="['edit', 'viewRow']"
+ :operationsWidth="200"
+ :show-overflow-tooltip="false"
+ style="width: 100%; height: calc(100vh - 26em)"
>
<template #coalId="{ row }">
<div class="coal-tags">
<template v-if="row.coalId">
- <el-tag
- v-for="coal in parseCoalArray(row.coalId)"
- :key="coal"
+ <el-tag
+ v-for="coal in parseCoalArray(row.coalId)"
+ :key="coal"
size="small"
type="primary"
class="coal-tag"
@@ -55,53 +65,54 @@
<span v-else class="no-data">--</span>
</div>
</template>
- </ETable> <!-- 鍒嗛〉缁勪欢 -->
+ </ETable>
+ <!-- 鍒嗛〉缁勪欢 -->
<Pagination
- :layout="'total, prev, pager, next, jumper'"
- :total="total"
- v-model:page="queryParams.current"
- :limit="queryParams.size"
- @pagination="handlePageChange"
+ :layout="'total, prev, pager, next, jumper'"
+ :total="total"
+ v-model:page="queryParams.current"
+ :limit="queryParams.size"
+ @pagination="handlePageChange"
/>
</el-card>
<!-- 鐢熶骇瀵硅瘽妗� -->
<!-- handleProductionAndProcessing -->
<ProductionDialog
- v-model:visible="dialogVisible"
- ref="dialogRef"
- :type="dialogType"
- @update:productionAndProcessing="handleProductionAndProcessing"
- @success="handleDialogSuccess"
+ v-model:visible="dialogVisible"
+ ref="dialogRef"
+ :type="dialogType"
+ @update:productionAndProcessing="handleProductionAndProcessing"
+ @success="handleDialogSuccess"
/>
</div>
</template>
<script setup>
-import {onMounted, ref} from "vue";
-import {ElMessage} from "element-plus";
-import {Plus, Delete} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus, Delete } from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
import ETable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination/index.vue";
-import {getProductionMasterList, delPM} from "@/api/production";
-import {parseCoalArray} from "@/utils/production";
-import {useTableData} from "./components/useTableData.js";
-import {useDialog} from "./components/useDialog.js";
-import {useCoalData} from "./components/useCoalData.js";
-import {getCoalInfoList} from "@/api/production";
+import { getProductionMasterList, delPM } from "@/api/production";
+import { parseCoalArray } from "@/utils/production";
+import { useTableData } from "./components/useTableData.js";
+import { useDialog } from "./components/useDialog.js";
+import { useCoalData } from "./components/useCoalData.js";
+import { getCoalInfoList } from "@/api/production";
// 鐓ょ淇℃伅鍒楄〃
const coalInfoList = ref([]);
// 琛ㄦ牸鍒楅厤缃�
const columns = [
- {prop: "coalId", label: "鐓ょ", minWidth: 150, slot: true},
- {prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120},
- {prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150},
- {prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120},
- {prop: "equipmentDepreciation", label: "璁惧鎶樻棫", minWidth: 143},
- {prop: "totalCost", label: "鎬绘垚鏈�", minWidth: 150},
+ { prop: "coalId", label: "鐓ょ", minWidth: 150, slot: true },
+ { prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120 },
+ { prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150 },
+ { prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120 },
+ { prop: "equipmentDepreciation", label: "璁惧鎶樻棫", minWidth: 143 },
+ { prop: "totalCost", label: "鎬绘垚鏈�", minWidth: 150 },
];
// 浣跨敤琛ㄦ牸鏁版嵁缁勫悎寮忓嚱鏁�
@@ -116,8 +127,8 @@
handleReset,
handlePageChange,
handleSelectionChange,
- deleteSelected
-} = useTableData(getProductionMasterList, {pageSize: 10});
+ deleteSelected,
+} = useTableData(getProductionMasterList, { pageSize: 10 });
// 浣跨敤瀵硅瘽妗嗙粍鍚堝紡鍑芥暟
const {
@@ -125,31 +136,32 @@
dialogType,
dialogRef,
openDialog,
- handleDialogSuccess: onDialogSuccess
+ viewRow,
+ handleDialogSuccess: onDialogSuccess,
} = useDialog();
// 浣跨敤鐓ょ鏁版嵁缁勫悎寮忓嚱鏁�
-const {getCoalNameById, getCoalData} = useCoalData();
+const { getCoalNameById, getCoalData } = useCoalData();
// 鑾峰彇鐓ょ鏄剧ず鍚嶇О锛堝甫澶囩敤閫昏緫锛�
const getDisplayCoalName = (coalId) => {
// 浼樺厛浣跨敤 useCoalData 鐨勬柟娉�
let name = getCoalNameById(coalId);
-
+
// 濡傛灉娌℃湁鎵惧埌锛屽皾璇曚粠 coalInfoList 涓煡鎵�
if (name === coalId && coalInfoList.value.length > 0) {
- const found = coalInfoList.value.find(item => item.id == coalId);
+ const found = coalInfoList.value.find((item) => item.id == coalId);
name = found ? found.coal : coalId;
}
-
+
return name || coalId;
};
// 澶勭悊鐢熶骇鏁版嵁鏇存柊
const handleProductionAndProcessing = (row, rows) => {
- const index = tableData.value.findIndex(item => item.id === rows.id);
+ const index = tableData.value.findIndex((item) => item.id === rows.id);
if (index !== -1) {
- tableData.value[index] = {...tableData.value[index], ...row};
+ tableData.value[index] = { ...tableData.value[index], ...row };
}
};
@@ -172,13 +184,13 @@
if (res.code === 200) {
coalInfoList.value = res.data;
}
- })()
+ })(),
]);
-
+
// 鍔犺浇琛ㄦ牸鏁版嵁
getList();
} catch (error) {
- ElMessage.error('鏁版嵁鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯');
+ ElMessage.error("鏁版嵁鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯");
}
});
</script>
--
Gitblit v1.9.3