<template>
|
<vol-box
|
:lazy="true"
|
v-model="model"
|
title="选择物料规格"
|
:width="280"
|
:padding="0"
|
>
|
<div>
|
<div>
|
<!-- 搜索配置 -->
|
<div class="search-form">
|
<label>物料规格：</label>
|
<el-input style="width: 160px" 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,
|
materielSpec:null,
|
showDetialBox: false,
|
MaterialCode:null,
|
selection:null,
|
tableData: [],
|
filteredData: [],
|
tableColumns: [
|
{
|
prop: "materielSpec",
|
title: "物料规格",
|
type: "string",
|
},
|
],
|
};
|
},
|
watch: {
|
MaterialCode(newVal) {
|
this.filterLocalData(newVal);
|
}
|
},
|
methods: {
|
open(purchaseOrderNo, materielCode) { // 重命名参数，语义更清晰
|
this.model = true;
|
this.purchaseOrderNo = purchaseOrderNo; // 存储采购单号
|
this.materielCode = materielCode; // 存储物料编号
|
this.getData(); // 调用获取数据方法
|
},
|
filterLocalData(code) {
|
if (code) {
|
this.filteredData = this.tableData.filter((item) => {
|
return item.materielSpec.includes(code);
|
});
|
console.log(this.filteredData.length);
|
console.log(this.tableData.length);
|
} else {
|
this.filteredData = [...this.tableData]; // 重置为完整数据
|
}
|
},
|
handleSelectionChange(val,val2) {
|
this.selection = val;
|
this.selection1 = val2;
|
if (this.selection.length > 1) {
|
this.$message.error("仅选择一条数据");
|
// 清空选中的第一条数据
|
this.$refs.singleTable.clearSelection();
|
}
|
if (this.selection1.length > 1) {
|
this.$message.error("仅选择一条数据");
|
// 清空选中的第一条数据
|
this.$refs.singleTable.clearSelection();
|
}
|
console.log(this.selection);
|
},
|
getData() {
|
const url = `/api/PurchaseOrderDetail/GetOrderMaterielSpec?` +
|
`purchaseOrderNo=${encodeURIComponent(this.purchaseOrderNo)}&` +
|
`materielCode=${encodeURIComponent(this.materielCode)}`;
|
|
this.http.post(url, null, "查询中")
|
.then((x) => {
|
if (!x.status) {
|
return this.$error(x.message);
|
}
|
this.tableData = x.data.map((item) => ({
|
materielSpec: item // 假设接口返回的规格直接是字符串
|
}));
|
this.filteredData = [...this.tableData]; // 重置过滤数据
|
})
|
.catch((error) => {
|
console.error("接口请求失败:", error);
|
this.$message.error("获取物料规格失败，请重试");
|
});
|
},
|
onSelect() {
|
if (!this.selection) {
|
return this.$message.error("请选择数据");
|
}
|
this.$emit("parentCall", ($parent) => {
|
//如：回写编辑表单数据
|
$parent.editFormFields.materielSpec = this.selection[0].materielSpec;
|
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>
|
