<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
<link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
|
<script type="text/javascript" charset="utf-8"
|
th:src="@{/plugin/beditor/ueditor.config.js}"></script>
|
<script type="text/javascript" charset="utf-8"
|
th:src="@{/plugin/beditor/ueditor.all.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
|
<style>
|
.unitbox .el-col {
|
margin-left: 5px;
|
|
}
|
|
.mixSearchBox {
|
position: relative;
|
}
|
|
.mixSearchBox .searchResultTable {
|
position: absolute;
|
padding: 10px;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
background-color: #fff;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
box-sizing: border-box;
|
margin: 10px 0;
|
z-index: 99999999;
|
}
|
|
/**e4e7ed*/
|
|
.searchResultTable:before, .searchResultTable:after {
|
width: 0px;
|
height: 0px;
|
border-width: 8px;
|
border-style: solid;
|
border-color: transparent transparent #fff transparent;
|
position: absolute;
|
content: ' ';
|
left: 39px;
|
top: -14px;
|
}
|
|
.searchResultTable:before {
|
top: -15px;
|
border-color: transparent transparent #e4e7ed transparent;
|
}
|
|
.searchInput {
|
width: 200px;
|
}
|
|
.measureInput {
|
width: 150px;
|
}
|
|
.tabs {
|
margin-bottom: 80px;
|
}
|
|
.ui-table .el-form-item__content { margin-left: 0 !important; }
|
</style>
|
</head>
|
<body>
|
<div class="ibox-content" id="app">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form-horizontal" id="dataform" label-width="120px">
|
<div class="form-group">
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="出库类型" prop="outStoreType">
|
<el-select v-model="ruleForm.outStoreType" placeholder="请选择">
|
<el-option v-for="item in outStoreTypeData"
|
:key="item.value"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="出库时间">
|
<el-date-picker disabled v-model="ruleForm.createTime" style="width: 100%" type="datetime" format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="form-group">
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="入库仓库" prop="warehouseData">
|
<el-select v-model="ruleForm.warehouseData" placeholder="请选择">
|
<el-option v-for="item in warehouseList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="form-group">
|
<!-- 项目绑定产品 -->
|
<div class="mixSearchBox col-sm-offset-2">
|
<!-- 搜索框 -->
|
<el-input class="searchInput" @input="searchGoods()" v-model="queryKey"
|
placeholder="搜索添加产品"></el-input>
|
<el-button icon="el-icon-search" type="primary" @click="searchGoods()">搜索</el-button>
|
<div class="searchResultTable" v-show="showSearchTable">
|
<!-- 搜索加载数据表格 -->
|
<el-table
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
:max-height="400"
|
:data="searchTableData"
|
style="width: 100%">
|
<el-table-column
|
prop="goods.goodsNo"
|
label="产品编号"
|
width="100">
|
</el-table-column>
|
|
<el-table-column
|
prop="goods.name"
|
width="280"
|
label="产品名称">
|
</el-table-column>
|
|
<el-table-column
|
prop="goods.unit"
|
label="产品单位">
|
</el-table-column>
|
<el-table-column
|
prop="storeTotal"
|
label="库存量">
|
</el-table-column>
|
<el-table-column
|
prop="goodsPrice"
|
label="入库单价">
|
</el-table-column>
|
<el-table-column
|
prop="batch"
|
label="批次">
|
</el-table-column>
|
<el-table-column
|
prop="goods.alarmNum"
|
label="库存预警值">
|
</el-table-column>
|
<el-table-column
|
prop="storeName"
|
label="所属仓库">
|
</el-table-column>
|
<el-table-column
|
prop="goods.goodsSortName"
|
label="分类">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="primary"
|
size="mini"
|
@click="handleEdit(scope.$index, scope.row)">选择
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-row class="mt-20 mb-20 ui-table">
|
<el-col :span="20">
|
<el-table
|
border
|
:height="500"
|
:data="ruleForm.assembleGoods"
|
style="width: 100%">
|
<el-table-column
|
type="index"
|
width="50">
|
</el-table-column>
|
<el-table-column
|
prop="shoppingGoods.goods.goodsNo"
|
label="产品编号"
|
width="100">
|
</el-table-column>
|
|
<el-table-column
|
prop="shoppingGoods.goods.name"
|
width="200"
|
label="产品名称">
|
</el-table-column>
|
|
<el-table-column
|
prop="shoppingGoods.goods.unit"
|
label="产品单位">
|
</el-table-column>
|
<el-table-column
|
prop="shoppingGoods.storeTotal"
|
label="库存量">
|
</el-table-column>
|
<el-table-column
|
prop="shoppingGoods.goodsPrice"
|
label="入库单价">
|
</el-table-column>
|
<el-table-column
|
prop="shoppingGoods.batch"
|
label="批次">
|
</el-table-column>
|
<el-table-column
|
prop="shoppingGoods.goods.alarmNum"
|
label="库存预警值">
|
</el-table-column>
|
<el-table-column
|
label="数量">
|
<template slot-scope="scope">
|
<el-form-item :prop="'assembleGoods.'+ scope.$index +'.amount'" >
|
<el-input v-model.number="scope.row.amount"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="danger"
|
size="mini"
|
@click="removeItem(scope.$index, scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 项目绑定产品end -->
|
</div>
|
<div class="form-group ">
|
<div class="col-sm-12 text-center">
|
<el-button type="primary" @click="confirmSubmit('ruleForm')">保存</el-button>
|
<el-button type="danger" @click="closeForm">关闭</el-button>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
</body>
|
<script>
|
var vue = new Vue({
|
el : "#app",
|
data : {
|
ruleForm : {
|
outStoreType : "",
|
warehouseData : "",
|
createTime : new Date(),
|
assembleGoods : [],
|
},
|
rules : {
|
outStoreType : [
|
{ required: true, message: '请选择出库类型', trigger: 'change' }
|
],
|
warehouseData : [
|
{ required: true, message: '请选择仓库', trigger: 'change' }
|
],
|
},
|
outStoreTypeData : [],
|
warehouseList : [],
|
//搜索关键词
|
queryKey: '',
|
//是否展示搜索表格
|
showSearchTable: false,
|
//搜索表格数据
|
searchTableData: [],
|
//表格加载效果
|
loading: false,
|
},
|
created : function() {
|
this.getOutStoreType();
|
this.getWarehouse();
|
},
|
methods : {
|
initData : function() {},
|
getOutStoreType : function () {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/customerDictionary/getListByParentCode/CKLX',
|
callback: function (data) {
|
_this.outStoreTypeData = data.rows;
|
}
|
});
|
},
|
getWarehouse : function () {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/warehouse/findSingleShopWarehouse',
|
callback: function (data) {
|
_this.warehouseList = data.rows;
|
}
|
});
|
},
|
searchGoods() {
|
let _this = this;
|
|
if (!_this.ruleForm.warehouseData) {
|
_this.$message.error('请先选择仓库');
|
return;
|
}
|
|
if (this.queryKey && this.queryKey.trim().length > 0) {
|
this.showSearchTable = true;
|
this.loading = true;
|
AjaxProxy.requst({
|
app: _this,
|
contentType: 'application/x-www-form-urlencoded',
|
data: {name: _this.queryKey, storeId: _this.ruleForm.warehouseData, limit:10000},
|
url: basePath + "/admin/store/showList",
|
callback: function (data) {
|
_this.searchTableData = data.rows;
|
_this.loading = false;
|
}
|
});
|
} else {
|
this.showSearchTable = false;
|
}
|
},
|
handleEdit : function(index, row) {
|
console.log(row);
|
let assembleGoods = this.ruleForm.assembleGoods;
|
if (!assembleGoods) {
|
assembleGoods = new Array();
|
this.ruleForm.assembleGoods = assembleGoods;
|
}
|
//是否已经被选择了
|
let selected = false;
|
this.ruleForm.assembleGoods.forEach(item => {
|
if (item.shoppingGoods.id == row.id) {
|
selected = true;
|
return;
|
}
|
});
|
if (!selected) {
|
this.ruleForm.assembleGoods.push({
|
total: 1,
|
assembleGoodId: row.id,
|
shoppingGoods: row
|
});
|
}
|
this.showSearchTable = false;
|
},
|
|
removeItem(index, row) {
|
this.ruleForm.assembleGoods.splice(index, 1);
|
},
|
confirmSubmit : function(formName) {
|
let _this = this;
|
let ruleForm = _this.ruleForm;
|
|
var flag = false;
|
_this.$refs[formName].validate((valid) => {
|
if (!valid) {
|
console.log('error submit!!');
|
flag = true;
|
return;
|
}
|
});
|
if (flag) {
|
return;
|
}
|
|
if (ruleForm.assembleGoods.length <= 0) {
|
_this.$notify({
|
title: '提示',
|
message: '请添加产品',
|
type: 'warning'
|
});
|
return;
|
}
|
|
this.$confirm('提交后将减少产品库存且无法编辑，是否确认提交?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
_this.dataSubmit(formName);
|
}).catch(() => {});
|
},
|
dataSubmit : function (formName) {
|
let _this = this;
|
let ruleForm = _this.ruleForm;
|
|
var data = {};
|
data.type = ruleForm.outStoreType;
|
data.time = ruleForm.createTime;
|
data.shopId = ruleForm.warehouseData;
|
var outStoreItems = [];
|
for (var i = 0, length = _this.ruleForm.assembleGoods.length; i < length; i++) {
|
var detail = _this.ruleForm.assembleGoods[i];
|
var outStoreItem = {};
|
outStoreItem.storeId = detail.shoppingGoods.id;
|
outStoreItem.skuId = detail.shoppingGoods.goods.id;
|
outStoreItem.amount = detail.amount;
|
outStoreItems.push(outStoreItem);
|
}
|
data.outStoreItems = outStoreItems;
|
AjaxProxy.requst({
|
app: _this,
|
data: data,
|
url: basePath + "/admin/outstore/addOrModifyJson",
|
callback: function (data) {
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
parent.myGrid.serchData();
|
}
|
});
|
},
|
closeForm : function() {
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
}
|
}
|
});
|
</script>
|
<script th:inline="javascript">
|
$(".select2").select2({'width':'100%'});
|
|
var selectArr=null;
|
var totalGoods=[];
|
var goodsAttr = '';
|
var storeId = 0;
|
//初始化操作
|
MTools.autoFullSelect();
|
// readInitData();
|
writeDate();
|
var myForm=MForm.initForm({
|
beforeSubmit:function(){
|
//是否绑定明细
|
var bodyTrs=$("#cpId").find("tr");
|
if(bodyTrs.length==0){
|
layer.msg("请添加消耗的产品",{icon:2});
|
return false;
|
}
|
},
|
invokeUrl:basePath+"/admin/outstore/addOrModify",
|
afterSubmit:function(){
|
parent.myGrid.serchData();
|
},
|
});
|
//时间
|
$('.datetimepicker').datetimepicker({
|
//format : "yyyy-mm-dd",
|
format : "yyyy-mm-dd hh:ii:ss",
|
|
});
|
|
$("#instoreType").change(function () {
|
totalGoods = [];
|
$("#cpId").html('');
|
});
|
|
function submitOutStore() {
|
layer.confirm("提交后将减少产品库存且无法编辑，是否确认提交", function() {
|
myForm.submit();
|
});
|
}
|
|
function callback(arr) {
|
console.log(arr);
|
removeDouble(arr);
|
writeDate();
|
}
|
|
function removeDouble(arr) {
|
if (totalGoods == null) {
|
totalGoods = arr;
|
} else {
|
//去重
|
for (var i = 0; i < arr.length; i++) {
|
var isDouble = false;
|
for (var j = 0; j < totalGoods.length; j++) {
|
if (arr[i].id == totalGoods[j].id) {
|
isDouble = true;
|
break;
|
}
|
}
|
//如果不重复
|
if (!isDouble) {
|
totalGoods[totalGoods.length] = arr[i];
|
}
|
}
|
}
|
}
|
|
|
//初始化产品列表
|
function openPruductList() {
|
//获取所选择 的产品属性，传递给选择页面
|
storeId = $("#storeId").val();
|
|
if (storeId == '') {
|
layer.msg("请选择仓库", {icon: 2});
|
return false;
|
}
|
layer.open({
|
type: 2,
|
title: "选择产品",
|
area: MUI.SIZE_M,
|
content: [basePath+'/admin/redirect/hive/store/select-outstore-products-list?storeId='+storeId]
|
});
|
}
|
|
//填写数据到html
|
function writeDate(){
|
console.log(totalGoods);
|
var html="";
|
for(var i=0 ; i<totalGoods.length;i++){
|
if(!totalGoods[i].sum){
|
totalGoods[i].sum="";
|
}
|
html+='<tr>'
|
+'<td>'+(i+1)+'</td>'
|
+'<td>'+totalGoods[i].goods.goodsNo+'<input autocomplete="off" type="hidden" name="outStoreItems['+i+'].storeId" value="'+totalGoods[i].id+'"</td>'
|
+'<td>'+totalGoods[i].goods.name+'<input autocomplete="off" type="hidden" name="outStoreItems['+i+'].skuId" value="'+totalGoods[i].skuId+'"</td>'
|
+'<td>'+totalGoods[i].goods.goodsSortName+'</td>'
|
+'<td>'+totalGoods[i].goods.unit+'</td>'
|
+'<td>'+totalGoods[i].storeTotal+'</td>'
|
+'<td>'+totalGoods[i].goodsPrice+'</td>'
|
+'<td>'+totalGoods[i].batch+'</td>'
|
+'<td><input autocomplete="off" name="outStoreItems['+i+'].amount" type="text" min="0" class="" style="width:50px" datatype="price" maxlength="10" errormsg="请输入大于0的值" value=""> <div class="Validform_checktip"></div></td>'
|
+'<td class="center"><a style="text-decoration: none" class="fa fa-trash" onClick="delSelectItem(this,'+totalGoods[i].id+')" href="javascript:;" title="删除"></a></td>'
|
+'</tr>'
|
}
|
$("#cpId").html(html);
|
}
|
function delSelectItem(node, id) {
|
//根据列表的id找到元素相应下表的元素
|
for (var i = 0; i < totalGoods.length; i++) {
|
if (totalGoods[i].id == id) {
|
totalGoods.splice(i, 1);
|
break;
|
|
}
|
}
|
//移除tr
|
$(node).closest('tr').remove();
|
$("tbody").find("tr").each(function (i) {
|
$(this).find("td").eq(0).html(i + 1);
|
});
|
}
|
|
</script>
|
</body>
|
</html>
|
