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

715 lines
21 KiB
Vue

<template>
<BaseContainer>
<template slot="search-container">
<el-form :inline="true">
<!-- Name -->
<el-form-item :label="$t('trials:seletctedReviews:table:name')">
<el-input
v-model="listQuery.Name"
size="small"
clearable
style="width: 120px"
/>
</el-form-item>
<!-- Modality -->
<el-form-item :label="$t('trials:seletctedReviews:form:modality')">
<el-select
v-model="listQuery.ReadingTypeIdList"
class="handle-select"
clearable
multiple
collapse-tags
style="width: 160px"
>
<el-option
v-for="item of $d.ReadingType"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- Subspeciality -->
<el-form-item :label="$t('trials:seletctedReviews:form:subspeciality')">
<el-select
v-model="listQuery.SubspecialityIdList"
class="handle-select"
clearable
multiple
collapse-tags
style="width: 160px"
>
<el-option
v-for="item of $d.Subspeciality"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- Position -->
<el-form-item :label="$t('trials:seletctedReviews:form:position')">
<el-select
v-model="listQuery.PositionId"
class="handle-select"
clearable
style="width: 160px"
>
<el-option
v-for="item of $d.Position"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- Rank -->
<el-form-item :label="$t('trials:seletctedReviews:form:rank')">
<el-select
v-model="listQuery.RankId"
class="handle-select"
style="width: 160px"
clearable
>
<el-option
v-for="item of $d.Rank"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- Institution -->
<el-form-item :label="$t('trials:seletctedReviews:form:institution')">
<el-select
v-model="listQuery.HospitalId"
class="handle-select mr10"
clearable
style="width: 160px"
>
<el-option
v-for="(item, index) in hospitalList"
:key="index"
:label="item.HospitalName"
:value="item.Id"
/>
</el-select>
</el-form-item>
<!-- 查询 -->
<el-button
type="primary"
icon="el-icon-search"
:loading="loading"
@click="handleSearch"
>
{{ $t('common:button:search') }}
</el-button>
<!-- 重置 -->
<el-button
type="primary"
icon="el-icon-refresh-left"
:loading="loading"
@click="handleReset"
>
{{ $t('common:button:reset') }}
</el-button>
<el-button
v-if="hasPermi(['role:pm'])"
type="primary"
:disabled="selectIdArr.length == 0"
icon="el-icon-check"
:loading="loading"
@click="handleApply"
>
{{ $t('trials:seletctedReviews:button:select') }}
</el-button>
<!---简历采集-->
<el-button
type="primary"
@click="resumeCollection"
v-hasPermi="['trials:trials-panel:attachments:enrollment:viewer']"
>
{{ $t('trials:seletctedReviews:button:resumeCollection') }}
</el-button>
<!---添加阅片人-->
<el-button
icon="el-icon-plus"
type="primary"
@click="openViewer('add')"
v-hasPermi="['trials:trials-panel:attachments:enrollment:viewer']"
>
{{ $t('trials:seletctedReviews:button:addViewer') }}
</el-button>
</el-form>
</template>
<template slot="main-container">
<el-table
ref="selectionList"
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
width="120"
sortable="custom"
>
<template slot-scope="scope">
<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
>
<!-- <el-button type="text" @click="go(`/trialsResume?doctorId=${scope.row.Id}&token=${token}`)">{{ scope.row.LastName }} / {{ scope.row.FirstName }}</el-button> -->
<!-- <router-link-->
<!-- style="color: #428bca;"-->
<!-- tag="a"-->
<!-- :to="{-->
<!-- path: `/trialsResume?doctorId=${scope.row.Id}&token=${token}`,-->
<!-- }"-->
<!-- target="_blank"-->
<!-- >{{ scope.row.LastName }} / {{ scope.row.FirstName }}</router-link>-->
</template>
</el-table-column>
<!-- Name CN -->
<!-- <el-table-column
prop="ChineseName"
:label="$t('trials:seletctedReviews:table:nameCN')"
show-overflow-tooltip
sortable="custom"
width="120"
/> -->
<el-table-column
prop="DoctorUserName"
:label="$t('trials:seletctedReviews:table:doctorUserName')"
show-overflow-tooltip
sortable="custom"
width="120"
/>
<!-- Status -->
<el-table-column
prop="DoctorTrialState"
:label="$t('trials:seletctedReviews:table:status')"
width="120"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.DoctorTrialState === 1" type="primary">{{
$fd('DoctorTrialState', 16)
}}</el-tag>
</template>
</el-table-column>
<!-- Submitted -->
<el-table-column
prop="Submitted"
:label="$t('trials:seletctedReviews:table:submitted')"
show-overflow-tooltip
sortable="custom"
width="140"
/>
<!-- Approved -->
<el-table-column
prop="Approved"
:label="$t('trials:seletctedReviews:table:approved')"
show-overflow-tooltip
sortable="custom"
width="120"
/>
<!-- Reading -->
<el-table-column
prop="Reading"
:label="$t('trials:seletctedReviews:table:reading')"
show-overflow-tooltip
sortable="custom"
width="120"
/>
<el-table-column
prop="Speciality"
:label="$t('trials:seletctedReviews:form:modality')"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
{{
scope.row.ReadingTypeIds.map((v) => {
return $fd('ReadingType', v, 'id')
}).toString()
}}
</template>
</el-table-column>
<!-- Specialty -->
<el-table-column
prop="Speciality"
:label="$t('trials:seletctedReviews:table:specialty')"
show-overflow-tooltip
min-width="120"
>
<template slot-scope="scope">
{{
scope.row.SpecialityId === otherId
? scope.row.SpecialityOther
? scope.row.SpecialityOther
: 'Other'
: scope.row.Speciality
}}
</template>
</el-table-column>
<!-- Subspecialty -->
<el-table-column
prop="Subspeciality"
:label="$t('trials:seletctedReviews:table:subspecialty')"
show-overflow-tooltip
min-width="150"
>
<template slot-scope="scope">
{{
scope.row.SubspecialityIds.map((v) => {
return $fd('Subspeciality', v, 'id')
}).join(', ')
}}
<!-- {{ scope.row.SubspecialityList.length > 0 ? scope.row.SubspecialityList.join(', ') : '' }}-->
</template>
</el-table-column>
<!-- Institution -->
<el-table-column
prop="HospitalName"
:label="$t('trials:seletctedReviews:table:institution')"
show-overflow-tooltip
width="150"
/>
<!-- City -->
<el-table-column
prop="City"
:label="$t('trials:seletctedReviews:table:city')"
show-overflow-tooltip
width="150"
/>
<!-- Country -->
<el-table-column
prop="Country"
:label="$t('trials:seletctedReviews:table:country')"
show-overflow-tooltip
width="150"
/>
<!-- Selector -->
<el-table-column
prop="OptUserName"
:label="$t('trials:seletctedReviews:table:selector')"
width="150"
/>
<!-- Selection Time -->
<el-table-column
prop="OptTimeStr"
:label="$t('trials:seletctedReviews:table:selectionTime')"
width="150"
/>
<el-table-column
fixed="right"
prop="OptTimeStr"
:label="$t('common:action:action')"
width="150"
v-if="hasPermi(['trials:trials-panel:attachments:enrollment:viewer'])"
>
<template slot-scope="scope">
<el-button
icon="el-icon-edit-outline"
:title="$t('common:button:edit')"
@click.stop="openViewer('edit', scope.row)"
v-hasPermi="['trials:trials-panel:attachments:enrollment:viewer']"
circle
/>
</template>
</el-table-column>
</el-table>
<pagination
class="page"
:total="total"
:page.sync="listQuery.PageIndex"
:limit.sync="listQuery.PageSize"
@pagination="getList"
/>
</template>
<!--简历采集-->
<base-model :config="share_model">
<template slot="dialog-body">
<div>
<i style="color: #428bca" class="el-icon-success" />
<span>{{ $t('reviewers-list:message:msg1') }}</span>
</div>
<div style="margin: 10px 0">
<span style="">{{ $t('reviewers-list:message:msg2') }}</span
><el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="shareLink"
readonly
style="width: 100%; margin-top: 10px"
/>
</div>
<div>
<el-button type="primary" round @click="copyCode">{{
$t('reviewers-list:button:copyCode')
}}</el-button>
</div>
<div class="sendEmailBox">
<el-input
v-model="email"
clearable
:placeholder="$t('reviewers-list:placeholder:sendEmail')"
></el-input>
<el-button
type="primary"
round
:disabled="!email"
@click="sendEmail"
:loading="emailLoading"
style="margin-left: 10px"
>
{{ $t('reviewers-list:button:sendEmail') }}
</el-button>
</div>
</template>
</base-model>
<!--新增或修改简历-->
<el-dialog
:title="$t('curriculumVitae:content:title')"
:visible.sync="visible"
fullscreen
v-if="visible"
appendToBody
:before-close="beforeClose"
>
<curriculumVitae :reviewerId="reviewerId" />
</el-dialog>
<!--新增阅片人输入邮箱--->
<el-dialog
:title="$t('curriculumVitae:content:title')"
:visible.sync="emailVisible"
v-if="emailVisible"
appendToBody
width="400px"
>
<el-form
v-if="emailVisible"
ref="emailForm"
:model="emailForm"
:rules="emailRule"
class="demo-form-inline"
label-width="80px"
>
<el-form-item
:label="$t('trials:trials-panel:attachments:enrollment:form:email')"
prop="EmailOrPhone"
>
<el-input
v-model="emailForm.EmailOrPhone"
clearable
:maxlength="400"
></el-input>
<el-input
style="display: none"
v-model="emailForm.EmailOrPhone"
clearable
:maxlength="400"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="handleCancle">
{{ $t('common:button:cancel') }}
</el-button>
<el-button
size="small"
type="primary"
@click="handleSave"
:loading="emailLoading"
>
{{ $t('common:button:save') }}
</el-button>
</span>
</el-dialog>
</BaseContainer>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import store from '@/store'
import { mapGetters } from 'vuex'
import { getSelectionReviewerList, selectReviewers } from '@/api/trials'
import BaseModel from '@/components/BaseModel'
import curriculumVitae from '@/views/reviewers/curriculumVitae'
import { doctorSendEmail, useEmialGetDoctorInfo } from '@/api/reviewers'
const getListQueryDefault = () => {
return {
TrialId: '',
Name: '',
ReadingTypeIds: [],
SubspecialityIds: [],
PageIndex: 1,
PageSize: 20,
PositionId: '',
RankId: '',
HospitalId: '',
Asc: false,
SortField: '',
AcceptingNewTrial: true,
InformationConfirmed: true,
ContractorStatus: 1,
}
}
export default {
name: 'Selection',
components: {
BaseContainer,
Pagination,
BaseModel,
curriculumVitae,
},
dicts: ['ReadingType', 'Subspeciality', 'Position', 'Rank'],
data() {
return {
list: [],
listQuery: getListQueryDefault(),
total: 0,
loading: false,
listLoading: false,
selectIdArr: [],
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
token: store.getters.token,
share_model: {
visible: false,
title: this.$t('curriculumVitae:share:title'),
width: '500px',
},
shareLink: null,
email: null,
visible: false,
reviewerId: null,
emailVisible: false,
emailLoading: false,
emailForm: {
EmailOrPhone: null,
},
emailRule: {
EmailOrPhone: [
{
required: true,
message: this.$t('passwordReset:formRule:email'),
trigger: 'blur',
},
{
type: 'email',
message: this.$t('rules:email'),
trigger: 'blur,change',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
},
}
},
computed: {
...mapGetters(['hospitalList']),
},
created() {
this.initPage()
},
methods: {
handleCancle() {
Object.keys(this.emailForm).forEach((key) => {
this.emailForm[key] = null
})
this.emailVisible = false
},
async handleSave() {
try {
let validate = await this.$refs.emailForm.validate()
if (!validate) return false
this.emailLoading = true
this.emailForm.trialId = this.$route.query.trialId
let res = await useEmialGetDoctorInfo(this.emailForm)
this.emailLoading = false
if (res.IsSuccess) {
this.handleCancle()
sessionStorage.setItem('reviewerId', res.Result.DoctorId)
zzSessionStorage.setItem('trialId', this.$route.query.trialId)
this.visible = true
}
} catch (err) {
this.emailLoading = false
console.log(err)
}
},
copyCode() {
this.$copyText(
`${this.$t('reviewers-list:button:copyCode')}: ${this.shareLink}`
)
.then((res) => {
this.$message.success(
this.$t('trials:researchRecord:message:copySuccessfully')
)
})
.catch(() => {
this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
})
},
beforeClose() {
this.getList()
this.visible = false
},
// 简历采集
resumeCollection() {
this.shareLink = `${location.protocol}//${location.host}/ReviewersResearch?lang=${this.$store.getters.language}&trialId=${this.$route.query.trialId}`
this.email = null
this.share_model.visible = true
},
// 发送邮件
async sendEmail() {
let emailList = this.email.split('|')
let isError = false
emailList.forEach((item) => {
var pattern =
/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/
if (!pattern.test(item)) {
isError = true
}
})
if (isError) return this.$message.warning(this.$t('rules:email'))
this.emailLoading = true
let res = await doctorSendEmail({
Email: emailList,
Url: `ReviewersResearch?lang=${this.$store.getters.language}&trialId=${this.$route.query.trialId}`,
})
this.emailLoading = false
if (res.IsSuccess) {
this.$message.success(
this.$t('trials:researchStaff:message:sendEmalil')
)
this.share_model.visible = false
}
},
// 打开新增或修改简历弹框
openViewer(type, row) {
if (type === 'add') {
return (this.emailVisible = true)
}
if (row) {
sessionStorage.setItem('reviewerId', row.Id)
}
zzSessionStorage.setItem('trialId', this.$route.query.trialId)
this.visible = true
},
go(path) {
window.open(path)
},
initPage() {
this.getList()
store.dispatch('global/getHospital')
},
getList() {
this.listLoading = true
this.listQuery.TrialId = this.$route.query.trialId
getSelectionReviewerList(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
})
},
handleApply() {
this.$confirm(this.$t('trials:seletctedReviews:message:msg1'), {
type: 'warning',
}).then(() => {
this.loading = true
const trialId = this.$route.query.trialId
selectReviewers(trialId, this.selectIdArr)
.then((res) => {
this.loading = false
if (res.IsSuccess) {
this.getList()
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.$emit('nextStep', 'submission')
}
})
.catch(() => {
this.loading = false
})
})
},
handleSelectionChange(val) {
const arr = []
for (let index = 0; index < val.length; index++) {
arr.push(val[index].Id)
}
this.selectIdArr = 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 === 1) {
return 'selected'
}
},
handleSelectTable(row) {
return row.DoctorTrialState !== 1
},
handleDetail(row) {
const { href } = this.$router.resolve({
path: `/trialsResume?doctorId=${row.Id}&trialId=${this.$route.query.trialId}`,
})
window.open(href, '_blank')
},
handleSearch() {
this.listQuery.PageIndex = 1
this.getList()
},
handleReset() {
this.listQuery = getListQueryDefault()
this.getList()
},
},
}
</script>
<style lang="scss" scoped>
.sendEmailBox {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
::v-deep .el-card__body {
padding: 20px !important;
}
</style>