这是一个用于配置导出样本数据的界面，用户可以选取所需的输入栏并设置导出选项，包括导出格式、是否包含标记等内容。
<template>
<div>
<a-button @click="showModal"> Export Smples </a-button>
<a-modal
v-model="visible"
title="Export Smples"
@ok="handleOk"
width="636px"
>
<div style="width: 588px">
<h4>输入栏选择</h4>
<a-row type="flex">
<a-col flex="auto"> 要导出的输入栏 </a-col>
<a-col flex="50px"></a-col>
<a-col flex="auto"> 可使用的输入栏 </a-col>
</a-row>
<a-row type="flex">
<a-col flex="auto">
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeysLeft,
onChange: onSelectChangeLeft,
onSelect: onSelectRowLeft,
}"
:customRow="rowClickLeft"
:columns="leftcolumns"
:data-source="leftdata"
:rowKey="(record, index) => record.id"
size="small"
:pagination="false"
bordered
style="width: 269px; height: 300px; overflow-y: scroll"
/>
</a-col>
<a-col flex="50px">
<div class="transfer-all-btn">
<a-button
type="primary"
size="small"
:disabled="disabledright"
@click="transferRight"
>
<a-icon type="right" />
</a-button>
<a-button
type="primary"
size="small"
:disabled="disabledleft"
@click="transferLeft"
>
<a-icon type="left" />
</a-button>
<a-button
type="primary"
size="small"
:disabled="disabledup"
@click="upLayer"
>
<a-icon type="up" />
</a-button>
<a-button
type="primary"
size="small"
:disabled="disableddown"
@click="downLayer"
>
<a-icon type="down" />
</a-button>
</div>
</a-col>
<a-col flex="auto">
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeysRight,
onChange: onSelectChangeRight,
onSelect: onSelectRowRight,
}"
:customRow="rowClick"
:columns="rightcolumns"
:data-source="rightdata"
:rowKey="(record, index) => record.id"
size="small"
:pagination="false"
bordered
style="width: 269px; height: 300px; overflow-y: scroll"
/>
</a-col>
</a-row>
<div>
<h4>导出选项</h4>
<a-checkbox-group>
<a-row>
<a-col :span="8">
<a-checkbox value="1">导出已标记的抽样值</a-checkbox></a-col
>
<a-col :span="16">
<a-checkbox value="2">创造标头</a-checkbox></a-col
>
<a-col :span="8">
<a-checkbox value="3">导出原始数值</a-checkbox></a-col
>
<a-col :span="8">
<a-checkbox value="4">创造列的标头</a-checkbox></a-col
>
<a-col :span="8">
<a-checkbox value="5" disabled>Separ files</a-checkbox></a-col
>
<a-col :span="8">
<a-checkbox value="6">导出原始级别的标记</a-checkbox></a-col
>
<a-col :span="16">
<a-checkbox value="7">导出属性数据</a-checkbox></a-col
>
</a-row>
</a-checkbox-group>
<h4>导出文件</h4>
<a-row>
<a-col :span="6">文件</a-col>
<a-col :span="12"><a-input></a-input></a-col>
</a-row>
<a-row>
<a-col :span="6">格式</a-col>
<a-col :span="12">
<a-select
default-value="csv"
style="width: 100%;"
@change="handleFilesChange"
>
<a-select-option value="csv">
comma separated Values(*.csv)
</a-select-option>
<a-select-option value="xlsx">
Excel file (*.xlsx)
</a-select-option>
<a-select-option value="csd">
Corenrstone dataset(*.csd)
</a-select-option>
<a-select-option value="txt"> ASC ll(*.txt) </a-select-option>
<a-select-option value="dfd"> qs-STAT (*.dfd) </a-select-option>
</a-select>
</a-col>
</a-row>
</div>
</div>
<template slot="footer">
<a-button> 导出 </a-button>
<a-button key="back" @click="handleCancel"> 关闭 </a-button>
<a-button key="submit" type="primary" @click="handleOk">
保存为预先设置的值
</a-button>
</template>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
selectedRowKeysRightobj: [],
selectedRowKeysLeftobj: [],
selectedRowKeysRight: [],
selectedRowKeysLeft: [],
currRowNameFlagtype: null,
currRowNametype: null,
currRowName: null,
currRowNameFlag: null, //左侧
selectIndex: null,
selectIndexleft: null,
lengtharr: [],
disabledright: true,
disabledleft: true,
disabledup: true,
disableddown: true,
loading: false,
leftcolumns: [
{
title: "输入栏名称",
dataIndex: "name",
},
{
title: "类型",
dataIndex: "typeval",
},
],
leftdata: [],
rightcolumns: [
{
title: "输入栏名称",
dataIndex: "name",
},
{
title: "类型",
dataIndex: "typeval",
},
],
rightdata: [
{ name: "PRODUCT", typeval: "E", id: 1 },
{ name: "TECHNOLOGY", typeval: "E", id: 2 },
{ name: "FABID", typeval: "E", id: 3 },
{ name: "MEASUREMENTEQUIPMENT", typeval: "E", id: 4 },
{ name: "PROCESSEQUIPMENT", typeval: "E", id: 5 },
{ name: "TOTALSITECOUNT", typeval: "E", id: 6 },
{ name: "PPID", typeval: "E", id: 7 },
{ name: "AREA", typeval: "E", id: 8 },
{ name: "MEASUREMENTEDCPLAN", typeval: "E", id: 9 },
{
name: "MEASUREMENTEQUIPMENTTYPE",
typeval: "E",
id: 10,
},
{ name: "MEASUREMENTRECIPE", typeval: "E", id: 11 },
{ name: "PROCESSEQUIPMENTTYPE", typeval: "E", id: 12 },
{ name: "PROCESSCHAMBER", typeval: "E", id: 13 },
{ name: "PROCESSTIME", typeval: "E", id: 14 },
{ name: "RUNTYPE", typeval: "E", id: 15 },
{ name: "RUNCARDID", typeval: "E", id: 16 },
{ name: "PILOTFLAG", typeval: "E", id: 17 },
{ name: "CUSTOMER", typeval: "E", id: 18 },
{ name: "PDCFLAG", typeval: "E", id: 19 },
{ name: "RETICLE", typeval: "E", id: 20 },
{ name: "LOTID", typeval: "D", id: 21 },
{ name: "WAFERID", typeval: "D", id: 22 },
{ name: "SITEID", typeval: "D", id: 23 },
{ name: "STEPID", typeval: "D", id: 24 },
{ name: "ROUTEID", typeval: "D", id: 25 },
{ name: "PLANID", typeval: "D", id: 26 },
{ name: "OPERATORID", typeval: "D", id: 27 },
{ name: "ISEXCLUDE", typeval: "D", id: 28 },
{ name: "BATCHID", typeval: "D", id: 29 },
{ name: "STEPSEQ", typeval: "D", id: 30 },
{ name: "STAGE", typeval: "D", id: 31 },
{ name: "MEASUREMENTROUTE", typeval: "D", id: 32 },
{ name: "MEASUREMENTSTEP", typeval: "D", id: 33 },
{ name: "MEASUREMENTPLAN", typeval: "D", id: 34 },
{ name: "MEASUREMENTSTEPSEQ", typeval: "D", id: 35 },
{ name: "MEASUREMENTSTAGE", typeval: "D", id: 36 },
{ name: "MEASUREMENTTIME", typeval: "D", id: 37 },
{ name: "X", typeval: "D", id: 38 },
{ name: "Y", typeval: "D", id: 39 },
{ name: "WAFERTYPE", typeval: "D", id: 40 },
{ name: "标注", typeval: "S", id: 41 },
{ name: "注解", typeval: "S", id: 42 },
{ name: "规格界限", typeval: "S", id: 43 },
{ name: "管制界限", typeval: "S", id: 44 },
{ name: "违规", typeval: "S", id: 45 },
{ name: "移动值", typeval: "S", id: 46 },
{ name: "移动界限", typeval: "S", id: 47 },
{ name: "Alarm Limits", typeval: "S", id: 48 },
{ name: "External Spec Limits", typeval: "S", id: 49 },
],
};
},
created() {
this.lengtharr = this.deepClone1(this.rightdata);
},
watch: {
selectedRowKeysLeft(newval, oldval) {
if (newval.length > 1) {
this.disabledleft = true;
this.disabledright = false;
this.disabledup = true;
this.disableddown = true;
}else if (newval.length == 1) {
this.disabledleft = true;
this.disabledright = false;
let index = this.selectIndexleft;
if (index == 0) {
//处于顶端，不能继续上移
this.disabledup = true;
} else {
this.disabledup = false;
}
if (index + 1 === this.leftdata.length) {
//处于末端端，不能继续下移
this.disableddown = true;
} else {
this.disableddown = false;
}
} else {
this.disabledleft = true;
this.disabledright = true;
this.disabledup = true;
this.disableddown = true;
}
},
},
methods: {
showModal() {
this.visible = true;
},
handleCancel(e) {
console.log(e);
this.visible = false;
},
handleOk(e) {
this.visible = false;
},
handleFilesChange(e) {},
upLayer() {
let that = this;
let index = that.selectIndexleft;
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.selectIndexleft = index - 1;
if (that.selectIndexleft == 0) {
//处于顶端，不能继续上移
that.disabledup = true;
that.disableddown = false;
}
}
},
downLayer() {
let that = this;
let index = that.selectIndexleft;
console.log(index)
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.selectIndexleft = index + 1;
if(that.selectIndexleft == 0){
that.disabledup = false;
}else if (that.selectIndexleft == that.leftdata.length - 1) {
//处于顶端，不能继续上移
that.disableddown = true;
that.disabledup = false;
}
}
},
//向右
transferRight() {
let leftdata = this.deepClone1(this.leftdata);
let that = this;
that.selectedRowKeysLeftobj.forEach((i) => {
that.rightdata.push({ name: i.name, typeval: i.typeval, id: i.id });
});
let arr = [];
leftdata.forEach((item) => {
if (that.selectedRowKeysLeft.indexOf(item.id) == -1) {
arr.push({ name: item.name, typeval: item.typeval, id: item.id });
}
});
that.leftdata = arr;
that.disabledright = true;
that.selectedRowKeysLeftobj = [];
that.selectedRowKeysLeft = [];
that.disabledup = true;
that.disableddown = true;
if(that.selectedRowKeysRight.length >0){
that.disabledleft =false;
}
},
//向左
transferLeft() {
let rightdata = this.deepClone1(this.rightdata);
let that = this;
that.selectedRowKeysRightobj.forEach((i) => {
that.leftdata.push({ name: i.name, typeval: i.typeval, id: i.id });
});
let arr = [];
rightdata.forEach((item) => {
if (that.selectedRowKeysRight.indexOf(item.id) == -1) {
arr.push({ name: item.name, typeval: item.typeval, id: item.id });
}
});
that.rightdata = arr;
that.disabledleft = true;
that.disabledup = true;
that.disableddown = true;
if(that.selectedRowKeysLeft.length >0){
that.disabledright =false;
}
that.selectedRowKeysRightobj = [];
that.selectedRowKeysRight = [];
},
deepClone1(source) {
if (typeof source != "object") {
return source;
}
if (source == null) {
return source;
}
var newObj = source.constructor === Array ? [] : {}; //开辟一块新的内存空间
for (var i in source) {
newObj[i] = this.deepClone1(source[i]);
}
return newObj;
},
rowClick(record, index) {
return {
on: {
click: (event) => {
let rowKeys = this.selectedRowKeysRight;
let rowKeyobjs = this.selectedRowKeysRightobj;
if (rowKeys.length > 0 && rowKeys.includes(record.id)) {
rowKeys.splice(rowKeys.indexOf(record.id), 1);
rowKeyobjs.splice(rowKeys.indexOf(record.id), 1);
} else {
rowKeys.push(record.id);
rowKeyobjs.push(record);
}
this.selectedRowKeysRight = rowKeys;
this.selectedRowKeysRightobj = rowKeyobjs;
if (rowKeys.length > 0) {
this.disabledleft = false;
this.disabledright = true;
} else {
this.disabledleft = true;
this.disabledright = true;
}
},
},
};
},
rowClickLeft(record, index) {
return {
on: {
click: (event) => {
// 记录当前点击的行标识
let rowKeys = this.selectedRowKeysLeft;
let rowKeyobjs = this.selectedRowKeysLeftobj
if (rowKeys.length > 0 && rowKeys.includes(record.id)) {
rowKeys.splice(rowKeys.indexOf(record.id), 1);
rowKeyobjs.splice(rowKeys.indexOf(record.id), 1);
} else {
this.selectIndexleft = index;
rowKeys.push(record.id);
rowKeyobjs.push(record);
}
this.selectedRowKeysLeft = rowKeys;
this.selectedRowKeysLeftobj = rowKeyobjs;
},
},
};
},
onSelectChangeLeft(selectedRowKeysLeft, selectedRow) {
this.selectedRowKeysLeft = selectedRowKeysLeft;
this.selectedRowKeysLeftobj = selectedRow;
this.disabledleft = true;
this.disabledright = false;
this.disabledup = false;
this.disableddown = false;
},
onSelectChangeRight(selectedRowKeysRight, selectedRow) {
this.selectedRowKeysRight = selectedRowKeysRight;
this.selectedRowKeysRightobj = selectedRow;
this.disabledleft = false;
this.disabledright = true;
},
//用户手动选择/取消选择某列的回调
onSelectRowRight(record, selected, selectedRows, nativeEvent) {
if (selected) {
this.disabledleft = false;
this.disabledright = true;
this.currRowNameFlag = null;
this.disabledup = true;
this.disableddown = true;
}
this.currRowName = null;
},
onSelectRowLeft(record, selected, selectedRows, nativeEvent) {
let that = this;
if (selected) {
that.disabledright = false;
that.disabledleft = true;
let leftdata = [...that.leftdata];
that.selectIndexleft = leftdata.findIndex((val) => {
return val.id === record.id;
});
}
that.currRowNameFlag = null;
},
},
};
</script>
<style 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.ant-table-row-selected td {
background-color: #56c9ff;
}
::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;
background: rgba(0, 0, 0, 0.2);
//这里是将鼠标移入时的背景色取消掉了
}
}
</style>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
