feat: 根据备件数量展示不同背景颜色

gongchunyi

2 天以前 53531219512bd3085903ebb11cf1184b66b05461

feat: 根据备件数量展示不同背景颜色

 src/components/PIMTable/PIMTable.vue

@@ -8,6 +8,7 @@
            :highlight-current-row="highlightCurrentRow"
            :row-class-name="rowClassName"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            :row-key="rowKey"
            :style="tableStyle"
            tooltip-effect="dark"
@@ -293,6 +294,10 @@
      type: [Object, Function],
      default: () => ({}),
    },
    cellStyle: {
      type: [Object, Function],
      default: () => ({}),
    },
    tableData: {
      type: Array,
      default: () => [],

 src/views/equipmentManagement/spareParts/index.vue

@@ -29,6 +29,7 @@
                        :tableLoading="loading"
                        :page="pagination"
                        :isShowPagination="true"
                        :row-class-name="rowClassName"
                        @pagination="handleSizeChange"
                    >
                        <template #status="{ row }">
@@ -521,9 +522,17 @@
onMounted(() => {
  fetchListData();
});

// 根据数量进行判断背景颜色
const rowClassName = ({ row }) => {
  const num = Number(row.quantity);
  if (num <= 1) return 'row-qty-low';
  if (num >= 8) return 'row-qty-high';
  return 'row-qty-mid';
};
</script>

<style scoped>
<style>
.spare-part-category {
  padding: 20px;
}
@@ -547,8 +556,17 @@
  font-weight: 600;
}

.el-table__row:hover > td {
  background-color: #fafafa;
.el-table .row-qty-low td.el-table__cell,
.el-table .row-qty-low:hover > td.el-table__cell {
  background-color: #fde8e8 !important;
}
.el-table .row-qty-mid td.el-table__cell,
.el-table .row-qty-mid:hover > td.el-table__cell {
  background-color: #f0f4f8 !important;
}
.el-table .row-qty-high td.el-table__cell,
.el-table .row-qty-high:hover > td.el-table__cell {
  background-color: #e8f5e9 !important;
}

/* 按钮组样式 */
@@ -567,4 +585,5 @@
  font-size: 12px;
  margin-right: 4px;
}

</style>