zhangsiqi
7 months ago
10 changed files with 548 additions and 8 deletions
@ -0,0 +1,430 @@ |
|||
<!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="salesOrderCode" th:field="*{salesOrderCode}" 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="makeNo" th:field="*{makeNo}" 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-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" readonly> |
|||
<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 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: '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: 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: '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: detail.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