<template>
|
<Modal
|
:value="visible"
|
title="订单管理"
|
draggable
|
sticky
|
:mask="false"
|
@on-visible-change="visibleChange"
|
:footer-hide="true"
|
:width="600"
|
>
|
<div class="order">
|
<section>
|
<div class="title">详情</div>
|
<div class="line">
|
<div class="width-50">订单名:{{ order.name }}</div>
|
<div class="width-50">优先级:1</div>
|
</div>
|
<div class="line">
|
<div class="width-50">发起方:OMI</div>
|
<div class="width-50">订单状态:{{ order.state }}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">AGV:[{{ order.processingVehicle }}]</div>
|
<div class="width-50">当前目的地:{{ order.destinations }}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">创建时间:2021-11-01 00:00:00</div>
|
<div class="width-50">完成时间:2021-11-01 00:00:00</div>
|
</div>
|
<div class="line">
|
<div class="width-50">订单ID:0000</div>
|
<div class="width-50">截止时间:2021-11-01 00:00:00</div>
|
</div>
|
<div class="line">
|
<div class="width-50">TS ID:atob</div>
|
<div class="width-50">参数:{}</div>
|
</div>
|
<div class="line">
|
<div class="width-50">命令:manually_finish_order</div>
|
<div class="width-50">当前任务:</div>
|
</div>
|
<div class="line">
|
<div class="width-50">当前Operation:</div>
|
<div class="width-50">当前OMI:</div>
|
</div>
|
<div class="line">
|
<div class="width-50">执行时间:</div>
|
<div class="width-50">响应时间跨度:</div>
|
</div>
|
</section>
|
<section>
|
<div class="title">操作</div>
|
<div class="btns" @click="cancel">
|
<div class="btn">取消订单</div>
|
</div>
|
</section>
|
</div>
|
</Modal>
|
</template>
|
|
<script>
|
import { webConfig, checkAdmin } from "@/utils";
|
import HttpRequest from "@/api/request.js";
|
export default {
|
name: "MonitorModalOrder",
|
model: {
|
prop: "visible",
|
event: "visible-change",
|
},
|
props: {
|
visible: Boolean,
|
selectedOrderName: String,
|
},
|
data() {
|
return {
|
httpRequest: new HttpRequest(webConfig.apiUrl),
|
order: {
|
name: "",
|
type: "",
|
state: "",
|
intendedVehicle: "",
|
processingVehicle: "",
|
destinations: "",
|
},
|
isAdmin: checkAdmin(),
|
};
|
},
|
methods: {
|
visibleChange(value) {
|
this.$emit("visible-change", value);
|
},
|
cancel() {
|
if (!this.isAdmin) return;
|
this.httpRequest
|
.post(`transportOrders/withdrawalOrder/${this.selectedOrderName}/true`)
|
.then(() => {
|
this.$Message.success("操作成功");
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
},
|
reset() {
|
this.order.name = "";
|
this.order.type = "";
|
this.order.state = "";
|
this.order.intendedVehicle = "";
|
this.order.processingVehicle = "";
|
this.order.destinations = [];
|
},
|
},
|
watch: {
|
selectedOrderName(name) {
|
if (name) {
|
this.reset();
|
this.httpRequest
|
.get(`transportOrders/${name}`)
|
.then((res) => {
|
this.order.name = res.name;
|
this.order.type = res.type;
|
this.order.state = res.state;
|
this.order.intendedVehicle = res.intendedVehicle;
|
this.order.processingVehicle = res.processingVehicle;
|
this.order.destinations = res.destinations;
|
})
|
.catch((err) => {
|
this.$Message.error({ content: err, duration: 10 });
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.order {
|
section {
|
margin-bottom: 9px;
|
.title {
|
padding-left: 9px;
|
border-left: 3px solid #57a3f3;
|
height: 28px;
|
line-height: 28px;
|
font-size: 16px;
|
margin-bottom: 9px;
|
}
|
.line {
|
line-height: 30px;
|
padding: 0 6px;
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
&:nth-child(2n) {
|
background-color: #dbecff;
|
}
|
.width-50 {
|
width: 50%;
|
float: left;
|
}
|
}
|
.btns {
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
.btn {
|
width: 160px;
|
background-color: #7691aa;
|
color: #ffffff;
|
margin-right: 20px;
|
margin-bottom: 9px;
|
line-height: 30px;
|
text-align: center;
|
border-radius: 3px;
|
float: left;
|
cursor: pointer;
|
&:hover {
|
background-color: #51687e;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
