fix: 修复离职日期编辑和删除按钮状态逻辑，优化表格操作样式

ZN

2026-03-20 7e3160579cb83558c87ce44df0b74784f0c9f916

 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,13 @@
              :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),
                  fontWeight: 'bold',
                }"
                >{{ o.name }}</el-button
              >
            </el-upload>
@@ -207,7 +216,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 +235,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) => {
@@ -271,6 +280,10 @@
    type: Boolean,
    default: false,
  },
   isShowPagination: {
    type: Boolean,
    default: true,
  },
  isShowSummary: {
    type: Boolean,
    default: false,
@@ -301,7 +314,7 @@
  },
  rowKey: {
    type: String,
    default: undefined,
    default: 'id',
  },
  page: {
    type: Object,
@@ -315,6 +328,10 @@
  total: {
    type: Number,
    default: 0,
  },
  tableStyle: {
    type: [String, Object],
    default: () => ({ width: "100%" }),
  },
});

@@ -356,6 +373,69 @@
  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?.color || "var(--el-color-primary)";

  if (isOperationDisabled(operation, row)) {
    return fadeColor(baseColor, 0.35);
  }
  return baseColor;
};

// 文件变化处理
@@ -412,6 +492,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 +513,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>