<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>流程自定义列表</title>
		<script src="../../js/vue/vue.js"></script>
		<script src="../../js/vue/element-ui/lib/index.js"></script>
		<script src="../../js/vue/axios/dist/axios.min.js"></script> 
		<script src="../../js/vue/page.js?v=20220615"></script>
		<script src="../../js/myelement.js?v=20220615"></script>
		<script src="../../js/common.js"></script>
		<!-- <script src="../../data/data.js?v=20220425"></script> -->
		
		<link href="../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
		<link href="../../css/myelement.css?v=20220425" rel="stylesheet">
		<link href="../../css/iconfont.css" rel="stylesheet">
		<link href="../../css/page.css?v=20220425" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_mkoo966o0uo.css" rel="stylesheet">
	</head>
	
	<body>
		<div id="vbody">
			<div id="page_root">
				<div class="topbar">
					<span v-if="showcancel">{{title}}</span>
					<div v-if="!showcancel" class="el-dialog__header">
						<div  class="dialog-title">
						  <i class="iconfont icon-customermanagement"></i>
						  <span> {{title}} </span>
						</div>
					</div>	
					<div style="float: right; margin-right: 24px;">
						<el-button-group style="margin-left: 3px;">
							<el-button v-if="showcancel" icon="el-icon-refresh" @click="editModel">编辑</el-button>
							<el-button v-if="showcancel" icon="el-icon-refresh" @click="createModel">新建</el-button>
							<el-button v-if="showcancel" icon="el-icon-refresh" @click="deleteModel">删除</el-button>
							<el-button v-if="showcancel" icon="el-icon-refresh" @click="downloadModel">下载流程</el-button>
							<input type="file" id="btn_file" ref="btn_file" style="display: none;" @change="getFile($event)"/>
							<el-button v-if="showcancel" icon="el-icon-refresh" @click="uploadModel">上传流程</el-button>
						</el-button-group>
					</div>
				</div>
				<div id="list" style="position: absolute; left: 0px; top: 40px; width: 35%; bottom: 10px; border: 1px solid #ccc">
					<h-table
						v-if="isRefresh"
						ref="table1"
						:table-fields="tableFields" 
						:table-data="tableData" 
						
						:table-height="tableHeight2"
						:is-highlight-row="true"
						:is-pagination="false"
						v-on:row-click="rowClick"
					>
					</h-table>
					<!-- 
					 :pagesize="pagesize"
					 :pagenum="pagenum"
					 :total="total"
					 -->
				</div>
				<div style="position: absolute; left: 35%; right: 0px; top: 40px; bottom: 10px;">
					<div id="diagram" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; border: 1px solid #ccc">
						<div >
							<div id="model_name" style="margin-left:10px; margin-top:10px;font-size:20px; height:60px; line-height:60px; padding-left:65px; background:url(../../img/process_set.png) no-repeat left center">
								Model 名称:{{selectrow.name}}
							</div>
							
							<div style="padding: 5px 20px; height: 20px;">
								<div id="model_version" style="float:left">
									Model 版本:{{selectrow.version}}
								</div>
								<div id="model_updatetime" style="float:left; margin-left:20px" >
									æ›´æ–°æ—¶é—´:{{selectrow.updatetime_}}
								</div>
							</div>
							
						</div>	
						<hr color="#ccc" size="1" >
						<div style="height:80%">
							<img v-if="selectrow.id" id="mode_img" ref="act_img" style=" display: inline-block;vertical-align: middle;text-align: center;max-height:90%;max-width:90%">	
						</div>
						
					
					</div>
				</div>
			</div>
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
				<div class="spinner">
				  <div class="cube1"></div>
				  <div class="cube2"></div>
				</div>
			</div>
			
		</div>	
		
		<script type="text/javascript">
			var role = Root.role;
			var setting = getSetting("sinvoice_list", role.code);
			var download_file;
			new ListVue({
				el: "#vbody",
				data: {
					title: "流程自定义",
					page: setting.page,
					buttons: setting.buttons,
					
					showcancel:true,
					begTime: "",
					endTime: "",
					
					isRefresh: true,
					tableFields: [
						{field: "id", name: "编号", isshow: "T"},
						{field: "modelkey", name: "Key", isshow: "T"},
						{field: "name", name: "名称", isshow: "T"},
						{field: "version", name: "版本", isshow: "T"}
					],
					tableData_old: [],
					tableData_new: [],
					tableData2: [],
					tableData: [],
					tableHeight2: null,
					pagesize: 10,
					pagenum: 1,
					total: 0,
					
					selectrow: {},
					act_img: null,
				},
				created() {
					/* this.tableData_new = dataRoot.database.approvalList;
					this.tableData_old = clone(dataRoot.database.approvalList);
					this.tableData2 = this.tableData_new;
					this.popupParames = clone(Root.popupParames); */
				},
				
				mounted() {
					this.doQuery();
					this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
						document.getElementById('page_root').style.display =  "block";
						document.getElementById('page_loading').style.display =  "none";
					});
				},
				
				methods:{
					//表格
					onServerInitData(data) {
						
					},
					doQuery() {
						let me = this;
						Server.call("rootact/act/list/" + this.pagenum,{isClientMode: false,ajaxtype: "GET"}, function(result) {
							console.log(result);
							me.tableData2 = [];
							me.total = 0;
							
							if (result.data) {
								var data_ = result.data.list;
								me.total = result.data.total;
								me.tableData2 = data_;
							}
							me.initTableData();
						});
					},
					initTableData() {
						let me = this;
						me.tableData = me.tableData2;//.slice((me.pagenum-1)*me.pagesize, me.pagenum * me.pagesize);
						if(me.tableData.length > 0){
							me.$nextTick(function(){
							  me.isRefresh = true;
							  me.$nextTick(function(){
								  let clientHeight = document.documentElement.clientHeight;
								  let topbar_height = document.getElementsByClassName('topbar')[0].offsetHeight;
								  
								  me.tableHeight2 = clientHeight - topbar_height - 30;
								  
								  
								  /* let header_height = me.$refs.table1.$el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
								  let row_height = me.$refs.table1.$el.getElementsByClassName('el-table__row')[0].offsetHeight || 40;
								  let body_width = me.$refs.table1.$el.getElementsByClassName('el-table__body')[0].offsetWidth;
								  let body_wrapper_width = me.$refs.table1.$el.getElementsByClassName('el-table__body-wrapper')[0].offsetWidth;
								  me.tableHeight2 = header_height + (row_height * me.pagesize) + me.pagesize/4.5;
								  if((body_width - body_wrapper_width)>5){
									  me.tableHeight2 += 20
								  } */
							  })
							})
						}
					},
					
					rowClick(obj) {
						let me = this;
						//this.selectrow = obj.row;
						let selectrow_ = clone(obj.row);
						selectrow_.updatetime_ = dateFormat(new Date(selectrow_.updatetime), "yyyy-MM-dd hh:mm:ss");
						this.selectrow = selectrow_;
						this.cklc();
						
						/* 
						 this.selectrow = obj.row;
						 $("#model_name").html("model 名称 :"+data.name);
						 $("#model_version").html("model 版本 :"+data.version);
						 $("#model_updatetime").html("æ›´æ–°æ—¶é—´  :"+data.updatetime);*/
						//me.act_img = "http://worder.highdatas.com/act/act/img/" + this.selectrow.id;
						//Server.call("rootact/act/img/" + this.selectrow.id,{isClientMode: false}, function(result) {
								//me.act_img = "http://worder.highdatas.com/act/act/img/" + this.selectrow.id;
						//}); 
					},
					/* 查看流程图 */
					cklc() {
						var me = this;
						let url = window.top.RootSetting.url_act +  "act/img/" + this.selectrow.id;
						axios.get(url, {
						  responseType: 'arraybuffer'
						})
						.then(response => {
						  return 'data:image/png;base64,' + btoa(
						    new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
						  );
						}).then(data => {
							me.$refs.act_img.src = data;
						})
					},
					  
					editModel() {
						let me = this;
						if(this.selectrow.id){
							Server.call("rootact/designer/edit?modelId="+ this.selectrow.id,{isClientMode: false,ajaxtype:"GET"}, function(result) {
								if(result.success){
									me.openMsg1(window.top.RootSetting.url_act + result.data);
									//me.openMsg1("http://worder.highdatas.com/act" + result.data);
									//location.href ="http://worder.highdatas.com/act" + result.data;
								}
							});
							
							//me.openMsg1(?modelId="+ this.selectrow.id);
							
							//me.openMsg1(window.top.RootSetting.url_act + "act/process/modeler.html?modelId="+ this.selectrow.id);
						}
						else{
							alert("请选择要编辑model");
						}
					},
					createModel() {
						let me = this;
						Server.call("rootact/designer/create",{isClientMode: false,ajaxtype:"GET"}, function(result) {
							if(result.success){
								me.openMsg1(window.top.RootSetting.url_act  + result.data);
								//location.href ="http://worder.highdatas.com/act" + result.data;
							}
						});
					},
					deleteModel() {
						let me = this;
						if(this.selectrow.id){
							let selectedId = this.selectrow.id;
							Root.confirm('确定删除-' + this.selectrow.name + '-吗?', '删除提示', {
							  confirmButtonText: '删除',
							  cancelButtonText: '取消',
							  type: 'warning'
							}).then(() => {
								Server.call("rootact/designer/model/" + selectedId + "/delete", {isClientMode: false,ajaxtype:"GET"},function(callback){
									me.doQuery();
									Root.message({
										type: 'success',
										message: '删除成功!'
									});
								});
							}).catch(() => {
								Root.message({
									type: 'info',
									message: '已取消删除'
								});          
							});
						}
						else{
							alert("请选择要删除的model");
						}
						
					},
					downloadModel(){
						if(this.selectrow.id){
							var me = this;
							let url = window.top.RootSetting.url_act +  "designer/resource/xml/" + this.selectrow.id;
							//dealExportByPath(url,"aaa.xml");
							dealExportByPath(url, "流程.xml");
							/* var elemIF = document.createElement("iframe");   
							            elemIF.src = url;   
							            elemIF.style.display = "none";   
							            document.body.appendChild(elemIF);   */
							   //this.downloadFile(url);
								//this.download_file(url);
							/* axios.get(url, {
								 
							})
							.then(data => {
								console.log(data);
							}) */
						}else{
							Root.message({
								type: 'info',
								message: '请选择一条数据'
							});  
						} 
						
					},
					download_file(url) { 
					   var iframe = document.createElement("iframe"); 
					   download_file.iframe = iframe; 
					   document.body.appendChild(download_file.iframe); 
					   download_file.iframe.src = url; 
					   download_file.iframe.style.display = "none"; 
					  }, 
					downloadFile(sUrl) {
					      if (/(iP)/g.test(navigator.userAgent)) {
					          alert('Your device does not support files downloading. Please try again in desktop browser.');
					          return false;
					      }
						  var link = document.createElement('a');
						  link.href = sUrl;
							  
						  if (link.download !== undefined) {
							  var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
							  link.download = fileName;
						  }
							  
						  if (document.createEvent) {
							  var e = document.createEvent('MouseEvents');
							  e.initEvent('click', true, true);
							  link.dispatchEvent(e);
							  return true;
						  }
					  
					      if (sUrl.indexOf('?') === -1) {
					          sUrl += '?download';
					      }
					  
					      window.open(sUrl, '_self');
					      return true;
					  },
					
					uploadModel(){
						document.getElementById("btn_file").click()
					},
					getFile(event){
						let me = this;
						document.getElementById('page_loading').style.display =  "block";
						var file = event.target.files;
						var forms = new FormData();
						for(var i = 0;i<file.length;i++){
							//    上传类型判断
							var FileName = file[i].name;
							var idx = FileName.lastIndexOf(".");  
							if (idx != -1){
								var ext = FileName.substr(idx+1).toUpperCase();   
								ext = ext.toLowerCase( ); 
								if (ext =='xml' ){
									
									/* let formData = new FormData()
									formData.append("file" ,file[i]);
									 */
									let formData = new FormData()
									formData.append("file" ,file[i]);
									
									uploadAxios.post(window.top.RootSetting.url_act +'designer/resource/upload', formData).then(data_ => {
										console.log(data_);
										document.getElementById('page_loading').style.display =  "none";
										me.doQuery();
										
									}).catch(error => {
											this.$message({
												showClose: true,
												message:  ':请求出现错误:' + error,
												type: 'error'
											});
											document.getElementById('page_loading').style.display =  "none";
										});
								}else{
									Root.message({
										type: 'info',
										message: '格式不正确'
									});
									document.getElementById('page_loading').style.display =  "none";
								}
							}
						}
					},
					
					openMsg1(acturl) {
						let me = this;
						Root.popupParames = {
							width: "95vw",
							height: "95vh",
							url: "../approval/design_edit.html",
							data: acturl,
							callback: function(obj, callback) {
								me.doQuery();
								if (callback) {
									callback();
								}
							}
						};
						Root.showPopup(Root.popupParames);
					},
					
					
				}
			});
		</script>
		<style>
			
		</style>
	</body>
</html>