文件
mashangyoujiu/Application/Retail/View/Inventory/addInventory.html

701 行
29 KiB
HTML
可执行文件

<!DOCTYPE html>
<html>
<!--[1.8.93]-->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新增盘点单</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
<link rel="stylesheet" href="/Public/css/component-serial.css?v=1.0.0">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Retail/common/js/select-goods-category.js"></script>
<style>
.header-title {
font-size: 20px;
padding-right: 30px;
}
.must-edit {
color: red;
}
.form-textarea {
margin: 20px 0;
}
.form-button {
display: flex;
justify-content: flex-end;
}
.form-textarea-title {
margin-bottom: 20px;
}
.form-table {
width: calc(100vw - 50px);
margin: 0 auto;
}
.form-table-total {
margin: 10px 0;
}
.table-total {
text-align: right;
padding: 15px;
background: #f5f7fa;
color: #606266;
border: 1px solid #ebeef5;
border-top: none;
}
.table-total > span {
color: #409EFF;
}
.el-input-remote {
width: 140px;
}
.size-details {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid #ebeef5;
margin-bottom: 20px;
}
.size-details-list {
box-sizing: border-box;
width: 45%;
display: flex;
align-items: center;
justify-content: space-between;
}
.size-input {
width: 120px;
}
.size-title {
padding: 10px;
background: #f5f7fa;
color: #606266;
border: 1px solid #ebeef5;
margin-bottom: 20px;
}
.size-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.size-all {
display: flex;
align-items: center;
}
.size-all-input {
width: 60px;
}
[v-cloak] {
display: none;
}
.el-dialog {
width: 90%;
}
.mini-input .el-input__inner {
padding-right: 4px;
}
.el-form-cell-center {
margin-bottom: 0;
}
#goods .serial span.num {
display: block;
}
</style>
</head>
<body>
<div class="app" id="goods" v-cloak>
<div class="text item" id="loading_examine">
<div style="margin: 5px 18px">
<template>
<if condition="$authArr['goodsChoice'] eq true">
<el-button size="small" @click="goodsChoice" type="primary">选择商品</el-button>
</if>
</template>
</div>
<div class="form-table">
<el-table :data="goodsList" size="small"
:header-cell-style="{background:'#F5F7FA',color:'#606266'}"
border show-summary v-loading="loading" :summary-method="getSummaries"
style="width: 100%; margin-top: 20px">
<el-table-column label="序号" type="index" width="80"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="mini"
@click="deleteTable(scope.$index,scope.row.inventory_goods_id)">删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="goods_name" label="商品"></el-table-column>
<el-table-column prop="sku_name" label="规格"></el-table-column>
<el-table-column label="货号">
<template slot-scope="scope">
<span v-if="scope.row.attribute_state == 1">{{scope.row.goods_number}}</span>
<span v-if="scope.row.attribute_state == 2">{{scope.row.sku_goods_number}}</span>
</template>
</el-table-column>
<el-table-column prop="sku_goods_number" label="条码">
<template slot-scope="scope">
<span v-if="scope.row.attribute_state == 1">{{scope.row.goods_code}}</span>
<span v-if="scope.row.attribute_state == 2">{{scope.row.sku_code}}</span>
</template>
</el-table-column>
<el-table-column prop="company" label="单位"></el-table-column>
<el-table-column prop="cost_price" label="成本价"></el-table-column>
<el-table-column v-if="showSystemNum" prop="goods_num" label="库存">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="detailsSerial(scope.$index)"
v-if="scope.row.serial_number_state == 1 && scope.row.goods_num > 0">
{{scope.row.goods_num}}
</el-button>
<span v-else>{{scope.row.goods_num}}</span>
</template>
</el-table-column>
<el-table-column label="盘点数量">
<template slot-scope="scope">
<div class="el-form-item el-form-cell-center" :class="color1?'':'is-error'"
v-if="scope.row.serial_number_state != 1">
<el-input size="mini" v-model="scope.row.inventory_num"
@input="numVerification(scope.row.inventory_num ,scope.row.goods_num,scope.row.pricing_method,scope.row.cost_price,scope.$index)">
</el-input>
</div>
<div class="serial" v-else>
<span class="num">{{scope.row.inventory_num}}</span>
<el-button type="text" size="mini" @click="insertSerial(scope.$index)">录入串码</el-button>
</div>
</template>
</el-table-column>
<el-table-column v-if="showSystemNum" prop="subtotal" label="盈亏"></el-table-column>
<el-table-column prop="remarks" label="备注">
<template slot-scope="scope">
<el-input type="textarea" v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
</el-table>
</div>
<div class="form-textarea">
<div class="form-textarea-title">订单备注</div>
<el-input type="textarea" :rows="2" placeholder="订单备注" v-model="remarks">
</el-input>
</div>
<div class="form-button">
<el-button @click="cancel">取消</el-button>
<if condition="$authArr['onSubmit'] eq true">
<el-button type="primary" @click="onSubmit(2)">保存草稿箱</el-button>
<el-button type="primary" @click="onSubmit(1)">确定</el-button>
</if>
</div>
</div>
<!--/弹出框/-->
<el-dialog title="选择商品" size="small" top="5vh" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
:modal-append-to-body="false" :visible.sync="outerVisible">
<div class="dialog-details-first">
<template>
<div style="display: flex;">
<el-input style="margin-right: 20px;width: 200px" size="small" class="el-input-remote" clearable
@keydown.enter.exact.native.prevent="searchGoods"
v-model="searchText" placeholder="名称/货号/条码">
</el-input>
<select-goods-category :user-type="1"
:category-id1.sync="goodsClassId1"
:category-id2.sync="goodsClassId2"
:category-id3.sync="goodsClassId3"></select-goods-category>
<el-button type="primary" plain @click="searchGoods" size="small">搜索</el-button>
</div>
</template>
</div>
<template>
<el-table v-loading="loading" size="small"
:header-cell-style="{background:'#F5F7FA',color:'#606266'}"
:data="goodsArr" border @selection-change="handleSelectionChange"
style="width: 100%; margin-top: 20px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="index" label="序号"></el-table-column>
<el-table-column prop="goods_name" label="商品名称"></el-table-column>
<el-table-column prop="sku_name" label="规格"></el-table-column>
<el-table-column label="货号">
<template slot-scope="scope">
<span v-if="scope.row.attribute_state == 1">{{scope.row.goods_number}}</span>
<span v-if="scope.row.attribute_state == 2">{{scope.row.sku_goods_number}}</span>
</template>
</el-table-column>
<el-table-column prop="sku_goods_number" label="条码">
<template slot-scope="scope">
<span v-if="scope.row.attribute_state == 1">{{scope.row.goods_code}}</span>
<span v-if="scope.row.attribute_state == 2">{{scope.row.sku_code}}</span>
</template>
</el-table-column>
<el-table-column prop="company" label="单位"></el-table-column>
<el-table-column prop="cost_price" label="成本价"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="currentLen">
</el-pagination>
</template>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="goodsSub(1)">提交</el-button>
<el-button @click="goodsSub(2)">提交并关闭</el-button>
</div>
</el-dialog>
<component-serial :visible.sync="serialVisible" :dialog-type="dialogType" :parent-index="serialGoodsIndex"
:parent-data="serialGoodsData" :data="serialData" :get-data-type="serialDataType"
:insert-validate="dialogType == 'insert' ? 'inventory' : ''" @serial-change="serialChange">
</component-serial>
</div>
</body>
<script src="/Public/js/component-serial.js?v=1.0.1"></script>
<script src="/Public/js/common.js"></script>
<script>
new Vue({
el: "#goods",
data: {
showSystemNum: "{$showSystemNum}" == 1 ? true : false,
inventory_id: "{$inventory_id}",
color: true,
searchText: "",
goodsClassId1: "",
goodsClassId2: "",
goodsClassId3: "",
goodsArr: [], //商品档案信息
currentPage: 1,
currentLimit: 10,
currentLen: 0,
color1: true,
color2: true,
remarks: '',
num: 1,
size: true,
outerVisible: false,
innerVisible: false, //规格弹框
goodsList: [], //盘点商品明细
goodsSelection: [], //选中的商品
loading: false,
serialVisible: false, //串号录入窗口开关
serialGoodsIndex: 0, //串号录入当前商品索引
serialGoodsData: {}, //串号录入当前商品数据对象
serialData: [], //串号容器
dialogType: '', //串号弹出层类型
serialDataType: '' //串号数据类型
},
methods: {
//仓库选择
warehouse_operation: function () {
this.currentPage = 1;
this.goodsClassId1 = "";
this.goodsClassId2 = "";
this.goodsClassId3 = "";
},
//选择商品
goodsChoice: function () {
var that = this;
that.getData();
that.outerVisible = true;
},
//盘点商品搜索
searchGoods: function () {
this.currentPage = 1;
this.getData();
},
//盘点商品
getData: function () {
this.loading = true;
var goodsList = this.goodsList;
var exists_id_arr = [];
if (goodsList.length > 0) {
for (var i = 0; i < goodsList.length; i++) {
exists_id_arr.push(goodsList[i].id);
}
}
$.ajax({
url: "{:U(goodsList)}",
type: 'POST',
data: {
page: this.currentPage,
limit: this.currentLimit,
exists_id_arr: exists_id_arr,
search_info: this.searchText,
person1: this.goodsClassId1,
person2: this.goodsClassId2,
person3: this.goodsClassId3,
},
success: (res) => {
if (res.status == 1) {
this.loading = false;
this.goodsArr = [];
this.goodsArr = res.data.list;
this.$nextTick(function () {
this.currentLen = parseInt(res.data.count);
})
} else {
this.$confirm(res.msg, '提示', {
confirmButtonText: '确定',
type: 'warning'
}).then(() => {
}).catch(() => {
});
}
}
});
},
//分页
handleSizeChange(val) {
this.currentLimit = val;
this.currentPage = 1;
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
//选中的盘点商品
handleSelectionChange: function (data) {
var that = this;
that.goodsSelection = data;
},
//商品提交
goodsSub: function (type) {
var that = this;
var goodsSelection = JSON.parse(JSON.stringify(that.goodsSelection));
var goodsList = that.goodsList;
if (!goodsSelection || goodsSelection.length == 0) {
that.$message({type: "error", message: "请选择盘点的商品", duration: 1000})
return;
}
for (var i = 0; i < goodsSelection.length; i++) {
goodsSelection[i].subtotal = "";
goodsSelection[i].remarks = "";
goodsList.push(goodsSelection[i]);
}
that.goodsList = [];
that.goodsList = goodsList;
if (goodsList.length >= 400) {
that.$message({
type: "warning",
message: "盘点的商品种数已达上限建议立即提交",
duration: 2000
})
}
if (type == 2) {
that.outerVisible = false
} else {
that.searchGoods();
}
},
//数量
numVerification: function (num, goods_num, pricing_method, price, index) {
if (pricing_method == 2) {
var reg = /^[0-9]+(.[0-9]{1,3})?$/;
} else {
var reg = /^\+?[0-9][0-9]*$/;
}
if (!reg.test(num)) {
this.subtotalCalculation(price, num, goods_num, index);
this.color1 = false;
} else {
this.subtotalCalculation(price, num, goods_num, index);
this.color1 = true;
}
},
//计算单个商品的小计
subtotalCalculation: function (price, num, goods_num, index) {
var that = this;
var reg = /^[0-9]+.?[0-9]*$/;
if (!reg.test(price) || !reg.test(num)) {
that.goodsList[index].subtotal = "";
return;
}
var subtotal = ((num - goods_num) * price * 1);
that.goodsList[index].subtotal = subtotal.toFixed(2);
},
deleteTable: function (index, inventory_goods_id) {
var that = this;
if (inventory_goods_id > 0 && that.inventory_id > 0) {
$.ajax({
url: "{:U('removeGoods')}",
type: "post",
data: {
inventory_goods_id: inventory_goods_id,
inventory_id: that.inventory_id
},
success: function (res) {
if (res.status == 1) {
that.goodsList.splice(index, 1);
} else {
that.$message.error("请求超时,请重试");
}
}
})
} else {
that.goodsList.splice(index, 1);
}
},
cancel: function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
onSubmit: function (status) {
var that = this;
var goods_id = [];
var type = that.type;
var goodsList = that.goodsList;
var remarks = that.remarks;
var reg2 = /^[0-9]+(.[0-9]{1,3})?$/;
var reg3 = /^\+?[0-9][0-9]*$/;
var inventory_id = that.inventory_id;
if (inventory_id == '' && (!goodsList || goodsList.length == 0)) {
that.$message({type: "error", message: "请选择盘点商品", duration: 1000})
return;
}
for (var i = 0; i < goodsList.length; i++) {
if (!goodsList[i].cost_price) {
that.$message({
type: "error",
message: goodsList[i].goods_name + goodsList[i].sku_name + "成本价有误",
duration: 1000
})
return;
}
if (goodsList[i].inventory_num === "") {
that.$message({
type: "error",
message: goodsList[i].goods_name + goodsList[i].sku_name + "请输入正确数量",
duration: 1000
})
return;
}
if (goodsList[i].attribute_state == 1) {
//无规格
if (goodsList[i].pricing_method == 1) {
if (!reg3.test(goodsList[i].inventory_num)) {
that.$message({
type: "error",
message: goodsList[i].goods_name + "请输入正确数量",
duration: 1000
})
return;
}
} else {
if (!reg2.test(goodsList[i].inventory_num)) {
that.$message({
type: "error",
message: goodsList[i].goods_name + "请输入正确数量",
duration: 1000
})
return;
}
}
} else if (goodsList[i].attribute_state == 2) {
if (!reg3.test(goodsList[i].inventory_num)) {
that.$message({
type: "error",
message: goodsList[i].goods_name + goodsList[i].sku_name + "规格商品数量为整数",
duration: 1000
})
return;
}
}
if (goods_id.includes(goodsList[i].id)) {
that.$message({
type: "error",
message: goodsList[i].goods_name + goodsList[i].sku_name + "存在重复",
duration: 1000
})
return;
}
goods_id.push(goodsList[i].id);
}
that.$confirm('请确认盘点商品信息无误,提交后无法修改,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading_examine = that.$loading({
target: "#loading_examine",
lock: true,
text: '保存中,请等待',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
goodsList = JSON.stringify(goodsList);
$.ajax({
url: "{:U('InventoryOperation')}",
type: "post",
data: {goodsList: goodsList, remarks: remarks, status: status, inventory_id: inventory_id},
success: function (res) {
if (res.status == 1) {
that.$message({
type: "success",
message: res.message,
duration: 1000,
onClose: function () {
loading_examine.close();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
})
} else {
that.$message({
type: "error",
message: res.message,
duration: 3000,
onClose: function () {
loading_examine.close();
}
})
}
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
getSummaries: function (param) {
const {columns, data} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (index === 2) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = param.data.length + ' 种';
}
if (index === 10) {
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return parseFloat((prev + curr).toFixed(2));
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = '';
}
}
});
return sums;
},
//继续盘点获取列表记录
getRecord: function () {
if (this.inventory_id) {
$.ajax({
url: "{:U('draftsList')}",
type: "post",
data: {inventory_order_id: this.inventory_id},
success: (res) => {
if (res.status == 1) {
this.goodsList = res.data;
}
}
})
}
},
/**
* @description: 打开串号选择窗口
* @param {Number} index: 当前商品索引
*/
insertSerial(index) {
this.dialogType = 'insert'
this.serialDataType = ''
this.serialVisible = true
this.serialGoodsIndex = index
this.serialGoodsData = this.goodsList[index]
this.serialData = []
const serialList = this.goodsList[index].serial_list
if (serialList && typeof serialList == 'object' && serialList.length > 0) {
serialList.forEach(serial => {
this.serialData.push({
mainSerial: serial.main_serial_number,
assistSerial1: serial.auxiliary_serial_number_one,
assistSerial2: serial.auxiliary_serial_number_two
})
})
}
},
/**
* @description: 打开串号详情窗口
* @param {Number} index: 当前商品索引
*/
detailsSerial(index) {
this.serialData = []
this.dialogType = 'details'
this.serialDataType = 'supplyInventory'
this.serialVisible = true
this.serialGoodsData = this.goodsList[index]
},
/**
* @description: 串号子组件通道
* @param {Array} datas: 串号数据
* @param {Number} goodsIndex: 当前采购的商品索引
*/
serialChange(datas, goodsIndex) {
const serialList = []
datas.forEach(data => {
serialList.push({
main_serial_number: data.mainSerial,
auxiliary_serial_number_one: data.assistSerial1,
auxiliary_serial_number_two: data.assistSerial2
})
})
const goods = this.goodsList[goodsIndex]
goods.serial_list = serialList
this.$set(goods, 'inventory_num', serialList.length)
this.numVerification(goods.inventory_num, goods.goods_num, goods.pricing_method, goods.cost_price, goodsIndex)
}
},
created() {
this.getRecord();
}
})
</script>
</html>