9 changed files with 484 additions and 3 deletions
@ -0,0 +1,427 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > |
||||
|
<head> |
||||
|
<th:block th:include="include :: header('售后通知单详情')" /> |
||||
|
<th:block th:include="include :: datetimepicker-css" /> |
||||
|
<th:block th:include="include :: summernote-css" /> |
||||
|
<th:block th:include="include :: select2-css" /> |
||||
|
<link th:href="@{/ajax/libs/element-ui/element-ui.css}" rel="stylesheet"/> |
||||
|
</head> |
||||
|
<body class="white-bg"> |
||||
|
<div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content"> |
||||
|
<form class="form-horizontal m" id="form-aftersalesOrder-edit" th:object="${detail}"> |
||||
|
<input name="aftersalesOrderId" th:field="*{aftersalesOrderId}" type="hidden"> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">售后单号：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="aftersalesOrderCode" th:field="*{aftersalesOrderCode}" class="form-control" type="text"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">销售单号：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="salesOrderCode" th:field="*{salesOrderCode}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">客户ID：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="customerId" th:field="*{customerId}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">客户名称：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="customerName" th:field="*{customerName}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">公司地址：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="companyAddress" th:field="*{companyAddress}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">收货联系人：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="deliveryName" th:field="*{deliveryName}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">收货电话：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="deliveryNumber" th:field="*{deliveryNumber}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-3 control-label">客户要求出发日期：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<div class="input-group date"> |
||||
|
<input name="startDate" th:value="${#dates.format(detail.startDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" disabled> |
||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<label class="col-sm-4 control-label">备注：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<input name="remark" th:field="*{remark}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-row"> |
||||
|
<div class="col-sm-12 select-table table-striped"> |
||||
|
<h3 class="mb-4">选择设备</h3> |
||||
|
<table id="bootstrap-table"></table> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<h3 class="mb-4">派单</h3> |
||||
|
<label class="col-sm-3 control-label">售后员：</label> |
||||
|
<div class="col-sm-9"> |
||||
|
<input name="aftersalesName" th:field="*{aftersalesName}" class="form-control" type="text" readonly> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<h3 class="mb-4">售后报告</h3> |
||||
|
|
||||
|
<!-- 服务内容 --> |
||||
|
<div class="form-row mb-4"> |
||||
|
<label class="col-sm-3 control-label">服务内容：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<textarea name="serviceContent" class="form-control" readonly>[[*{serviceContent}]]</textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 用户评价 --> |
||||
|
<div class="form-row"> |
||||
|
<label class="col-sm-4 control-label">用户评价：</label> |
||||
|
<div class="col-sm-8"> |
||||
|
<el-upload |
||||
|
:action="fileUploadUrl" |
||||
|
:on-success="uploadSuccess" |
||||
|
:file-list="fileList" |
||||
|
:limit="5" |
||||
|
list-type="picture" |
||||
|
accept=".jpg,.png" |
||||
|
multiple |
||||
|
:before-remove="preventDeletion"> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
<input id="photoAttachId" name = "photoAttachId" hidden th:field="*{photoAttachId}"> |
||||
|
<input id="fileIdStr" type="text" name="fileIdStr" th:field="*{fileIdStr}" hidden> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
|
||||
|
</div> |
||||
|
<th:block th:include="include :: footer" /> |
||||
|
<th:block th:include="include :: datetimepicker-js" /> |
||||
|
<th:block th:include="include :: summernote-js" /> |
||||
|
<th:block th:include="include :: select2-js" /> |
||||
|
<script th:src="@{/ajax/libs/vue/vue.js}"></script> |
||||
|
<script th:src="@{/ajax/libs/element-ui/element-ui.js}"></script> |
||||
|
<script th:inline="javascript"> |
||||
|
|
||||
|
var emergencyDegreeDatas = [[${@dict.getType('aftersales_emergency_degree')}]]; |
||||
|
|
||||
|
var prefix = ctx + "aftersales/aftersalesOrder"; |
||||
|
var detail = [[${detail}]]; |
||||
|
$("#form-aftersalesOrder-edit").validate({ |
||||
|
focusCleanup: true |
||||
|
}); |
||||
|
|
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
data: function() { |
||||
|
return { |
||||
|
fileList: [], |
||||
|
fileUploadUrl: ctx + "common/uploadSingleFile", |
||||
|
fileDeleteUrl: ctx + "common/deleteFile", |
||||
|
getListByAttachIdUrl: ctx + "system/attach/file/getListByAttachId", |
||||
|
fileIdList:[], |
||||
|
removeFileIdList:[], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
// 控制下拉框选中 |
||||
|
// var materialType = $("#materialType").val(); |
||||
|
// $("#selectMaterialType").val(materialType).trigger("change"); |
||||
|
|
||||
|
var that = this; |
||||
|
// 页面渲染完成，可以执行需要的操作 |
||||
|
console.log('页面已渲染完成'); |
||||
|
console.log($("#id").val()); |
||||
|
console.log($("#photoAttachId").val()); |
||||
|
var attachId = $("#photoAttachId").val(); |
||||
|
if(attachId){ |
||||
|
$.ajax({ |
||||
|
type: "get", |
||||
|
url: that.getListByAttachIdUrl, |
||||
|
data: {attachId:attachId}, |
||||
|
cache: false, |
||||
|
async: false, // 设置成同步 |
||||
|
dataType: 'json', |
||||
|
success: function(result) { |
||||
|
if (result.code == web_status.SUCCESS) { |
||||
|
result.data.forEach((item) => { |
||||
|
that.fileIdList.push(item.id); |
||||
|
that.fileList.push({name: item.name, url: item.url, attachFileId: item.id,isBind:true}); |
||||
|
}); |
||||
|
} else { |
||||
|
$.modal.msgError(result.msg); |
||||
|
} |
||||
|
}, |
||||
|
error: function(error) { |
||||
|
$.modal.msgError("获取附件失败。"); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
uploadSuccess(response, file, fileList) { |
||||
|
console.log(response); |
||||
|
if(response.code == web_status.SUCCESS){ |
||||
|
var attachFileId = response.data.id; |
||||
|
file.attachFileId = attachFileId; |
||||
|
file.isBind = false; |
||||
|
this.fileIdList.push(attachFileId); |
||||
|
$("#fileIdStr").val(this.fileIdList.join(";")); |
||||
|
$.modal.msgSuccess("上传成功"); |
||||
|
}else{ |
||||
|
$.modal.alertError(response.msg); |
||||
|
} |
||||
|
}, |
||||
|
uploadRemove(file, fileList) { |
||||
|
console.log(file, fileList); |
||||
|
var attachFileId = file.attachFileId; |
||||
|
var isBind = file.isBind; |
||||
|
if(isBind==false){ |
||||
|
$.ajax({ |
||||
|
type: "get", |
||||
|
url: this.fileDeleteUrl, |
||||
|
data: {id:attachFileId}, |
||||
|
cache: false, |
||||
|
async: false, // 设置成同步 |
||||
|
dataType: 'json', |
||||
|
success: function(result) { |
||||
|
if (result.code == web_status.SUCCESS) { |
||||
|
var index = this.fileIdList.indexOf(attachFileId); |
||||
|
if(index!=-1){ |
||||
|
this.fileIdList.splice(index,1); |
||||
|
$("#fileIdStr").val(this.fileIdList.join(";")); |
||||
|
} |
||||
|
$.modal.msgSuccess("删除附件成功。"); |
||||
|
} else { |
||||
|
$.modal.alertError(result.msg); |
||||
|
} |
||||
|
}, |
||||
|
error: function(error) { |
||||
|
$.modal.alertError("删除附件失败。"); |
||||
|
} |
||||
|
}); |
||||
|
}else{ |
||||
|
var index = this.fileIdList.indexOf(attachFileId); |
||||
|
if(index!=-1){ |
||||
|
this.fileIdList.splice(index,1); |
||||
|
$("#fileIdStr").val(this.fileIdList.join(";")); |
||||
|
// 保存的时候才删除 |
||||
|
this.removeFileIdList.push(attachFileId); |
||||
|
$("#removeFileIdStr").val(this.removeFileIdList.join(";")); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 控制上传的图片不能删除 |
||||
|
preventDeletion(file, fileList) { |
||||
|
return false; // 禁止删除图片 |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
$(function() { |
||||
|
var options = { |
||||
|
url: prefix + "/optionDevices", |
||||
|
modalName: "出货设备", |
||||
|
showColumns: false, |
||||
|
pagination: false, |
||||
|
showToggle: false, |
||||
|
showRefresh:false, |
||||
|
showSearch:false, |
||||
|
queryParams:queryParams, |
||||
|
columns: [{ |
||||
|
checkbox: true |
||||
|
}, |
||||
|
{ |
||||
|
title: '料号', |
||||
|
field: 'materialNo', |
||||
|
}, |
||||
|
{ |
||||
|
title: '图片', |
||||
|
field: 'materialPhotourl', |
||||
|
}, |
||||
|
{ |
||||
|
title: '物料名称', |
||||
|
field: 'materialName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '物料类型', |
||||
|
field: 'materialType', |
||||
|
}, |
||||
|
{ |
||||
|
title: '单位', |
||||
|
field: 'materialUnit', |
||||
|
}, |
||||
|
{ |
||||
|
title: '品牌', |
||||
|
field: 'materialBrand', |
||||
|
}, |
||||
|
{ |
||||
|
title: '描述', |
||||
|
field: 'materialDescribe', |
||||
|
}, |
||||
|
{ |
||||
|
title: '售后数量', |
||||
|
field: 'shippedGoodsSum', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备SN', |
||||
|
field: 'snCode', |
||||
|
}, |
||||
|
{ |
||||
|
title: '售后问题', |
||||
|
field: 'aftersalesProblem', |
||||
|
}, |
||||
|
{ |
||||
|
title: '紧急程度', |
||||
|
field: 'emergencyDegree', |
||||
|
formatter: function(value, row, index) { |
||||
|
return $.table.selectDictLabel(emergencyDegreeDatas, value); |
||||
|
} |
||||
|
}, |
||||
|
] |
||||
|
}; |
||||
|
$.table.init(options); |
||||
|
}) |
||||
|
function queryParams(params) { |
||||
|
var curParams = { |
||||
|
// 传递参数查询参数 |
||||
|
makeNo: detail.makeNo |
||||
|
}; |
||||
|
return curParams; |
||||
|
} |
||||
|
|
||||
|
function submitHandler() { |
||||
|
if ($.validate.form()) { |
||||
|
$.operate.save(prefix + "/edit", $('#form-aftersalesOrder-edit').serialize()); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$("input[name='startDate']").datetimepicker({ |
||||
|
format: "yyyy-mm-dd", |
||||
|
minView: "month", |
||||
|
autoclose: true |
||||
|
}); |
||||
|
$(function() { |
||||
|
var options = { |
||||
|
url: prefix + "/optionDevices", |
||||
|
modalName: "出货设备", |
||||
|
showColumns: false, |
||||
|
pagination: false, |
||||
|
showToggle: false, |
||||
|
showRefresh:false, |
||||
|
showSearch:false, |
||||
|
queryParams:queryParams, |
||||
|
columns: [{ |
||||
|
checkbox: true |
||||
|
}, |
||||
|
{ |
||||
|
title: '料号', |
||||
|
field: 'materialNo', |
||||
|
}, |
||||
|
{ |
||||
|
title: '图片', |
||||
|
field: 'materialPhotourl', |
||||
|
}, |
||||
|
{ |
||||
|
title: '物料名称', |
||||
|
field: 'materialName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '物料类型', |
||||
|
field: 'materialType', |
||||
|
}, |
||||
|
{ |
||||
|
title: '单位', |
||||
|
field: 'materialUnit', |
||||
|
}, |
||||
|
{ |
||||
|
title: '品牌', |
||||
|
field: 'materialBrand', |
||||
|
}, |
||||
|
{ |
||||
|
title: '描述', |
||||
|
field: 'materialDescribe', |
||||
|
}, |
||||
|
{ |
||||
|
title: '已出库数量', |
||||
|
field: 'shippedGoodsSum', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备SN', |
||||
|
field: 'snCode', |
||||
|
}, |
||||
|
{ |
||||
|
title: '售后问题', |
||||
|
field: 'aftersalesProblem', |
||||
|
}, |
||||
|
{ |
||||
|
title: '紧急程度', |
||||
|
field: 'emergencyDegree', |
||||
|
formatter: function(value, row, index) { |
||||
|
return $.table.selectDictLabel(emergencyDegreeDatas, value); |
||||
|
} |
||||
|
}, |
||||
|
] |
||||
|
}; |
||||
|
$.table.init(options); |
||||
|
}) |
||||
|
function queryParams(params) { |
||||
|
var curParams = { |
||||
|
// 传递参数查询参数 |
||||
|
aftersalesOrderCode: detail.aftersalesOrderCode |
||||
|
}; |
||||
|
return curParams; |
||||
|
} |
||||
|
|
||||
|
$(function () { |
||||
|
$.ajax({ |
||||
|
url: ctx + 'aftersales/aftersalesOrder/getAftersalesStaffList', |
||||
|
type: 'post', |
||||
|
data: { roleKey: 'shgcsRole' }, |
||||
|
success: function (res) { |
||||
|
if (res.data.length > 0) { |
||||
|
var userData = res.data; |
||||
|
for (let i in userData) { |
||||
|
$("#userId_add").append( |
||||
|
"<option value='" + userData[i].userName + "'>" + userData[i].userName + "</option>" // 使用 userName 作为 option 的 value |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 初始化时触发 change 事件，以确保首次加载时也能正确赋值 |
||||
|
$("#userId_add").trigger("change"); |
||||
|
} else { |
||||
|
$.modal.msgError(res.msg); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue