xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add(mes): 物料信息页面增加物料类型树筛选功能

Browse Source 
- 添加左侧物料类型树，实现树形结构展示和筛选
- 增加搜索框，支持模糊搜索物料类型
- 优化物料信息列表，调整部分字段名称
- 重置查询条件时，清除物料类型ID并重置树状结构选择
master
zch 2 months ago
parent 0ea71f7192
commit d8d1dff112
1 changed files with 112 additions and 39 deletions
Show Stats Download Patch File Download Diff File

151
src/views/mes/baseMaterialInfo/index.vue
Unescape Escape View File

@ -1,5 +1,35 @@
<template>
<div class="p-2">
<el-row :gutter="9">
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="filterBoxName"
placeholder="请输入名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<div class="tree-container">
<el-tree
:data="InfoOptions"
:props="props"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="matrialTypeId"
default-expand-all
highlight-current
@node-click="handleTreeNodeClick"
/>
</div>
</div>
</el-col>
<el-col :span="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
@ -78,7 +108,7 @@
<el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>-->
<!-- <el-form-item label="删除标识(0否 1是)" prop="deletedFlag">
<!-- <el-form-item label="删除标识" prop="deletedFlag">
<el-select v-model="queryParams.deletedFlag" placeholder="请选择删除标识(0否 1是)" clearable >
<el-option v-for="dict in deleted_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
@ -114,7 +144,7 @@
<el-form-item label="安全库存数量" prop="safeStockAmount">
<el-input v-model="queryParams.safeStockAmount" placeholder="请输入安全库存数量" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="申请标识(1是 0否)" prop="applyFlag">
<!-- <el-form-item label="申请标识" prop="applyFlag">
<el-select v-model="queryParams.applyFlag" placeholder="请选择申请标识(1是 0否)" clearable >
<el-option v-for="dict in apply_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
@ -349,8 +379,15 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</el-col>
</el-row>
<!-- 添加或修改物料信息对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="baseMaterialInfoFormRef" :model="form" :rules="rules" label-width="120px">
@ -681,43 +718,43 @@ const columns = ref<FieldOption[]>([
{ key: 7, label: `批次标识`, visible: true },
{ key: 8, label: `小批次数量`, visible: true },
{ key: 9, label: `计量单位ID`, visible: false },
{ key: 10, label: `计量单位名称`, visible: true },
{ key: 11, label: `物料组`, visible: true },
{ key: 12, label: `物料规格`, visible: true },
{ key: 13, label: `净重`, visible: false },
{ key: 14, label: `毛重`, visible: false },
{ key: 15, label: `绑定标识`, visible: false },
{ key: 16, label: `所属工厂`, visible: false },
{ key: 17, label: `创建组织`, visible: false },
{ key: 18, label: `使用组织`, visible: false },
{ key: 19, label: `所属产线`, visible: false },
{ key: 20, label: `激活标识`, visible: false },
{ key: 21, label: `删除标识`, visible: false },
{ key: 22, label: `采购计价单位`, visible: false },
{ key: 23, label: `审核日期`, visible: false },
{ key: 24, label: `erp最后更新日期`, visible: false },
{ key: 25, label: `最大库存数量`, visible: false },
{ key: 26, label: `最小库存数量`, visible: false },
{ key: 27, label: `安全库存数量`, visible: false },
{ key: 28, label: `申请标识`, visible: false },
{ key: 29, label: `物料分类`, visible: false },
{ key: 30, label: `自动出库标识`, visible: false },
{ key: 31, label: `辅料标识`, visible: false },
{ key: 32, label: `低值易耗品标识`, visible: false },
{ key: 33, label: `品牌`, visible: false },
{ key: 34, label: `层级`, visible: false },
{ key: 35, label: `花纹`, visible: false },
{ key: 36, label: `速度级别`, visible: false },
{ key: 37, label: `负荷载重`, visible: false },
{ key: 38, label: `轮胎标记`, visible: false },
{ key: 39, label: `最小停放时间`, visible: false },
{ key: 40, label: `最大停放时间`, visible: false },
{ key: 41, label: `标准重量`, visible: false },
{ key: 42, label: `标准重量上限`, visible: false },
{ key: 43, label: `标准重量下限`, visible: false },
{ key: 44, label: `内胎标记`, visible: false },
{ key: 45, label: `销售类型`, visible: false },
{ key: 46, label: `备注`, visible: false },
{ key: 10, label: `计量单位名称`, visible: true },
{ key: 11, label: `物料组`, visible: true },
{ key: 12, label: `物料规格`, visible: true },
{ key: 13, label: `净重`, visible: false },
{ key: 14, label: `毛重`, visible: false },
{ key: 15, label: `绑定标识`, visible: false },
{ key: 16, label: `所属工厂`, visible: false },
{ key: 17, label: `创建组织`, visible: false },
{ key: 18, label: `使用组织`, visible: false },
{ key: 19, label: `所属产线`, visible: false },
{ key: 20, label: `激活标识`, visible: false },
{ key: 21, label: `删除标识`, visible: false },
{ key: 22, label: `采购计价单位`, visible: false },
{ key: 23, label: `审核日期`, visible: false },
{ key: 24, label: `erp最后更新日期`, visible: false },
{ key: 25, label: `最大库存数量`, visible: false },
{ key: 26, label: `最小库存数量`, visible: false },
{ key: 27, label: `安全库存数量`, visible: false },
{ key: 28, label: `申请标识`, visible: false },
{ key: 29, label: `物料分类`, visible: false },
{ key: 30, label: `自动出库标识`, visible: false },
{ key: 31, label: `辅料标识`, visible: false },
{ key: 32, label: `低值易耗品标识`, visible: false },
{ key: 33, label: `品牌`, visible: false },
{ key: 34, label: `层级`, visible: false },
{ key: 35, label: `花纹`, visible: false },
{ key: 36, label: `速度级别`, visible: false },
{ key: 37, label: `负荷载重`, visible: false },
{ key: 38, label: `轮胎标记`, visible: false },
{ key: 39, label: `最小停放时间`, visible: false },
{ key: 40, label: `最大停放时间`, visible: false },
{ key: 41, label: `标准重量`, visible: false },
{ key: 42, label: `标准重量上限`, visible: false },
{ key: 43, label: `标准重量下限`, visible: false },
{ key: 44, label: `内胎标记`, visible: false },
{ key: 45, label: `销售类型`, visible: false },
{ key: 46, label: `备注`, visible: false },
/* { key: 49, label: `创建部门`, visible: true },
{ key: 50, label: `创建人`, visible: true },
{ key: 51, label: `创建时间`, visible: true },
@ -883,6 +920,10 @@ const handleQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.value.materialTypeId = undefined; // 清除物料类型ID查询条件（树状结构）
if (tree.value) {
tree.value.setCurrentKey(null);
}
dateRangeApproveDate.value = ['', ''];
queryFormRef.value?.resetFields();
handleQuery();
@ -975,7 +1016,39 @@ const getMaterialType = async () => {
materialTypeList.value = res.data;
}
//左侧物料类型树
let InfoOptions = ref([]);
const getInfoOptions = async () => {
const res = await getBaseMaterialTypeList(null);
InfoOptions.value = proxy?.handleTree(res.data, "matrialTypeId", "parentId");
}
//点击左侧物料类型树节点，获取id并赋值给form.value.materialTypeId
const handleTreeNodeClick = async (data: any) => {
queryParams.value.materialTypeId = data.matrialTypeId;
handleQuery();
}
const filterNode = (value: string, data: any) => {
if (!value) return true;
return data.matrialTypeName.toLowerCase().includes(value.toLowerCase());
}
const filterBoxName = ref('');
const props = reactive({
children: 'children',
label: 'matrialTypeName',
value: 'matrialTypeId'
});
const tree = ref();
watch(filterBoxName, (newVal) => {
if (tree.value) {
tree.value.filter(newVal);
}
});
onMounted(() => {
getInfoOptions();
getList();
});
</script>

Write Preview
Loading…
Cancel
Save