208 lines
7.0 KiB
Vue
208 lines
7.0 KiB
Vue
<template>
|
|
<div class="team-application-process-list">
|
|
<el-drawer
|
|
:title="$t('pages.teamList.applicationProcess.title')"
|
|
:visible="true"
|
|
:before-close="handleClose"
|
|
:close-on-press-escape="false"
|
|
:wrapper-closable="false"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
custom-class="drawer-auto-layout"
|
|
>
|
|
<div class="filter-container" style="margin: 10px;">
|
|
<el-select
|
|
v-model="listQuery.status"
|
|
:placeholder="$t('pages.teamList.applicationProcess.status')"
|
|
style="width: 120px"
|
|
class="filter-item"
|
|
@change="handleSearch"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in teamApplicationProcessStatusList"
|
|
:key="index"
|
|
:label="getProcessStatusName(item.value)"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
v-model="listQuery.reason"
|
|
:placeholder="$t('pages.teamList.applicationProcess.reason')"
|
|
style="width: 120px"
|
|
class="filter-item"
|
|
@change="handleSearch"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in teamReasons"
|
|
:key="index"
|
|
:label="getReasonName(item.value)"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
@click="handleSearch"
|
|
>
|
|
{{ $t('pages.teamList.action.query') }}
|
|
</el-button>
|
|
</div>
|
|
<div v-loading="listLoading">
|
|
<el-row v-for="(item, index) in list" :key="index">
|
|
<el-card style="margin: 10px;">
|
|
<div>
|
|
<el-tag>{{ $t('pages.teamList.applicationProcess.applicationType') }}: {{ getReasonName(item.reason) }}</el-tag>
|
|
<el-tag v-if="item.status === 'WAIT'" type="warning">{{ $t('pages.teamList.applicationProcess.reviewStatus') }}: {{ getProcessStatusName(item.status) }}</el-tag>
|
|
<el-tag v-if="item.status === 'AGREE'" type="success">{{ $t('pages.teamList.applicationProcess.reviewStatus') }}: {{ getProcessStatusName(item.status) }}</el-tag>
|
|
<el-tag v-if="item.status === 'REJECT'" type="danger">{{ $t('pages.teamList.applicationProcess.reviewStatus') }}: {{ getProcessStatusName(item.status) }}</el-tag>
|
|
</div>
|
|
<div class="bottom clearfix">
|
|
<el-tag v-if="item.createUserOrigin == 1 && item.createSysUser != null" type="info">{{ $t('pages.teamList.applicationProcess.createdBy') }}: <span style="color: black;">{{ item.createSysUser.nickname }}</span> {{ item.createTime }}</el-tag>
|
|
<el-tag v-if="item.createUserOrigin == 0 && item.createUserProfile != null" type="info" @click.native="queryUserDetails(item.createUserProfile.id)">{{ $t('pages.teamList.applicationProcess.createdBy') }}: <span style="color: black;">{{ item.createUserProfile.userNickname }}</span> {{ item.createTime }}</el-tag>
|
|
<el-tag v-if="item.updateUserOrigin == 1 && item.updateSysUser != null" type="info">{{ $t('pages.teamList.applicationProcess.updatedBy') }}: <span style="color: black;">{{ item.updateSysUser.nickname }}</span> {{ item.updateTime }}</el-tag>
|
|
<el-tag v-if="item.updateUserOrigin == 0 && item.updateUserProfile != null" type="info" @click.native="queryUserDetails(item.updateUserProfile.id)">{{ $t('pages.teamList.applicationProcess.updatedBy') }}: <span style="color: black;">{{ item.updateUserProfile.userNickname }}</span> {{ item.updateTime }}</el-tag>
|
|
</div>
|
|
<!-- <div v-if="item.status === 'WAIT'" class="clearfix">
|
|
<el-button type="text" @click.native="handleStatus(item.id, 'AGREE')">Agree</el-button>
|
|
<el-button type="text" @click.native="handleStatus(item.id, 'REJECT')">Reject</el-button>
|
|
</div> -->
|
|
</el-card>
|
|
</el-row>
|
|
<div v-if="list && list.length > 0" style="text-align: center; margin-top:20px;">
|
|
<el-button v-if="!notMore " size="mini" :disabled="listLoading" @click="clickLoadMore">{{ $t('pages.teamList.action.loadMore') }}</el-button>
|
|
<span v-else>{{ $t('pages.teamList.action.allLoaded') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<user-deatils-drawer
|
|
v-if="userDeatilsDrawer"
|
|
:user-id="thatSelectedUserId"
|
|
@close="userDeatilsDrawer=false"
|
|
/>
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { teamProcessTable, teamProcessChangeStatus } from '@/api/team'
|
|
import { teamApplicationProcessStatusList, teamReasons } from '@/constant/team-type'
|
|
export default {
|
|
name: 'TeamApplicationProcess',
|
|
props: {
|
|
teamId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
teamApplicationProcessStatusList,
|
|
teamReasons,
|
|
submitLoading: false,
|
|
list: [],
|
|
listLoading: false,
|
|
total: 0,
|
|
notMore: false,
|
|
userDeatilsDrawer: false,
|
|
thatSelectedUserId: '',
|
|
listQuery: {
|
|
reason: '',
|
|
associateId: '',
|
|
status: '',
|
|
lastId: ''
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.listQuery.reason = this.teamReasons[0].value
|
|
this.listQuery.status = this.teamApplicationProcessStatusList[0].value
|
|
this.renderData()
|
|
},
|
|
methods: {
|
|
renderData(isClean) {
|
|
const that = this
|
|
that.listLoading = true
|
|
that.listQuery.associateId = that.teamId
|
|
if (isClean === true) {
|
|
that.list = []
|
|
that.listQuery.lastId = ''
|
|
}
|
|
teamProcessTable(that.listQuery).then(res => {
|
|
that.listLoading = false
|
|
const { body } = res
|
|
const list = body || []
|
|
that.notMore = list.length <= 0
|
|
that.list = that.list.concat(list)
|
|
if (that.list && that.list.length > 0) {
|
|
that.listQuery.lastId = that.list[that.list.length - 1].id
|
|
}
|
|
})
|
|
},
|
|
handleStatus(_id, _status) {
|
|
const that = this
|
|
that.listLoading = true
|
|
teamProcessChangeStatus({ 'id': _id, 'status': _status }).then((res) => {
|
|
that.listLoading = false
|
|
that.$opsMessage.success()
|
|
that.renderData(true)
|
|
}).catch(() => {
|
|
that.listLoading = false
|
|
})
|
|
},
|
|
handleSearch() {
|
|
this.renderData(true)
|
|
},
|
|
handleClose() {
|
|
this.$emit('close')
|
|
},
|
|
queryUserDetails(id) {
|
|
this.thatSelectedUserId = id
|
|
this.userDeatilsDrawer = true
|
|
},
|
|
clickLoadMore() {
|
|
this.renderData()
|
|
},
|
|
getProcessStatusName(status) {
|
|
return this.$t(`pages.teamList.processStatusMap.${status}`)
|
|
},
|
|
getReasonName(reason) {
|
|
return this.$t(`pages.teamList.reasonMap.${reason}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.time {
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 13px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.button {
|
|
padding: 0;
|
|
float: right;
|
|
}
|
|
|
|
.image {
|
|
width: 30%;
|
|
margin-top: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
</style>
|