github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-27 13:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat：审批中心-逻辑优化

Browse Source
This commit is contained in:
weifashi 2023-09-12 14:50:59 +08:00
parent 1d2f50c896
commit c861f49e29
3 changed files with 86 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/assets/js/pages/manage/approve/details.vue
View File

@ -10,43 +10,46 @@
<!-- 审批详情 -->
<div class="approve-details-box" ref="approveDetailsBox">
<h2 class="approve-details-title">
<span>{{$L(datas.proc_def_name)}}</span>
<span>{{$L(datas.proc_def_name || '- -')}}</span>
<Tag v-if="datas.state == 0" color="cyan">{{$L('待审批')}}</Tag>
<Tag v-if="datas.state == 1" color="cyan">{{$L('审批中')}}</Tag>
<Tag v-if="datas.state == 2" color="green">{{$L('已通过')}}</Tag>
<Tag v-if="datas.state == 3" color="red">{{$L('已拒绝')}}</Tag>
<Tag v-if="datas.state == 4" color="red">{{$L('已撤回')}}</Tag>
</h2>
<h3 class="approve-details-subtitle"><Avatar :src="datas.userimg" size="24"/><span>{{datas.start_user_name}}</span></h3>
<h3 class="approve-details-subtitle">
<Avatar :src="datas.userimg" size="24"/>
<span>{{datas.start_user_name}}</span>
</h3>
<h3 class="approve-details-subtitle"><span>{{$L('提交于')}} {{datas.start_time}}</span></h3>
<Divider/>
<div class="approve-details-text" v-if="(datas.proc_def_name || '').indexOf('请假') !== -1 && datas.var?.type">
<h4>{{$L('假期类型')}}</h4>
<p>{{$L(datas.var?.type)}}</p>
<p>{{$L(datas.var?.type || '- -')}}</p>
</div>
<div class="approve-details-text">
<h4>{{$L('开始时间')}}</h4>
<div class="time-text">
<span>{{datas.var?.start_time}}</span>
<span>({{getWeekday(datas.var?.start_time)}})</span>
<span>{{datas.var?.start_time || '- -'}}</span>
<span v-if="datas.var?.start_time">({{getWeekday(datas.var?.start_time)}})</span>
</div>
</div>
<div class="approve-details-text">
<h4>{{$L('结束时间')}}</h4>
<div class="time-text">
<span>{{datas.var?.end_time}}</span>
<span>({{getWeekday(datas.var?.end_time)}})</span>
<span>{{datas.var?.end_time || '- -'}}</span>
<span v-if="datas.var?.end_time">({{getWeekday(datas.var?.end_time)}})</span>
</div>
</div>
<div class="approve-details-text">
<h4>{{ $L('时长') }}（{{getTimeDifference(datas.var?.start_time,datas.var?.end_time)['unit']}}）</h4>
<p>{{ datas.var?.start_time ? getTimeDifference(datas.var?.start_time,datas.var?.end_time)['time'] : 0 }}</p>
<p>{{ datas.var?.start_time ? getTimeDifference(datas.var?.start_time,datas.var?.end_time)['time'] : '- -' }}</p>
</div>
<div class="approve-details-text">
<h4>{{$L('事由')}}</h4>
<p>{{datas.var?.description}}</p>
<p>{{datas.var?.description || '- -'}}</p>
</div>
<div class="approve-details-text" v-if="datas.var?.other">
<h4>{{$L('图片')}}</h4>
@ -273,7 +276,6 @@ export default {
init() {
this.modalTransferIndex = window.modalTransferIndex = window.modalTransferIndex + 1
if (this.$route.query.id) {
this.data.id = this.$route.query.id;
this.getInfo()
}
},
@ -326,7 +328,7 @@ export default {
method: 'get',
url: 'approve/process/detail',
data: {
id: this.data.id,
id: this.$route.query.id || this.data.id,
}
}).then(({data}) => {
var show = true;
@ -422,7 +424,7 @@ export default {
method: 'post',
url: 'approve/process/addGlobalComment',
data: {
proc_inst_id: this.data.id,
proc_inst_id: this.$route.query.id || this.data.id,
content: JSON.stringify({
'content': this.commentData.content,
'pictures': this.commentData.pictures.map(h => {

161
resources/assets/js/pages/manage/approve/index.vue
View File

@ -41,22 +41,23 @@
<Button v-show="isShowIcon" type="primary" :loading="loadIng" icon="ios-search" @click="tabsClick(false,0)" />
</div>
</div>
<div>
<div v-if="unreadList.length==0" class="noData" >{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in unreadList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div>
<div class="load" v-if="unreadList.length < unreadTotal">
<Loading/>
</div>
<div v-if="loadIng && unreadList.length==0" class="approve-load">
<Loading/>
</div>
<div v-else-if="unreadList.length==0" class="noData">{{ $L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
<div @click.stop="clickList(item,key)" v-for="(item,key) in unreadList">
<list :class="{ 'approve-list-active': item._active }" :data="item"></list>
</div>
<div class="load" v-if="unreadList.length < unreadTotal">
<Loading/>
</div>
</div>
<div class="approve-main-right">
<listDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
</div>
</div>
<div class="approve-main-right">
<listDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
</div>
</div>
</TabPane>
@ -71,7 +72,10 @@
<Button v-show="isShowIcon" type="primary" :loading="loadIng" icon="ios-search" @click="tabsClick(false,0)"/>
</div>
</div>
<div v-if="doneList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-if="loadIng && doneList.length==0" class="approve-load">
<Loading/>
</div>
<div v-else-if="doneList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
@ -101,7 +105,10 @@
</div>
</div>
</div>
<div v-if="notifyList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-if="loadIng && notifyList.length==0" class="approve-load">
<Loading/>
</div>
<div v-else-if="notifyList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
@ -132,7 +139,10 @@
<Button v-show="isShowIcon" type="primary" :loading="loadIng" icon="ios-search" @click="tabsClick(false,0)"/>
</div>
</div>
<div v-if="initiatedList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-if="loadIng && initiatedList.length==0" class="approve-load">
<Loading/>
</div>
<div v-else-if="initiatedList.length==0" class="noData">{{$L('暂无数据')}}</div>
<div v-else class="approve-mains">
<div class="approve-main-left">
<div class="approve-main-list" @scroll="handleScroll">
@ -383,6 +393,9 @@ export default {
this.isShowIcon = val < 515
}
},
activated() {
this.showType = 1
},
mounted() {
this.tabsValue = "unread"
this.init()
@ -536,29 +549,8 @@ export default {
username: this.approvalName,
}
}).then(({data}) => {
let activeId = 0;
let activeIndex = 0;
this.unreadTotal = data.total;
if( this.unreadList.length == 0 || this.unreadList.length == data.rows.length){
this.unreadList?.map((res)=>{ if(res._active) activeId = res.id })
}
let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index
if(type == 'scroll' && this.unreadList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.unreadList.push(h)
}
return h;
})
if(type != 'scroll'){
this.unreadList = lists;
}
if(this.tabsValue == 'unread'){
this.$nextTick(()=>{
this.details = this.unreadList[activeIndex] || {}
})
}
}).catch(({msg}) => {
this.updateData('unread',data,type)
}).catch((msg) => {
$A.modalError(msg);
}).finally(_ => {
this.loadIng = false;
@ -578,28 +570,7 @@ export default {
username: this.approvalName,
}
}).then(({data}) => {
let activeId = 0;
let activeIndex = 0;
this.doneTotal = data.total;
if( this.doneList.length == 0 || this.doneList.length == data.total){
this.doneList?.map((res)=>{ if(res._active) activeId = res.id })
}
let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index
if(type == 'scroll' && this.doneList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.doneList.push(h)
}
return h;
})
if(type != 'scroll'){
this.doneList = lists;
}
if(this.tabsValue == 'done'){
this.$nextTick(()=>{
this.details = this.doneList[activeIndex] || {}
})
}
this.updateData('done',data,type)
}).catch(({msg}) => {
$A.modalError(msg);
}).finally(_ => {
@ -620,28 +591,7 @@ export default {
username: this.approvalName,
}
}).then(({data}) => {
let activeId = 0;
let activeIndex = 0;
this.notifyTotal = data.total;
if( this.notifyList.length == 0 || this.notifyList.length == data.rows.length){
this.notifyList?.map((res)=>{ if(res._active) activeId = res.id })
}
let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index
if(type == 'scroll' && this.notifyList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.notifyList.push(h)
}
return h;
})
if(type != 'scroll'){
this.notifyList = lists;
}
if(this.tabsValue == 'notify'){
this.$nextTick(()=>{
this.details = this.notifyList[activeIndex] || {}
})
}
this.updateData('notify',data,type)
}).catch(({msg}) => {
$A.modalError(msg);
}).finally(_ => {
@ -663,28 +613,7 @@ export default {
username: this.approvalName,
}
}).then(({data}) => {
let activeId = 0;
let activeIndex = 0;
this.initiatedTotal = data.total;
if( this.initiatedList.length == 0 || this.initiatedList.length == data.rows.length){
this.initiatedList?.map((res)=>{ if(res._active) activeId = res.id })
}
let lists = data.rows.map((h,index)=>{
h._active = activeId > 0 ? h.id == activeId : index == 0;
if(h._active) activeIndex = index
if(type == 'scroll' && this.initiatedList.map(item=>{return item.id}).indexOf(h.id) == -1 ){
this.initiatedList.push(h)
}
return h;
})
if(type != 'scroll'){
this.initiatedList = lists;
}
if(this.tabsValue == 'initiated'){
this.$nextTick(()=>{
this.details = this.initiatedList[activeIndex] || {}
})
}
this.updateData('initiated',data,type)
}).catch(({msg}) => {
$A.modalError(msg);
}).finally(_ => {
@ -717,6 +646,26 @@ export default {
});
},
// 更新数据
updateData(key,data,type) {
let listKey = key + 'List'
let activeIndex = this[listKey].map((h, index) => h._active ? index : -1).filter(h => h > -1)[0] || 0
this[key + 'Total'] = data.total;
type != 'scroll' ? (this[listKey] = data.rows) : data.rows.map(h => {
if (this[listKey].map(item => { return item.id }).indexOf(h.id) == -1) {
this[listKey].push(h)
}
});
if(this[listKey].length > 0){
this[listKey][activeIndex]._active = true;
if (this.tabsValue == key) {
this.$nextTick(() => {
this.details = this[listKey][activeIndex] || {}
})
}
}
},
// 提交发起
onInitiate(){
this.$refs.initiateRef.validate((valid) => {

25
resources/assets/sass/pages/page-approve.scss vendored
View File

@ -66,6 +66,11 @@
}
}
.approve-load {
text-align: center;
padding-top: 20px;
}
.noData {
text-align: center;
line-height: 150px;
@ -278,13 +283,18 @@
.approve-process-state {
font-size: 12px;
color: #19be6b;
height: 21px;
}
.approve-process-left {
margin-left: 10px;
flex: 1;
width: 0;
.approve-process-desc{
font-size: 12px;
max-width: 100%;
overflow: auto;
word-break:break-all;
}
}
@ -386,13 +396,15 @@
.approve-load {
position: absolute;
top: 0;
left: 24px;
right: 0;
bottom: 0;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
display: flex;
z-index: 9;
background: #ffffff;
// background: #ffffff;
background: #00000005;
}
.comment {
@ -492,8 +504,5 @@ body.window-portrait {
.approve-head {
margin: 24px 16px 6px 16px;
}
.approve-mains {
height: calc(100vh - 250px);
}
}
}