feat(wms): 新增钢卷表面处理字段及相关功能
在钢卷相关实体类、前端页面和查询逻辑中新增钢卷表面处理字段，包括： 1. 在WmsMaterialCoil、WmsMaterialCoilVo、WmsMaterialCoilBo中新增coilSurfaceTreatment字段 2. 在前端多个页面中新增钢卷表面处理的展示和编辑功能 3. 在查询逻辑中新增对钢卷表面处理的过滤条件 4. 新增仓库操作记录页面及相关统计图表功能
This commit is contained in:
砂糖
@@ -63,7 +63,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="coil.specification" label="规格" width="220">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil.product" />
|
||||
<ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil" />
|
||||
<RawMaterialInfo v-else-if="scope.row.coil.itemType === 'raw_material'"
|
||||
:material="scope.row.coil" />
|
||||
</template>
|
||||
|
||||
514
klp-ui/src/views/wms/warehouse/record.vue
Normal file
514
klp-ui/src/views/wms/warehouse/record.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="操作时间" prop="createTimeRange">
|
||||
<el-date-picker clearable v-model="queryParams.createTimeRange" type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建人" prop="createBy">
|
||||
<el-input v-model="queryParams.createBy" placeholder="请输入创建人" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 统计指标卡 -->
|
||||
<el-row :gutter="10" class="mb10">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-icon-primary">
|
||||
<i class="el-icon-document"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-title">操作记录总数</div>
|
||||
<div class="stat-value">{{ stats.totalCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-icon-success">
|
||||
<i class="el-icon-s-finance"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-title">总重量</div>
|
||||
<div class="stat-value">{{ stats.totalWeight }} kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon stat-icon-warning">
|
||||
<i class="el-icon-location"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-title">涉及库位</div>
|
||||
<div class="stat-value">{{ stats.warehouseCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<el-row :gutter="10" class="mb10">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="clearfix" style="padding-bottom: 5px;">
|
||||
<span>操作记录趋势</span>
|
||||
</div>
|
||||
<div id="trendChart" style="height: 250px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="clearfix" style="padding-bottom: 5px;">
|
||||
<span>操作人分布（饼图）</span>
|
||||
</div>
|
||||
<div id="pieChart" style="height: 250px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" :body-style="{ padding: '10px' }">
|
||||
<div slot="header" class="clearfix" style="padding-bottom: 5px;">
|
||||
<span>操作人分布（柱状图）</span>
|
||||
</div>
|
||||
<div id="barChart" style="height: 250px;"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table height="calc(100vh - 400px)" :data="coilWarehouseOperationLogList"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column prop="createTime" label="操作时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createBy" label="操作人" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createBy }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operationType" label="操作类型" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.operationType === 1">收货</span>
|
||||
<span v-else-if="scope.row.operationType === 2">加工</span>
|
||||
<span v-else-if="scope.row.operationType === 3">调拨</span>
|
||||
<span v-else-if="scope.row.operationType === 4">发货</span>
|
||||
<!-- {{ scope.row.operationType === 1 ? '入库' : '出库' }} -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="inOutType" label="出入库类型" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.inOutType === 1 ? '入库' : '出库' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coil.enterCoilNo" label="入场卷号" width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.coil && scope.row.coil.enterCoilNo ? scope.row.coil.enterCoilNo : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coil.currentCoilNo" label="当前卷号" width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.coil && scope.row.coil.currentCoilNo ? scope.row.coil.currentCoilNo : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coil.weight" label="重量">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.coil && scope.row.coil.netWeight ? scope.row.coil.netWeight : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coil.specification" label="规格" width="180">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil" />
|
||||
<RawMaterialInfo v-else-if="scope.row.coil.itemType === 'raw_material'" :material="scope.row.coil" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="warehouse.actualWarehouseName" label="库位">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.warehouse && scope.row.warehouse.actualWarehouseName ? scope.row.warehouse.actualWarehouseName :
|
||||
'-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :loading="buttonLoading" type="danger" size="mini" icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="setPageData" />
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCoilWarehouseOperationLog, delCoilWarehouseOperationLog } from "@/api/wms/coilWarehouseOperationLog";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
import dayjs from "dayjs";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "CoilWarehouseOperationLog",
|
||||
components: {
|
||||
ProductInfo,
|
||||
RawMaterialInfo,
|
||||
},
|
||||
data() {
|
||||
// 筛选时间设置为本月时间
|
||||
const createTimeRange = [
|
||||
dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
||||
];
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 钢卷库区操作记录表格数据
|
||||
coilWarehouseOperationLogList: [],
|
||||
// 原始数据（用于前端分页）
|
||||
allData: [],
|
||||
// 统计指标
|
||||
stats: {
|
||||
totalCount: 0,
|
||||
totalWeight: 0,
|
||||
warehouseCount: 0
|
||||
},
|
||||
// 图表实例
|
||||
trendChart: null,
|
||||
pieChart: null,
|
||||
barChart: null,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
actualWarehouseId: undefined,
|
||||
createTimeRange: createTimeRange,
|
||||
operationType: undefined,
|
||||
inOutType: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
// 初始化图表
|
||||
this.initCharts();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 销毁图表实例
|
||||
if (this.trendChart) {
|
||||
this.trendChart.dispose();
|
||||
}
|
||||
if (this.pieChart) {
|
||||
this.pieChart.dispose();
|
||||
}
|
||||
if (this.barChart) {
|
||||
this.barChart.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询钢卷库区操作记录列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 处理时间范围
|
||||
if (this.queryParams.createTimeRange) {
|
||||
this.queryParams.createStartTime = this.queryParams.createTimeRange[0];
|
||||
this.queryParams.createEndTime = this.queryParams.createTimeRange[1];
|
||||
}
|
||||
// 移除分页参数，获取全部数据
|
||||
const params = { ...this.queryParams, pageNum:1, pageSize: 10000 };
|
||||
|
||||
listCoilWarehouseOperationLog(params).then(response => {
|
||||
this.allData = response.rows;
|
||||
this.total = response.total;
|
||||
this.calculateStats();
|
||||
this.setPageData();
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 设置分页数据 */
|
||||
setPageData() {
|
||||
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
|
||||
const end = start + parseInt(this.queryParams.pageSize);
|
||||
this.coilWarehouseOperationLogList = this.allData.slice(start, end);
|
||||
},
|
||||
/** 计算统计指标 */
|
||||
calculateStats() {
|
||||
// 计算操作记录总数
|
||||
this.stats.totalCount = this.allData.length;
|
||||
|
||||
// 计算总重量
|
||||
this.stats.totalWeight = this.allData.reduce((sum, item) => {
|
||||
if (item.coil && item.coil.netWeight) {
|
||||
return sum + parseFloat(item.coil.netWeight);
|
||||
}
|
||||
return sum;
|
||||
}, 0).toFixed(2);
|
||||
|
||||
// 计算涉及的库位数量（去重）
|
||||
const warehouseIds = new Set();
|
||||
this.allData.forEach(item => {
|
||||
if (item.warehouse && item.warehouse.actualWarehouseId) {
|
||||
warehouseIds.add(item.warehouse.actualWarehouseId);
|
||||
}
|
||||
});
|
||||
this.stats.warehouseCount = warehouseIds.size;
|
||||
|
||||
// 更新图表数据
|
||||
this.updateCharts();
|
||||
},
|
||||
/** 初始化图表 */
|
||||
initCharts() {
|
||||
// 趋势图
|
||||
this.trendChart = echarts.init(document.getElementById('trendChart'));
|
||||
// 饼图
|
||||
this.pieChart = echarts.init(document.getElementById('pieChart'));
|
||||
// 柱状图
|
||||
this.barChart = echarts.init(document.getElementById('barChart'));
|
||||
},
|
||||
/** 更新图表数据 */
|
||||
updateCharts() {
|
||||
this.updateTrendChart();
|
||||
this.updatePieChart();
|
||||
this.updateBarChart();
|
||||
},
|
||||
/** 更新趋势图 */
|
||||
updateTrendChart() {
|
||||
if (!this.trendChart) return;
|
||||
|
||||
// 按日期分组数据
|
||||
const dateMap = {};
|
||||
this.allData.forEach(item => {
|
||||
const date = item.createTime.substring(0, 10);
|
||||
if (!dateMap[date]) {
|
||||
dateMap[date] = 0;
|
||||
}
|
||||
dateMap[date]++;
|
||||
});
|
||||
|
||||
// 转换为数组并排序
|
||||
const dateArr = Object.keys(dateMap).sort();
|
||||
const dataArr = dateArr.map(date => dateMap[date]);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dateArr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: dataArr,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}]
|
||||
};
|
||||
|
||||
this.trendChart.setOption(option);
|
||||
},
|
||||
/** 更新饼图 */
|
||||
updatePieChart() {
|
||||
if (!this.pieChart) return;
|
||||
|
||||
// 按操作人分组数据
|
||||
const userMap = {};
|
||||
this.allData.forEach(item => {
|
||||
const user = item.createBy || '未知';
|
||||
if (!userMap[user]) {
|
||||
userMap[user] = 0;
|
||||
}
|
||||
userMap[user]++;
|
||||
});
|
||||
|
||||
// 转换为数组并按操作次数从大到小排序
|
||||
const data = Object.entries(userMap)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([user, value]) => ({
|
||||
name: user,
|
||||
value: value
|
||||
}));
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
data: data,
|
||||
radius: '50%'
|
||||
}]
|
||||
};
|
||||
|
||||
this.pieChart.setOption(option);
|
||||
},
|
||||
/** 更新柱状图 */
|
||||
updateBarChart() {
|
||||
if (!this.barChart) return;
|
||||
|
||||
// 按操作人分组数据
|
||||
const userMap = {};
|
||||
this.allData.forEach(item => {
|
||||
const user = item.createBy || '未知';
|
||||
if (!userMap[user]) {
|
||||
userMap[user] = 0;
|
||||
}
|
||||
userMap[user]++;
|
||||
});
|
||||
|
||||
// 转换为数组并按操作次数从大到小排序
|
||||
const sortedEntries = Object.entries(userMap).sort((a, b) => b[1] - a[1]);
|
||||
const users = sortedEntries.map(([user]) => user);
|
||||
const counts = sortedEntries.map(([, count]) => count);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: users
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: counts,
|
||||
type: 'bar'
|
||||
}]
|
||||
};
|
||||
|
||||
this.barChart.setOption(option);
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.logId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const logIds = row.logId || this.ids;
|
||||
this.$modal.confirm('是否确认删除钢卷库区操作记录编号为"' + logIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delCoilWarehouseOperationLog(logIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/coilWarehouseOperationLog/export', {
|
||||
...this.queryParams
|
||||
}, `coilWarehouseOperationLog_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-icon-primary {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.stat-icon-success {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.stat-icon-warning {
|
||||
background-color: #e6a23c;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user