销售订单设置交货日期，根据交货日期设置不同的背景色

huminmin

昨天 049d625f732b376496216e91184ea0f8f8b5305a

销售订单设置交货日期，根据交货日期设置不同的背景色

 src/views/salesManagement/salesLedger/index.vue

@@ -37,7 +37,7 @@
        </div>
      </div>
      <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
        :expand-row-keys="expandedRowKeys" :row-key="(row) => row.id" show-summary style="width: 100%"
        :expand-row-keys="expandedRowKeys" :row-key="(row) => row.id" :row-class-name="tableRowClassName" show-summary style="width: 100%"
        :summary-method="summarizeMainTable" @expand-change="expandChange" height="calc(100vh - 18.5em)">
        <el-table-column align="center" type="selection" width="55" fixed="left"/>
        <el-table-column type="expand" width="60" fixed="left">
@@ -117,6 +117,7 @@
        <el-table-column label="录入人" prop="entryPersonName" width="100" show-overflow-tooltip />
        <el-table-column label="录入日期" prop="entryDate" width="120" show-overflow-tooltip />
        <el-table-column label="签订日期" prop="executionDate" width="120" show-overflow-tooltip />
        <el-table-column label="交付日期" prop="deliveryDate" width="120" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" min-width="100" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openForm('edit', scope.row)">编辑</el-button>
@@ -200,6 +201,14 @@
                    <el-col :span="12">
                        <el-form-item label="录入日期：" prop="entryDate">
                            <el-date-picker style="width: 100%" v-model="form.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                                                            type="date" placeholder="请选择" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="交货日期：" prop="entryDate">
              <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                                                            type="date" placeholder="请选择" clearable />
                        </el-form-item>
                    </el-col>
@@ -694,6 +703,7 @@
        customerId: "",
        entryPerson: "",
        entryDate: "",
    deliveryDate: "",
        maintenanceTime: "",
        productData: [],
        executionDate: "",
@@ -703,6 +713,7 @@
        customerId: [{ required: true, message: "请选择", trigger: "change" }],
        entryPerson: [{ required: true, message: "请选择", trigger: "change" }],
        entryDate: [{ required: true, message: "请选择", trigger: "change" }],
    deliveryDate: [{ required: true, message: "请选择", trigger: "change" }],
        executionDate: [{ required: true, message: "请选择", trigger: "change" }],
    },
});
@@ -985,6 +996,18 @@
        }
    } else {
        expandedRowKeys.value = [];
    }
};

// 添加表行类名方法
const tableRowClassName = ({ row }) => {
  switch (row.deliveryDaysDiff) {
    case 15:
      return 'yellow'
    case 10:
      return 'red'
    case 2:
      return 'purple'
    }
};
// 主表合计方法
@@ -2084,6 +2107,19 @@
    margin-left: 10px;
}

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

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

::v-deep .purple{
  background-color: #c484dd;
}


.table_list {
    margin-top: unset;
}