html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-body">
<div class="fixed-table-toolbar">
<table class="table table-striped table-bordered table-hover table-condensed"
style="width: 90%;margin-left: 5%;margin-top: 20px;border: 1px solid #ccc;background-color: cornsilk;">
<!-- 隐藏流程图显示所需参数 -->
<input type="hidden" id="procDefId" th:value="${procDefId}"/>
<input type="hidden" id="execId" th:value="${execId}"/>
<input type="hidden" id="hiddenFujian" th:value="${resultBean.data.pathVos}"/>
<thead style="font-size: 14px;">
<tr class="text-center">
<th colspan="4" class="text-center" style="position: relative;">
发货申请详细信息
<span class="flexTable iconfont icon-jiantou" style="cursor: pointer; position:absolute;right:10px;top:8px;font-size:14px;font-weight:500;">收起</span>
</th>
</tr>
</thead>
<tbody class="tableShenQing" style="font-size: 14px;">
<tr>
<td><b>商业公司:</b></td>
<td id="d_applicationCustomName" th:text="${resultBean.data.approvalInfo.customerName}"></td>
<td><b>申请主题:</b></td>
<td id="d_applicationTitle" th:text="${resultBean.data.approvalInfo.theme}"></td>
</tr>
<tr>
<td><b>申请人:</b></td>
<td id="d_applicationer" th:text="${resultBean.data.approvalInfo.name}"></td>
<td><b>申请时间:</b></td>
<td id="d_applicationDate" th:text="${#dates.format(resultBean.data.approvalInfo.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
</tr>
<tr>
<td style="width: 15%;"><b>是否上传汇款单:</b></td>
<td style="width: 35%;" id="d_isRemittance" th:text="${resultBean.data.approvalInfo.isRemittance}==1?已上传:未上传"></td>
<td style="width: 15%;"><b>汇款类型:</b></td>
<td style="width: 35%;" id="d_remittanceAccountPeriod" th:text="${resultBean.data.approvalInfo.remittanceType}"></td>
</tr>
<tr>
<td style="width: 15%;"><b>流水号:</b></td>
<td style="width: 35%;" id="d_flowNo" th:text="${resultBean.data.approvalInfo.flowNo}"></td>
<td style="width: 15%;"><b>要求发货时间:</b></td>
<td style="width: 35%;" id="d_deliveryTimeRequired" th:text="${#dates.format(resultBean.data.approvalInfo.deliveryTimeRequired, 'yyyy-MM-dd')}"></td>
</tr>
<tr>
<td style="width: 15%;"><b>收货人:</b></td>
<td style="width: 35%;" id="d_receiver" th:text="${resultBean.data.approvalInfo.consignee}"></td>
<td style="width: 15%;"><b>收货地址:</b></td>
<td style="width: 35%;" id="d_receiveAddress" th:text="${resultBean.data.approvalInfo.address}"></td>
</tr>
<tr>
<td style="width: 15%;"><b>联系方式:</b></td>
<td style="width: 35%;" id="d_telephone" th:text="${resultBean.data.approvalInfo.telephone}"></td>
<td style="width: 15%;"><b>到站:</b></td>
<td style="width: 35%;" id="d_arriveStation" th:text="${resultBean.data.approvalInfo.arriveStation}"></td>
</tr>
<tr style="height:20px;">
<td ><b>备注:</b></td>
<td colspan="3" id="d_comment" th:text="${resultBean.data.approvalInfo.remark}"></td>
</tr>
</tbody>
</table>
<div style="text-align:center;position:relative;margin:0 5.1%;font:700 15px/20px '';">产品详情
<span class="flexProduct iconfont icon-jiantou" style="cursor: pointer; position:absolute;right:10px;top:0;font-size:14px;font-weight:500;">收起</span>
</div>
<table class="table table-striped table-bordered table-hover table-condensed" border="1px solid #ccc"
style="width: 90%;margin-left: 5%;margin-top: 20px;border: 1px solid #ccc;background-color: cornsilk;">
<thead>
<tr class="text-center">
<td><b>产品名称</b></td>
<td><b>药品包装规格</b></td>
<td><b>药品价格</b></td>
<td><b>数量</b></td>
</tr>
</thead>
<tbody style="font-size: 14px;" id="aplyDetail" class="productDetails" th:each="approvalProductInfo : ${resultBean.data.approvalProductInfos}">
<tr class="text-center">
<td style="width: 15%;" th:text="${approvalProductInfo.productName}"></td>
<td style="width: 35%;" th:text="${approvalProductInfo.packingSpecification}"></td>
<td style="width: 15%;" th:text="${approvalProductInfo.price}"></td>
<td style="width: 35%;" th:text="${approvalProductInfo.amount}"></td>
</tr>
<tr class="text-center" style="height:20px;">
<td>订单实际金额(元)</td>
<td th:text="${resultBean.data.approvalInfo.totalAmount}"></td>
<td>折扣</td>
<td th:text="${resultBean.data.approvalInfo.discount}"></td>
</tr>
<tr class="text-center" style="height:20px;">
<td colspan="3" >应付金额(元)</td>
<td th:text="${resultBean.data.approvalInfo.realAmount}"></td>
</tr>
</tbody>
</table>
<div id="displayphoto" style="width: 90%;margin-left: 5%;margin-top:20px;border: 1px solid #ccc;display:block;">
<h3 style="width: 100%;text-align:center;font-size:15px;">审批流程图</h3>
<img id="activityPhoto" style="width: 98%;display:block;margin-top: -20px;margin-bottom: 20px"/>
</div>
<table class="table table-striped table-bordered table-hover table-condensed" border="1px solid #ccc"
style="width: 90%;margin-left: 5%;margin-top: 20px;border: 1px solid #ccc;background-color: cornsilk;">
<caption style="font-size: 16px;text-align:center;font-family:'微软雅黑';color:black;">审批明细</caption>
<thead>
<tr class="text-center">
<td><b>申请/审批人</b></td>
<td><b>是否同意</b></td>
<td><b>审批意见</b></td>
<td><b>申请/审批时间</b></td>
</tr>
</thead>
<tbody style="font-size: 14px;" id="approveDetail" th:each="processvar : ${resultBean.data.processInfos}">
<tr class="text-center">
<td th:text="${processvar.username}"></td>
<td th:text="${processvar.pass eq '1' ? '是' : (processvar.pass eq '0' ? '否': '')}"></td>
<td th:text="${'' eq processvar.opinion ? '无' : processvar.opinion}"></td>
<td th:text="${processvar.time}"></td>
</tr>
</tbody>
</table>
<!-- 附件 -->
<h3 style="margin-top:10px;margin-left:5%;text-align: left;" id="fujian">附件：</h3>
<div id="displayfujianphoto" style="width: 90%;min-height:255px;margin-left: 5%;margin-top: 20px;border: 1px solid #ccc;display:block;">
<!-- <img id="fujianPhoto" /> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/delivery/global.js">
</script>
<script type="text/javascript" src="/js/appjs/delivery/shipments/businessShipmentsDetail.js"></script>
<script th:inline="javascript">
/* var sasas = [[${resultBean.data.pathVos}]];
var imgurl = "http://localhost:8090/DeliverySystem"+sasas[0].path;
$("#fujianPhoto").attr('src',imgurl);
console.log(sasas);
console.log(imgurl);
*/
//附件展示
var baseUrl = window.baseRequestUrl;
var enclosureUrl = [[${resultBean.data.pathVos}]];
$("#displayfujianphoto").empty();
var html1 = '<ul id="jq22" style="list-style:none;margin:1% 0;display: flex;">';
if (enclosureUrl != null && enclosureUrl.length > 0)
{
$("#fujian").css("display","");
//var html2 = '<ul style="margin:1% 0">';html2 += '</ul>';
for ( var i = 0; i < enclosureUrl.length; i++)
{
html1 += '<li><span style="display: flex;flex-direction: column;align-items: center;line-height: 30px;width: 200px;text-align: center;">'
+ enclosureUrl[i].type
+ '</span><img id="imgShow'+i
+'" style="width:200px;height:200px;border:1px solid #eee;text-align:center;margin-right:10px;float:left;" data-original="'
+ window.baseRequestUrl
+ enclosureUrl[i].path
+ '" src="'
+ baseUrl
+ enclosureUrl[i].path
+ '" alt="附件'
+ (i + 1)
+ '" title="附件'
+ (i + 1) + '"></li>';
}
html1 += '</ul>';
} else {
$("#fujian").css("display","none");
$("#displayfujianphoto").css("display","none");
}
//$("#displayfujianphoto").append(html2);
$("#displayfujianphoto").append(html1);
</script>
</body>
</html>js:
global.js
// 本地全局存储请求后台链接地址前半部分
//window.baseRequestUrl="http://localhost:8090";
window.baseRequestUrl="https://www.tdaifu.net/DeliverySystem/";
//查询商业公司下拉
function initBusinessOption(optionId) {
var url = "/basic/businessCompany/getBusinessOptions";
$.ajax({
type : "POST",
url : url,
async : false,
/*data : {
},*/
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].id
+ '\'>' + data[i].customerName + '</option>';
}
$(optionId).append(options);
}
});
}
//所有事业部下拉
function initDepartmentOption(optionId) {
var url = "/basic/department/departmentOption";
$.ajax({
type : "POST",
url : url,
async : false,
/*data : {
},*/
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].code
+ '\'>' + data[i].name + '</option>';
}
$(optionId).append(options);
}
});
}
//根据登录人部门获取事业部下拉
function initDivisionOption(optionId) {
var url = "/system/sysDept/getDepartmentOptionsByCode";
$.ajax({
type : "POST",
url : url,
async : false,
success : function(data) {
var options = '';
if(data.code == 0){
var list = data.data;
if(list.length > 1){
options = options + '<option value=\'\'>请选择</option>';
}
for (var i = 0; i < list.length; i++) {
options = options + '<option value=\'' + list[i].code
+ '\'>' + list[i].name + '</option>';
}
$(optionId).append(options);
}else{
parent.layer.msg("加载事业部下拉失败");
}
}
});
}
//字典表下拉
function initDataOption(type,optionId) {
var url = "/common/dict/list/"+type;
$.ajax({
url : url,
async : false,
type : "post",
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].value
+ '\'>' + data[i].name + '</option>';
}
$(optionId).append(options);
}
});
}
//字典表单选
function initDataRadio(type,divId,radioName) {
var url = "/common/dict/list/"+type;
$.ajax({
url : url,
async : false,
type : "post",
success : function(data) {
if(data.length > 0){
for (var i = 0; i < data.length; i++) {
var radio = '<label class="radio-inline">' +'<input id="radio"+i type="radio" style="transform: scale(1.5,1.5);" name=' +radioName+ ' value=\'' + data[i].value
+ '\'/>'+ data[i].name + '</label>';
$(divId).append(radio);
}
}else{
parent.layer.msg("查询数据字典为空");
}
}
});
}
//产品下拉(一般)
function initProductOption(name,optionId) {
var url = "/basic/product/getProductOptions";
$.ajax({
url : url,
async : false,
type : "post",
data:{productName : name},
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].id
+ '\'>' + data[i].productName + '</option>';
}
$(optionId).append(options);
}
});
}
//根据事业部、角色、人员名称、是否商务，省份查询人员
function initStaffByDept(deptCode,name,userRole,province,businessFlag,optionId) {
var url = "/sys/user/getStaffByDept";
$.ajax({
url : url,
async : false,
type : "post",
data:{deptCode:deptCode,
userRole:userRole,
name : name,
province : province,
businessFlag : businessFlag},
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].userId
+ '\'>' + data[i].name + '</option>';
}
$(optionId).append(options);
}
});
}
//所有省份
var provinceOptions= [
{
name : '北京'
},
{
name : '上海'
},
{
name : '天津'
},
{
name : '重庆'
},
{
name : '四川'
},
{
name : '贵州'
},
{
name : '云南'
},
{
name : '西藏'
},
{
name : '河南'
},
{
name : '湖北'
},
{
name : '湖南'
},
{
name : '广东'
},
{
name : '广西'
},
{
name : '陕西'
},
{
name : '甘肃'
},
{
name : '青海'
},
{
name : '宁夏'
},
{
name : '新疆'
},
{
name : '河北'
},
{
name : '山西'
},
{
name : '内蒙古'
},
{
name : '江苏'
},
{
name : '浙江'
},
{
name : '安徽'
},
{
name : '福建'
},
{
name : '江西'
},
{
name : '山东'
},
{
name : '辽宁'
},
{
name : '吉林'
},
{
name : '黑龙江'
},
{
name : '海南'
}, {
name : '台湾'
}, {
name : '香港'
}, {
name : '澳门'
}, {
name : '京津冀'
}, {
name : '甘宁青西蒙'
}, {
name : '黑蒙'
}, {
name : '吉蒙'
}, {
name : '辽蒙'
} ];
//省份下拉
function initProvinceOption(optionId) {
var options ='<option value=\'\'>请选择省份</option>';
for (var i = 0; i < provinceOptions.length; i++) {
options = options + '<option value=\'' + provinceOptions[i].name
+ '\'>' + provinceOptions[i].name + '</option>';
}
$(optionId).append(options);
}
//获取总监和大区经理下拉
function initManager(deptId,reserveFiled2,optionId){
var url = "/sys/user/getManager";
$.ajax({
type : "POST",
url : url,
async : false,
data : {
deptId:deptId,
reserveFiled2 :reserveFiled2
},
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options = options + '<option value=\'' + data[i].userId
+ '\'>' + data[i].name + '</option>';
}
$(optionId).append(options);
}
});
}
//获取药厂下拉,编辑用
function initFactory(optionId,flag) {
var url = "/basic/medicineFactory/factorySelect";
$.ajax({
url : url,
type : "POST",
async : false,
success : function(data) {
var options = '';
//flag不为空代表多选
if(flag == undefined || flag == '' ){
options = '<option value=\'\'>请选择</option>';
}
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].id + '">' + data[i].name
+ '</option>'
}
$(optionId).append(options);
}
});
}
//加载药厂下拉,新增用，有搜素样式，可模糊匹配
function loadFactoryList(optionId) {
var url = "/basic/medicineFactory/factorySelect";
$.ajax({
url : url,
type : "POST",
async : false,
success : function(data) {
var options = '<option value=\'\'>请选择</option>';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i].id + '">' + data[i].name
+ '</option>'
}
$(optionId).append(options);
//根据最前面的名称匹配
$(optionId).chosen({
maxHeight : 200
});
// 点击事件
$(optionId).on('change', function(e, params) {
console.log(params.selected);
var opt = {
query : {
type : params.selected,
}
}
$('#exampleTable').bootstrapTable('refresh', opt);
});
}
});
}
//列表用的药厂产品下拉
function getFactoryAndProList(factoryOptionId,proOptionId,deptId,factoryId) {
var dept = $(deptId).val();
var factory = $(factoryId).val();
var url = "/basic/medicineFactory/getFactoryAndProList";
$.ajax({
url : url,
type : "POST",
async : false,
data :{
dept : dept,
factoryId:factory
},
success : function(data) {
//药厂下拉
if(factoryOptionId != ""){
$(factoryOptionId).empty();
var factoryOptions = '';
var factoryList = data.factoryList;
if(factoryList.length > 1){
factoryOptions += '<option value=\'\'>请选择</option>';
}
for (var i = 0; i < factoryList.length; i++) {
factoryOptions += '<option value="' + factoryList[i].id + '">' + factoryList[i].factoryName
+ '</option>'
}
$(factoryOptionId).append(factoryOptions);
}
if(proOptionId != ''){
//产品下拉数据加载
$(proOptionId).empty();
var proOptions = '<option value=\'\'>请选择</option>';
var proList = data.proList;
for (var i = 0; i < proList.length; i++) {
proOptions = proOptions + '<option value=\'' + proList[i].id
+ '\'>' + proList[i].productName + '</option>';
}
$(proOptionId).append(proOptions);
}
}
});
}
//判空处理
function isNullOrUndefined(str){
if(str == null || str == undefined || (str != "" && str.indexOf("请选择") > -1)){
return "";
}else{
return str;
}
}
//判断省市区是否选择
function judgeThreeLink(pro,city,area,address){
//公司地址
var pro = $(pro).val();
var city = $(city).val();
var area = $(area).val();
var address = $(address).val();
var addressTemp = "";
if(pro||city||area){
if(pro != "请选择省份"){
addressTemp += pro;
}else{
parent.layer.msg("省份不能为空");
return;
}
if(city != "请选择城市"){
addressTemp += city;
}else{
parent.layer.msg("市不能为空");
return;
}
if(area !="请选择区县"){
addressTemp += area;
}else{
parent.layer.msg("区不能为空");
return;
}
}
if(address == undefined || address == null||address == ""){
parent.layer.msg("详细地址不能为空");
return;
}
addressTemp += ','+address;
return addressTemp;
}
//地址分开（省市区，详细地址）
function addressSplit(addressId,before,after){
//控制地址，不能修改
var receiveInvoiceAddress = $(addressId).val();
if(receiveInvoiceAddress.indexOf(",")!=-1){
var tem = receiveInvoiceAddress.split(",");
$(before).val(tem[0]);
if(tem[1] != undefined){
$(after).val(tem[1]);
}
}
}
/**
* 时间格式化
* @param fmt
* @returns
*/
//对Date的扩展，将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
//例子：
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
//(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
//当列字段长度超过2悬浮
function operateOpinionFormatter(value, row, index){
value = isNullOrUndefined(value);
if(value != '' && value.length>2){
return "<span title='"+value+"'>"+value.substring(0,2)+"..."+"</span>";
}else{
return "<span title='"+value+"'>"+value+"</span>";
}
}
//悬浮样式
function formatTableUnit(value, row, index) {
return {
css: {
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap"
}
};
}
businessShipmentsDetail.js
var prefix = "/shipments/businessShipments"
var photoPrefix = window.baseRequestUrl;
$(function() {
displayPhoto();
var len = $("#jq22 li").length;
if(len > 0){
//多图片路径集合
var arr0 = [];
for(var i=0;i<len;i++){
arr0.push({
"alt" : "",
"pid" : "1"+i, // 图片id
"src" : $('#imgShow'+i)[0].src,// 原图地址
});
}
//用ul代理img的点击方法
$("#jq22").on('click', 'img', function() {
layer
.photos({
photos : {
"title" : "附件", // 相册标题
"id" : 122, // 相册id
"start" : 0, // 初始显示的图片序号，默认0
"data" : arr0
}
});
});
}
});
/* 发货申请表格收缩展开 */
$(".flexTable").click(function(){
if($(".tableShenQing").css("display") != "none"){
$(".tableShenQing").css("display","none");
$(".flexTable").html("展开");
$(".flexTable").removeClass("icon-jiantou")
$(".flexTable").addClass("icon-jiantou1");
}else{
$(".tableShenQing").css("display","table-row-group");
$(".flexTable").html("收起");
$(".flexTable").removeClass("icon-jiantou1")
$(".flexTable").addClass("icon-jiantou");
}
});
/* 产品表格收缩展开 */
$(".flexProduct").click(function(){
if($(".productDetails").css("display") != "none"){
$(".productDetails").css("display","none")
$(".flexProduct").html("展开")
$(".flexProduct").removeClass("icon-jiantou")
$(".flexProduct").addClass("icon-jiantou1");
}else{
$(".productDetails").css("display","table-row-group")
$(".flexProduct").html("收起")
$(".flexProduct").removeClass("icon-jiantou1")
$(".flexProduct").addClass("icon-jiantou");
}
})
//展示流程图
function displayPhoto()
{
var procDefId = $("#procDefId").val();
var execId = $("#execId").val();
url = "/activiti/task/trace/photo/"+procDefId+'/'+execId;
if(procDefId == 'undefined' || procDefId == '' || procDefId == null){
$("#displayphoto").css('display','none');
return false;
}else{
$("#displayphoto").css('display','block');
$("#activityPhoto").attr('src',url);
$('#activityPhoto').attr('src', url).on('click', function() {
layer
.photos({
photos : {
"title" : "流程图", // 相册标题
"id" : url, // 相册id
"start" : 0, // 初始显示的图片序号，默认0
"data" : [ // 相册包含的图片，数组格式
{
"alt" : "",
"pid" : url, // 图片id
"src" : url, // 原图地址
"thumb" : url //缩略图地址
} ]
}
});
});
}
}
/*//签呈附件展示
enclosureUrl = json.obj.actualEcList;
$(".affix").empty();
var html1 = '<ul id="jq22">';
if (enclosureUrl != null
&& enclosureUrl.length > 0) {
$("#fujian").css("display",
"");
var html2 = '<ul style="margin:1% 0">';
for ( var i = 0; i < enclosureUrl.length; i++) {
let
plenth = enclosureUrl[i].enclosureUrl
.lastIndexOf(".");
let
strPostfix = enclosureUrl[i].enclosureUrl
.substring(
plenth + 1,
this.length);
let
type = dugeType(strPostfix);
if (type == "image") {
html1 += '<li><img style="width:200px;height:200px;border:1px solid #eee;text-align:center;margin-right:10px;float:left;" data-original="'
+ baseUrl
+ enclosureUrl[i].enclosureUrl
+ '" src="'
+ baseUrl
+ enclosureUrl[i].enclosureUrl
+ '" alt="附件'
+ (i + 1)
+ '" title="附件'
+ (i + 1)
+ '"></li>';
} else {
html2 += '<img style="width:20px;height:20px" src="../imgs/fujian/'
+ type
+ '.png"><a href='
+ baseUrl
+ enclosureUrl[i].enclosureUrl
+ ' target="_blank" style="margin-right:5%" download="'
+ json.obj.addCustomerName
+ '-'
+ enclosureUrl[i].id
+ '.'
+ strPostfix
+ '">'
+ enclosureUrl[i].id
+ '.'
+ strPostfix
+ '</a></br>';
}
}
html1 += '</ul>';
html2 += '</ul>';
} else {
$("#fujian").css("display",
"none");
}
$(".affix").append(html2);
$(".affix").append(html1);
var viewer = new Viewer(
document
.getElementById('jq22'),
{
url : 'data-original'
});*/