feat(库存管理): 重构库存页面并添加分组功能
添加vxe-table依赖支持表格分组和筛选 重构库存页面为左右布局，左侧仓库树右侧分组表格 实现按物料类型、名称、材质等多维度分组功能 添加全表搜索和列筛选功能 移除不再使用的stockIo组件和旧版库存页面
This commit is contained in:
砂糖
@@ -52,6 +52,10 @@ import DictSelect from '@/components/DictSelect'
|
|||||||
// 初始化所有列
|
// 初始化所有列
|
||||||
import { initAllColumns } from '@/views/wms/report/js/column.js'
|
import { initAllColumns } from '@/views/wms/report/js/column.js'
|
||||||
|
|
||||||
|
import 'xe-utils'
|
||||||
|
import VXETable from 'vxe-table'
|
||||||
|
import 'vxe-table/lib/style.css'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
@@ -87,6 +91,7 @@ Vue.use(plugins)
|
|||||||
Vue.use(VueMeta)
|
Vue.use(VueMeta)
|
||||||
Vue.use(VueKonva);
|
Vue.use(VueKonva);
|
||||||
Vue.use(dashboardBigPlugin)
|
Vue.use(dashboardBigPlugin)
|
||||||
|
Vue.use(VXETable)
|
||||||
DictData.install()
|
DictData.install()
|
||||||
|
|
||||||
// 初始化所有列
|
// 初始化所有列
|
||||||
|
|||||||
@@ -541,7 +541,13 @@ export default {
|
|||||||
// 清理空格和换行
|
// 清理空格和换行
|
||||||
content = content.trim();
|
content = content.trim();
|
||||||
|
|
||||||
|
// 如果不是以大写汉字数字开头，添加一个中文字符的缩进
|
||||||
if (content) {
|
if (content) {
|
||||||
|
// 检查是否以大写汉字数字开头（一、二、三、四、五、六、七、八、九、十）
|
||||||
|
const chineseNumberRegex = /^[一二三四五六七八九十]+、/;
|
||||||
|
if (!chineseNumberRegex.test(content)) {
|
||||||
|
content = ' ' + content; // 使用全角空格作为中文字符缩进
|
||||||
|
}
|
||||||
pContents.push(content);
|
pContents.push(content);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -551,7 +557,13 @@ export default {
|
|||||||
let textContent = htmlContent.replace(/<[^>]*>/g, '');
|
let textContent = htmlContent.replace(/<[^>]*>/g, '');
|
||||||
textContent = textContent.replace(/ /g, ' ').trim();
|
textContent = textContent.replace(/ /g, ' ').trim();
|
||||||
|
|
||||||
|
// 如果不是以大写汉字数字开头，添加一个中文字符的缩进
|
||||||
if (textContent) {
|
if (textContent) {
|
||||||
|
// 检查是否以大写汉字数字开头（一、二、三、四、五、六、七、八、九、十）
|
||||||
|
const chineseNumberRegex = /^[一二三四五六七八九十]+、/;
|
||||||
|
if (!chineseNumberRegex.test(textContent)) {
|
||||||
|
textContent = ' ' + textContent; // 使用全角空格作为中文字符缩进
|
||||||
|
}
|
||||||
pContents.push(textContent);
|
pContents.push(textContent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="display: flex; height: calc(100vh - 100px);">
|
|
||||||
<!-- 左侧导航树 -->
|
|
||||||
<div style="width: 280px; min-width: 200px; border-right: 1px solid #eee; padding: 10px 0;">
|
|
||||||
<el-tree :data="warehouseTreeData" node-key="warehouseId" :props="treeProps" highlight-current
|
|
||||||
@node-click="handleTreeNodeClick" :default-expand-all="true" style="height: 100%; overflow-y: auto;" />
|
|
||||||
</div>
|
|
||||||
<!-- 右侧图表 -->
|
|
||||||
<div style="flex: 1; height: calc(100vh - 100px); overflow-y: scroll; overflow-x: hidden;">
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card>
|
|
||||||
<template #header>
|
|
||||||
物料统计TOP10
|
|
||||||
</template>
|
|
||||||
<div style="height: 300px;">
|
|
||||||
<ChartWrapper>
|
|
||||||
<material-bar ref="materialBar" :stock-data="stockData"
|
|
||||||
:selected-warehouse-id="currentTreeNode ? currentTreeNode.warehouseId : null"
|
|
||||||
:warehouse-tree-data="warehouseTreeData" />
|
|
||||||
</ChartWrapper>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card>
|
|
||||||
<template #header>
|
|
||||||
变动趋势
|
|
||||||
<el-date-picker style="float: right;" v-model="defaultTimeRange" type="daterange" range-separator="至"
|
|
||||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
|
|
||||||
</template>
|
|
||||||
<div style="height: 300px;">
|
|
||||||
<ChartWrapper>
|
|
||||||
<TrendChart ref="trendChart" :warehouseId="currentTreeNode ? currentTreeNode.warehouseId : null"
|
|
||||||
:time-range="defaultTimeRange"></TrendChart>
|
|
||||||
</ChartWrapper>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-card>
|
|
||||||
<template #header>
|
|
||||||
仓库库存
|
|
||||||
</template>
|
|
||||||
<div style="height: 600px;">
|
|
||||||
<ChartWrapper>
|
|
||||||
<rea-tree ref="reaTree" :stock-data="stockData" :warehouse-tree-data="warehouseTreeData" height="600px" />
|
|
||||||
</ChartWrapper>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { listStock } from "@/api/wms/stock";
|
|
||||||
import { listWarehouse } from "@/api/wms/warehouse";
|
|
||||||
import ReaTree from './panels/reattree.vue';
|
|
||||||
import MaterialBar from './panels/bar.vue';
|
|
||||||
import TrendChart from './panels/trendChart.vue';
|
|
||||||
import ChartWrapper from '@/components/ChartWrapper/index.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "StockBox",
|
|
||||||
components: {
|
|
||||||
ReaTree,
|
|
||||||
MaterialBar,
|
|
||||||
TrendChart,
|
|
||||||
ChartWrapper
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
stockData: [],
|
|
||||||
warehouseData: [],
|
|
||||||
warehouseTreeData: [],
|
|
||||||
treeProps: {
|
|
||||||
label: 'warehouseName',
|
|
||||||
children: 'children',
|
|
||||||
isLeaf: 'isLeaf',
|
|
||||||
id: 'id'
|
|
||||||
},
|
|
||||||
currentTreeNode: null,
|
|
||||||
defaultTimeRange: [
|
|
||||||
new Date(new Date().setDate(new Date().getDate() - 30)).toISOString().split('T')[0],
|
|
||||||
new Date().toISOString().split('T')[0]
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.loadData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async loadData() {
|
|
||||||
try {
|
|
||||||
const [warehouseRes, stockRes] = await Promise.all([
|
|
||||||
listWarehouse(),
|
|
||||||
listStock({ pageNum: 1, pageSize: 9999 })
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 处理树结构
|
|
||||||
this.warehouseTreeData = this.handleTree(warehouseRes.data, 'warehouseId', 'parentId');
|
|
||||||
this.stockData = stockRes.rows;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载数据失败:', error);
|
|
||||||
this.$message.error('库存数据加载失败');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 处理树结构
|
|
||||||
handleTree(data, id, parentId) {
|
|
||||||
if (!Array.isArray(data)) {
|
|
||||||
console.error('handleTree: data is not array', data);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const map = {};
|
|
||||||
const tree = [];
|
|
||||||
|
|
||||||
// 创建节点映射
|
|
||||||
data.forEach(item => {
|
|
||||||
map[item[id]] = { ...item, children: [] };
|
|
||||||
});
|
|
||||||
|
|
||||||
// 构建树结构
|
|
||||||
data.forEach(item => {
|
|
||||||
const node = map[item[id]];
|
|
||||||
if (!item[parentId] || item[parentId] === 0) {
|
|
||||||
tree.push(node);
|
|
||||||
} else if (map[item[parentId]]) {
|
|
||||||
map[item[parentId]].children.push(node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return tree;
|
|
||||||
},
|
|
||||||
// 刷新数据
|
|
||||||
refresh() {
|
|
||||||
this.loadData();
|
|
||||||
},
|
|
||||||
// 导航树点击事件
|
|
||||||
handleTreeNodeClick(node) {
|
|
||||||
this.currentTreeNode = node;
|
|
||||||
if (node && node.warehouseId) {
|
|
||||||
this.$refs.reaTree.highlightNode(node.warehouseId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* 图表容器样式 */
|
|
||||||
.treemap-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-row {
|
|
||||||
margin: 10px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
721
klp-ui/src/views/wms/stock/group.vue
Normal file
721
klp-ui/src/views/wms/stock/group.vue
Normal file
@@ -0,0 +1,721 @@
|
|||||||
|
<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="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;">统计数据：共{{ totalQuantity }}卷</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="tableTreeConfig"
|
||||||
|
max-height="100%" @row-click="handleTableRowClick" :export-config="{}">
|
||||||
|
<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
|
||||||
|
}}</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="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 field="remark" title="备注" align="center" />
|
||||||
|
<vxe-table-column title="操作" align="center" width="100">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<el-button v-if="row.itemId" type="text" size="small" @click="handleDrillDown(row)">查看明细</el-button>
|
||||||
|
</template>
|
||||||
|
</vxe-table-column>
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList" /> -->
|
||||||
|
|
||||||
|
<!-- 钻取明细对话框 -->
|
||||||
|
<el-dialog :title="dialogTitle" :visible.sync="drillDownVisible" width="80%" :close-on-click-modal="false">
|
||||||
|
<DrillDownTable :query-params="drillDownQueryParams" :item-name="drillDownParams.itemName"
|
||||||
|
:warehouse-name="drillDownParams.warehouseName" />
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { listStock, getStockByActual } from "@/api/wms/stock";
|
||||||
|
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
|
||||||
|
import ProductSelect from "@/components/KLPService/ProductSelect";
|
||||||
|
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";
|
||||||
|
// 导入钻取表格组件
|
||||||
|
import DrillDownTable from '../coil/panels/DrillDownTable.vue';
|
||||||
|
import { findItemWithBom } from "@/store/modules/category";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Stock",
|
||||||
|
dicts: ['stock_item_type'],
|
||||||
|
components: {
|
||||||
|
WarehouseSelect,
|
||||||
|
RawMaterialSelect,
|
||||||
|
ProductSelect,
|
||||||
|
RawMaterialInfo,
|
||||||
|
ProductInfo,
|
||||||
|
WarehouseTree,
|
||||||
|
MaterialSelect,
|
||||||
|
DrillDownTable // 注册钻取组件
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 库存分析对话框显示状态
|
||||||
|
stockBoxVisible: false,
|
||||||
|
// 按钮loading
|
||||||
|
buttonLoading: false,
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
totalQuantity: 0,
|
||||||
|
// 库存：原材料/产品与库区/库位的存放关系表格数据
|
||||||
|
stockList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 9999,
|
||||||
|
warehouseId: undefined,
|
||||||
|
itemType: undefined,
|
||||||
|
itemId: undefined,
|
||||||
|
quantity: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
batchNo: undefined,
|
||||||
|
mergeBatch: false,
|
||||||
|
},
|
||||||
|
warehouseType: 'real',
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 钻取相关数据
|
||||||
|
drillDownVisible: false,
|
||||||
|
dialogTitle: '',
|
||||||
|
drillDownParams: {
|
||||||
|
itemType: null,
|
||||||
|
itemId: null,
|
||||||
|
itemName: '',
|
||||||
|
warehouseId: null,
|
||||||
|
warehouseName: '',
|
||||||
|
},
|
||||||
|
// 传给钻取表格组件的查询参数
|
||||||
|
drillDownQueryParams: {
|
||||||
|
warehouseId: null,
|
||||||
|
itemType: null,
|
||||||
|
itemId: null,
|
||||||
|
actualWarehouseId: null,
|
||||||
|
},
|
||||||
|
// 分组相关数据
|
||||||
|
groupForm: {
|
||||||
|
groupingCriteria: []
|
||||||
|
},
|
||||||
|
// vxe-table树配置
|
||||||
|
tableTreeConfig: {
|
||||||
|
children: 'children',
|
||||||
|
accordion: true,
|
||||||
|
expandAll: false,
|
||||||
|
line: true,
|
||||||
|
},
|
||||||
|
// 搜索关键字
|
||||||
|
filterName: '',
|
||||||
|
// 筛选选项数组
|
||||||
|
itemNameOptions: [],
|
||||||
|
materialOptions: [],
|
||||||
|
specificationOptions: [],
|
||||||
|
manufacturerOptions: [],
|
||||||
|
zincLayerOptions: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询库存列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
if (this.warehouseType === 'real') {
|
||||||
|
getStockByActual(this.queryParams).then(response => {
|
||||||
|
let q = 0
|
||||||
|
const processedData = response.rows.map(item => {
|
||||||
|
q += parseInt(item.totalQuantity);
|
||||||
|
const itemType = item.itemType
|
||||||
|
if (itemType === 'raw_material') {
|
||||||
|
item.rawMaterial = {
|
||||||
|
rawMaterialId: item.itemId,
|
||||||
|
rawMaterialName: item.itemName,
|
||||||
|
itemId: item.itemId,
|
||||||
|
itemName: item.itemName,
|
||||||
|
rawMaterialCode: item.itemCode,
|
||||||
|
specification: item.specification,
|
||||||
|
material: item.material,
|
||||||
|
surfaceTreatment: item.surfaceTreatment,
|
||||||
|
zincLayer: item.zincLayer,
|
||||||
|
manufacturer: item.manufacturer,
|
||||||
|
}
|
||||||
|
} else if (itemType === 'product') {
|
||||||
|
item.product = {
|
||||||
|
productId: item.itemId,
|
||||||
|
productName: item.itemName,
|
||||||
|
productCode: item.itemCode,
|
||||||
|
itemId: item.itemId,
|
||||||
|
itemName: item.itemName,
|
||||||
|
specification: item.specification,
|
||||||
|
material: item.material,
|
||||||
|
surfaceTreatment: item.surfaceTreatment,
|
||||||
|
zincLayer: item.zincLayer,
|
||||||
|
manufacturer: item.manufacturer,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
});
|
||||||
|
this.stockList = this.groupData(processedData, this.groupForm.groupingCriteria);
|
||||||
|
this.total = response.total;
|
||||||
|
this.totalQuantity = q;
|
||||||
|
// 提取选项值
|
||||||
|
this.extractOptions(processedData);
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
listStock(this.queryParams).then(response => {
|
||||||
|
const processedData = response.rows.map(item => {
|
||||||
|
const itemType = item.itemType
|
||||||
|
if (itemType === 'raw_material') {
|
||||||
|
item.rawMaterial = {
|
||||||
|
rawMaterialId: item.itemId,
|
||||||
|
rawMaterialName: item.itemName,
|
||||||
|
rawMaterialCode: item.itemCode,
|
||||||
|
specification: item.specification,
|
||||||
|
material: item.material,
|
||||||
|
surfaceTreatment: item.surfaceTreatment,
|
||||||
|
zincLayer: item.zincLayer,
|
||||||
|
manufacturer: item.manufacturer,
|
||||||
|
}
|
||||||
|
} else if (itemType === 'product') {
|
||||||
|
item.product = {
|
||||||
|
productId: item.itemId,
|
||||||
|
productName: item.itemName,
|
||||||
|
productCode: item.itemCode,
|
||||||
|
specification: item.specification,
|
||||||
|
material: item.material,
|
||||||
|
surfaceTreatment: item.surfaceTreatment,
|
||||||
|
zincLayer: item.zincLayer,
|
||||||
|
manufacturer: item.manufacturer,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
});
|
||||||
|
this.stockList = this.groupData(processedData, this.groupForm.groupingCriteria);
|
||||||
|
this.total = response.total;
|
||||||
|
// 提取选项值
|
||||||
|
this.extractOptions(processedData);
|
||||||
|
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();
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 转换为数组并排序
|
||||||
|
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.updateManufacturerFilterEvent();
|
||||||
|
this.updateZincLayerFilterEvent();
|
||||||
|
this.updateSpecificationFilterEvent();
|
||||||
|
this.updateMaterialFilterEvent();
|
||||||
|
this.updateNameFilterEvent();
|
||||||
|
|
||||||
|
console.log(this.itemNameOptions, itemNames, data);
|
||||||
|
},
|
||||||
|
formatterItemType(itemType) {
|
||||||
|
return itemType === 'raw_material' ? '原材料' : '产品';
|
||||||
|
},
|
||||||
|
// 树节点点击
|
||||||
|
handleTreeSelect(node) {
|
||||||
|
this.queryParams.warehouseId = node.warehouseId;
|
||||||
|
this.queryParams.actualWarehouseId = node.actualWarehouseId;
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
stockId: undefined,
|
||||||
|
warehouseId: undefined,
|
||||||
|
itemType: undefined,
|
||||||
|
itemId: undefined,
|
||||||
|
quantity: undefined,
|
||||||
|
unit: undefined,
|
||||||
|
batchNo: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
delFlag: undefined,
|
||||||
|
createTime: undefined,
|
||||||
|
createBy: undefined,
|
||||||
|
updateTime: undefined,
|
||||||
|
updateBy: undefined
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
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`)
|
||||||
|
},
|
||||||
|
/** 处理表格行点击 */
|
||||||
|
handleTableRowClick(row) {
|
||||||
|
this.handleDrillDown(row);
|
||||||
|
},
|
||||||
|
/** 处理钻取操作 */
|
||||||
|
handleDrillDown(row) {
|
||||||
|
// 重置钻取参数
|
||||||
|
this.drillDownParams = {
|
||||||
|
itemType: null,
|
||||||
|
itemId: null,
|
||||||
|
itemName: '',
|
||||||
|
warehouseId: null,
|
||||||
|
warehouseName: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置传给子组件的查询参数
|
||||||
|
this.drillDownQueryParams = {
|
||||||
|
warehouseId: this.queryParams.warehouseId || row.warehouseId,
|
||||||
|
itemType: row.itemType,
|
||||||
|
itemId: row.itemId,
|
||||||
|
actualWarehouseId: row.actualWarehouseId
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置钻取参数
|
||||||
|
this.drillDownParams.itemType = row.itemType;
|
||||||
|
this.drillDownParams.itemId = row.itemId;
|
||||||
|
this.drillDownParams.warehouseId = this.queryParams.warehouseId || row.warehouseId;
|
||||||
|
|
||||||
|
// 获取物料名称
|
||||||
|
const item = findItemWithBom(row.itemType, row.itemId);
|
||||||
|
this.drillDownParams.itemName = item ?
|
||||||
|
(row.itemType === 'product' ? item.productName : item.rawMaterialName) :
|
||||||
|
'未知物料';
|
||||||
|
|
||||||
|
// 设置对话框标题
|
||||||
|
this.dialogTitle = `${row.itemType === 'product' ? '成品' : '原材料'}库存明细`;
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
this.drillDownVisible = true;
|
||||||
|
},
|
||||||
|
/** 重置分组 */
|
||||||
|
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.totalQuantity) || 0);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
[currentCriteria]: key,
|
||||||
|
totalQuantity,
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
/** 库存数量筛选 */
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
/** 清除筛选条件 */
|
||||||
|
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>
|
||||||
@@ -72,14 +72,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listStock, delStock, addStock, updateStock, getStockByActual } from "@/api/wms/stock";
|
import { listStock, getStockByActual } from "@/api/wms/stock";
|
||||||
import { addStockIoWithDetail } from "@/api/wms/stockIo";
|
|
||||||
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
|
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
|
||||||
import ProductSelect from "@/components/KLPService/ProductSelect";
|
import ProductSelect from "@/components/KLPService/ProductSelect";
|
||||||
import WarehouseSelect from "@/components/WarehouseSelect";
|
import WarehouseSelect from "@/components/WarehouseSelect";
|
||||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||||
import StockIo from './panels/stockIo.vue';
|
|
||||||
import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
|
import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
|
||||||
import MaterialSelect from "@/components/KLPService/MaterialSelect";
|
import MaterialSelect from "@/components/KLPService/MaterialSelect";
|
||||||
// 导入钻取表格组件
|
// 导入钻取表格组件
|
||||||
@@ -88,14 +86,13 @@ import { findItemWithBom } from "@/store/modules/category";
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Stock",
|
name: "Stock",
|
||||||
dicts: ['stock_item_type', 'stock_io_type'],
|
dicts: ['stock_item_type'],
|
||||||
components: {
|
components: {
|
||||||
WarehouseSelect,
|
WarehouseSelect,
|
||||||
RawMaterialSelect,
|
RawMaterialSelect,
|
||||||
ProductSelect,
|
ProductSelect,
|
||||||
RawMaterialInfo,
|
RawMaterialInfo,
|
||||||
ProductInfo,
|
ProductInfo,
|
||||||
StockIo,
|
|
||||||
WarehouseTree,
|
WarehouseTree,
|
||||||
MaterialSelect,
|
MaterialSelect,
|
||||||
DrillDownTable // 注册钻取组件
|
DrillDownTable // 注册钻取组件
|
||||||
|
|||||||
@@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="chartContainer" style="height: 100%;"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "MaterialBar",
|
|
||||||
props: {
|
|
||||||
// 图表高度
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
// 库存数据
|
|
||||||
stockData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
// 选中的仓库ID
|
|
||||||
selectedWarehouseId: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
// 仓库树数据
|
|
||||||
warehouseTreeData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
stockData: {
|
|
||||||
handler: 'updateChart',
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
selectedWarehouseId: {
|
|
||||||
handler: 'updateChart',
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initChart();
|
|
||||||
this.updateChart();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose();
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$refs.chartContainer);
|
|
||||||
window.addEventListener('resize', this.handleResize);
|
|
||||||
},
|
|
||||||
handleResize() {
|
|
||||||
this.chart && this.chart.resize();
|
|
||||||
},
|
|
||||||
// 获取所有子仓库ID（包括自身）
|
|
||||||
getAllWarehouseIds(warehouseId) {
|
|
||||||
const ids = new Set();
|
|
||||||
|
|
||||||
const findChildren = (treeData, targetId) => {
|
|
||||||
for (const node of treeData) {
|
|
||||||
if (String(node.warehouseId) === String(targetId)) {
|
|
||||||
// 找到目标节点，收集它和它的所有子节点的ID
|
|
||||||
const collectIds = (node) => {
|
|
||||||
ids.add(String(node.warehouseId));
|
|
||||||
if (node.children) {
|
|
||||||
node.children.forEach(child => collectIds(child));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
collectIds(node);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (node.children && findChildren(node.children, targetId)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (warehouseId) {
|
|
||||||
findChildren(this.warehouseTreeData, warehouseId);
|
|
||||||
}
|
|
||||||
|
|
||||||
return ids;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 处理数据，获取前10的物料
|
|
||||||
processData() {
|
|
||||||
let filteredData;
|
|
||||||
|
|
||||||
if (this.selectedWarehouseId) {
|
|
||||||
// 获取选中仓库及其所有子仓库的ID
|
|
||||||
const warehouseIds = this.getAllWarehouseIds(this.selectedWarehouseId);
|
|
||||||
// 过滤属于这些仓库的数据
|
|
||||||
filteredData = this.stockData.filter(item => warehouseIds.has(String(item.warehouseId)));
|
|
||||||
} else {
|
|
||||||
filteredData = this.stockData;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 按物料分组并汇总数量
|
|
||||||
const materialMap = new Map();
|
|
||||||
filteredData.forEach(item => {
|
|
||||||
const key = item.itemName;
|
|
||||||
const quantity = Number(item.quantity) || 0;
|
|
||||||
const currentQuantity = materialMap.get(key) || 0;
|
|
||||||
materialMap.set(key, currentQuantity + quantity);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 转换为数组并排序
|
|
||||||
const sortedData = Array.from(materialMap.entries())
|
|
||||||
.map(([name, value]) => ({ name, value }))
|
|
||||||
.sort((a, b) => b.value - a.value)
|
|
||||||
.slice(0, 10); // 只取前10名
|
|
||||||
|
|
||||||
return sortedData;
|
|
||||||
},
|
|
||||||
updateChart() {
|
|
||||||
if (!this.chart) return;
|
|
||||||
|
|
||||||
const data = this.processData();
|
|
||||||
const names = data.map(item => item.name);
|
|
||||||
const values = data.map(item => item.value);
|
|
||||||
|
|
||||||
// 计算最大值，用于设置图表的最大刻度
|
|
||||||
const maxValue = Math.max(...values);
|
|
||||||
const interval = Math.ceil(maxValue / 5); // 将刻度分为5份
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
formatter: (params) => {
|
|
||||||
const data = params[0];
|
|
||||||
return `${data.name}<br/>数量: ${data.value}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value',
|
|
||||||
boundaryGap: [0, 0.01],
|
|
||||||
max: Math.ceil(maxValue / interval) * interval,
|
|
||||||
interval: interval
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: names,
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
formatter: (value) => {
|
|
||||||
// 如果名称太长，截断并添加省略号
|
|
||||||
if (value.length > 10) {
|
|
||||||
return value.substring(0, 10) + '...';
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '数量',
|
|
||||||
type: 'bar',
|
|
||||||
data: values,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: '#83bff6' },
|
|
||||||
{ offset: 0.5, color: '#188df0' },
|
|
||||||
{ offset: 1, color: '#188df0' }
|
|
||||||
])
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: '#2378f7' },
|
|
||||||
{ offset: 0.7, color: '#2378f7' },
|
|
||||||
{ offset: 1, color: '#83bff6' }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'right',
|
|
||||||
formatter: '{c}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
this.chart.setOption(option, true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', this.handleResize);
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose();
|
|
||||||
this.chart = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="chartContainer" :style="{ height: '100%' }"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ReaTree",
|
|
||||||
props: {
|
|
||||||
// 图表高度
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '600px'
|
|
||||||
},
|
|
||||||
// 库存数据
|
|
||||||
stockData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
// 仓库数据树
|
|
||||||
warehouseTreeData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initChart();
|
|
||||||
this.updateChartData();
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
stockData: {
|
|
||||||
handler: 'updateChartData',
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
warehouseTreeData: {
|
|
||||||
handler: 'updateChartData',
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose();
|
|
||||||
}
|
|
||||||
this.chart = echarts.init(this.$refs.chartContainer);
|
|
||||||
window.addEventListener('resize', this.handleResize);
|
|
||||||
},
|
|
||||||
handleResize() {
|
|
||||||
this.chart && this.chart.resize();
|
|
||||||
},
|
|
||||||
// 创建树形数据
|
|
||||||
createTreeData() {
|
|
||||||
// 递归构建仓库树
|
|
||||||
const buildWarehouseTree = (warehouseNode, parentId = '') => {
|
|
||||||
const stocks = this.stockData.filter(stock => stock.warehouseId === warehouseNode.warehouseId);
|
|
||||||
const children = [];
|
|
||||||
let totalQuantity = 0;
|
|
||||||
|
|
||||||
// 添加库存物品
|
|
||||||
stocks.forEach(stock => {
|
|
||||||
const quantity = Number(stock.quantity) || 0;
|
|
||||||
totalQuantity += quantity;
|
|
||||||
children.push({
|
|
||||||
id: `${warehouseNode.warehouseId}_${stock.itemCode || stock.itemName}`,
|
|
||||||
name: stock.itemName,
|
|
||||||
value: quantity,
|
|
||||||
itemInfo: {
|
|
||||||
type: stock.itemType,
|
|
||||||
code: stock.itemCode,
|
|
||||||
unit: stock.unit,
|
|
||||||
batchNo: stock.batchNo
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 递归处理子仓库
|
|
||||||
if (warehouseNode.children && warehouseNode.children.length > 0) {
|
|
||||||
warehouseNode.children.forEach(child => {
|
|
||||||
const childNode = buildWarehouseTree(child, warehouseNode.warehouseId);
|
|
||||||
if (childNode.value > 0) {
|
|
||||||
children.push(childNode);
|
|
||||||
totalQuantity += childNode.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: String(warehouseNode.warehouseId),
|
|
||||||
name: warehouseNode.warehouseName,
|
|
||||||
value: totalQuantity,
|
|
||||||
warehouseInfo: {
|
|
||||||
code: warehouseNode.warehouseCode
|
|
||||||
},
|
|
||||||
children: children.length > 0 ? children : undefined
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
|
|
||||||
},
|
|
||||||
// 获取层级样式配置
|
|
||||||
getLevelOption() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#555',
|
|
||||||
borderWidth: 4,
|
|
||||||
gapWidth: 3
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#333'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
upperLabel: {
|
|
||||||
show: true,
|
|
||||||
height: 35,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
color: '#333'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#777',
|
|
||||||
borderWidth: 3,
|
|
||||||
gapWidth: 2
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#555'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
upperLabel: {
|
|
||||||
show: true,
|
|
||||||
height: 28,
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#999',
|
|
||||||
borderWidth: 2,
|
|
||||||
gapWidth: 1
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#777'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
// 获取物料单位
|
|
||||||
getItemUnit(data) {
|
|
||||||
return data.itemInfo?.unit || '';
|
|
||||||
},
|
|
||||||
// 获取物料类型名称
|
|
||||||
getItemTypeName(type) {
|
|
||||||
const typeMap = {
|
|
||||||
raw_material: '原材料',
|
|
||||||
product: '产品',
|
|
||||||
semi_product: '半成品'
|
|
||||||
};
|
|
||||||
return typeMap[type] || type || '未分类';
|
|
||||||
},
|
|
||||||
// 更新图表数据
|
|
||||||
updateChartData() {
|
|
||||||
if (!this.chart) return;
|
|
||||||
|
|
||||||
const treeData = this.createTreeData();
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
formatter: (info) => {
|
|
||||||
const value = info.value || 0;
|
|
||||||
const treePath = info.treePathInfo || [];
|
|
||||||
let path = '';
|
|
||||||
|
|
||||||
for (let i = 0; i < treePath.length; i++) {
|
|
||||||
if (treePath[i].name) {
|
|
||||||
path += treePath[i].name;
|
|
||||||
if (i < treePath.length - 1) path += '/';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const content = [];
|
|
||||||
content.push(`<div class="tooltip-title">${echarts.format.encodeHTML(path)}</div>`);
|
|
||||||
content.push(`库存数量: ${echarts.format.addCommas(value)} ${this.getItemUnit(info.data)}`);
|
|
||||||
|
|
||||||
if (info.data.itemInfo) {
|
|
||||||
const item = info.data.itemInfo;
|
|
||||||
content.push(`物料类型: ${this.getItemTypeName(item.type)}`);
|
|
||||||
content.push(`物料编码: ${item.code || '无'}`);
|
|
||||||
if (item.batchNo) content.push(`批次号: ${item.batchNo}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return content.join('<br>');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '库存',
|
|
||||||
type: 'treemap',
|
|
||||||
visibleMin: 300,
|
|
||||||
leafDepth: 2,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: (params) => {
|
|
||||||
if (params.data.itemInfo) {
|
|
||||||
const unit = params.data.itemInfo.unit || '';
|
|
||||||
return `${params.name}\n${params.value}${unit}`;
|
|
||||||
}
|
|
||||||
return params.name;
|
|
||||||
},
|
|
||||||
ellipsis: true
|
|
||||||
},
|
|
||||||
upperLabel: {
|
|
||||||
show: true,
|
|
||||||
fontWeight: 'bold'
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
levels: this.getLevelOption(),
|
|
||||||
data: treeData
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
this.chart.setOption(option, true);
|
|
||||||
},
|
|
||||||
// 高亮指定节点
|
|
||||||
highlightNode(id) {
|
|
||||||
if (!this.chart) return;
|
|
||||||
|
|
||||||
this.chart.dispatchAction({
|
|
||||||
type: 'highlight',
|
|
||||||
seriesIndex: 0,
|
|
||||||
targetNodeId: id
|
|
||||||
});
|
|
||||||
|
|
||||||
this.chart.dispatchAction({
|
|
||||||
type: 'treemapRootToNode',
|
|
||||||
seriesIndex: 0,
|
|
||||||
targetNodeId: id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', this.handleResize);
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose();
|
|
||||||
this.chart = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tooltip-title {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form :model="form" label-width="120px">
|
|
||||||
<el-form-item label="单号">
|
|
||||||
<el-input v-model="form.stockIoCode" placeholder="请输入单号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="类型">
|
|
||||||
<el-select v-model="form.ioType" placeholder="请选择类型">
|
|
||||||
<el-option label="入库" value="in" />
|
|
||||||
<el-option label="出库" value="out" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="业务类型">
|
|
||||||
<el-select v-model="form.bizType" placeholder="请选择业务类型">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in dict.type.stock_biz_type"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注">
|
|
||||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<KLPTable :data="stockBoxData" style="width: 100%">
|
|
||||||
<el-table-column type="selection" width="55" />
|
|
||||||
<el-table-column prop="warehouseName" label="仓库" />
|
|
||||||
<el-table-column prop="itemName" label="物料" />
|
|
||||||
<el-table-column prop="quantity" label="数量" width="200">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-input-number :controls=false controls-position="right" v-model="scope.row.count" :min="0" :step="1" :max="scope.row.quantity" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="unit" label="单位" />
|
|
||||||
<el-table-column label="操作" width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</KLPTable>
|
|
||||||
<div style="text-align: right; margin-top: 10px;">
|
|
||||||
<el-button type="danger" @click="handleDeleteAll">清空</el-button>
|
|
||||||
<el-button type="primary" @click="handleGenerateBill">生成单据</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'StockIo',
|
|
||||||
dicts: ['stock_biz_type'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
stockBoxData: [],
|
|
||||||
form: {
|
|
||||||
stockIoCode: '',
|
|
||||||
ioType: 'in',
|
|
||||||
bizType: 'stock_io',
|
|
||||||
remark: '',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
data: {
|
|
||||||
handler(newVal) {
|
|
||||||
this.stockBoxData = newVal.map(item => ({
|
|
||||||
...item,
|
|
||||||
count: 0,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleDelete(row) {
|
|
||||||
this.stockBoxData = this.stockBoxData.filter(item => item.stockId !== row.stockId);
|
|
||||||
},
|
|
||||||
handleDeleteAll() {
|
|
||||||
this.stockBoxData = [];
|
|
||||||
},
|
|
||||||
handleGenerateBill() {
|
|
||||||
this.$emit('generateBill', {
|
|
||||||
...this.form,
|
|
||||||
details: this.stockBoxData.map(item => ({
|
|
||||||
...item,
|
|
||||||
status: 0,
|
|
||||||
quantity: item.count,
|
|
||||||
batchNo: item.batchNo,
|
|
||||||
remark: item.remark
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,406 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="chart-container">
|
|
||||||
<div v-if="isDrilled" class="drill-header">
|
|
||||||
<button @click="backToSummary" class="back-btn">← 返回汇总</button>
|
|
||||||
</div>
|
|
||||||
<div id="trendChart" style="width: 100%; height: 100%;"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { listStockLog } from '@/api/wms/stockLog';
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import Resize from './resize';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TrendChart',
|
|
||||||
mixins: [Resize],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
trendChart: null,
|
|
||||||
allData: [], // 存储原始数据
|
|
||||||
dailySummary: {}, // 存储按天汇总数据
|
|
||||||
isDrilled: false, // 是否处于钻取状态
|
|
||||||
currentDrillDate: '' // 当前钻取的日期
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
timeRange: {
|
|
||||||
required: true,
|
|
||||||
type: Array,
|
|
||||||
},
|
|
||||||
warehouseId: {
|
|
||||||
required: false,
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initChart();
|
|
||||||
this.getTrendData();
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
timeRange: {
|
|
||||||
handler: function() {
|
|
||||||
// 当时间范围变化时，重置钻取状态
|
|
||||||
this.isDrilled = false;
|
|
||||||
this.currentDrillDate = '';
|
|
||||||
this.getTrendData();
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
warehouseId: function() {
|
|
||||||
this.isDrilled = false;
|
|
||||||
this.currentDrillDate = '';
|
|
||||||
this.getTrendData();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.trendChart = echarts.init(document.getElementById('trendChart'));
|
|
||||||
|
|
||||||
// 绑定双击事件用于数据钻取
|
|
||||||
this.trendChart.on('dblclick', (params) => {
|
|
||||||
// 如果点击的是坐标轴空白区域，返回汇总视图
|
|
||||||
if (params.componentType === 'grid') {
|
|
||||||
if (this.isDrilled) {
|
|
||||||
this.backToSummary();
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果是柱状图元素，进行钻取
|
|
||||||
if (params.componentType === 'series' &&!this.isDrilled) {
|
|
||||||
const dateIndex = params.dataIndex;
|
|
||||||
const sortedDates = Object.keys(this.dailySummary).sort((a, b) => new Date(a) - new Date(b));
|
|
||||||
const drillDate = sortedDates[dateIndex];
|
|
||||||
this.drillDownToDate(drillDate);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.trendChart.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
getTrendData() {
|
|
||||||
const { timeRange, warehouseId } = this;
|
|
||||||
const params = {
|
|
||||||
startTime: timeRange? timeRange[0] + ' 00:00:00' : '',
|
|
||||||
endTime: timeRange? timeRange[1] + ' 23:59:59' : '',
|
|
||||||
warehouseId,
|
|
||||||
pageSize: 999999,
|
|
||||||
pageNum: 1,
|
|
||||||
};
|
|
||||||
listStockLog(params).then((res) => {
|
|
||||||
this.allData = res.rows;
|
|
||||||
this.processAndRenderData();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
processAndRenderData() {
|
|
||||||
// 按日期分组统计
|
|
||||||
this.dailySummary = {};
|
|
||||||
this.allData.forEach((item) => {
|
|
||||||
const dateArr = item.changeTime.split(' ')[0].split('-');
|
|
||||||
const year = dateArr[0];
|
|
||||||
const month = dateArr[1].padStart(2, '0');
|
|
||||||
const day = dateArr[2].padStart(2, '0');
|
|
||||||
const date = `${year}-${month}-${day}`;
|
|
||||||
const changeQty = parseFloat(item.changeQty);
|
|
||||||
|
|
||||||
if (!this.dailySummary[date]) {
|
|
||||||
this.dailySummary[date] = {
|
|
||||||
total: 0,
|
|
||||||
items: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
this.dailySummary[date].total += changeQty;
|
|
||||||
this.dailySummary[date].items.push(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 根据当前状态渲染不同视图
|
|
||||||
if (this.isDrilled) {
|
|
||||||
this.renderDetailChart(this.currentDrillDate);
|
|
||||||
} else {
|
|
||||||
this.renderSummaryChart();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderSummaryChart() {
|
|
||||||
const sortedDates = Object.keys(this.dailySummary).sort((a, b) => new Date(a) - new Date(b));
|
|
||||||
const categories = sortedDates;
|
|
||||||
const placeholderData = [0];
|
|
||||||
const incomeData = [];
|
|
||||||
const expensesData = [];
|
|
||||||
let accumulatedValue = 0;
|
|
||||||
|
|
||||||
sortedDates.forEach((date) => {
|
|
||||||
const dailyChange = this.dailySummary[date].total;
|
|
||||||
accumulatedValue += dailyChange;
|
|
||||||
placeholderData.push(accumulatedValue);
|
|
||||||
|
|
||||||
if (dailyChange > 0) {
|
|
||||||
incomeData.push(dailyChange);
|
|
||||||
expensesData.push('-');
|
|
||||||
} else {
|
|
||||||
incomeData.push('-');
|
|
||||||
expensesData.push(Math.abs(dailyChange));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
},
|
|
||||||
formatter: (params) => {
|
|
||||||
let tar;
|
|
||||||
if (params[1] && params[1].value!== '-') {
|
|
||||||
tar = params[1];
|
|
||||||
} else {
|
|
||||||
tar = params[2];
|
|
||||||
}
|
|
||||||
if (tar) {
|
|
||||||
const date = sortedDates[tar.dataIndex];
|
|
||||||
const itemCount = this.dailySummary[date].items.length;
|
|
||||||
return `
|
|
||||||
<div>日期: ${date}</div>
|
|
||||||
<div>当日库存变化: ${this.dailySummary[date].total}</div>
|
|
||||||
<div>累计库存变化: ${placeholderData[tar.dataIndex + 1]}</div>
|
|
||||||
<div>操作记录: ${itemCount} 条</div>
|
|
||||||
<div style="color:#888">双击查看明细</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['入库', '出库'],
|
|
||||||
top: 30,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '15%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: categories,
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 45,
|
|
||||||
interval: 0,
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '库存变化量',
|
|
||||||
nameLocation:'middle',
|
|
||||||
nameGap: 30,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '占位',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'Total',
|
|
||||||
silent: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: 'transparent',
|
|
||||||
},
|
|
||||||
data: placeholderData.slice(0, -1),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '入库',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'Total',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter: (params) => params.value!== '-'? `+${params.value}` : '',
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#52c41a',
|
|
||||||
},
|
|
||||||
data: incomeData,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '出库',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'Total',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'bottom',
|
|
||||||
formatter: (params) => params.value!== '-'? `-${params.value}` : '',
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#f5222d',
|
|
||||||
},
|
|
||||||
data: expensesData,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
this.trendChart.setOption(option);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 钻取到指定日期的明细
|
|
||||||
drillDownToDate(date) {
|
|
||||||
this.isDrilled = true;
|
|
||||||
this.currentDrillDate = date;
|
|
||||||
this.renderDetailChart(date);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 渲染明细图表
|
|
||||||
renderDetailChart(date) {
|
|
||||||
const dayItems = this.dailySummary[date].items.sort((a, b) => new Date(a.changeTime) - new Date(b.changeTime));
|
|
||||||
|
|
||||||
// 准备明细数据
|
|
||||||
const timeLabels = dayItems.map(item => {
|
|
||||||
const timePart = item.changeTime.split(' ')[1];
|
|
||||||
return timePart.slice(0, 5); // 只显示时分
|
|
||||||
});
|
|
||||||
|
|
||||||
const values = dayItems.map(item => {
|
|
||||||
const qty = parseFloat(item.changeQty);
|
|
||||||
return {
|
|
||||||
value: qty,
|
|
||||||
itemStyle: {
|
|
||||||
color: qty > 0? '#52c41a' : '#f5222d'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: qty > 0? 'top' : 'bottom',
|
|
||||||
formatter: `${qty > 0? '+' : ''}${qty}`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// 计算累积值用于阶梯效果
|
|
||||||
const bases = [0];
|
|
||||||
let accumulated = 0;
|
|
||||||
dayItems.forEach((item, index) => {
|
|
||||||
if (index > 0) {
|
|
||||||
accumulated += parseFloat(dayItems[index - 1].changeQty);
|
|
||||||
bases.push(accumulated);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: `${date} 库存变动明细`,
|
|
||||||
left: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
formatter: (params) => {
|
|
||||||
const item = dayItems[params[0].dataIndex];
|
|
||||||
return `
|
|
||||||
<div>时间: ${item.changeTime}</div>
|
|
||||||
<div>类型: ${item.changeType}</div>
|
|
||||||
<div>物料ID: ${item.itemId}</div>
|
|
||||||
<div>变化量: ${item.changeQty}</div>
|
|
||||||
<div>操作后数量: ${item.afterQty}</div>
|
|
||||||
${item.remark? `<div>备注: ${item.remark}</div>` : ''}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '5%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '15%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: timeLabels,
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 45,
|
|
||||||
interval: 0
|
|
||||||
},
|
|
||||||
name: '时间'
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '数量'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '占位',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'Detail',
|
|
||||||
silent: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: 'transparent'
|
|
||||||
},
|
|
||||||
data: bases
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '变动',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'Detail',
|
|
||||||
data: values,
|
|
||||||
barWidth: '60%'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
this.trendChart.setOption(option);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 返回汇总视图
|
|
||||||
backToSummary() {
|
|
||||||
this.isDrilled = false;
|
|
||||||
this.currentDrillDate = '';
|
|
||||||
this.renderSummaryChart();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', () => {
|
|
||||||
this.trendChart.resize();
|
|
||||||
});
|
|
||||||
if (this.trendChart) {
|
|
||||||
this.trendChart.dispose();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drill-header {
|
|
||||||
padding: 10px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
padding: 4px 10px;
|
|
||||||
background-color: #1890ff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background-color: #096dd9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drill-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
313
package-lock.json
generated
313
package-lock.json
generated
@@ -2,5 +2,316 @@
|
|||||||
"name": "klp-oa",
|
"name": "klp-oa",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {}
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"vxe-table": "^2.11.0",
|
||||||
|
"xe-utils": "^3.5.31"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/helper-string-parser": {
|
||||||
|
"version": "7.27.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
|
||||||
|
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/helper-validator-identifier": {
|
||||||
|
"version": "7.28.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
|
||||||
|
"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/parser": {
|
||||||
|
"version": "7.29.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.2.tgz",
|
||||||
|
"integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/types": "^7.29.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"parser": "bin/babel-parser.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@babel/types": {
|
||||||
|
"version": "7.29.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
|
||||||
|
"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/helper-string-parser": "^7.27.1",
|
||||||
|
"@babel/helper-validator-identifier": "^7.28.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@vue/compiler-sfc": {
|
||||||
|
"version": "2.7.16",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
|
||||||
|
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/parser": "^7.23.5",
|
||||||
|
"postcss": "^8.4.14",
|
||||||
|
"source-map": "^0.6.1"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"prettier": "^1.18.2 || ^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/csstype": {
|
||||||
|
"version": "3.2.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
|
||||||
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/nanoid": {
|
||||||
|
"version": "3.3.11",
|
||||||
|
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
||||||
|
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/ai"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"bin": {
|
||||||
|
"nanoid": "bin/nanoid.cjs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/picocolors": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"node_modules/postcss": {
|
||||||
|
"version": "8.5.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
|
||||||
|
"integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/postcss/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "tidelift",
|
||||||
|
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/ai"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"nanoid": "^3.3.11",
|
||||||
|
"picocolors": "^1.1.1",
|
||||||
|
"source-map-js": "^1.2.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^10 || ^12 || >=14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/prettier": {
|
||||||
|
"version": "2.8.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
|
||||||
|
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"peer": true,
|
||||||
|
"bin": {
|
||||||
|
"prettier": "bin-prettier.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/source-map": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/source-map-js": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"peer": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vue": {
|
||||||
|
"version": "2.7.16",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
|
||||||
|
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
|
||||||
|
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||||
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/compiler-sfc": "2.7.16",
|
||||||
|
"csstype": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vxe-table": {
|
||||||
|
"version": "2.11.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-2.11.0.tgz",
|
||||||
|
"integrity": "sha512-dDLV2Iiy/8Yiy14MX91TQb2HsW9K5ZYS3+xIjBmKc5JFMEHeuB8SxaFShSXhVk9GNTd+/u0GqvQhDoQ1WXAwnw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^2.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/xe-utils": {
|
||||||
|
"version": "3.5.31",
|
||||||
|
"resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.31.tgz",
|
||||||
|
"integrity": "sha512-oS4yv8qktvlE0wc9yYkitDidEmThc5qN0UTRvKCvrWnejxbTyIxbwfrdZmPKdKGZtB+/U8cEAMFywLJjHtD11A==",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/helper-string-parser": {
|
||||||
|
"version": "7.27.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
|
||||||
|
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"@babel/helper-validator-identifier": {
|
||||||
|
"version": "7.28.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
|
||||||
|
"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"@babel/parser": {
|
||||||
|
"version": "7.29.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.2.tgz",
|
||||||
|
"integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@babel/types": "^7.29.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@babel/types": {
|
||||||
|
"version": "7.29.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
|
||||||
|
"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@babel/helper-string-parser": "^7.27.1",
|
||||||
|
"@babel/helper-validator-identifier": "^7.28.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@vue/compiler-sfc": {
|
||||||
|
"version": "2.7.16",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
|
||||||
|
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@babel/parser": "^7.23.5",
|
||||||
|
"postcss": "^8.4.14",
|
||||||
|
"prettier": "^1.18.2 || ^2.0.0",
|
||||||
|
"source-map": "^0.6.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"csstype": {
|
||||||
|
"version": "3.2.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
|
||||||
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"nanoid": {
|
||||||
|
"version": "3.3.11",
|
||||||
|
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
||||||
|
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"picocolors": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"version": "8.5.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
|
||||||
|
"integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"nanoid": "^3.3.11",
|
||||||
|
"picocolors": "^1.1.1",
|
||||||
|
"source-map-js": "^1.2.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"prettier": {
|
||||||
|
"version": "2.8.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
|
||||||
|
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||||
|
"optional": true,
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"source-map": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"source-map-js": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||||
|
"peer": true
|
||||||
|
},
|
||||||
|
"vue": {
|
||||||
|
"version": "2.7.16",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
|
||||||
|
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
|
||||||
|
"peer": true,
|
||||||
|
"requires": {
|
||||||
|
"@vue/compiler-sfc": "2.7.16",
|
||||||
|
"csstype": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"vxe-table": {
|
||||||
|
"version": "2.11.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-2.11.0.tgz",
|
||||||
|
"integrity": "sha512-dDLV2Iiy/8Yiy14MX91TQb2HsW9K5ZYS3+xIjBmKc5JFMEHeuB8SxaFShSXhVk9GNTd+/u0GqvQhDoQ1WXAwnw==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
|
"xe-utils": {
|
||||||
|
"version": "3.5.31",
|
||||||
|
"resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.31.tgz",
|
||||||
|
"integrity": "sha512-oS4yv8qktvlE0wc9yYkitDidEmThc5qN0UTRvKCvrWnejxbTyIxbwfrdZmPKdKGZtB+/U8cEAMFywLJjHtD11A=="
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
package.json
Normal file
6
package.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"vxe-table": "^2.11.0",
|
||||||
|
"xe-utils": "^3.5.31"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user