686 lines
23 KiB
Vue
686 lines
23 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container stock-layout">
|
|||
|
|
<!-- 左侧树结构 -->
|
|||
|
|
<div class="stock-tree-col">
|
|||
|
|
<el-card shadow="never" class="stock-tree-card">
|
|||
|
|
<div slot="header" class="stock-tree-title">
|
|||
|
|
<div style="display: flex; align-items: center; justify-content: space-between;">
|
|||
|
|
<span>
|
|||
|
|
仓库结构
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<el-select v-model="warehouseType" placeholder="请选择仓库类别" style="width: 50%;">
|
|||
|
|
<el-option label="真实库区" value="real" />
|
|||
|
|
<el-option label="逻辑库位" value="virtual" />
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<WarehouseTree @node-click="handleTreeSelect" :warehouseType="warehouseType" :showEmpty="true" />
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
<!-- 右侧内容 -->
|
|||
|
|
<div class="stock-main-col">
|
|||
|
|
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|||
|
|
<MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|||
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|||
|
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form> -->
|
|||
|
|
<!-- 上方增加分组信息会影响下面的表格显示, 可以添加多级分组，例如按照itemType，按照itemName, 按照材质material, 按照规格specification, 按照厂家manufacturer -->
|
|||
|
|
<div class="group-controls">
|
|||
|
|
<el-form :model="groupForm" size="small" :inline="true">
|
|||
|
|
<el-form-item label="分组维度">
|
|||
|
|
<el-select v-model="groupForm.groupingCriteria" multiple placeholder="请选择分组维度" style="width: 300px;">
|
|||
|
|
<el-option label="物料类型" value="itemType" />
|
|||
|
|
<el-option label="物料名称" value="itemName" />
|
|||
|
|
<el-option label="材质" value="material" />
|
|||
|
|
<el-option label="规格" value="specification" />
|
|||
|
|
<el-option label="宽度" value="width" />
|
|||
|
|
<el-option label="厚度" value="thickness" />
|
|||
|
|
<el-option label="厂家" value="manufacturer" />
|
|||
|
|
<el-option label="镀层质量" value="zincLayer" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="getList">应用分组</el-button>
|
|||
|
|
<el-button @click="resetGroup">重置分组</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<vxe-toolbar :refresh="{query: reload}" export custom>
|
|||
|
|
<template v-slot:buttons>
|
|||
|
|
<!-- 统计数据；共{{ total }}卷 -->
|
|||
|
|
<span style="margin-left: 10px; font-weight: bold;">统计数据：共{{ total }}卷，总重量{{ totalWeight.toFixed(2) }}吨</span>
|
|||
|
|
|
|||
|
|
<!-- <vxe-input v-model.lazy="filterName" type="search" placeholder="全表搜索" style="width: 200px; margin-left: 10px;"></vxe-input> -->
|
|||
|
|
<!-- <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
|
|||
|
|
<vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button> -->
|
|||
|
|
<vxe-button @click="clearFilterEvent">清除所有筛选</vxe-button>
|
|||
|
|
</template>
|
|||
|
|
</vxe-toolbar>
|
|||
|
|
|
|||
|
|
<div style="height: calc(100vh - 260px);">
|
|||
|
|
<vxe-table ref="xTree" :loading="loading" :data="list" size="mini" :tree-config="effectiveTreeConfig"
|
|||
|
|
max-height="100%" @row-click="handleTableRowClick" :export-config="{}" :scroll-y="{ enabled: true }">
|
|||
|
|
<vxe-table-column field="itemType" title="物料类型" align="center" :formatter="formatterItemType" tree-node sortable :filters="[{label: '产品', value: 'product'}, {label: '原料', value: 'raw_material'}]" :filter-method="filterItemTypeMethod">
|
|||
|
|
<template v-slot="{ row }">
|
|||
|
|
<span v-if="row.itemType">{{ formatterItemType(row.itemType) }}</span>
|
|||
|
|
<span v-else>{{ row.itemType || row.itemName || row.material || row.specification || row.manufacturer || row.zincLayer ||
|
|||
|
|
row.width ? ('宽度：' + row.width) : undefined ||
|
|||
|
|
row.thickness ? ('厚度：' + row.thickness) : undefined
|
|||
|
|
}}</span>
|
|||
|
|
</template>
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="itemName" title="物料名称" align="center" :filters="itemNameOptions" :filter-method="filterItemNameMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="material" title="材质" align="center" :filters="materialOptions" :filter-method="filterMaterialMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="specification" title="规格" align="center" :filters="specificationOptions" :filter-method="filterSpecificationMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="thickness" title="厚度" align="center" :filters="thicknessOptions" :filter-method="filterThicknessMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="width" title="宽度" align="center" :filters="widthOptions" :filter-method="filterWidthMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="manufacturer" title="厂家" align="center" :filters="manufacturerOptions" :filter-method="filterManufacturerMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="zincLayer" title="镀层质量" align="center" :filters="zincLayerOptions" :filter-method="filterZincLayerMethod">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<!-- <vxe-table-column sortable field="totalQuantity" title="库存数量" align="center">
|
|||
|
|
</vxe-table-column> -->
|
|||
|
|
<vxe-table-column sortable field="netWeight" title="重量" align="center">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column sortable field="quantity" title="数量" align="center">
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<!-- <vxe-table-column field="remark" title="备注" align="center" /> -->
|
|||
|
|
|
|||
|
|
</vxe-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { listMaterialCoil } from "@/api/wms/coil";
|
|||
|
|
import WarehouseSelect from "@/components/WarehouseSelect";
|
|||
|
|
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
|||
|
|
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
|||
|
|
import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
|
|||
|
|
import MaterialSelect from "@/components/KLPService/MaterialSelect";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "Stock",
|
|||
|
|
dicts: ['stock_item_type'],
|
|||
|
|
components: {
|
|||
|
|
WarehouseSelect,
|
|||
|
|
RawMaterialInfo,
|
|||
|
|
ProductInfo,
|
|||
|
|
WarehouseTree,
|
|||
|
|
MaterialSelect,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 库存分析对话框显示状态
|
|||
|
|
stockBoxVisible: false,
|
|||
|
|
// 按钮loading
|
|||
|
|
buttonLoading: false,
|
|||
|
|
// 遮罩层
|
|||
|
|
loading: true,
|
|||
|
|
// 显示搜索条件
|
|||
|
|
showSearch: true,
|
|||
|
|
// 总条数
|
|||
|
|
total: 0,
|
|||
|
|
totalQuantity: 0,
|
|||
|
|
totalWeight: 0,
|
|||
|
|
// 宽度和厚度汇总
|
|||
|
|
widths: [],
|
|||
|
|
thicknesses: [],
|
|||
|
|
// 库存：原材料/产品与库区/库位的存放关系表格数据
|
|||
|
|
stockList: [],
|
|||
|
|
// 弹出层标题
|
|||
|
|
title: "",
|
|||
|
|
// 是否显示弹出层
|
|||
|
|
open: false,
|
|||
|
|
// 查询参数
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 99,
|
|||
|
|
status: 0,
|
|||
|
|
dateType: 1,
|
|||
|
|
warehouseId: undefined,
|
|||
|
|
},
|
|||
|
|
warehouseType: 'virtual',
|
|||
|
|
// 表单参数
|
|||
|
|
form: {},
|
|||
|
|
|
|||
|
|
// 分组相关数据
|
|||
|
|
groupForm: {
|
|||
|
|
groupingCriteria: []
|
|||
|
|
},
|
|||
|
|
// vxe-table树配置
|
|||
|
|
tableTreeConfig: {
|
|||
|
|
children: 'children',
|
|||
|
|
accordion: true,
|
|||
|
|
expandAll: false,
|
|||
|
|
line: true,
|
|||
|
|
},
|
|||
|
|
// 搜索关键字
|
|||
|
|
filterName: '',
|
|||
|
|
// 筛选选项数组
|
|||
|
|
itemNameOptions: [],
|
|||
|
|
materialOptions: [],
|
|||
|
|
specificationOptions: [],
|
|||
|
|
manufacturerOptions: [],
|
|||
|
|
zincLayerOptions: [],
|
|||
|
|
thicknessOptions: [],
|
|||
|
|
widthOptions: []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
list() {
|
|||
|
|
const filterName = this.filterName.trim().toLowerCase();
|
|||
|
|
if (!filterName) {
|
|||
|
|
return this.stockList;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const searchProps = ['itemType', 'itemName', 'material', 'specification', 'manufacturer', 'totalQuantity', 'remark'];
|
|||
|
|
|
|||
|
|
const filterData = (data) => {
|
|||
|
|
return data.filter(item => {
|
|||
|
|
if (item.children) {
|
|||
|
|
item.children = filterData(item.children);
|
|||
|
|
return item.children.length > 0 || searchProps.some(key => {
|
|||
|
|
return String(item[key] || '').toLowerCase().includes(filterName);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return searchProps.some(key => {
|
|||
|
|
return String(item[key] || '').toLowerCase().includes(filterName);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return filterData([...this.stockList]);
|
|||
|
|
},
|
|||
|
|
// 控制是否启用树形数据配置
|
|||
|
|
effectiveTreeConfig() {
|
|||
|
|
// 当没有分组条件时，不启用树形数据
|
|||
|
|
return this.groupForm.groupingCriteria && this.groupForm.groupingCriteria.length > 0 ? this.tableTreeConfig : undefined;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 查询库存列表 */
|
|||
|
|
getList() {
|
|||
|
|
this.loading = true;
|
|||
|
|
if (this.warehouseType === 'real') {
|
|||
|
|
listMaterialCoil(this.queryParams).then(res => {
|
|||
|
|
let list = res.rows
|
|||
|
|
// 处理数据，添加宽度、厚度和数量字段
|
|||
|
|
list = list.map(item => {
|
|||
|
|
const parts = item.specification ? item.specification.split('*') : [];
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
thickness: parts[0] || '',
|
|||
|
|
width: parts[1] || '',
|
|||
|
|
quantity: 1 // 数量字段设为1
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
this.stockList = this.groupData(list, this.groupForm.groupingCriteria);
|
|||
|
|
this.extractOptions(list);
|
|||
|
|
// 计算总数量和总重量
|
|||
|
|
this.calculateTotals(list);
|
|||
|
|
this.loading = false;
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
listMaterialCoil(this.queryParams).then(res => {
|
|||
|
|
let list = res.rows
|
|||
|
|
// 处理数据，添加宽度、厚度和数量字段
|
|||
|
|
list = list.map(item => {
|
|||
|
|
const parts = item.specification ? item.specification.split('*') : [];
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
thickness: parts[0] || '',
|
|||
|
|
width: parts[1] || '',
|
|||
|
|
quantity: 1 // 数量字段设为1
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
this.stockList = this.groupData(list, this.groupForm.groupingCriteria);
|
|||
|
|
this.extractOptions(list);
|
|||
|
|
// 计算总数量和总重量
|
|||
|
|
this.calculateTotals(list);
|
|||
|
|
this.loading = false;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 提取筛选选项值 */
|
|||
|
|
extractOptions(data) {
|
|||
|
|
// 提取唯一值
|
|||
|
|
const itemNames = new Set();
|
|||
|
|
const materials = new Set();
|
|||
|
|
const specifications = new Set();
|
|||
|
|
const manufacturers = new Set();
|
|||
|
|
const zincLayers = new Set();
|
|||
|
|
const thicknesses = new Set();
|
|||
|
|
const widths = new Set();
|
|||
|
|
|
|||
|
|
data.forEach(item => {
|
|||
|
|
if (item.itemName) itemNames.add(item.itemName);
|
|||
|
|
if (item.material) materials.add(item.material);
|
|||
|
|
if (item.specification) specifications.add(item.specification);
|
|||
|
|
if (item.manufacturer) manufacturers.add(item.manufacturer);
|
|||
|
|
if (item.zincLayer) zincLayers.add(item.zincLayer);
|
|||
|
|
if (item.thickness) thicknesses.add(item.thickness);
|
|||
|
|
if (item.width) widths.add(item.width);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 转换为数组并排序
|
|||
|
|
this.itemNameOptions = Array.from(itemNames).sort();
|
|||
|
|
this.materialOptions = Array.from(materials).sort();
|
|||
|
|
this.specificationOptions = Array.from(specifications).sort();
|
|||
|
|
this.manufacturerOptions = Array.from(manufacturers).sort();
|
|||
|
|
this.zincLayerOptions = Array.from(zincLayers).sort();
|
|||
|
|
this.thicknessOptions = Array.from(thicknesses).sort();
|
|||
|
|
this.widthOptions = Array.from(widths).sort();
|
|||
|
|
|
|||
|
|
this.updateManufacturerFilterEvent();
|
|||
|
|
this.updateZincLayerFilterEvent();
|
|||
|
|
this.updateSpecificationFilterEvent();
|
|||
|
|
this.updateMaterialFilterEvent();
|
|||
|
|
this.updateNameFilterEvent();
|
|||
|
|
this.updateThicknessFilterEvent();
|
|||
|
|
this.updateWidthFilterEvent();
|
|||
|
|
|
|||
|
|
console.log(this.itemNameOptions, itemNames, data);
|
|||
|
|
},
|
|||
|
|
formatterItemType(itemType) {
|
|||
|
|
return itemType === 'raw_material' ? '原材料' : '产品';
|
|||
|
|
},
|
|||
|
|
/** 格式化厚度 */
|
|||
|
|
formatterThickness(row) {
|
|||
|
|
if (!row.specification) return '';
|
|||
|
|
const parts = row.specification.split('*');
|
|||
|
|
return parts[0] || '';
|
|||
|
|
},
|
|||
|
|
/** 格式化宽度 */
|
|||
|
|
formatterWidth(row) {
|
|||
|
|
if (!row.specification) return '';
|
|||
|
|
const parts = row.specification.split('*');
|
|||
|
|
return parts[1] || '';
|
|||
|
|
},
|
|||
|
|
/** 计算总数量和总重量 */
|
|||
|
|
calculateTotals(data) {
|
|||
|
|
// 计算总数量（求和）
|
|||
|
|
this.total = data.length;
|
|||
|
|
|
|||
|
|
// 计算总重量（求和并保留两位小数）
|
|||
|
|
this.totalWeight = parseFloat(data.reduce((sum, item) => {
|
|||
|
|
return sum + (parseFloat(item.netWeight) || 0);
|
|||
|
|
}, 0).toFixed(2));
|
|||
|
|
|
|||
|
|
// 汇总宽度和厚度（提取唯一值）
|
|||
|
|
this.widths = [...new Set(data.map(item => item.width).filter(w => w))].sort();
|
|||
|
|
this.thicknesses = [...new Set(data.map(item => item.thickness).filter(t => t))].sort();
|
|||
|
|
},
|
|||
|
|
// 树节点点击
|
|||
|
|
handleTreeSelect(node) {
|
|||
|
|
if (this.warehouseType === 'real') {
|
|||
|
|
this.queryParams.actualWarehouseId = node.actualWarehouseId;
|
|||
|
|
this.queryParams.warehouseId = '';
|
|||
|
|
} else {
|
|||
|
|
this.queryParams.warehouseId = node.warehouseId;
|
|||
|
|
this.queryParams.actualWarehouseId = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.queryParams.pageNum = 1;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
/** 搜索按钮操作 */
|
|||
|
|
handleQuery() {
|
|||
|
|
this.queryParams.pageNum = 1;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
/** 重置按钮操作 */
|
|||
|
|
resetQuery() {
|
|||
|
|
this.resetForm("queryForm");
|
|||
|
|
this.handleQuery();
|
|||
|
|
},
|
|||
|
|
/** 导出按钮操作 */
|
|||
|
|
handleExport() {
|
|||
|
|
this.download('wms/stock/export', {
|
|||
|
|
...this.queryParams
|
|||
|
|
}, `stock_${new Date().getTime()}.xlsx`)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/** 重置分组 */
|
|||
|
|
resetGroup() {
|
|||
|
|
this.groupForm.groupingCriteria = [];
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
/** 分组数据处理 */
|
|||
|
|
groupData(data, criteria) {
|
|||
|
|
if (!criteria || criteria.length === 0) {
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const groupBy = (arr, key) => {
|
|||
|
|
return arr.reduce((groups, item) => {
|
|||
|
|
const value = item[key] || '未知';
|
|||
|
|
if (!groups[value]) {
|
|||
|
|
groups[value] = [];
|
|||
|
|
}
|
|||
|
|
groups[value].push(item);
|
|||
|
|
return groups;
|
|||
|
|
}, {});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const buildTree = (items, level) => {
|
|||
|
|
if (level >= criteria.length) {
|
|||
|
|
return items;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentCriteria = criteria[level];
|
|||
|
|
const grouped = groupBy(items, currentCriteria);
|
|||
|
|
|
|||
|
|
return Object.keys(grouped).map(key => {
|
|||
|
|
const children = buildTree(grouped[key], level + 1);
|
|||
|
|
const totalQuantity = children.reduce((sum, child) => {
|
|||
|
|
return sum + (parseInt(child.quantity) || 0);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
const totalWeight = parseFloat(children.reduce((sum, child) => {
|
|||
|
|
return sum + (parseFloat(child.netWeight) || 0);
|
|||
|
|
}, 0).toFixed(2));
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
[currentCriteria]: key,
|
|||
|
|
quantity: totalQuantity,
|
|||
|
|
netWeight: totalWeight,
|
|||
|
|
children,
|
|||
|
|
hasChildren: children.length > 0
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return buildTree(data, 0);
|
|||
|
|
},
|
|||
|
|
/** 物料类型筛选 */
|
|||
|
|
filterItemTypeMethod({ cellValue, option }) {
|
|||
|
|
return cellValue === option.value;
|
|||
|
|
},
|
|||
|
|
/** 物料名称筛选 */
|
|||
|
|
filterItemNameMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 材质筛选 */
|
|||
|
|
filterMaterialMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 规格筛选 */
|
|||
|
|
filterSpecificationMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 厂家筛选 */
|
|||
|
|
filterManufacturerMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 镀层质量筛选 */
|
|||
|
|
filterZincLayerMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 厚度筛选 */
|
|||
|
|
filterThicknessMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 宽度筛选 */
|
|||
|
|
filterWidthMethod({ cellValue, option }) {
|
|||
|
|
return option.value ? cellValue === option.value : true;
|
|||
|
|
},
|
|||
|
|
/** 库存数量筛选 */
|
|||
|
|
filterTotalQuantityMethod({ cellValue, option }) {
|
|||
|
|
const value = Number(cellValue || 0);
|
|||
|
|
const filterValue = Number(option.value || 0);
|
|||
|
|
|
|||
|
|
switch (option.operator || option.value) {
|
|||
|
|
case 'gt':
|
|||
|
|
return value > filterValue;
|
|||
|
|
case 'gte':
|
|||
|
|
return value >= filterValue;
|
|||
|
|
case 'lt':
|
|||
|
|
return value < filterValue;
|
|||
|
|
case 'lte':
|
|||
|
|
return value <= filterValue;
|
|||
|
|
case 'eq':
|
|||
|
|
return value === filterValue;
|
|||
|
|
default:
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** 更改物料名称筛选条件 */
|
|||
|
|
updateNameFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('itemName');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.itemNameOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改材质筛选条件 */
|
|||
|
|
updateMaterialFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('material');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.materialOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改规格筛选条件 */
|
|||
|
|
updateSpecificationFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('specification');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.specificationOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改厂家筛选条件 */
|
|||
|
|
updateManufacturerFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('manufacturer');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.manufacturerOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改镀层质量筛选条件 */
|
|||
|
|
updateZincLayerFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('zincLayer');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.zincLayerOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改厚度筛选条件 */
|
|||
|
|
updateThicknessFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('thickness');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.thicknessOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 更改宽度筛选条件 */
|
|||
|
|
updateWidthFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
const column = xTable.getColumnByField('width');
|
|||
|
|
// 使用从数据中汇总的实际选项
|
|||
|
|
const options = this.widthOptions.map(item => ({
|
|||
|
|
label: item,
|
|||
|
|
value: item
|
|||
|
|
}));
|
|||
|
|
// 修改筛选列表
|
|||
|
|
xTable.setFilter(column, options);
|
|||
|
|
// 修改条件之后，需要手动调用 updateData 处理表格数据
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 清除筛选条件 */
|
|||
|
|
clearFilterEvent() {
|
|||
|
|
const xTable = this.$refs.xTree;
|
|||
|
|
xTable.clearFilter();
|
|||
|
|
xTable.updateData();
|
|||
|
|
},
|
|||
|
|
/** 刷新数据 */
|
|||
|
|
reload() {
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.stock-layout {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-tree-col {
|
|||
|
|
width: 260px;
|
|||
|
|
max-width: 300px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-right: 1px solid #f0f0f0;
|
|||
|
|
height: 100%;
|
|||
|
|
padding-right: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-tree-card {
|
|||
|
|
height: 100%;
|
|||
|
|
border: none;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-tree-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-tree {
|
|||
|
|
min-height: 500px;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-main-col {
|
|||
|
|
flex: 1;
|
|||
|
|
padding-left: 24px;
|
|||
|
|
min-width: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-controls {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding: 12px;
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #eaeaea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-controls .el-form {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分组行样式 */
|
|||
|
|
.el-table__row.group-row {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 叶子节点样式 */
|
|||
|
|
.el-table__row.leaf-row {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 筛选输入框样式 */
|
|||
|
|
.my-input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
outline: none;
|
|||
|
|
transition: border-color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-input:focus {
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 筛选下拉选择框样式 */
|
|||
|
|
.my-select {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
outline: none;
|
|||
|
|
transition: border-color 0.3s;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-select:focus {
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 库存数量筛选样式 */
|
|||
|
|
.quantity-filter {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quantity-filter .my-select {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quantity-filter .my-input {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|