<template>
<el-dialog
:title="titleName"
:visible.sync="dialogTableVisible"
width="920px"
top="7vh"
class="matrix-dialog"
:lock-scroll="false"
:before-close="cancelAdd"
:close-on-click-modal="false"
>
<div>
<el-row class="componentSelection">
<el-col :span="24">
<div class="part-search-input">
<el-input
v-model.trim="materialCode"
:placeholder="placeholderMsg"
@keyup.native="matrixSearch"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<span class="ml20">已选择</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-row class="transfer">
<el-col>
<div class="transferPop">
<el-table
header-row-class-name="transfer-table-content"
ref="multipleTable"
class="hasBorder"
cell-class-name="transfer-table-cell"
:row-class-name="tableRowStripe"
highlight-current-row
:data="partDataRow"
height="390"
border
v-loading="loadingTable"
element-loading-spinner="vo-mask"
element-loading-background="rgba(204,204,204,.5)"
>
<el-table-column prop="partNumber" :label="searchName" show-overflow-tooltip></el-table-column>
<el-table-column prop="partName" :label="searchNumber" show-overflow-tooltip></el-table-column>
<el-table-column label=" " width="55">
<template slot-scope="scope">
<el-button
class="chose"
:disabled="scope.row.checkDisabled"
@click.native="addPartFn(scope.row, scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
<el-table
header-row-class-name="transfer-table-content"
cell-class-name="transfer-table-cell"
:row-class-name="checkTableRowStripe"
ref="multipleSelectedTable"
class="hasBorder"
border
highlight-current-row
:data="tableDataSelected"
height="390"
>
<el-table-column prop="partNumber" :label="searchName" show-overflow-tooltip></el-table-column>
<el-table-column prop="partName" :label="searchNumber" show-overflow-tooltip></el-table-column>
<el-table-column label=" " width="55">
<template slot-scope="scope">
<el-button
icon="el-icon-close"
type="text"
class="remove"
@click.native="removePartFn(scope.row, scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col class="table-bottom-content">
<div class="table-total">
<span v-cloak>共{{partDataRow.length}}条</span>
<a class="mfn_btn_all" @click="isSelectAll('allAdd')">全选</a>
</div>
<div class="alignRight table-total fr">
<span v-cloak>已选{{tableDataSelected.length}}条</span>
<a class="mfn_btn_all" @click="isSelectAll('cancelAll')">全部取消</a>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmAddMaterialFn">确 定</el-button>
<el-button @click="cancelAdd">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import { getQueryPart, getPartQueryData } from "@/api/api";
export default {
data() {
return {
materialCode: "",
partDataRow: [],
tableDataSelected: [],
loadingTable: false,
dialogTableVisible: false,
timer: null,
typeName: this.$route.params.typeName,
titleName: "模具搜索",
searchName: "模具名称",
searchNumber: "模具编码",
placeholderMsg: "模具编码/名称(搜索结果最多200条)"
};
},
mounted() {
if (this.typeName == "PartChangeFormDoc") {
this.titleName = "物料搜索";
this.searchName = "物料名称";
this.searchNumber = "物料编码";
this.placeholderMsg = "物料编码/名称(搜索结果最多200条)";
}
},
methods: {
init() {
this.dialogTableVisible = true;
},
matrixSearch() {
var scope = this;
if (scope.timer) {
clearTimeout(scope.timer);
}
scope.timer = setTimeout(() => {
var param = {};
param.value = scope.materialCode || "";
var getQueryPartFn = getQueryPart;
if (scope.typeName == "PartChangeFormDoc") {
getQueryPartFn = getPartQueryData;
}
scope.loadingTable = true;
getQueryPartFn(param).then(res => {
if (res.data.retCode == "000000") {
var data = scope.parseData(res);
scope.partDataRow = data;
scope.loadingTable = false;
} else {
scope.$message({
dangerouslyUseHTMLString: true,
message: res.data.retMsg,
type: "error"
});
scope.loadingTable = false;
}
});
}, 400);
},
//确定添加
confirmAddMaterialFn() {
if (this.tableDataSelected.length == 0) {
this.$message.error("请至少添加一个模具");
return;
}
this.$emit("handleMatrixSearch", this.tableDataSelected);
this.cancelAdd();
},
//取消
cancelAdd() {
this.tableDataSelected.splice(0, this.tableDataSelected.length);
this.partDataRow.splice(0, this.partDataRow.length);
this.materialCode = "";
this.dialogTableVisible = false;
},
//添加
addPartFn(row, index) {
this.$set(row, "checkDisabled", true);
if (!this.checkTheRepeat(row)) {
this.$message.error("重复的编码添加项:" + row.partNumber);
} else {
this.tableDataSelected.push(row);
}
},
//移除
removePartFn(row, index) {
for (var i = 0; i < this.partDataRow.length; i++) {
if (
this.partDataRow[i].hasOwnProperty("checkDisabled") &&
this.partDataRow[i].partoid == row.partoid
) {
this.partDataRow[i].checkDisabled = false;
break;
}
}
this.tableDataSelected.splice(index, 1);
row.checkDisabled = false;
},
//全部添加或移除
isSelectAll(type) {
var scope = this;
if (type == "allAdd") {
scope.partDataRow.forEach((elem, index) => {
scope.$set(elem, "checkDisabled", true);
});
scope.tableDataSelected = JSON.parse(JSON.stringify(scope.partDataRow));
} else {
scope.partDataRow.forEach((elem, index) => {
elem.checkDisabled = false;
});
scope.tableDataSelected.splice(0, scope.tableDataSelected.length);
}
},
//检查重复
checkTheRepeat(row) {
if (this.tableDataSelected.length == 0) {
return true;
}
for (var i = 0; i < this.tableDataSelected.length; i++) {
if (this.tableDataSelected[i].partoid == row.partoid) {
return false;
}
}
return true;
},
tableRowStripe({ row, rowIndex }) {
if (row.checkDisabled) {
return "check-blue";
}
if (rowIndex % 2 == 1) {
return "color-gray";
}
return "";
},
checkTableRowStripe({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "color-gray";
}
return "";
}
}
};
</script>
<style lang="less">
.matrix-dialog {
.el-dialog {
max-height: 660px;
}
.el-dialog__body {
padding-top: 20px;
padding-bottom: 20px;
}
.componentSelection {
margin-bottom: 20px;
.part-search-input {
display: inline-block;
width: 400px;
.el-input__prefix {
left: 7px;
}
.el-input__inner {
border-radius: 15px;
background-color: #f7f9fe;
padding-left: 33px;
font-size: 14px;
}
}
.ml20 {
margin-left: 40px;
}
}
.el-dialog__footer {
padding: 15px 40px;
}
}
</style>