vue选项卡，实现上一步，下一步，双向随时切换 ，及单向穿梭框
<template><div id="box"><div id="leftBox"><div id="leftContainer"><span @click="shouHideClick" style="display: inline-block;float: right;cursor: pointer;"><img style="
·
<template>
<div id="box">
<div id="leftBox">
<div id="leftContainer">
<span @click="shouHideClick" style="display: inline-block;float: right;cursor: pointer;">
<img style="width:24px; background: lightskyblue;" :src="imgSrc">
<!--<img src="/img/ztgl/vehicleMonitoring/function3.png">-->
</span>
<ul id="leftUl">
<li>
<div class="arrow" v-if="Index == 1" ></div><div class="marginLeft" :class="{active : Index == 1}" @click="changeNav(1)">选择类型</div>
</li>
<li>
<div class="arrow" v-if="Index == 2" ></div> <div class="marginLeft" :class="{active : Index == 2}" @click="changeNav(2)">货物规则</div>
</li>
<li>
<div class="arrow" v-if="Index == 3" ></div><div class="marginLeft" :class="{active : Index == 3}" @click="changeNav(3)">选择容器</div>
</li>
<li>
<div class="arrow" v-if="Index == 4" ></div><div class="marginLeft" :class="{active : Index == 4}" @click="changeNav(4)">设置参数</div>
</li>
<li>
<div class="arrow" v-if="Index == 5" ></div><div class="marginLeft" :class="{active : Index == 5}" @click="changeNav(5)">确定求解</div>
</li>
<li>
<div class="arrow" v-if="Index == 6" ></div><div class="marginLeft" :class="{active : Index == 6}" @click="changeNav(6)">查看结果</div>
</li>
</ul>
</div>
</div>
<div id="rightBox">
<div id="rightContainer" >
<ul>
<li>
<div v-if="Index == 1" style="padding-left: 140px;">
<ul v-for="(item,index) in goodsList" :key ="item.index" style="padding-bottom: 10px" @click='handleChangeColor(index)'>
<li class="smallBox" :class="{changeColor:key===index}">
<div>
<img class="rightImg" :src="item.img">
</div>
<div class="rightBox" >
<p class="smallTitle" >{{item.title}}</p>
<p class="rightDescription" >{{item.dec1}}</p>
<p class="rightDescription">{{item.dec2}}</p>
</div>
</li>
</ul>
<div>
<el-form ref="form" v-model="form" label-width="80px">
<el-form-item label="备注说明">
<el-input v-model="form.explain"></el-input>
</el-form-item>
</el-form>
</div>
<div style="position: absolute;bottom:15px;margin-left: 25%;">
<el-button type="primary" size="medium" @click="changeNav(2)">下一步 货物</el-button>
</div>
</div>
</li>
<li style="padding-top: 10px;">
<div v-if="Index == 2" class="line" style="margin-left: -15px;">
<template>
<el-radio-group v-model="goodsFrom" @change="radioChange">
<el-radio :label="1">录入货物明细和数量</el-radio>
<el-radio :label="2" >所有的货物按比例(套装货物算一种)</el-radio>
<el-radio :label="3" :disabled = 'radioDisable'>一部分货物数量固定 其他类型的能装多少算多少</el-radio>
</el-radio-group>
</template>
<div>
<div style="margin-left: 120px;position: absolute;display: flex;">
<el-upload
action="/api/jcda/goods/import"
:show-file-list="showFile"
:on-error="uploadError"
:on-success="uploadSuccess"
:headers="uploadHeader"
:file-list="fileList">
<el-dropdown placement="bottom-start">
<el-button type="success"
size="medium"
icon="el-icon-upload2"
plain
>导入<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleExportTemplate" style="padding: 5px 10px;text-align: center">模板下载</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-upload>
<div style="float: left;margin-left: 10px;">
<el-button size="medium" type="info" plain @click="handleChoose">选择已保存的数据</el-button>
<el-button size="medium" type="success" @click="handlePackageGoods"
:disabled = 'isPackageDisabled' plain>生成套装</el-button>
<el-button size="medium" type="danger" @click="handleDeleteGoods" plain>批量删除</el-button>
</div>
</div>
<edit-table :openIsDisabled = "isDisabled" id="editTable" style="display: block;" v-model="goodsitem" :tableHeader="goodPlug" @handleSelectionChange="handleSelectionChange">
<template slot-scope="scope" slot="menu">
<el-link type="danger" @click.native="delRow('goodsitem',scope.row)">删除</el-link>
</template>
<template slot="isFixQty" slot-scope="scope">
<el-select v-model="scope.row.isFixQty">
<el-option
v-for="item in itemList"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</template>
</edit-table>
</div>
<div style="position: absolute;bottom: 15px;margin-left: 22%;">
<el-button type="primary" size="medium" @click="changeNav(1)">上一步 选择类型</el-button>
<el-button type="primary" size="medium" @click="changeNav(3)">下一步 选择容器</el-button>
</div>
</div>
</li>
<li>
<div v-if="Index == 3" class="line">
<p class="rightDescription">
备注：如果容器数量为0，容器数量由系统根据算法确定，非0则说该容器最多能使用的数量
</p>
<div style="display: flex;padding-top: 10px;">
<div style="color: #3c4353;font-weight: 400">被选容器</div>
<div style="padding-left:255px;color: #3c4353;font-weight: 400">已选容器</div>
</div>
<div style="display: flex;padding:5px 20px 20px 0px;">
<div class="leftTransferBox" >
<div v-for="(item,i) in containerList" :key ="item.i" style="padding:5px 15px 5px 15px" @click='handleChangeContainer(i)'>
<div :class="{changeColor:cantainerKey===i}" style="padding: 10px 15px 10px 35px;border: 1px solid #d9d9d9;">{{item.name}}</div>
</div>
</div>
<div style="width: 80px;display: flex;flex-direction: column;padding: 15px;line-height: 180px; ">
<div> <el-button @click="changeLeft" type="primary" plain icon="el-icon-arrow-right" size="medium"></el-button></div>
<!--<div> <el-button @click="changeRight" type="primary" plain icon="el-icon-arrow-left" size="medium"></el-button></div>-->
</div>
<div class="rightTransferBox" style="padding: 10px;">
<avue-crud ref="crud" :option="myOption" :data="containerItem" >
<template slot-scope="scope" slot="menu">
<el-button icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</avue-crud>
</div>
</div>
<div style="position: absolute;bottom: 15px;margin-left: 22%;">
<el-button type="primary" size="medium" @click="changeNav(2)">上一步 货物规则</el-button>
<el-button type="primary" size="medium" @click="changeNav(4)">下一步 设置</el-button>
</div>
</div>
</li>
<li>
<div v-if="Index == 4" class="line">
<div>
<p class="rightDescription" style="font-size: 15px;">堆码方式（相同装卸口相同货物相邻摆放）</p>
</div>
<div>
<avue-form ref="form" v-model="parama" :option="paramaOption">
<template slot-scope="scope" slot="lengthWay">
<div>
<el-input-number v-model="parama.lengthWay" placeholder="请输入长度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="widthWay">
<div>
<el-input-number v-model="parama.widthWay" placeholder="请输入宽度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="heightWay">
<div>
<el-input-number v-model="parama.heightWay" placeholder="请输入高度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="lengthType">
<div>
<el-input-number v-model="parama.lengthType" placeholder="请输入长度方式" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="widthType">
<div>
<el-input-number v-model="parama.widthType" placeholder="请输入宽度方式" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="heightType">
<div>
<el-input-number v-model="parama.heightType" placeholder="请输入顶部" :min="0"></el-input-number>
</div>
</template>
</avue-form>
</div>
<div style="position: absolute;bottom: 15px; margin-left: 22%;">
<el-button type="primary" size="medium" @click="changeNav(3)">上一步 选择容器</el-button>
<el-button type="primary" size="medium" @click="changeNav(5)">下一步 确定求解</el-button>
</div>
</div>
</li>
<li>
<div v-if="Index == 5" class="line">
<div>
<avue-form ref="form" v-model="solution" :option="solutionOption">
<template slot-scope="scope" slot="lengthWay">
<div>
<el-input-number :disabled="true" v-model="solution.lengthWay" placeholder="请输入长度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="widthWay">
<div>
<el-input-number :disabled="true" v-model="solution.widthWay" placeholder="请输入宽度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="heightWay">
<div>
<el-input-number :disabled="true" v-model="solution.heightWay" placeholder="请输入高度方向" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="lengthType">
<div>
<el-input-number :disabled="true" v-model="solution.lengthType" placeholder="请输入长度方式" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="widthType">
<div>
<el-input-number :disabled="true" v-model="solution.widthType" placeholder="请输入宽度方式" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="heightType">
<div>
<el-input-number :disabled="true" v-model="solution.heightType" placeholder="请输入顶部" :min="0"></el-input-number>
</div>
</template>
<template slot-scope="scope" slot="goodListDetail">
<avue-crud style="width: 100%;" ref="crud" :option="solutionOptionList" :data="solutionData" >
</avue-crud>
</template>
</avue-form>
</div>
<div style="position: absolute;bottom: 15px; margin-left: 22%;">
<el-button type="primary" size="medium" @click="changeNav(4)">上一步 设置参数</el-button>
<el-button type="primary" size="medium" @click="matlabCalculation()" v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="后台求解中">后台求解</el-button>
<el-button type="primary" size="medium" @click="changeNav(6)" :disabled="changeNav6" >下一步 查看结果</el-button>
</div>
</div>
</li>
<li>
<div v-if="Index == 6" class="line">
<div style="width: 100%; padding: 0 20px; line-height: 50px;font-weight: 400;border: 1px solid #e9e9e9; height: 50px;background: #ffffcc;">
<p>
总柜数：2 总装载率：29.73% 总柜型数：20GP*2 货物总箱数：4
</p>
</div>
<div style="display: flex; margin-top: 5px;">
<div class="leftResult">
<!--<test :title='title'></test>-->
</div>
<div class="rightResult">
<el-tree :data="treeData" :default-expand-all="true" :props="defaultProps" ></el-tree>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import editTable from '@/views/bussiness/components/editTable';
import {uploadHead} from '@/util/auth';
// import {exportTemplate} from "@/api/jcda/goods";
// import {getContainer,matlabCalculation} from "@/api/result/steps";
var DIC = {
VAILD: [{
label: '当空间没有利用时，可以平铺',
value: 'true'
}],
StackingMode: [{
label: '相同的货物可以堆叠',
value: 1
}, {
label: '接触面相同尺寸的货物可以堆叠',
value: 2
}],
StackingLayer:[
{
label: '相同的货物算层数',
value: 1
}, {
label: '所有的货物算层数',
value:2
},
]
}
export default {
name: "steps",
components: {
editTable
// ,test,packageGoods,goodsList
},
data() {
return {
Index: 1,
isDisabled:false,
fileList: [],
imgSrc:"/img/images2/down-1.png",
isSaveMessage:'fromSteps',
radioDisable:false,
isPackageDisabled:false,
showFile:false,
itemList:[
{
id:'1',
name:'固定'
},
{
id:'2',
name:'动态'
}
],
uploadHeader:uploadHead(),
formTitle:'生成套装货物',
myTitle:'选择已保存的货物',
form:{},
//-1 选择类型时，默认不选中
key:-1,
cantainerKey:-1,
num:1,
goodsFrom: 1,
solution:{},
packageGoodsData:[],
multipleSelection:[],
packageGoodsGuid:'',
dialogFlagToUp: false,
showGoodsList:false,
cjKind:{},
fullscreenLoading:false,
changeNav6:true,
solutionOption:{
emptyBtn: false,
submitBtn: false,
column: [
{
label: "装箱模式",
prop: "containerWay",
span: 24,
// labelWidth:170,
disabled:true,
type:'input',
},
{
label: "货物清单",
prop: "goodListDetail",
// labelWidth:170,
span: 24,
formslot: true,
},
{
label: "选择柜型",
prop: "containerType",
span: 24,
disabled:true,
type:'input',
// labelWidth:170,
},
{
label: "是否平铺",
prop: "pingpu",
span: 24,
disabled:true,
type: "checkbox",
// labelWidth:170,
dicData: DIC.VAILD,
}, {
label: "堆叠层数设置(包含本层)",
prop: "stackingLayer",
span: 24,
disabled:true,
type:'radio',
labelWidth:190,
dicData: DIC.StackingLayer,
},
],
group:[
{
icon:'el-icon-s-unfold',
label: '摆放间隙设置',
prop: 'group1',
column: [ {
label: "长度方向(CM)",
prop: "lengthWay",
disabled:true,
formslot:true,
labelWidth:120,
span: 8,
},
{
label: "宽度方向(CM)",
prop: "widthWay",
disabled:true,
formslot:true,
labelWidth:120,
span: 8,
},
{
label: "高度方向(CM)",
disabled:true,
formslot:true,
labelWidth:120,
prop: "heightWay",
span: 8,
},]
},{
icon:'el-icon-box',
label: '容器壁间隙',
prop: 'group2',
column: [ {
label: "长度方式(CM)",
prop: "lengthType",
labelWidth:120,
disabled:true,
formslot:true,
span: 8,
},
{
label: "高度方式(CM)",
prop: "widthType",
span: 8,
labelWidth:120,
disabled:true,
formslot:true,
},
{
label: "顶部(CM)",
prop: "heightType",
labelWidth:120,
formslot:true,
disabled:true,
span: 8,
},]
}
]
},
parama:{},
paramaOption:{
emptyBtn: false,
submitBtn: false,
column: [
{
label: "堆放方式",
prop: "stackingMode",
span: 24,
labelWidth:200,
type:'radio',
dicData: DIC.StackingMode,
},
{
label: "是否平铺？",
prop: "pingpu",
span: 24,
labelWidth:200,
type: "checkbox",
dicData: DIC.VAILD,
}, {
label: "堆叠层数设置(包含本层)",
prop: "stackingLayer",
span: 24,
type:'radio',
labelWidth:200,
dicData: DIC.StackingLayer,
},
],
group:[
{
icon:'el-icon-s-unfold',
label: '摆放间隙设置',
prop: 'group1',
column: [ {
label: "长度方向(CM)",
prop: "lengthWay",
formslot:true,
labelWidth:120,
span: 8,
},
{
label: "宽度方向(CM)",
prop: "widthWay",
labelWidth:120,
formslot:true,
span: 8,
},
{
label: "高度方向(CM)",
labelWidth:120,
prop: "heightWay",
formslot:true,
span: 8,
},]
},{
icon:'el-icon-box',
label: '容器壁间隙',
prop: 'group2',
column: [ {
label: "长度方式(CM)",
prop: "lengthType",
labelWidth:120,
formslot:true,
span: 8,
},
{
label: "高度方式(CM)",
prop: "widthType",
labelWidth:120,
formslot:true,
span: 8,
},
{
label: "顶部(CM)",
prop: "heightType",
labelWidth:120,
formslot:true,
span: 8,
},]
}
]
},
goodsitem: [],
changeColor:false,
containerList:[
{
id:'1',
name:'24尺柜',
},{
id:'2',
name:'48尺柜',
}
],
chooseContainer:[],
goodPlug:[
{
label: "套装货物",
prop: "item",
align: 'center',
notBlank: false,
width: 130,
type: "myDisable",
},
{
label: "货物名称",
prop: "goodsNo",
align: 'center',
notBlank: true,
width: 100,
},
{
label: "货物说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "数量",
prop: "qty",
align: 'right',
notBlank: true,
type: "int",
width: 110,
},
{
label: "长(CM)",
prop: "l",
align: 'right',
notBlank: true,
type: "int",
width: 110,
},
{
label: "宽(CM)",
prop: "w",
align: 'right',
notBlank: true,
type: "int",
width: 110,
},
{
label: "高(CM)",
prop: "h",
align: 'right',
notBlank: true,
width: 110,
type: "int",
},
{
label: "重量(KG)",
prop: "gwt",
align: 'right',
notBlank: true,
width: 110,
disabled: true,
type: "int",
},
{
label: "承重级别",
prop: "gwtLevel",
align: 'right',
width: 120,
type: "int",
},
{
label: "先后顺序",
prop: "shunxu",
align: 'right',
width: 120,
type: "int",
},
{
label: "堆叠层数",
prop: "layer",
align: 'right',
notBlank: true,
width: 110,
type: "int",
},{
label: "订单号",
prop: "order",
align: 'right',
width: 110,
notBlank: true,
type: "int",
},],
goodPlug1: [
{
label: "套装货物",
prop: "item",
align: 'center',
notBlank: true,
width: 130,
type: "myDisable",
},
{
label: "货物名称",
prop: "goodsNo",
align: 'center',
notBlank: true,
width: 100,
},
{
label: "货物说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "数量",
prop: "qty",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "长(CM)",
prop: "l",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "宽(CM)",
prop: "w",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "高(CM)",
prop: "h",
align: 'right',
notBlank: true,
width: 120,
type: "int",
},
{
label: "重量(KG)",
prop: "gwt",
align: 'right',
notBlank: true,
width: 120,
disabled: true,
type: "int",
},
{
label: "承重级别",
prop: "gwtLevel",
align: 'right',
width: 120,
type: "int",
},
{
label: "先后顺序",
prop: "shunxu",
align: 'right',
width: 120,
type: "int",
},
{
label: "堆叠层数",
prop: "layer",
align: 'right',
type: "int",
notBlank: true,
width: 100,
},{
label: "订单号",
prop: "order",
align: 'right',
width: 80,
notBlank: true,
type: "int",
},
],
goodPlug2: [
{
label: "套装货物",
prop: "item",
align: 'center',
notBlank: true,
width: 130,
type: "myDisable",
},
{
label: "货物名称",
prop: "goodsNo",
align: 'center',
notBlank: true,
width: 100,
},
{
label: "货物说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "比例%",
prop: "rate",
align: 'right',
type: "int",
notBlank: true,
width: 120,
},
{
label: "长(CM)",
prop: "l",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "宽(CM)",
prop: "w",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "高(CM)",
prop: "h",
align: 'right',
notBlank: true,
width: 120,
type: "int",
},
{
label: "重量(KG)",
prop: "gwt",
align: 'right',
notBlank: true,
width: 120,
disabled: true,
type: "int",
},
{
label: "承重级别",
prop: "gwtLevel",
align: 'right',
width: 120,
type: "int",
},
{
label: "先后顺序",
prop: "shunxu",
align: 'right',
width: 120,
type: "int",
},
{
label: "堆叠层数",
prop: "layer",
align: 'center',
notBlank: true,
width: 100,
type: "int",
},{
label: "订单号",
prop: "order",
align: 'right',
width: 80,
type: "int",
notBlank: true,
},
],
goodPlug3: [
{
label: "套装货物",
prop: "item",
align: 'center',
notBlank: true,
width: 130,
type: "myDisable",
},
{
label: "货物名称",
prop: "goodsNo",
align: 'center',
notBlank: true,
width: 100,
},
{
label: "货物说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "是否固定数量",
prop: "isFixQty",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "数量",
prop: "qty",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "长(CM)",
prop: "l",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "宽(CM)",
prop: "w",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "高(CM)",
prop: "h",
align: 'right',
notBlank: true,
width: 120,
type: "int",
},
{
label: "重量(KG)",
prop: "gwt",
align: 'right',
notBlank: true,
width: 120,
disabled: true,
type: "int",
},
{
label: "承重级别",
prop: "gwtLevel",
align: 'right',
width: 120,
type: "int",
},
{
label: "先后顺序",
prop: "shunxu",
align: 'right',
width: 120,
type: "int",
},
{
label: "堆叠层数",
prop: "layer",
align: 'right',
notBlank: true,
width: 100,
type: "int",
},{
label: "订单号",
prop: "order",
align: 'right',
width: 80,
notBlank: true,
type: "int",
},
],
goodPlug4:[
{
label: "套装货物",
prop: "item",
align: 'center',
notBlank: false,
width: 130,
type: "myDisable",
},
{
label: "货物名称",
prop: "goodsNo",
align: 'center',
notBlank: true,
width: 100,
},
{
label: "货物说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "套装说明",
prop: "goodsDesc",
align: 'center',
notBlank: true,
width: 120,
},
{
label: "比例%",
prop: "rate",
align: 'right',
type: "int",
notBlank: true,
width: 120,
},
{
label: "数量",
prop: "qty",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "长(CM)",
prop: "l",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "宽(CM)",
prop: "w",
align: 'right',
notBlank: true,
type: "int",
width: 120,
},
{
label: "高(CM)",
prop: "h",
align: 'right',
notBlank: true,
width: 120,
type: "int",
},
{
label: "重量(KG)",
prop: "gwt",
align: 'right',
notBlank: true,
width: 120,
disabled: true,
type: "int",
},
{
label: "承重级别",
prop: "gwtLevel",
align: 'right',
width: 120,
type: "int",
},
{
label: "先后顺序",
prop: "shunxu",
align: 'right',
width: 120,
type: "int",
},
{
label: "堆叠层数",
prop: "layer",
align: 'right',
notBlank: true,
type: "int",
width: 100,
},{
label: "订单号",
prop: "order",
align: 'right',
width: 80,
type: "int",
notBlank: true,
},],
goodsList:[
{
// img:require('../../../public/img/bg/icon1.png'),
title:'单柜单货，求货物最多',
dec1:'1种规格的货柜，单规格的货物。',
dec2:"货柜数量固定，求最多能装载多少货物？",
val: "1"
},
{
// img:require('../../../public/img/bg/icon2.png'),
title:'单柜单货，求用柜最少',
dec1:'1种规格的货柜，单规格的货物。',
dec2:"货物数量固定，求最少用到多少柜？",
val: "2"
},
{
// img:require('../../../public/img/bg/icon3.png'),
title:'单柜多货，求货物最多',
dec1:'1种规格的货柜，多规格的货物。',
dec2:"货柜数量固定，求最多能装载多少货物？",
val: "3"
},
{
// img:require('../../../public/img/bg/icon4.png'),
title:'单柜多货，求用柜最少',
dec1:'1种规格的货柜，多规格的货物。',
dec2:"货物数量固定，求最少用到多少柜？",
val: "4"
},{
// img:require('../../../public/img/bg/icon5.png'),
title:'多柜多货',
dec1:'多种规格货柜，多规格的货物。',
dec2:"货物数量固定，求最少用到多少柜？",
val: "5"
},
],
myOption: {
keyId: 'id',
border: true,
addBtn: false,
editBtn: false,
addRowBtn: false,
saveBtn:false,
cancelBtn:false,
menuWidth:80,
// height:230,
menu:true,
delBtn:false,
cellBtn: false,
column: [{
label: '容器名称',
prop: 'name',
}, {
label: '容器数量',
prop: 'qty',
type: 'number',
cell: true,
mock:{
type:'number',
},
minRows: 0,
maxRows: 1000000,
},]
},
solutionData:[
{
goodsNo:'桌子',
address:'深圳龙岗',
qty:'100'
},
{
goodsNo:'桌子',
address:'深圳龙岗',
qty:'100'
}
],
solutionOptionList:{
border: true,
addBtn: false,
editBtn: false,
height:100,
menu:false,
column: [{
label: '货物名称',
prop: 'goodsNo',
},
{
label: '装卸点',
prop: 'address',
},
{
label: '数量',
align:'center',
minWidth:100,
prop: 'qty',
},]
},
containerItem:[
// {
// id:0,
// name:'张三',
// sex:1,
// $cellEdit:true
// },{
// id:1,
// name:'李四',
// sex:0,
// }
],
defaultProps: {
children: 'children',
label: 'label'
},
treeData:[
{
label: '20GP 65%',
children: [
{
label: 'No 1 货物A 20',
},
{
label: 'No 2 货物B 15',
},
{
label: 'No 3 货物C 30',
},
]
},
{
label: '40GP 35%',
children: [
{
label: 'No 1 货物A 20',
},
{
label: 'No 2 货物B 15',
},
{
label: 'No 3 货物C 30',
},
]
},
]
}
},
mounted(){
this.getStorage()
this.getLableTitle()
this.getContainer()
},
methods: {
getLableTitle(){
console.log(this.paramaOption.group)
if(this.lengthUnit){
this.solutionOption.group[0].column[0].label = `长度方向(${sessionStorage.getItem("lengthUnit")})`
this.solutionOption.group[0].column[1].label = `宽度方向(${sessionStorage.getItem("lengthUnit")})`
this.solutionOption.group[0].column[2].label = `高度方向(${sessionStorage.getItem("lengthUnit")})`
this.solutionOption.group[1].column[0].label = `长度方式(${sessionStorage.getItem("lengthUnit")})`
this.solutionOption.group[1].column[1].label = `高度方式(${sessionStorage.getItem("lengthUnit")})`
this.solutionOption.group[1].column[2].label = `顶部(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[0].column[0].label = `长度方向(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[0].column[1].label = `宽度方向(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[0].column[2].label = `高度方向(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[1].column[0].label = `长度方式(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[1].column[1].label = `高度方式(${sessionStorage.getItem("lengthUnit")})`
this.paramaOption.group[1].column[2].label = `顶部(${sessionStorage.getItem("lengthUnit")})`
}else{
this.solutionOption.group[0].column[0].label = `长度方向(CM)`
this.solutionOption.group[0].column[1].label = `宽度方向(CM)`
this.solutionOption.group[0].column[2].label = `高度方向(CM)`
this.solutionOption.group[1].column[0].label = `长度方式(CM)`
this.solutionOption.group[1].column[1].label = `高度方式(CM)`
this.solutionOption.group[1].column[2].label = `顶部(CM)`
this.paramaOption.group[0].column[0].label = `长度方向(CM)`
this.paramaOption.group[0].column[1].label = `宽度方向(CM)`
this.paramaOption.group[0].column[2].label = `高度方向(CM)`
this.paramaOption.group[1].column[0].label = `长度方式(CM)`
this.paramaOption.group[1].column[1].label = `高度方式(CM)`
this.paramaOption.group[1].column[2].label = `顶部(CM)`
}
},
getStorage(){
this.lengthUnit = sessionStorage.getItem("lengthUnit")
},
//隐藏展示
shouHideClick(){
if(this.imgSrc.endsWith("/down-1.png")){
document.getElementById("leftBox").style.width="5%";
document.getElementById("leftUl").style.display='none';
document.getElementById("rightBox").style.width="95%";
// document.getElementById("rightContainer").style.width="95%";
this.imgSrc ="/img/images2/down-2.png";
}else{
document.getElementById("leftBox").style.width="20%";
document.getElementById("rightBox").style.width="80%";
// document.getElementById("leftContainer").style.width="20%";
document.getElementById("leftUl").style.display="block";
// document.getElementById("rightContainer").style.width="80%";
this.imgSrc ="/img/images2/down-1.png";
}
},
FilterData(a,b) {
var result = new Array();
var c=b.toString();
for(var i=0;i<a.length;i++)
{
if(c.indexOf(a[i].toString())>-1)
{
for(var j=0;j<b.length;j++)
{
if(a[i]==b[j])
{
result.push(a[i]);
break;
}
}
}
}
return result;
},
getMsgFormSon(data){
// console.log(data)
// console.log(this.goodsitem)
// console.log(this.FilterData(data,this.goodsitem))
let repeatData = this.FilterData(data,this.goodsitem)
this.goodsitem = this.goodsitem.concat(data)
for (var i=0; i<repeatData.length; i++) {
for (var j = 0; j < this.goodsitem.length; j++) {
if (repeatData[i].index == this.goodsitem[j].index) {
this.goodsitem.splice(j, 1);
break;
}
}
}
},
getMsgFromPackage(data){
console.log(data)
},
getMsgFromPackage2(data){
console.log(data)
console.log(this.multipleSelection)
for(let i = 0; i < this.multipleSelection.length; i++){
this.multipleSelection[i].item = data.goodsNo
this.multipleSelection[i].goodsDesc = data.goodsDesc
}
console.log(this.multipleSelection)
},
// getLableTitle(){
// console.log(this.goodPlug,'我要疯了啦啦啦啦啦啦啦啦啦啦了')
// if(this.lengthUnit){
// this.goodPlug[4].label = `长(${sessionStorage.getItem("lengthUnit")})`
// this.goodPlug[5].label = `宽(${sessionStorage.getItem("lengthUnit")})`
// this.goodPlug[6].label = `高(${sessionStorage.getItem("lengthUnit")})`
// }else{
// this.goodPlug[4].label = `长(CM)`
// this.goodPlug[5].label = `宽(CM)`
// this.goodPlug[6].label = `高(CM)`
// }
// },
// getStorage(){
// console.log(sessionStorage.getItem("lengthUnit"))
// this.lengthUnit = sessionStorage.getItem("lengthUnit")
// },
handleDelete(val){
console.log(val)
this.containerItem.splice(val,1)
},
//批量删除
handleDeleteGoods(){
console.log(this.multipleSelection)
console.log(this.goodsitem)
for (var i=0; i<this.multipleSelection.length; i++) {
for (var j = 0; j < this.goodsitem.length; j++) {
if (this.multipleSelection[i].index == this.goodsitem[j].index) {
this.goodsitem.splice(j, 1);
break;
}
}
}
},
handleExportTemplate(){
exportTemplate(this.query).then(res => {
this.fileDownload(res.data,"货物档案导入模板.xlsx");
});
},
uploadSuccess(response){
this.$message({
type: "success",
message: response.msg
});
this.onLoad(this.page);
},
uploadError(response){
let message = response.message;
let parse = JSON.parse(message);
this.$message({
type: "error",
message: parse.msg
});
},
//第二部 单选框改变 切换editTable
radioChange(){
this.goodsitem = []
if(this.goodsFrom === '1'){
this.goodPlug = this.goodPlug1
}
if(this.goodsFrom === '2'){
if(this.cjKind.title === '单柜单货，求货物最多'
|| this.cjKind.title === '单柜单货，求用柜最少'){
this.$message.warning('提醒：你选择的是单货类型，所以你只能录入1种货物')
return
}else{
this.goodPlug = this.goodPlug2
}
}else if (this.goodsFrom === '3'){
//按一部分货物数据固定，其他的能装多少算多少 ,所以不能选择第三个radio
if(this.cjKind.title === '单柜单货，求货物最多'
|| this.cjKind.title === '单柜单货，求用柜最少'){
this.$message.warning('提醒：你选择的是单货类型，所以你只能录入1种货物')
return
}else{
this.goodPlug = this.goodPlug3
}
}
},
//选择已保存的数据
handleChoose(){
this.myTitle = '选择已保存的货物'
this.showGoodsList = true;
},
dialogCloseSuccess(){
this.showGoodsList = false;
this.onLoad(this.page)
},
handleSelectionChange(val){
console.log(val)
this.multipleSelection = val
},
selectionChange(list) {
this.selectionList = list;
},
handlePackageGoods(){
// console.log(this.multipleSelection)
if (this.multipleSelection.length < 2) {
this.$message.warning("请选择至少2条数据");
return;
}
this.goodPlug = this.goodPlug4
this.formTitle = '生成套装货物'
this.dialogFlagToUp = true;
this.packageGoodsData = this.multipleSelection
this.isSaveMessage = 'fromSteps'
this.packageGoodsGuid = "";
},
dialogCloseToUp() {
this.showGoodsList = false;
},
dialogCloseToUpSuccess () {
this.dialogFlagToUp = false;
this.onLoad(this.page)
},
delRow(type, row) {
if (row.id) {
this.$confirm("确认删除改行数据吗?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this[`${type}Del`].push(row.id);
this[`${type}`].splice(row.index, 1)
});
} else {
this[`${type}`].splice(row.index, 1)
}
},
onLoad(){
console.log(this.cantainerKey)
},
getContainer(){
//1集装箱2 托盘3纸箱
getContainer("1").then(res => {
let myContainerName = []
for (let i = 0 ; i < res.data.data.length; i++){
myContainerName.push({id:i+1,name:res.data.data[i].noName,guid:res.data.data[i].guid});
}
console.log(myContainerName)
this.containerList = myContainerName
});
},
changeLeft(){
console.log(this.cjKind)
console.log(this.containerItem)
console.log( this.chooseContainer)
//判断是否是单柜类型
if(this.cjKind.title === '单柜单货，求货物最多'
|| this.cjKind.title === '单柜单货，求用柜最少'
|| this.cjKind.title === '单柜多货，求货物最多'
|| this.cjKind.title === '单柜多货，求用柜最少') {
if(this.containerItem.length > 0){
this.$message.warning('提醒：你选择的是单柜类型，所以你只能录入一种容器')
return
}
}
//每种规格的集装箱只能选择一次，可更改数量
if(this.containerItem.length > 0){
for(let i = 0; i < this.chooseContainer.length; i++){
for(let j = 0; j < this.containerItem.length; j++){
console.log(this.chooseContainer[i].name)
console.log(this.containerItem[j].name)
if(this.chooseContainer[i].name == this.containerItem[j].name){
this.$message({
message: '已有该规格的容器了',
type: 'warning'
});
return
}
}
this.chooseContainer[0].$cellEdit = true
this.containerItem.push(this.chooseContainer[0])
}
}else{
this.chooseContainer[0].$cellEdit = true
this.containerItem.push(this.chooseContainer[0])
}
console.log(this.containerItem)
},
handleChangeContainer(val){
console.log(val)
console.log(this.cantainerKey)
this.chooseContainer = []
this.cantainerKey = val
console.log(this.containerList[val])
if( this.cjKind.title === '单柜单货，求用柜最少'
|| this.cjKind.title === '单柜多货，求用柜最少'){
this.containerList[val].qty = 0
}else{
this.containerList[val].qty = 1
}
this.chooseContainer.push(this.containerList[val])
console.log( this.chooseContainer)
},
handleChangeColor(val){
console.log(val)
console.log(this.goodsList[val])
this.cjKind = this.goodsList[val]
this.key = val
},
changeNav(index) {
console.log(index)
console.log(this.form.explain)
console.log(this.cjKind)
if (index == 1) {
this.Index = 1;
} else if (index == 2) {
this.Index = 2;
} else if (index == 3) {
this.Index = 3
}else if (index == 4) {
this.Index = 4
}else if (index == 6) {
alert('2122112')
this.Index = 6
}
},
matlabCalculation(){
this.fullscreenLoading = true;
let matlab = {};
// 备注
matlab.explain = this.form.explain;
// 装载类型
matlab.cjKind = this.cjKind.val;
// 货物规则
matlab.goodsFrom = this.goodsFrom;
//货物集合
matlab.goodsItem = this.goodsitem;
// 容器集合
matlab.containerItem = this.containerItem;
/**
* 堆放方式
* 0、相同的货物可以堆叠
* 1、接触面相同尺寸的货物可以堆叠
* **/
matlab.stackingMode = this.solution.stackingMode;
// 是否平铺
matlab.pingpu = this.solution.pingpu[0] === null ? 'N':"Y";
// 堆叠层数设置(包含本层)
matlab.stackingLayer = this.solution.stackingLayer;
matlab.lengthWay = this.solution.lengthWay;
matlab.widthWay = this.solution.widthWay;
matlab.heightWay = this.solution.heightWay;
matlab.lengthType = this.solution.lengthType;
matlab.widthType = this.solution.widthType;
matlab.heightType = this.solution.heightType;
matlabCalculation(matlab).then(() => {
this.$message({
type: "success",
message: "操作成功!"
});
this.changeNav6 = false;
this.fullscreenLoading = false;
})
},
}
}
</script>
<style scoped>
#box{
width: 100%;
height: 100%;
background: white;
padding: 10px;
overflow: hidden;
}
#leftBox{
width: 20%;
float: left;
/*border: 1px solid black;*/
}
#rightBox{
width: 80%;
float: left;
/*border: 1px solid black;*/
}
#leftBox, #rightBox{
height: 100%;
overflow: auto
}
/*标签初始化*/
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, button, textarea {
margin: 0;
padding: 0;
border: none;
list-style:none
}
/*标签初始化*/
html,body {
height:100%;overflow:hidden;
}
>>> .el-radio-group {
font-size: 12px;
padding: 10px;
margin-left: -10px;
}
/*媒体查询*/
/*1024*/
@media screen and (min-width:1024px) {
#leftContainer, #rightContainer {
min-height:82vh;
overflow-y: hidden;
}
}
/*1101*/
@media screen and (min-width:1101px) and (max-width:1280px){
#leftContainer, #rightContainer {
min-height:82vh;
overflow-y: hidden;
}
}
@media screen and (min-width:1507px) and (max-width:1619px){
#leftContainer, #rightContainer {
min-height:82vh;
overflow-y: hidden;
}
}
@media screen and (min-width:1620px) and (max-width:1848px){
#leftContainer, #rightContainer {
min-height:82vh!important;
overflow-y: hidden;
}
.smallBox[data-v-3c60614f] {
width: 90%;
height: 80px;
border: 1px solid #dddddd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#leftContainer{
min-height:82vh!important;
padding: 5px 20px 5px 20px;
width: 100%;
overflow-y: hidden;
background:#fff;
box-shadow:2px 6px 6px #eee;
border:1px solid #e9e9e9;
}
#rightContainer{
position: relative;
min-height:82vh!important;
overflow-y: hidden;
padding: 5px 10px 5px 30px;
margin-left: 2%;
width: 98%;
background:#fff;
box-shadow:2px 6px 6px #eee;
border:1px solid #e9e9e9;
}
}
#leftUl li div{
color: #3c4353;
font-weight: 400;
}
>>>.el-tooltip avue-checkbox{
margin-left: 20px;
}
>>>.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
>>>.el-input-number--small .el-input-number__decrease{
width: 32px;
display: none;
font-size: 13px;
}
>>> .el-input-number--small .el-input-number__increase {
width: 32px;
display: none!important;
font-size: 13px;
}
>>>.el-input-number--small .el-input__inner {
padding-left: 39px;
padding-right: 15px;
text-align: right;
}
>>>.el-input-number.is-controls-right .el-input__inner {
padding-left: 15px;
text-align: right;
padding-right: 15px;
}
.leftResult{
width: 80%;
}
.rightResult{
width: 20%;
border: 1px solid #e9e9eb;
/*background: #99ffcc;*/
}
>>>.el-tree {
/*background: #99ffcc;*/
position: relative;
cursor: default;
/* background: #FFF; */
color: #606266;
font-weight: 400;
font-size: 12px;
}
>>>.el-tree-node__label {
font-size: 7px;
}
>>>.avue-form__group{
margin-bottom: -20px;
}
>>>.avue-group__header {
margin-bottom: 10px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 30px;
line-height: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
>>>.el-form-item{
margin-bottom: 0px!important;
}
>>>.el-radio-group {
font-size: 12px;
padding: 10px;
}
>>>.el-radio, .el-radio--medium.is-bordered .el-radio__label {
font-size: 12px;
}
/*#editTable >>> .el-input-number__increase, >>> .el-input-number__decrease {*/
/*display: none;*/
/*!*width: 0px;*!*/
/*}*/
#editTable >>> .el-input-number{
width: 95px;
}
/*#editTable >>> .el-input__inner{*/
/*padding-left: 0px;*/
/*padding-right: 0px;*/
/*text-align: center!important;*/
/*}*/
>>>el-input el-inut --small{
width: 80px!important;
}
>>>.avue-crud__menu{
display: none;
}
.leftTransferBox{
width: 28%;
/*height: 250px;*/
height: 60vh;
overflow-y: auto;
border: 1px solid #ddd;
}
.rightTransferBox{
width: 60%;
/*height: 250px;*/
height: 60vh;
border: 1px solid #ddd;
}
.changeColor {
background:#e6f1fe;
}
>>>.el-button--medium {
padding: 8px 18px!important;
font-size: 14px;
border-radius: 4px;
}
>>>.el-card__body{
display: flex;
}
.marginLeft{
margin-left: 10px;
}
.arrow{
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #0099CC;
}
#leftContainer{
min-height:80vh;
padding: 5px 20px 5px 20px;
width: 100%;
overflow-y: hidden;
background:#fff;
box-shadow:2px 6px 6px #eee;
border:1px solid #e9e9e9;
}
#leftContainer ul li{
padding: 20px;
display: flex;
flex-direction: row;
height: 20px;
line-height: 7px;
}
.rightImg{
width: 100px;
}
.rightBox{
padding-left: 26px;padding-top: 2px;
}
.smallTitle{
font-size: 18px;
border-bottom: 1px solid #e9e9e9;
font-weight: 600;
}
.rightDescription{
color: #a62bff;
font-weight: 600;
}
.smallBox{
width:90%;
height: 70px;
border: 1px solid #dddddd;
display: flex
}
#leftContainer, #rightContainer {
min-height:80vh;
overflow-y: hidden;
}
#rightContainer{
position: relative;
min-height:80vh;
overflow-y: hidden;
padding: 5px 10px 5px 30px;
margin-left: 2%;
width: 98%;
background:#fff;
box-shadow:2px 6px 6px #eee;
border:1px solid #e9e9e9;
}
.active1 {
color: #fff;
background: #e74c3c;
width: 5px;height: 5px;background: red;
border: 1px solid red;
}
</style>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)