From 2c9fbc6f1a3ccd1418efa9c348ec12faf1ab3258 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 23 七月 2025 16:33:06 +0800
Subject: [PATCH] 1、完善表格逻辑 2、完善配煤计算器 3、完善设备管理 4、完善采购管理
---
src/components/Table/ETable.vue | 224 ++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 192 insertions(+), 32 deletions(-)
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index 6fc7f1d..3921d6b 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -1,31 +1,62 @@
-<template>
- <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :max-height="maxHeight"
- :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
- @row-click="handleRowClick" @row-dblclick="handleRowDblClick" @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)"
+<template> <el-table
+ v-loading="loading"
+ :data="tableData"
+ :border="border"
+ :show-selection="showSelection"
+ :max-height="maxHeight"
+ :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
+ @selection-change="handleSelectionChange"
+ @row-click="handleRowClick"
+ @row-dblclick="handleRowDblClick"
+ @cell-click="handleCellClick"
+ :max-width="maxWidth"
+ @export="handleExport"
+ :default-selection="defaultSelection"
+ :show-overflow-tooltip="showOverflowTooltip"
+ ref="tableRef"
+ :row-key="rowKey"
+ style="width: 100%;"
+ >
+ <el-table-column v-if="showSelection" type="selection" width="55" align="center" :show-overflow-tooltip="false" />
+ <el-table-column v-if="showIndex" label="搴忓彿" width="60" align="center" fixed="left" :show-overflow-tooltip="false">
+ <template #default="scope">
+ {{ getRowIndex(scope.$index) }}
+ </template>
+ </el-table-column>
+ <template v-for="col in columns" :key="col.prop">
+ <el-table-column v-bind="col"
:formatter="col.formatter || defaultFormatter" align="center">
- <template v-if="col.slot" #default>
- <slot></slot>
+ <template v-if="col.slot" #default="scope">
+ <slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot>
</template>
</el-table-column>
</template>
<!-- 鎿嶄綔鍒� -->
- <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
+ <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" :show-overflow-tooltip="false" fixed="right" align="center">
<template #default="scope">
<slot name="operations" :row="scope.row">
+ <!-- 鑷畾涔夋寜閽� - 鏀惧湪榛樿鎸夐挳涔嬪墠 -->
+ <el-button
+ v-for="button in customButtons"
+ :key="button.name"
+ v-show="!button.show || button.show(scope.row)"
+ :link="button.link !== false"
+ :type="button.type || 'primary'"
+ :size="button.size || 'small'"
+ :icon="button.icon"
+ :disabled="button.disabled && button.disabled(scope.row)"
+ @click="handleCustomClick(button.name, scope.row)"
+ >
+ {{ button.label }}
+ </el-button>
+
+ <!-- 榛樿鎿嶄綔鎸夐挳 -->
<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>-->
+ <el-button v-if="operations.includes('viewRow')" link type="primary" size="small"
+ @click="handleView(scope.row)">鏌ョ湅</el-button>
+ <el-button v-if="operations.includes('viewFile')" link type="primary" size="small"
+ @click="handleViewFile(scope.row)">鏌ョ湅闄勪欢</el-button>
</slot>
</template>
</el-table-column>
@@ -33,7 +64,7 @@
</template>
<script setup>
-import { defineEmits } from 'vue'
+import { defineEmits, ref , defineProps, onMounted ,defineExpose, watch, nextTick} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
// 鏈�澶у搴�
@@ -112,23 +143,53 @@
type: Array,
default: () => ['edit', 'delete', 'export']
},
+ // 鑷畾涔夋寜閽厤缃�
+ customButtons: {
+ type: Array,
+ default: () => []
+ // 绀轰緥閰嶇疆锛�
+ // [
+ // {
+ // name: 'return', // 鎸夐挳鏍囪瘑
+ // label: '褰掕繕', // 鎸夐挳鏄剧ず鏂囨湰
+ // type: 'success', // 鎸夐挳绫诲瀷
+ // size: 'small', // 鎸夐挳澶у皬
+ // icon: '', // 鍥炬爣(鍙��)
+ // show: (row) => true, // 鏄剧ず鏉′欢鍑芥暟(鍙��)
+ // disabled: (row) => false, // 绂佺敤鏉′欢鍑芥暟(鍙��)
+ // }
+ // ]
+ },
// 鍒犻櫎纭淇℃伅
deleteConfirmText: {
type: String,
default: '纭鍒犻櫎璇ヨ褰曪紵'
+ },
+ // 榛樿閫変腑鐨勮 ID 鏁扮粍
+ defaultSelectedIds: {
+ type: Array,
+ default: () => []
+ },
+ // 琛屽敮涓�鏍囪瘑瀛楁鍚嶏紙榛樿涓� id锛�
+ rowKey: {
+ type: String,
+ default: 'id'
+ }, showOverflowTooltip: {
+ type: Boolean,
+ default: true
+ },
+ // 褰撳墠椤电爜
+ currentPage: {
+ type: Number,
+ default: 1
+ },
+ // 姣忛〉澶у皬
+ pageSize: {
+ type: Number,
+ default: 10
}
})
-// 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
-const shouldShowTooltip = (col, data) => {
- // 濡傛灉鍒楅厤缃腑鏄庣‘璁剧疆浜唖howOverflowTooltip锛屼娇鐢ㄨ璁剧疆
- if (col.hasOwnProperty('showOverflowTooltip')) {
- return col.showOverflowTooltip;
- }
- // 濡傛灉娌℃湁prop锛岀洿鎺ヨ繑鍥瀎alse
- if (!col.prop) return false;
- // 妫�鏌ヨ鍒楀湪鎵�鏈夋暟鎹腑鏄惁鏈夐潪绌哄�硷紝榛樿鏄剧ずtooltip
- return data.some(row => row[col.prop] != null && row[col.prop] !== '');
-};
+const tableRef = ref(null)
// 榛樿鐨勬牸寮忓寲鍑芥暟
const defaultFormatter = (row, column, cellValue) => {
@@ -136,13 +197,25 @@
};
// 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
-const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
+const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'viewRow', 'viewFile', 'custom-click'])
const handleSelectionChange = (selection) => {
emit('selection-change', selection)
}
const handleEdit = (row) => {
emit('edit', row)
}
+const handleView = (row) => {
+ emit('viewRow', row)
+}
+const handleViewFile = (row) => {
+ emit('viewFile', row)
+}
+
+// 澶勭悊鑷畾涔夋寜閽偣鍑�
+const handleCustomClick = (buttonName, row) => {
+ emit('custom-click', { buttonName, row })
+}
+
const handleDelete = (row) => {
ElMessageBox.confirm(
props.deleteConfirmText,
@@ -160,9 +233,96 @@
const handleExport = (row) => {
emit('export', row)
}
+
+// 璁＄畻鍒嗛〉搴忓彿
+const getRowIndex = (index) => {
+ return (props.currentPage - 1) * props.pageSize + index + 1;
+};
+
+// 姝ｇ‘鐨� toggleRowSelection 鏂规硶锛氶拡瀵瑰崟琛�
+const toggleRowSelection = (row, selected) => {
+ if (tableRef.value && row) {
+ tableRef.value.toggleRowSelection(row, selected);
+ }
+};
+
+// 鎵归噺璁剧疆琛岄�変腑鐘舵�佺殑鏂规硶
+const setRowsSelection = (rows, selected = true) => {
+ if (tableRef.value && Array.isArray(rows)) {
+ rows.forEach((row) => {
+ tableRef.value.toggleRowSelection(row, selected);
+ });
+ }
+};
+
+// 澶嶉�夋榛樿閫変腑鐘舵��
+const defaultSelection = ref([])
+// 璁剧疆榛樿閫変腑鐘舵��
+const setDefaultSelection = () => {
+ if (!tableRef.value || !props.defaultSelectedIds.length || !props.tableData.length) {
+ return;
+ }
+
+
+ // 寤惰繜鎵ц锛岀‘淇濊〃鏍煎畬鍏ㄦ覆鏌�
+ nextTick(() => {
+ setTimeout(() => {
+ try {
+ tableRef.value.clearSelection();
+ const rowsToSelect = props.tableData.filter(row => {
+ const rowId = row[props.rowKey];
+ return props.defaultSelectedIds.includes(rowId);
+ });
+ rowsToSelect.forEach(row => {
+ tableRef.value.toggleRowSelection(row, true);
+ });
+ } catch (error) {
+ }
+ }, 100);
+ });
+};
+
+// 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ缃粯璁ら�変腑
+watch(() => [props.tableData, props.defaultSelectedIds], () => {
+ if (props.tableData.length > 0 && props.defaultSelectedIds.length > 0) {
+ setDefaultSelection();
+ }
+}, {
+ deep: true,
+ immediate: true
+});
+
+// 缁勪欢鎸傝浇鍚庤缃粯璁ら�変腑
+onMounted(() => {
+ if (props.defaultSelectedIds.length > 0) {
+ setDefaultSelection();
+ }
+});
+
+// 鏆撮湶 el-table 鐨勫疄渚嬪拰甯哥敤鏂规硶
+defineExpose({
+ // 鍗曡閫変腑/鍙栨秷閫変腑
+ toggleRowSelection,
+ // 鎵归噺璁剧疆琛岄�変腑鐘舵��
+ setRowsSelection,
+ // 鏍规嵁ID鏁扮粍閫変腑琛�
+ setDefaultSelection,
+ // 娓呴櫎鎵�鏈夐�変腑
+ clearSelection: () => tableRef.value?.clearSelection(),
+ // 鑾峰彇閫変腑鐨勮
+ getSelectionRows: () => tableRef.value?.getSelectionRows() || [],
+ // 璁剧疆褰撳墠琛�
+ setCurrentRow: (row) => tableRef.value?.setCurrentRow(row),
+ // 鑾峰彇琛ㄦ牸瀹炰緥锛堝闇�鐩存帴鎿嶄綔锛�
+ getTableRef: () => tableRef.value
+});
+
</script>
<style scoped>
+ :deep(.el-tooltip) {
+ justify-content: center !important;
+ }
.el-table {
margin: 20px 0 !important;
}
--
Gitblit v1.9.3