✨ feat: 仓库管理
This commit is contained in:
砂糖
@@ -28,10 +28,10 @@ import DashboardLayout from './layout/index.vue';
|
||||
import DashboardChartsGrid from './grid/index.vue';
|
||||
|
||||
// API 请求（业务逻辑）
|
||||
import { listOrder } from '@/api/wms/order';
|
||||
import { listOrderDetail } from '@/api/wms/orderDetail';
|
||||
import { listOrder } from '@/api/oms/order';
|
||||
import { listOrderDetail } from '@/api/oms/orderDetail';
|
||||
import { listReturnExchange } from '@/api/oa/returnExchange';
|
||||
import { listCustomer } from '@/api/wms/customer';
|
||||
import { listCustomer } from '@/api/oms/customer';
|
||||
|
||||
// 路由实例
|
||||
const router = useRouter();
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<template #header>
|
||||
<div class="dialog-title flex items-center gap-2">
|
||||
<i class="el-icon-document"></i>
|
||||
<i class="Document"></i>
|
||||
<span>项目报工详情</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -274,7 +274,7 @@ export default {
|
||||
// const pct = (t,y) => y===0 ? '—' : (((t-y)/y)*100).toFixed(1) + '%';
|
||||
// this.summaryCards = [
|
||||
// { title:'今日报工人数', value:todayCount, displayChange:`${pct(todayCount,yc)} 较昨日`, changeClass: todayCount-yc>=0?'up':'down', icon:'el-icon-user', iconColor:'#67C23A' },
|
||||
// { title:'进行中项目', value:inProgressProjects, displayChange:`${pct(inProgressProjects,yp)} 较昨日`, changeClass: inProgressProjects-yp>=0?'up':'down', icon:'el-icon-document', iconColor:'#409EFF' },
|
||||
// { title:'进行中项目', value:inProgressProjects, displayChange:`${pct(inProgressProjects,yp)} 较昨日`, changeClass: inProgressProjects-yp>=0?'up':'down', icon:'Document', iconColor:'#409EFF' },
|
||||
// { title:'本月报工', value:completionRate, displayChange:`${pct(completionRate,ycr)} 较上月`, changeClass: completionRate-ycr>=0?'up':'down', icon:'el-icon-data-analysis', iconColor:'#E6A23C' },
|
||||
// { title:'异常预警', value:exceptions, exception:true, icon:'el-icon-warning', iconColor:'#F56C6C' }
|
||||
// ];
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
|
||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/oms/customer";
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
@@ -239,8 +239,8 @@ export default {
|
||||
// fixed: 'right',
|
||||
// render: (h, row) => {
|
||||
// const actions = [];
|
||||
// actions.push(<el-button type="text" size="small" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
|
||||
// actions.push(<el-button type="text" size="small" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
|
||||
// actions.push(<el-button type="text" size="small" icon="Edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
|
||||
// actions.push(<el-button type="text" size="small" icon="Delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
|
||||
// return actions;
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -157,10 +157,10 @@ import * as echarts from 'echarts'
|
||||
import {
|
||||
UserFilled, ShoppingCart, Money, RefreshRight
|
||||
} from '@element-plus/icons-vue'
|
||||
import { listOrder } from '@/api/wms/order'
|
||||
import { listOrderDetail } from '@/api/wms/orderDetail'
|
||||
import { listOrder } from '@/api/oms/order'
|
||||
import { listOrderDetail } from '@/api/oms/orderDetail'
|
||||
import { listReturnExchange } from '@/api/oa/returnExchange'
|
||||
import { listCustomer } from '@/api/wms/customer'
|
||||
import { listCustomer } from '@/api/oms/customer'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { order_status } = proxy.useDict("order_status")
|
||||
|
||||
@@ -81,13 +81,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
|
||||
import { getOrder } from "@/api/wms/order";
|
||||
import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/oms/orderDetail";
|
||||
import { getOrder } from "@/api/oms/order";
|
||||
import ProductSelect from '@/components/ProductSelect';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import ProductInfo from '@/components/Renderer/ProductInfo.vue';
|
||||
import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
|
||||
import KLPTable from '@/components/GearTable/index.vue';
|
||||
|
||||
export default {
|
||||
name: "OrderDetailPanel",
|
||||
@@ -102,7 +101,6 @@ export default {
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
BomInfoMini,
|
||||
KLPTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<!-- 自定义操作按钮 -->
|
||||
<template #actions="{ item }">
|
||||
<!-- 删除按钮 -->
|
||||
<el-button size="small" type="text" style="color: red" icon="el-icon-delete"
|
||||
<el-button size="small" type="text" style="color: red" icon="Delete"
|
||||
@click.stop="handleDelete(item)"></el-button>
|
||||
</template>
|
||||
</klp-list>
|
||||
@@ -50,7 +50,7 @@
|
||||
<el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
|
||||
<el-form-item label="订单ID" prop="orderId">
|
||||
<el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
|
||||
<el-button style="padding: -1;" slot="append" size="small" type="text" icon="el-icon-document-copy"
|
||||
<el-button style="padding: -1;" slot="append" size="small" type="text" icon="Document-copy"
|
||||
@click.stop="copyOrderId(form.orderId)"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@@ -162,7 +162,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrder, delOrder, addOrder, updateOrder, listOrder } from "@/api/wms/order";
|
||||
import { getOrder, delOrder, addOrder, updateOrder, listOrder } from "@/api/oms/order";
|
||||
import OrderDetailPanel from './detail.vue';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import CustomerSelect from '@/components/CustomerSelect/index.vue';
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
|
||||
class="create-button">
|
||||
<template v-if="!createLoading">
|
||||
<i class="el-icon-plus"></i> 创建BOM
|
||||
<i class="Plus"></i> 创建BOM
|
||||
</template>
|
||||
<template v-else>
|
||||
创建中...
|
||||
|
||||
287
gear-ui3/src/views/wms/ledger/index.vue
Normal file
287
gear-ui3/src/views/wms/ledger/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="存储位置" prop="warehouseId">
|
||||
<WarehouseSelect v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位" clearable @change="getList" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="变动时间" prop="changeTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="queryParams.changeTime"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择实际库存变动时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="queryParams.batchNo" placeholder="请输入批次号" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="stockLogList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="存储位置" align="center" prop="warehouseName" />
|
||||
<el-table-column label="物品ID" align="center" prop="itemId">
|
||||
<template #default="scope">
|
||||
<RawMaterialInfo v-if="scope.row.itemType == 'raw_material'" :material-id="scope.row.itemId" />
|
||||
<ProductInfo v-else-if="scope.row.itemType == 'product' || scope.row.itemType == 'semi'" :product-id="scope.row.itemId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品类型" align="center" prop="itemType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_item_type" :value="scope.row.itemType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="变动数量" align="center" prop="changeQty" />
|
||||
<el-table-column label="变动后的库存数量" align="center" prop="afterQty" />
|
||||
<el-table-column label="变动类型" align="center" prop="changeType" />
|
||||
<el-table-column label="库存数量变动时间" align="center" prop="changeTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.changeTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="批次号" align="center" prop="batchNo" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(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="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改库存流水对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="存储位置" prop="warehouseId" disabled>
|
||||
<el-input v-model="form.warehouseId" placeholder="请输入仓库/库区/库位ID" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="物品信息" prop="itemId" disabled>
|
||||
<ProductInfo v-if="form.itemType == 'product' || form.itemType == 'semi'" :product-id="form.itemId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="变动数量" prop="changeQty" disabled>
|
||||
<el-input v-model="form.changeQty" placeholder="请输入变动数量" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="afterQty" disabled>
|
||||
<el-input v-model="form.afterQty" placeholder="请输入变动后的库存数量" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="变动时间" prop="changeTime" disabled>
|
||||
<el-date-picker clearable
|
||||
v-model="form.changeTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择实际库存变动时间" disabled>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="form.batchNo" placeholder="请输入批次号" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStockLog, getStockLog, updateStockLog } from "@/api/wms/stockLog";
|
||||
import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
|
||||
import ProductSelect from '@/components/ProductSelect/index.vue';
|
||||
import ProductInfo from '@/components/Renderer/ProductInfo.vue';
|
||||
|
||||
export default {
|
||||
name: "StockLog",
|
||||
components: {
|
||||
WarehouseSelect,
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { stock_item_type } = proxy.useDict('stock_item_type');
|
||||
return {
|
||||
stock_item_type,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 库存流水表格数据
|
||||
stockLogList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
warehouseId: undefined,
|
||||
itemId: undefined,
|
||||
itemType: undefined,
|
||||
changeQty: undefined,
|
||||
afterQty: undefined,
|
||||
changeType: undefined,
|
||||
changeTime: undefined,
|
||||
batchNo: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const itemId = this.$route.query.itemId;
|
||||
const itemType = this.$route.query.itemType;
|
||||
if (itemId && itemType) {
|
||||
this.queryParams.itemId = itemId;
|
||||
this.queryParams.itemType = itemType;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询库存流水列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const { changeTime, ...payload } = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryParams.changeTime ? this.queryParams.changeTime[0] + ' 00:00:00' : undefined,
|
||||
endTime: this.queryParams.changeTime ? this.queryParams.changeTime[1] + ' 23:59:59' : undefined
|
||||
}
|
||||
listStockLog(payload).then(response => {
|
||||
this.stockLogList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
warehouseId: undefined,
|
||||
itemId: undefined,
|
||||
itemType: undefined,
|
||||
changeQty: undefined,
|
||||
afterQty: undefined,
|
||||
changeType: undefined,
|
||||
changeTime: undefined,
|
||||
remark: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getStockLog(id).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改库存流水";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.id != null) {
|
||||
updateStockLog(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('klp/stockLog/export', {
|
||||
...this.queryParams
|
||||
}, `stockLog_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
167
gear-ui3/src/views/wms/stock/box.vue
Normal file
167
gear-ui3/src/views/wms/stock/box.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<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>
|
||||
410
gear-ui3/src/views/wms/stock/index.vue
Normal file
410
gear-ui3/src/views/wms/stock/index.vue
Normal file
@@ -0,0 +1,410 @@
|
||||
<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>
|
||||
<WarehouseTree @node-click="handleTreeSelect" />
|
||||
</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 label="单位" prop="unit">
|
||||
<el-input v-model="queryParams.unit" placeholder="请输入单位" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
|
||||
<!-- 合并批次<el-switch v-model="queryParams.mergeBatch" :active-value="1" :inactive-value="0" @change="handleQuery" /> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
|
||||
<el-table v-loading="loading" :data="stockList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="仓库" align="center" prop="warehouseName" />
|
||||
<el-table-column label="物品类型" align="center" prop="itemType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_item_type" :value="scope.row.itemType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品" align="center" prop="itemName">
|
||||
<template #default="scope">
|
||||
<ProductInfo v-if="scope.row.itemType == 'product' || scope.row.itemType == 'semi'" :productId="scope.row.itemId">
|
||||
<template #default="{ product }">
|
||||
{{ product.productName }}({{ product.productCode }})
|
||||
</template>
|
||||
</ProductInfo>
|
||||
<!-- <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
|
||||
<template #default="{ material }">
|
||||
{{ material.rawMaterialName }}({{ material.rawMaterialCode }})
|
||||
</template>
|
||||
</RawMaterialInfo> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="BOM">
|
||||
<template #default="scope">
|
||||
<BomInfoMini :itemType="scope.row.itemType" :itemId="scope.row.itemId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存数量" align="center" prop="quantity" />
|
||||
<!-- <el-table-column label="在途数量" align="center" prop="onTheWay" /> -->
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="批次号" align="center" prop="batchNo" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small" @click="handleTrace(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="getList" />
|
||||
|
||||
<!-- 添加或修改库存对话框（保持不变） -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="仓库/库区/库位ID" prop="warehouseId">
|
||||
<warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物品类型" prop="itemType">
|
||||
<el-select v-model="form.itemType" placeholder="请选择物品类型">
|
||||
<el-option v-for="dict in stock_item_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品" prop="itemId">
|
||||
<!-- <raw-material-select v-if="form.itemType === 'rawMaterial'" v-model="form.itemId" placeholder="请选择原材料"
|
||||
style="width: 100%;" clearable /> -->
|
||||
<product-select v-if="form.itemType === 'product'" v-model="form.itemId" placeholder="请选择产品"
|
||||
style="width: 100%;" clearable />
|
||||
<el-input v-else v-model="form.itemId" placeholder="请先选择物品类型" :disabled="true" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入库存数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="stockBoxVisible" title="暂存单据" width="800px" append-to-body>
|
||||
<stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="stockTraceVisible" title="物料追溯" width="800px" append-to-body>
|
||||
<el-table :data="stockTraceList" style="width: 100%">
|
||||
<el-table-column label="单据类型" align="center" prop="ioType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_io_type" :value="scope.row.ioType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单据ID" align="center" prop="stockIoId" />
|
||||
<el-table-column label="单据编号" align="center" prop="stockIoCode" />
|
||||
<!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
|
||||
<el-table-column label="变更数量" align="center" prop="quantity" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStock, delStock, addStock, updateStock, getStockTrace } from "@/api/wms/stock";
|
||||
import { addStockIoWithDetail } from "@/api/wms/stockIo";
|
||||
import ProductSelect from "@/components/ProductSelect";
|
||||
import WarehouseSelect from "@/components/WarehouseSelect";
|
||||
import StockBox from './box';
|
||||
import ProductInfo from "@/components/Renderer/ProductInfo";
|
||||
import BomInfoMini from "@/components/Renderer/BomInfoMini";
|
||||
import StockIo from './panels/stockIo.vue';
|
||||
import WarehouseTree from "@/components/WarehouseTree/index.vue";
|
||||
|
||||
export default {
|
||||
name: "Stock",
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { stock_item_type, stock_io_type } = proxy.useDict('stock_item_type', 'stock_io_type');
|
||||
return {
|
||||
stock_item_type,
|
||||
stock_io_type,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
WarehouseSelect,
|
||||
ProductSelect,
|
||||
StockBox,
|
||||
ProductInfo,
|
||||
BomInfoMini,
|
||||
StockIo,
|
||||
WarehouseTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 库存分析对话框显示状态
|
||||
stockBoxVisible: false,
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 库存：原材料/产品与库区/库位的存放关系表格数据
|
||||
stockList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
warehouseId: undefined,
|
||||
itemType: undefined,
|
||||
itemId: undefined,
|
||||
quantity: undefined,
|
||||
unit: undefined,
|
||||
batchNo: undefined,
|
||||
mergeBatch: false,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
warehouseId: [
|
||||
{ required: true, message: "仓库/库区/库位ID不能为空", trigger: "blur" }
|
||||
],
|
||||
itemType: [
|
||||
{ required: true, message: "物品类型不能为空", trigger: "change" }
|
||||
],
|
||||
itemId: [
|
||||
{ required: true, message: "物品ID不能为空", trigger: "blur" }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: "库存数量不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
batchNo: [
|
||||
{ required: true, message: "批次号不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
// 暂存用于创建出库单或移库单的数据
|
||||
stockBoxData: [],
|
||||
stockBoxVisible: false,
|
||||
// 选中的数据
|
||||
selectedRows: [],
|
||||
stockTraceList: [],
|
||||
stockTraceVisible: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询库存：原材料/产品与库区/库位的存放关系列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listStock(this.queryParams).then(response => {
|
||||
this.stockList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 树节点点击
|
||||
handleTreeSelect(node) {
|
||||
this.queryParams.warehouseId = node.warehouseId;
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
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();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
this.ids = selection.map(item => item.stockId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.stockId != null) {
|
||||
updateStock(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addStock(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const stockIds = row.stockId || this.ids;
|
||||
this.$modal.confirm('是否确认删除库存：原材料/产品与库区/库位的存放关系编号为"' + stockIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delStock(stockIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/stock/export', {
|
||||
...this.queryParams
|
||||
}, `stock_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
handleStockBox() {
|
||||
// 添加到暂存单据中，并且去重,去重依据为stockId是否相同
|
||||
const list = [...this.selectedRows, ...this.stockBoxData];
|
||||
console.log(list);
|
||||
const uniqueStockBoxData = list.filter((item, index, self) =>
|
||||
index === self.findIndex(t => t.stockId === item.stockId)
|
||||
);
|
||||
this.stockBoxData = uniqueStockBoxData;
|
||||
|
||||
this.$modal.msgSuccess("暂存成功，请点击“暂存单据”按钮生成单据");
|
||||
},
|
||||
handleGenerateBill(data) {
|
||||
addStockIoWithDetail(data).then(response => {
|
||||
this.$modal.msgSuccess("生成单据成功");
|
||||
});
|
||||
},
|
||||
handleViewStockBox() {
|
||||
// 查看暂存单据
|
||||
console.log(this.stockBoxData);
|
||||
this.stockBoxVisible = true;
|
||||
},
|
||||
handleTrace(row) {
|
||||
// 查询对应批次号的的出库和入库单据明细并展示
|
||||
getStockTrace(row.batchNo).then(response => {
|
||||
this.stockTraceList = response.data;
|
||||
this.stockTraceVisible = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
214
gear-ui3/src/views/wms/stock/panels/bar.vue
Normal file
214
gear-ui3/src/views/wms/stock/panels/bar.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<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>
|
||||
269
gear-ui3/src/views/wms/stock/panels/reattree.vue
Normal file
269
gear-ui3/src/views/wms/stock/panels/reattree.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<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>
|
||||
85
gear-ui3/src/views/wms/stock/panels/resize.js
Normal file
85
gear-ui3/src/views/wms/stock/panels/resize.js
Normal file
@@ -0,0 +1,85 @@
|
||||
// 防抖函数：避免频繁触发 resize
|
||||
function debounce(fn, delay = 100) {
|
||||
let timer = null;
|
||||
return function (...args) {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
timer = null;
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 存储ResizeObserver实例
|
||||
resizeObserver: null,
|
||||
// 标记是否已初始化监听
|
||||
isResizeListening: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化尺寸监听
|
||||
* @param {HTMLElement} container - 图表容器DOM（默认取this.$refs.chartContainer）
|
||||
*/
|
||||
initResizeListener(container) {
|
||||
// 防止重复初始化
|
||||
if (this.isResizeListening) return;
|
||||
|
||||
// 默认使用组件内的chartContainer作为监听目标
|
||||
const target = container || this.$refs.chartContainer;
|
||||
if (!target) {
|
||||
console.warn('未找到图表容器，无法初始化尺寸监听');
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建ResizeObserver实例
|
||||
this.resizeObserver = new ResizeObserver(
|
||||
debounce(entries => {
|
||||
// 触发图表重绘
|
||||
this.handleContainerResize(entries);
|
||||
})
|
||||
);
|
||||
|
||||
// 开始监听容器尺寸变化
|
||||
this.resizeObserver.observe(target);
|
||||
this.isResizeListening = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理容器尺寸变化
|
||||
* @param {ResizeObserverEntry[]} entries - ResizeObserver回调参数
|
||||
*/
|
||||
handleContainerResize(entries) {
|
||||
// 确保图表实例存在
|
||||
if (this.chart && this.chart.resize) {
|
||||
// 调用ECharts的resize方法重绘图表
|
||||
this.chart.resize();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 销毁尺寸监听
|
||||
*/
|
||||
destroyResizeListener() {
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
this.resizeObserver = null;
|
||||
}
|
||||
this.isResizeListening = false;
|
||||
}
|
||||
},
|
||||
// 组件挂载后初始化监听
|
||||
mounted() {
|
||||
// 延迟初始化，确保DOM已渲染完成
|
||||
this.$nextTick(() => {
|
||||
this.initResizeListener();
|
||||
});
|
||||
},
|
||||
// 组件销毁前清理监听
|
||||
beforeDestroy() {
|
||||
this.destroyResizeListener();
|
||||
}
|
||||
};
|
||||
104
gear-ui3/src/views/wms/stock/panels/stockIo.vue
Normal file
104
gear-ui3/src/views/wms/stock/panels/stockIo.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<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>
|
||||
<el-table :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 #default="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 #default="scope">
|
||||
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<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>
|
||||
406
gear-ui3/src/views/wms/stock/panels/trendChart.vue
Normal file
406
gear-ui3/src/views/wms/stock/panels/trendChart.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<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: 300px;"></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>
|
||||
13
gear-ui3/src/views/wms/stockIo/in.vue
Normal file
13
gear-ui3/src/views/wms/stockIo/in.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<StockIoPage ioType="in" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StockIoPage from './panels/stockIoPage.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StockIoPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
488
gear-ui3/src/views/wms/stockIo/index.vue
Normal file
488
gear-ui3/src/views/wms/stockIo/index.vue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="单号" prop="stockIoCode">
|
||||
<el-input
|
||||
v-model="queryParams.stockIoCode"
|
||||
placeholder="请输入出入库单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="ioType">
|
||||
<el-select v-model="queryParams.ioType" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.stock_io_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-select v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
|
||||
<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="单据状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择单据状态" clearable>
|
||||
<el-option :key="0" label="草稿" :value="0" />
|
||||
<el-option :key="1" label="待审核" :value="1" />
|
||||
<el-option :key="2" label="已完成" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="stockIoList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="true"/>
|
||||
<el-table-column label="出入库单号" align="center" prop="stockIoCode" />
|
||||
<el-table-column label="类型" align="center" prop="ioType">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getIoTypeTagType(scope.row.ioType)">
|
||||
{{ getIoTypeLabel(scope.row.ioType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务类型" align="center" prop="bizType">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getBizTypeTagType(scope.row.bizType)">
|
||||
{{ getBizTypeLabel(scope.row.bizType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单据状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 2 ? 'success' : (scope.row.status === 1 ? 'warning' : 'info')">
|
||||
{{ scope.row.status === 2 ? '已完成' : (scope.row.status === 0 ? '草稿' : '待审核') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Document"
|
||||
@click="showDetail(scope.row)"
|
||||
>明细</el-button>
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-printer"
|
||||
@click="handleShowBarcodeDrawer(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="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改出入库单主对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="出入库单号" prop="stockIoCode">
|
||||
<el-input v-model="form.stockIoCode" placeholder="请输入出入库单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="ioType">
|
||||
<el-select v-model="form.ioType" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.stock_io_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<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-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据状态" prop="status">
|
||||
<el-input v-model="form.status" :value="0" readonly disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 明细弹窗 -->
|
||||
<el-dialog
|
||||
title="出入库单详情"
|
||||
v-model="detailDialogVisible"
|
||||
width="1000px"
|
||||
append-to-body
|
||||
@close="onDetailClosed"
|
||||
>
|
||||
<StockIoDetailPanel
|
||||
:stockIo="detailStockIo"
|
||||
@status-changed="onStatusChanged"
|
||||
/>
|
||||
</el-dialog>
|
||||
<!-- 条码打印抽屉 -->
|
||||
<!-- <el-drawer
|
||||
title="条码打印"
|
||||
v-model="drawerBarcodeVisible"
|
||||
size="100%"
|
||||
direction="btt"
|
||||
:with-header="true"
|
||||
>
|
||||
<BarcodeGenerator
|
||||
v-if="drawerBarcodeVisible"
|
||||
:barcodes="drawerBarcodeData.barcodes"
|
||||
:perRow="drawerBarcodeData.perRow"
|
||||
:barcodeWidth="drawerBarcodeData.barcodeWidth"
|
||||
:barcodeHeight="drawerBarcodeData.barcodeHeight"
|
||||
/>
|
||||
</el-drawer> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStockIo, getStockIo, delStockIo, addStockIo, updateStockIo } from "@/api/wms/stockIo";
|
||||
import { listStockIoDetail } from "@/api/wms/stockIoDetail";
|
||||
import StockIoDetailPanel from './panels/detail.vue';
|
||||
import BarcodeGenerator from './panels/barcode.vue';
|
||||
|
||||
export default {
|
||||
name: "StockIo",
|
||||
dicts: ['stock_biz_type', 'stock_io_type', 'stock_status'],
|
||||
components: { StockIoDetailPanel, BarcodeGenerator },
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 出入库单主表格数据
|
||||
stockIoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
stockIoCode: undefined,
|
||||
ioType: undefined,
|
||||
bizType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
stockIoId: [
|
||||
{ required: true, message: "出入库单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
stockIoCode: [
|
||||
{ required: true, message: "出入库单号不能为空", trigger: "blur" }
|
||||
],
|
||||
ioType: [
|
||||
{ required: true, message: "类型不能为空", trigger: "change" }
|
||||
],
|
||||
bizType: [
|
||||
{ required: true, message: "业务类型不能为空", trigger: "change" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "单据状态不能为空", trigger: "change" }
|
||||
],
|
||||
delFlag: [
|
||||
{ required: true, message: "删除标志不能为空", trigger: "blur" }
|
||||
],
|
||||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
],
|
||||
updateTime: [
|
||||
{ required: true, message: "更新时间不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
detailDialogVisible: false,
|
||||
detailStockIo: null,
|
||||
// 条码打印抽屉相关
|
||||
// drawerBarcodeVisible: false,
|
||||
// drawerBarcodeData: {
|
||||
// barcodes: [],
|
||||
// perRow: 3,
|
||||
// barcodeWidth: 180,
|
||||
// barcodeHeight: 60
|
||||
// },
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询出入库单主列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listStockIo(this.queryParams).then(response => {
|
||||
this.stockIoList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
stockIoId: undefined,
|
||||
stockIoCode: undefined,
|
||||
ioType: undefined,
|
||||
bizType: undefined,
|
||||
status: 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();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.stockIoId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.form.status = 0; // 新增时默认草稿状态
|
||||
this.open = true;
|
||||
this.title = "添加出入库单主";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const stockIoId = row.stockIoId || this.ids
|
||||
getStockIo(stockIoId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改出入库单主";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.stockIoId != null) {
|
||||
updateStockIo(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addStockIo(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const stockIoIds = row.stockIoId || this.ids;
|
||||
this.$modal.confirm('是否确认删除出入库单主编号为"' + stockIoIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delStockIo(stockIoIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/stockIo/export', {
|
||||
...this.queryParams
|
||||
}, `stockIo_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
showDetail(row) {
|
||||
this.detailStockIo = { ...row };
|
||||
this.detailDialogVisible = true;
|
||||
},
|
||||
onDetailClosed() {
|
||||
this.getList();
|
||||
},
|
||||
onStatusChanged(updatedStockIo) {
|
||||
// 更新主表中的对应记录状态
|
||||
const index = this.stockIoList.findIndex(item => item.stockIoId === updatedStockIo.stockIoId);
|
||||
if (index !== -1) {
|
||||
this.$set(this.stockIoList, index, updatedStockIo);
|
||||
}
|
||||
// 刷新列表
|
||||
this.getList();
|
||||
},
|
||||
// async handleShowBarcodeDrawer(row) {
|
||||
// // 获取明细列表
|
||||
// const res = await listStockIoDetail({ stockIoId: row.stockIoId });
|
||||
// const details = res.data || res.rows || [];
|
||||
// // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
|
||||
// const barcodes = details.filter(el => el.recordType == 0).map(item => {
|
||||
// return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
|
||||
// });
|
||||
// // this.drawerBarcodeData = {
|
||||
// // barcodes,
|
||||
// // perRow: 3,
|
||||
// // barcodeWidth: 180,
|
||||
// // barcodeHeight: 60
|
||||
// // };
|
||||
// // this.drawerBarcodeVisible = true;
|
||||
// },
|
||||
getIoTypeTagType(type) {
|
||||
if (type === 'in') return 'success';
|
||||
if (type === 'out') return 'primary';
|
||||
if (type === 'transfer') return 'warning';
|
||||
return '';
|
||||
},
|
||||
getIoTypeLabel(type) {
|
||||
if (type === 'in') return '入库';
|
||||
if (type === 'out') return '出库';
|
||||
if (type === 'transfer') return '移库';
|
||||
return type;
|
||||
},
|
||||
getBizTypeTagType(type) {
|
||||
if (type === 'purchase') return 'success';
|
||||
if (type === 'sales') return 'primary';
|
||||
if (type === 'return') return 'warning';
|
||||
if (type === 'relocation') return 'info';
|
||||
return 'default';
|
||||
},
|
||||
getBizTypeLabel(type) {
|
||||
const map = {
|
||||
purchase: '采购',
|
||||
sales: '销售',
|
||||
return: '退货',
|
||||
relocation: '调拨',
|
||||
other: '其他'
|
||||
};
|
||||
return map[type] || type;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
13
gear-ui3/src/views/wms/stockIo/move.vue
Normal file
13
gear-ui3/src/views/wms/stockIo/move.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<StockIoPage ioType="transfer" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StockIoPage from './panels/stockIoPage.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StockIoPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
13
gear-ui3/src/views/wms/stockIo/out.vue
Normal file
13
gear-ui3/src/views/wms/stockIo/out.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<StockIoPage ioType="out" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StockIoPage from './panels/stockIoPage.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StockIoPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
424
gear-ui3/src/views/wms/stockIo/panels/barcode.vue
Normal file
424
gear-ui3/src/views/wms/stockIo/panels/barcode.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<div class="barcode-3col-layout">
|
||||
<!-- 预览区 -->
|
||||
<div class="barcode-preview-col">
|
||||
<div class="iframe-wrapper">
|
||||
<iframe ref="previewIframe" class="barcode-iframe" frameborder="0" :style="iframeStyle"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧控制+设置区 -->
|
||||
<div class="barcode-right-col">
|
||||
<!-- 控制区 -->
|
||||
<div class="barcode-control-bar">
|
||||
<el-tabs v-model="activeTab" stretch>
|
||||
<el-tab-pane label="排版设置" name="layout" />
|
||||
<el-tab-pane label="二维码明细" name="detail" />
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- 设置区 -->
|
||||
<div class="barcode-settings-panel">
|
||||
<el-form v-if="activeTab==='layout'" label-width="80px" size="small" label-position="top">
|
||||
<!-- 排版设置内容保持不变 -->
|
||||
<el-form-item label="每行数量">
|
||||
<el-input-number :controls=false controls-position="right" v-model="perRow" size="mini" :min="1" :max="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="二维码尺寸">
|
||||
<el-input-number :controls=false controls-position="right" v-model="barcodeWidth" size="mini" :min="60" :max="600" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纸张尺寸">
|
||||
<el-select v-model="paperSize" placeholder="请选择纸张尺寸" style="width: 160px">
|
||||
<el-option label="A4 (210mm x 297mm)" value="A4" />
|
||||
<el-option label="A5 (148mm x 210mm)" value="A5" />
|
||||
<el-option label="A6 (105mm x 148mm)" value="A6" />
|
||||
<el-option label="自定义" value="custom" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="paperSize==='custom'" label="自定义宽度(mm)">
|
||||
<el-input-number :controls=false controls-position="right" v-model="customPaperWidth" size="mini" :min="50" :max="500" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="paperSize==='custom'" label="自定义高度(mm)">
|
||||
<el-input-number :controls=false controls-position="right" v-model="customPaperHeight" size="mini" :min="50" :max="500" />
|
||||
</el-form-item>
|
||||
<el-form-item label="方向">
|
||||
<el-radio-group v-model="paperOrientation">
|
||||
<el-radio label="portrait">纵向</el-radio>
|
||||
<el-radio label="landscape">横向</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlePrint">打印</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-else label-width="80px" size="small" label-position="top">
|
||||
<el-form-item label="二维码明细">
|
||||
<div v-for="(cfg, idx) in barcodeConfigs" :key="idx" style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
|
||||
<div style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-weight: bold; color: #666;">条码 {{ idx + 1 }}</span>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="saveAsImage(cfg.code, cfg.textTpl || cfg.code, idx)"
|
||||
icon="Download"
|
||||
>
|
||||
另存为图片
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="handleDelete(cfg, idx)"
|
||||
icon="Delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form-item label="二维码内容" label-width="70px" style="margin-bottom: 8px;">
|
||||
<el-input disabled type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生成数量" label-width="70px" style="margin-bottom: 8px;">
|
||||
<el-input-number :controls=false controls-position="right" v-model.number="cfg.count" :min="1" :max="100" size="mini" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
|
||||
<el-input type="textarea" v-model="cfg.textTpl" size="mini" placeholder="如 箱号" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from 'qrcode';
|
||||
export default {
|
||||
name: 'BarcodeGenerator',
|
||||
props: {
|
||||
barcodes: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
perRow: 3,
|
||||
barcodeWidth: 180,
|
||||
barcodeHeight: 180, // 二维码建议宽高一致
|
||||
barcodeConfigs: [], // [{code, count, textTpl}]
|
||||
previewScale: 1, // 预览缩放比例
|
||||
activeTab: 'layout',
|
||||
paperSize: 'A4',
|
||||
paperOrientation: 'portrait',
|
||||
customPaperWidth: 210,
|
||||
customPaperHeight: 297
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
expandedBarcodes() {
|
||||
let arr = [];
|
||||
this.barcodeConfigs.forEach(cfg => {
|
||||
for (let i = 0; i < (cfg.count || 1); i++) {
|
||||
arr.push(cfg.code);
|
||||
}
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
expandedBarcodeTexts() {
|
||||
let arr = [];
|
||||
this.barcodeConfigs.forEach(cfg => {
|
||||
for (let i = 0; i < (cfg.count || 1); i++) {
|
||||
// 模板替换 {{n}}
|
||||
let text = cfg.textTpl || cfg.code;
|
||||
text = text.replace(/\{\{n\}\}/g, i + 1);
|
||||
arr.push(text);
|
||||
}
|
||||
});
|
||||
return arr;
|
||||
},
|
||||
expandedBarcodeTableData() {
|
||||
return this.expandedBarcodes.map((code, idx) => ({ code, text: this.expandedBarcodeTexts[idx] }));
|
||||
},
|
||||
barcodeRows() {
|
||||
const rows = [];
|
||||
const arr = this.expandedBarcodes;
|
||||
for (let i = 0; i < arr.length; i += this.perRow) {
|
||||
rows.push(arr.slice(i, i + this.perRow));
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
barcodeTextRows() {
|
||||
const rows = [];
|
||||
const arr = this.expandedBarcodeTexts;
|
||||
for (let i = 0; i < arr.length; i += this.perRow) {
|
||||
rows.push(arr.slice(i, i + this.perRow));
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
iframeStyle() {
|
||||
const { width, height } = this.getPaperPx();
|
||||
return {
|
||||
width: width + 'px',
|
||||
minHeight: height + 'px',
|
||||
height: height + 'px',
|
||||
background: '#fff',
|
||||
border: 'none',
|
||||
display: 'block',
|
||||
margin: 0,
|
||||
padding: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
barcodes: {
|
||||
handler(newVal) {
|
||||
// 初始化barcodeConfigs
|
||||
this.barcodeConfigs = newVal;
|
||||
this.$nextTick(this.renderPreviewIframe);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
barcodeConfigs: {
|
||||
handler() { this.$nextTick(this.renderPreviewIframe); },
|
||||
deep: true
|
||||
},
|
||||
perRow() { this.$nextTick(this.renderPreviewIframe); },
|
||||
barcodeWidth() { this.$nextTick(this.renderPreviewIframe); },
|
||||
barcodeHeight() { this.$nextTick(this.renderPreviewIframe); },
|
||||
previewScale() { this.$nextTick(this.renderPreviewIframe); },
|
||||
paperSize() { this.$nextTick(this.renderPreviewIframe); },
|
||||
paperOrientation() { this.$nextTick(this.renderPreviewIframe); },
|
||||
customPaperWidth() { this.$nextTick(this.renderPreviewIframe); },
|
||||
customPaperHeight() { this.$nextTick(this.renderPreviewIframe); }
|
||||
},
|
||||
methods: {
|
||||
getBarcodeId(row, col) {
|
||||
return `barcode-canvas-${row}-${col}`;
|
||||
},
|
||||
getBarcodeText(row, col, code) {
|
||||
if (
|
||||
this.barcodeTextRows[row] &&
|
||||
typeof this.barcodeTextRows[row][col] !== 'undefined' &&
|
||||
this.barcodeTextRows[row][col] !== null &&
|
||||
this.barcodeTextRows[row][col] !== ''
|
||||
) {
|
||||
return this.barcodeTextRows[row][col];
|
||||
}
|
||||
return code;
|
||||
},
|
||||
handleDelete(cfg, idx) {
|
||||
// this.barcodeConfigs.splice(idx, 1);
|
||||
this.$emit('delete', cfg, idx);
|
||||
},
|
||||
getPaperPx() {
|
||||
// mm to px, 1mm ≈ 3.78px
|
||||
let width, height;
|
||||
if (this.paperSize === 'A4') {
|
||||
width = 210 * 3.78;
|
||||
height = 297 * 3.78;
|
||||
} else if (this.paperSize === 'A5') {
|
||||
width = 148 * 3.78;
|
||||
height = 210 * 3.78;
|
||||
} else if (this.paperSize === 'A6') {
|
||||
width = 105 * 3.78;
|
||||
height = 148 * 3.78;
|
||||
} else {
|
||||
width = this.customPaperWidth * 3.78;
|
||||
height = this.customPaperHeight * 3.78;
|
||||
}
|
||||
if (this.paperOrientation === 'landscape') {
|
||||
return { width: height, height: width };
|
||||
}
|
||||
return { width, height };
|
||||
},
|
||||
getPrintHtml() {
|
||||
const { width, height } = this.getPaperPx();
|
||||
let html = `
|
||||
<html>
|
||||
<head>
|
||||
<title>打印二维码</title>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: #fff; }
|
||||
.barcode-list { width: ${width}px; min-height: ${height}px; margin: 0 auto; background: #fff; }
|
||||
.barcode-row { display: flex; margin-bottom: 24px; }
|
||||
.barcode-item { flex: 1; text-align: center; }
|
||||
.barcode-text { margin-top: 8px; font-size: 14px; }
|
||||
html, body { overflow-x: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="barcode-list">
|
||||
`;
|
||||
this.barcodeRows.forEach((row, rowIndex) => {
|
||||
html += '<div class="barcode-row">';
|
||||
row.forEach((code, colIndex) => {
|
||||
const id = this.getBarcodeId(rowIndex, colIndex);
|
||||
const text = this.getBarcodeText(rowIndex, colIndex, code);
|
||||
html += `<div class="barcode-item">
|
||||
<canvas id="${id}" width="${this.barcodeWidth}" height="${this.barcodeHeight}"></canvas>
|
||||
<div class="barcode-text">${text}</div>
|
||||
</div>`;
|
||||
});
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div></body></html>';
|
||||
return html;
|
||||
},
|
||||
async renderPreviewIframe() {
|
||||
const iframe = this.$refs.previewIframe;
|
||||
if (!iframe) return;
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.open();
|
||||
doc.write(this.getPrintHtml());
|
||||
doc.close();
|
||||
// 渲染二维码
|
||||
setTimeout(async () => {
|
||||
for (let rowIndex = 0; rowIndex < this.barcodeRows.length; rowIndex++) {
|
||||
const row = this.barcodeRows[rowIndex];
|
||||
for (let colIndex = 0; colIndex < row.length; colIndex++) {
|
||||
const code = row[colIndex];
|
||||
const id = this.getBarcodeId(rowIndex, colIndex);
|
||||
const el = doc.getElementById(id);
|
||||
if (el) {
|
||||
await QRCode.toCanvas(el, code, {
|
||||
width: this.barcodeWidth,
|
||||
height: this.barcodeHeight,
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
handlePrint() {
|
||||
const iframe = this.$refs.previewIframe;
|
||||
if (!iframe) return;
|
||||
iframe.contentWindow.focus();
|
||||
iframe.contentWindow.print();
|
||||
},
|
||||
/**
|
||||
* 保存二维码为图片
|
||||
* @param {string} code 二维码内容
|
||||
* @param {string} text 下方文字
|
||||
* @param {number} index 索引，用于生成文件名
|
||||
*/
|
||||
async saveAsImage(code, text, index) {
|
||||
try {
|
||||
// 创建临时canvas用于绘制二维码和文字
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 计算总高度（二维码高度 + 文字区域高度）
|
||||
const textHeight = 30; // 文字区域高度
|
||||
canvas.width = this.barcodeWidth;
|
||||
canvas.height = this.barcodeHeight + textHeight;
|
||||
|
||||
// 绘制二维码
|
||||
const qrCanvas = document.createElement('canvas');
|
||||
qrCanvas.width = this.barcodeWidth;
|
||||
qrCanvas.height = this.barcodeHeight;
|
||||
await QRCode.toCanvas(qrCanvas, code, {
|
||||
width: this.barcodeWidth,
|
||||
height: this.barcodeHeight,
|
||||
margin: 0
|
||||
});
|
||||
|
||||
// 将二维码绘制到主canvas
|
||||
ctx.drawImage(qrCanvas, 0, 0);
|
||||
|
||||
// 绘制文字
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.font = '14px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(text, this.barcodeWidth / 2, this.barcodeHeight + 5);
|
||||
|
||||
// 创建图片链接并下载
|
||||
canvas.toBlob(blob => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
// 生成文件名（使用索引和内容摘要）
|
||||
const fileName = `二维码_${index + 1}_${code.substring(0, 10)}.png`;
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
this.$message.success('图片保存成功');
|
||||
} catch (error) {
|
||||
console.error('保存图片失败:', error);
|
||||
this.$message.error('保存图片失败，请重试');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.barcodeConfigs = this.barcodes?.map(b => ({ code: b, count: 1, textTpl: b })) || [];
|
||||
this.renderPreviewIframe();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式保持不变 */
|
||||
.barcode-3col-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
.barcode-preview-col {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 24px 0 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.barcode-right-col {
|
||||
width: 420px;
|
||||
min-width: 320px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fafbfc;
|
||||
height: 90vh;
|
||||
}
|
||||
.barcode-control-bar {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fafbfc;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.barcode-settings-panel {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
max-height: calc(90vh - 48px); /* 48px 约为tabs高度，可根据实际调整 */
|
||||
}
|
||||
.preview-toolbar {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.iframe-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background: #f8f8f8;
|
||||
overflow: auto;
|
||||
}
|
||||
.barcode-iframe {
|
||||
/* width、height 由:style绑定动态控制 */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
609
gear-ui3/src/views/wms/stockIo/panels/detail.vue
Normal file
609
gear-ui3/src/views/wms/stockIo/panels/detail.vue
Normal file
@@ -0,0 +1,609 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<template v-if="stockIo && stockIo.stockIoId">
|
||||
<!-- 主表信息 -->
|
||||
<el-descriptions :title="'单号：' + (stockIo.stockIoCode || '-')" :column="2" border>
|
||||
<el-descriptions-item label="类型">
|
||||
<dict-tag :options="stock_io_type" :value="stockIo.ioType"></dict-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="业务类型">
|
||||
<dict-tag :options="stock_biz_type" :value="stockIo.bizType"></dict-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="stockIo.status === 2 ? 'success' : (stockIo.status === 1 ? 'warning' : 'info')">
|
||||
{{ stockIo.status === 2 ? '已完成' : (stockIo.status === 0 ? '草稿' : '待审核') }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">{{ stockIo.remark }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<br />
|
||||
<!-- 明细表格 -->
|
||||
<!-- <el-tabs v-model="activeTab" style="margin-bottom: 10px;"> -->
|
||||
<!-- <el-tab-pane label="扫码枪" name="scanner">
|
||||
<el-table :data="scannerList" :show-header="true" :border="true" style="width: 100%;" :default-sort="{}" :highlight-current-row="true">
|
||||
<el-table-column type="index" width="55" align="center" label="#" />
|
||||
<el-table-column label="库区/库位" align="center" prop="warehouseName" />
|
||||
<el-table-column v-if="stockIo.ioType === 'transfer'" label="源库区/库位" align="center" prop="fromWarehouseName" />
|
||||
<el-table-column label="物品类型" align="center" prop="itemType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_item_type" :value="scope.row.itemType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品信息" align="center" prop="itemId">
|
||||
<template #default="scope">
|
||||
<product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
|
||||
<span v-else>{{ scope.row.itemId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" align="center" prop="quantity" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="批次号" align="center" prop="batchNo" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:disabled="stockIo.status >= 2"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
:disabled="stockIo.status >= 2"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="手动录入" name="manual"> -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
:disabled="stockIo.status >= 2"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
size="mini"
|
||||
:disabled="single || stockIo.status >= 2"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
size="mini"
|
||||
:disabled="multiple || stockIo.status >= 2"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="manualList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="库区/库位" align="center" prop="warehouseName" />
|
||||
<el-table-column
|
||||
v-if="stockIo.ioType === 'transfer'"
|
||||
label="源库区/库位"
|
||||
align="center"
|
||||
prop="fromWarehouseName"
|
||||
/>
|
||||
<el-table-column label="物品类型" align="center" prop="itemType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_item_type" :value="scope.row.itemType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品信息" align="center" prop="itemId">
|
||||
<template #default="scope">
|
||||
<product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
|
||||
<span v-else>{{ scope.row.itemId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="BOM" align="center">
|
||||
<template #default="scope">
|
||||
<BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" align="center" prop="quantity" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="批次号" align="center" prop="batchNo" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
:disabled="stockIo.status >= 2"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
:disabled="stockIo.status >= 2"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- </el-tab-pane> -->
|
||||
|
||||
<!-- </el-tabs> -->
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 操作按钮 -->
|
||||
<div style="margin-top: 20px; text-align: right;">
|
||||
<!-- 状态修改按钮 -->
|
||||
<el-button
|
||||
v-if="stockIo.status === 0"
|
||||
type="warning"
|
||||
:loading="statusLoading"
|
||||
@click="handleUpdateStatus"
|
||||
>{{ getStatusButtonText() }}</el-button>
|
||||
|
||||
<!-- 审核按钮 -->
|
||||
<el-button
|
||||
v-if="stockIo.status === 1"
|
||||
type="primary"
|
||||
:loading="auditLoading"
|
||||
@click="handleAudit"
|
||||
>{{ getAuditButtonText() }}</el-button>
|
||||
|
||||
<!-- 撤回按钮 -->
|
||||
<el-button
|
||||
v-if="stockIo.status === 2 && stockIo.ioType !== 'withdraw'"
|
||||
type="warning"
|
||||
:loading="cancelLoading"
|
||||
@click="handleCancel"
|
||||
>撤回</el-button>
|
||||
</div>
|
||||
<!-- 明细编辑弹窗 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="出入库单ID" prop="stockIoId">
|
||||
<el-input v-model="form.stockIoId" placeholder="请输入出入库单ID" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库区/库位" prop="warehouseId">
|
||||
<warehouse-select v-model="form.warehouseId" placeholder="请选择库区/库位" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="stockIo.ioType === 'transfer'"
|
||||
label="源库区/库位"
|
||||
prop="fromWarehouseId"
|
||||
>
|
||||
<warehouse-select v-model="form.fromWarehouseId" placeholder="请选择源库区/库位" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品信息" prop="itemId">
|
||||
<product-select v-model="form.itemId" placeholder="请选择产品" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- <MaterialSelect :itemType.sync="form.itemType" :itemId.sync="form.itemId" @change="onItemChange" /> -->
|
||||
<el-form-item label="数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" :disabled="unitDisabled" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="批次号" prop="batchNo">
|
||||
<el-input v-model="form.batchNo" placeholder="请输入批次号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:200px;text-align:center;line-height:200px;">未获取到主表数据</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
|
||||
import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, returnStock } from "@/api/wms/stockIo";
|
||||
import WarehouseSelect from '@/components/WarehouseSelect';
|
||||
import ProductSelect from '@/components/ProductSelect';
|
||||
import { ITEM_TYPE } from '@/utils/enums';
|
||||
import ProductInfo from "@/components/Renderer/ProductInfo.vue";
|
||||
import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
|
||||
|
||||
export default {
|
||||
name: "StockIoDetailPanel",
|
||||
components: {
|
||||
WarehouseSelect,
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
BomInfoMini,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { stock_item_type, stock_biz_type, stock_io_type } = proxy.useDict('stock_item_type', 'stock_biz_type', 'stock_io_type');
|
||||
return {
|
||||
stock_item_type,
|
||||
stock_biz_type,
|
||||
stock_io_type,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
stockIo: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ITEM_TYPE,
|
||||
loading: true,
|
||||
stockIoDetailList: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
stockIoId: undefined
|
||||
},
|
||||
auditLoading: false,
|
||||
open: false,
|
||||
title: '',
|
||||
form: {},
|
||||
buttonLoading: false,
|
||||
rules: {
|
||||
warehouseId: [
|
||||
{ required: true, message: "库区/库位不能为空", trigger: "blur" }
|
||||
],
|
||||
itemType: [
|
||||
{ required: true, message: "物品类型不能为空", trigger: "blur" }
|
||||
],
|
||||
itemId: [
|
||||
{ required: true, message: "物品ID不能为空", trigger: "blur" }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
// unit: [
|
||||
// { required: true, message: "单位不能为空", trigger: "blur" }
|
||||
// ]
|
||||
},
|
||||
ids: [],
|
||||
single: true,
|
||||
multiple: true,
|
||||
statusLoading: false, // 新增状态修改按钮加载状态
|
||||
cancelLoading: false, // 撤回按钮加载状态
|
||||
unitDisabled: false, // 新增：单位输入框是否禁用
|
||||
activeTab: 'scanner' // 新增：当前激活的标签页
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'stockIo.stockIoId': {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.queryParams.stockIoId = val;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 手动录入的列表,使用recordType区分为0
|
||||
manualList() {
|
||||
return this.stockIoDetailList.filter(item => item.recordType === 0);
|
||||
},
|
||||
// 来自扫码枪的列表，为1
|
||||
scannerList() {
|
||||
return this.stockIoDetailList.filter(item => item.recordType === 1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.stockIo && this.stockIo.stockIoId) {
|
||||
this.queryParams.stockIoId = this.stockIo.stockIoId;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
if (!this.queryParams.stockIoId) return;
|
||||
this.loading = true;
|
||||
listStockIoDetail(this.queryParams).then(response => {
|
||||
this.stockIoDetailList = response.rows;
|
||||
this.total = response.total;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleAudit() {
|
||||
// 检查是否有明细数据
|
||||
if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
|
||||
this.$modal.msgError('请先添加明细数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 确认审核
|
||||
this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
|
||||
this.auditLoading = true;
|
||||
// 如果是退库单，则需要先审核出库单
|
||||
if (this.stockIo.ioType === 'withdraw') {
|
||||
returnStock(this.stockIo).then(response => {
|
||||
this.$modal.msgSuccess('审核成功');
|
||||
this.stockIo.status = 2;
|
||||
// 刷新明细列表
|
||||
this.getList();
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).finally(() => {
|
||||
this.auditLoading = false;
|
||||
})
|
||||
return;
|
||||
}
|
||||
auditStockIo(this.stockIo.stockIoId).then(response => {
|
||||
this.$modal.msgSuccess('审核成功');
|
||||
// 更新主表状态
|
||||
this.stockIo.status = 2;
|
||||
// 刷新明细列表
|
||||
this.getList();
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('审核失败:', error);
|
||||
this.$modal.msgError('审核失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.auditLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消审核
|
||||
});
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.form.stockIoId = this.stockIo.stockIoId;
|
||||
this.form.recordType = 0; // 新增时设为手动录入
|
||||
this.open = true;
|
||||
this.title = "添加出入库单明细";
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const detailId = row.detailId || this.ids
|
||||
getStockIoDetail(detailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.form.recordType = 0; // 修改时强制设为手动录入
|
||||
this.open = true;
|
||||
this.title = "修改出入库单明细";
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
// 动态添加源库位验证规则
|
||||
// if (this.stockIo.ioType === 'transfer') {
|
||||
// this.$set(this.rules, 'fromWarehouseId', [
|
||||
// { required: true, message: "源库区/库位不能为空", trigger: "blur" }
|
||||
// ]);
|
||||
// }
|
||||
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.detailId != null) {
|
||||
updateStockIoDetail(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addStockIoDetail(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
this.stockIo.status = 1;
|
||||
// 新增明细后刷新主表状态
|
||||
this.refreshStockIoStatus();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDelete(row) {
|
||||
const detailIds = row.detailId || this.ids;
|
||||
this.$modal.confirm('是否确认删除出入库单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delStockIoDetail(detailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
// 删除明细后刷新主表状态
|
||||
this.refreshStockIoStatus();
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
detailId: undefined,
|
||||
stockIoId: undefined,
|
||||
warehouseId: undefined,
|
||||
fromWarehouseId: undefined,
|
||||
itemType: 'product',
|
||||
itemId: undefined,
|
||||
quantity: undefined,
|
||||
// unit: undefined,
|
||||
batchNo: '',
|
||||
remark: undefined
|
||||
};
|
||||
this.unitDisabled = false; // 新增：重置单位输入框为可编辑
|
||||
this.resetForm("form");
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleExport() {
|
||||
this.download('wms/stockIoDetail/export', {
|
||||
...this.queryParams
|
||||
}, `stockIoDetail_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
getAuditButtonText() {
|
||||
if (this.stockIo.ioType === 'in') {
|
||||
return '审核入库';
|
||||
} else if (this.stockIo.ioType === 'out') {
|
||||
return '审核出库';
|
||||
} else if (this.stockIo.ioType === 'transfer') {
|
||||
return '审核移库';
|
||||
} else {
|
||||
return '审核';
|
||||
}
|
||||
},
|
||||
getStatusButtonText() {
|
||||
if (this.stockIo.ioType === 'in') {
|
||||
return '提交入库';
|
||||
} else if (this.stockIo.ioType === 'out') {
|
||||
return '提交出库';
|
||||
} else if (this.stockIo.ioType === 'transfer') {
|
||||
return '提交移库';
|
||||
} else {
|
||||
return '提交';
|
||||
}
|
||||
},
|
||||
handleUpdateStatus() {
|
||||
// 检查是否有明细数据
|
||||
if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
|
||||
this.$modal.msgError('请先添加明细数据');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.confirm('确认要提交此出入库单吗？提交后将无法修改明细。').then(() => {
|
||||
this.statusLoading = true;
|
||||
updateStockIoStatus(this.stockIo.stockIoId, 1).then(response => {
|
||||
this.$modal.msgSuccess('状态更新成功');
|
||||
// 更新主表状态
|
||||
this.stockIo.status = 1;
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
this.$modal.msgError('状态更新失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.statusLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消状态更新
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.$modal.confirm('确认要撤回此出入库单吗？撤回后将回滚库存数据。').then(() => {
|
||||
this.cancelLoading = true;
|
||||
cancelStockIo(this.stockIo.stockIoId).then(response => {
|
||||
this.$modal.msgSuccess('撤回成功');
|
||||
// 更新主表状态
|
||||
this.stockIo.status = 1;
|
||||
// 刷新明细列表
|
||||
this.getList();
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('撤回失败:', error);
|
||||
this.$modal.msgError('撤回失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.cancelLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消撤回
|
||||
});
|
||||
},
|
||||
refreshStockIoStatus() {
|
||||
// 刷新主表状态
|
||||
if (this.stockIo && this.stockIo.stockIoId) {
|
||||
getStockIo(this.stockIo.stockIoId).then(response => {
|
||||
const updatedStockIo = response.data;
|
||||
// 更新主表状态
|
||||
this.stockIo.status = updatedStockIo.status;
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('刷新主表状态失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
getIoTypeTagType(type) {
|
||||
if (type === 'in') return 'success';
|
||||
if (type === 'out') return 'primary';
|
||||
if (type === 'transfer') return 'warning';
|
||||
return '';
|
||||
},
|
||||
getIoTypeLabel(type) {
|
||||
if (type === 'in') return '入库';
|
||||
if (type === 'out') return '出库';
|
||||
if (type === 'transfer') return '移库';
|
||||
return type;
|
||||
},
|
||||
getBizTypeLabel(type) {
|
||||
const map = {
|
||||
purchase: '采购',
|
||||
sales: '销售',
|
||||
return: '退货',
|
||||
relocation: '调拨',
|
||||
other: '其他'
|
||||
};
|
||||
return map[type] || type;
|
||||
},
|
||||
getBizTypeTagType(type) {
|
||||
if (type === 'purchase') return 'success';
|
||||
if (type === 'sales') return 'primary';
|
||||
if (type === 'return') return 'warning';
|
||||
if (type === 'relocation') return 'info';
|
||||
return 'default';
|
||||
},
|
||||
// onItemChange(e) {
|
||||
// if (e && e.unit) {
|
||||
// this.form.unit = e.unit;
|
||||
// this.unitDisabled = true;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
435
gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue
Normal file
435
gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue
Normal file
@@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<template v-if="stockIo && stockIo.stockIoId">
|
||||
<el-row>
|
||||
<el-form :model="returnForm" :rules="rules" inline label-width="120px">
|
||||
<el-form-item label="出库单单号">
|
||||
<el-input :value="stockIo.stockIoCode" disabled placeholder="请输入父单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出库单ID" prop="parentId">
|
||||
<el-input v-model="returnForm.parentId" disabled placeholder="请输入父单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="退库单号" prop="stockIoCode">
|
||||
<el-input v-model="returnForm.stockIoCode" placeholder="请输入出入库单号" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-select v-model="returnForm.bizType" placeholder="请选择业务类型">
|
||||
<el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="returnForm.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="manualList">
|
||||
<el-table-column label="库区/库位" align="center" prop="warehouseName" />
|
||||
<el-table-column v-if="stockIo.ioType === 'transfer'" label="源库区/库位" align="center" prop="fromWarehouseName" />
|
||||
<el-table-column label="物品类型" align="center" prop="itemType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_item_type" :value="scope.row.itemType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物品信息" align="center" prop="itemId">
|
||||
<template #default="scope">
|
||||
<product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
|
||||
<span v-else>{{ scope.row.itemId }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="BOM" align="center">
|
||||
<template #default="scope">
|
||||
<BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="批次号" align="center" prop="batchNo" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column width="55" label="开关">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.switchInput" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="180" align="center" prop="quantity">
|
||||
<template #default="scope">
|
||||
<el-input-number :controls=false controls-position="right" style="width: 160px;" v-model="scope.row.count" :max="scope.row.quantity"
|
||||
placeholder="请输入数量" @input="handleQuantityInput(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
<!-- 操作按钮 -->
|
||||
<div style="margin-top: 20px; text-align: right;">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:200px;text-align:center;line-height:200px;">未获取到主表数据</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
|
||||
import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, addStockIoWithDetail } from "@/api/wms/stockIo";
|
||||
import WarehouseSelect from '@/components/WarehouseSelect';
|
||||
import ProductSelect from '@/components/ProductSelect';
|
||||
import { ITEM_TYPE } from '@/utils/enums';
|
||||
import ProductInfo from "@/components/Renderer/ProductInfo.vue";
|
||||
import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
|
||||
|
||||
export default {
|
||||
name: "returnCreatePanel",
|
||||
components: {
|
||||
WarehouseSelect,
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
BomInfoMini,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { stock_item_type, stock_biz_type } = proxy.useDict('stock_item_type', 'stock_biz_type');
|
||||
return {
|
||||
stock_item_type,
|
||||
stock_biz_type,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
stockIo: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ITEM_TYPE,
|
||||
loading: true,
|
||||
stockIoDetailList: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
stockIoId: undefined
|
||||
},
|
||||
returnForm: {
|
||||
|
||||
},
|
||||
auditLoading: false,
|
||||
open: false,
|
||||
title: '',
|
||||
form: {},
|
||||
buttonLoading: false,
|
||||
rules: {
|
||||
warehouseId: [
|
||||
{ required: true, message: "库区/库位不能为空", trigger: "blur" }
|
||||
],
|
||||
itemType: [
|
||||
{ required: true, message: "物品类型不能为空", trigger: "blur" }
|
||||
],
|
||||
itemId: [
|
||||
{ required: true, message: "物品ID不能为空", trigger: "blur" }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'stockIo.stockIoId': {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.queryParams.stockIoId = val;
|
||||
this.returnForm.parentId = val;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
manualList() {
|
||||
return this.stockIoDetailList.filter(item => item.recordType === 0);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.stockIo && this.stockIo.stockIoId) {
|
||||
this.queryParams.stockIoId = this.stockIo.stockIoId;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
if (!this.queryParams.stockIoId) return;
|
||||
this.loading = true;
|
||||
listStockIoDetail(this.queryParams).then(response => {
|
||||
this.stockIoDetailList = response.rows.map(item => {
|
||||
return {
|
||||
...item,
|
||||
count: item.quantity,
|
||||
switchInput: true
|
||||
}
|
||||
});
|
||||
this.total = response.total;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleAudit() {
|
||||
// 检查是否有明细数据
|
||||
if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
|
||||
this.$modal.msgError('请先添加明细数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 确认审核
|
||||
this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
|
||||
this.auditLoading = true;
|
||||
auditStockIo(this.stockIo.stockIoId).then(response => {
|
||||
this.$modal.msgSuccess('审核成功');
|
||||
// 更新主表状态
|
||||
this.$set(this.stockIo, 'status', 2);
|
||||
// 刷新明细列表
|
||||
this.getList();
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('审核失败:', error);
|
||||
this.$modal.msgError('审核失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.auditLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消审核
|
||||
});
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
handleQuantityInput(row) {
|
||||
row.count = Math.min(row.count, row.quantity);
|
||||
},
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.form.stockIoId = this.stockIo.stockIoId;
|
||||
this.form.recordType = 0; // 新增时设为手动录入
|
||||
this.open = true;
|
||||
this.title = "添加出入库单明细";
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const detailId = row.detailId || this.ids
|
||||
getStockIoDetail(detailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.form.recordType = 0; // 修改时强制设为手动录入
|
||||
this.open = true;
|
||||
this.title = "修改出入库单明细";
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
// 手动校验
|
||||
if (!this.returnForm.stockIoCode) {
|
||||
this.$modal.msgError("请输入退库单号");
|
||||
return;
|
||||
}
|
||||
if (!this.returnForm.bizType) {
|
||||
this.$modal.msgError("请选择业务类型");
|
||||
return;
|
||||
}
|
||||
if (!this.manualList.filter(el => el.switchInput).length) {
|
||||
this.$modal.msgError("请至少选择一个明细");
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
stockIoCode: this.returnForm.stockIoCode,
|
||||
bizType: this.returnForm.bizType,
|
||||
remark: this.returnForm.remark,
|
||||
ioType: 'withdraw',
|
||||
parentId: this.returnForm.parentId,
|
||||
details: this.manualList.filter(el => el.switchInput).map(el => {
|
||||
const { detailId, stockIoId, switchInput, ...rest } = el;
|
||||
return {
|
||||
...rest,
|
||||
quantity: el.count,
|
||||
recordType: 0
|
||||
}
|
||||
})
|
||||
};
|
||||
addStockIoWithDetail(payload).then(response => {
|
||||
this.$modal.msgSuccess("提交成功");
|
||||
this.$emit('finish', this.stockIo);
|
||||
}).catch(error => {
|
||||
this.$modal.msgError("提交失败：" + (error.message || "未知错误"));
|
||||
});
|
||||
},
|
||||
handleDelete(row) {
|
||||
const detailIds = row.detailId || this.ids;
|
||||
this.$modal.confirm('是否确认删除出入库单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delStockIoDetail(detailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
// 删除明细后刷新主表状态
|
||||
this.refreshStockIoStatus();
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
detailId: undefined,
|
||||
stockIoId: undefined,
|
||||
warehouseId: undefined,
|
||||
fromWarehouseId: undefined,
|
||||
itemType: undefined,
|
||||
itemId: undefined,
|
||||
quantity: undefined,
|
||||
unit: undefined,
|
||||
batchNo: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.unitDisabled = false; // 新增：重置单位输入框为可编辑
|
||||
this.resetForm("form");
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleExport() {
|
||||
this.download('wms/stockIoDetail/export', {
|
||||
...this.queryParams
|
||||
}, `stockIoDetail_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
getAuditButtonText() {
|
||||
if (this.stockIo.ioType === 'in') {
|
||||
return '审核入库';
|
||||
} else if (this.stockIo.ioType === 'out') {
|
||||
return '审核出库';
|
||||
} else if (this.stockIo.ioType === 'transfer') {
|
||||
return '审核移库';
|
||||
} else {
|
||||
return '审核';
|
||||
}
|
||||
},
|
||||
getStatusButtonText() {
|
||||
if (this.stockIo.ioType === 'in') {
|
||||
return '提交入库';
|
||||
} else if (this.stockIo.ioType === 'out') {
|
||||
return '提交出库';
|
||||
} else if (this.stockIo.ioType === 'transfer') {
|
||||
return '提交移库';
|
||||
} else {
|
||||
return '提交';
|
||||
}
|
||||
},
|
||||
handleUpdateStatus() {
|
||||
// 检查是否有明细数据
|
||||
if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
|
||||
this.$modal.msgError('请先添加明细数据');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.confirm('确认要提交此出入库单吗？提交后将无法修改明细。').then(() => {
|
||||
this.statusLoading = true;
|
||||
updateStockIoStatus(this.stockIo.stockIoId, 1).then(response => {
|
||||
this.$modal.msgSuccess('状态更新成功');
|
||||
// 更新主表状态
|
||||
this.$set(this.stockIo, 'status', 1);
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
this.$modal.msgError('状态更新失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.statusLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消状态更新
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.$modal.confirm('确认要撤回此出入库单吗？撤回后将回滚库存数据。').then(() => {
|
||||
this.cancelLoading = true;
|
||||
cancelStockIo(this.stockIo.stockIoId).then(response => {
|
||||
this.$modal.msgSuccess('撤回成功');
|
||||
// 更新主表状态
|
||||
this.$set(this.stockIo, 'status', 1);
|
||||
// 刷新明细列表
|
||||
this.getList();
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('撤回失败:', error);
|
||||
this.$modal.msgError('撤回失败：' + (error.message || '未知错误'));
|
||||
}).finally(() => {
|
||||
this.cancelLoading = false;
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消撤回
|
||||
});
|
||||
},
|
||||
refreshStockIoStatus() {
|
||||
// 刷新主表状态
|
||||
if (this.stockIo && this.stockIo.stockIoId) {
|
||||
getStockIo(this.stockIo.stockIoId).then(response => {
|
||||
const updatedStockIo = response.data;
|
||||
// 更新主表状态
|
||||
this.$set(this.stockIo, 'status', updatedStockIo.status);
|
||||
// 通知父组件状态已更新
|
||||
this.$emit('status-changed', this.stockIo);
|
||||
}).catch(error => {
|
||||
console.error('刷新主表状态失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
getIoTypeTagType(type) {
|
||||
if (type === 'in') return 'success';
|
||||
if (type === 'out') return 'primary';
|
||||
if (type === 'transfer') return 'warning';
|
||||
return '';
|
||||
},
|
||||
getIoTypeLabel(type) {
|
||||
if (type === 'in') return '入库';
|
||||
if (type === 'out') return '出库';
|
||||
if (type === 'transfer') return '移库';
|
||||
return type;
|
||||
},
|
||||
getBizTypeLabel(type) {
|
||||
const map = {
|
||||
purchase: '采购',
|
||||
sales: '销售',
|
||||
return: '退货',
|
||||
relocation: '调拨',
|
||||
other: '其他'
|
||||
};
|
||||
return map[type] || type;
|
||||
},
|
||||
getBizTypeTagType(type) {
|
||||
if (type === 'purchase') return 'success';
|
||||
if (type === 'sales') return 'primary';
|
||||
if (type === 'return') return 'warning';
|
||||
if (type === 'relocation') return 'info';
|
||||
return 'default';
|
||||
},
|
||||
onItemChange(e) {
|
||||
if (e && e.unit) {
|
||||
this.form.unit = e.unit;
|
||||
this.unitDisabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
373
gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue
Normal file
373
gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="单号" prop="stockIoCode">
|
||||
<el-input v-model="queryParams.stockIoCode" placeholder="请输入出入库单号" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-select style="width: 100px;" v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
|
||||
<el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据状态" prop="status">
|
||||
<el-select style="width: 100px;" v-model="queryParams.status" placeholder="请选择单据状态" clearable>
|
||||
<el-option :key="0" label="草稿" :value="0" />
|
||||
<el-option :key="1" label="待审核" :value="1" />
|
||||
<el-option :key="2" label="已完成" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" size="mini" :disabled="single"
|
||||
@click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple"
|
||||
@click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="stockIoList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="false" />
|
||||
<el-table-column label="出入库单号" align="center" prop="stockIoCode" />
|
||||
<el-table-column label="类型" align="center" prop="ioType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="stock_io_type" :value="scope.row.ioType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务类型" align="center" prop="bizType">
|
||||
<template #default="scope">
|
||||
<!-- <el-tag :type="getBizTypeTagType(scope.row.bizType)">
|
||||
{{ getBizTypeLabel(scope.row.bizType) }}
|
||||
</el-tag> -->
|
||||
<dict-tag :options="stock_biz_type" :value="scope.row.bizType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单据状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 2 ? 'success' : (scope.row.status === 1 ? 'warning' : 'info')">
|
||||
{{ scope.row.status === 2 ? '已完成' : (scope.row.status === 0 ? '草稿' : '待审核') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" />
|
||||
<el-table-column label="创建人" align="center" prop="createBy" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
||||
<el-button size="mini" type="text" icon="Document" @click="showDetail(scope.row)">明细</el-button>
|
||||
<el-button size="mini" type="text" icon="Document"
|
||||
v-if="scope.row.ioType === 'out' && scope.row.status === 2"
|
||||
@click="showReturnCreate(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="getList" />
|
||||
|
||||
<!-- 添加或修改出入库单主对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="出入库单号" prop="stockIoCode">
|
||||
<el-input v-model="form.stockIoCode" placeholder="请输入出入库单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-select v-model="form.bizType" placeholder="请选择业务类型">
|
||||
<el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据状态" prop="status">
|
||||
<el-input v-model="form.status" :value="0" readonly disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 明细弹窗 -->
|
||||
<el-dialog title="单据明细" v-model="detailDialogVisible" width="1000px" append-to-body @close="onDetailClosed">
|
||||
<StockIoDetailPanel :stockIo="detailStockIo" @status-changed="onStatusChanged" />
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="退库单" v-model="returnCreateDialogVisible" width="1000px" append-to-body>
|
||||
<ReturnCreatePanel :stockIo="form" @finish="returnCreateDialogVisible = false" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listStockIo, getStockIo, delStockIo, addStockIo, updateStockIo } from "@/api/wms/stockIo";
|
||||
import StockIoDetailPanel from './detail.vue';
|
||||
import ReturnCreatePanel from './returnCreate.vue';
|
||||
|
||||
export default {
|
||||
name: "StockIo",
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { stock_biz_type, stock_status, stock_io_type } = proxy.useDict('stock_biz_type', 'stock_status', 'stock_io_type');
|
||||
return {
|
||||
stock_biz_type,
|
||||
stock_status,
|
||||
stock_io_type,
|
||||
};
|
||||
},
|
||||
components: { StockIoDetailPanel, ReturnCreatePanel },
|
||||
props: {
|
||||
ioType: {
|
||||
require: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 出入库单主表格数据
|
||||
stockIoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
stockIoCode: undefined,
|
||||
ioType: this.ioType,
|
||||
bizType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
stockIoId: [
|
||||
{ required: true, message: "出入库单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
stockIoCode: [
|
||||
{ required: true, message: "出入库单号不能为空", trigger: "blur" }
|
||||
],
|
||||
bizType: [
|
||||
{ required: true, message: "业务类型不能为空", trigger: "change" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "单据状态不能为空", trigger: "change" }
|
||||
],
|
||||
delFlag: [
|
||||
{ required: true, message: "删除标志不能为空", trigger: "blur" }
|
||||
],
|
||||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
],
|
||||
updateTime: [
|
||||
{ required: true, message: "更新时间不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
detailDialogVisible: false,
|
||||
detailStockIo: null,
|
||||
returnCreateDialogVisible: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询出入库单主列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listStockIo(this.queryParams).then(response => {
|
||||
this.stockIoList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
stockIoId: undefined,
|
||||
stockIoCode: undefined,
|
||||
ioType: this.ioType,
|
||||
bizType: undefined,
|
||||
status: 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();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.stockIoId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.form.status = 0; // 新增时默认草稿状态
|
||||
this.open = true;
|
||||
this.title = "添加单据";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const stockIoId = row.stockIoId || this.ids
|
||||
getStockIo(stockIoId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改单据";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.stockIoId != null) {
|
||||
updateStockIo(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addStockIo(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const stockIoIds = row.stockIoId || this.ids;
|
||||
this.$modal.confirm('是否确认删除出入库单主编号为"' + stockIoIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delStockIo(stockIoIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/stockIo/export', {
|
||||
...this.queryParams
|
||||
}, `stockIo_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
showDetail(row) {
|
||||
this.detailStockIo = { ...row };
|
||||
this.detailDialogVisible = true;
|
||||
},
|
||||
onDetailClosed() {
|
||||
this.getList();
|
||||
},
|
||||
onStatusChanged(updatedStockIo) {
|
||||
// 更新主表中的对应记录状态
|
||||
const index = this.stockIoList.findIndex(item => item.stockIoId === updatedStockIo.stockIoId);
|
||||
if (index !== -1) {
|
||||
this.$set(this.stockIoList, index, updatedStockIo);
|
||||
}
|
||||
// 刷新列表
|
||||
this.getList();
|
||||
},
|
||||
getIoTypeTagType(type) {
|
||||
if (type === 'in') return 'success';
|
||||
if (type === 'out') return 'primary';
|
||||
if (type === 'transfer') return 'warning';
|
||||
return '';
|
||||
},
|
||||
getIoTypeLabel(type) {
|
||||
if (type === 'in') return '入库';
|
||||
if (type === 'out') return '出库';
|
||||
if (type === 'transfer') return '移库';
|
||||
return type;
|
||||
},
|
||||
getBizTypeTagType(type) {
|
||||
if (type === 'purchase') return 'success';
|
||||
if (type === 'sales') return 'primary';
|
||||
if (type === 'return') return 'warning';
|
||||
if (type === 'relocation') return 'info';
|
||||
return 'default';
|
||||
},
|
||||
getBizTypeLabel(type) {
|
||||
const map = {
|
||||
purchase: '采购',
|
||||
sales: '销售',
|
||||
return: '退货',
|
||||
relocation: '调拨',
|
||||
other: '其他'
|
||||
};
|
||||
return map[type] || type;
|
||||
},
|
||||
showReturnCreate(row) {
|
||||
this.returnCreateDialogVisible = true;
|
||||
this.form = { ...row };
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
13
gear-ui3/src/views/wms/stockIo/return.vue
Normal file
13
gear-ui3/src/views/wms/stockIo/return.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<StockIoPage ioType="withdraw" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StockIoPage from './panels/stockIoPage.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StockIoPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
375
gear-ui3/src/views/wms/warehouse/index.vue
Normal file
375
gear-ui3/src/views/wms/warehouse/index.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="仓库编码" prop="warehouseCode">
|
||||
<el-input
|
||||
v-model="queryParams.warehouseCode"
|
||||
placeholder="请输入仓库编码"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库名称" prop="warehouseName">
|
||||
<el-input
|
||||
v-model="queryParams.warehouseName"
|
||||
placeholder="请输入仓库名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库类型" prop="warehouseType">
|
||||
<el-select style="width: 100px;" v-model="queryParams.warehouseType" placeholder="请选择仓库类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in warehouse_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="isEnabled">
|
||||
<el-select style="width: 100px;" v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="Sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="warehouseList"
|
||||
row-key="warehouseId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
>
|
||||
<!-- <el-table-column label="上级节点" prop="parentId" /> -->
|
||||
<el-table-column label="仓库编码" align="center" prop="warehouseCode" />
|
||||
<el-table-column label="仓库名称" align="center" prop="warehouseName" />
|
||||
<el-table-column label="仓库类型" align="center" prop="warehouseType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="warehouse_type" :value="scope.row.warehouseType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序号" align="center" prop="sortNo" />
|
||||
<el-table-column label="启用状态" align="center" prop="isEnabled">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改仓库/库区/库位自关联对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="上级节点" prop="parentId">
|
||||
<WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库编码" prop="warehouseCode">
|
||||
<el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库名称" prop="warehouseName">
|
||||
<el-input v-model="form.warehouseName" placeholder="请输入仓库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库类型" prop="warehouseType">
|
||||
<el-select v-model="form.warehouseType" placeholder="请选择仓库类型">
|
||||
<el-option
|
||||
v-for="dict in warehouse_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="sortNo">
|
||||
<el-input v-model="form.sortNo" placeholder="请输入排序号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="isEnabled">
|
||||
<el-select v-model="form.isEnabled" placeholder="请选择启用状态">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/wms/warehouse";
|
||||
import WarehouseSelect from '@/components/WarehouseSelect';
|
||||
|
||||
export default {
|
||||
name: "Warehouse",
|
||||
dicts: ['warehouse_type'],
|
||||
components: {
|
||||
WarehouseSelect
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const { warehouse_type } = proxy.useDict('warehouse_type');
|
||||
return {
|
||||
warehouse_type
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 仓库/库区/库位自关联表格数据
|
||||
warehouseList: [],
|
||||
// 仓库/库区/库位自关联树选项
|
||||
warehouseOptions: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
parentId: undefined,
|
||||
warehouseCode: undefined,
|
||||
warehouseName: undefined,
|
||||
warehouseType: undefined,
|
||||
sortNo: undefined,
|
||||
isEnabled: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
warehouseCode: [
|
||||
{ required: true, message: "仓库/库区编码不能为空", trigger: "blur" }
|
||||
],
|
||||
warehouseName: [
|
||||
{ required: true, message: "仓库/库区名称不能为空", trigger: "blur" }
|
||||
],
|
||||
warehouseType: [
|
||||
{ required: true, message: "类型不能为空", trigger: "change" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询仓库/库区/库位自关联列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listWarehouse(this.queryParams).then(response => {
|
||||
const list = this.handleTree(response.data, "warehouseId", "parentId");
|
||||
// 递归遍历list，通过sortNo排序
|
||||
const sort = (list) => {
|
||||
list.sort((a, b) => a.sortNo - b.sortNo);
|
||||
list.forEach(item => {
|
||||
if (item.children) {
|
||||
sort(item.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
sort(list);
|
||||
this.warehouseList = list;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 转换仓库/库区/库位自关联数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.warehouseId,
|
||||
label: node.warehouseName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 查询仓库/库区/库位自关联下拉树结构 */
|
||||
getTreeselect() {
|
||||
listWarehouse().then(response => {
|
||||
this.warehouseOptions = [];
|
||||
const data = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
|
||||
data.children = this.handleTree(response.data, "warehouseId", "parentId");
|
||||
this.warehouseOptions.push(data);
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
warehouseId: null,
|
||||
parentId: null,
|
||||
warehouseCode: null,
|
||||
warehouseName: null,
|
||||
warehouseType: null,
|
||||
sortNo: null,
|
||||
isEnabled: null,
|
||||
delFlag: null,
|
||||
remark: null,
|
||||
createTime: null,
|
||||
createBy: null,
|
||||
updateTime: null,
|
||||
updateBy: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != null && row.warehouseId) {
|
||||
this.form.parentId = row.warehouseId;
|
||||
} else {
|
||||
this.form.parentId = 0;
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加仓库/库区/库位自关联";
|
||||
},
|
||||
/** 展开/折叠操作 */
|
||||
toggleExpandAll() {
|
||||
this.refreshTable = false;
|
||||
this.isExpandAll = !this.isExpandAll;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != null) {
|
||||
this.form.parentId = row.warehouseId;
|
||||
}
|
||||
getWarehouse(row.warehouseId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改仓库/库区/库位自关联";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// 处理 parentId 为 0 的情况
|
||||
let submitData = { ...this.form };
|
||||
if (submitData.parentId === 0) {
|
||||
delete submitData.parentId;
|
||||
}
|
||||
if (this.form.warehouseId != null) {
|
||||
updateWarehouse(submitData).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addWarehouse(submitData).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除仓库/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delWarehouse(row.warehouseId);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user