| | |
|---|
| | | :tableData="tableData" |
|---|
| | | :page="page" |
|---|
| | | :tableLoading="tableLoading" |
|---|
| | | :row-class-name="tableRowClassName" |
|---|
| | | @pagination="pagination"> |
|---|
| | | <template #completionStatus="{ row }"> |
|---|
| | | <el-progress |
|---|
| | |
|---|
| | | width: 120, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "交付日期", |
|---|
| | | prop: "deliveryDate", |
|---|
| | | formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""), |
|---|
| | | width: 120, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | dataType: "action", |
|---|
| | | label: "操作", |
|---|
| | | align: "center", |
|---|
| | |
|---|
| | | 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' |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绑定工艺路线弹框 |
|---|
| | |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .search_form{ |
|---|
| | | align-items: start; |
|---|
| | | }</style> |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::v-deep .yellow { |
|---|
| | | background-color: #FAF0DE; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::v-deep .red { |
|---|
| | | background-color: #FAE1DE; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::v-deep .purple{ |
|---|
| | | background-color: #F4DEFA; |
|---|
| | | } |
|---|
| | | </style> |
|---|
