You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

217 lines
7.7 KiB
Plaintext

11 months ago
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>流程综合查询</title>
<script src="./Scripts/vue.js"></script>
<!-- Element Ui -->
<link rel="stylesheet" href="./Scripts/element/element.css" />
<link href="Style/skin/css/style.css" rel="stylesheet" type="text/css" />
<link href="Style/skin/css/animate.css" rel="stylesheet" type="text/css" />
<script src="./Scripts/element/element.js"></script>
<script type="text/javascript" src="Scripts/bootstrap/js/jquery.min.js"></script>
<script src="Scripts/QueryString.js"></script>
<script src="Scripts/config.js" type="text/javascript"></script>
<script type="text/javascript" src="Comm/Gener.js"></script>
<script type="text/javascript" src="Scripts/dayjs.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#app {
background-color: white;
}
/* 样式覆盖 */
.el-table__header {
width: 100% !important;
}
.el-table__body {
width: 100% !important;
}
/* 自定义 */
.box {
margin: 20px 10px;
}
.box .content {
padding-right: 40px;
}
.f-left {
float: left;
}
.title {
line-height: 40px;
}
.search-box {
margin: 15px 0;
}
</style>
</head>
<body class="gray-bg">
<div id="app" class="wrapper wrapper-content animated fadeInRight">
<div class="box ibox-content">
<div>
<div class="f-left title">关键字:</div>
<div class="f-left content">
<el-input v-model="keyWord" placeholder="请输入内容"></el-input>
</div>
</div>
<div>
<div class="f-left title">日期从:</div>
<div class="f-left content">
<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</div>
<div>
<div class="f-left title">状态:</div>
<div class="f-left content">
<el-select v-model="status" placeholder="请选择">
<el-option v-for="item in statusOpt" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div>
<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
</div>
</div>
<el-table :data="tableData" border=border style="width: 100%;">
<el-table-column prop="no" label="序号" type="index" />
</el-table-column>
<el-table-column prop="Title" label="标题" />
</el-table-column>
<el-table-column prop="flow" label="流程/停留节点" />
</el-table-column>
<el-table-column prop="StarterName" label="发起人" />
</el-table-column>
<el-table-column prop="initiateDate" label="发起日期" />
</el-table-column>
<el-table-column prop="lastDate" label="最后日期" />
</el-table-column>
<!--<el-table-column prop="time" label="耗时" />
</el-table-column>-->
<el-table-column prop="status" label="状态" />
</el-table-column>
</el-table>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: function () {
return {
tableData: [
{
Title: '标题',
flow: '流程/停留节点',
StarterName: '发起人',
initiateDate: '发起日期',
lastDate: '最后日期',
//time: '耗时',
status: '状态'
}
],
statusOpt: [{
value: 'all',
label: '全部'
}, {
value: '2',
label: '运行中'
}, {
value: '5',
label: '退回'
}, {
value: '3',
label: '已完成'
}],
status: 'all',
date: '', // element用户点击清除会置为null
keyWord: ''
}
},
methods: {
onSearch: function () {
this.search(
this.keyWord,
this.date ? this.date[0] + ' 00:00:00' : '',
this.date ? this.date[1] + ' 23:59:59' : '',
"",
this.status
);
},
search: function (
Key = "",
DTFrom = "",
DTTo = "",
FlowNo = "",
WFState = ""
) {
//执行查询.
const handler = new HttpHandler("BP.WF.HttpHandler.WF");
handler.AddPara("Key", Key);
handler.AddPara("DTFrom", DTFrom);
handler.AddPara("DTTo", DTTo);
handler.AddPara("FlowNo", FlowNo);
handler.AddPara("WFState", WFState);
const data = handler.DoMethodReturnJSON("SearchZongHe_Init");
console.log(`🚀 :: data`, data);
this.handleData(data);
},
handleData: function (data) {
const now = dayjs();
this.tableData = data.map(item => {
item.flow = `${item.FlowName}/${item.NodeName}`;
item.initiateDate = item.RDT.substring(0, 16);
item.lastDate = item.SendDT.substring(0, 16);
// 耗时 已完成 按照 RDT , Send DT两个时间差计算
let diffm;
if (item.WFState == 3) {
diffm = dayjs(item.SendDT).diff(dayjs(item.RDT));
} else {
//diffm = dayjs.duration(dayjs().diff(dayjs(item.RDT)))
}
// const dayObj = dayjs.duration(diffm).$d.$ds;
//item.time = `${dayObj.days}天${dayObj.hours}时${dayObj.minutes}分`
/*
dayjs diff
now > SendDT 正
now < SendDT 负
*/
if (item.WFState == 2) {
item.status = now.diff(dayjs(item.SDTOfNode)) <= 0 ? '运行中' : '已逾期';
} else if (item.WFState == 3) {
item.status = '已完成'
} else if (item.WFState == 5) {
item.status = '退回'
} else {
item.status = '其他'
}
return item;
})
console.log(`🚀 :: this.tableData`, this.tableData);
}
},
created() {
// dayjs.extend(dayjs_plugin_duration);
},
mounted() {
this.search();
}
})
</script>
</html>