Browse Source
产品型号管理前端列表页面，去掉作废功能和恢复功能；新增详情按钮和对应的打开详情页面的js方法 产品型号管理新增前端详情页面 产品型号管理Controller新增打开产品型号管理弹窗接口和保存产品型号管理接口dev
5 changed files with 236 additions and 8 deletions
@ -0,0 +1,188 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > |
|||
<head> |
|||
<th:block th:include="include :: header('产品型号管理详情')" /> |
|||
<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-model-edit" th:object="${sysProductModel}"> |
|||
<input name="pid" th:field="*{pid}" type="hidden"> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">设备型号：</label> |
|||
<div class="col-sm-8"> |
|||
<input name="equipModel" th:field="*{equipModel}" 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"> |
|||
<input name="equipName" th:field="*{equipName}" 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"> |
|||
<input name="specification" th:field="*{specification}" 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"> |
|||
<input name="differences" th:field="*{differences}" 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"> |
|||
<input name="remark" th:field="*{remark}" 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"> |
|||
<el-upload |
|||
:action="fileUploadUrl" |
|||
:on-success="uploadSuccess" |
|||
:on-remove="uploadRemove" |
|||
:file-list="fileList" |
|||
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="photoAttachId" name = "photoAttachId" hidden th:field="*{photoAttachId}"> |
|||
<input id="fileIdStr" type="text" name="fileIdStr" th:field="*{fileIdStr}" hidden> |
|||
<input id="removeFileIdStr" type="text" name="removeFileIdStr" hidden> |
|||
</div> |
|||
|
|||
</form> |
|||
</div> |
|||
|
|||
<th:block th:include="include :: footer"/> |
|||
<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"> |
|||
|
|||
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(";")); |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
}) |
|||
|
|||
|
|||
var prefix = ctx + "system/model"; |
|||
$("#form-model-edit").validate({ |
|||
focusCleanup: true |
|||
}); |
|||
function submitHandler() { |
|||
if ($.validate.form()) { |
|||
$.operate.save(prefix + "/edit", $('#form-model-edit').serialize()); |
|||
} |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue