zhangsiqi
7 months ago
6 changed files with 515 additions and 12 deletions
@ -0,0 +1,413 @@ |
|||
<!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="${uploadReport}"> |
|||
<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="salesOrderCode" th:field="*{salesOrderCode}" 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="makeNo" th:field="*{makeNo}" class="form-control" type="text"> |
|||
</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"> |
|||
</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"> |
|||
</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"> |
|||
</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"> |
|||
</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"> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-4 control-label">客户要求出发日期：</label> |
|||
<div class="col-sm-8"> |
|||
<div class="input-group date"> |
|||
<input name="startDate" class="form-control" th:value="*{startDate}" placeholder="yyyy-mm-dd" type="text"> |
|||
<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"> |
|||
</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">[[*{serviceContent}]]</textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 用户评价 --> |
|||
<div class="form-row"> |
|||
<label class="col-sm-4 control-label">用户评价：</label> |
|||
<div class="col-sm-6"> |
|||
<el-upload |
|||
:action="fileUploadUrl" |
|||
:on-success="uploadSuccess" |
|||
:on-remove="uploadRemove" |
|||
:file-list="fileList" |
|||
:limit="5" |
|||
list-type="picture" |
|||
accept=".jpg,.png" |
|||
multiple> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，第一张图片为主图</div> |
|||
</el-upload> |
|||
</div> |
|||
<input id="fileIdStr" type="text" name="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 prefix = ctx + "aftersales/aftersalesOrder"; |
|||
var uploadReport = [[${uploadReport}]]; |
|||
$("#form-aftersalesOrder-edit").validate({ |
|||
focusCleanup: true |
|||
}); |
|||
|
|||
new Vue({ |
|||
el: '#app', |
|||
data: function() { |
|||
return { |
|||
fileList: [], |
|||
fileUploadUrl: ctx + "common/uploadSingleFile", |
|||
fileDeleteUrl: ctx + "common/deleteFile", |
|||
fileIdList:[], |
|||
} |
|||
}, |
|||
methods: { |
|||
uploadSuccess(response, file, fileList) { |
|||
console.log(response); |
|||
if(response.code == web_status.SUCCESS){ |
|||
var attachFileId = response.data.id; |
|||
file.attachFileId = attachFileId; |
|||
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; |
|||
$.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("删除附件失败。"); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
}) |
|||
|
|||
$(function() { |
|||
var options = { |
|||
url: prefix + "/optionDevices", |
|||
modalName: "出货设备", |
|||
showColumns: false, |
|||
pagination: false, |
|||
showToggle: false, |
|||
showRefresh:false, |
|||
showSearch:false, |
|||
queryParams:queryParams, |
|||
columns: [{ |
|||
checkbox: true |
|||
}, |
|||
{ |
|||
title: '出货设备编号', |
|||
field: 'shippingDeviceCode', |
|||
visible: false |
|||
}, |
|||
{ |
|||
title: '料号', |
|||
field: 'materialNo', |
|||
}, |
|||
{ |
|||
title: '图片', |
|||
field: 'materialPhotourl', |
|||
}, |
|||
{ |
|||
title: '物料名称', |
|||
field: 'materialName', |
|||
}, |
|||
{ |
|||
title: '物料类型', |
|||
field: 'materialType', |
|||
}, |
|||
{ |
|||
title: '单位', |
|||
field: 'materialUnit', |
|||
}, |
|||
{ |
|||
title: '品牌', |
|||
field: 'materialBrand', |
|||
}, |
|||
{ |
|||
title: '描述', |
|||
field: 'materialDescribe', |
|||
}, |
|||
{ |
|||
title: '流水号', |
|||
field: 'deviceRunningNumber', |
|||
}, |
|||
{ |
|||
title: '生产图片', |
|||
field: 'makePhotourl', |
|||
}, |
|||
{ |
|||
title: 'SN号', |
|||
field: 'snCode', |
|||
}, |
|||
{ |
|||
title: '售后图片', |
|||
field: 'aftersalesPhotourl', |
|||
}, |
|||
] |
|||
}; |
|||
$.table.init(options); |
|||
}) |
|||
function queryParams(params) { |
|||
var curParams = { |
|||
// 传递参数查询参数 |
|||
makeNo: uploadReport.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() { |
|||
$('.summernote').each(function(i) { |
|||
$('#' + this.id).summernote({ |
|||
lang: 'zh-CN', |
|||
callbacks: { |
|||
onChange: function(contents, $edittable) { |
|||
$("input[name='" + this.id + "']").val(contents); |
|||
}, |
|||
onImageUpload: function(files) { |
|||
var obj = this; |
|||
var data = new FormData(); |
|||
data.append("file", files[0]); |
|||
$.ajax({ |
|||
type: "post", |
|||
url: ctx + "common/upload", |
|||
data: data, |
|||
cache: false, |
|||
contentType: false, |
|||
processData: false, |
|||
dataType: 'json', |
|||
success: function(result) { |
|||
if (result.code == web_status.SUCCESS) { |
|||
$('#' + obj.id).summernote('insertImage', result.url); |
|||
} else { |
|||
$.modal.alertError(result.msg); |
|||
} |
|||
}, |
|||
error: function(error) { |
|||
$.modal.alertWarning("图片上传失败。"); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
var content = $("input[name='" + this.id + "']").val(); |
|||
$('#' + this.id).summernote('code', content); |
|||
}) |
|||
}); |
|||
$(function() { |
|||
var options = { |
|||
url: prefix + "/optionDevices", |
|||
modalName: "出货设备", |
|||
showColumns: false, |
|||
pagination: false, |
|||
showToggle: false, |
|||
showRefresh:false, |
|||
showSearch:false, |
|||
queryParams:queryParams, |
|||
columns: [{ |
|||
checkbox: true |
|||
}, |
|||
{ |
|||
title: '出货设备编号', |
|||
field: 'shippingDeviceCode', |
|||
visible: false |
|||
}, |
|||
{ |
|||
title: '料号', |
|||
field: 'materialNo', |
|||
}, |
|||
{ |
|||
title: '图片', |
|||
field: 'materialPhotourl', |
|||
}, |
|||
{ |
|||
title: '物料名称', |
|||
field: 'materialName', |
|||
}, |
|||
{ |
|||
title: '物料类型', |
|||
field: 'materialType', |
|||
}, |
|||
{ |
|||
title: '单位', |
|||
field: 'materialUnit', |
|||
}, |
|||
{ |
|||
title: '品牌', |
|||
field: 'materialBrand', |
|||
}, |
|||
{ |
|||
title: '描述', |
|||
field: 'materialDescribe', |
|||
}, |
|||
{ |
|||
title: '流水号', |
|||
field: 'deviceRunningNumber', |
|||
}, |
|||
{ |
|||
title: '生产图片', |
|||
field: 'makePhotourl', |
|||
}, |
|||
{ |
|||
title: 'SN号', |
|||
field: 'snCode', |
|||
}, |
|||
{ |
|||
title: '售后图片', |
|||
field: 'aftersalesPhotourl', |
|||
}, |
|||
] |
|||
}; |
|||
$.table.init(options); |
|||
}) |
|||
function queryParams(params) { |
|||
var curParams = { |
|||
// 传递参数查询参数 |
|||
makeNo: uploadReport.makeNo |
|||
}; |
|||
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