From f3cec0341563c2c0dd4f5df609d0689c6c450bfc Mon Sep 17 00:00:00 2001
From: ZN <zhang_12370@163.com>
Date: 星期六, 21 三月 2026 17:11:12 +0800
Subject: [PATCH] feat(采购退货): 增加退货详情查看功能并完善退货流程
---
src/components/PIMTable/PIMTable.vue | 122 +++++++++++++++++++++++++++++++++++-----
1 files changed, 106 insertions(+), 16 deletions(-)
diff --git a/src/components/PIMTable/PIMTable.vue b/src/components/PIMTable/PIMTable.vue
index 955173d..eb0cf87 100644
--- a/src/components/PIMTable/PIMTable.vue
+++ b/src/components/PIMTable/PIMTable.vue
@@ -10,7 +10,7 @@
:row-class-name="rowClassName"
:row-style="rowStyle"
:row-key="rowKey"
- style="width: 100%"
+ :style="tableStyle"
tooltip-effect="dark"
:expand-row-keys="expandRowKeys"
:show-summary="isShowSummary"
@@ -40,12 +40,22 @@
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
- show-overflow-tooltip
+ :show-overflow-tooltip="item.dataType !== 'action' && item.dataType !== 'slot'"
:align="item.align"
:sortable="!!item.sortable"
:type="item.type"
:width="item.width"
>
+ <template #header="scope">
+ <div class="pim-table-header-cell">
+ <div class="pim-table-header-title">
+ {{ item.label }}
+ </div>
+ <div v-if="item.headerSlot" class="pim-table-header-extra">
+ <slot :name="item.headerSlot" :column="scope.column" />
+ </div>
+ </div>
+ </template>
<template
v-if="item.hasOwnProperty('colunmTemplate')"
#[item.colunmTemplate]="scope"
@@ -120,23 +130,20 @@
</div>
<!-- 鎸夐挳 -->
- <div v-else-if="item.dataType == 'action'">
+ <div v-else-if="item.dataType == 'action'" @click.stop>
<template v-for="(o, key) in item.operation" :key="key">
<el-button
v-show="o.type != 'upload'"
- size="small"
v-if="o.showHide ? o.showHide(scope.row) : true"
- :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :disabled="isOperationDisabled(o, scope.row)"
:plain="o.plain"
type="primary"
:style="{
- color:
- o.name === '鍒犻櫎' || o.name === 'delete'
- ? '#f56c6c'
- : o.color,
+ color: getOperationColor(o, scope.row),
+ fontWeight: 'bold',
}"
link
- @click="o.clickFun(scope.row)"
+ @click.stop="o.clickFun(scope.row)"
:key="key"
>
{{ o.name }}
@@ -149,10 +156,9 @@
(o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)
"
ref="uploadRef"
- size="small"
:multiple="o.multiple ? o.multiple : false"
:limit="1"
- :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :disabled="isOperationDisabled(o, scope.row)"
:accept="
o.accept
? o.accept
@@ -178,10 +184,12 @@
:show-file-list="false"
>
<el-button
- :size="o.size ? o.size : 'small'"
link
type="primary"
- :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :disabled="isOperationDisabled(o, scope.row)"
+ :style="{
+ color: getOperationColor(o, scope.row),
+ }"
>{{ o.name }}</el-button
>
</el-upload>
@@ -207,7 +215,7 @@
</el-table-column>
</el-table>
<pagination
- v-if="page.total > 0"
+ v-if="isShowPagination"
:total="page.total"
:layout="page.layout"
:page="page.current"
@@ -226,7 +234,7 @@
const uploadHeader = proxy.uploadHeader;
const javaApi = proxy.javaApi;
-const emit = defineEmits(["pagination", "expand-change", "selection-change"]);
+const emit = defineEmits(["pagination", "expand-change", "selection-change", "row-click"]);
// Filters
const typeFn = (val, row) => {
@@ -270,6 +278,10 @@
isSelection: {
type: Boolean,
default: false,
+ },
+ isShowPagination: {
+ type: Boolean,
+ default: true,
},
isShowSummary: {
type: Boolean,
@@ -316,6 +328,10 @@
type: Number,
default: 0,
},
+ tableStyle: {
+ type: [String, Object],
+ default: () => ({ width: "100%" }),
+ },
});
// Data
@@ -356,6 +372,71 @@
if (typeof format === "function") {
return format(val);
} else return "";
+};
+
+const isOperationDisabled = (operation, row) => {
+ if (!operation?.disabled) return false;
+ return typeof operation.disabled === "function"
+ ? !!operation.disabled(row)
+ : !!operation.disabled;
+};
+
+const parseHexToRgb = (hex) => {
+ const normalized = String(hex || "").trim().replace("#", "");
+ if (normalized.length === 3) {
+ const r = parseInt(normalized[0] + normalized[0], 16);
+ const g = parseInt(normalized[1] + normalized[1], 16);
+ const b = parseInt(normalized[2] + normalized[2], 16);
+ if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+ return { r, g, b };
+ }
+ if (normalized.length === 6 || normalized.length === 8) {
+ const r = parseInt(normalized.slice(0, 2), 16);
+ const g = parseInt(normalized.slice(2, 4), 16);
+ const b = parseInt(normalized.slice(4, 6), 16);
+ if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+ return { r, g, b };
+ }
+ return null;
+};
+
+const fadeColor = (color, alpha = 0.35) => {
+ const c = String(color || "").trim();
+ if (!c) return undefined;
+ if (c.startsWith("#")) {
+ const rgb = parseHexToRgb(c);
+ if (!rgb) return c;
+ return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+ }
+ const rgbMatch = c.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+\s*)?\)$/i);
+ if (rgbMatch) {
+ const r = Number(rgbMatch[1]);
+ const g = Number(rgbMatch[2]);
+ const b = Number(rgbMatch[3]);
+ if ([r, g, b].some((n) => Number.isNaN(n))) return c;
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+ }
+ if (c.includes("--el-color-primary")) {
+ return "var(--el-color-primary-light-5)";
+ }
+ if (c.includes("--el-color-danger")) {
+ return "var(--el-color-danger-light-5)";
+ }
+ return "var(--el-text-color-disabled)";
+};
+
+const getOperationColor = (operation, row) => {
+ const baseColor =
+ operation?.name === "鍒犻櫎" || operation?.name === "delete"
+ ? "#D93025"
+ : operation?.name === "璇︽儏"
+ ? "#67C23A"
+ : operation?.color || "var(--el-color-primary)";
+
+ if (isOperationDisabled(operation, row)) {
+ return fadeColor(baseColor, 0.35);
+ }
+ return baseColor;
};
// 鏂囦欢鍙樺寲澶勭悊
@@ -412,6 +493,10 @@
emit("pagination", { page: page, limit: limit });
};
+const rowClick = (row) => {
+ emit("row-click", row);
+};
+
const expandChange = (row, expandedRows) => {
emit("expand-change", row, expandedRows);
};
@@ -429,4 +514,9 @@
padding-right: 0 !important;
padding-left: 0 !important;
}
+
+.pim-table-header-extra :deep(.el-input),
+.pim-table-header-extra :deep(.el-select) {
+ width: 100%;
+}
</style>
--
Gitblit v1.9.3