<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="1200px"
|
:padding="15"
|
title="任务详情"
|
>
|
<el-row height="50">
|
<el-col :span="24">
|
<div class="grid-content right-text">
|
<el-link type="primary" @click="switchView" v-if="false">切换视图</el-link>
|
</div>
|
</el-col>
|
</el-row>
|
<div :style="{ height: height }">
|
<div v-if="viewType == 1">
|
<el-row height="50">
|
<el-col :span="8">
|
<div
|
class="grid-content content-text"
|
style="font-weight: bold; font-size: 18px"
|
>
|
<span>任务编号：{{ row.taskNum }}</span>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div
|
class="grid-content content-text"
|
style="font-weight: bold; font-size: 18px"
|
>
|
<span>托盘编号：{{ row.palletCode }}</span>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div
|
class="grid-content content-text"
|
style="font-weight: bold; font-size: 18px"
|
>
|
<span>任务状态：{{ row.taskState }}</span>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="height: 100px; margin-top: 3%">
|
<el-steps :active="active" align-center finish-status="success">
|
<el-step
|
v-for="item in steps"
|
:key="item.title"
|
:title="item.title"
|
:description="item.description"
|
></el-step>
|
</el-steps>
|
</div>
|
<el-row height="50" v-show="previousShow || nextShow">
|
<el-col :span="8">
|
<div v-show="previousShow" class="grid-content content-text">
|
<el-button type="danger" @click="previous"
|
>回滚到上一步</el-button
|
>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div v-show="recoveryShow" class="grid-content content-text">
|
<el-button type="primary" @click="recovery">任务挂起恢复</el-button>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div v-show="nextShow" class="grid-content content-text">
|
<el-button type="warning" @click="next">跳转到下一步</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column type="index" width="50"> </el-table-column>
|
<el-table-column prop="taskNum" label="任务号" width="90">
|
</el-table-column>
|
<el-table-column prop="taskState" label="任务状态" width="90">
|
</el-table-column>
|
<el-table-column prop="currentAddress" label="当前位置" width="90">
|
</el-table-column>
|
<el-table-column prop="nextAddress" label="下一位置" width="90">
|
</el-table-column>
|
<el-table-column prop="isManual" label="是否人工操作" width="120">
|
</el-table-column>
|
<el-table-column prop="isNormal" label="是否正常" width="90">
|
</el-table-column>
|
<el-table-column prop="description" label="描述"> </el-table-column>
|
<el-table-column prop="createDate" label="创建时间" width="180">
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" width="180">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</vol-box>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
active: 0,
|
showDetialBox: false,
|
row: {},
|
steps: [],
|
viewType: 2,
|
height: "200px",
|
tableData: [],
|
previousShow: false,
|
nextShow: false,
|
recoveryShow: true,
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
if (this.viewType == 1) {
|
this.getSteps();
|
} else {
|
this.getDetailDatas();
|
}
|
|
this.$emit("parentCall", ($vue) => {
|
var previousButton = $vue.buttons.find((x) => x.value == "Previous");
|
this.previousShow = previousButton != null;
|
|
var nextButton = $vue.buttons.find((x) => x.value == "Next");
|
this.nextShow = nextButton != null;
|
});
|
},
|
getSteps() {
|
this.http
|
.post(
|
"/api/TaskExecuteDetail/GetDetailInfo?taskNum=" + this.row.taskNum,
|
{},
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.steps = x.data.list;
|
this.active = x.data.active;
|
});
|
},
|
getDetailDatas() {
|
this.http
|
.post(
|
"/api/TaskExecuteDetail/GetDetailDatas?taskNum=" + this.row.taskNum,
|
{},
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.tableData = x.data;
|
});
|
},
|
previous() {
|
this.http
|
.post(
|
"/api/Task/RollbackTaskStatusToLast?taskNum=" + this.row.taskNum,
|
{},
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("操作成功");
|
this.getSteps();
|
});
|
},
|
recovery(){
|
this.http
|
.post(
|
"/api/Task/TaskStatusRecovery?taskNum=" + this.row.taskNum,
|
{},
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("操作成功");
|
this.getSteps();
|
});
|
},
|
next() {
|
this.http
|
.post(
|
"/api/Task/UpdateTaskStatusToNext?taskNum=" + this.row.taskNum,
|
{},
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("操作成功");
|
this.getSteps();
|
});
|
},
|
switchView() {
|
this.viewType = this.viewType == 1 ? 2 : 1;
|
if (this.viewType == 2) {
|
this.height = "600px";
|
this.getDetailDatas();
|
} else {
|
this.height = "200px";
|
}
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (!row.isNormal) {
|
return "error-row";
|
} else if (row.isManual) {
|
return "warning-row";
|
}
|
return "success-row";
|
},
|
},
|
created() {},
|
};
|
</script>
|
|
<style scoped>
|
.el-col {
|
border-radius: 4px;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.content-text {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.right-text {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
<style>
|
.el-table .warning-row {
|
background: #fcf1e2;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
|
.el-table .error-row {
|
background: #fde2e2;
|
}
|
</style>
|
