You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
9.1 KiB
348 lines
9.1 KiB
3 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
|
||
|
|
<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
|
||
|
|
<view class="sticky-tabs">
|
||
|
|
<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="flex-around mat15 pick-border">
|
||
|
|
<view>
|
||
|
|
<picker @change="searchDaysChange" :value="createFixedTimeVal" :range="searchDays" :range-key="'name'">
|
||
|
|
<view class="">
|
||
|
|
<text>{{createFixedTimeVal ? searchDays[createFixedTimeVal].name : '请选择时间'}}</text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<!-- <picker mode="date" :value="flowDatesSelect" @change="relatedtimeChange">
|
||
|
|
<view class="">
|
||
|
|
<text>{{flowDatesSelect ? flowDatesSelect : '请选择时间范围'}}</text>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</picker> -->
|
||
|
|
<text v-if="startTime == ''" type="primary" @click="onShowDatePicker('range')">选择日期范围</text>
|
||
|
|
<text v-else @click="onShowDatePicker('range')">{{startTime}} — {{endTime}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<picker @change="departmentChange" :value="departmentIdVal" :range="departmentList" :range-key="'name'">
|
||
|
|
<view class="">
|
||
|
|
<text>{{departmentIdVal ? departmentList[departmentIdVal].name : '请选择部门'}}</text>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view>
|
||
|
|
<view v-for="(item,index) in list" :key="index">
|
||
|
|
<view class="good-list">
|
||
|
|
<view class="charge" :id="'index-' + item.name" :data-index="item.name">
|
||
|
|
<view class="charge-title flex-between">
|
||
|
|
<text>{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="charge-text" v-for="(item,index) in item.nodeList" :key="index">
|
||
|
|
<view>
|
||
|
|
<text class="label-text">节点：</text>
|
||
|
|
<text class="mgl30">{{item.depName}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text class="label-text">累计耗时/天：</text>
|
||
|
|
<text class="mgl30">{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text class="label-text">审批次数：</text>
|
||
|
|
<text class="mgl30">{{item.number}}次</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mescroll-body>
|
||
|
|
<mx-date-picker :show="showPicker" :type="type"
|
||
|
|
:value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'"
|
||
|
|
:show-seconds="true" @confirm="onSelected" @cancel="onSelected" @reset="onReset"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
|
|
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
|
||
|
|
export default {
|
||
|
|
mixins: [MescrollMixin], // 使用mixin
|
||
|
|
components: {
|
||
|
|
MxDatePicker
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showPicker: false,
|
||
|
|
date: '2019/01/01',
|
||
|
|
time: '15:00:12',
|
||
|
|
datetime: '2019/01/01 15:00:12',
|
||
|
|
range: [],
|
||
|
|
type: 'rangetime',
|
||
|
|
value: '',
|
||
|
|
|
||
|
|
tabs:[
|
||
|
|
{name:'全部', value: ''},
|
||
|
|
{name:'已撤销', value: 0},
|
||
|
|
{name:'进行中', value: 1},
|
||
|
|
{name:'已完成', value: 2},
|
||
|
|
{name:'已否决', value: 3}
|
||
|
|
],
|
||
|
|
tabIndex: 0, // 当前菜单下标
|
||
|
|
totals: 0,
|
||
|
|
page: {
|
||
|
|
num: 1,
|
||
|
|
size: 10,
|
||
|
|
},
|
||
|
|
|
||
|
|
searchDays:[
|
||
|
|
{ value: '', name: '不限' },
|
||
|
|
{ value: 0, name: '今天' },
|
||
|
|
{ value: 1, name: '昨天' },
|
||
|
|
{ value: 2, name: '本周' },
|
||
|
|
{ value: 3, name: '本月' },
|
||
|
|
{ value: 4, name: '本年' },
|
||
|
|
],
|
||
|
|
list: [],
|
||
|
|
departmentList: [],
|
||
|
|
depMatching: [],
|
||
|
|
chartsData: [],
|
||
|
|
chartsName: [],
|
||
|
|
|
||
|
|
createFixedTimeVal: '',
|
||
|
|
createFixedTime:'',
|
||
|
|
departmentIdVal: '',
|
||
|
|
departmentId:'',
|
||
|
|
startTime:'',
|
||
|
|
endTime:'',
|
||
|
|
flowStatus:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.listDepartment()
|
||
|
|
this.businessCount()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onShowDatePicker(type){//显示
|
||
|
|
this.type = type;
|
||
|
|
this.showPicker = true;
|
||
|
|
this.value = this[type];
|
||
|
|
},
|
||
|
|
onSelected(e) {//选择
|
||
|
|
this.showPicker = false;
|
||
|
|
if(e) {
|
||
|
|
this[this.type] = e.value;
|
||
|
|
//选择的值
|
||
|
|
this.startTime = this.range[0].replace(/\//g, "-")
|
||
|
|
this.endTime = this.range[1].replace(/\//g, "-")
|
||
|
|
this.getData()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReset(){
|
||
|
|
this.showPicker = false;
|
||
|
|
this.range = []
|
||
|
|
this.startTime = ''
|
||
|
|
this.endTime = ''
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
searchDaysChange(e){
|
||
|
|
this.createFixedTimeVal = e.detail.value
|
||
|
|
this.createFixedTime = this.searchDays[e.detail.value].value
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
|
||
|
|
relatedtimeChange(e) {
|
||
|
|
this.startTime = e.detail.value
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
|
||
|
|
departmentChange(e){
|
||
|
|
this.departmentIdVal = e.detail.value
|
||
|
|
this.departmentId = this.departmentList[+e.detail.value].id
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
|
||
|
|
// 部门数据
|
||
|
|
async listDepartment(){
|
||
|
|
let res= await this.$http.get('/api-hrms/hrms/dept/listDepartment')
|
||
|
|
this.departmentList = res.data
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
// 状态数量
|
||
|
|
async businessCount(){
|
||
|
|
let res= await this.$http.get('/api-guarantee/guarantee/efficiency/businessCount')
|
||
|
|
this.teamStatus = []
|
||
|
|
if(res.data && res.data.length !== 0){
|
||
|
|
this.teamStatus = res.data
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getData(){
|
||
|
|
this.$http.post('/api-guarantee/guarantee/efficiency/team',{
|
||
|
|
createFixedTime: this.createFixedTime,
|
||
|
|
departmentId: this.departmentId,
|
||
|
|
startTime: this.startTime,
|
||
|
|
endTime: this.endTime,
|
||
|
|
flowStatus: this.flowStatus
|
||
|
|
}).then(res => {
|
||
|
|
let obj = Object.keys(res.data);
|
||
|
|
if(obj.length != 0){
|
||
|
|
let valArr = []
|
||
|
|
for(let i in res.data){
|
||
|
|
if(res.data.length===0) return
|
||
|
|
let arr = [{
|
||
|
|
depName: '业务申请',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '担保部调查',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '资产部调查',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '信息部调查',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '合规调查',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '工作会',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '贷审会',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '担保函',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '回款确认',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
depName: '放款通知',
|
||
|
|
number: 0,
|
||
|
|
name: '0'
|
||
|
|
}]
|
||
|
|
|
||
|
|
// 分离出来第几个数组有数据
|
||
|
|
// 循环子级，分离数据
|
||
|
|
for(let e in res.data[i]){
|
||
|
|
// 时间的处理
|
||
|
|
arr[e-1].name = this.getDuration(res.data[i][e].slice(0,res.data[i][e].indexOf(',')))
|
||
|
|
arr[e-1].number = res.data[i][e].slice(res.data[i][e].indexOf(',')+1,res.data[i][e].length)
|
||
|
|
arr[e-1].depName = this.core.processNode(e)
|
||
|
|
}
|
||
|
|
valArr.push(arr)
|
||
|
|
}
|
||
|
|
let keyArr = []
|
||
|
|
keyArr = Object.keys(res.data)
|
||
|
|
let newArr = keyArr.map(item => ({id:item}))
|
||
|
|
for(let i=0;i<newArr.length;i++){
|
||
|
|
newArr[i].nodeList = valArr[i]
|
||
|
|
}
|
||
|
|
this.departmentList.map(e =>{
|
||
|
|
newArr.map(r =>{
|
||
|
|
if(e.id == r.id){
|
||
|
|
r.name = e.name
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
this.list = newArr
|
||
|
|
this.mescroll.endErr();
|
||
|
|
}else{
|
||
|
|
this.mescroll.endErr();
|
||
|
|
}
|
||
|
|
}).catch(()=>{
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/*下拉刷新的回调 */
|
||
|
|
downCallback() {
|
||
|
|
// this.mescroll.resetUpScroll()
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
// 切换菜单
|
||
|
|
tabChange (index) {
|
||
|
|
this.flowStatus = this.tabs[index].value;//当前下标的值
|
||
|
|
this.list = []; // 置空列表,显示加载进度条
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
getDuration(my_time) {
|
||
|
|
let days = my_time / 1000 / 60 / 60 / 24;
|
||
|
|
let daysRound = Math.floor(days);
|
||
|
|
let hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
|
||
|
|
let hoursRound = Math.floor(hours);
|
||
|
|
let minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
|
||
|
|
let minutesRound = Math.floor(minutes);
|
||
|
|
let seconds = my_time / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
|
||
|
|
let timeStr = daysRound + '天'+ hoursRound + '时'+ minutesRound + '分'
|
||
|
|
// let time = hoursRound + ':' + minutesRound + ':' + seconds // 生成 标准时间格式
|
||
|
|
return timeStr;
|
||
|
|
},
|
||
|
|
getTimeNum(my_time){
|
||
|
|
let days = my_time / 1000 / 60 / 60 / 24;
|
||
|
|
let daysRound = Math.floor(days);
|
||
|
|
let hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
|
||
|
|
let hoursRound = Math.floor(hours);
|
||
|
|
let minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
|
||
|
|
let minutesRound = Math.floor(minutes);
|
||
|
|
let time = daysRound+(hoursRound / 24)+(minutesRound/60/24)
|
||
|
|
time.toFixed(2)
|
||
|
|
// if(time === 0) time = 0.1
|
||
|
|
return time
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cu-bar .search-form{
|
||
|
|
border: 2rpx solid #00B9FF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0 50rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
input{
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
.cuIcon-search{
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.add-customer{
|
||
|
|
padding: 0 50rpx;
|
||
|
|
button{
|
||
|
|
background-color: #00B9FF;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
.mar-icon{
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pick-border{
|
||
|
|
border-bottom: 8rpx solid #00B9FF;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
</style>
|