|
|
|
@ -1,67 +1,89 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<!-- 组件的根元素，设置唯一的 ID -->
|
|
|
|
<div id="detail_store_goods_in">
|
|
|
|
<div id="detail_store_goods_in">
|
|
|
|
|
|
|
|
<!-- 包含标题和按钮的区域 -->
|
|
|
|
<div class="noticeOut">
|
|
|
|
<div class="noticeOut">
|
|
|
|
|
|
|
|
<!-- 显示查看出库商品面板的标题 -->
|
|
|
|
<h1>查看出库商品面板</h1>
|
|
|
|
<h1>查看出库商品面板</h1>
|
|
|
|
|
|
|
|
<!-- 包含两个按钮的区域 -->
|
|
|
|
<div class="btns">
|
|
|
|
<div class="btns">
|
|
|
|
|
|
|
|
<!-- 点击后调用 outGoodsBtn 方法，显示出库货架商品的对话框 -->
|
|
|
|
<el-button @click="outGoodsBtn" style="width: 200px;height: 100px;background-color: #c09dff">出库货架商品
|
|
|
|
<el-button @click="outGoodsBtn" style="width: 200px;height: 100px;background-color: #c09dff">出库货架商品
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后调用 outUntreated 方法，显示过期/下架商品的对话框 -->
|
|
|
|
<el-button @click="outUntreated" style="width: 200px;height: 100px;background-color: #c09dff">过期/下架商品
|
|
|
|
<el-button @click="outUntreated" style="width: 200px;height: 100px;background-color: #c09dff">过期/下架商品
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--商品上货架-->
|
|
|
|
<!-- 商品上货架的对话框，全屏显示 -->
|
|
|
|
<el-dialog
|
|
|
|
<el-dialog
|
|
|
|
:fullscreen="true"
|
|
|
|
:fullscreen="true"
|
|
|
|
:visible.sync="visable1">
|
|
|
|
:visible.sync="visable1">
|
|
|
|
|
|
|
|
<!-- 搜索表单区域 -->
|
|
|
|
<div class="searchForm">
|
|
|
|
<div class="searchForm">
|
|
|
|
|
|
|
|
<!-- 搜索表单的列，包含商品名输入框 -->
|
|
|
|
<div class="column">
|
|
|
|
<div class="column">
|
|
|
|
|
|
|
|
<!-- 显示“商品名：”标签 -->
|
|
|
|
<span>商品名：</span>
|
|
|
|
<span>商品名：</span>
|
|
|
|
|
|
|
|
<!-- 输入框，用于输入商品名，双向绑定到 searchForm.name -->
|
|
|
|
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
|
|
|
|
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 搜索表单的列，包含搜索和关闭按钮 -->
|
|
|
|
<div class="column">
|
|
|
|
<div class="column">
|
|
|
|
|
|
|
|
<!-- 点击后调用 submitSearchForm 方法进行搜索 -->
|
|
|
|
<el-button type="success" @click="submitSearchForm">搜索</el-button>
|
|
|
|
<el-button type="success" @click="submitSearchForm">搜索</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后隐藏对话框 -->
|
|
|
|
<el-button type="primary" @click="visable1=false">关闭</el-button>
|
|
|
|
<el-button type="primary" @click="visable1=false">关闭</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
|
<div class="table">
|
|
|
|
<div class="table">
|
|
|
|
|
|
|
|
<!-- 表格组件，数据绑定到 tableData -->
|
|
|
|
<el-table
|
|
|
|
<el-table
|
|
|
|
:data="tableData"
|
|
|
|
:data="tableData"
|
|
|
|
style="width: 100%;"
|
|
|
|
style="width: 100%;"
|
|
|
|
|
|
|
|
|
|
|
|
size="medium">
|
|
|
|
size="medium">
|
|
|
|
|
|
|
|
<!-- 表格列，显示序号 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
width="200"
|
|
|
|
width="200"
|
|
|
|
type="index"
|
|
|
|
type="index"
|
|
|
|
label="序号">
|
|
|
|
label="序号">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示商品封面 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="coverUrl"
|
|
|
|
prop="coverUrl"
|
|
|
|
label="封面">
|
|
|
|
label="封面">
|
|
|
|
|
|
|
|
<!-- 自定义列内容，显示商品封面图片 -->
|
|
|
|
<template v-slot="scope">
|
|
|
|
<template v-slot="scope">
|
|
|
|
<img height="60px" :src="scope.row.coverUrl">
|
|
|
|
<img height="60px" :src="scope.row.coverUrl">
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示商品名 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="name"
|
|
|
|
prop="name"
|
|
|
|
label="商品名">
|
|
|
|
label="商品名">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示出货数量 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="goodsNum"
|
|
|
|
prop="goodsNum"
|
|
|
|
label="出货数量">
|
|
|
|
label="出货数量">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示操作按钮 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
width="100px"
|
|
|
|
width="100px"
|
|
|
|
label="操作">
|
|
|
|
label="操作">
|
|
|
|
|
|
|
|
<!-- 自定义列内容，显示出货按钮 -->
|
|
|
|
<template v-slot="scope">
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
|
|
|
<!-- 点击后调用 outGoodsBtn1 方法，处理出货操作 -->
|
|
|
|
<el-button type="warning"
|
|
|
|
<el-button type="warning"
|
|
|
|
@click="outGoodsBtn1(scope.row)" plain>出货
|
|
|
|
@click="outGoodsBtn1(scope.row)" plain>出货
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<!-- 分页组件区域 -->
|
|
|
|
<div style="margin: 10px 0 15px 0;">
|
|
|
|
<div style="margin: 10px 0 15px 0;">
|
|
|
|
|
|
|
|
<!-- 分页组件，处理分页相关操作 -->
|
|
|
|
<el-pagination
|
|
|
|
<el-pagination
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
@ -74,18 +96,22 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
<!--商品出库-->
|
|
|
|
<!-- 商品出库的对话框 -->
|
|
|
|
<el-dialog
|
|
|
|
<el-dialog
|
|
|
|
title="商品出库"
|
|
|
|
title="商品出库"
|
|
|
|
:visible.sync="goodsOutVisable"
|
|
|
|
:visible.sync="goodsOutVisable"
|
|
|
|
width="50%">
|
|
|
|
width="50%">
|
|
|
|
|
|
|
|
<!-- 选择商品和仓库的表单，当 selectGoodsVisable 为 true 时显示 -->
|
|
|
|
<el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
|
|
|
|
<el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
|
|
|
|
class="demo-ruleForm">
|
|
|
|
class="demo-ruleForm">
|
|
|
|
|
|
|
|
<!-- 商品选择的表单项 -->
|
|
|
|
<el-form-item style="width:40%" label="商品：" prop="goodsId">
|
|
|
|
<el-form-item style="width:40%" label="商品：" prop="goodsId">
|
|
|
|
|
|
|
|
<!-- 下拉选择框，禁用状态，双向绑定到 selectGoods.goodsId -->
|
|
|
|
<el-select disabled v-model="selectGoods.goodsId"
|
|
|
|
<el-select disabled v-model="selectGoods.goodsId"
|
|
|
|
placeholder="请选择商品"
|
|
|
|
placeholder="请选择商品"
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
clearable>
|
|
|
|
clearable>
|
|
|
|
|
|
|
|
<!-- 循环生成商品选项 -->
|
|
|
|
<el-option
|
|
|
|
<el-option
|
|
|
|
v-for="item in options_goods"
|
|
|
|
v-for="item in options_goods"
|
|
|
|
:key="item.id"
|
|
|
|
:key="item.id"
|
|
|
|
@ -94,12 +120,15 @@
|
|
|
|
</el-option>
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<!-- 仓库选择的表单项 -->
|
|
|
|
<el-form-item style="width:40%" label="仓库：" prop="storeId">
|
|
|
|
<el-form-item style="width:40%" label="仓库：" prop="storeId">
|
|
|
|
|
|
|
|
<!-- 下拉选择框，双向绑定到 selectGoods.storeId -->
|
|
|
|
<el-select v-model="selectGoods.storeId"
|
|
|
|
<el-select v-model="selectGoods.storeId"
|
|
|
|
@change="$forceUpdate"
|
|
|
|
@change="$forceUpdate"
|
|
|
|
placeholder="请选择仓库"
|
|
|
|
placeholder="请选择仓库"
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
clearable>
|
|
|
|
clearable>
|
|
|
|
|
|
|
|
<!-- 循环生成仓库选项 -->
|
|
|
|
<el-option
|
|
|
|
<el-option
|
|
|
|
v-for="item in options_store"
|
|
|
|
v-for="item in options_store"
|
|
|
|
:key="item.id"
|
|
|
|
:key="item.id"
|
|
|
|
@ -108,45 +137,63 @@
|
|
|
|
</el-option>
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<!-- 类型选择的表单项 -->
|
|
|
|
<el-form-item style="width:40%" label="类型：" prop="state">
|
|
|
|
<el-form-item style="width:40%" label="类型：" prop="state">
|
|
|
|
|
|
|
|
<!-- 下拉选择框，双向绑定到 selectGoods.state -->
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
v-model="selectGoods.state"
|
|
|
|
v-model="selectGoods.state"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
|
|
|
|
<!-- 出库类型选项 -->
|
|
|
|
<el-option label="出库" value="0"></el-option>
|
|
|
|
<el-option label="出库" value="0"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<!-- 表单操作按钮的表单项 -->
|
|
|
|
<el-form-item style="width:40%">
|
|
|
|
<el-form-item style="width:40%">
|
|
|
|
|
|
|
|
<!-- 点击后调用 selectedGoods 方法，确认选择 -->
|
|
|
|
<el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
|
|
|
|
<el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后调用 closeSelectedGoods 方法，关闭表单 -->
|
|
|
|
<el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
|
|
|
|
<el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
<!-- 新表单，当 newVisable 为 true 时显示 -->
|
|
|
|
<el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
|
|
|
|
<el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
|
|
|
|
class="demo-ruleForm">
|
|
|
|
class="demo-ruleForm">
|
|
|
|
|
|
|
|
<!-- 表单的行 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示商品名 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width: 60%" label="商品名：">
|
|
|
|
<el-form-item style="width: 60%" label="商品名：">
|
|
|
|
|
|
|
|
<!-- 只读输入框，显示商品名，双向绑定到 newForm.goodsName -->
|
|
|
|
<el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
|
|
|
|
<el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示类型选择 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width:60%" label="类型：" prop="state">
|
|
|
|
<el-form-item style="width:60%" label="类型：" prop="state">
|
|
|
|
|
|
|
|
<!-- 禁用的下拉选择框，双向绑定到 newForm.state -->
|
|
|
|
<el-select disabled
|
|
|
|
<el-select disabled
|
|
|
|
v-model="newForm.state"
|
|
|
|
v-model="newForm.state"
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
|
|
|
|
<!-- 出库类型选项 -->
|
|
|
|
<el-option label="出库" value="0"></el-option>
|
|
|
|
<el-option label="出库" value="0"></el-option>
|
|
|
|
|
|
|
|
<!-- 过期类型选项 -->
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
|
|
|
|
<!-- 下架类型选项 -->
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表单的行 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示商品数量输入框 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
|
|
|
|
<el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
|
|
|
|
|
|
|
|
<!-- 数字输入框，双向绑定到 newForm.goodsNum，有数量范围限制 -->
|
|
|
|
<el-input type="number" @change="()=>{
|
|
|
|
<el-input type="number" @change="()=>{
|
|
|
|
if(this.goodsNum_max<this.newForm.goodsNum){
|
|
|
|
if(this.goodsNum_max<this.newForm.goodsNum){
|
|
|
|
this.newForm.goodsNum=this.goodsNum_max
|
|
|
|
this.newForm.goodsNum=this.goodsNum_max
|
|
|
|
@ -154,16 +201,18 @@
|
|
|
|
if(this.newForm.goodsNum<1){
|
|
|
|
if(this.newForm.goodsNum<1){
|
|
|
|
this.newForm.goodsNum=1
|
|
|
|
this.newForm.goodsNum=1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}" min="1" :max="goodsNum_max" v-model="newForm.goodsNum" placeholder="如：1"></el-input>
|
|
|
|
}" min="1" :max="goodsNum_max" v-model="newForm.goodsNum" placeholder="如：1"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示仓库选择 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width:60%" label="仓库：" prop="storeId">
|
|
|
|
<el-form-item style="width:60%" label="仓库：" prop="storeId">
|
|
|
|
|
|
|
|
<!-- 禁用的下拉选择框，双向绑定到 newForm.storeId -->
|
|
|
|
<el-select disabled v-model="newForm.storeId"
|
|
|
|
<el-select disabled v-model="newForm.storeId"
|
|
|
|
placeholder="请选择仓库"
|
|
|
|
placeholder="请选择仓库"
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
clearable>
|
|
|
|
clearable>
|
|
|
|
|
|
|
|
<!-- 循环生成仓库选项 -->
|
|
|
|
<el-option
|
|
|
|
<el-option
|
|
|
|
v-for="item in options_store"
|
|
|
|
v-for="item in options_store"
|
|
|
|
:key="item.id"
|
|
|
|
:key="item.id"
|
|
|
|
@ -174,9 +223,12 @@
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表单的行 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示出库日期选择器 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width: 60%" label="出库日期：" prop="createTime">
|
|
|
|
<el-form-item style="width: 60%" label="出库日期：" prop="createTime">
|
|
|
|
|
|
|
|
<!-- 日期选择器，双向绑定到 newForm.createTime -->
|
|
|
|
<el-date-picker
|
|
|
|
<el-date-picker
|
|
|
|
size="mini"
|
|
|
|
size="mini"
|
|
|
|
style="width: 140px"
|
|
|
|
style="width: 140px"
|
|
|
|
@ -187,99 +239,132 @@
|
|
|
|
</el-date-picker>
|
|
|
|
</el-date-picker>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示备注输入框 -->
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item style="width: 60%" label="备注：">
|
|
|
|
<el-form-item style="width: 60%" label="备注：">
|
|
|
|
|
|
|
|
<!-- 文本域输入框，双向绑定到 newForm.info -->
|
|
|
|
<el-input type="textarea" v-model="newForm.info" placeholder="如：某商品因什么原因出库"></el-input>
|
|
|
|
<el-input type="textarea" v-model="newForm.info" placeholder="如：某商品因什么原因出库"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表单操作按钮的表单项 -->
|
|
|
|
<el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
|
|
|
|
<!-- 点击后调用 submitNewForm 方法，提交出库表单 -->
|
|
|
|
<el-button type="primary" @click="submitNewForm('newForm')">出库</el-button>
|
|
|
|
<el-button type="primary" @click="submitNewForm('newForm')">出库</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后调用 saveCancel 方法，取消操作 -->
|
|
|
|
<el-button @click="saveCancel('newForm')">取消</el-button>
|
|
|
|
<el-button @click="saveCancel('newForm')">取消</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
<!--商品过期/下架列表显示-->
|
|
|
|
<!-- 商品过期/下架列表显示的对话框，全屏显示 -->
|
|
|
|
<el-dialog
|
|
|
|
<el-dialog
|
|
|
|
:fullscreen="true"
|
|
|
|
:fullscreen="true"
|
|
|
|
:visible.sync="visable2">
|
|
|
|
:visible.sync="visable2">
|
|
|
|
|
|
|
|
<!-- 搜索表单区域 -->
|
|
|
|
<div class="searchForm">
|
|
|
|
<div class="searchForm">
|
|
|
|
|
|
|
|
<!-- 搜索表单的列，包含商品名输入框 -->
|
|
|
|
<div class="column">
|
|
|
|
<div class="column">
|
|
|
|
|
|
|
|
<!-- 显示“商品名：”标签 -->
|
|
|
|
<span>商品名：</span>
|
|
|
|
<span>商品名：</span>
|
|
|
|
|
|
|
|
<!-- 输入框，用于输入商品名，双向绑定到 searchForm1.name -->
|
|
|
|
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm1.name"/>
|
|
|
|
<el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm1.name"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 搜索表单的列，包含类型选择框 -->
|
|
|
|
<div class="column">
|
|
|
|
<div class="column">
|
|
|
|
|
|
|
|
<!-- 显示“类型：”标签 -->
|
|
|
|
<span>类型：</span>
|
|
|
|
<span>类型：</span>
|
|
|
|
|
|
|
|
<!-- 下拉选择框，双向绑定到 searchForm1.state -->
|
|
|
|
<el-select style="width: 120px"
|
|
|
|
<el-select style="width: 120px"
|
|
|
|
v-model="searchForm1.state"
|
|
|
|
v-model="searchForm1.state"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
|
|
|
|
<!-- 过期类型选项 -->
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
|
|
|
|
<!-- 下架类型选项 -->
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 搜索表单的列，包含搜索和关闭按钮 -->
|
|
|
|
<div class="column">
|
|
|
|
<div class="column">
|
|
|
|
|
|
|
|
<!-- 点击后调用 submitSearchForm1 方法进行搜索 -->
|
|
|
|
<el-button type="success" @click="submitSearchForm1">搜索</el-button>
|
|
|
|
<el-button type="success" @click="submitSearchForm1">搜索</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后隐藏对话框 -->
|
|
|
|
<el-button type="primary" @click="visable2=false">关闭</el-button>
|
|
|
|
<el-button type="primary" @click="visable2=false">关闭</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
|
<div class="table">
|
|
|
|
<div class="table">
|
|
|
|
|
|
|
|
<!-- 表格组件，数据绑定到 tableData1 -->
|
|
|
|
<el-table
|
|
|
|
<el-table
|
|
|
|
:data="tableData1"
|
|
|
|
:data="tableData1"
|
|
|
|
style="width: 100%;"
|
|
|
|
style="width: 100%;"
|
|
|
|
|
|
|
|
|
|
|
|
size="medium">
|
|
|
|
size="medium">
|
|
|
|
|
|
|
|
<!-- 表格列，显示序号 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
width="200"
|
|
|
|
width="200"
|
|
|
|
type="index"
|
|
|
|
type="index"
|
|
|
|
label="序号">
|
|
|
|
label="序号">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示商品封面 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="coverUrl"
|
|
|
|
prop="coverUrl"
|
|
|
|
label="封面">
|
|
|
|
label="封面">
|
|
|
|
|
|
|
|
<!-- 自定义列内容，显示商品封面图片 -->
|
|
|
|
<template v-slot="scope">
|
|
|
|
<template v-slot="scope">
|
|
|
|
<img height="60px" :src="scope.row.coverUrl">
|
|
|
|
<img height="60px" :src="scope.row.coverUrl">
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示商品名 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="goodsName"
|
|
|
|
prop="goodsName"
|
|
|
|
label="商品名">
|
|
|
|
label="商品名">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示仓库名 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="storeName"
|
|
|
|
prop="storeName"
|
|
|
|
label="仓库">
|
|
|
|
label="仓库">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示处理数量 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="untreatedNum"
|
|
|
|
prop="untreatedNum"
|
|
|
|
label="处理数量">
|
|
|
|
label="处理数量">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示类型 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="state"
|
|
|
|
prop="state"
|
|
|
|
label="类型">
|
|
|
|
label="类型">
|
|
|
|
|
|
|
|
<!-- 自定义列内容，根据类型显示不同标签 -->
|
|
|
|
<template v-slot="scope">
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
|
|
|
<!-- 过期类型标签 -->
|
|
|
|
<el-tag type="warning" v-if="scope.row.state=='1'">过期</el-tag>
|
|
|
|
<el-tag type="warning" v-if="scope.row.state=='1'">过期</el-tag>
|
|
|
|
|
|
|
|
<!-- 下架类型标签 -->
|
|
|
|
<el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
|
|
|
|
<el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示通知时间 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
prop="createTime"
|
|
|
|
prop="createTime"
|
|
|
|
label="通知时间">
|
|
|
|
label="通知时间">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<!-- 表格列，显示操作按钮 -->
|
|
|
|
<el-table-column
|
|
|
|
<el-table-column
|
|
|
|
width="100px"
|
|
|
|
width="100px"
|
|
|
|
label="操作">
|
|
|
|
label="操作">
|
|
|
|
|
|
|
|
<!-- 自定义列内容，显示处理按钮 -->
|
|
|
|
<template v-slot="scope">
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
|
|
|
<!-- 点击后调用 outUntreatedBtn 方法，处理过期/下架商品 -->
|
|
|
|
<el-button type="warning"
|
|
|
|
<el-button type="warning"
|
|
|
|
@click="outUntreatedBtn(scope.row)" plain>处理
|
|
|
|
@click="outUntreatedBtn(scope.row)" plain>处理
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<!-- 分页组件区域 -->
|
|
|
|
<div style="margin: 10px 0 15px 0;">
|
|
|
|
<div style="margin: 10px 0 15px 0;">
|
|
|
|
|
|
|
|
<!-- 分页组件，处理分页相关操作 -->
|
|
|
|
<el-pagination
|
|
|
|
<el-pagination
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
@size-change="handleSizeChange1"
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
@current-change="handleCurrentChange1"
|
|
|
|
:current-page.sync="searchForm1.currentPage"
|
|
|
|
:current-page.sync="searchForm1.currentPage"
|
|
|
|
:page-sizes="[5, 10, 20, 50]"
|
|
|
|
:page-sizes="[5, 10, 20, 50]"
|
|
|
|
:page-size="searchForm1.pageSize"
|
|
|
|
:page-size="searchForm1.pageSize"
|
|
|
|
@ -289,29 +374,37 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<!-- 处理表单填写的对话框 -->
|
|
|
|
<!--处理表单填写-->
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
<el-dialog
|
|
|
|
title="过期/下架商品处理表单"
|
|
|
|
title="过期/下架商品处理表单"
|
|
|
|
:visible.sync="visable3"
|
|
|
|
:visible.sync="visable3"
|
|
|
|
width="50%">
|
|
|
|
width="50%">
|
|
|
|
|
|
|
|
<!-- 处理表单，当条件满足时显示 -->
|
|
|
|
<el-form v-if="" :model="outUntreatedForm" :rules="rules" ref="outUntreatedForm" label-width="100px"
|
|
|
|
<el-form v-if="" :model="outUntreatedForm" :rules="rules" ref="outUntreatedForm" label-width="100px"
|
|
|
|
class="demo-ruleForm">
|
|
|
|
class="demo-ruleForm">
|
|
|
|
|
|
|
|
<!-- 表单的行，显示商品图片 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 60%">
|
|
|
|
<el-form-item style="width: 60%">
|
|
|
|
|
|
|
|
<!-- 显示商品图片 -->
|
|
|
|
<img height="200px" :src="outUntreatedForm.coverUrl" alt="商品图片"/>
|
|
|
|
<img height="200px" :src="outUntreatedForm.coverUrl" alt="商品图片"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表单的行，显示商品名称、数量、仓库和类型 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示商品名称 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 60%" label="商品名称:">
|
|
|
|
<el-form-item style="width: 60%" label="商品名称:">
|
|
|
|
|
|
|
|
<!-- 只读输入框，显示商品名称，双向绑定到 outUntreatedForm.goodsName -->
|
|
|
|
<el-input readonly v-model="outUntreatedForm.goodsName" placeholder="商品名称"/>
|
|
|
|
<el-input readonly v-model="outUntreatedForm.goodsName" placeholder="商品名称"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示商品数量 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 60%" label="商品数量:" prop="untreatedNum">
|
|
|
|
<el-form-item style="width: 60%" label="商品数量:" prop="untreatedNum">
|
|
|
|
|
|
|
|
<!-- 数字输入框，双向绑定到 outUntreatedForm.untreatedNum，有数量范围限制 -->
|
|
|
|
<el-input
|
|
|
|
<el-input
|
|
|
|
@change="()=>{
|
|
|
|
@change="()=>{
|
|
|
|
if (outUntreatedForm.untreatedNum<=0){
|
|
|
|
if (outUntreatedForm.untreatedNum<=0){
|
|
|
|
@ -325,79 +418,106 @@
|
|
|
|
type="number" min="1" :max="untreatedNum" v-model="outUntreatedForm.untreatedNum"/>
|
|
|
|
type="number" min="1" :max="untreatedNum" v-model="outUntreatedForm.untreatedNum"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示仓库名称 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 60%" label="仓库:">
|
|
|
|
<el-form-item style="width: 60%" label="仓库:">
|
|
|
|
|
|
|
|
<!-- 只读输入框，显示仓库名称，双向绑定到 outUntreatedForm.storeName -->
|
|
|
|
<el-input readonly v-model="outUntreatedForm.storeName" placeholder="仓库"/>
|
|
|
|
<el-input readonly v-model="outUntreatedForm.storeName" placeholder="仓库"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!-- 表单的列，显示类型选择 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 40%" label="类型:">
|
|
|
|
<el-form-item style="width: 40%" label="类型:">
|
|
|
|
|
|
|
|
<!-- 禁用的下拉选择框，双向绑定到 outUntreatedForm.state -->
|
|
|
|
<el-select disabled
|
|
|
|
<el-select disabled
|
|
|
|
v-model="outUntreatedForm.state"
|
|
|
|
v-model="outUntreatedForm.state"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
@change="$forceUpdate()"
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
placeholder="请选择类型" clearable>
|
|
|
|
|
|
|
|
<!-- 过期类型选项 -->
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
<el-option label="过期" value="1"></el-option>
|
|
|
|
|
|
|
|
<!-- 下架类型选项 -->
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
<el-option label="下架" value="2"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 表单的行，显示处理和关闭按钮 -->
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<!-- 表单的列 -->
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item style="width: 60%">
|
|
|
|
<el-form-item style="width: 60%">
|
|
|
|
|
|
|
|
<!-- 点击后调用 submitOutUntreatedForm 方法，提交处理表单 -->
|
|
|
|
<el-button type="success" @click="submitOutUntreatedForm('outUntreatedForm')">处理</el-button>
|
|
|
|
<el-button type="success" @click="submitOutUntreatedForm('outUntreatedForm')">处理</el-button>
|
|
|
|
|
|
|
|
<!-- 点击后调用 closeOutUntreatedForm 方法，关闭表单 -->
|
|
|
|
<el-button type="primary" @click="closeOutUntreatedForm('outUntreatedForm')">关闭</el-button>
|
|
|
|
<el-button type="primary" @click="closeOutUntreatedForm('outUntreatedForm')">关闭</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
// 引入通用的弹出提示方法
|
|
|
|
import {popup} from "@/assets/js/common";
|
|
|
|
import {popup} from "@/assets/js/common";
|
|
|
|
|
|
|
|
// 引入库存管理通知相关的 API 方法
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
queryPageNoticeOut_shelves,
|
|
|
|
queryPageNoticeOut_shelves,
|
|
|
|
queryPageNoticeOut_untreated, resolveOutUntreatedForm,
|
|
|
|
queryPageNoticeOut_untreated, resolveOutUntreatedForm,
|
|
|
|
saveOut_shelves
|
|
|
|
saveOut_shelves
|
|
|
|
} from "@/api/inventory_management/notice/noticeApi";
|
|
|
|
} from "@/api/inventory_management/notice/noticeApi";
|
|
|
|
|
|
|
|
// 引入库存管理商品出库相关的 API 方法
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
changeOutGoods,
|
|
|
|
changeOutGoods,
|
|
|
|
changeOutStore,
|
|
|
|
changeOutStore,
|
|
|
|
initOutOptions, queryOutGoods, saveOut
|
|
|
|
initOutOptions, queryOutGoods, saveOut
|
|
|
|
} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
|
|
|
|
} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 导出默认的 Vue 组件对象
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
|
|
|
|
// 定义组件的数据属性
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
|
|
|
|
// 控制商品上货架对话框的显示状态
|
|
|
|
visable1: false,
|
|
|
|
visable1: false,
|
|
|
|
|
|
|
|
// 控制商品过期/下架列表对话框的显示状态
|
|
|
|
visable2: false,
|
|
|
|
visable2: false,
|
|
|
|
|
|
|
|
// 控制处理表单对话框的显示状态
|
|
|
|
visable3: false,
|
|
|
|
visable3: false,
|
|
|
|
|
|
|
|
// 处理数量的最大值
|
|
|
|
untreatedNum: '',
|
|
|
|
untreatedNum: '',
|
|
|
|
|
|
|
|
// 处理表单的数据对象
|
|
|
|
outUntreatedForm: {},
|
|
|
|
outUntreatedForm: {},
|
|
|
|
|
|
|
|
// 控制商品出库对话框的显示状态
|
|
|
|
goodsOutVisable: false,
|
|
|
|
goodsOutVisable: false,
|
|
|
|
|
|
|
|
// 控制新表单的显示状态
|
|
|
|
newVisable: false,
|
|
|
|
newVisable: false,
|
|
|
|
|
|
|
|
// 控制选择商品和仓库表单的显示状态
|
|
|
|
selectGoodsVisable: true,
|
|
|
|
selectGoodsVisable: true,
|
|
|
|
|
|
|
|
// 选择商品和仓库表单的数据对象
|
|
|
|
selectGoods: {},
|
|
|
|
selectGoods: {},
|
|
|
|
|
|
|
|
// 商品选项数组
|
|
|
|
options_goods: [],
|
|
|
|
options_goods: [],
|
|
|
|
|
|
|
|
// 仓库选项数组
|
|
|
|
options_store: [],
|
|
|
|
options_store: [],
|
|
|
|
/*表格*/
|
|
|
|
// 表格数据数组
|
|
|
|
tableData: [],
|
|
|
|
tableData: [],
|
|
|
|
|
|
|
|
// 搜索表单的数据对象，包含分页和状态信息
|
|
|
|
searchForm: {
|
|
|
|
searchForm: {
|
|
|
|
total: 0,
|
|
|
|
total: 0,
|
|
|
|
currentPage: 1,
|
|
|
|
currentPage: 1,
|
|
|
|
pageSize: 5,
|
|
|
|
pageSize: 5,
|
|
|
|
state: '0'
|
|
|
|
state: '0'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 搜索表单 1 的数据对象，包含分页信息
|
|
|
|
searchForm1: {
|
|
|
|
searchForm1: {
|
|
|
|
total: 0,
|
|
|
|
total: 0,
|
|
|
|
currentPage: 1,
|
|
|
|
currentPage: 1,
|
|
|
|
pageSize: 5,
|
|
|
|
pageSize: 5,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 表格数据 1 数组
|
|
|
|
tableData1: [],
|
|
|
|
tableData1: [],
|
|
|
|
|
|
|
|
// 新表单的数据对象，包含商品出库相关信息
|
|
|
|
newForm: {
|
|
|
|
newForm: {
|
|
|
|
goodsId: '',
|
|
|
|
goodsId: '',
|
|
|
|
goodsNum: '',
|
|
|
|
goodsNum: '',
|
|
|
|
@ -407,6 +527,7 @@
|
|
|
|
storeId: '',
|
|
|
|
storeId: '',
|
|
|
|
state: ''
|
|
|
|
state: ''
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 表单验证规则对象
|
|
|
|
rules: {
|
|
|
|
rules: {
|
|
|
|
goodsId: [
|
|
|
|
goodsId: [
|
|
|
|
{required: true, message: '商品编号不能为空', trigger: 'blur'},
|
|
|
|
{required: true, message: '商品编号不能为空', trigger: 'blur'},
|
|
|
|
@ -429,40 +550,60 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 定义组件的方法
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
// 点击出库货架商品按钮时调用的方法
|
|
|
|
outGoodsBtn() {
|
|
|
|
outGoodsBtn() {
|
|
|
|
|
|
|
|
// 初始化数据
|
|
|
|
this.init()
|
|
|
|
this.init()
|
|
|
|
|
|
|
|
// 显示商品上货架对话框
|
|
|
|
this.visable1 = true
|
|
|
|
this.visable1 = true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 关闭处理表单对话框的方法
|
|
|
|
closeOutUntreatedForm(formName) {
|
|
|
|
closeOutUntreatedForm(formName) {
|
|
|
|
|
|
|
|
// 重置表单字段
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
|
|
|
|
// 隐藏处理表单对话框
|
|
|
|
this.visable3 = false
|
|
|
|
this.visable3 = false
|
|
|
|
|
|
|
|
// 清空处理表单数据对象
|
|
|
|
this.outUntreatedForm = {}
|
|
|
|
this.outUntreatedForm = {}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 点击出货按钮时调用的方法
|
|
|
|
outGoodsBtn1(row) {
|
|
|
|
outGoodsBtn1(row) {
|
|
|
|
|
|
|
|
// 设置选择的商品 ID
|
|
|
|
this.selectGoods.goodsId = row.id
|
|
|
|
this.selectGoods.goodsId = row.id
|
|
|
|
|
|
|
|
// 标记是否存在库存
|
|
|
|
var flag = false;
|
|
|
|
var flag = false;
|
|
|
|
|
|
|
|
// 遍历商品选项数组，检查是否存在该商品库存
|
|
|
|
for (var item of this.options_goods) {
|
|
|
|
for (var item of this.options_goods) {
|
|
|
|
if (item.id == this.selectGoods.goodsId) {
|
|
|
|
if (item.id == this.selectGoods.goodsId) {
|
|
|
|
flag = true;
|
|
|
|
flag = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果不存在库存，弹出错误提示并返回
|
|
|
|
if (!flag) {
|
|
|
|
if (!flag) {
|
|
|
|
popup("库存中没有该商品的库存", "error")
|
|
|
|
popup("库存中没有该商品的库存", "error")
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 调用 API 方法，根据商品 ID 获取可用仓库
|
|
|
|
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
|
|
|
|
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 更新仓库选项数组
|
|
|
|
this.options_store = res.data
|
|
|
|
this.options_store = res.data
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
// 显示商品出库对话框
|
|
|
|
this.goodsOutVisable = true
|
|
|
|
this.goodsOutVisable = true
|
|
|
|
|
|
|
|
// 显示选择商品和仓库表单
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
|
|
|
|
// 隐藏新表单
|
|
|
|
this.newVisable = false
|
|
|
|
this.newVisable = false
|
|
|
|
|
|
|
|
// 设置选择的商品类型为出库
|
|
|
|
this.selectGoods.state = '0'
|
|
|
|
this.selectGoods.state = '0'
|
|
|
|
|
|
|
|
// 设置商品数量的最大值
|
|
|
|
this.goodsNum_max = row.goodsNum
|
|
|
|
this.goodsNum_max = row.goodsNum
|
|
|
|
|
|
|
|
// 重置新表单数据对象
|
|
|
|
this.newForm = {
|
|
|
|
this.newForm = {
|
|
|
|
goodsId: '',
|
|
|
|
goodsId: '',
|
|
|
|
goodsNum: row.goodsNum,
|
|
|
|
goodsNum: row.goodsNum,
|
|
|
|
@ -472,186 +613,266 @@
|
|
|
|
storeId: '',
|
|
|
|
storeId: '',
|
|
|
|
state: ''
|
|
|
|
state: ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 点击处理过期/下架商品按钮时调用的方法
|
|
|
|
outUntreatedBtn(param) {
|
|
|
|
outUntreatedBtn(param) {
|
|
|
|
|
|
|
|
// 复制商品信息到处理表单数据对象
|
|
|
|
this.outUntreatedForm = {...param}
|
|
|
|
this.outUntreatedForm = {...param}
|
|
|
|
|
|
|
|
// 设置处理数量的最大值
|
|
|
|
this.untreatedNum = param.untreatedNum
|
|
|
|
this.untreatedNum = param.untreatedNum
|
|
|
|
|
|
|
|
// 显示处理表单对话框
|
|
|
|
this.visable3 = true
|
|
|
|
this.visable3 = true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 提交处理表单的方法
|
|
|
|
submitOutUntreatedForm(formName) {
|
|
|
|
submitOutUntreatedForm(formName) {
|
|
|
|
|
|
|
|
// 验证表单字段
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
if (valid) {
|
|
|
|
|
|
|
|
// 调用 API 方法，提交处理表单数据
|
|
|
|
resolveOutUntreatedForm(this.outUntreatedForm).then(res => {
|
|
|
|
resolveOutUntreatedForm(this.outUntreatedForm).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
popup("处理成功")
|
|
|
|
// 弹出处理成功提示
|
|
|
|
this.visable3 = false
|
|
|
|
popup("处理成功")
|
|
|
|
this.outUntreatedForm = {}
|
|
|
|
// 隐藏处理表单对话框
|
|
|
|
this.init1()
|
|
|
|
this.visable3 = false
|
|
|
|
} else {
|
|
|
|
// 清空处理表单数据对象
|
|
|
|
popup(res.msg, "error")
|
|
|
|
this.outUntreatedForm = {}
|
|
|
|
}
|
|
|
|
// 初始化过期/下架商品列表数据
|
|
|
|
|
|
|
|
this.init1()
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 点击过期/下架商品按钮时调用的方法
|
|
|
|
outUntreated() {
|
|
|
|
outUntreated() {
|
|
|
|
|
|
|
|
// 初始化过期/下架商品列表数据
|
|
|
|
this.init1()
|
|
|
|
this.init1()
|
|
|
|
|
|
|
|
// 显示商品过期/下架列表对话框
|
|
|
|
this.visable2 = true
|
|
|
|
this.visable2 = true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 商品选择变化时调用的方法
|
|
|
|
changeGoods() {
|
|
|
|
changeGoods() {
|
|
|
|
|
|
|
|
// 强制更新视图
|
|
|
|
this.$forceUpdate()
|
|
|
|
this.$forceUpdate()
|
|
|
|
|
|
|
|
// 调用 API 方法，根据商品 ID 获取可用仓库
|
|
|
|
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
|
|
|
|
changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 更新仓库选项数组
|
|
|
|
this.options_store = res.data
|
|
|
|
this.options_store = res.data
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 初始化商品和仓库选项的方法
|
|
|
|
initOptions() {
|
|
|
|
initOptions() {
|
|
|
|
|
|
|
|
// 调用 API 方法，获取商品和仓库选项数据
|
|
|
|
initOutOptions().then(res => {
|
|
|
|
initOutOptions().then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 更新商品选项数组
|
|
|
|
this.options_goods = res.data.goods
|
|
|
|
this.options_goods = res.data.goods
|
|
|
|
|
|
|
|
// 更新仓库选项数组
|
|
|
|
this.options_store = res.data.stores
|
|
|
|
this.options_store = res.data.stores
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
popup(res.msg, "error")
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 初始化商品上货架表格数据的方法
|
|
|
|
init() {
|
|
|
|
init() {
|
|
|
|
|
|
|
|
// 调用 API 方法，获取商品上货架表格数据
|
|
|
|
queryPageNoticeOut_shelves(this.searchForm).then(res => {
|
|
|
|
queryPageNoticeOut_shelves(this.searchForm).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 更新表格数据数组
|
|
|
|
this.tableData = res.data.records
|
|
|
|
this.tableData = res.data.records
|
|
|
|
|
|
|
|
// 更新搜索表单的总记录数
|
|
|
|
this.searchForm.total = res.data.total
|
|
|
|
this.searchForm.total = res.data.total
|
|
|
|
|
|
|
|
// 更新搜索表单的每页显示记录数
|
|
|
|
this.searchForm.pageSize = res.data.size
|
|
|
|
this.searchForm.pageSize = res.data.size
|
|
|
|
|
|
|
|
// 更新搜索表单的当前页码
|
|
|
|
this.searchForm.currentPage = res.data.current
|
|
|
|
this.searchForm.currentPage = res.data.current
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
popup(res.msg, "error")
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/*分页*/
|
|
|
|
// 处理每页显示记录数变化的方法
|
|
|
|
handleSizeChange(val) {
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
|
|
|
// 更新搜索表单的每页显示记录数
|
|
|
|
this.searchForm.pageSize = val
|
|
|
|
this.searchForm.pageSize = val
|
|
|
|
|
|
|
|
// 重新初始化商品上货架表格数据
|
|
|
|
this.init()
|
|
|
|
this.init()
|
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 处理当前页码变化的方法
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
|
|
|
// 更新搜索表单的当前页码
|
|
|
|
this.searchForm.currentPage = val
|
|
|
|
this.searchForm.currentPage = val
|
|
|
|
|
|
|
|
// 重新初始化商品上货架表格数据
|
|
|
|
this.init()
|
|
|
|
this.init()
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 提交搜索表单的方法
|
|
|
|
submitSearchForm() {
|
|
|
|
submitSearchForm() {
|
|
|
|
|
|
|
|
// 重新初始化商品上货架表格数据
|
|
|
|
this.init()
|
|
|
|
this.init()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/*过期、下架分页*/
|
|
|
|
// 初始化过期/下架商品表格数据的方法
|
|
|
|
init1() {
|
|
|
|
init1() {
|
|
|
|
|
|
|
|
// 调用 API 方法，获取过期/下架商品表格数据
|
|
|
|
queryPageNoticeOut_untreated(this.searchForm1).then(res => {
|
|
|
|
queryPageNoticeOut_untreated(this.searchForm1).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 更新表格数据 1 数组
|
|
|
|
this.tableData1 = res.data.records
|
|
|
|
this.tableData1 = res.data.records
|
|
|
|
|
|
|
|
// 更新搜索表单 1 的总记录数
|
|
|
|
this.searchForm1.total = res.data.total
|
|
|
|
this.searchForm1.total = res.data.total
|
|
|
|
|
|
|
|
// 更新搜索表单 1 的每页显示记录数
|
|
|
|
this.searchForm1.pageSize = res.data.size
|
|
|
|
this.searchForm1.pageSize = res.data.size
|
|
|
|
|
|
|
|
// 更新搜索表单 1 的当前页码
|
|
|
|
this.searchForm1.currentPage = res.data.current
|
|
|
|
this.searchForm1.currentPage = res.data.current
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
popup(res.msg, "error")
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 处理过期/下架商品每页显示记录数变化的方法
|
|
|
|
handleSizeChange1(val) {
|
|
|
|
handleSizeChange1(val) {
|
|
|
|
|
|
|
|
// 更新搜索表单 1 的每页显示记录数
|
|
|
|
this.searchForm1.pageSize = val
|
|
|
|
this.searchForm1.pageSize = val
|
|
|
|
|
|
|
|
// 重新初始化过期/下架商品表格数据
|
|
|
|
this.init1()
|
|
|
|
this.init1()
|
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
|
console.log(`每页 ${val} 条`);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 处理过期/下架商品当前页码变化的方法
|
|
|
|
handleCurrentChange1(val) {
|
|
|
|
handleCurrentChange1(val) {
|
|
|
|
|
|
|
|
// 更新搜索表单 1 的当前页码
|
|
|
|
this.searchForm1.currentPage = val
|
|
|
|
this.searchForm1.currentPage = val
|
|
|
|
|
|
|
|
// 重新初始化过期/下架商品表格数据
|
|
|
|
this.init1()
|
|
|
|
this.init1()
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 提交过期/下架商品搜索表单的方法
|
|
|
|
submitSearchForm1() {
|
|
|
|
submitSearchForm1() {
|
|
|
|
|
|
|
|
// 重新初始化过期/下架商品表格数据
|
|
|
|
this.init1()
|
|
|
|
this.init1()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 选择商品和仓库表单提交时调用的方法
|
|
|
|
selectedGoods(formName) {
|
|
|
|
selectedGoods(formName) {
|
|
|
|
|
|
|
|
// 验证表单字段
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
if (valid) {
|
|
|
|
|
|
|
|
// 调用 API 方法，根据选择的商品和仓库信息获取商品详细信息
|
|
|
|
queryOutGoods(this.selectGoods).then(res => {
|
|
|
|
queryOutGoods(this.selectGoods).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 隐藏选择商品和仓库表单
|
|
|
|
this.selectGoodsVisable = false
|
|
|
|
this.selectGoodsVisable = false
|
|
|
|
|
|
|
|
// 显示新表单
|
|
|
|
this.newVisable = true
|
|
|
|
this.newVisable = true
|
|
|
|
|
|
|
|
// 更新新表单的商品名称
|
|
|
|
this.newForm.goodsName = res.data.goodsName
|
|
|
|
this.newForm.goodsName = res.data.goodsName
|
|
|
|
|
|
|
|
// 更新新表单的商品类型
|
|
|
|
this.newForm.state = this.selectGoods.state
|
|
|
|
this.newForm.state = this.selectGoods.state
|
|
|
|
|
|
|
|
// 更新新表单的仓库 ID
|
|
|
|
this.newForm.storeId = this.selectGoods.storeId
|
|
|
|
this.newForm.storeId = this.selectGoods.storeId
|
|
|
|
|
|
|
|
// 更新新表单的商品 ID
|
|
|
|
this.newForm.goodsId = this.selectGoods.goodsId
|
|
|
|
this.newForm.goodsId = this.selectGoods.goodsId
|
|
|
|
|
|
|
|
// 清空选择商品和仓库表单数据对象
|
|
|
|
// this.selectGoods = {}
|
|
|
|
// this.selectGoods = {}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
popup(res.msg, "error")
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 关闭选择商品和仓库表单的方法
|
|
|
|
closeSelectedGoods(formName) {
|
|
|
|
closeSelectedGoods(formName) {
|
|
|
|
|
|
|
|
// 重置表单字段
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
|
|
|
|
// 清空选择商品和仓库表单数据对象
|
|
|
|
this.selectGoods = {}
|
|
|
|
this.selectGoods = {}
|
|
|
|
|
|
|
|
// 隐藏商品出库对话框
|
|
|
|
this.goodsOutVisable = false
|
|
|
|
this.goodsOutVisable = false
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 提交新表单的方法
|
|
|
|
submitNewForm(formName) {
|
|
|
|
submitNewForm(formName) {
|
|
|
|
|
|
|
|
// 验证表单字段
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
if (valid) {
|
|
|
|
|
|
|
|
// 调用 API 方法，提交新表单数据
|
|
|
|
saveOut_shelves(this.newForm).then(res => {
|
|
|
|
saveOut_shelves(this.newForm).then(res => {
|
|
|
|
res = res.data
|
|
|
|
res = res.data
|
|
|
|
if (res.code == 200) {
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
|
|
// 弹出出库成功提示
|
|
|
|
popup("出库成功")
|
|
|
|
popup("出库成功")
|
|
|
|
|
|
|
|
// 设置搜索表单状态
|
|
|
|
this.searchForm.state1 = '0'
|
|
|
|
this.searchForm.state1 = '0'
|
|
|
|
|
|
|
|
// 隐藏商品出库对话框
|
|
|
|
this.goodsOutVisable = false
|
|
|
|
this.goodsOutVisable = false
|
|
|
|
|
|
|
|
// 清空选择商品和仓库表单数据对象
|
|
|
|
this.selectGoods = {}
|
|
|
|
this.selectGoods = {}
|
|
|
|
|
|
|
|
// 重新初始化商品上货架表格数据
|
|
|
|
this.init()
|
|
|
|
this.init()
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 弹出错误提示
|
|
|
|
popup(res.msg, "error")
|
|
|
|
popup(res.msg, "error")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 取消新表单操作的方法
|
|
|
|
saveCancel(formName) {
|
|
|
|
saveCancel(formName) {
|
|
|
|
|
|
|
|
// 重置表单字段
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
this.$refs[formName].resetFields()
|
|
|
|
|
|
|
|
// 隐藏新表单
|
|
|
|
this.newVisable = false
|
|
|
|
this.newVisable = false
|
|
|
|
|
|
|
|
// 显示选择商品和仓库表单
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
this.selectGoodsVisable = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 组件挂载时执行的钩子函数
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
// 初始化商品和仓库选项
|
|
|
|
this.initOptions()
|
|
|
|
this.initOptions()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
/* 设置 #detail_store_goods_in 下 .noticeOut 元素的高度和背景颜色 */
|
|
|
|
#detail_store_goods_in .noticeOut {
|
|
|
|
#detail_store_goods_in .noticeOut {
|
|
|
|
height: 660px;
|
|
|
|
height: 660px;
|
|
|
|
background-color: #bfdcf6;
|
|
|
|
background-color: #bfdcf6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 设置 #detail_store_goods_in 下 .noticeOut 内的 h1 元素和 .btns 元素的宽度 */
|
|
|
|
#detail_store_goods_in .noticeOut h1, .btns {
|
|
|
|
#detail_store_goods_in .noticeOut h1, .btns {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 设置搜索表单元素的高度 */
|
|
|
|
.searchForm {
|
|
|
|
.searchForm {
|
|
|
|
height: 134px;
|
|
|
|
height: 134px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 设置表格元素的高度 */
|
|
|
|
.table {
|
|
|
|
.table {
|
|
|
|
height: 320px;
|
|
|
|
height: 320px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 设置分页工具元素的定位、宽度、外边距和高度 */
|
|
|
|
.pageUtils {
|
|
|
|
.pageUtils {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
width: 84%;
|
|
|
|
width: 84%;
|
|
|
|
@ -659,6 +880,7 @@
|
|
|
|
height: 43px;
|
|
|
|
height: 43px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 再次设置搜索表单元素的显示方式、外边距、高度和行高，后定义的样式会覆盖前面的 */
|
|
|
|
.searchForm {
|
|
|
|
.searchForm {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0 auto;
|
|
|
|
margin: 0 auto;
|
|
|
|
@ -666,6 +888,7 @@
|
|
|
|
line-height: 51px;
|
|
|
|
line-height: 51px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 设置搜索表单内 .column 元素的显示方式、外边距、行高和高度 */
|
|
|
|
.searchForm .column {
|
|
|
|
.searchForm .column {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0 auto;
|
|
|
|
margin: 0 auto;
|
|
|
|
|
