<style>
|
#invoice-info {
|
padding: 20px 25px 25px 0;
|
}
|
|
#invoice-info .layui-treeSelect .ztree li a, .ztree li span {
|
margin: 0 0 2px 3px !important;
|
}
|
#invoice-info #data-permission-tree-block {
|
border: 1px solid #eee;
|
border-radius: 2px;
|
padding: 3px 0;
|
}
|
#invoice-info .layui-treeSelect .ztree li span.button.switch {
|
top: 1px;
|
left: 3px;
|
}
|
|
</style>
|
<div class="layui-fluid" id="invoice-info">
|
<blockquote class="layui-elem-quote blue-border">抬头信息</blockquote>
|
<form class="layui-form" action="" lay-filter="invoice-info-form">
|
<div class="layui-card">
|
<div class="layui-form-item febs-hide">
|
<label class="layui-form-label febs-form-item-require">id：</label>
|
<div class="layui-input-block">
|
<input type="text" name="id">
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">开票类型：</label>
|
<div class="layui-input-block">
|
<input type="radio" name="type" value="INDIVIDUAL" title="个人" checked="" readonly>
|
<input type="radio" name="type" value="ORGANIZATION" title="单位" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">名称：</label>
|
<div class="layui-input-block">
|
<input type="text" name="name" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">识别号：</label>
|
<div class="layui-input-block">
|
<input type="text" name="taxpayerId" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">地址：</label>
|
<div class="layui-input-block">
|
<input type="text" name="address" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">电话：</label>
|
<div class="layui-input-block">
|
<input type="text" name="telephone" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">开户银行：</label>
|
<div class="layui-input-block">
|
<input type="text" name="bankName" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">银行账号：</label>
|
<div class="layui-input-block">
|
<input type="text" name="bankAccount" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item">
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">订单编号：</label>
|
<div class="layui-input-block">
|
<input type="text" name="orderNo" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-col-lg6">
|
<label class="layui-form-label febs-form-item-require">订单金额：</label>
|
<div class="layui-input-block">
|
<input type="text" name="amount" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">发票：</label>
|
<div class="layui-input-block">
|
<div class="layui-upload">
|
<button type="button" class="layui-btn layui-btn-normal layui-btn" id="test2">上传发票</button>
|
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
|
<div class="layui-upload-list" id="demo2"></div>
|
</blockquote>
|
<div class="layui-word-aux">双击图片删除</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item febs-hide">
|
<label class="layui-form-label">发票链接：</label>
|
<div class="layui-input-block">
|
<input type="text" id="invoiceUrl" lay-verify="required" name="invoiceUrl" autocomplete="off" class="layui-input" readonly>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10 layui-form-item" style="text-align: center;">
|
<button class="layui-btn layui-btn-normal" lay-submit=""
|
lay-filter="invoice-detail-form-submit" id="submit">保存</button>
|
</div>
|
</div>
|
</form>
|
</div>
|
<blockquote class="layui-elem-quote blue-border">订单详情</blockquote>
|
<div class="layui-card-body febs-table-full">
|
<table id="invoiceOrderItemTable" lay-filter="invoiceOrderItemTable"></table>
|
</div>
|
|
<script data-th-inline="javascript">
|
layui.use(['upload','febs', 'form', 'formSelects', 'validate', 'treeSelect', 'table','eleTree'], function () {
|
var $ = layui.$,
|
febs = layui.febs,
|
layer = layui.layer,
|
table = layui.table,
|
formSelects = layui.formSelects,
|
treeSelect = layui.treeSelect,
|
form = layui.form,
|
eleTree = layui.eleTree,
|
invoiceDetail = [[${invoiceDetail}]],
|
$view = $('#invoice-info'),
|
validate = layui.validate,
|
upload = layui.upload,
|
_deptTree;
|
|
form.render();
|
|
table.render({
|
elem: '#invoiceOrderItemTable'
|
,cols: [[ //表头
|
{field: 'skuName', title: '货物、应税劳务、服务名称', minWidth: 300,align:'left'},
|
{field: 'skuName', title: '规格型号', minWidth: 150,align:'left'},
|
{field: 'unit', title: '单位', minWidth: 100,align:'left'},
|
{field: 'cnt', title: '数量', minWidth: 100,align:'left'},
|
{field: 'price', title: '单价', minWidth: 100,align:'left'},
|
{field: 'amount', title: '金额', minWidth: 150,align:'left'}
|
]]
|
,data: []
|
});
|
dicDataReq("invoiceOrderItemTable");
|
function dicDataReq(type) {
|
$.get(ctx + 'admin/order/invoiceItemList/', function (r) {
|
if (r.code === 200) {
|
var data = r.data;
|
table.reload('invoiceOrderItemTable', {
|
data : data
|
});
|
}
|
});
|
}
|
// 表格初始化
|
initInvoiceDetailValue();
|
function initInvoiceDetailValue() {
|
if(invoiceDetail.invoiceUrl != null || invoiceDetail.invoiceUrl != ''){
|
$('#demo2').append('<img src="'+ invoiceDetail.invoiceUrl +'" class="layui-upload-img" style="width: 100px">')
|
$("#invoiceUrl").val(invoiceDetail.invoiceUrl);
|
}
|
form.val("invoice-info-form", {
|
"id": invoiceDetail.id,
|
"type": invoiceDetail.type,
|
"name": invoiceDetail.name,
|
"taxpayerId": invoiceDetail.taxpayerId,
|
"address": invoiceDetail.address,
|
"telephone": invoiceDetail.telephone,
|
"bankName": invoiceDetail.bankName,
|
"bankAccount": invoiceDetail.bankAccount,
|
"orderNo": invoiceDetail.orderNo,
|
"invoiceUrl": invoiceDetail.invoiceUrl,
|
"amount": invoiceDetail.amount
|
});
|
}
|
|
//图片上传
|
upload.render({
|
elem: '#test2'
|
,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
|
// ,multiple: true
|
,accept: 'file'
|
,before: function(obj){
|
//预读本地文件示例，不支持ie8
|
obj.preview(function(index, file, result){
|
if ($("#invoiceUrl").val()) {
|
$('#demo2').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
|
} else {
|
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
|
}
|
});
|
}
|
,done: function(res){
|
var item = this.item;
|
//如果上传失败
|
if(res.code !== 0){
|
return layer.msg('上传失败');
|
}
|
$("#invoiceUrl").val(res.data.src);
|
layer.msg('上传完毕', {icon: 1});
|
imgUnBind(".single-image");
|
imgSingleBind();
|
}
|
,error: function(err){
|
return layer.msg('上传失败');
|
}
|
});
|
|
function imgUnBind(className) {
|
$(className).each(function() {
|
$(this).unbind('dblclick');
|
})
|
}
|
|
function imgSingleBind() {
|
$(".single-image").each(function(index, element) {
|
$(this).on("dblclick", function() {
|
var imgThumb = $(".single-image")[index];
|
$(imgThumb).remove();
|
$("#invoiceUrl").val("");
|
|
imgUnBind(".single-image");
|
imgSingleBind();
|
});
|
})
|
}
|
|
form.on('submit(invoice-detail-form-submit)', function (data) {
|
febs.post(ctx + 'admin/order/addInvoiceUrl', data.field, function () {
|
layer.closeAll();
|
febs.alert.success('操作成功');
|
$('#febs-invoice').find('#query').click();
|
});
|
return false;
|
});
|
});
|
</script>
|
