From dd9171eef52864b6d025ef9cc2b5770f5d40ce15 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 11 十月 2025 15:33:48 +0800
Subject: [PATCH] 生产管控-生产报表与绩效分析、库存与物料看板、智能排产三个前端页面开发
---
src/components/Table/EtableModify.vue | 300 ++++++++++++++++++++++++++++++++++++------------------------
1 files changed, 180 insertions(+), 120 deletions(-)
diff --git a/src/components/Table/EtableModify.vue b/src/components/Table/EtableModify.vue
index d4678c6..5c6d032 100644
--- a/src/components/Table/EtableModify.vue
+++ b/src/components/Table/EtableModify.vue
@@ -1,170 +1,224 @@
<template>
- <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :height="height" :max-height="maxHeight"
- :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
- @row-click="handleRowClick" @row-dblclick="handleRowDblClick" :row-class-name="tableRowClassName" @cell-click="handleCellClick" :max-width="maxWidth"
- @export="handleExport">
- <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
- <el-table-column v-if="showIndex" label="搴忓彿" type="index" width="60" align="center" /> <template
- v-for="col in columns" :key="col.prop">
- <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)" align="center"> <template
- #default="scope">
+ <el-table
+ v-loading="loading"
+ :data="tableData"
+ :border="border"
+ :show-selection="showSelection"
+ :height="height"
+ :max-height="maxHeight"
+ :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
+ @selection-change="handleSelectionChange"
+ @row-click="handleRowClick"
+ @row-dblclick="handleRowDblClick"
+ :row-class-name="tableRowClassName"
+ @cell-click="handleCellClick"
+ :max-width="maxWidth"
+ @export="handleExport"
+ :show-overflow-tooltip="showOverflowTooltip"
+ >
+ <el-table-column
+ v-if="showSelection"
+ type="selection"
+ width="55"
+ align="center"
+ />
+ <el-table-column
+ v-if="showIndex"
+ label="搴忓彿"
+ type="index"
+ width="60"
+ align="center"
+ />
+ <template v-for="col in columns" :key="col.prop">
+ <el-table-column v-bind="col" align="center">
+ <template #default="scope">
<template v-if="col.slot">
- <slot></slot>
+ <slot
+ :name="col.prop"
+ :row="scope.row"
+ :column="scope.column"
+ :index="scope.$index"
+ ></slot>
</template>
<template v-else>
- <div class="cell-edit" @dblclick="handleCellEdit(scope.row, col.prop)"
- :class="{'editable': isColumnEditable(col.prop)}"> <span
- v-if="!scope.row.editing || !scope.row.editing[col.prop]" class="cell-text">
- {{ scope.row[col.prop] == null || scope.row[col.prop] === '' ? '--' : scope.row[col.prop] }}
+ <div
+ class="cell-edit"
+ @dblclick="handleCellEdit(scope.row, col.prop)"
+ :class="{ editable: isColumnEditable(col.prop) }"
+ >
+ <!-- 鏄剧ず鐘舵�侊細浣跨敤鏍煎紡鍖栫殑鍊� -->
+ <span
+ v-if="!scope.row.editing || !scope.row.editing[col.prop]"
+ class="cell-text"
+ >
+ {{
+ formatCellValue(
+ scope.row,
+ scope.column,
+ scope.row[col.prop],
+ col
+ )
+ }}
</span>
- <el-input v-else v-model="scope.row[col.prop]" size="small"
- @focus="handleCellFocus(scope.row, col.prop, $event)" @blur="handleCellSave(scope.row, col.prop)"
- @keyup.enter="handleCellSave(scope.row, col.prop)" class="cell-input" />
+ <!-- 缂栬緫鐘舵�侊細浣跨敤鍘熷鍊硷紝涓嶇粡杩囨牸寮忓寲 -->
+ <el-input
+ v-else
+ v-model="scope.row[col.prop]"
+ size="small"
+ @focus="handleCellFocus(scope.row, col.prop, $event)"
+ @blur="handleCellSave(scope.row, col.prop)"
+ @keyup.enter="handleCellSave(scope.row, col.prop)"
+ class="cell-input"
+ />
</div>
</template>
</template>
</el-table-column>
</template>
- <!-- 鎿嶄綔鍒� -->
- <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
- <template #default="scope">
- <slot name="operations" :row="scope.row">
- <el-button v-if="operations.includes('edit')" link type="primary" size="small"
- @click="handleEdit(scope.row)">缂栬緫</el-button>
- <!-- <el-button-->
- <!-- v-if="operations.includes('delete')"-->
- <!-- link-->
- <!-- type="danger"-->
- <!-- size="small"-->
- <!-- @click="handleDelete(scope.row)"-->
- <!-- >鍒犻櫎</el-button>-->
- </slot>
- </template>
- </el-table-column>
</el-table>
</template>
-
- <script setup>
-import { defineEmits, nextTick } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+
+<script setup>
+import { defineEmits, nextTick } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
// 鑾峰彇琛屾牱寮�
tableRowClassName: {
type: Function,
- default: () => ''
+ default: () => "",
},
// 鑾峰彇楂樺害
height: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
// 鏄惁鍏佽缂栬緫鍗曞厓鏍�
editableCells: {
type: Boolean,
- default: true
+ default: true,
},
// 鎸囧畾鍙紪杈戠殑鍒楋紝濡傛灉涓虹┖鏁扮粍鍒欒〃绀烘墍鏈夊垪閮戒笉鍙紪杈�
editableColumns: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏈�澶у搴�
maxWidth: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
handleCellClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleRowClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleExport: {
type: Function,
- default: () => { }
+ default: () => {},
},
handleRowDblClick: {
type: Function,
- default: () => { }
+ default: () => {},
},
// 楂樺害
maxHeight: {
type: [String, Number],
- default: 'auto'
+ default: "auto",
},
// 鍔犺浇鐘舵��
loading: {
type: Boolean,
- default: false
+ default: false,
},
// border
border: {
type: Boolean,
- default: false
+ default: false,
},
// 琛ㄦ牸鏁版嵁
tableData: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏄惁鏄剧ず閫夋嫨鍒�
showSelection: {
type: Boolean,
- default: false
+ default: false,
},
// 鏄惁鏄剧ず搴忓彿鍒�
showIndex: {
type: Boolean,
- default: true
+ default: true,
},
// 鍒楅厤缃�
columns: {
type: Array,
- default: () => []
+ default: () => [],
},
// 鏄惁鏄剧ず鎿嶄綔鍒�
showOperations: {
type: Boolean,
- default: true
+ default: true,
},
// 鎿嶄綔鍒楁爣绛�
operationsLabel: {
type: String,
- default: '鎿嶄綔'
+ default: "鎿嶄綔",
},
// 鎿嶄綔鍒楀搴�
operationsWidth: {
type: [String, Number],
- default: 100
+ default: 100,
},
// 鏄剧ず鍝簺鎿嶄綔鎸夐挳
operations: {
type: Array,
- default: () => ['edit', 'delete', 'export']
+ default: () => ["edit", "delete", "export"],
},
// 鍒犻櫎纭淇℃伅
deleteConfirmText: {
type: String,
- default: '纭鍒犻櫎璇ヨ褰曪紵'
- }
-})
+ default: "纭鍒犻櫎璇ヨ褰曪紵",
+ },
+ showOverflowTooltip: {
+ type: Boolean,
+ default: true,
+ },
+});
// 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
const shouldShowTooltip = (col, data) => {
// 濡傛灉娌℃湁prop锛岀洿鎺ヨ繑鍥瀎alse
if (!col.prop) return false;
// 妫�鏌ヨ鍒楀湪鎵�鏈夋暟鎹腑鏄惁鏈夐潪绌哄��
- return data.some(row => row[col.prop] != null && row[col.prop] !== '');
+ return data.some((row) => row[col.prop] != null && row[col.prop] !== "");
+};
+// 榛樿鐨勬牸寮忓寲鍑芥暟
+const defaultFormatter = (row, column, cellValue) => {
+ return cellValue == null || cellValue === "" || cellValue === 0
+ ? "0"
+ : cellValue;
};
+// 鏍煎紡鍖栧崟鍏冩牸鍊�
+const formatCellValue = (row, column, cellValue, col) => {
+ // 濡傛灉鍒楁湁鑷畾涔夋牸寮忓寲鍣紝浣跨敤鑷畾涔夋牸寮忓寲鍣�
+ if (col.formatter && typeof col.formatter === "function") {
+ return col.formatter(row, column, cellValue);
+ }
+ // 鍚﹀垯浣跨敤榛樿鏍煎紡鍖栧櫒
+ return defaultFormatter(row, column, cellValue);
+};
// 澶勭悊鍗曞厓鏍肩紪杈�
const handleCellEdit = (row, prop) => {
// 濡傛灉涓嶅厑璁哥紪杈戝崟鍏冩牸锛岀洿鎺ヨ繑鍥�
if (!props.editableCells) return;
// 濡傛灉鎸囧畾浜嗗彲缂栬緫鍒楋紝涓斿綋鍓嶅垪涓嶅湪鍙紪杈戝垪涓紝鍒欎笉鍏佽缂栬緫
- if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;
+ if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop))
+ return;
// 鍒濆鍖杄diting瀵硅薄
if (!row.editing) {
@@ -175,28 +229,29 @@
// 鍦ㄤ笅涓�涓狣OM鏇存柊鍛ㄦ湡锛岃杈撳叆妗嗚幏寰楃劍鐐瑰苟閫変腑鍐呭
setTimeout(() => {
- const inputElement = document.querySelector('.cell-edit .el-input__inner');
+ const inputElement = document.querySelector(".cell-edit .el-input__inner");
if (inputElement) {
inputElement.focus();
inputElement.select();
}
}, 10);
-}
+};
// 澶勭悊鍗曞厓鏍间繚瀛�
const handleCellSave = (row, prop) => {
// 鍏抽棴缂栬緫鐘舵��
row.editing[prop] = false;
// 瑙﹀彂鍗曞厓鏍肩紪杈戝畬鎴愪簨浠�
- emit('cell-edit', row, prop, row[prop]);
-}
+ emit("cell-edit", row, prop, row[prop]);
+};
// 澶勭悊鍗曞厓鏍艰仛鐒︿簨浠�
const handleCellFocus = (row, prop, event) => {
// 濡傛灉涓嶅厑璁哥紪杈戝崟鍏冩牸锛岀洿鎺ヨ繑鍥�
if (!props.editableCells) return;
// 濡傛灉鎸囧畾浜嗗彲缂栬緫鍒楋紝涓斿綋鍓嶅垪涓嶅湪鍙紪杈戝垪涓紝鍒欎笉鍏佽缂栬緫
- if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop)) return;
+ if (props.editableColumns.length > 0 && !props.editableColumns.includes(prop))
+ return;
// 鍒濆鍖杄diting瀵硅薄
if (!row.editing) {
@@ -209,70 +264,75 @@
if (event && event.target) {
event.target.select();
}
-}
+};
// 鍒ゆ柇鍒楁槸鍚﹀彲缂栬緫
const isColumnEditable = (prop) => {
if (props.editableColumns.length === 0) {
return props.editableCells;
}
return props.editableColumns.includes(prop);
-}
+};
// 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
-const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'cell-edit'])
+const emit = defineEmits([
+ "selection-change",
+ "edit",
+ "delete",
+ "export",
+ "cell-edit",
+]);
const handleSelectionChange = (selection) => {
- emit('selection-change', selection)
-}
+ emit("selection-change", selection);
+};
const handleEdit = (row) => {
- emit('edit', row)
-}
+ emit("edit", row);
+};
const handleExport = (row) => {
- emit('export', row)
-}
- </script>
- <style scoped lang="scss">
+ emit("export", row);
+};
+</script>
+<style scoped lang="scss">
.el-table {
- margin: 20px 0 !important;
- }
-
- :deep(.el-table th) {
- background-color: #f5f7fa;
- }
-
- :deep(.cell-edit) {
+ margin: 20px 0 !important;
+}
+
+:deep(.el-table th) {
+ background-color: #f5f7fa;
+}
+
+:deep(.cell-edit) {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+:deep(.cell-edit .cell-text) {
+ width: 100%;
+ display: block;
+}
+
+:deep(.cell-edit.editable:hover .cell-text) {
+ color: #409eff;
+ cursor: pointer;
+}
+
+:deep(.cell-input) {
+ width: 80%;
+ max-width: 120px;
+ min-width: 60px;
+}
+
+:deep(.cell-input .el-input__inner) {
+ border-radius: 4px;
+ text-align: center;
+ transition: all 0.2s;
+}
+
+/* 鍝嶅簲寮忔牱寮� */
+@media screen and (max-width: 768px) {
+ :deep(.el-table) {
width: 100%;
- height: 100%;
- position: relative;
+ overflow-x: auto;
}
-
- :deep(.cell-edit .cell-text) {
- width: 100%;
- display: block;
- }
-
- :deep(.cell-edit.editable:hover .cell-text) {
- color: #409EFF;
- cursor: pointer;
- }
-
- :deep(.cell-input) {
- width: 80%;
- max-width: 120px;
- min-width: 60px;
- }
-
- :deep(.cell-input .el-input__inner) {
- border-radius: 4px;
- text-align: center;
- transition: all 0.2s;
- }
-
-
- /* 鍝嶅簲寮忔牱寮� */
- @media screen and (max-width: 768px) {
- :deep(.el-table) {
- width: 100%;
- overflow-x: auto;
- }
- }
-</style>
\ No newline at end of file
+}
+</style>
--
Gitblit v1.9.3