|
|
|
|
@ -1,53 +1,73 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 组件模板的根元素 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 搜索表单的容器 -->
|
|
|
|
|
<div class="searchForm">
|
|
|
|
|
<!-- 商品名输入框的列 -->
|
|
|
|
|
<div class="column">
|
|
|
|
|
<!-- 商品名标签 -->
|
|
|
|
|
<span>商品名：</span>
|
|
|
|
|
<!-- 输入框，用于输入商品名，绑定到 searchForm.name -->
|
|
|
|
|
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索按钮的列 -->
|
|
|
|
|
<div class="column">
|
|
|
|
|
<!-- 成功类型的按钮，点击触发 submitSearchForm 方法 -->
|
|
|
|
|
<el-button type="success" @click="submitSearchForm">搜索</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 表格的容器 -->
|
|
|
|
|
<div class="table">
|
|
|
|
|
<!-- Element UI 表格组件，数据绑定到 tableData -->
|
|
|
|
|
<el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
|
|
|
|
|
size="medium">
|
|
|
|
|
<!-- 序号列，使用 type="index" 自动生成序号 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
width="200"
|
|
|
|
|
type="index"
|
|
|
|
|
label="序号">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 封面列，展示商品封面图片 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="coverUrl"
|
|
|
|
|
label="封面">
|
|
|
|
|
<!-- 自定义列内容的模板 -->
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<!-- 图片标签，高度固定为 60px，图片地址绑定到当前行的 coverUrl -->
|
|
|
|
|
<img height="60px" :src="scope.row.coverUrl">
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 商品名列，展示商品名称 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="商品名">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 进货单价列，展示商品进货单价 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="purchashPrice"
|
|
|
|
|
label="进货单价">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 入库数量列，展示商品入库数量 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="goodsNum"
|
|
|
|
|
label="入库数量">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- 操作列，包含入库按钮 -->
|
|
|
|
|
<el-table-column>
|
|
|
|
|
<!-- 自定义列内容的模板 -->
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<!-- 成功类型的按钮，点击触发 goodsInBtn 方法，传入当前行数据 -->
|
|
|
|
|
<el-button type="success"
|
|
|
|
|
@click="goodsInBtn(scope.row)" plain>入库
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 分页组件的容器 -->
|
|
|
|
|
<div style="margin: 10px 0 15px 0;">
|
|
|
|
|
<!-- Element UI 分页组件 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
@ -60,19 +80,23 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--商品入库表单-->
|
|
|
|
|
<!-- 商品入库表单对话框 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="商品入库"
|
|
|
|
|
:visible.sync="goodsInVisable"
|
|
|
|
|
width="50%">
|
|
|
|
|
<!-- 选择商品和仓库表单，当 selectGoodsVisable 为 true 时显示 -->
|
|
|
|
|
<el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
|
|
|
|
|
class="demo-ruleForm">
|
|
|
|
|
<!-- 商品选择表单项 -->
|
|
|
|
|
<el-form-item style="width:40%" label="商品：" prop="goodsId">
|
|
|
|
|
<!-- 禁用的下拉选择框，绑定到 selectGoods.goodsId -->
|
|
|
|
|
<el-select disabled v-model="selectGoods.goodsId"
|
|
|
|
|
placeholder="请选择商品"
|
|
|
|
|
filterable
|
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
|
clearable>
|
|
|
|
|
<!-- 循环渲染商品选项 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options_goods"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@ -81,12 +105,15 @@
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 仓库选择表单项 -->
|
|
|
|
|
<el-form-item style="width:40%" label="仓库：" prop="storeId">
|
|
|
|
|
<!-- 下拉选择框，绑定到 selectGoods.storeId -->
|
|
|
|
|
<el-select v-model="selectGoods.storeId"
|
|
|
|
|
placeholder="请选择存储仓库"
|
|
|
|
|
filterable
|
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
|
clearable>
|
|
|
|
|
<!-- 循环渲染仓库选项 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options_store"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@ -95,33 +122,49 @@
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 操作按钮表单项 -->
|
|
|
|
|
<el-form-item style="width:40%">
|
|
|
|
|
<!-- 成功类型的按钮，点击触发 selectedGoods 方法 -->
|
|
|
|
|
<el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
|
|
|
|
|
<!-- 警告类型的按钮，点击触发 closeSelectedGoods 方法 -->
|
|
|
|
|
<el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 详细入库信息表单，当 newVisable 为 true 时显示 -->
|
|
|
|
|
<el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
|
|
|
|
|
class="demo-ruleForm">
|
|
|
|
|
<!-- 表单布局行 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<!-- 左半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 商品名表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="商品名：">
|
|
|
|
|
<!-- 只读输入框，绑定到 newForm.goodsName -->
|
|
|
|
|
<el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!-- 右半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 商品数量表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
|
|
|
|
|
<!-- 输入框，绑定到 newForm.goodsNum -->
|
|
|
|
|
<el-input v-model="newForm.goodsNum" :placeholder="'如：'+newGoodsNum"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!-- 表单布局行 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<!-- 左半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 供货商选择表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="供货商：" prop="supplierId">
|
|
|
|
|
<!-- 下拉选择框，绑定到 newForm.supplierId -->
|
|
|
|
|
<el-select v-model="newForm.supplierId"
|
|
|
|
|
placeholder="请选择供货商"
|
|
|
|
|
filterable
|
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
|
clearable>
|
|
|
|
|
<!-- 循环渲染供货商选项 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options_suppliers"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@ -131,15 +174,22 @@
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!-- 右半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 商品价格表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="商品价格：" prop="goodsPrice">
|
|
|
|
|
<!-- 输入框，绑定到 newForm.goodsPrice -->
|
|
|
|
|
<el-input v-model="newForm.goodsPrice" placeholder="如：1.0"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!-- 表单布局行 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<!-- 左半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 生产日期表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="生产日期：" prop="birthTime">
|
|
|
|
|
<!-- 日期选择器，绑定到 newForm.birthTime -->
|
|
|
|
|
<el-date-picker
|
|
|
|
|
size="mini"
|
|
|
|
|
style="width: 140px"
|
|
|
|
|
@ -150,8 +200,11 @@
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<!-- 右半部分列 -->
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<!-- 过期日期表单项 -->
|
|
|
|
|
<el-form-item style="width: 60%" label="过期日期：" prop="expiryTime">
|
|
|
|
|
<!-- 日期选择器，绑定到 newForm.expiryTime -->
|
|
|
|
|
<el-date-picker
|
|
|
|
|
size="mini"
|
|
|
|
|
style="width: 140px"
|
|
|
|
|
@ -163,16 +216,23 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!-- 表单布局行 -->
|
|
|
|
|
<el-row>
|
|
|
|
|
<!-- 整行列 -->
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<!-- 备注表单项 -->
|
|
|
|
|
<el-form-item style="width: 82%" label="备注：">
|
|
|
|
|
<!-- 文本输入框，绑定到 newForm.info -->
|
|
|
|
|
<el-input type="textarea" v-model="newForm.info" placeholder="如：农夫山泉入库"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
<!-- 操作按钮表单项 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<!-- 主要类型的按钮，点击触发 submitNewForm 方法 -->
|
|
|
|
|
<el-button type="primary" @click="submitNewForm('newForm')">入库</el-button>
|
|
|
|
|
<!-- 按钮，点击触发 saveCancel 方法 -->
|
|
|
|
|
<el-button @click="saveCancel('newForm')">取消</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
@ -181,230 +241,276 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
// 从指定路径的文件中引入名为 popup 的函数，用于弹出提示信息
|
|
|
|
|
import {popup} from "@/assets/js/common";
|
|
|
|
|
// 从商品管理模块的商品库存 API 文件中引入三个函数
|
|
|
|
|
// queryGoodsStoreById 用于根据 ID 查询商品库存信息
|
|
|
|
|
// queryPageByQo 用于分页查询商品库存信息
|
|
|
|
|
// updateInventory 用于更新商品库存信息
|
|
|
|
|
import {
|
|
|
|
|
queryGoodsStoreById,
|
|
|
|
|
queryPageByQo,
|
|
|
|
|
updateInventory
|
|
|
|
|
} from "@/api/goods_management/goods_store/goodsStoreApi";
|
|
|
|
|
// 从库存管理模块的通知 API 文件中引入 queryPageNoticeIn 函数，用于分页查询通知信息
|
|
|
|
|
import {queryPageNoticeIn} from "@/api/inventory_management/notice/noticeApi";
|
|
|
|
|
// 从商品管理模块的商品 API 文件中引入两个函数
|
|
|
|
|
// queryGoodsById 用于根据 ID 查询商品信息
|
|
|
|
|
// selected_goodsAll 用于获取所有商品信息
|
|
|
|
|
import {queryGoodsById, selected_goodsAll} from "@/api/goods_management/goods/goodsApi";
|
|
|
|
|
// 从库存管理模块的入库明细 API 文件中引入两个函数
|
|
|
|
|
// queryOptionsSuppliers 用于查询供货商选项
|
|
|
|
|
// saveIn 用于保存商品入库信息
|
|
|
|
|
import {queryOptionsSuppliers, saveIn} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
|
|
|
|
|
// 从库存管理模块的仓库 API 文件中引入 storeList 函数，用于获取仓库列表信息
|
|
|
|
|
import {storeList} from "@/api/inventory_management/store/storeApi";
|
|
|
|
|
|
|
|
|
|
// 导出一个默认的 Vue 组件对象
|
|
|
|
|
export default {
|
|
|
|
|
// 定义组件的数据属性
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 控制新的商品入库表单是否可见，初始值为 false（不可见）
|
|
|
|
|
newVisable: false,
|
|
|
|
|
// 控制商品入库对话框是否可见，初始值为 false（不可见）
|
|
|
|
|
goodsInVisable: false,
|
|
|
|
|
// 控制选择商品和仓库的表单是否可见，初始值为 true（可见）
|
|
|
|
|
selectGoodsVisable: true,
|
|
|
|
|
// 用于存储新商品数量的变量，初始值为空字符串
|
|
|
|
|
newGoodsNum:'',
|
|
|
|
|
// 用于存储新商品入库表单数据的对象，包含多个属性
|
|
|
|
|
newForm: {
|
|
|
|
|
cn: '',
|
|
|
|
|
goodsId: '',
|
|
|
|
|
goodsNum: '',
|
|
|
|
|
goodsName: '',
|
|
|
|
|
goodsPrice: '',
|
|
|
|
|
info: '',
|
|
|
|
|
expiryTime: '',
|
|
|
|
|
birthTime: '',
|
|
|
|
|
storeId: ''
|
|
|
|
|
cn: '', // 入库编号，初始值为空字符串
|
|
|
|
|
goodsId: '', // 商品 ID，初始值为空字符串
|
|
|
|
|
goodsNum: '', // 商品数量，初始值为空字符串
|
|
|
|
|
goodsName: '', // 商品名称，初始值为空字符串
|
|
|
|
|
goodsPrice: '', // 商品价格，初始值为空字符串
|
|
|
|
|
info: '', // 备注信息，初始值为空字符串
|
|
|
|
|
expiryTime: '', // 过期时间，初始值为空字符串
|
|
|
|
|
birthTime: '', // 生产日期，初始值为空字符串
|
|
|
|
|
storeId: '' // 仓库 ID，初始值为空字符串
|
|
|
|
|
},
|
|
|
|
|
/*表格*/
|
|
|
|
|
/*表格相关数据*/
|
|
|
|
|
// 用于存储表格数据的数组，初始值为空数组
|
|
|
|
|
tableData: [],
|
|
|
|
|
// 用于存储搜索表单数据的对象，包含多个属性
|
|
|
|
|
searchForm: {
|
|
|
|
|
total: 0,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
state: '0'
|
|
|
|
|
total: 0, // 总记录数，初始值为 0
|
|
|
|
|
currentPage: 1, // 当前页码，初始值为 1
|
|
|
|
|
pageSize: 10, // 每页显示的记录数，初始值为 10
|
|
|
|
|
state: '0' // 状态，初始值为 '0'
|
|
|
|
|
},
|
|
|
|
|
// 用于存储商品选项的数组，初始值为空数组
|
|
|
|
|
options_goods: [],
|
|
|
|
|
// 用于存储仓库选项的数组，初始值为空数组
|
|
|
|
|
options_store: [],
|
|
|
|
|
// 用于存储供货商选项的数组，初始值为空数组
|
|
|
|
|
options_suppliers:[],
|
|
|
|
|
// 用于存储选择的商品和仓库信息的对象，初始值为空对象
|
|
|
|
|
selectGoods: {},
|
|
|
|
|
// 用于表单验证的规则对象，包含多个字段的验证规则
|
|
|
|
|
rules: {
|
|
|
|
|
supplierId:[
|
|
|
|
|
{required: true, message: '供应商不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '供应商不能为空', trigger: 'blur'}, // 供应商 ID 字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
goodsId: [
|
|
|
|
|
{required: true, message: '商品编号不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '商品编号不能为空', trigger: 'blur'}, // 商品 ID 字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
storeId: [
|
|
|
|
|
{required: true, message: '仓库编号不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '仓库编号不能为空', trigger: 'blur'}, // 仓库 ID 字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
goodsNum: [
|
|
|
|
|
{required: true, message: '商品数量不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '商品数量不能为空', trigger: 'blur'}, // 商品数量字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
goodsPrice: [
|
|
|
|
|
{required: true, message: '商品价格不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '商品价格不能为空', trigger: 'blur'}, // 商品价格字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
expiryTime: [
|
|
|
|
|
{required: true, message: '过期时间不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '过期时间不能为空', trigger: 'blur'}, // 过期时间字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
birthTime: [
|
|
|
|
|
{required: true, message: '生产时间不能为空', trigger: 'blur'},
|
|
|
|
|
{required: true, message: '生产时间不能为空', trigger: 'blur'}, // 生产日期字段必填，失去焦点时触发验证
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 定义组件的方法
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化数据的方法
|
|
|
|
|
init() {
|
|
|
|
|
// 调用 queryPageNoticeIn 函数，传入 searchForm 作为参数进行分页查询通知信息
|
|
|
|
|
queryPageNoticeIn(this.searchForm).then(res => {
|
|
|
|
|
res = res.data
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
this.tableData = res.data.records
|
|
|
|
|
this.searchForm.total = res.data.total
|
|
|
|
|
this.searchForm.pageSize = res.data.size
|
|
|
|
|
this.searchForm.currentPage = res.data.current
|
|
|
|
|
} else {
|
|
|
|
|
popup(res.msg, "error")
|
|
|
|
|
res = res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
|
|
|
|
|
console.log(res.data) // 在控制台打印响应数据
|
|
|
|
|
this.tableData = res.data.records // 更新表格数据
|
|
|
|
|
this.searchForm.total = res.data.total // 更新总记录数
|
|
|
|
|
this.searchForm.pageSize = res.data.size // 更新每页显示的记录数
|
|
|
|
|
this.searchForm.currentPage = res.data.current // 更新当前页码
|
|
|
|
|
} else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg, "error") // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
/*分页*/
|
|
|
|
|
/*分页相关方法*/
|
|
|
|
|
// 处理每页显示记录数变化的方法
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.searchForm.pageSize = val
|
|
|
|
|
this.init()
|
|
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
|
|
this.searchForm.pageSize = val // 更新每页显示的记录数
|
|
|
|
|
this.init() // 重新调用 init 方法以更新数据
|
|
|
|
|
console.log(`每页 ${val} 条`); // 在控制台打印每页显示的记录数
|
|
|
|
|
},
|
|
|
|
|
// 处理当前页码变化的方法
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.searchForm.currentPage = val
|
|
|
|
|
this.init()
|
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
this.searchForm.currentPage = val // 更新当前页码
|
|
|
|
|
this.init() // 重新调用 init 方法以更新数据
|
|
|
|
|
console.log(`当前页: ${val}`); // 在控制台打印当前页码
|
|
|
|
|
},
|
|
|
|
|
// 提交搜索表单的方法
|
|
|
|
|
submitSearchForm() {
|
|
|
|
|
this.init()
|
|
|
|
|
this.init() // 重新调用 init 方法以根据搜索条件更新数据
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取所有商品信息的方法
|
|
|
|
|
detailStoreGoodsIn_goodsAll() {
|
|
|
|
|
selected_goodsAll().then(res => {
|
|
|
|
|
res = res.data
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.options_goods = res.data
|
|
|
|
|
} else {
|
|
|
|
|
popup(res.msg, 'error')
|
|
|
|
|
selected_goodsAll().then(res => { // 调用 selected_goodsAll 函数获取所有商品信息
|
|
|
|
|
res = res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
|
|
|
|
|
this.options_goods = res.data // 更新商品选项数组
|
|
|
|
|
} else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg, 'error') // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取所有供货商信息的方法
|
|
|
|
|
detailStoreGoodsIn_suppliers(){
|
|
|
|
|
queryOptionsSuppliers().then(res=>{
|
|
|
|
|
res=res.data
|
|
|
|
|
if (res.code==200){
|
|
|
|
|
this.options_suppliers=res.data
|
|
|
|
|
}else {
|
|
|
|
|
popup(res.msg,"error")
|
|
|
|
|
queryOptionsSuppliers().then(res=>{ // 调用 queryOptionsSuppliers 函数获取供货商选项
|
|
|
|
|
res=res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code==200){ // 如果响应码为 200（表示请求成功）
|
|
|
|
|
this.options_suppliers=res.data // 更新供货商选项数组
|
|
|
|
|
}else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg,"error") // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
// 获取所有仓库信息的方法
|
|
|
|
|
detailStoreGoodsIn_storeAll() {
|
|
|
|
|
storeList({state: '0'}).then(res => {
|
|
|
|
|
res = res.data
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
for (var item of res.data) {
|
|
|
|
|
this.options_store.push({id: item.id, name: item.name})
|
|
|
|
|
storeList({state: '0'}).then(res => { // 调用 storeList 函数，传入状态为 '0' 获取仓库列表
|
|
|
|
|
res = res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
|
|
|
|
|
for (var item of res.data) { // 遍历响应数据
|
|
|
|
|
this.options_store.push({id: item.id, name: item.name}) // 将仓库信息添加到仓库选项数组中
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
popup(res.msg, "error")
|
|
|
|
|
} else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg, "error") // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 处理选择商品和仓库表单提交的方法
|
|
|
|
|
selectedGoods(formName) {
|
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
queryGoodsById({id: this.selectGoods.goodsId}).then(res => {
|
|
|
|
|
res = res.data
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.selectGoodsVisable = false
|
|
|
|
|
this.newVisable = true
|
|
|
|
|
this.newForm.storeId = this.selectGoods.storeId
|
|
|
|
|
this.newForm.goodsId = res.data.id
|
|
|
|
|
this.newForm.goodsName = res.data.name
|
|
|
|
|
this.newForm.goodsPrice = res.data.purchashPrice
|
|
|
|
|
} else {
|
|
|
|
|
popup(res.msg, "error")
|
|
|
|
|
this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
|
|
|
|
|
if (valid) { // 如果验证通过
|
|
|
|
|
queryGoodsById({id: this.selectGoods.goodsId}).then(res => { // 根据选择的商品 ID 查询商品信息
|
|
|
|
|
res = res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
|
|
|
|
|
this.selectGoodsVisable = false // 隐藏选择商品和仓库的表单
|
|
|
|
|
this.newVisable = true // 显示新的商品入库表单
|
|
|
|
|
this.newForm.storeId = this.selectGoods.storeId // 设置新表单的仓库 ID
|
|
|
|
|
this.newForm.goodsId = res.data.id // 设置新表单的商品 ID
|
|
|
|
|
this.newForm.goodsName = res.data.name // 设置新表单的商品名称
|
|
|
|
|
this.newForm.goodsPrice = res.data.purchashPrice // 设置新表单的商品价格
|
|
|
|
|
} else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg, "error") // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 关闭选择商品和仓库表单的方法
|
|
|
|
|
closeSelectedGoods(formName){
|
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
|
this.goodsInVisable=false
|
|
|
|
|
this.newVisable = false
|
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
|
this.selectGoods={}
|
|
|
|
|
|
|
|
|
|
this.$refs[formName].resetFields() // 重置指定表单的字段值
|
|
|
|
|
this.goodsInVisable=false // 隐藏商品入库对话框
|
|
|
|
|
this.newVisable = false // 隐藏新的商品入库表单
|
|
|
|
|
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
|
|
|
|
|
this.selectGoods={} // 清空选择的商品和仓库信息对象
|
|
|
|
|
},
|
|
|
|
|
// 提交新商品入库表单的方法
|
|
|
|
|
submitNewForm(formName) {
|
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
saveIn(this.newForm).then(res => {
|
|
|
|
|
res = res.data
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
popup("入库成功")
|
|
|
|
|
this.goodsInVisable=false
|
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
|
this.newVisable = false
|
|
|
|
|
this.init()
|
|
|
|
|
} else {
|
|
|
|
|
popup(res.msg, "error")
|
|
|
|
|
this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
|
|
|
|
|
if (valid) { // 如果验证通过
|
|
|
|
|
saveIn(this.newForm).then(res => { // 调用 saveIn 函数保存商品入库信息
|
|
|
|
|
res = res.data // 获取响应的数据部分
|
|
|
|
|
if (res.code == 200) { // 如果响应码为 200（表示请求成功）
|
|
|
|
|
popup("入库成功") // 弹出入库成功的提示信息
|
|
|
|
|
this.goodsInVisable=false // 隐藏商品入库对话框
|
|
|
|
|
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
|
|
|
|
|
this.newVisable = false // 隐藏新的商品入库表单
|
|
|
|
|
this.init() // 重新调用 init 方法以更新数据
|
|
|
|
|
} else { // 如果响应码不为 200（表示请求失败）
|
|
|
|
|
popup(res.msg, "error") // 弹出错误提示信息
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 取消新商品入库表单提交的方法
|
|
|
|
|
saveCancel(formName) {
|
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
|
this.newVisable = false
|
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
|
this.$refs[formName].resetFields() // 重置指定表单的字段值
|
|
|
|
|
this.newVisable = false // 隐藏新的商品入库表单
|
|
|
|
|
this.selectGoodsVisable = true // 显示选择商品和仓库的表单
|
|
|
|
|
},
|
|
|
|
|
// 点击入库按钮时执行的方法
|
|
|
|
|
goodsInBtn(row) {
|
|
|
|
|
this.selectGoods.goodsId=row.id
|
|
|
|
|
this.newGoodsNum=row.goodsNum
|
|
|
|
|
this.goodsInVisable = true
|
|
|
|
|
this.selectGoods.goodsId=row.id // 设置选择的商品 ID 为点击行的商品 ID
|
|
|
|
|
this.newGoodsNum=row.goodsNum // 设置新商品数量为点击行的商品数量
|
|
|
|
|
this.goodsInVisable = true // 显示商品入库对话框
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 组件挂载到 DOM 后执行的生命周期钩子函数
|
|
|
|
|
mounted() {
|
|
|
|
|
this.searchForm.state1 = '0'
|
|
|
|
|
this.detailStoreGoodsIn_goodsAll()
|
|
|
|
|
this.detailStoreGoodsIn_storeAll()
|
|
|
|
|
this.detailStoreGoodsIn_suppliers()
|
|
|
|
|
this.init()
|
|
|
|
|
this.searchForm.state1 = '0' // 设置搜索表单的状态为 '0'
|
|
|
|
|
this.detailStoreGoodsIn_goodsAll() // 调用获取所有商品信息的方法
|
|
|
|
|
this.detailStoreGoodsIn_storeAll() // 调用获取所有仓库信息的方法
|
|
|
|
|
this.detailStoreGoodsIn_suppliers() // 调用获取所有供货商信息的方法
|
|
|
|
|
this.init() // 调用初始化数据的方法
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
/* 选择器.searchForm，用于选择类名为 searchForm 的元素 */
|
|
|
|
|
.searchForm {
|
|
|
|
|
height: 134px;
|
|
|
|
|
height: 134px; /* 设置元素的高度为 134 像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 选择器.table，用于选择类名为 table 的元素 */
|
|
|
|
|
.table {
|
|
|
|
|
height: 320px;
|
|
|
|
|
height: 320px; /* 设置元素的高度为 320 像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 选择器.pageUtils，用于选择类名为 pageUtils 的元素 */
|
|
|
|
|
.pageUtils {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 84%;
|
|
|
|
|
margin: 2px auto;
|
|
|
|
|
height: 43px;
|
|
|
|
|
position: absolute; /* 设置元素的定位方式为绝对定位 */
|
|
|
|
|
width: 84%; /* 设置元素的宽度为父元素宽度的 84% */
|
|
|
|
|
margin: 2px auto; /* 上下外边距为 2 像素，左右自动居中 */
|
|
|
|
|
height: 43px; /* 设置元素的高度为 43 像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 再次选择类名为 searchForm 的元素，这里重复定义了样式，后定义的样式会覆盖前面的 */
|
|
|
|
|
.searchForm {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
height: 51px;
|
|
|
|
|
line-height: 51px;
|
|
|
|
|
display: inline-block; /* 设置元素的显示方式为行内块元素 */
|
|
|
|
|
margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
|
|
|
|
|
height: 51px; /* 设置元素的高度为 51 像素 */
|
|
|
|
|
line-height: 51px; /* 设置元素的行高为 51 像素，通常用于使单行文本垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 选择器.searchForm.column，用于选择类名为 searchForm 的元素内部类名为 column 的元素 */
|
|
|
|
|
.searchForm .column {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
height: 51px;
|
|
|
|
|
display: inline-block; /* 设置元素的显示方式为行内块元素 */
|
|
|
|
|
margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
|
|
|
|
|
margin-right: 2px; /* 设置元素的右外边距为 2 像素 */
|
|
|
|
|
line-height: 48px; /* 设置元素的行高为 48 像素 */
|
|
|
|
|
height: 51px; /* 设置元素的高度为 51 像素 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
