<!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" @click="hidePanel">
|
<el-form :model="ruleForm" :rules="rules" class="form-horizontal" id="dataform" ref="ruleForm" label-width="120px">
|
<div class="form-group">
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="入库类型" prop="instoreTypeData">
|
<el-select v-model="ruleForm.instoreTypeData" placeholder="请选择">
|
<el-option v-for="item in instoreType"
|
: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="入库时间" prop="createTime">
|
<el-date-picker 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="制单人">-->
|
<!-- <el-input v-model="ruleForm.createBy" disabled></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </div>-->
|
|
<!-- <div class="col-sm-4 col-sm-offset-1">-->
|
<!-- <el-form-item label="审核人">-->
|
<!-- <el-input v-model="ruleForm.checkBy" disabled></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<div class="form-group">
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="往来单位" >
|
<el-select v-model="ruleForm.supplierData" placeholder="请选择">
|
<el-option v-for="item in supplierList"
|
:key="item.id"
|
:label="item.supplName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</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 class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="总价">
|
<el-input v-model="ruleForm.totalSum" disabled></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="form-group">
|
<div class="col-sm-4 col-sm-offset-1">
|
<el-form-item label="备注">
|
<el-input type="textarea"
|
:rows="3"
|
placeholder="请输入内容"
|
v-model="ruleForm.remark">
|
</el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="form-group">
|
<!-- 项目绑定产品 -->
|
<div class="mixSearchBox col-sm-offset-2" id="searchBox">
|
<!-- 搜索框 -->
|
<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="code"
|
label="产品编号"
|
width="100">
|
</el-table-column>
|
|
<el-table-column
|
prop="name"
|
width="280"
|
label="产品名称">
|
</el-table-column>
|
|
<el-table-column
|
prop="sealPice"
|
label="售价">
|
</el-table-column>
|
<el-table-column
|
prop="goodType"
|
label="类型">
|
</el-table-column>
|
<el-table-column
|
prop="cateName"
|
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.code"
|
label="产品编号"
|
width="100">
|
</el-table-column>
|
|
<el-table-column
|
prop="shoppingGoods.name"
|
width="200"
|
label="产品名称">
|
</el-table-column>
|
<el-table-column
|
label="产品类型"
|
prop="shoppingGoods.goodsSortName">
|
</el-table-column>
|
<el-table-column
|
label="存货单位"
|
prop="shoppingGoods.unit">
|
</el-table-column>
|
<el-table-column
|
label="数量">
|
<template slot-scope="scope">
|
<el-form-item :prop="'assembleGoods.'+ scope.$index +'.amount'" :rules="rules.count">
|
<el-input v-model.number="scope.row.amount" @blur="calculateTotalPrice(scope.$index, scope.row)"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="采购单价">
|
<template slot-scope="scope">
|
<el-form-item :prop="'assembleGoods.'+ scope.$index +'.price'" :rules="rules.price">
|
<el-input v-model="scope.row.price" @blur="calculateTotalPrice(scope.$index, scope.row)"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="总金额">
|
<template slot-scope="scope">
|
{{(scope.row.amount == undefined ? 0 : scope.row.amount) * (scope.row.price == undefined ? 0 : scope.row.price)}}
|
</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-8 col-md-offset-2">-->
|
<!-- <table class="table table-striped table-hover table-bordered"-->
|
<!-- id="mgrid">-->
|
<!-- <thead>-->
|
<!-- <tr>-->
|
<!-- <th>序号</th>-->
|
<!-- <th>产品编码</th>-->
|
<!-- <th>产品名称</th>-->
|
<!-- <th>产品类型</th>-->
|
<!-- <th>存货单位</th>-->
|
<!-- <th width="120">数量 <span class="text-danger">*</span></th>-->
|
<!-- <th width="120">采购单价 <span class="text-danger">*</span></th>-->
|
<!-- <th>总金额</th>-->
|
<!-- <th>操作</th>-->
|
<!-- </tr>-->
|
<!-- </thead>-->
|
<!-- <tbody id="cpId">-->
|
|
<!-- </tbody>-->
|
|
<!-- </table>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<div class="form-group ">
|
<div class="col-sm-12 text-center">
|
<el-button type="primary" @click="dataSubmit('ruleForm')">保存</el-button>
|
<el-button type="danger" @click="closeForm">关闭</el-button>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
</body>
|
|
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
|
<script>
|
const priceValidator = (rule, value, callback) =>{
|
const reg = /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/;
|
const flag = reg.test(value);
|
if (flag) {
|
callback()
|
} else {
|
callback(new Error('请输入保留两位以内的小数'))
|
}
|
};
|
|
var vue = new Vue({
|
el : "#app",
|
data : {
|
id : '',
|
ruleForm : {
|
instoreTypeData : "",
|
supplierData : "",
|
warehouseData : "",
|
createTime : "",
|
createBy : "",
|
checkBy : "",
|
totalSum : "",
|
remark : "",
|
assembleGoods : [],
|
},
|
rules : {
|
instoreTypeData : [
|
{ required: true, message: '请选择入库类型', trigger: 'change' }
|
],
|
warehouseData : [
|
{ required: true, message: '请选择仓库', trigger: 'change' }
|
],
|
createTime : [
|
{ required: true, message: '请选择入库时间', trigger: 'blur' }
|
],
|
price : [
|
{ required: true, message: '请输入保留两位以内的小数', trigger: 'blur' },
|
{ validator : priceValidator, trigger: 'blur' }
|
],
|
count : [
|
{ required: true, message: '请输入信息', trigger: 'blur' },
|
{ type : 'number', message: '请输入数字', trigger: 'blur' }
|
],
|
},
|
instoreType : [],
|
supplierList : [],
|
warehouseList : [],
|
//搜索关键词
|
queryKey: '',
|
//是否展示搜索表格
|
showSearchTable: false,
|
//搜索表格数据
|
searchTableData: [],
|
//表格加载效果
|
loading: false,
|
},
|
created : function() {
|
// this.ruleForm.createTime = new Date();
|
this.getInStroeType();
|
this.getSupplier();
|
this.getWarehouse();
|
this.initData();
|
},
|
methods : {
|
initData : function () {
|
let _this = this;
|
var id = $.query.get("id");
|
if (id!=null && id!='') {
|
_this.id = id;
|
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + "/admin/instore/findById?id="+id,
|
callback: function (data) {
|
console.log(data);
|
let obj = data.mapInfo.obj;
|
let ruleForm = _this.ruleForm;
|
ruleForm.instoreTypeData = obj.instoreType;
|
ruleForm.supplierData = Number(obj.supplierId);
|
ruleForm.warehouseData = obj.storeId;
|
ruleForm.createTime = obj.instoreDate;
|
ruleForm.remark = obj.remark;
|
var totalMoney = 0;
|
for (var i = 0, length = obj.instoreDetails.length; i < length; i++) {
|
let detail = {};
|
let listData = obj.instoreDetails[i];
|
detail.amount = listData.amount;
|
detail.price = listData.price;
|
totalMoney += listData.priceTotal;
|
detail.shoppingGoods = listData.goods;
|
ruleForm.assembleGoods.push(detail);
|
}
|
ruleForm.totalSum =totalMoney;
|
}
|
});
|
}
|
},
|
getInStroeType : function () {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/customerDictionary/getListByParentCode/RKLX',
|
callback: function (data) {
|
_this.instoreType = data.rows;
|
}
|
});
|
},
|
getSupplier : function () {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/supplier/all',
|
callback: function (data) {
|
_this.supplierList = 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.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, goodType: '家居产品', limit : 10000},
|
url: basePath + "/admin/shoppinggoods/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);
|
},
|
calculateTotalPrice(index, row) {
|
let _this = this;
|
var total = Number(0);
|
var list = _this.ruleForm.assembleGoods;
|
for (var i = 0, length = list.length; i < length; i++) {
|
var n = Number(list[i].amount == undefined ? '' : list[i].amount);
|
var p = Number(list[i].price == undefined ? '' : list[i].price);
|
total += (n * p);
|
}
|
|
_this.ruleForm.totalSum = total;
|
},
|
dataSubmit : function (formName) {
|
var _this = this;
|
var 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;
|
}
|
|
var data = {};
|
if (_this.id != '') {
|
data.id = _this.id;
|
}
|
data.instoreType = ruleForm.instoreTypeData;
|
data.instoreDate = ruleForm.createTime;
|
data.supplierId = ruleForm.supplierData;
|
data.remark = ruleForm.remark;
|
data.storeId = ruleForm.warehouseData;
|
|
var details = new Array();
|
for (var i = 0, length = ruleForm.assembleGoods.length; i < length; i++) {
|
var detail = {};
|
var goods = ruleForm.assembleGoods[i];
|
detail.skuId = goods.shoppingGoods.id;
|
detail.amount = goods.amount;
|
detail.price = goods.price;
|
details.push(detail);
|
}
|
data.instoreDetails = details;
|
AjaxProxy.requst({
|
app: _this,
|
data: data,
|
url: basePath + "/admin/instore/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));
|
},
|
hidePanel : function(event) {
|
let mixSearchBox = document.getElementById("searchBox");
|
if (mixSearchBox) {
|
if (!mixSearchBox.contains(event.target)) {
|
this.showSearchTable = false;
|
}
|
}
|
}
|
}
|
});
|
|
</script>
|
</body>
|
</html>
|
