<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
:width="width"
|
:padding="15"
|
title="路由配置"
|
:footer="true"
|
>
|
<el-row height="50">
|
<el-col :span="24">
|
<div class="grid-content right-text">
|
<!-- <el-link type="primary" @click="deleteNode">移除节点</el-link> -->
|
<el-link type="primary" @click="addNode">添加节点</el-link>
|
</div>
|
<div class="grid-content right-text"></div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<div
|
class="grid-content"
|
style="font-weight: bold; font-size: 18px; margin-left: 5%"
|
>
|
<el-form :rules="routeTypeRules" :model="routerType">
|
<el-form-item label="路由类型" label-width="120" prop="type">
|
<el-select
|
v-model="routerType.type"
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in routerTypes"
|
:key="item.key"
|
:label="item.value"
|
:value="item.key"
|
>
|
<span style="float: left">{{ item.value }}</span>
|
<span
|
style="float: right; color: #8492a6; font-size: 13px"
|
>{{ item.key }}</span
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="overflow-x: auto">
|
<el-row style="margin-top: 3%">
|
<el-col :span="24">
|
<el-steps align-center :active="routers.length">
|
<el-step
|
v-for="(router, index) in routers"
|
:title="getTitle(index)"
|
:key="index"
|
icon=""
|
description="111"
|
style="min-width: 280px"
|
>
|
<template v-slot:description="{}">
|
<div>
|
<el-form
|
:rules="rules"
|
class="demo-ruleForm"
|
:model="router"
|
label-width="110px"
|
style="margin-top: 1%"
|
ref="router"
|
>
|
<el-form-item
|
label="位置编号"
|
placeholder="请选择位置编号"
|
prop="positionCode"
|
>
|
<el-select
|
filterable
|
v-model="router.positionCode"
|
@change="deviceCodeChange"
|
>
|
<el-option
|
v-for="deviceCode in filterDeviceCodes"
|
:key="deviceCode.key"
|
:label="deviceCode.key"
|
:value="deviceCode.key"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-show="
|
index == routers.length - 1 &&
|
!router.positionCode.includes('SC')
|
"
|
label="子位置编号"
|
prop="childPositionCode"
|
>
|
<el-select
|
filterable
|
v-model="router.childPositionCode"
|
@change="childDeviceCodeChange"
|
>
|
<el-option
|
v-for="childDeviceCode in filterChildDeviceCodes"
|
:key="childDeviceCode.key"
|
:label="childDeviceCode.key"
|
:value="childDeviceCode.key"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-show="
|
router.positionCode.includes('SC') ||
|
router.childPositionCode.includes('SC')
|
"
|
label="堆垛机行"
|
prop="sCRow"
|
>
|
<el-input v-model="router.sCRow"></el-input>
|
</el-form-item>
|
<el-form-item
|
v-show="
|
router.positionCode.includes('SC') ||
|
router.childPositionCode.includes('SC')
|
"
|
label="堆垛机列"
|
prop="sCColumn"
|
>
|
<el-input v-model="router.sCColumn"></el-input>
|
</el-form-item>
|
<el-form-item
|
v-show="
|
router.positionCode.includes('SC') ||
|
router.childPositionCode.includes('SC')
|
"
|
label="堆垛机层"
|
prop="sCLayer"
|
>
|
<el-input v-model="router.sCLayer"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
</el-step>
|
</el-steps>
|
</el-col>
|
</el-row>
|
</div>
|
<template #footer>
|
<div>
|
<el-button plain type="danger" @click="save"
|
><i class="el-icon-check"></i>保 存</el-button
|
>
|
<el-button type="primary" size="mini" @click="showDetialBox = false"
|
><i class="el-icon-close"></i>关闭</el-button
|
>
|
</div>
|
</template>
|
</vol-box>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import { el } from "element-plus/es/locale";
|
export default {
|
components: { VolBox },
|
data() {
|
return {
|
width: 1200,
|
active: 0,
|
showDetialBox: false,
|
routerTypes: [],
|
routerType: { type: "" },
|
deviceCodes: [],
|
filterDeviceCodes: [],
|
childDeviceCodes: [],
|
filterChildDeviceCodes: [],
|
routers: [
|
{
|
positionCode: "",
|
childPositionCode: "",
|
sCRow: "",
|
sCColumn: "",
|
sCLayer: "",
|
},
|
{
|
positionCode: "",
|
childPositionCode: "",
|
sCRow: "",
|
sCColumn: "",
|
sCLayer: "",
|
},
|
],
|
rules: {
|
positionCode: [
|
{ required: true, message: "请选择位置编号", trigger: "change" },
|
],
|
},
|
routeTypeRules: {
|
type: [
|
{ required: true, message: "请选择路由类型", trigger: "change" },
|
],
|
},
|
};
|
},
|
methods: {
|
open() {
|
this.routerTypes = [];
|
this.routerType = { type: "" };
|
this.deviceCode = "";
|
this.deviceCodes = [];
|
this.filterDeviceCodes = [];
|
this.childDeviceCodes = [];
|
this.filterChildDeviceCodes = [];
|
this.routers = [
|
{
|
positionCode: "",
|
childPositionCode: "",
|
sCRow: "",
|
sCColumn: "",
|
sCLayer: "",
|
},
|
{
|
positionCode: "",
|
childPositionCode: "",
|
sCRow: "",
|
sCColumn: "",
|
sCLayer: "",
|
},
|
];
|
this.showDetialBox = true;
|
this.getData();
|
},
|
getData() {
|
this.http.post("/api/Router/GetBaseRouterInfo", {}, true).then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.routerTypes = x.data.routerTypes;
|
this.deviceCodes = x.data.deviceCodes;
|
x.data.areaInfos.forEach((v) => {
|
this.deviceCodes.push(v);
|
});
|
this.filterDeviceCodes = this.deviceCodes;
|
this.childDeviceCodes = this.deviceCodes;
|
this.filterChildDeviceCodes = this.deviceCodes;
|
});
|
},
|
addNode() {
|
this.routers.push({
|
positionCode: "",
|
childPositionCode: "",
|
childPosiDeviceCode: "",
|
sCRow: "",
|
sCColumn: "",
|
sCLayer: "",
|
});
|
},
|
deleteNode() {
|
this.routers.splice(this.routers.length - 1, 1);
|
},
|
getTitle(index) {
|
if (index === 0) {
|
return "起点";
|
} else if (index === this.routers.length - 1) {
|
return "终点";
|
} else {
|
return "子节点" + index;
|
}
|
},
|
save() {
|
this.$refs.router.forEach((x) => {
|
console.log(x);
|
x.validate((valid) => {
|
if (!valid) {
|
return false;
|
}
|
});
|
});
|
this.http
|
.post(
|
"/api/Router/AddRouters?routerType=" + this.routerType.type,
|
this.routers,
|
true
|
)
|
.then((x) => {
|
if (!x.status) return this.$message.error(x.message);
|
this.$message.success("操作成功");
|
this.$emit("parentCall", ($vue) => {
|
$vue.refresh();
|
});
|
this.showDetialBox = false;
|
});
|
},
|
deviceCodeChange(value) {
|
var positionCodes = [];
|
this.routers.forEach((x) => {
|
if (x.positionCode && x.positionCode != "") {
|
positionCodes.push(x.positionCode);
|
}
|
});
|
this.filterDeviceCodes = this.deviceCodes.filter(
|
(x) => !positionCodes.includes(x.key)
|
);
|
},
|
childDeviceCodeChange(value) {
|
var positionCodes = [];
|
this.routers.forEach((x) => {
|
if (x.childPositionCode && x.childPositionCode != "") {
|
positionCodes.push(x.childPositionCode);
|
}
|
});
|
this.filterChildDeviceCodes = this.childDeviceCodes.filter(
|
(x) => !positionCodes.includes(x.key)
|
);
|
},
|
},
|
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;
|
}
|
.left-text {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
.right-text {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
<style>
|
.el-step.is-center .el-step__description {
|
padding-left: 5%;
|
padding-right: 5%;
|
}
|
</style>
|
