irc_web/src/views/trials/trials-panel/attachments/enrollment/components/Confirmation.vue

247 lines
7.2 KiB
Vue

<template>
<BaseContainer>
<template slot="search-container">
<div style="margin-left: auto">
<!-- Confirm -->
<el-button
v-if="hasPermi(['role:pm'])"
icon="el-icon-check"
type="primary"
:disabled="confirmIdArr.length == 0"
:loading="loading"
@click="handleConfirm"
>
{{ $t('trials:seletctedReviews:button:confirm') }}
</el-button>
</div>
</template>
<template slot="main-container">
<el-table
v-loading="listLoading"
v-adaptive="{ bottomOffset: 65 }"
height="100"
:data="list"
class="table"
:row-class-name="handleHighLighRow"
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" :selectable="handleSelectTable" />
<el-table-column type="index" width="40" />
<!-- Name -->
<el-table-column
prop="LastName"
:label="$t('trials:seletctedReviews:table:name')"
show-overflow-tooltip
min-width="120"
sortable="custom"
>
<template slot-scope="scope">
<!-- <el-button type="text" @click="go(`/trialsResume?doctorId=${scope.row.Id}&token=${token}`)">{{ scope.row.LastName }} / {{ scope.row.FirstName }}</el-button> -->
<span
style="color: #428bca; cursor: pointer"
@click="
go(
`/trialsResume?doctorId=${scope.row.Id}&trialId=${$route.query.trialId}&token=${token}`
)
"
>{{ scope.row.LastName }} / {{ scope.row.FirstName }}</span
>
</template>
</el-table-column>
<!-- Name CN -->
<el-table-column
v-if="!isEN"
prop="ChineseName"
:label="$t('trials:seletctedReviews:table:nameCN')"
show-overflow-tooltip
min-width="120"
sortable="custom"
/>
<!-- ID -->
<el-table-column
prop="Code"
:label="$t('trials:seletctedReviews:table:id')"
min-width="100"
show-overflow-tooltip
sortable="custom"
/>
<!-- Status -->
<el-table-column
prop="DoctorTrialState"
:label="$t('trials:seletctedReviews:table:status')"
min-width="120"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.DoctorTrialState === 10" type="primary">{{
$fd('DoctorTrialState', scope.row.DoctorTrialState)
}}</el-tag>
<el-tag v-if="scope.row.DoctorTrialState === 9" type="warning">{{
$fd('DoctorTrialState', scope.row.DoctorTrialState)
}}</el-tag>
<el-tag v-if="scope.row.DoctorTrialState === 8" type="danger">{{
$fd('DoctorTrialState', scope.row.DoctorTrialState)
}}</el-tag>
</template>
</el-table-column>
<!-- Confirmor -->
<el-table-column
prop="OptUserName"
:label="$t('trials:seletctedReviews:table:confirmor')"
min-width="120"
/>
<!-- Confirmation Time -->
<el-table-column
prop="OptTimeStr"
:label="$t('trials:seletctedReviews:table:confirmationTime')"
min-width="150"
/>
<!-- <el-table-column label="Action" fixed="right" width="150">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-view" @click="handleDetail(scope.row)">Detail</el-button>
</template>
</el-table-column> -->
</el-table>
<pagination
class="page"
:total="total"
:page.sync="listQuery.PageIndex"
:limit.sync="listQuery.PageSize"
@pagination="getList"
/>
</template>
</BaseContainer>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import { getConfirmationReviewerList, confirmReviewer } from '@/api/trials'
import store from '@/store'
export default {
name: 'Confirmation',
components: { BaseContainer, Pagination },
props: {
isEN: {
type: Boolean,
default: false,
},
},
data() {
return {
list: [],
loading: false,
listQuery: {
TrialId: '',
PageIndex: 1,
PageSize: 20,
Asc: false,
SortField: '',
},
total: 0,
listLoading: false,
confirmIdArr: [],
token: store.getters.token,
}
},
created() {
this.initPage()
},
methods: {
go(path) {
window.open(path)
},
initPage() {
this.getList()
},
getList() {
this.listLoading = true
this.listQuery.TrialId = this.$route.query.trialId
getConfirmationReviewerList(this.listQuery)
.then((res) => {
this.listLoading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
// eslint-disable-next-line handle-callback-err
})
.catch(() => {
this.listLoading = false
})
},
handleConfirm() {
// Reviewer(s) Confirmed?
this.$confirm(this.$t('trials:seletctedReviews:message:msg2'), {
type: 'warning',
distinguishCancelAndClose: true,
})
.then(() => {
this.doctorConfirm(1)
})
.catch((action) => {
// if (action === 'cancel') {
// this.doctorConfirm(0)
// }
})
},
doctorConfirm(state) {
this.loading = true
const trialId = this.$route.query.trialId
var params = {
TrialId: trialId,
DoctorIdArray: this.confirmIdArr,
ConfirmState: state,
BaseUrl: `${location.protocol}//${location.host}/login`,
RouteUrl: `${location.protocol}//${location.host}/email-recompose`,
}
confirmReviewer(params)
.then((res) => {
this.loading = false
this.getList()
this.$message.success(this.$t('common:message:savedSuccessfully'))
})
.catch(() => {
this.loading = false
})
},
handleSelectionChange(val) {
const arr = []
for (let index = 0; index < val.length; index++) {
arr.push(val[index].Id)
}
this.confirmIdArr = arr
},
handleSortChange(column) {
if (column.order === 'ascending') {
this.listQuery.Asc = true
} else {
this.listQuery.Asc = false
}
this.listQuery.SortField = column.prop
this.listQuery.PageIndex = 1
this.getList()
},
handleHighLighRow({ row, rowIndex }) {
if (row.DoctorTrialState === 10) {
return 'selected'
}
},
handleSelectTable(row) {
return row.DoctorTrialState !== 10
},
handleDetail(row) {
const { href } = this.$router.resolve({
path: `/trialsResume?doctorId=${row.Id}&trialId=${this.$route.query.trialId}`,
})
window.open(href, '_blank')
},
cellColor({ row, column, rowIndex, columnIndex }) {
if (row.DoctorTrialState === 10 && columnIndex === 5) {
return {
color: '#428bca',
}
}
},
},
}
</script>