<!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>
|
