<template>
|
<div id="kuang">
|
<div id="shangk">
|
<div class="fenk">
|
<p class="biaoti">满桶出库设置</p>
|
<div class="qiek">
|
<p class="went">出库优先：</p>
|
<p class="wenx" id="xianA1"></p>
|
<button class="wenqie" id="qie1" @click="OutPriority()">切换</button>
|
</div>
|
<div class="qiek">
|
<p class="went">入库模式：</p>
|
<p class="wenx" id="xianA3"></p>
|
<button class="wenqie" id="qie3" @click="OutMode()">切换</button>
|
</div>
|
</div>
|
<div class="fenk">
|
<p class="biaoti">库位设置</p>
|
<div class="qiek">
|
<p class="went">库位类型切换：</p>
|
<input class="wenx" id="xianA2" style="height:70%;font-size: 14px;" placeholder="请输入列" />
|
<button class="wenqie" id="qie2" @click="LocationType()">切换</button>
|
</div>
|
</div>
|
<div class="fenk">
|
<p class="biaoti">物料数量查询</p>
|
<input placeholder="物料名称" type="text" id="MaterielName" style="margin-left: 10%;" />
|
<button id="MaterielCha" @click="MaterielCha()">查询</button>
|
<div id="Materielming"></div>
|
<div id="Materielnum" style="textAlign: left;marginTop: 7%;"></div>
|
</div>
|
</div>
|
<div id="xiak">
|
<div class="fenk">
|
<p class="biaoti">人工强制满桶出库</p>
|
<input placeholder="数量(组)" type="text" id="shuliang" />
|
<input placeholder="种类" type="text" id="zhonglei" style="margin-top: 0%;" />
|
<button id="fasong" @click="SendTask()">下发任务</button>
|
</div>
|
<div class="fenk">
|
<p class="biaoti"></p>
|
</div>
|
<div class="fenk">
|
<p class="biaoti"></p>
|
</div>
|
</div>
|
<div id="tishik">
|
<p id="tiwz"></p>
|
<button id="quxiao" @click="Cancel()">取消</button>
|
<button id="queren" @click="Confirm()" style="top: 80%;left: 65%;">确认</button>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import axios from "axios";
|
|
//区分确认
|
const num = ref(0);
|
|
//入库模式切换
|
const OutMode = () => {
|
num.value = 3;
|
let tiwz = document.getElementById("tiwz");
|
tiwz.innerHTML = "是否进行入库模式切换";
|
Hint();
|
};
|
//库位类型切换
|
const LocationType = () => {
|
num.value = 2;
|
let tiwz = document.getElementById("tiwz");
|
tiwz.innerHTML = "是否进行库位类型切换";
|
Hint();
|
};
|
//出库优先
|
const OutPriority = () => {
|
num.value = 1;
|
let tiwz = document.getElementById("tiwz");
|
tiwz.innerHTML = "是否进行出库优先级切换";
|
Hint();
|
};
|
//下发任务
|
const SendTask = () => {
|
let n = document.getElementById("shuliang").value;
|
let m = document.getElementById("zhonglei").value;
|
let tiwz = document.getElementById("tiwz");
|
if (n != null && n > 0 && m != null && m != "") {
|
shuliang.value = n;
|
zhonglei.value = m;
|
num.value = 4;
|
tiwz.innerHTML = "是否人工强制满桶出库" + n + "组" + m;
|
} else {
|
tiwz.innerHTML = "数量和种类不能为空";
|
}
|
Hint();
|
};
|
|
///提示框
|
//显示
|
const Hint = () => {
|
let tishik = document.getElementById("tishik");
|
tishik.style.display = "block";
|
};
|
//取消按扭
|
const Cancel = () => {
|
let tishik = document.getElementById("tishik");
|
tishik.style.display = "none";
|
};
|
//确认按钮
|
const Confirm = () => {
|
let tiwz = document.getElementById("tiwz");
|
let type = num.value;
|
if (type == 1) {
|
//出库优先
|
axios
|
.post("api/Outstockinfo/UpdateOutstockinfo/?num=1", {
|
rows: 100
|
})
|
.then(x => {
|
Refresh();
|
Cancel();
|
});
|
} else if (type == 2) {
|
//库位类型切换
|
let k = document.getElementById("xianA2").value;
|
if (k != null && k >= 1 && k <= 51) {
|
axios
|
.post("api/LocationInfo/UpdateLocationType/?k=" + k, {
|
rows: 100
|
})
|
.then(x => {
|
if (x.data.message == 1) {
|
tiwz.innerHTML = k + "列切换食品区成功";
|
} else if (x.data.message == 2) {
|
tiwz.innerHTML = k + "列切换工业区成功";
|
} else {
|
tiwz.innerHTML = k + "列切换失败";
|
}
|
num.value = 7;
|
});
|
} else {
|
tiwz.innerHTML = "输入的值错误";
|
num.value = 7;
|
}
|
} else if (type == 3) {
|
//入库模式切换
|
axios
|
.post("api/Outstockinfo/UpdateOutstockinfo/?num=2", {
|
rows: 100
|
})
|
.then(x => {
|
Refresh();
|
Cancel();
|
});
|
} else if (type == 4) {
|
//人工强制满桶出库
|
let nums = document.getElementById("shuliang");
|
let types = document.getElementById("zhonglei");
|
axios
|
.post(
|
"api/Task/ArtificialTask/?Num=" + nums.value + "&Types=" + types.value,
|
{
|
rows: 100
|
}
|
)
|
.then(x => {
|
console.log(x);
|
if (x.data.message != null) {
|
tiwz.innerHTML = x.data.message;
|
} else {
|
tiwz.innerHTML = "任务下发成功";
|
}
|
num.value = 7;
|
});
|
nums.value = "";
|
types.value = "";
|
} else if (type == 5) {
|
} else if (type == 6) {
|
} else if (type == 7) {
|
Cancel();
|
}
|
};
|
|
//加载设置详细
|
onMounted(() => {
|
Refresh();
|
});
|
|
//查询物料
|
const MaterielCha = () => {
|
let k = document.getElementById("MaterielName").value;
|
axios
|
.post("api/Stockinfo/MaterielNum/?MaterielName=" + k, {
|
rows: 100
|
})
|
.then(x => {
|
console.log(x);
|
if (x.status == 200) {
|
//获取页面显示位置
|
let Materielming = document.getElementById("Materielming");
|
let Materielnum = document.getElementById("Materielnum");
|
|
//显示
|
Materielming.innerHTML = k+":";
|
Materielnum.innerHTML = x.data;
|
}
|
});
|
};
|
|
//出库优先
|
const Refresh = () => {
|
axios
|
.post("api/Outstockinfo/Refresh/", {
|
rows: 100
|
})
|
.then(x => {
|
console.log(x);
|
//获取页面显示位置
|
let xianA1 = document.getElementById("xianA1");
|
let xianA3 = document.getElementById("xianA3");
|
|
//显示
|
xianA1.innerHTML = x.data.bigOrLittle == 1 ? "优先出少" : "出全满";
|
xianA3.innerHTML = x.data.outMode == 1 ? "正常入库" : "直接出库";
|
});
|
};
|
</script>
|
|
<style scoped>
|
#Materielming,
|
#Materielnum{
|
float: left;
|
width: 50%;
|
height: 20%;
|
margin: 5% 0%;
|
text-align: center;
|
font-size: 30px;
|
}
|
#MaterielCha {
|
float: left;
|
margin: 6% -10%;
|
width: 15%;
|
height: 8%;
|
}
|
.wenqie {
|
width: 15%;
|
height: 50%;
|
float: left;
|
margin: 1% 2.5%;
|
}
|
.went {
|
width: 40%;
|
margin: 0% 0%;
|
font-weight: 600;
|
}
|
.wenx {
|
width: 30%;
|
margin: 0% 5%;
|
}
|
.went,
|
.wenx {
|
height: 100%;
|
float: left;
|
font-size: 20px;
|
text-align: left;
|
}
|
.qiek {
|
width: 80%;
|
height: 15%;
|
float: left;
|
margin: 5% 10%;
|
}
|
#quxiao,
|
#queren {
|
width: 12%;
|
height: 12%;
|
position: absolute;
|
top: 80%;
|
left: 20%;
|
}
|
#tiwz {
|
width: 80%;
|
height: 50%;
|
float: left;
|
margin: 10% 10%;
|
text-align: center;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
#tishik {
|
position: absolute;
|
width: 30%;
|
height: 30%;
|
background: rgb(244, 220, 177);
|
top: 30%;
|
left: 35%;
|
display: none;
|
border-radius: 5px;
|
}
|
#fasong {
|
width: 15%;
|
height: 9%;
|
float: left;
|
margin: 5% 40%;
|
}
|
#MaterielName,
|
#shuliang,
|
#zhonglei {
|
width: 50%;
|
height: 10%;
|
float: left;
|
margin: 5% 23%;
|
}
|
.biaoti {
|
width: 100%;
|
height: 10%;
|
float: left;
|
text-align: center;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
.fenk {
|
width: 30%;
|
height: 90%;
|
float: left;
|
margin: 1.25% 1.65%;
|
background: white;
|
border-radius: 10px;
|
}
|
#kuang {
|
width: 100%;
|
height: 89.8vh;
|
float: left;
|
position: relative;
|
}
|
#shangk {
|
width: 95%;
|
margin: 1% 2.5%;
|
float: left;
|
background: rgb(241, 241, 245);
|
height: 47%;
|
border-radius: 10px;
|
}
|
#xiak {
|
width: 95%;
|
margin: 0% 2.5%;
|
float: left;
|
background: rgb(241, 241, 245);
|
height: 47%;
|
border-radius: 10px;
|
}
|
</style>
|
