<template>
|
<vol-box
|
:lazy="true"
|
v-model="model"
|
title="选择物料编号"
|
:width="200"
|
:padding="0"
|
>
|
<div>
|
<div>
|
<!-- 搜索配置 -->
|
<div class="search-form">
|
<label>物料编号：</label>
|
<el-input style="width: 100px" v-model="MaterialCode"></el-input>
|
</div>
|
<el-table
|
ref="singleTable"
|
:data="filteredData"
|
style="width: 100%; height: 100%"
|
highlight-current-row
|
height="500px"
|
@selection-change="handleSelectionChange"
|
>
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column
|
v-for="(item, index) in tableColumns.filter((x) => !x.hidden)"
|
:key="index"
|
:prop="item.prop"
|
:label="item.title"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<template #footer>
|
<div><el-button type="primary" @click="onSelect">确认</el-button></div>
|
</template>
|
</vol-box>
|
</template>
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
|
/******注意：如果出现提示没有权限的问题，见后台开发文档上的【重写后台权限】*****/
|
|
//这里使用的vue2语法，也可以写成vue3语法
|
export default {
|
components: {
|
"vol-box": VolBox,
|
},
|
methods: {},
|
data() {
|
return {
|
model: false, //弹出框
|
wareId: null,
|
showDetialBox: false,
|
MaterialCode:null,
|
selection:null,
|
tableData: [],
|
filteredData: [],
|
tableColumns: [
|
{
|
prop: "materielCode",
|
title: "物料编号",
|
type: "string",
|
},
|
],
|
};
|
},
|
watch: {
|
MaterialCode(newVal) {
|
this.filterLocalData(newVal);
|
}
|
},
|
methods: {
|
open(val) {
|
//打开主表选择数据
|
this.model = true;
|
this.wareId=val;
|
this.getData();
|
},
|
filterLocalData(code) {
|
if (code) {
|
this.filteredData = this.tableData.filter((item) => {
|
return item.materielCode.includes(code);
|
});
|
console.log(this.filteredData.length);
|
console.log(this.tableData.length);
|
} else {
|
this.filteredData = [...this.tableData]; // 重置为完整数据
|
}
|
},
|
handleSelectionChange(val) {
|
this.selection = val;
|
if (this.selection.length > 1) {
|
this.$message.error("仅选择一条数据");
|
// 清空选中的第一条数据
|
this.$refs.singleTable.clearSelection();
|
}
|
console.log(this.selection);
|
},
|
getData() {
|
this.http
|
.post(
|
"/api/PurchaseOrderDetail/GetPurchaseOrderDetailMaterielCode?warehouseId=" + this.wareId,
|
null,
|
"查询中"
|
)
|
.then((x) => {
|
this.tableData=x.data.map((i) => ({
|
"materielCode":i
|
}))
|
this.filteredData=x.data.map((i) => ({
|
"materielCode":i
|
}))
|
});
|
},
|
onSelect() {
|
if (!this.selection) {
|
return this.$message.error("请选择数据");
|
}
|
this.$emit("parentCall", ($parent) => {
|
//如：回写编辑表单数据
|
$parent.editFormFields.materielCode = this.selection[0].materielCode;
|
this.model = false;
|
});
|
this.MaterialCode = null;
|
this.tableData = [];
|
this.filteredData = [];
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.search-form {
|
display: flex;
|
padding: 10px;
|
line-height: 34px;
|
button {
|
margin-left: 10px;
|
}
|
}
|
</style>
|
