<template>
<a-card size="small" :bordered="false">
<a-row>
<a-button type="primary" @click="showModal">Primary</a-button>
</a-row>
<!-- -->
<a-modal v-model="visible" title="Title" on-ok="handleOk" width="80%">
<template slot="footer">
<a-button key="back" @click="handleCancel">
Return
</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">
Submit
</a-button>
</template>
<a-row type="flex">
<a-col flex="auto">
<a-table
:customRow="rowClickLeft"
:columns="leftcolumns"
:data-source="leftdata"
:rowKey="(record,index)=>index"
size="small"
:pagination="false"
bordered
/>
</a-col>
<a-col flex="100px">
<div class="transfer-all-btn">
<a-button type="primary" :disabled="disabledright" @click="transferRight">
<a-icon type="right" />
</a-button>
<a-button type="primary" :disabled="disabledleft" @click="transferLeft">
<a-icon type="left" />
</a-button>
<a-button type="primary" :disabled="disabledup" @click="upLayer">
<a-icon type="up" />
</a-button>
<a-button type="primary" :disabled="disableddown" @click="downLayer">
<a-icon type="down" />
</a-button>
</div>
</a-col>
<a-col flex="auto">
<a-table
:customRow="rowClick"
:columns="rightcolumns"
:data-source="rightdata"
:rowKey="(record,index)=>index"
size="small"
:pagination="false"
bordered
style="height: 600px;overflow-y: scroll;"
/>
</a-col>
</a-row>
</a-modal>
</a-card>
</template>
<script>
export default {
name: "newApplication",
components: {},
data() {
return {
currRowName:null,
currRowNameFlag:null,//左侧
selectIndex:null,
disabledright: true,
disabledleft: true,
disabledup: true,
disableddown: true,
loading: false,
visible: false,
leftcolumns: [
{
title: "名称",
dataIndex: "name",
},
{
title: "Description",
dataIndex: "description",
},
],
leftdata: [],
rightcolumns: [
{
title: "名称",
dataIndex: "name",
},
{
title: "Description",
dataIndex: "description",
},
],
rightdata: [
{ name: "PRODUCT", description: "PRODUCT" },
{ name: "TECHNOLOGY", description: "TECHNOLOGY" },
{ name: "FABID", description: "FABID" },
{ name: "MEASUREMENTEQUIPMENT", description: "MEASUREMENTEQUIPMENT" },
{ name: "PROCESSEQUIPMENT", description: "PROCESSEQUIPMENT" },
{ name: "TOTALSITECOUNT", description: "TOTALSITECOUNT" },
{ name: "PPID", description: "PPID" },
{ name: "AREA", description: "AREA" },
{ name: "MEASUREMENTEDCPLAN", description: " MEASUREMENTEDCPLAN" },
{
name: "MEASUREMENTEQUIPMENTTYPE",
description: " MEASUREMENTEQUIPMENTTYPE",
},
{ name: "MEASUREMENTRECIPE", description: " MEASUREMENTRECIPE" },
{ name: "PROCESSEQUIPMENTTYPE", description: " PROCESSEQUIPMENTTYPE" },
{ name: "PROCESSCHAMBER", description: " PROCESSCHAMBER" },
{ name: "PROCESSTIME", description: " PROCESSTIME" },
{ name: "RUNTYPE", description: " RUNTYPE" },
{ name: "RUNCARDID", description: " RUNCARDID" },
{ name: "PILOTFLAG", description: " PILOTFLAG" },
{ name: "CUSTOMER", description: " CUSTOMER" },
{ name: "PDCFLAG", description: " PDCFLAG" },
{ name: "RETICLE", description: " RETICLE" },
{ name: "LOTID", description: " LOTID" },
{ name: "WAFERID", description: " WAFERID" },
{ name: "SITEID", description: " SITEID" },
{ name: "STEPID", description: " STEPID" },
{ name: "ROUTEID", description: " ROUTEID" },
{ name: "PLANID", description: " PLANID" },
{ name: "OPERATORID", description: " OPERATORID" },
{ name: "ISEXCLUDE", description: " ISEXCLUDE" },
{ name: "BATCHID", description: " BATCHID" },
{ name: "STEPSEQ", description: " STEPSEQ" },
{ name: "STAGE", description: " STAGE" },
{ name: "MEASUREMENTROUTE", description: " MEASUREMENTROUTE" },
{ name: "MEASUREMENTSTEP", description: " MEASUREMENTSTEP" },
{ name: "MEASUREMENTPLAN", description: " MEASUREMENTPLAN " },
{ name: "MEASUREMENTSTEPSEQ", description: " MEASUREMENTSTEPSEQ" },
{ name: "MEASUREMENTSTAGE", description: " MEASUREMENTSTAGE" },
{ name: "MEASUREMENTTIME", description: " MEASUREMENTTIME" },
{ name: "X", description: " X" },
{ name: "Y", description: " Y" },
{ name: "WAFERTYPE", description: " WAFERTYPE" },
],
};
},
computed: {},
watch: {},
mounted(){
},
methods: {
upLayer(){
let that =this;
let index = that.selectIndex;
if (index == 0) {
//处于顶端,不能继续上移
that.disabledup =true;
} else {
that.disabledup =false;
let upDate = that.leftdata[index - 1];
that.leftdata.splice(index - 1, 1);
that.leftdata.splice(index, 0, upDate);
that.selectIndex = index - 1;
if (that.selectIndex == 0) {
//处于顶端,不能继续上移
that.disabledup =true;
that.disableddown = false;
}
}
},
downLayer(){
let that =this;
let index = that.selectIndex;
if (index + 1 === that.leftdata.length) {
//处于末端端,不能继续下移
that.disableddown = true;
} else {
that.disableddown = false;
let downDate = that.leftdata[index + 1];
that.leftdata.splice(index + 1, 1);
that.leftdata.splice(index, 0, downDate);
that.selectIndex = index + 1;
console.log(that.selectIndex , that.leftdata.length)
if (that.selectIndex == that.leftdata.length - 1) {
//处于顶端,不能继续上移
that.disableddown = true;
that.disabledup = false;
}
}
},
transferRight(){
this.rightdata.push({ name: this.currRowNameFlag, description: this.currRowNameFlag })
const leftdata = [...this.leftdata];
this.leftdata = leftdata.filter(item => item.name !== this.currRowNameFlag);
this.disabledright = true;
},
transferLeft(){
this.leftdata.push({ name: this.currRowName, description: this.currRowName })
const rightdata = [...this.rightdata];
this.rightdata = rightdata.filter(item => item.name !== this.currRowName);
this.disabledleft = true;
this.disabledup =true;
this.disableddown = true;
},
rowClick(record, index) {
return {
style: {
// 行背景色
'background-color': record.name === this.currRowName ? '#56c9ff' : 'white'
},
on: {
click: (event) => {
// 记录当前点击的行标识
this.currRowName = record.name
this.disabledleft = false;
this.disabledright = true;
this.currRowNameFlag = null;
this.disabledup =true;
this.disableddown = true;
},
},
};
},
rowClickLeft(record, index) {
return {
style: {
// 行背景色
'background-color': record.name === this.currRowNameFlag ? '#56c9ff' : 'white'
},
on: {
click: (event) => {
// 记录当前点击的行标识
this.currRowNameFlag = record.name;
this.disabledright = false;
this.disabledleft = true;
this.currRowName = null;
let that =this;
that.selectIndex = index;
if (index == 0) {
//处于顶端,不能继续上移
that.disabledup =true;
} else {
that.disabledup =false;
}
if (index + 1 === that.leftdata.length) {
//处于末端端,不能继续下移
that.disableddown = true;
} else {
that.disableddown = false;
}
},
},
};
},
showModal() {
this.visible = true;
},
handleOk(e) {
this.loading = true;
setTimeout(() => {
this.visible = false;
this.loading = false;
}, 3000);
},
handleCancel(e) {
this.visible = false;
},
},
};
</script>
<style scoped lang="less" scoped>
.transfer-all-btn {
display: inline-block;
margin: 0 8px;
overflow: hidden;
vertical-align: middle;
}
.transfer-all-btn .ant-btn {
display: block;
margin-bottom: 8px;
}
.transfer-all-btn .ant-btn:last-child {
display: block;
margin-bottom: 0px;
}
::v-deep .ant-table-body{
color: #000;
}
::v-deep .ant-table-thead > tr > th{
padding: 10px 5px !important;
font-size: 14px !important;
}
::v-deep .ant-table-tbody > tr > td{
padding: 10px 5px !important;
font-family: Verdana, Helvetica, Arial, sans-serif !important;
font-size: 12px !important;
a{
color: #0000ff;
}
}
::v-deep .ant-table-thead > tr > th{
padding:2px 2px !important;
font-size: 12px !important;
}
::v-deep .ant-table-tbody > tr > td{
padding:2px 2px !important;
font-size: 12px !important;
}
.ant-table-tbody{
tr{
::v-deep td{
padding:2px 2px !important;
font-size: 12px !important;
}
}
}
::v-deep .ant-table-tbody{
> tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
background:none !important;
//这里是将鼠标移入时的背景色取消掉了
}
}
</style>
Ant Design of Vue实现穿梭框可左右穿梭上下排序
最新推荐文章于 2024-07-11 18:35:43 发布