client-trace-v5/src/trace/TraceCommentEdit.vue

<template>
	<div>
		<div>
			<Navbar title="修改评论" :isGoBack="true"></Navbar>
			<div>
				<div class="form-group">
					<label for="exampleInputEmail2">评论内容</label>
					<div id="summernote"></div>
					<!-- <textarea style="width: 100%;"
                              id="hcqk"
                              class="form-control"
                              rows="5"
                              v-model="traceComment.content"></textarea> -->
				</div>
				<div>
					<input ref="fileInput" type="file" class="form-control file-input" @change="onFileChanges" />
					<label for="attachment">
						<a role="button" class="btn btn-primary btn-sm" @click="clickButton">
							<i class="fa fa-upload" />
							&nbsp;
							上传附件
						</a>
					</label>
				</div>

				<div style="margin-top: 10px;">
					<ul class="list-group">
						<li v-for="item,index in files" class="list-group-item">
							<span @click="download(item)" class="badge">下载</span>
							<span @click="removeFile(item)" class="badge">删除</span>
							{{item}}
						</li>
					</ul>
				</div>

				<div>
					<div style="margin-top: 10px;">
						<button @click="photograph" type="text" class="btn btn-default">确认</button>
						<button @click="back" type="text" class="btn btn-default">取消</button>
					</div>
				</div>
			</div>
		</div>
		<Loading ref="loading"></Loading>
	</div>
