2021-07-13 19:59:45 +08:00

654 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="../../../css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="addOrder">
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label required">订单名称</label>
<div class="layui-input-block">
<input type="text" name="ordername" placeholder="请输入订单名称" value="" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">供方</label>
<div class="layui-input-block">
<select name="supplier" id='supplier' lay-verify="required" lay-filter="supplier"
lay-search="">
</select>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">需方</label>
<div class="layui-input-block">
<select name="client" id='client' lay-verify="required" lay-filter="client" lay-search="">
</select>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">地址</label>
<div class="layui-input-block">
<input type="text" name="supplier_address" placeholder="请输入地址" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">地址</label>
<div class="layui-input-block">
<input type="text" name="client_address" placeholder="请输入地址" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">社会统一信用代码</label>
<div class="layui-input-block">
<input type="text" name="supplier_creditcode" placeholder="请输入社会统一信用代码" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">社会统一信用代码</label>
<div class="layui-input-block">
<input type="text" name="client_creditcode" placeholder="请输入社会统一信用代码" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">开户银行</label>
<div class="layui-input-block">
<input type="text" name="supplier_bank" placeholder="请输入开户银行" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">开户银行</label>
<div class="layui-input-block">
<input type="text" name="client_bank" placeholder="请输入订单名称" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">账号</label>
<div class="layui-input-block">
<input type="text" name="supplier_bankaccount" placeholder="请输入账号" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">账号</label>
<div class="layui-input-block">
<input type="text" name="client_bankaccount" placeholder="请输入账号" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">电话号码</label>
<div class="layui-input-block">
<input type="text" name="supplier_telnum" placeholder="请输入电话号码" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">电话号码</label>
<div class="layui-input-block">
<input type="text" name="client_telnum" placeholder="请输入电话号码" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">传真</label>
<div class="layui-input-block">
<input type="text" name="supplier_fax" placeholder="请输入传真" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">传真</label>
<div class="layui-input-block">
<input type="text" name="client_fax" placeholder="请输入传真" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">联系人</label>
<div class="layui-input-block">
<input type="text" name="supplier_contactperson" placeholder="请输入联系人" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">联系人</label>
<div class="layui-input-block">
<input type="text" name="client_contactperson" placeholder="请输入联系人" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">手机号</label>
<div class="layui-input-block">
<input type="text" name="supplier_phonenum" placeholder="请输入手机号" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">手机号</label>
<div class="layui-input-block">
<input type="text" name="client_phonenum" placeholder="请输入手机号" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label required">邮箱</label>
<div class="layui-input-block">
<input type="text" name="supplier_email" placeholder="请输入邮箱" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-col-md6"></div>
<label class="layui-form-label required">邮箱</label>
<div class="layui-input-block">
<input type="text" name="client_email" placeholder="请输入邮箱" value="" readonly
class="layui-input layui-disabled">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="addLine">添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="deleteLine">删除</button>
</div>
</script>
<table class="layui-hide" id="addBOM" lay-filter="addBOM"></table>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/md5/md5.js" charset="utf-8"></script>
<script src="../../../js/PublicParameters/PublicParameters.js" charset="utf-8"></script>
<script>
layui.config({
base: '../../../js/lay-module/'
}).extend({
tableEdit: 'tableEdit/tableEdit'
}).use(['table', 'tableEdit', 'form', 'layer'], function () {
var form = layui.form,
table = layui.table,
tableEdit = layui.tableEdit,
layer = layui.layer,
$ = layui.$;
var apiUrl = GetWebApiUrl();
//下拉选项array格式
//获取bom下拉框参数
//value为名称name为ID
var params = [];
$.ajax({
url: apiUrl + '/api/services/app/BOM/GetBOMParams', //请求的url地址
dataType: "json", //返回格式为json
async: false,//请求是否异步默认为异步这也是ajax重要特性
data: {}, //参数值
type: 'GET', //请求方式
success: function (req) {
//请求成功时处理
for (let index = 0; index < req.result.arrData.length; index++) {
params.push({ name: req.result.arrData[index].name, value: req.result.arrData[index].value + " " });
}
params.unshift({ name: undefined, value: "" });
},
});
var cols = table.render({
elem: '#addBOM',
skin: 'row', //边框风格
even: true, //开启隔行背景
data: [],
height: 'full-400',
toolbar: '#toolbar',
defaultToolbar: [],
cols: [[
{ type: "checkbox", width: 50 },
{ type: "numbers", title: '序号', width: 50 },
{ field: 'code', width: 150, title: '代码', align: "center", edit: "text" },
{
field: 'bom', align: 'left', title: '名称', width: 300
, event: 'bom', config: { type: 'select', data: params, verify: true }
, templet: function (d) {
if (d.bom) {
if (d.bom.value) {
return d.bom.value;
}
return d.bom;
}
return ''
}
},
{ field: 'model', width: 150, title: '规格型号', align: "center", edit: "text" },
{ field: 'unit', width: 100, title: '单位', align: "center", edit: "text" },
{ field: 'quantity', width: 100, title: '数量', align: "center", edit: "text" },
{ field: 'price', width: 100, title: '单价', align: "right", edit: "text" },
{ field: 'amount', width: 100, title: '金额', align: "right", edit: "text" },
//dateType表示日期时间格式date为“yyyy-MM-dd”
// datetime为“yyyy-MM-dd HH:ss:mm”
{
field: 'deliverydates', title: '交货日期', width: 120, event: 'deliverydates'
, config: { type: 'date', dateType: 'date', verify: { type: 'date' } }
},
{ field: 'remark', width: 430, title: '备注', align: "left", edit: "text" },
]],
limit: 999,
page: false,
skin: 'line'
}).config.cols;
/**
* 参数cols是table.render({})中的cols属性值
* aop代理是基于event点击事件进行操作的
* 因此cols中务必开启event点击事件
**/
var aopTable = tableEdit.aopObj(cols); //获取一个aop对象
/**
* 注意:
* 1、 aopTable.on('tool(xxx)',function (obj) {})
* 2、 table.on('tool(yyy)',function (obj) {})
* 如果1中的xxx与2中的yyy字符串相同时
* 不能同时用,用了会造成后调用者覆盖前调用者。
* 应该直接用1来代替2因为1中包含了2中的事件。
* 如果不相同,则可以同时使用。
**/
aopTable.on('tool(addBOM)', function (obj) {
var field = obj.field; //单元格字段
var value = obj.value; //修改后的值
var data = obj.data; //当前行旧数据
var event = obj.event; //当前单元格事件属性值
var update = {};
update[field] = value;
//把value更新到行中
obj.update(update);
/**
*说白了此obj与table.on('tool(tableEvent)',function (obj) {})
*中的obj对象是同一个所以可以如此操作。
*
* */
});
/**
* 级联下拉框 => 点击事件生成下拉框之前的回调函数
* 主要用于 => 动态获取单元格下拉数据
* tableEvent => table的lay-filter属性值
* 如示例代码所示
*/
tableEdit.on('clickBefore(addBOM)', function (obj) {
var cascadeSelectData = obj.data; //级联数据
var cascadeSelectField = obj.field; //级联字段
if (Array.isArray(cascadeSelectData)) {
cascadeSelectData = cascadeSelectData[0];
}
var result = {
data: [{ name: 1, value: '语文' }, { name: 2, value: '数学' }, { name: 3, value: '英语' }, { name: 4, value: '物理' }, { name: 5, value: '化学' }],
enabled: false //单选 true为多选
};
var result1 = {
data: [{ name: 6, value: '政治' }, { name: 7, value: '地理' }, { name: 8, value: '历史' }, { name: 9, value: '生物' }, { name: 10, value: '音乐' }],
enabled: false //单选 true为多选
};
//这里用定时器来模拟异步操作同步操作直接return即可。
setTimeout(function () {
tableEdit.callbackFn("async(addBOM)", result);
}, 500);
});
//加载供方和需方下拉框
//供方
$.ajax({
url: apiUrl + '/api/services/app/Supplier/GetAllSupplier', //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
success: function (req) {
//请求成功时处理
var src = '<option value="">直接选择或搜索选择</option>';
$.each(req.result.data, function (index, item) {
src += '<option value="' + item.id + '">' + item.supplierName + '</option>';// 下拉菜单里添加元素
//$('#id').append(new Option(item.name, item.id));// 下拉菜单里添加元素,加载速度相对较慢
});
$('#supplier').html(src);
form.render("select");//重新渲染 固定写法
},
error: function () {
/*错误信息处理*/
layer.msg("获取供方失败,请重试!");
return false;
},
});
//需方
$.ajax({
url: apiUrl + '/api/services/app/Supplier/GetAllSupplier', //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
success: function (req) {
//请求成功时处理
var src = '<option value="">直接选择或搜索选择</option>';
$.each(req.result.data, function (index, item) {
src += '<option value="' + item.id + '">' + item.supplierName + '</option>';// 下拉菜单里添加元素
//$('#id').append(new Option(item.name, item.id));// 下拉菜单里添加元素,加载速度相对较慢
});
$('#client').html(src);
form.render("select");//重新渲染 固定写法
},
error: function () {
/*错误信息处理*/
layer.msg("获取需方失败,请重试!");
return false;
},
});
//下拉框监听 供方
form.on('select(supplier)', function (data) {
clearsupplierDrop();
if (data.value != '') {
//获取所选供方详细信息
$.ajax({
url: apiUrl + '/api/services/app/Supplier/Get', //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
data: { id: data.value }, //参数值
type: "GET", //请求方式
success: function (req) {
//请求成功时处理
var Supplierdata = req.result;
form.val("addOrder", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"supplier_address": Supplierdata.address,// "name": "value"
"supplier_creditcode": Supplierdata.address,// "name": "value"
"supplier_bank": Supplierdata.address,// "name": "value"
"supplier_bankaccount": Supplierdata.address,// "name": "value"
"supplier_telnum": Supplierdata.fixedtelephone,// "name": "value"
"supplier_fax": Supplierdata.address,// "name": "value"
"supplier_contactperson": Supplierdata.contacts,// "name": "value"
"supplier_phonenum": Supplierdata.mobilephone,// "name": "value"
"supplier_email": Supplierdata.email,// "name": "value"
});
},
error: function () {
/*错误信息处理*/
layer.msg("获取所选供方信息失败,请重试!");
return false;
},
});
}
});
//下拉框监听 需方
form.on('select(client)', function (data) {
clearclientrDrop();
if (data.value != '') {
//获取所选供方详细信息
$.ajax({
url: apiUrl + '/api/services/app/Supplier/Get', //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
data: { id: data.value }, //参数值
type: "GET", //请求方式
success: function (req) {
//请求成功时处理
var clientdata = req.result;
form.val("addOrder", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"client_address": clientdata.address,// "name": "value"
"client_creditcode": clientdata.address,// "name": "value"
"client_bank": clientdata.address,// "name": "value"
"client_bankaccount": clientdata.address,// "name": "value"
"client_telnum": clientdata.fixedtelephone,// "name": "value"
"client_fax": clientdata.address,// "name": "value"
"client_contactperson": clientdata.contacts,// "name": "value"
"client_phonenum": clientdata.mobilephone,// "name": "value"
"client_email": clientdata.email,// "name": "value"
});
},
error: function () {
/*错误信息处理*/
layer.msg("获取所选需方信息失败,请重试!");
return false;
},
});
}
});
//清除供方下拉框数据
function clearsupplierDrop() {
form.val("addOrder", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"supplier_address": '',
"supplier_creditcode": '',
"supplier_bank": '',
"supplier_bankaccount": '',
"supplier_telnum": '',
"supplier_fax": '',
"supplier_contactperson": '',
"supplier_phonenum": '',
"supplier_email": '',
});
}
//清除需方下拉框数据
function clearclientrDrop() {
form.val("addOrder", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"client_address": '',
"client_creditcode": '',
"client_bank": '',
"client_bankaccount": '',
"client_telnum": '',
"client_fax": '',
"client_contactperson": '',
"client_phonenum": '',
"client_email": '',
});
}
/**
* toolbar监听事件
*/
table.on('toolbar(addBOM)', function (obj) {
if (obj.event === 'addLine') { // 监听添加操作
var Data = table.cache["addBOM"];
var datas = {
"code": "", "bom": null, "model": "", "unit": "", "quantity": "", "price": "", "amount": "", "deliverydates": "", "remark": ""
}
Data.push(datas);
table.reload('addBOM', {
data: Data
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'deleteLine') { // 监听删除操作
var checkStatus = table.checkStatus('addBOM');
if (checkStatus.data.length == 0) {
layer.alert('请选择至少一条数据!');
return false;
}
var tableDT = table.cache["addBOM"];
var tableArr = [];
for (var i = 0; i < tableDT.length; i++) {//遍历表格缓存数组
var btnObj = tableDT[i];
if (btnObj.LAY_CHECKED) {//条件:选中
tableDT.splice(i, 1);//移除后后造成数组下标索引发生变化所以下面需要i--
i--;
}
}
tableArr = tableDT;
table.reload("addBOM", {
data: tableArr // 将新数据重新载入表格
});
}
});
//监听提交
form.on('submit(saveBtn)', function (data) {
layer.confirm('确认保存吗?', function () {
var apiUrl = GetWebApiUrl();
var CurrUserInfo = layui.sessionData('CurrUserInfo');
var materialNum = data.field.materialNum;
if (materialNum.length == 1) {
materialNum = '00' + materialNum;
}
else if (materialNum.length == 1) {
materialNum = '0' + materialNum;
}
$.ajax({
url: apiUrl + "/api/services/app/MaterialNumber/CreateMaterialNumber", //请求的url地址
dataType: "json", //返回格式为json
//async: false,//请求是否异步默认为异步这也是ajax重要特性
contentType: 'application/json',
data: JSON.stringify({
materialNum: materialNum,
remark: data.field.remark,
createTime: getDatetime(),
createUserID: CurrUserInfo.data.userid,
createUserName: CurrUserInfo.data.userName,
isDelete: 0
}), //参数值
type: "POST", //请求方式
success: function (req) {
//请求成功时处理
if (req.result.code == 1) {
layer.msg('保存成功', { time: 1000 }, function () {
// 关闭弹出层
var iframeIndex = parent.layer.getFrameIndex(window.name);
// 刷新父页面
window.parent.location.reload();
parent.layer.close(iframeIndex);
});
}
else if (req.result.code == 2) {
layer.msg(req.result.msg);
return false;
}
else {
layer.msg(req.result.msg);
return false;
}
},
error: function () {
/*错误信息处理*/
layer.msg("保存失败,请重试!");
return false;
},
});
return false;
});
return false;
});
});
</script>
</body>
</html>