更新
This commit is contained in:
442
src/views/taskCenter/taskList/components/add-or-updata.vue
Normal file
442
src/views/taskCenter/taskList/components/add-or-updata.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2025-10-13 15:07:24
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-07 15:35:14
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="circle-container">
|
||||
<div v-for="(item, index) in dotArr" :key="index" class="circle-wrapper">
|
||||
<div
|
||||
class="circle"
|
||||
:style="{
|
||||
background: stepNum == index + 1 ? '#0B58FF' : '',
|
||||
}">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div
|
||||
class="circle-text"
|
||||
:style="{
|
||||
color: stepNum == index + 1 ? '#0B58FF' : '',
|
||||
}">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- 圆点后面的虚线 -->
|
||||
<div v-if="index < 2" class="connector" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stepNum == 1">
|
||||
<div class="topTip">
|
||||
1.可选择库区、巷道，同批次创建任务搬运仅支持同一产品型号。
|
||||
<br />
|
||||
2.须在本页下方填写搬运数量，搬运数量仅支持双数，且数量≤当前可用库存总量。
|
||||
</div>
|
||||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||||
步骤一：选择产品及起点
|
||||
</small-title>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-position="top"
|
||||
label-width="80px">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="搬运对象" prop="val1">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.val1"
|
||||
placeholder="请选择搬运对象">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" v-if="dataForm.val1 == 1">
|
||||
<el-form-item label="产品名称" prop="val1">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.val2"
|
||||
placeholder="请选择产品名称">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" v-if="dataForm.val1 == 1">
|
||||
<el-form-item label="规格型号" prop="val1">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.val2"
|
||||
placeholder="请选择规格型号">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="搬运数量" prop="val4">
|
||||
<el-input
|
||||
v-model="dataForm.val4"
|
||||
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
|
||||
<template slot="append">盘</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起点信息" prop="val5">
|
||||
<el-radio-group v-model="dataForm.val5">
|
||||
<el-radio :label="1">按策略自动选择</el-radio>
|
||||
<el-radio :label="2">指定起点</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div v-if="dataForm.val5 == 2" class="potBG-div">
|
||||
<div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10">
|
||||
起点库区:
|
||||
<el-select
|
||||
style="width: 200px; margin-left: 10px"
|
||||
v-model="startPot"
|
||||
size="small"
|
||||
placeholder="请选择起点库区">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="13" style="text-align: right; line-height: 36px">
|
||||
<span
|
||||
class="num1-startPot-status"
|
||||
style="background-color: #5ab45a" />
|
||||
可选
|
||||
<span class="num1-startPot-status" />
|
||||
不可选
|
||||
<span
|
||||
class="num1-startPot-status"
|
||||
style="background-color: #e9b100" />
|
||||
已选
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="potTitleBG">
|
||||
<div v-for="item in Object.keys(startPotList)" :key="item">
|
||||
<div class="potTitle">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="potList">
|
||||
<div
|
||||
class="pot"
|
||||
v-for="sitem in startPotList[item]"
|
||||
:key="sitem.id"
|
||||
:style="{
|
||||
backgroundColor: potBGcolor[sitem.status],
|
||||
cursor: sitem.status > 0 ? 'pointer' : '',
|
||||
}"
|
||||
@click="sitem.status > 0 && setStartPot(sitem)"
|
||||
:title="sitem.name">
|
||||
{{ sitem.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="text-align: right">可用库存总量 <span style="color:#409EFF;font-size:16px">12</span> 盘</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stepNum == 2">
|
||||
<div class="topTip">
|
||||
1.指定终点库位，下发后会锁定所属巷道仅本批次任务进入。
|
||||
<br />
|
||||
2.指定终点库位选位规则：仅可从巷道最里空对位选位。
|
||||
<br />
|
||||
3.只选择库区或巷道时，该方式下当前终点为候选位置，系统将根据策略与现场实际情况自动确定最终终点库位。
|
||||
</div>
|
||||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||||
步骤二：选择终点
|
||||
</small-title>
|
||||
</div>
|
||||
<div v-if="stepNum == 3">
|
||||
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
|
||||
步骤三：预览与下发
|
||||
</small-title>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SmallTitle from './SmallTitle';
|
||||
export default {
|
||||
components: {
|
||||
SmallTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dotArr: [
|
||||
{
|
||||
name: '选择起点',
|
||||
},
|
||||
{
|
||||
name: '选择终点',
|
||||
},
|
||||
{
|
||||
name: '预览下发',
|
||||
},
|
||||
],
|
||||
potBGcolor: ['', '#dafadc', '#f8f0c4'],
|
||||
stepNum: 1, // 当前第几步
|
||||
//第一步参数
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
val1: undefined,
|
||||
val2: undefined,
|
||||
val3: undefined,
|
||||
val4: undefined,
|
||||
val5: 1,
|
||||
},
|
||||
options1: [
|
||||
{
|
||||
label: '产品',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '空盘',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
dataRule: {},
|
||||
startPot: undefined, //起点库区选择的类型
|
||||
startPotList: {
|
||||
//起点库区List
|
||||
G01: [
|
||||
{
|
||||
id: '001',
|
||||
name: 'L001',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: '002',
|
||||
name: 'R002',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: '003',
|
||||
name: 'L003',
|
||||
status: 0,
|
||||
},
|
||||
{
|
||||
id: '004',
|
||||
name: 'R004',
|
||||
status: 0,
|
||||
},
|
||||
],
|
||||
G02: [
|
||||
{
|
||||
id: '005',
|
||||
name: 'L005',
|
||||
},
|
||||
{
|
||||
id: '006',
|
||||
name: 'R006',
|
||||
},
|
||||
{
|
||||
id: '007',
|
||||
name: 'L007',
|
||||
},
|
||||
{
|
||||
id: '008',
|
||||
name: 'R008',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || undefined;
|
||||
this.$nextTick(() => {
|
||||
if (this.dataForm.id) {
|
||||
} else {
|
||||
}
|
||||
});
|
||||
},
|
||||
//上一步
|
||||
upSubmit() {
|
||||
if (this.stepNum == 2) {
|
||||
this.stepNum -= 1;
|
||||
this.$emit('setSN', this.stepNum);
|
||||
} else if (this.stepNum == 3) {
|
||||
this.stepNum -= 1;
|
||||
this.$emit('setSN', this.stepNum);
|
||||
}
|
||||
},
|
||||
//下一步
|
||||
nextSubmit() {
|
||||
if (this.stepNum == 1) {
|
||||
this.stepNum += 1;
|
||||
this.$emit('setSN', this.stepNum);
|
||||
return;
|
||||
}
|
||||
if (this.stepNum == 2) {
|
||||
this.stepNum += 1;
|
||||
this.$emit('setSN', this.stepNum);
|
||||
return;
|
||||
}
|
||||
if (this.stepNum == 3) {
|
||||
this.stepNum = 1;
|
||||
this.$emit('setSN', this.stepNum);
|
||||
return;
|
||||
}
|
||||
},
|
||||
cancelStep() {},
|
||||
|
||||
// 第一步方法
|
||||
setStartPot(data) {
|
||||
data.status = data.status == 1 ? 2 : 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topTip {
|
||||
background-color: #ebebeb;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<!-- //库位点的样式 -->
|
||||
<style scoped>
|
||||
.potBG-div {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
border: 1px solid gainsboro;
|
||||
box-shadow: 2px 2px 2px gainsboro, -1px -1px 3px gainsboro;
|
||||
padding: 15px;
|
||||
}
|
||||
.num1-startPot-status {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
.potTitleBG {
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
}
|
||||
.potTitle {
|
||||
width: 82px;
|
||||
background-color: rgb(169, 235, 249);
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.potList {
|
||||
width: 82px;
|
||||
display: grid;
|
||||
grid-template-columns: 40px 40px;
|
||||
gap: 2px;
|
||||
}
|
||||
.pot {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid gainsboro;
|
||||
border-radius: 3px;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- //序号圆点 -->
|
||||
<style scoped>
|
||||
.circle-container {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
overflow-x: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.circle-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #8db1ff;
|
||||
font-weight: 500;
|
||||
font-size: 31px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.circle-text {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: -15px;
|
||||
color: #8db1ff;
|
||||
width: 82px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 下半圆虚线边框 */
|
||||
.circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px; /* 2px边框 + 2px间隙 */
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
height: 30px; /* 半圆高度 */
|
||||
border-radius: 0 0 60px 60px;
|
||||
border: 1px dashed #0b58ff;
|
||||
border-top: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.connector {
|
||||
width: 160px; /* 计算连接线长度 */
|
||||
height: 2px;
|
||||
border-bottom: 1px dashed rgb(11, 88, 255, 1);
|
||||
margin: 0 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user