生产订单根据交货日期设置不同的背景色

huminmin

昨天 df37f272f29b7777b187ad5a3bf5f2c1ce88f5ca

生产订单根据交货日期设置不同的背景色

 src/views/productionManagement/productionOrder/index.vue

@@ -50,6 +50,7 @@
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                :row-class-name="tableRowClassName"
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress
@@ -163,6 +164,12 @@
      width: 120,
    },
    {
      label: "交付日期",
      prop: "deliveryDate",
      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
      width: 120,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
@@ -228,6 +235,18 @@
    if (p < 50) return "#e6a23c";
    if (p < 80) return "#409eff";
    return "#67c23a";
  };

  // 添加表行类名方法
  const tableRowClassName = ({ row }) => {
    switch (row.deliveryDaysDiff) {
      case 15:
        return 'yellow'
      case 10:
        return 'red'
      case 2:
        return 'purple'
    }
  };

  // 绑定工艺路线弹框
@@ -388,4 +407,17 @@
<style scoped lang="scss">
.search_form{
  align-items: start;
}</style>
}

::v-deep .yellow {
  background-color: #e8b183;
}

::v-deep .red {
  background-color: #e35050;
}

::v-deep .purple{
  background-color: #c484dd;
}
</style>