482 lines
18 KiB
Plaintext
482 lines
18 KiB
Plaintext
<template>
|
|
<BaseContainer>
|
|
<template slot="search-container">
|
|
<el-form :inline="true">
|
|
<el-form-item :label="$t('trials:readingPeriod:table:siteCode')">
|
|
<!-- 中心编号 -->
|
|
<el-select v-model="searchData.TrialSiteCode" clearable filterable style="width:120px;">
|
|
<el-option
|
|
v-for="(item,index) of siteOptions"
|
|
:key="index"
|
|
:label="item.TrialSiteCode"
|
|
:value="item.TrialSiteCode"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 受试者编号 -->
|
|
<el-form-item :label="$t('trials:readingPeriod:table:subjectCode')">
|
|
<el-input
|
|
v-model="searchData.SubjectCode"
|
|
style="width:100px;"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<!-- 阅片类型 -->
|
|
<el-form-item :label="$t('trials:readingPeriod:table:readingType')">
|
|
<el-select v-model="searchData.ModuleType" clearable style="width:120px">
|
|
<el-option
|
|
v-for="item of $d.ModuleTypeEnum"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 进度 -->
|
|
<el-form-item :label="$t('trials:readingPeriod:table:readingSchedule')">
|
|
<el-select v-model="searchData.ReadingStatus" clearable style="width:120px">
|
|
<el-option
|
|
v-for="item of $d.ReadModuleEnum"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 阅片名称 -->
|
|
<el-form-item :label="$t('trials:readingPeriod:table:readingName')">
|
|
<el-input
|
|
v-model="searchData.Name"
|
|
style="width:100px;"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
|
|
{{ $t('common:button:search') }}
|
|
</el-button>
|
|
<el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
|
|
{{ $t('common:button:reset') }}
|
|
</el-button>
|
|
<!-- 阅片期管理 -->
|
|
<el-button type="primary" icon="el-icon-edit-outline" @click="handleReadingPeriod">
|
|
{{ $t('trials:readingPeriod:button:rpManage') }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<template slot="main-container">
|
|
<el-table
|
|
v-adaptive="{bottomOffset:60}"
|
|
v-loading="loading"
|
|
:data="list"
|
|
stripe
|
|
height="100"
|
|
:header-row-class-name="headerRowStyle"
|
|
:cell-style="cellStyle"
|
|
@sort-change="handleSortChange"
|
|
>
|
|
<el-table-column type="index" width="40" fixed="left" />
|
|
<!-- 中心编号 -->
|
|
<el-table-column
|
|
prop="TrialSiteCode"
|
|
:label="$t('trials:readingPeriod:table:siteCode')"
|
|
min-width="110"
|
|
fixed="left"
|
|
sortable="custom"
|
|
show-overflow-tooltip
|
|
/>
|
|
<!-- 受试者编号 -->
|
|
<el-table-column
|
|
prop="SubjectCode"
|
|
:label="$t('trials:readingPeriod:table:subjectCode')"
|
|
min-width="120"
|
|
fixed="left"
|
|
sortable="custom"
|
|
show-overflow-tooltip
|
|
/>
|
|
<!-- 阅片计划 -->
|
|
<el-table-column
|
|
:label="$t('trials:readingPeriod:table:readingPlan')"
|
|
align="center"
|
|
min-width="100"
|
|
>
|
|
<el-table-column
|
|
v-for="i in maxLength"
|
|
:key="`${i}`"
|
|
:prop="`Plan${i-1}`"
|
|
label=""
|
|
width="200"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="i<=scope.row.Data.length">
|
|
<div style="display: flex;justify-content: space-between;">
|
|
<div>{{ scope.row.Data[i-1].Name }}</div>
|
|
<div>
|
|
<span v-if="scope.row.Data[i-1].IsEnrollmentConfirm">
|
|
| {{ $t('trials:readingPeriod:table:enroll') }}
|
|
</span>
|
|
<span v-if="scope.row.Data[i-1].IsUrgent">
|
|
| {{ $t('trials:readingPeriod:table:urgent') }}
|
|
</span>
|
|
<span v-if="scope.row.Data[i-1].IsFinalVisit">
|
|
| {{ $t('trials:readingPeriod:table:finalVisit') }}
|
|
</span>
|
|
<span v-if="scope.row.Data[i-1].PDState">
|
|
| {{ $t('trials:readingPeriod:table:pd') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
|
<div>{{ $fd('ModuleTypeEnum',scope.row.Data[i-1].ModuleType) }}</div>
|
|
<div>
|
|
{{ $fd('ReadModuleEnum',scope.row.Data[i-1].ReadingStatus) }}
|
|
</div>
|
|
</div>
|
|
<div v-if="scope.row.Data[i-1].ModuleType === 1" style="display: flex;justify-content: space-between;">
|
|
<!-- 上一访视 -->
|
|
<div>{{ $t('trials:readingPeriod:table:lastVisit') }}</div>
|
|
<div>{{ scope.row.Data[i-1].OutPlanPreviousVisitName }} </div>
|
|
</div>
|
|
<div v-if="scope.row.Data[i-1].ModuleType === 2 || scope.row.Data[i-1].ModuleType ===3 || scope.row.Data[i-1].ModuleType ===5" style="display: flex;justify-content: space-between;">
|
|
<!-- 截止访视： -->
|
|
<div>{{ $t('trials:readingPeriod:table:deadlineVisit') }}</div>
|
|
<div>{{ scope.row.Data[i-1].CutOffVisitName }}</div>
|
|
</div>
|
|
<div v-if="scope.row.Data[i-1].ModuleType ===4 " style="display: flex;justify-content: space-between;">
|
|
<!-- 对应阅片期： -->
|
|
<div>{{ $t('trials:readingPeriod:table:correspondVisit') }}</div>
|
|
<div>{{ scope.row.Data[i-1].ReadModuleName }}</div>
|
|
</div>
|
|
|
|
<div style="display: flex;justify-content: space-between;">
|
|
<div>
|
|
<!-- 临床资料 -->
|
|
{{ $t('trials:readingPeriod:table:clinicalInfo') }}
|
|
</div>
|
|
<div v-if="(scope.row.Data[i-1].IsVisit && otherInfo.IsExistsSubjectClinicalData && scope.row.Data[i-1].IsBaseLine) ||(scope.row.Data[i-1].IsVisit && otherInfo.IsExistsVisitClinicalData) || (!scope.row.Data[i-1].IsVisit && otherInfo.IsExistsReadingClinicalData)">
|
|
<el-link type="danger" @click="handleView(scope.row,scope.row.Data[i-1])">
|
|
{{ $t('trials:readingPeriod:button:view') }}
|
|
</el-link>
|
|
</div>
|
|
<div v-else>
|
|
<span>{{ $t('trials:readingPeriod:table:noCD') }}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-link @click="handleDetail(scope.row,scope.row.Data[i-1])">
|
|
{{ $t('trials:readingPeriod:button:detail') }}
|
|
</el-link>
|
|
<el-link
|
|
v-if="scope.row.Data[i-1].ModuleType === 2 || scope.row.Data[i-1].ModuleType === 5"
|
|
@click="handleDelete(scope.row.Data[i-1])"
|
|
>
|
|
{{ $t('trials:readingPeriod:button:delete') }}
|
|
</el-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
fixed="right"
|
|
:label="$t('common:action:action')"
|
|
width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
circle
|
|
:title="$t('trials:readingPeriod:buttton:addSubjectImageRP')"
|
|
icon="el-icon-plus"
|
|
@click="handleAdd(scope.row,0)"
|
|
/>
|
|
<el-button
|
|
v-if="isClinicalReading"
|
|
circle
|
|
:title="$t('trials:readingPeriod:buttton:addSubjectOncologyRP')"
|
|
icon="el-icon-plus"
|
|
@click="handleAdd(scope.row,1)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页组件 -->
|
|
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
|
|
|
|
<!-- 详情 -->
|
|
<el-dialog
|
|
v-if="dialogVisible"
|
|
:title="$t('trials:rpDetail:dialogTitle:detail')"
|
|
:visible.sync="dialogVisible"
|
|
width="600px"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-descriptions :column="2" border>
|
|
<!-- 阅片期名称 -->
|
|
<el-descriptions-item :label="$t('trials:readingPeriod:table:readingName')">
|
|
{{ currentData.Name }}
|
|
</el-descriptions-item>
|
|
<!-- 阅片期类型 -->
|
|
<el-descriptions-item :label="$t('trials:readingPeriod:table:readingType')">
|
|
{{ $fd('ModuleTypeEnum',currentData.ModuleType) }}
|
|
</el-descriptions-item>
|
|
<!-- 是否加急 -->
|
|
<!-- <el-descriptions-item label="是否加急"> <el-tag size="small">{{ $fd('YesOrNo',currentData.IsUrgent) }}</el-tag></el-descriptions-item> -->
|
|
<!-- 进度 -->
|
|
<el-descriptions-item :label="$t('trials:readingPeriod:table:readingSchedule')">
|
|
{{ $fd('ReadModuleEnum',currentData.ReadingStatus) }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="currentData.CutOffVisitName"
|
|
:label="$t('trials:readingPeriod:table:deadlineVisit')"
|
|
>
|
|
{{ currentData.CutOffVisitName }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="currentData.OutPlanPreviousVisitName"
|
|
:label="$t('trials:readingPeriod:table:lastVisit')"
|
|
>
|
|
{{ currentData.OutPlanPreviousVisitName }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="currentData.ReadModuleName"
|
|
:label="$t('trials:readingPeriod:table:correspondVisit')"
|
|
>
|
|
{{ currentData.ReadModuleName }}
|
|
</el-descriptions-item>
|
|
<!-- 临床资料 -->
|
|
<el-descriptions-item :label="$t('trials:readingPeriod:table:clinicalInfo')">
|
|
<template v-if="(currentData.IsVisit && otherInfo.IsExistsSubjectClinicalData && currentData.IsBaseLine) ||(currentData.IsVisit && otherInfo.IsExistsVisitClinicalData) || (!currentData.IsVisit && otherInfo.IsExistsReadingClinicalData)">
|
|
<el-link @click="view">{{ $t('trials:readingPeriod:button:view') }}</el-link>
|
|
</template>
|
|
<template v-else>
|
|
<span>{{ $t('trials:readingPeriod:table:noCD') }}</span>
|
|
</template>
|
|
</el-descriptions-item>
|
|
<!-- 当前干系人 -->
|
|
<el-descriptions-item :label="$t('trials:readingPeriod:table:stakeholder')" :span="2">
|
|
{{ currentData.Stakeholders }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
|
|
<!-- 设置阅片期 -->
|
|
<el-dialog
|
|
v-if="readPeriodVisible"
|
|
:title="$t('trials:rpManage:dialogTitle:setRP')"
|
|
:visible.sync="readPeriodVisible"
|
|
width="1400px"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<ReadingPeriod :trial-id="trialId" :is-clinical-reading="isClinicalReading" @getList="getList" />
|
|
</el-dialog>
|
|
|
|
<!-- 临床资料 -->
|
|
<el-dialog
|
|
v-if="clinicalDataVisible"
|
|
:title="$t('trials:readingPeriod:dialogTitle:clinicalData')"
|
|
:visible.sync="clinicalDataVisible"
|
|
:close-on-click-modal="false"
|
|
append-to-body
|
|
>
|
|
<ClinicalData :trial-id="trialId" :data="currentData" />
|
|
</el-dialog>
|
|
<!-- 添加受试者阅片期 -->
|
|
<el-dialog
|
|
v-if="subjectPeriod.visible"
|
|
:title="subjectPeriod.title"
|
|
:visible.sync="subjectPeriod.visible"
|
|
width="500px"
|
|
custom-class="base-dialog-wrapper"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<SubjectPR :trial-id="trialId" :data="param" @close="subjectPeriod.visible = false" @getList="getList" />
|
|
</el-dialog>
|
|
</template>
|
|
</BaseContainer>
|
|
</template>
|
|
<script>
|
|
import { getReadModuleList, deleteReadModule, getReadModule, getTrialSiteSelect } from '@/api/trials'
|
|
import BaseContainer from '@/components/BaseContainer'
|
|
import Pagination from '@/components/Pagination'
|
|
import ReadingPeriod from './components/RPList'
|
|
import ClinicalData from './components/ClinicalData'
|
|
import SubjectPR from './components/AddSubjectRP'
|
|
const searchDataDefault = () => {
|
|
return {
|
|
TrialSiteCode: '',
|
|
SubjectCode: '',
|
|
ModuleType: null,
|
|
ReadingStatus: null,
|
|
Name: '',
|
|
PageIndex: 1,
|
|
PageSize: 20
|
|
}
|
|
}
|
|
const MinPlanCount = 10
|
|
export default {
|
|
name: 'TrialsNotice',
|
|
components: { BaseContainer, Pagination, ReadingPeriod, ClinicalData, SubjectPR },
|
|
data() {
|
|
return {
|
|
searchData: searchDataDefault(),
|
|
list: [],
|
|
total: 0,
|
|
maxLength: 0,
|
|
loading: false,
|
|
dialogVisible: false,
|
|
readPeriodVisible: false,
|
|
clinicalDataVisible: false,
|
|
subjectPeriod: { visible: false, title: this.$t('trials:readingPeriod:dialogTitle:addSubjectPR') },
|
|
trialId: this.$route.query.trialId,
|
|
currentData: {},
|
|
param: {},
|
|
siteOptions: [],
|
|
isClinicalReading: false,
|
|
otherInfo: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getSite()
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.searchData.TrialId = this.$route.query.trialId
|
|
this.loading = true
|
|
getReadModuleList(this.searchData).then(res => {
|
|
this.loading = false
|
|
this.list = res.Result.CurrentPageData
|
|
this.total = res.Result.TotalCount
|
|
this.maxLength = res.OtherInfo.MaxLength > MinPlanCount ? res.OtherInfo.MaxLength : MinPlanCount
|
|
this.isClinicalReading = res.OtherInfo.IsClinicalReading
|
|
this.otherInfo = res.OtherInfo
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
handleAdd(row, type) {
|
|
this.param.SubjectId = row.SubjectId
|
|
this.param.SiteId = row.SiteId
|
|
this.param.SubjectCode = row.SubjectCode
|
|
this.param.TrialSiteCode = row.TrialSiteCode
|
|
this.param.TrialId = this.trialId
|
|
this.param.IsClinicalReading = this.isClinicalReading
|
|
this.param.ReadingSetType = type
|
|
this.subjectPeriod.visible = true
|
|
},
|
|
handleDelete(row) {
|
|
this.$confirm(this.$t('trials:readingPeriod:message:sureToDelete'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
this.loading = true
|
|
deleteReadModule(row.Id)
|
|
.then(res => {
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.getList()
|
|
this.$message.success(this.$t('common:message:deletedSuccessfully'))
|
|
}
|
|
}).catch(() => { this.loading = false })
|
|
})
|
|
},
|
|
handleReadingPeriod() {
|
|
this.readPeriodVisible = true
|
|
},
|
|
view() {
|
|
this.clinicalDataVisible = true
|
|
},
|
|
handleView(row, ReadingPlan) {
|
|
this.currentData = Object.assign({}, ReadingPlan)
|
|
this.clinicalDataVisible = true
|
|
},
|
|
handleDetail(row, ReadingPlan) {
|
|
this.loading = true
|
|
var param = {
|
|
id: ReadingPlan.Id,
|
|
// subjectId: row.SubjectId
|
|
subjectId: ReadingPlan.SubjectId
|
|
}
|
|
getReadModule(param).then(res => {
|
|
this.currentData = Object.assign({}, ReadingPlan)
|
|
// this.currentData.SubjectId = row.SubjectId
|
|
// this.currentData.SiteId = row.SiteId
|
|
// this.currentData.TrialId = this.trialId
|
|
this.currentData.Stakeholders = res.Result.StakeholderNames.join(', ')
|
|
this.dialogVisible = true
|
|
this.loading = false
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
// 获取site下拉框数据
|
|
getSite() {
|
|
getTrialSiteSelect(this.trialId).then(res => {
|
|
this.siteOptions = res.Result
|
|
})
|
|
},
|
|
handleSearch() {
|
|
this.searchData.PageIndex = 1
|
|
this.getList()
|
|
},
|
|
handleReset() {
|
|
this.searchData = searchDataDefault()
|
|
this.getList()
|
|
},
|
|
// 排序
|
|
handleSortChange(column) {
|
|
if (column.order === 'ascending') {
|
|
this.searchData.Asc = true
|
|
} else {
|
|
this.searchData.Asc = false
|
|
}
|
|
this.searchData.SortField = column.prop
|
|
this.searchData.PageIndex = 1
|
|
this.getList()
|
|
},
|
|
headerRowStyle({ row, rowIndex }) {
|
|
if (rowIndex === 1) {
|
|
return 'hidden-row'
|
|
} else {
|
|
return
|
|
}
|
|
},
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex > 2 && (row.Data.length >= columnIndex - 2)) {
|
|
const index = column.property.substring(4) * 1
|
|
const type = row.Data[index].ModuleType
|
|
const status = row.Data[index].ReadingStatus
|
|
|
|
if ((type === 0 || type === 1) && status === 0) {
|
|
return { 'vertical-align': 'top' }
|
|
} else if ((type === 0 || type === 1) && status === 1) {
|
|
return { 'background-color': 'rgb(189,215,238)', 'vertical-align': 'top' }
|
|
} else if ((type === 0 || type === 1) && status === 2) {
|
|
return { 'background-color': 'rgb(255,217,102)', 'vertical-align': 'top' }
|
|
} else if ((type === 0 || type === 1) && status === 3) {
|
|
return { 'background-color': 'rgb(169,208,142)', 'vertical-align': 'top' }
|
|
} else if ((type === 0 || type === 1) && status === 4) {
|
|
return { 'background-color': 'rgb(169,208,142)', 'vertical-align': 'top' }
|
|
} else if ((type === 0 || type === 1) && status === 5) {
|
|
return { 'background-color': 'rgb(244,176,132)', 'vertical-align': 'top' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
>>>.hidden-row{
|
|
display: none;
|
|
}
|
|
>>>.el-dialog__body {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
>>>.el-tag--danger.el-tag--dark {
|
|
// background-color: #f56c6c!important;
|
|
border-color: none!important;
|
|
// color: #fff!important;
|
|
}
|
|
</style>
|