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> |