</template>
<script>
	var Uuid = require("pc-client-component").Uuid;
	var Loading = require("pc-client-component").Loading;
	var UpladFile = require("../widget/UpladFile.js");
	var Notify = require("pc-client-component").Notify;
	var Common = require("../common/Common.js");
	var Navbar = require("pc-client-component").Navbar;
	var DownloadService = require("pc-client-component").DownloadService;

	export default {
		data: function() {
			return {
				traceCommentId: "",
				traceComment: {},
				className: "com.leanwo.prodog.trace.model.TraceComment",
				summernoteInitSuccess: false, // summernote初始化成功
				files: [],
			}
		},
		components: {
			Uuid,
			Loading,
			UpladFile,
			Notify,
			Common,
			Navbar
		},
		methods: {
			
			/**
			 * 点击上传按钮事件
			 * @return {[type]} [description]
			 */
			clickButton: function() {
				$(this.$refs.fileInput).click();
			},

			/**
			 * 初始化数据
			 * @author GuoZhiBo 20171201
			 */
			initData: function() {
				var _self = this;
				_self.traceCommentId = Number(this.$route.params.traceCommentId);
				if (_self.traceCommentId != null && _self.traceCommentId != '') {
					_self.uniqueById(_self.traceCommentId).then(successData => {
						_self.traceComment = successData;
						if(successData.attachments != null && successData.attachments != ''){
							_self.files=(successData.attachments.split(','));
						}
						$('#summernote').summernote({
							toolbar:[
								['insert', ['link', 'picture', 'video', 'audio', 'hr', 'table', //插件
								'fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'strikethrough', 'clear',//字体样式
								'style', 'ol', 'ul', 'paragraph', 'height',//段落样式
								'fullscreen', 'codeview', 'undo', 'redo', 'help'//Misc
								]],
							],
							height: 400,
							minHeight: 300,
							maxHeight: 500,
							focus: true,
							lang: 'zh-CN',
							callbacks: {
								onImageUpload: function(files, editor, $editable) {
									_self.sendFile(files[0], editor, $editable);
								}
							}
						});
						if (_self.traceComment != null) {
							$('#summernote').summernote('code', _self.traceComment.content);
						}
						_self.summernoteInitSuccess = true;
					}, errorData => {
						Common.processException(errorData);
					});
				}

			},

			/**
			 * 查询Trace
			 */
			uniqueById: function(traceCommentId) {
				return new Promise((resolve, reject) => {
					$.ajax({
						url: Common.getApiURL('TraceCommentResource/uniqueById'),
						type: 'get',
						dataType: 'json',
						contentType: "application/json",
						data: {
							"traceCommentId": traceCommentId
						},
						beforeSend: function(request) {
							Common.addTokenToRequest(request);
						},
						success: function(data) {
							resolve(data);
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							reject(XMLHttpRequest);
						}
					});
				});
			},

			//----------文件------------
			/**
			 * 删除文件
			 * @param  {String} item 文件Name
			 */
			removeFile: function(index) {
				var _self = this;
				_self.files.splice(index, 1);
			},
			/**
			 * 选择文件发生改变
			 * @param  {[type]} e [description]
			 * @return {[type]}   [description]
			 */
			onFileChanges: function(e) {
				var files = e.target.files || e.dataTransfer.files;
				if (!files.length)
					return;
				this.uploadFile(files[0]);
			},

			/**
			 * 上传文件
			 * @param  {File} selectedFile 选择的文件
			 */
			uploadFile: function(selectedFile) {
				var _self = this;
				_self.showUploadDiv = false;
				if (selectedFile == undefined) {
					return;
				}
				if (selectedFile.size != undefined && selectedFile.size != null) {
					if ((selectedFile.size / 1024) <= (1024 * 4)) {
						var formData = new FormData();
						formData.append("files", selectedFile);
						formData.append("className", _self.className);
						_self.$refs.loading.show();
						$.ajax({
							url: Common.getApiURL("file/classFileUpload"),
							type: "post",
							beforeSend: function(request) {
								Common.addTokenToRequest(request);
							},
							data: formData,
							contentType: false,
							processData: false,
							success: function(data) {
								_self.$refs.loading.hide();
								if (data != "error") {
									var fileName = data.substring(data.indexOf(":") + 1);
									_self.files.push(fileName);
								}
							},
							error: function(XMLHttpRequest, textStatus, errorThrown) {
								_self.$refs.loading.hide();
								Common.processException(XMLHttpRequest, textStatus, errorThrown);
							}
						});
					} else {
						Notify.error("提示", "文件大小不能超过4M！");
					}
				} else {
					Notify.error("提示", "上传的文件为空！");
				}
			},

			/**
			 * 获取文件地址
			 * @param  {String} item 图片名称
			 * @return {String}      图片URL地址
			 */
			getFileSrc: function(item) {
				var _self = this;
				if (item != undefined && item != null) {
					return Common.getResourceUrl('file', _self.className, item);
				} else {
					return "";
				}
			},

			/**
			 * 下载文件
			 * @param  {String} fileName 文件名
			 * @return {void}          
			 */
			download: function(fileName) {
				var _self = this;
				DownloadService.fileDownload(_self.className, fileName);
			},
			//图片上传
			sendFile: function(file, editor, $editable) {
				var _self = this;
				UpladFile.photoCompress(file, {
					quality: 0.2
				}, function(base64Codes) {
					var bl = UpladFile.convertBase64UrlToBlob(base64Codes);
					var rst = new FormData();
					rst.append("images", bl, "file_" + Date.parse(new Date()) + ".jpg");
					rst.append("className", _self.className);
					$.ajax({
						url: Common.getApiURL("file/imageUpload"),
						type: "post",
						data: rst,
						contentType: false,
						processData: false,
						beforeSend : function(request){
							Common.addTokenToRequest(request);
						},
						success: function(data) {
							if (data != "error") {
								var imageName = data.substring(data.indexOf(":") + 1);
								$("#summernote").summernote('insertImage', Common.getResourceUrl("image", _self.className, imageName), 'image name');
							}
						},
						error: function() {
							Notify.error("提示", "上传失败！");
							return;
						}
					});
					return rst.file;
				});
			},

			/**
			 * 修改并保存评论表数据
			 * @author GuoZhiBo 20180302
			 */
			photograph: function() {
				var _self = this;
				_self.traceComment.content = $('#summernote').summernote('code');
				if (_self.traceComment.content != "" && _self.traceComment.content != null) {
					_self.traceComment.attachments = _self.files.join(",");
					_self.$refs.loading.show();
					$.ajax({
						url: Common.getApiURL("TraceCommentResource/updateTraceComment"),
						type: "post",
						contentType: "application/json",
						beforeSend: function(request) {
							Common.addTokenToRequest(request);
						},
						data: JSON.stringify(_self.traceComment),
						success: function(data) {
							_self.$refs.loading.hide();
							_self.back();
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							_self.$refs.loading.hide();
							Common.processException(XMLHttpRequest, textStatus, errorThrown);
						}
					});
				} else {
					Notify.error("提示", "请填写评论内容！");
				}
			},

			back: function() {
				var _self = this;
				history.back();
			}

		},
		mounted: function() {
			$(".input-tan").focus(function() {
				document.activeElement.blur();
			});
			this.initData();
		}
	}
</script>
<style scoped>
	.mui-divs3 {
		margin-top: 10px;
	}

	.file-input {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	}

	.badge {
		cursor: pointer;
		background-color: #428bca;
		color: white;
	}
</style>