<template>
|
<div style="display: grid; grid-template-columns: 94% 5%">
|
<el-tabs
|
tab-position="left"
|
style="margin-left: 1%; width: 98%"
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
v-for="item in locationLayer"
|
:key="item.value"
|
:label="item.label"
|
:name="item.value"
|
:lazy="true"
|
>
|
<div v-if="isLoad(item.value)">
|
<stock-plan
|
v-for="(tunnels, index) in locationConfigs"
|
:key="index"
|
:gridColumnNum="tunnels.colNum"
|
:gridRowNum="tunnels.rowNum"
|
:locationList="tunnels.locationList"
|
:tunnelRowNo="tunnels.tunnelRowNo"
|
:tunnel="tunnels.tunnel"
|
:layer="item.value"
|
></stock-plan>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div style="margin-top: 10%; height: 90%; margin-left: 20%">
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
></div>
|
<div style="margin-left: 20%"><span>空闲</span></div>
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
>
|
<img src="../../../public/Stored.png" width="30px" />
|
</div>
|
<div><span>有货占用</span></div>
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
>
|
<img src="../../../public/Inbound.png" width="30px" />
|
</div>
|
<div><span>入库占用</span></div>
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
>
|
<img src="../../../public/Outbound.png" width="30px" />
|
</div>
|
<div><span>出库锁定</span></div>
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
>
|
<img src="../../../public/Lock.png" width="30px" />
|
</div>
|
<div style="margin-left: 20%"><span>锁定</span></div>
|
<div
|
style="
|
margin-top: 30%;
|
margin-left: 20%;
|
border: 1px solid lightskyblue;
|
color: #000000;
|
height: 32px;
|
width: 32px;
|
"
|
>
|
<img src="../../../public/Error.png" width="30px" />
|
</div>
|
<div style="margin-left: 20%"><span>禁用</span></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { ref, reactive } from "vue";
|
import StockPlan from "./StockPlan.vue";
|
export default {
|
data() {
|
return {
|
activeName: 1,
|
locationConfigs: [],
|
locationLayer: [],
|
};
|
},
|
components: {
|
StockPlan,
|
},
|
created() {
|
this.http
|
.post("/api/locationInfo/GetLocationLayer", "", "加载中")
|
.then((x) => {
|
if (x.status) {
|
this.locationLayer = x.data;
|
// setTimeout(() => {
|
// this.initLocation(1);
|
// this.activeName = "1";
|
// }, 1000);
|
} else {
|
this.$Message.error(x.message);
|
}
|
});
|
},
|
beforeDestroy() {},
|
mounted() {},
|
methods: {
|
handleClick(tab, event) {
|
this.initLocation(tab.props.name);
|
},
|
|
initLocation(layer) {
|
console.log(this.activeName);
|
this.http
|
.post(
|
"/api/locationInfo/GetLocationConfigs?layer=" + layer,
|
"",
|
"加载中"
|
)
|
.then((x) => {
|
if (x.status) {
|
this.locationConfigs = x.data;
|
} else {
|
this.$Message.error(x.message);
|
}
|
});
|
},
|
isLoad(layer) {
|
let config = this.locationConfigs.find((x) => x.layer === layer);
|
if (config) {
|
return true;
|
}
|
return false;
|
},
|
},
|
};
|
</script>
|
