场景：
选择商品展示效果可直观化——穿梭框形式
效果
<!--活动设置-满减活动列表-新增页面reduce_settings-->
<template>
<div id="reduce_settings">
<div style="font-size: 12px;">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/CurriculumNav/Comment' }" style="font-size: 12px"><i class="el-icon-s-home" style="color: #15A8FD;font-size: 14px;"></i> 首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/ShopNav/activity_settings' }" style="font-size: 12px">活动设置</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/ShopNav/activity_reduce' }" style="font-size: 12px">满减活动列表</el-breadcrumb-item>
<el-breadcrumb-item style="font-size: 12px">编辑</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="markingInfobox" v-loading="domeloding">
<p class="titleP"><span class="titleinfoP">基本信息</span><span class="bluespan"></span></p>
<div class="formBox">
<p>活动标题<span class="redspan">*</span>
<el-input v-model="Title" placeholder="请输入标题" clearable style="width: 300px;"></el-input>
</p>
<p>选择商品<span class="redspan">*</span>
<el-input v-model="goodsName" placeholder="请选择活动商品" disabled style="width: 300px;"></el-input>
<el-button type="primary" @click="reduceGoodsVisible = true">选择商品</el-button>
<span style="font-size: 14px;color: #B2B2B2;">不选择商品即默认全部商品满减</span>
</p>
<p>活动价格<span class="redspan">*</span>
满
<el-input type="number" v-model="reach_amount" placeholder="请输入金额" clearable style="width: 150px;"></el-input>
减
<el-input type="number" v-model="reduce_amount" placeholder="请输入金额" clearable style="width: 150px;"></el-input>
</p>
<p>活动时间<span class="redspan">*</span>
<el-date-picker
v-model="Start"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始时间">
</el-date-picker>
<span class="timecenter">至</span>
<el-date-picker
v-model="End"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间">
</el-date-picker>
</p>
<p>满减次数<span class="redspan">*</span>
<el-input type="number" v-model="Reduce_Num" placeholder="默认不限数量" clearable style="width: 300px;"></el-input>
<span style="font-size: 14px;color: #B2B2B2;">限制每个订单可购买几组活动商品</span>
</p>
<p>展示时间<span class="redspan">*</span>
<span style="margin-right: 10px;">是否立即展示活动商品信息</span>
<el-radio v-model="Valid" label="0">是</el-radio>
<el-radio v-model="Valid" label="1">否</el-radio>
</p>
</div>
<div class="submitmarking">
<el-button v-if="seckillIDBool" type="primary" @click="editSeckillSubmit">提交编辑保存</el-button>
<el-button v-else type="primary" @click="seckillSubmit">提交保存</el-button>
</div>
</div>
<!--选择活动商品弹框-->
<el-dialog
title="选择活动商品"
:visible.sync="reduceGoodsVisible"
width="1000px">
<div class="TransferBox">
<!--左边待选择-->
<div class="SourceBox">
<!--筛选-->
<div>
<el-input placeholder="请输入内容" v-model="searchKey" class="input-with-select">
<el-select v-model="classification" slot="prepend" placeholder="请选择" style="width: 45px">
<el-option
v-for="item in classificationoptions"
:key="item.id"
:label="item.title"
:value="item.id">
</el-option>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="searchClickFUn"></el-button>
</el-input>
</div>
<el-table
:border="true"
height="500"
v-loading="goodesLoding"
ref="multipleTable"
:data="shopOptions"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="46">
</el-table-column>
<el-table-column
prop="title"
label="商品"
width="200">
</el-table-column>
<el-table-column
prop="spec_text"
label="规格">
</el-table-column>
</el-table>
</div>
<!--按钮-->
<div class="buttonCentenr">
<div class="posiBox">
<p><el-button @click="deleteGoodesLeft"><i class="el-icon-arrow-left"></i></el-button></p>
<p><el-button type="primary" @click="AddGoodesRight"><i class="el-icon-arrow-right" ></i></el-button></p>
</div>
</div>
<!--右边已选择-->
<div class="TargetBox">
<div class="titletableBox">
<p>已选择</p>
</div>
<el-table
:border="true"
height="500"
:data="TargetShopOptions"
tooltip-effect="dark"
@selection-change="deleteChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="title"
label="商品"
width="200">
</el-table-column>
<el-table-column
prop="spec_text"
label="规格">
</el-table-column>
</el-table>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="reduceGoodsVisible = false">取 消</el-button>
<el-button type="primary" @click="yesshopName">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
```cpp
<script>
import allApi from '../../assets/js/request.js'
export default {
data () {
return {
domeloding:false,
Title:'',//标题
reach_amount:'',//满【金额】
reduce_amount:'',//减【金额】
Start:'',//开始时间
End:'',//结束时间
Reduce_Num:'',//满减次数
Valid:'1',//是否展示
goodsName:'',//展示的活动商品名称集合
seckillIDBool:false,//是否为编辑
/*商品选择弹框数据*/
reduceGoodsVisible:false,//选择商品弹框
goodesLoding:true,//商品加载
shopOptions: [],//商品名称规格数组数据
multipleSelection: [],//全部商品多选选中
TargetMultipleSelection: [],//已选商品多选选中
classificationoptions: [],//商品分类
classification: '',//商品分类选中ID
searchKey:'',//商品搜索输入框
TargetShopOptions:[],//已选择商品数据
addgoodsListArr:[],//确认传递保存商品数据列表
}
},
components:{
},
computed: {
},
created(){
/*判断是否为编辑秒杀活动，是：路由携带SecKillID*/
if(this.$route.query.seckillID!==undefined){
this.editReduceInfoCreated();//获取信息
this.seckillIDBool=true
}
/*获取商品列表*/
let self=this;
this.axios.post(allApi.GetGoodsInfo,{PageIndex: 1, PageSize: 10000}
).then(function (res) {
if(res.data.IsSuccess){
self.goodesLoding=false;
self.shopOptions=res.data.Result.Data
}else{
self.goodesLoding=false;
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
/*获取商品分类*/
this.axios.post(allApi.GetEntityCategory,{}
).then(function (res) {
if(res.data.IsSuccess){
self.classificationoptions=res.data.Result
}else{
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
},
methods: {
/*左边全部商品数据选中监听*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
/*右边边商品数据选中监听*/
deleteChange(val){
this.TargetMultipleSelection=val;
},
/*穿梭框到右边*/
AddGoodesRight(){
this.TargetShopOptions=this.multipleSelection;
},
/*穿梭到左边*/
deleteGoodesLeft(){
let TargetShopOptions=this.TargetShopOptions;//右边已选择表格数据
let TargetMultipleSelection=this.TargetMultipleSelection;//已选商品多选选中change数据
let deleteArry=[];//相同id的数据
TargetShopOptions.forEach(function (value, index, array) {
TargetMultipleSelection.forEach(function (item, itemindex, itemarray) {
if(value.id==item.id){
deleteArry.push(item.id);
}
})
});
let deletemultipleSelection=this.multipleSelection;//右边已选择change数据
/*返回去掉已经选中的右边数据*/
deletemultipleSelection = deletemultipleSelection.filter(function(item){
return deleteArry.indexOf(item.id) == -1;
});
this.TargetShopOptions=deletemultipleSelection;//右边已选择重新赋值
this.toggleSelection(TargetMultipleSelection)//调用取消左边选中函数事件，将数据传输过去即可，调用ele的toggleRowSelection函数
},
/*取消商品已选择函数*/
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
/*搜索商品获取产品*/
searchClickFUn(){
this.goodesLoding=true;
let self=this;
this.axios.post(allApi.GetGoodsInfo,{category:this.classification,key:this.searchKey,PageIndex: 1, PageSize: 10000}
).then(function (res) {
if(res.data.IsSuccess){
self.shopOptions=res.data.Result.Data;
self.goodesLoding=false;
}else{
self.goodesLoding=false;
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
},
/*弹框确定赋值到页面输入框*/
yesshopName(){
this.goodsName='';
this.addgoodsListArr=this.TargetShopOptions;
let self=this;
this.addgoodsListArr.forEach(function (value, index, array) {
self.goodsName+=value.title+'、';
});
self.reduceGoodsVisible=false;
},
/*编辑提交保存*/
editSeckillSubmit(){
if(this.Mustfill()){
let goodsID=[];
this.addgoodsListArr.forEach(function (value, index, array) {
goodsID.push(value.id)
});
let SecKillData={
Title:this.Title,
reach_amount:this.reach_amount,
reduce_amount:this.reduce_amount,
Start:this.Start.getTime(),
End:this.End.getTime(),
Reduce_Num:this.Reduce_Num,
Valid:this.Valid,
GoodsList:goodsID,
ID:this.$route.query.seckillID,
};
let self=this;
this.axios.post(allApi.EditAmount_Reduce,SecKillData
).then(function (res) {
if(res.data.IsSuccess){
if(res.data.Result){
self.$message.success("满减商品提交编辑保存成功，请在满减列表查看");
// self.clearform();//清空
}else{
self.$message.error(res.data.ErrorMsg);
}
}else{
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
}
},
/*提交保存*/
seckillSubmit(){
if(this.Mustfill()){
let goodsID=[];
this.addgoodsListArr.forEach(function (value, index, array) {
goodsID.push(value.id)
});
let SecKillData={
Title:this.Title,
reach_amount:this.reach_amount,
reduce_amount:this.reduce_amount,
Start:this.Start.getTime(),
End:this.End.getTime(),
Reduce_Num:this.Reduce_Num,
Valid:this.Valid,
GoodsList:goodsID
};
let self=this;
this.axios.post(allApi.AddAmount_Reduce,SecKillData
).then(function (res) {
if(res.data.IsSuccess){
if(res.data.Result){
self.$message.success("满减商品提交保存成功，请在满减列表查看");
self.clearform();//清空
}else{
self.$message.error(res.data.ErrorMsg);
}
}else{
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
}
},
/*清空表单*/
clearform(){
this.Title='';
this.goodsName=''
this.reach_amount='';
this.reduce_amount='';
this.Start='';
this.End='';
this.Reduce_Num='';
this.Valid='1';
this.toggleSelection(this.TargetShopOptions);//清空左边全部商品已选择
this.TargetShopOptions=[];//清空右边商品已选择
this.addgoodsListArr=[];//清空传递
},
/*获取编辑信息*/
editReduceInfoCreated(){
this.domeloding=true;
let self=this;
this.axios.post(allApi.GetAmount_ReduceModel ,{id:this.$route.query.seckillID}
).then(function (res) {
if(res.data.IsSuccess){
self.Title=res.data.Result.title;
self.goodsName=res.data.Result.goodsName;
self.reach_amount=res.data.Result.reach_amount;
self.reduce_amount=res.data.Result.reduce_amount;
self.Start=new Date(res.data.Result.start);
self.End=new Date(res.data.Result.end);
self.Reduce_Num=res.data.Result.reduce_num;
self.Valid=res.data.Result.valid.toString();
self.TargetShopOptions=res.data.Result.GoodsList;
self.addgoodsListArr=res.data.Result.GoodsList;
self.domeloding=false
// self.toggleSelection(res.data.Result.GoodsList);//清空左边全部商品已选择
}else{
self.$message.error("请求失败");
}
}).catch(function (res) {
console.log(res)
});
},
/*验证必填*/
Mustfill(){
if(this.Title==''){
this.$message.error("活动标题不能为空");
return false
}else if(this.reach_amount==''){
this.$message.error("填写满减金额");
return false
}else if(this.reduce_amount==''){
this.$message.error("填写满减金额");
return false
}else if(this.Start=='' || this.End==''){
this.$message.error("选择活动时间");
return false
}else if(this.Reduce_Num==''){
this.$message.error("填写满减次数");
return false
}else{
return true
}
}
},
mounted () {//挂载完成
},
watch:{//监听
},
}
</script><style scoped>
.titletableBox{
height:40px;
background-color: rgba(24, 144, 255, 1);
color: #ffffff;
line-height: 40px;
text-align: center;
}
.TransferBox{
display: flex;
}
.SourceBox{
width: 400px;
}
.buttonCentenr{
position: relative;
width: 150px;
}
.posiBox{
position: absolute;
top: 100px;
left: 50px;
}
.posiBox p{
margin-top: 50px;
}
.TargetBox{
width: 400px;
}
#reduce_settings{
height: 100%;
}
.markingInfobox{
background-color: #ffffff;
position: fixed;
top: 90px;
left: 180px;
bottom: 80px;
right: 10px;
overflow-y: auto;
padding: 30px 50px;
}
.titleP{
position: relative;
}
.titleinfoP{
height:20px;
line-height: 20px;
margin-right: 5px;
color:rgba(21,168,253,1);
font-size: 18px;
display: inline-block;
}
.bluespan{
display: inline-block;
width:3px;
height:20px;
background:rgba(21,168,253,1);
position: absolute;
}
.formBox p{
margin-top: 25px;
font-size: 16px;
color: #333333;
}
.submitmarking{
margin-top: 40px;
}
.redspan{
color: red;
display: inline-block;
width: 20px;
text-align: center;
}
.timecenter{
font-size: 14px;
display: inline-block;
width: 20px;
text-align: center;
}
</style>
<style>
#reduce_settings .formBox .el-input__inner{
background-color:rgba(245,247,253,1)!important;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
