353 lines
9.0 KiB
Plaintext
353 lines
9.0 KiB
Plaintext
<template>
|
|
<div class="app-container data-list">
|
|
<div class="toolbar">
|
|
<el-row>
|
|
<el-input
|
|
v-model="listQuery.Code"
|
|
placeholder="Trial ID"
|
|
style="width: 160px"
|
|
size="small"
|
|
clearable
|
|
/>
|
|
<el-input
|
|
v-model="listQuery.Indication"
|
|
placeholder="Indication"
|
|
style="width: 160px"
|
|
size="small"
|
|
clearable
|
|
/>
|
|
|
|
<el-select
|
|
v-model="listQuery.Expedited"
|
|
value-key="value"
|
|
placeholder="Expedited"
|
|
clearable
|
|
size="small"
|
|
style="width: 160px"
|
|
>
|
|
<el-option
|
|
v-for="item in expeditedOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
|
|
<el-select
|
|
v-model="listQuery.EnrollStatus"
|
|
value-key="value"
|
|
placeholder="Enroll Status"
|
|
clearable
|
|
size="small"
|
|
style="width: 160px"
|
|
>
|
|
<el-option
|
|
v-for="item in enrollStatusOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click="handleReset"
|
|
>Reset</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleSearch"
|
|
>Search</el-button>
|
|
</el-row>
|
|
</div>
|
|
<div class="data-table">
|
|
<el-table
|
|
ref="trialsList"
|
|
v-loading="listLoading"
|
|
:data="list"
|
|
stripe
|
|
class="table"
|
|
size="small"
|
|
height="100%"
|
|
@sort-change="handleSortChange"
|
|
>
|
|
<el-table-column type="index" width="50" />
|
|
|
|
<el-table-column
|
|
prop="Code"
|
|
min-width="110"
|
|
label="Trial ID"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="Expedited"
|
|
min-width="110"
|
|
label="Expedited"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
>
|
|
<template slot-scope="scope">{{
|
|
scope.row.Expedited == 0
|
|
? 'No'
|
|
: scope.row.Expedited == 1
|
|
? '24H'
|
|
: '48H'
|
|
}}</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="Indication"
|
|
label="Indication"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="Phase"
|
|
min-width="100"
|
|
label="Phase"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="ReviewMode"
|
|
label="Review Mode"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="Criterion"
|
|
label="Criteria"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="Modalities"
|
|
label="Modalities"
|
|
min-width="120"
|
|
:formatter="ModalitiesFormatter"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
prop="CRO"
|
|
label="CRO"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="Sponsor"
|
|
label="Sponsor"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
sortable="custom"
|
|
/>
|
|
<el-table-column
|
|
prop="CreateTime"
|
|
label="Date Created"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
:formatter="timeFormatter"
|
|
sortable="custom"
|
|
/>
|
|
|
|
<el-table-column
|
|
prop="EnrollStatus"
|
|
label="Enroll State"
|
|
min-width="120"
|
|
show-overflow-tooltip
|
|
:formatter="enrollStatusFormatter"
|
|
sortable="custom"
|
|
/>
|
|
|
|
<el-table-column
|
|
label="Action"
|
|
min-width="150"
|
|
align="left"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.EnrollStatus>=10"
|
|
type="text"
|
|
size="small"
|
|
@click="handleToWorkLoad(scope.row)"
|
|
>WorkLoad</el-button>
|
|
<el-button
|
|
:disabled="scope.row.EnrollStatus!=8"
|
|
type="text"
|
|
size="small"
|
|
@click="
|
|
enrollVisible = true
|
|
trialId = scope.row.Id
|
|
enrollStatus=scope.row.EnrollStatus
|
|
"
|
|
>Enroll</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination">
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="listQuery.PageIndex"
|
|
:limit.sync="listQuery.PageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</div>
|
|
<el-dialog
|
|
title="Enroll"
|
|
:visible.sync="enrollVisible"
|
|
width="400px"
|
|
size="small"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-radio-group v-model="enrollStatus">
|
|
<el-radio :label="9">Reject Enroll</el-radio>
|
|
<el-radio :label="10">Confirm Enroll</el-radio>
|
|
</el-radio-group>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button size="small" @click="enrollVisible = false">Cancel</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
:disabled="btnDisable"
|
|
@click="handleEnroll"
|
|
>OK</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Pagination from '@/components/Pagination'
|
|
import { formatUTCTime } from '@/utils/formatter'
|
|
import { getTrialListByReviewer, updateEnrollStatus } from '@/api/reading'
|
|
const getListQueryDefault = () => {
|
|
return {
|
|
Code: '',
|
|
Expedited: '',
|
|
Indication: '',
|
|
EnrollStatus: '',
|
|
PageIndex: 1,
|
|
PageSize: 20,
|
|
Asc: false,
|
|
SortField: ''
|
|
}
|
|
}
|
|
export default {
|
|
name: 'ReviewerTrials',
|
|
components: { Pagination },
|
|
data() {
|
|
return {
|
|
btnDisable: false,
|
|
trialId: '',
|
|
enrollStatus: '',
|
|
enrollVisible: false,
|
|
listQuery: getListQueryDefault(),
|
|
list: [],
|
|
listLoading: false,
|
|
total: 0,
|
|
|
|
expeditedOption: [
|
|
{ value: 0, label: 'No' },
|
|
{ value: 2, label: '48-Hour' },
|
|
{ value: 1, label: '24-Hour' }
|
|
],
|
|
enrollStatusOption: [
|
|
{ value: 8, label: 'Enrolling' },
|
|
{ value: 9, label: 'Rejected' },
|
|
{ value: 10, label: 'Reading' },
|
|
{ value: 14, label: 'End' }
|
|
|
|
]
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.listLoading = true
|
|
|
|
getTrialListByReviewer(this.listQuery)
|
|
.then((res) => {
|
|
this.list = res.Result.CurrentPageData
|
|
this.total = res.Result.TotalCount
|
|
this.listLoading = false
|
|
})
|
|
.catch(() => {
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
handleSelectSearch() {
|
|
this.isShow = false
|
|
this.getList()
|
|
},
|
|
handleSearch() {
|
|
this.listQuery.PageIndex = 1
|
|
this.getList()
|
|
},
|
|
handleReset() {
|
|
this.listQuery = getListQueryDefault()
|
|
this.getList()
|
|
},
|
|
handleEnroll() {
|
|
this.btnDisable = true
|
|
updateEnrollStatus(this.trialId, this.enrollStatus)
|
|
.then((res) => {
|
|
this.enrollVisible = false
|
|
|
|
if (this.enrollStatus === 9) { this.$message.success('Reject successfully') } else { this.$message.success('Enroll successfully') }
|
|
|
|
this.getList()
|
|
})
|
|
.catch(() => {
|
|
this.btnDisable = false
|
|
})
|
|
},
|
|
|
|
handleToWorkLoad(row) {
|
|
this.$router.push({
|
|
name: 'WorkloadPannel',
|
|
query: {
|
|
TrialId: row.Id
|
|
}
|
|
})
|
|
},
|
|
|
|
ModalitiesFormatter(row, column) {
|
|
if (row.ModalityList.length > 0) return row.ModalityList.join(', ')
|
|
},
|
|
|
|
timeFormatter(row) {
|
|
if (row.CreateTime) {
|
|
return formatUTCTime(row.CreateTime)
|
|
}
|
|
},
|
|
enrollStatusFormatter(row) {
|
|
if (row.EnrollStatus === 8) { return 'Need Confirm' } else if (row.EnrollStatus === 9) { return 'Rejected' } else if (row.EnrollStatus === 10 || row.EnrollStatus === 12 || row.EnrollStatus === 13) {
|
|
return 'Reading'
|
|
} else {
|
|
return 'End'
|
|
}
|
|
},
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
</script>
|