XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

中心调研更改
continuous-integration/drone/push Build is passing Details

uat_us^2
caiyiling 2026-08-12 10:39:36 +08:00
parent 9448805f36
commit 0bbb93d663
8 changed files with 1737 additions and 651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/research.js
View File

@ -129,3 +129,31 @@ export function getUserTypeList(userTypeEnum) {
method: 'get'
})
}
export function getSiteSurveyLogList(param) {
return request({
url: `/TrialSiteSurvey/getSiteSurveyLogList`,
method: 'post',
data: param
})
}
export function getTrialIsSPMJoin(trialId) {
return request({
url: `/TrialSiteSurvey/getTrialIsSPMJoin?trialId=${trialId}`,
method: 'get'
})
}
export function getSiteSurveyEquipmentList(param) {
return request({
url: `/TrialSiteSurvey/getSiteSurveyEquipmentList`,
method: 'post',
data: param
})
}
export function getSiteSurveyInfoList(param) {
return request({
url: `/TrialSiteSurvey/getSiteSurveyInfoList`,
method: 'post',
data: param
})
}

111
src/views/research/components/LogList.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div class="log-list">
<el-table
v-loading="loading"
:data="tableData"
v-adaptive="{ bottomOffset: 40 }"
height="100"
style="width: 100%"
>
<el-table-column
prop="CreateTime"
label="时间"
min-width="120"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.CreateTime ? moment(scope.row.CreateTime).format('YYYY-MM-DD HH:MM:SS') : '' }}
</template>
</el-table-column>
<el-table-column
prop="Name"
label="姓名"
min-width="100"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="UserType"
label="角色"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('UserType', scope.row.IsJoin) }}
</template>
</el-table-column>
<el-table-column
prop="OptType"
label="操作"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('SiteSurveyOptTyp', scope.row.IsJoin) }}
</template>
</el-table-column>
<el-table-column
prop="Json"
label="详情"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
<el-button v-if="scope.row.Json" type="text">调研表</el-button>
</template>
</el-table-column>
<el-table-column
prop="Reason"
label="备注"
min-width="140"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getSiteSurveyLogList } from '@/api/research'
import moment from 'moment'
export default {
name: 'LogList',
props: {
trialSiteSurveyId: {
type: String,
required: true
}
},
data() {
return {
loading: false,
tableData: [],
moment
}
},
mounted() {
this.getList()
},
methods: {
async getList() {
try {
this.loading = true
let res = await getSiteSurveyLogList({ trialSiteSurveyId: this.trialSiteSurveyId })
if (res.IsSuccess) {
this.tableData = res.Result
}
} catch(e) {
console.log(e)
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.log-list {
height: 100%;
min-height: 0;
overflow: hidden;
}
</style>

82
src/views/research/form.vue
View File

@ -35,6 +35,10 @@
<el-button v-if="userTypeEnumInt === 0" type="primary" size="small" @click="handleHistory">
{{ $t('trials:researchForm:button:historicalRecord') }}
</el-button>
<!-- 操作日志 -->
<el-button type="primary" size="small" @click="viewLog">
{{ $t('trials:researchForm:button:log') }}
</el-button>
<!-- 退出 -->
<el-button v-if="userTypeEnumInt === 0" type="primary" size="small" @click="handleBack">
{{ $t('trials:researchForm:button:loginOut') }}
@ -133,11 +137,32 @@
</div>
</div>
</span>
<div style="height:100%;margin:0;">
<div class="history-dialog-content">
<HistoricalRecord :trial-id="trialId" :site-id="siteId" :trial-site-survey-id="trialSiteSurveyId" />
</div>
</el-dialog>
<el-dialog v-if="logVisible" :visible.sync="logVisible"
:custom-class="isFullscreen ? 'full-log-dialog-container' : 'log-dialog-container'" :close-on-click-modal="false"
:fullscreen="isFullscreen" :show-close="false" width="60%" append-to-body>
<span slot="title" class="dialog-footer">
<div style="display: flex;flex-direction: row;justify-content: space-between;">
<div>
{{ $t('trials:researchForm:button:log') }}
</div>
<div>
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
style="vertical-align: baseline;cursor: pointer;font-size: 20px;" @click="toggleLogFullscreen" />
<svg-icon icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;"
@click="logVisible = false" />
</div>
</div>
</span>
<div class="log-dialog-content">
<LogList :trial-site-survey-id="trialSiteSurveyId" />
</div>
</el-dialog>
</div>
</template>
<script>
@ -150,9 +175,10 @@ import EquipmentList from './components/EquipmentList'
import { mapMutations } from 'vuex'
import TopLang from './topLang'
import HistoricalRecord from './components/HistoricalRecord'
import LogList from './components/LogList'
export default {
name: 'QuestionForm',
components: { BaseInfo, HistoricalParticipant, ParticipantList, EquipmentList, TopLang, HistoricalRecord },
components: { BaseInfo, HistoricalParticipant, ParticipantList, EquipmentList, TopLang, HistoricalRecord, LogList },
props: {
isPreview: {
type: Boolean,
@ -175,7 +201,8 @@ export default {
historyVisible: false,
siteSurveyNoteInfo: {},
IsSupportUploadFile: false,
IsOnlyUploadFile: false
IsOnlyUploadFile: false,
logVisible: false
}
},
mounted() {
@ -347,7 +374,14 @@ export default {
handleHistory() {
this.isFullscreen = false
this.historyVisible = true
}
},
toggleLogFullscreen() {
this.isFullscreen = !this.isFullscreen
},
viewLog() {
this.isFullscreen = false
this.logVisible = true
},
}
}
</script>
@ -399,5 +433,45 @@ export default {
}
}
.history-dialog-content,
.log-dialog-content {
height: 100%;
margin: 0;
}
.log-dialog-content {
overflow: hidden;
}
}
</style>
<style lang="scss">
.full-log-dialog-container,
.log-dialog-container {
overflow: hidden;
}
.full-log-dialog-container {
display: flex;
flex-direction: column;
}
.full-log-dialog-container .el-dialog__body {
flex: 1;
min-height: 0;
padding: 10px;
overflow: hidden;
}
.log-dialog-container .el-dialog__body {
height: calc(100% - 80px);
padding: 10px;
overflow: hidden;
}
.full-log-dialog-container .log-dialog-content,
.log-dialog-container .log-dialog-content {
height: 100%;
overflow: hidden;
}
</style>

298
src/views/trials/trials-panel/attachments/site-research/components/Equipments.vue Normal file
View File

@ -0,0 +1,298 @@
<template>
<BaseContainer>
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:researchStaff:table:siteId')">
<el-select v-model="searchData.TrialSiteId" clearable filterable style="width:120px;">
<el-option
v-for="(item,index) of siteOptions"
:key="index"
:label="item.TrialSiteCode"
:value="item.TrialSiteId"
/>
</el-select>
</el-form-item>
<!-- 中心名称 -->
<el-form-item :label="$t('trials:researchStaff:table:siteName')">
<el-input v-model="searchData.TrialSiteName" class="mr" clearable style="width:120px;" />
</el-form-item>
<el-form-item>
<!-- 查询 -->
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
{{ $t('common:button:search') }}
</el-button>
</el-form-item>
<!-- 重置 -->
<el-form-item>
<el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
{{ $t('common:button:reset') }}
</el-button>
</el-form-item>
<!-- 导出 -->
<el-form-item>
<el-button
type="primary"
icon="el-icon-download"
:disabled="list.length === 0"
>
{{ $t('common:button:export') }}
</el-button>
</el-form-item>
</el-form>
</template>
<template slot="main-container">
<el-table
ref="list"
v-loading="loading"
v-adaptive="{ bottomOffset: 55 }"
:data="list"
stripe
height="100"
@sort-change="handleSortByColumn"
>
<el-table-column type="index" width="50" />
<!-- 中心编号 -->
<el-table-column
prop="TrialSiteCode"
:label="$t('trials:researchStaff:table:siteId')"
show-overflow-tooltip
sortable="custom"
min-width="100"
>
</el-table-column>
<!-- 中心名称 -->
<el-table-column
prop="TrialSiteName"
:label="$t('trials:researchStaff:table:siteName')"
show-overflow-tooltip
sortable="custom"
min-width="120"
>
</el-table-column>
<!-- 扫描设备 -->
<el-table-column
v-if="equipmentControlFieldList.includes('EquipmentTypeEnum')"
prop="EquipmentTypeEnum"
:label="$t('trials:equiptResearch:form:equipment')"
min-width="120"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.OtherEquipmentType ? scope.row.OtherEquipmentType :
$fd('SiteSurvey_ScanEquipmentType', scope.row.EquipmentTypeEnum) }}
</template>
</el-table-column>
<!-- 扫描参数 -->
<el-table-column
v-if="equipmentControlFieldList.includes('Parameters')"
prop="Parameters"
:label="$t('trials:equiptResearch:form:param')"
min-width="100"
show-overflow-tooltip />
<!-- 扫描仪器制造商名称 -->
<el-table-column
v-if="equipmentControlFieldList.includes('ManufacturerType')"
min-width="120"
prop="ManufacturerType"
:label="$t('trials:equiptResearch:form:manufacturer')"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.ManufacturerName ? scope.row.ManufacturerName : $fd('ManufacturerType',
scope.row.ManufacturerType) }}
</template>
</el-table-column>
<!-- 扫描仪型号 -->
<el-table-column
v-if="equipmentControlFieldList.includes('ScannerType')"
min-width="120"
prop="ScannerType"
:label="$t('trials:equiptResearch:form:model')"
show-overflow-tooltip />
<!-- 磁场强度 -->
<el-table-column
v-if="equipmentControlFieldList.includes('MagneticFieldStrengthType')"
min-width="120"
prop="MagneticFieldStrengthType"
:label="$t('trials:equiptResearch:form:MagneticFieldStrengthType')"
show-overflow-tooltip >
<template slot-scope="scope">
{{ $fd('MagneticFieldStrengthType', scope.row.MagneticFieldStrengthType) }}
</template>
</el-table-column>
<!-- 体部线圈通道数 -->
<el-table-column
v-if="equipmentControlFieldList.includes('BodyCoilChannelCount')"
min-width="120"
prop="BodyCoilChannelCount"
:label="$t('trials:equiptResearch:form:BodyCoilChannelCount')"
show-overflow-tooltip >
<template slot-scope="scope">
{{ $fd('BodyCoilChannelCount', scope.row.BodyCoilChannelCount) }}
</template>
</el-table-column>
<!-- 是否具备专用的PDFF脂肪定量序列（CSE-MRI序列） -->
<el-table-column
v-if="equipmentControlFieldList.includes('HasDedicatedPdfFatQuantificationSequence')"
min-width="120"
prop="HasDedicatedPdfFatQuantificationSequence"
:label="$t('trials:equiptResearch:form:HasDedicatedPdfFatQuantificationSequence')"
show-overflow-tooltip >
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.HasDedicatedPdfFatQuantificationSequence) }}
</template>
</el-table-column>
<!-- 专用的PDFF脂肪定量序列类型 -->
<el-table-column
v-if="equipmentControlFieldList.includes('PdfFatQuantificationSequenceType')"
min-width="120"
prop="PdfFatQuantificationSequenceType"
:label="$t('trials:equiptResearch:form:PdfFatQuantificationSequenceType')"
show-overflow-tooltip >
<template slot-scope="scope">
{{ scope.row.OtherSequenceSpecification ? scope.row.OtherSequenceSpecification :
$fd('PdfFatQuantificationSequenceType', scope.row.PdfFatQuantificationSequenceType) }}
</template>
</el-table-column>
<!-- 是否包含 T2/R2 校正（用于铁沉积校正） -->
<el-table-column
v-if="equipmentControlFieldList.includes('HasT2R2Correction')"
min-width="120"
prop="HasT2R2Correction"
:label="$t('trials:equiptResearch:form:HasT2R2Correction')"
show-overflow-tooltip >
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.HasT2R2Correction) }}
</template>
</el-table-column>
<!-- 是否可完整导出 PDFF 参数图及全部原始 DICOM 数据 -->
<el-table-column
v-if="equipmentControlFieldList.includes('CanFullyExportPdfParameterMapsAndRawDicom')"
prop="CanFullyExportPdfParameterMapsAndRawDicom"
:label="$t('trials:equiptResearch:form:CanFullyExportPdfParameterMapsAndRawDicom')"
min-width="120"
show-overflow-tooltip >
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.CanFullyExportPdfParameterMapsAndRawDicom) }}
</template>
</el-table-column>
<!-- 备注 -->
<el-table-column
v-if="equipmentControlFieldList.includes('Note')"
min-width="120"
prop="Note"
:label="$t('trials:equiptResearch:form:precautions')"
show-overflow-tooltip />
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
</template>
</BaseContainer>
</template>
<script>
import { getTrialSiteSelect } from '@/api/trials'
import { getSiteSurveyEquipmentList } from '@/api/research'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
return {
SortField: '',
Asc: true,
PageIndex: 1,
PageSize: 20,
TrialId: '',
TrialSiteId: '',
TrialSiteName: ''
}
}
export default {
name: 'Equipments',
components: { BaseContainer, Pagination },
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
trialId: '',
otherInfo: {},
siteOptions: [],
equipmentControlFieldList: []
}
},
mounted() {
this.trialId = this.$route.query.trialId
this.getList()
this.getSite()
},
methods: {
async getList() {
try {
this.loading = true
this.searchData.TrialId = this.trialId
let res = await getSiteSurveyEquipmentList(this.searchData)
if (res.IsSuccess) {
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
this.otherInfo = res.OtherInfo
const { EquipmentControlFieldList } = res.OtherInfo
this.equipmentControlFieldList = []
EquipmentControlFieldList.forEach(item => {
this.equipmentControlFieldList.push(item.FiledName)
})
}
} catch(e) {
console.log(e)
} finally {
this.loading = false
}
},
// 导出
async handleExport() {
try {
this.searchData.TrialId = this.trialId
this.loading = true
const { SortField, Asc, PageIndex, PageSize, ...param } = { ...this.searchData }
await trialSiteUserSummaryListExport({ ...param })
} catch (e) {
console.log(e)
} finally {
this.loading = false
}
},
// 获取site下拉框数据
async getSite() {
try {
let res = await getTrialSiteSelect(this.trialId)
this.siteOptions = res.Result
} catch (e) {
console.log(e)
}
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.getList()
this.$nextTick(() => {
this.$refs.list.clearSort()
})
},
// 查询
handleSearch() {
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.getList()
}
}
}
</script>

389
src/views/trials/trials-panel/attachments/site-research/components/Questions.vue Normal file
View File

@ -0,0 +1,389 @@
<template>
<BaseContainer>
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:researchStaff:table:siteId')">
<el-select v-model="searchData.TrialSiteId" clearable filterable style="width:120px;">
<el-option
v-for="(item,index) of siteOptions"
:key="index"
:label="item.TrialSiteCode"
:value="item.TrialSiteId"
/>
</el-select>
</el-form-item>
<!-- 中心名称 -->
<el-form-item :label="$t('trials:researchStaff:table:siteName')">
<el-input v-model="searchData.TrialSiteName" class="mr" clearable style="width:120px;" />
</el-form-item>
<el-form-item>
<!-- 查询 -->
<el-button type="primary" icon="el-icon-search" @click="handleSearch">
{{ $t('common:button:search') }}
</el-button>
</el-form-item>
<!-- 重置 -->
<el-form-item>
<el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
{{ $t('common:button:reset') }}
</el-button>
</el-form-item>
<!-- 导出 -->
<el-form-item>
<el-button
type="primary"
icon="el-icon-download"
:disabled="list.length === 0"
>
{{ $t('common:button:export') }}
</el-button>
</el-form-item>
</el-form>
</template>
<template slot="main-container">
<el-table
ref="list"
v-loading="loading"
v-adaptive="{ bottomOffset: 55 }"
:data="list"
stripe
height="100"
@sort-change="handleSortByColumn"
>
<el-table-column type="index" width="50" />
<!-- 项目编号 -->
<!-- <el-table-column
prop="TrialCode"
:label="$t('trials:researchForm:form:trialId')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/> -->
<!-- 试验方案号 -->
<!-- <el-table-column
prop="ResearchProgramNo"
:label="$t('trials:researchForm:form:researchNo')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/> -->
<!-- 试验名称 -->
<!-- <el-table-column
prop="ExperimentName"
:label="$t('trials:researchForm:form:researchName')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/> -->
<!-- 适应症类型 -->
<!-- <el-table-column
prop="IndicationType"
:label="$t('trials:researchForm:form:decleareType')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/> -->
<!-- 适应症类型 -->
<!-- <el-table-column
prop="IndicationType"
:label="$t('trials:researchForm:form:decleareType')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/> -->
<!-- 中心编号 -->
<el-table-column
prop="TrialSiteCode"
:label="$t('trials:researchStaff:table:siteId')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/>
<!-- 中心名称 -->
<el-table-column
prop="SiteName"
:label="$t('trials:researchStaff:table:siteName')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/>
<!-- 联系人 -->
<el-table-column
prop="UserName"
:label="$t('trials:researchForm:form:contactor')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/>
<!-- 联系电话 -->
<el-table-column
prop="Phone"
:label="$t('trials:researchForm:form:contactorPhone')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/>
<!-- 联系邮箱 -->
<el-table-column
prop="Email"
:label="$t('trials:researchForm:form:contactorEmail')"
show-overflow-tooltip
sortable="custom"
min-width="100"
/>
<el-table-column
v-if="otherInfo.IsSupportUploadFile"
prop="SiteSurveyFile.FileName"
:label="$t('trials:researchForm:form:contactorEmail')"
show-overflow-tooltip
min-width="100"
>
<template slot-scope="scope">
<el-button v-if="scope.row.SiteSurveyFile.FileName" type="text" @click="viewFile(scope.row.SiteSurveyFile)">
{{ scope.row.SiteSurveyFile.FileName }}
</el-button>
</template>
</el-table-column>
<!-- 平均刻盘周期（天） -->
<el-table-column
v-if="!notShowFieldList.includes('AverageEngravingCycle')"
prop="AverageEngravingCycle"
:label="$t('trials:researchForm:form:engravingCycle')"
show-overflow-tooltip
/>
<!-- MRI-PDFF 是否为本中心该适应症的常规诊疗检查项目？ -->
<el-table-column
v-if="!notShowFieldList.includes('IsRoutineMRIPDEE')"
prop="IsRoutineMRIPDEE"
:label="$t('trials:researchForm:form:IsRoutineMRIPDEE')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsRoutineMRIPDEE) }}
</template>
</el-table-column>
<!-- MRI-PDFF 检查的检测周期（含单次检查时长、预约等待时长等） -->
<el-table-column
v-if="!notShowFieldList.includes('MRIPDFFScanTime') || !notShowFieldList.includes('MRIPDFFLeadTime') || !notShowFieldList.includes('MRIPDFFOther')"
:label="$t('trials:researchForm:form:IsRoutineMRIPDEE')"
>
<!-- 单次检查时长（分钟） -->
<el-table-column
v-if="!notShowFieldList.includes('MRIPDFFScanTime')"
prop="MRIPDFFScanTime"
:label="$t('trials:researchForm:form:MRIPDFFScanTime')"
show-overflow-tooltip
/>
<!-- 平均预约等待时长（天） -->
<el-table-column
v-if="!notShowFieldList.includes('MRIPDFFLeadTime')"
prop="MRIPDFFLeadTime"
:label="$t('trials:researchForm:form:MRIPDFFLeadTime')"
show-overflow-tooltip
/>
<!-- 特殊情况备注-->
<el-table-column
v-if="!notShowFieldList.includes('MRIPDFFOther')"
prop="MRIPDFFOther"
:label="$t('trials:researchForm:form:MRIPDFFOther')"
show-overflow-tooltip
/>
</el-table-column>
<!-- 如已选择研究者评估，项目是否会授权影像科老师参与本试验？如不单独授权，是否可在试验中保持 1-2 名固定技师操作？ -->
<el-table-column
v-if="!notShowFieldList.includes('IsAuthorizeRadiologistsParticipate') || !notShowFieldList.includes('AssignFixedTechnologists')"
prop="IsAuthorize"
:label="$t('trials:researchForm:form:IsAuthorize')"
show-overflow-tooltip
>
<template slot-scope="scope">
<span v-if="scope.row.IsAuthorizeRadiologistsParticipate">
{{ $t('trials:researchForm:form:IsAuthorizeRadiologistsParticipate') }}
</span>
<span v-else-if="scope.row.AssignFixedTechnologists">
{{ $t('trials:researchForm:form:AssignFixedTechnologists') }}
</span>
</template>
</el-table-column>
<!-- 请确认参与本项目影像采集的影像技师具备对应的资质（如：“技师证”，对应设备的“大型设备上岗证”） -->
<el-table-column
v-if="!notShowFieldList.includes('IsConfirmImagingTechnologist')"
prop="IsConfirmImagingTechnologist"
:label="$t('trials:researchForm:form:isQualified')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsConfirmImagingTechnologist) }}
</template>
</el-table-column>
<!-- 原因 -->
<el-table-column
v-if="!notShowFieldList.includes('NotConfirmReson')"
prop="NotConfirmReson"
:label="$t('trials:researchForm:form:notQualifiedReason')"
show-overflow-tooltip
/>
<!-- 研究单位疗效评估人员类型 -->
<el-table-column
v-if="!notShowFieldList.includes('EfficacyEvaluatorType')"
prop="EfficacyEvaluatorType"
:label="$t('trials:researchForm:form:staffType')"
show-overflow-tooltip
/>
<!-- 是否严格按照研究单位影像手册参数完成图像采集 -->
<el-table-column
v-if="!notShowFieldList.includes('IsFollowStudyParameters')"
prop="IsFollowStudyParameters"
:label="$t('trials:researchForm:form:isFollowStudyParam')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsFollowStudyParameters) }}
</template>
</el-table-column>
<!-- 不能严格按照研究单位影像手册参数采集图像原因 -->
<el-table-column
v-if="!notShowFieldList.includes('NotFollowReson')"
prop="NotFollowReson"
:label="$t('trials:researchForm:form:notFollowStudyParam')"
show-overflow-tooltip
/>
<!-- 是否严格按照影像手册参数完成刻盘 -->
<el-table-column
v-if="!notShowFieldList.includes('ISStrictManualBurnFlag')"
prop="ISStrictManualBurnFlag"
:label="$t('trials:researchForm:form:ISStrictManualBurnFlag')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.ISStrictManualBurnFlag) }}
</template>
</el-table-column>
<!-- 不能严格按照影像手册参数完成刻盘原因 -->
<el-table-column
v-if="!notShowFieldList.includes('NotStrictManualBurnFlagReason')"
prop="NotStrictManualBurnFlagReason"
:label="$t('trials:researchForm:form:NotStrictManualBurnFlagReason')"
show-overflow-tooltip
/>
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
</template>
</BaseContainer>
</template>
<script>
import { getTrialSiteSelect } from '@/api/trials'
import { getSiteSurveyInfoList } from '@/api/research'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
return {
SortField: '',
Asc: true,
PageIndex: 1,
PageSize: 20,
TrialId: '',
TrialSiteId: '',
TrialSiteName: ''
}
}
export default {
name: 'Equipments',
components: { BaseContainer, Pagination },
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
trialId: '',
otherInfo: {},
siteOptions: [],
notShowFieldList: []
}
},
mounted() {
this.trialId = this.$route.query.trialId
this.getList()
this.getSite()
},
methods: {
async getList() {
try {
this.loading = true
this.searchData.TrialId = this.trialId
let res = await getSiteSurveyInfoList(this.searchData)
if (res.IsSuccess) {
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
this.otherInfo = res.OtherInfo
this.notShowFieldList = res.OtherInfo.NotShowFieldList
}
} catch(e) {
console.log(e)
} finally {
this.loading = false
}
},
// 导出
async handleExport() {
try {
this.searchData.TrialId = this.trialId
this.loading = true
const { SortField, Asc, PageIndex, PageSize, ...param } = { ...this.searchData }
await trialSiteUserSummaryListExport({ ...param })
} catch (e) {
console.log(e)
} finally {
this.loading = false
}
},
// 获取site下拉框数据
async getSite() {
try {
let res = await getTrialSiteSelect(this.trialId)
this.siteOptions = res.Result
} catch (e) {
console.log(e)
}
},
viewFile(siteSurveyFile) {
this.$preview({
path: siteSurveyFile.Path,
type: siteSurveyFile.FileType,
title: siteSurveyFile.FileName,
})
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.getList()
this.$nextTick(() => {
this.$refs.list.clearSort()
})
},
// 查询
handleSearch() {
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.getList()
}
}
}
</script>

707
src/views/trials/trials-panel/attachments/site-research/components/ResearchList.vue Normal file
View File

@ -0,0 +1,707 @@
<template>
<BaseContainer>
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心 -->
<el-form-item :label="$t('trials:researchRecord:table:siteId')">
<el-select v-model="searchData.TrialSiteId" clearable filterable style="width: 120px">
<el-option v-for="(item, index) of siteOptions" :key="index" :label="item.TrialSiteCode"
:value="item.TrialSiteId" />
</el-select>
</el-form-item>
<!-- 联系人 -->
<el-form-item :label="$t('trials:researchRecord:table:contactor')">
<el-input v-model="searchData.UserKeyInfo" class="mr" clearable :placeholder="`${$t(
'trials:researchRecord:placeholder:contactorInfo'
)}`" style="width: 140px" />
</el-form-item>
<!-- 初审人 -->
<el-form-item :label="$t('trials:researchRecord:table:preliminaryUser')">
<el-input v-model="searchData.PreliminaryUserName" class="mr" clearable style="width: 140px" />
</el-form-item>
<!-- 审核人 -->
<el-form-item :label="$t('trials:researchRecord:table:ReviewerUser')">
<el-input v-model="searchData.ReviewerUserName" class="mr" clearable style="width: 140px" />
</el-form-item>
<!-- 状态 -->
<!-- <el-form-item :label="$t('trials:researchRecord:table:status')">
<el-select v-model="searchData.State" clearable filterable style="width: 120px">
<el-option v-for="(item, index) of $d.ResearchRecord" :key="index" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item> -->
<!-- 是否废除 -->
<el-form-item :label="$t('trials:researchRecord:table:isDeleted')">
<el-select v-model="searchData.IsDeleted" clearable filterable style="width: 120px">
<el-option v-for="item of $d.YesOrNo" v-show="item.raw.ValueCN !== '无'" :key="`IsDeleted${item.value}`"
:label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- 更新时间 -->
<el-form-item :label="$t('trials:researchRecord:table:updateTime')">
<el-date-picker v-model="searchData.DateRange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
style="width: 250px" />
</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
v-if="searchData.State === 3"
v-hasPermi="['trials:trials-panel:attachments:site-research:summary-record']"
type="primary"
icon="el-icon-info"
@click="showResearchUser">
{{ $t('trials:researchRecord:button:researchData') }}
</el-button>
<!-- 调查表链接 -->
<el-button
v-if="searchData.State === 0"
v-hasPermi="['trials:trials-panel:attachments:site-research:questionnaire-link']"
type="primary"
icon="el-icon-link"
@click="showResearchLink">
{{ $t('trials:researchRecord:button:questionLink') }}
</el-button>
</el-form>
</template>
<template slot="main-container">
<!-- 系统文件列表 -->
<el-table ref="siteResearchList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe
height="100" @sort-change="handleSortByColumn">
<el-table-column type="index" width="50" />
<!-- 中心编号 -->
<el-table-column prop="TrialSiteCode" :label="$t('trials:researchRecord:table:siteId')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 中心名称 -->
<el-table-column prop="SiteName" :label="$t('trials:researchRecord:table:siteName')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 联系人 -->
<el-table-column prop="UserName" :label="$t('trials:researchRecord:table:contactor')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 联系电话 -->
<el-table-column prop="Phone" :label="$t('trials:researchRecord:table:contactorPhone')" min-width="100"
show-overflow-tooltip />
<!-- 联系邮箱 -->
<el-table-column prop="Email" :label="$t('trials:researchRecord:table:contactorEmail')" min-width="150"
show-overflow-tooltip />
<!-- 初审人 -->
<el-table-column prop="preliminaryUser" :label="$t('trials:researchRecord:table:preliminaryUser')"
min-width="150" show-overflow-tooltip>
<template slot-scope="scope">
{{
scope.row.PreliminaryUser
? scope.row.PreliminaryUser.RealName
: ''
}}
</template>
</el-table-column>
<!-- 审核人 -->
<el-table-column prop="ReviewerUser" :label="$t('trials:researchRecord:table:ReviewerUser')" min-width="150"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.ReviewerUser ? scope.row.ReviewerUser.RealName : '' }}
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column prop="State" :label="$t('trials:researchRecord:table:status')" min-width="150"
sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag v-if="scope.row.State === 0" type="primary">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 1" type="info">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 2" type="warning">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 3" type="danger">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
</template>
</el-table-column>
<!-- 是否废除 -->
<el-table-column prop="IsDeleted" :label="$t('trials:researchRecord:table:isDeleted')" min-width="100"
sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsDeleted" type="danger">{{
$fd('YesOrNo', scope.row.IsDeleted)
}}</el-tag>
<el-tag v-else type="primary">{{
$fd('YesOrNo', scope.row.IsDeleted)
}}</el-tag>
</template>
</el-table-column>
<!-- 更新时间 -->
<el-table-column prop="UpdateTime" :label="$t('trials:researchRecord:table:updateTime')" min-width="150"
show-overflow-tooltip sortable="custom" />
<el-table-column width="150">
<template slot-scope="scope">
<!-- 查看 -->
<el-button
v-if="searchData.State === 1 || searchData.State === 2 || searchData.State === 3"
:disabled="scope.row.State !== 3"
circle
:title="$t('common:button:view')"
icon="el-icon-view"
@click="handleViewResearchList(scope.row)" />
<!-- 审批 -->
<el-button
v-if="searchData.State === 1 || searchData.State === 2"
v-hasPermi="['trials:trials-panel:attachments:site-research:auidt']"
:disabled="scope.row.State === 0 || scope.row.State === 3 || scope.row.IsDeleted"
circle
:title="$t('trials:researchRecord:action:view')"
icon="el-icon-s-check"
@click="handleViewResearchList(scope.row)" />
<!-- 废除 -->
<el-button v-if="searchData.State === 0" v-hasPermi="[
'trials:trials-panel:attachments:site-research:abolish',
]" :disabled="scope.row.State !== 0 || scope.row.IsDeleted" circle
:title="$t('trials:researchRecord:action:abolish')" icon="el-icon-delete"
@click="handleRepealResearch(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
@pagination="getList" />
</template>
<!-- 中心数据 trials:researchRecord:button:researchData-->
<!-- 中心人员 trials:researchRecord:dialogTitle:questionStaff-->
<el-dialog v-if="researchUserVisible" :visible.sync="researchUserVisible"
:title="$t('trials:researchRecord:button:researchData')" custom-class="base-dialog-wrapper"
:fullscreen="true">
<div class="base-modal-body" style="border: 1px solid #ccc; padding: 10px">
<el-tabs v-model="activeName">
<el-tab-pane
:label="$t('trials:researchRecord:dialogTitle:questionStaff')"
name="first">
<Users v-if="activeName === 'first'"/>
</el-tab-pane>
<el-tab-pane
label="中心设备"
name="second">
<Equipments v-if="activeName === 'second'"/>
</el-tab-pane>
<el-tab-pane
label="基本情况"
name="third">
<Questions v-if="activeName === 'third'"/>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
<!-- 调查表 -->
<el-dialog v-if="researchInfoVisible" :visible.sync="researchInfoVisible" :fullscreen="true"
:close-on-click-modal="false">
<research-form v-if="researchInfoVisible" @refreshPage="getList" />
</el-dialog>
<!-- 调查表编辑 -->
<el-dialog v-if="ImageManualVisible" :visible.sync="ImageManualVisible" :fullscreen="true"
:close-on-click-modal="false" :title="$t('trials:researchRecord:dialogTitle:ImageManualEdit')">
<ImageManual v-if="ImageManualVisible" :trialSiteSurveyId="trialSiteSurveyId" @getList="getList" />
</el-dialog>
<!-- 调查表链接 -->
<base-model :config="share_model">
<template slot="dialog-body" v-loading="shareLoading">
<el-button size="small" type="primary" style="margin-bottom: 10px;" @click.stop="openImageManual">{{
$t('trials:researchRecord:label:edit')
}}</el-button>
<div style="width: 100%; display: flex">
<div class="date">
<el-form :model="shareForm" :rules="rules" ref="shareForm" label-width="100px">
<el-form-item :label="$t('trials:researchRecord:label:ExpirationDays')" prop="ExpirationDays">
<el-radio-group v-model="shareForm.ExpirationDays" @input="shareForm.OtherExpirationDays = null">
<el-radio :label="1">{{ $t('trials:researchRecord:label:day1') }}</el-radio>
<el-radio :label="7">{{ $t('trials:researchRecord:label:day7') }}</el-radio>
<el-radio :label="15">{{ $t('trials:researchRecord:label:day15') }}</el-radio>
<el-radio :label="`default`">{{ $t('trials:researchRecord:label:default') }}
<el-input placeholder="" type="number" @input="handleInput" v-model="shareForm.OtherExpirationDays"
clearable size="mini" style="width: 60px;" class="dayInput" />
<span style="margin-left: 10px;">{{ $t('trials:researchRecord:label:day') }}</span>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('trials:researchRecord:label:LinkVerificationCode')" prop="LinkVerificationCode">
<el-radio-group v-model="shareForm.LinkVerificationCode"
@input="shareForm.OtherLinkVerificationCode = null">
<el-radio label="researchProgramNo">{{ $t('trials:researchRecord:label:researchProgramNo')
}}</el-radio>
<el-radio label="default">{{ $t('trials:researchRecord:label:default') }}
<el-input placeholder="" type="number" v-model="shareForm.OtherLinkVerificationCode" clearable
size="mini" style="width: 100px;" />
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-button type="primary" round @click="setLink" style="float: right;">
{{ $t('trials:researchRecord:button:setLink') }}
</el-button>
</div>
<div class="share">
<div class="shareLink">
<h3>{{ $t('trials:researchRecord:label:link') }}</h3>
<el-input ref="shareLink" v-model="shareLink" readonly type="textarea" autosize :rows="3" />
<div class="dateBox">
<span>{{ $t('trials:researchRecord:label:linkVerificationCode') }}</span>
<span>{{ LinkVerificationCode }}</span>
</div>
<div class="dateBox">
<span>{{ $t('trials:researchRecord:label:ValidityPeriod') }}</span>
<span>{{ validityPeriod }}</span>
<span style="color: red;" v-if="isExpired">({{ $t('trials:researchRecord:label:Expired') }})</span>
</div>
<el-button type="primary" round @click="copyLink" class="shareLinkBtn"
:disabled="!validityPeriod || isExpired">
{{ $t('trials:researchRecord:button:copyLink') }}
</el-button>
</div>
<div class="shareCode">
<h3>{{ $t('trials:researchRecord:label:shareCode') }}</h3>
<div style="display: flex;align-items: center;justify-content: space-between;">
<div class="qrCodeBox">
<div id="qrcode" ref="qrcode"></div>
</div>
<div class="codeBtnBox">
<el-button @click="handleCopyImg" type="primary" round :disabled="!validityPeriod || isExpired">{{
$t('trials:researchRecord:button:copyCode')
}}</el-button>
<el-button @click="savePic" round :disabled="!validityPeriod || isExpired">{{
$t('trials:researchRecord:button:savePic')
}}</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
</base-model>
</BaseContainer>
</template>
<script>
import {
getTrialSiteSurveyList,
getTrialSiteSelect,
abandonSiteSurvey,
setTrialLinkExpirationTime,
getTrialLinkExpirationTime,
getLinkLinkExpirationTime,
} from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import Users from './users'
import Equipments from './Equipments'
import Questions from './Questions'
import ResearchForm from '@/views/research/form'
import BaseModel from '@/components/BaseModel'
import ImageManual from './ImageManual'
import QRCode from 'qrcodejs2'
const searchDataDefault = () => {
return {
SortField: '',
Asc: true,
PageIndex: 1,
PageSize: 20,
TrialSiteId: '',
UserKeyInfo: '',
State: null,
IsDeleted: '',
DateRange: [],
PreliminaryUserName: null,
ReviewerUserName: null,
}
}
export default {
name: 'ResearchList',
components: { BaseContainer, Pagination, Users, Equipments, Questions, ResearchForm, BaseModel, ImageManual },
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
trialId: this.$route.query.trialId,
siteOptions: [],
researchUserVisible: false,
researchInfoVisible: false,
share_model: {
visible: false,
title: this.$t('trials:researchRecord:title:shark'),
width: '1000px',
},
shareLink: '',
researchState: this.$d.ResearchRecord,
qrcode: null,
validityPeriod: null,
LinkVerificationCode: null,
isExpired: false,
shareLoading: false,
shareForm: {
ExpirationDays: null,
OtherExpirationDays: null,
LinkVerificationCode: null,
OtherLinkVerificationCode: null,
},
rules: {
ExpirationDays: [
{ required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === 'default' && !this.shareForm.OtherExpirationDays) {
callback(new Error(this.$t("common:ruleMessage:specify")));
} else {
callback()
}
}, trigger: 'blur'
}
],
LinkVerificationCode: [
{ required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === 'default' && !this.shareForm.OtherLinkVerificationCode) {
callback(new Error(this.$t("common:ruleMessage:specify")));
} else {
callback()
}
}, trigger: 'blur'
}
],
},
ImageManualVisible: false,
trialSiteSurveyId: null,
activeName: 'first'
}
},
mounted() {
// this.getList()
this.getSite()
},
methods: {
async getLinkTimeIsExpired() {
try {
let data = {
TrialId: this.$route.query.trialId,
}
this.shareLoading = true
let res = await getLinkLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.isExpired = res.Result.IsIsExpired
}
} catch (err) {
this.shareLoading = false
console.log(err)
}
},
async getLinkTime() {
try {
let data = {
TrialId: this.$route.query.trialId,
}
this.shareLoading = true
let res = await getTrialLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.validityPeriod = res.Result.LinkExpirationTime
this.LinkVerificationCode = res.Result.LinkVerificationCode || res.Result.ResearchProgramNo
if (!this.validityPeriod) {
this.LinkVerificationCode = null
}
if (!this.validityPeriod) return false
this.getLinkTimeIsExpired()
this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${this.$route.query.trialId}`
this.$nextTick(() => {
this.creatQrCode()
})
}
} catch (err) {
this.shareLoading = false
console.log(err)
}
},
async setLink() {
try {
let validate = await this.$refs.shareForm.validate()
if (!validate) return false
let data = {
TrialId: this.$route.query.trialId,
ExpirationDays: this.shareForm.ExpirationDays,
LinkVerificationCode: this.shareForm.LinkVerificationCode
}
if (this.shareForm.LinkVerificationCode === 'researchProgramNo') {
data.LinkVerificationCode = null
}
if (this.shareForm.LinkVerificationCode === 'default') {
data.LinkVerificationCode = this.shareForm.OtherLinkVerificationCode
}
if (this.shareForm.ExpirationDays === 'default') {
data.ExpirationDays = this.shareForm.OtherExpirationDays
}
this.shareLoading = true
let res = await setTrialLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.getLinkTime()
}
} catch (err) {
this.shareLoading = false
console.log(err)
}
},
handleInput(val) {
// 过滤掉非数字字符，并取整为正整数
this.shareForm.OtherExpirationDays = val.replace(/[^\d]/g, '').replace(/^0+/, '')
},
openImageManual() {
// if (!this.trialSiteSurveyId) return false
this.ImageManualVisible = true
},
// 获取系统文件数据
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
this.searchData.updateTimeEnd = this.searchData.DateRange[1]
} else {
this.searchData.UpdateTimeBegin = ''
this.searchData.updateTimeEnd = ''
}
getTrialSiteSurveyList(this.searchData)
.then((res) => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
})
.catch(() => {
this.loading = false
})
},
// 查看调查表记录详情
handleViewResearchList(row) {
changeURLStatic('trialSiteSurveyId', row.Id)
this.researchInfoVisible = true
},
// 废除待提交的调查表
handleRepealResearch(row) {
// 是否确认废除？
this.$confirm(this.$t('trials:researchRecord:message:abolish'), {
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {
abandonSiteSurvey(this.trialId, row.Id).then((res) => {
if (res.IsSuccess) {
this.getList()
// 废除成功
this.$message.success(
this.$t('trials:researchRecord:message:abolishSuccessfully')
)
}
})
})
},
// 展示当前项目下所有调查表需生成账户的用户信息
showResearchUser() {
this.researchUserVisible = true
this.activeName = 'first'
},
// 复制链接
copyLink() {
// 中心调研表链接
this.$copyText(
`${this.$t('trials:researchRecord:message:researchFormLink')}: ${this.shareLink
}\n${this.$t('trials:researchRecord:label:linkVerificationCode')}${this.LinkVerificationCode}\n${this.$t('trials:researchRecord:label:ValidityPeriod')}${this.validityPeriod}`
)
.then((res) => {
// 复制成功
this.$message.success(
this.$t('trials:researchRecord:message:copySuccessfully')
)
})
.catch(() => {
// 复制失败
this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
})
},
// 创建二维码
creatQrCode() {
this.$refs.qrcode.innerHTML = '' //清除二维码方法一
let text = this.shareLink
this.qrcode = new QRCode(this.$refs.qrcode, {
text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
})
// qrcode.clear(); // 清除二维码方法二
},
// 下载二维码
savePic() {
let qrCodeCanvas = document
.getElementById('qrcode')
.getElementsByTagName('canvas')
let a = document.createElement('a')
a.href = qrCodeCanvas[0].toDataURL('image/url')
a.download = `${this.$route.query.researchProgramNo}${this.$t('trials:researchRecord:title:code')}.png`
a.click()
},
// 复制二维码
handleCopyImg() {
let qrCodeCanvas = document
.getElementById('qrcode')
.getElementsByTagName('canvas')
qrCodeCanvas[0].toBlob(async (blob) => {
console.log(blob)
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
] // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
await navigator.clipboard.write(data).then(
() => {
this.$message.success(
this.$t('trials:researchRecord:message:copySuccess')
)
},
() => {
this.$message.error(
this.$t('trials:researchRecord:message:UnableWrite')
)
}
)
})
},
// 获取site下拉框数据
getSite() {
getTrialSiteSelect(this.trialId).then((res) => {
this.siteOptions = res.Result
})
},
// 展示调查表链接
showResearchLink() {
this.shareForm = {
ExpirationDays: null,
OtherExpirationDays: null,
LinkVerificationCode: null,
OtherLinkVerificationCode: null,
}
this.validityPeriod = null
this.isExpired = false
this.share_model.visible = true
this.getLinkTime()
// &lang=${this.$i18n.locale}
// this.trialSiteSurveyId = this.list[0].Id
},
// 重置
handleReset() {
const state = this.searchData.State
this.searchData = searchDataDefault()
this.searchData.DateRange = []
if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
this.searchData.updateTimeEnd = this.searchData.DateRange[1]
} else {
this.searchData.UpdateTimeBegin = ''
this.searchData.updateTimeEnd = ''
}
this.searchData.State = state
this.getList()
this.$nextTick(() => {
this.$refs.siteResearchList.clearSort()
})
},
// 查询
handleSearch() {
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.getList()
},
},
beforeDestroy() {
if (this.qrcode) {
this.qrcode = null
}
},
}
</script>
<style lang="scss" scoped>
.date,
.share {
width: 55%;
height: 100%;
}
.dayInput {
::v-deep .el-input__inner {
padding-left: 5px;
}
}
.date {
padding-right: 10px;
}
.share {
width: 45%;
padding-left: 5%;
border-left: 1px solid #f0f0f0;
box-sizing: border-box;
}
.shareLinkBtn {
float: right;
}
.qrCodeBox {
width: 220px;
height: 220px;
display: flex;
border: 1px solid #c0c4cc;
border-radius: 5px;
box-shadow: 1px 1px 5px #c0c4cc;
align-items: center;
justify-content: center;
}
.dateBox {
margin: 10px;
}
.codeBtnBox {
::v-deep .el-button {
display: block;
margin: 10px auto;
}
}
</style>

3
src/views/trials/trials-panel/attachments/site-research/components/users.vue
View File

@ -119,7 +119,7 @@
<el-table
ref="researchUsers"
v-loading="loading"
v-adaptive="{bottomOffset:70}"
v-adaptive="{bottomOffset:55}"
:data="list"
stripe
height="100"
@ -296,7 +296,6 @@ export default {
}
},
mounted() {
console.log(this.dict.type.SiteSurvey_UserRoles)
this.getList()
this.getSite()
this.getUserType()

770
src/views/trials/trials-panel/attachments/site-research/index.vue
View File

@ -1,670 +1,150 @@
<template>
<BaseContainer>
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心 -->
<el-form-item :label="$t('trials:researchRecord:table:siteId')">
<el-select v-model="searchData.TrialSiteId" clearable filterable style="width: 120px">
<el-option v-for="(item, index) of siteOptions" :key="index" :label="item.TrialSiteCode"
:value="item.TrialSiteId" />
</el-select>
</el-form-item>
<!-- 联系人 -->
<el-form-item :label="$t('trials:researchRecord:table:contactor')">
<el-input v-model="searchData.UserKeyInfo" class="mr" clearable :placeholder="`${$t(
'trials:researchRecord:placeholder:contactorInfo'
)}`" style="width: 140px" />
</el-form-item>
<!-- 初审人 -->
<el-form-item :label="$t('trials:researchRecord:table:preliminaryUser')">
<el-input v-model="searchData.PreliminaryUserName" class="mr" clearable style="width: 140px" />
</el-form-item>
<!-- 审核人 -->
<el-form-item :label="$t('trials:researchRecord:table:ReviewerUser')">
<el-input v-model="searchData.ReviewerUserName" class="mr" clearable style="width: 140px" />
</el-form-item>
<!-- 状态 -->
<el-form-item :label="$t('trials:researchRecord:table:status')">
<el-select v-model="searchData.State" clearable filterable style="width: 120px">
<el-option v-for="(item, index) of $d.ResearchRecord" :key="index" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<!-- 是否废除 -->
<el-form-item :label="$t('trials:researchRecord:table:isDeleted')">
<el-select v-model="searchData.IsDeleted" clearable filterable style="width: 120px">
<el-option v-for="item of $d.YesOrNo" v-show="item.raw.ValueCN !== '无'" :key="`IsDeleted${item.value}`"
:label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- 更新时间 -->
<el-form-item :label="$t('trials:researchRecord:table:updateTime')">
<el-date-picker v-model="searchData.DateRange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
style="width: 250px" />
</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 v-hasPermi="[
'trials:trials-panel:attachments:site-research:summary-record',
]" type="primary" icon="el-icon-info" @click="showResearchUser">
{{ $t('trials:researchRecord:button:questionStaffs') }}
</el-button>
<!-- 调查表链接 -->
<el-button v-hasPermi="[
'trials:trials-panel:attachments:site-research:questionnaire-link',
]" type="primary" icon="el-icon-link" @click="showResearchLink">
{{ $t('trials:researchRecord:button:questionLink') }}
</el-button>
</el-form>
</template>
<template slot="main-container">
<!-- 系统文件列表 -->
<el-table ref="siteResearchList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe
height="100" @sort-change="handleSortByColumn">
<el-table-column type="index" width="50" />
<!-- 中心编号 -->
<el-table-column prop="TrialSiteCode" :label="$t('trials:researchRecord:table:siteId')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 中心名称 -->
<el-table-column prop="SiteName" :label="$t('trials:researchRecord:table:siteName')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 联系人 -->
<el-table-column prop="UserName" :label="$t('trials:researchRecord:table:contactor')" min-width="100"
sortable="custom" show-overflow-tooltip />
<!-- 联系电话 -->
<el-table-column prop="Phone" :label="$t('trials:researchRecord:table:contactorPhone')" min-width="100"
show-overflow-tooltip />
<!-- 联系邮箱 -->
<el-table-column prop="Email" :label="$t('trials:researchRecord:table:contactorEmail')" min-width="150"
show-overflow-tooltip />
<!-- 初审人 -->
<el-table-column prop="preliminaryUser" :label="$t('trials:researchRecord:table:preliminaryUser')"
min-width="150" show-overflow-tooltip>
<template slot-scope="scope">
{{
scope.row.PreliminaryUser
? scope.row.PreliminaryUser.RealName
: ''
}}
</template>
</el-table-column>
<!-- 审核人 -->
<el-table-column prop="ReviewerUser" :label="$t('trials:researchRecord:table:ReviewerUser')" min-width="150"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.ReviewerUser ? scope.row.ReviewerUser.RealName : '' }}
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column prop="State" :label="$t('trials:researchRecord:table:status')" min-width="150"
sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag v-if="scope.row.State === 0" type="primary">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 1" type="info">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 2" type="warning">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
<el-tag v-if="scope.row.State === 3" type="danger">{{
$fd('ResearchRecord', scope.row.State)
}}</el-tag>
</template>
</el-table-column>
<!-- 是否废除 -->
<el-table-column prop="IsDeleted" :label="$t('trials:researchRecord:table:isDeleted')" min-width="100"
sortable="custom" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag v-if="scope.row.IsDeleted" type="danger">{{
$fd('YesOrNo', scope.row.IsDeleted)
}}</el-tag>
<el-tag v-else type="primary">{{
$fd('YesOrNo', scope.row.IsDeleted)
}}</el-tag>
</template>
</el-table-column>
<!-- 更新时间 -->
<el-table-column prop="UpdateTime" :label="$t('trials:researchRecord:table:updateTime')" min-width="150"
show-overflow-tooltip sortable="custom" />
<el-table-column width="150">
<template slot-scope="scope">
<!-- 查看 -->
<el-button :disabled="scope.row.State !== 3" circle :title="$t('common:button:view')" icon="el-icon-view"
@click="handleViewResearchList(scope.row)" />
<!-- 审批 -->
<el-button v-hasPermi="[
'trials:trials-panel:attachments:site-research:auidt',
]" :disabled="scope.row.State === 0 || scope.row.State === 3 || scope.row.IsDeleted" circle
:title="$t('trials:researchRecord:action:view')" icon="el-icon-s-check"
@click="handleViewResearchList(scope.row)" />
<!-- 废除 -->
<el-button v-hasPermi="[
'trials:trials-panel:attachments:site-research:abolish',
]" :disabled="scope.row.State !== 0 || scope.row.IsDeleted" circle
:title="$t('trials:researchRecord:action:abolish')" icon="el-icon-delete"
@click="handleRepealResearch(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
@pagination="getList" />
</template>
<!-- 中心人员 -->
<el-dialog v-if="researchUserVisible" :visible.sync="researchUserVisible"
:title="$t('trials:researchRecord:dialogTitle:questionStaff')" custom-class="base-dialog-wrapper"
:fullscreen="true">
<div class="base-modal-body" style="border: 1px solid #ccc; padding: 10px">
<Users v-if="researchUserVisible" />
<div class="step-wrapper">
<el-steps
:active="activeStatus"
align-center
:space="300"
>
<!-- 中心填写 -->
<el-step
:title="$t('trials:siteResearch:timeline:step1')"
class="click_cursor"
@click.native="handleClick(0)"
/>
<!-- SPM审核 -->
<el-step
v-show="isSPMJoin"
:title="$t('trials:siteResearch:timeline:step2')"
class="click_cursor"
@click.native="handleClick(1)"
/>
<!-- PM审核 -->
<el-step
:title="$t('trials:siteResearch:timeline:step3')"
class="click_cursor"
@click.native="handleClick(2)"
/>
<!-- 审核完毕 -->
<el-step
:title="$t('trials:siteResearch:timeline:step14')"
class="click_cursor"
@click.native="handleClick(3)"
/>
</el-steps>
<div class="step-content">
<ResearchList ref="researchList"/>
</div>
</el-dialog>
<!-- 调查表 -->
<el-dialog v-if="researchInfoVisible" :visible.sync="researchInfoVisible" :fullscreen="true"
:close-on-click-modal="false">
<research-form v-if="researchInfoVisible" @refreshPage="getList" />
</el-dialog>
<!-- 调查表编辑 -->
<el-dialog v-if="ImageManualVisible" :visible.sync="ImageManualVisible" :fullscreen="true"
:close-on-click-modal="false" :title="$t('trials:researchRecord:dialogTitle:ImageManualEdit')">
<ImageManual v-if="ImageManualVisible" :trialSiteSurveyId="trialSiteSurveyId" @getList="getList" />
</el-dialog>
<!-- 调查表链接 -->
<base-model :config="share_model">
<template slot="dialog-body" v-loading="shareLoading">
<el-button size="small" type="primary" style="margin-bottom: 10px;" @click.stop="openImageManual">{{
$t('trials:researchRecord:label:edit')
}}</el-button>
<div style="width: 100%; display: flex">
<div class="date">
<el-form :model="shareForm" :rules="rules" ref="shareForm" label-width="100px">
<el-form-item :label="$t('trials:researchRecord:label:ExpirationDays')" prop="ExpirationDays">
<el-radio-group v-model="shareForm.ExpirationDays" @input="shareForm.OtherExpirationDays = null">
<el-radio :label="1">{{ $t('trials:researchRecord:label:day1') }}</el-radio>
<el-radio :label="7">{{ $t('trials:researchRecord:label:day7') }}</el-radio>
<el-radio :label="15">{{ $t('trials:researchRecord:label:day15') }}</el-radio>
<el-radio :label="`default`">{{ $t('trials:researchRecord:label:default') }}
<el-input placeholder="" type="number" @input="handleInput" v-model="shareForm.OtherExpirationDays"
clearable size="mini" style="width: 60px;" class="dayInput" />
<span style="margin-left: 10px;">{{ $t('trials:researchRecord:label:day') }}</span>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('trials:researchRecord:label:LinkVerificationCode')" prop="LinkVerificationCode">
<el-radio-group v-model="shareForm.LinkVerificationCode"
@input="shareForm.OtherLinkVerificationCode = null">
<el-radio label="researchProgramNo">{{ $t('trials:researchRecord:label:researchProgramNo')
}}</el-radio>
<el-radio label="default">{{ $t('trials:researchRecord:label:default') }}
<el-input placeholder="" type="number" v-model="shareForm.OtherLinkVerificationCode" clearable
size="mini" style="width: 100px;" />
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-button type="primary" round @click="setLink" style="float: right;">
{{ $t('trials:researchRecord:button:setLink') }}
</el-button>
</div>
<div class="share">
<div class="shareLink">
<h3>{{ $t('trials:researchRecord:label:link') }}</h3>
<el-input ref="shareLink" v-model="shareLink" readonly type="textarea" autosize :rows="3" />
<div class="dateBox">
<span>{{ $t('trials:researchRecord:label:linkVerificationCode') }}</span>
<span>{{ LinkVerificationCode }}</span>
</div>
<div class="dateBox">
<span>{{ $t('trials:researchRecord:label:ValidityPeriod') }}</span>
<span>{{ validityPeriod }}</span>
<span style="color: red;" v-if="isExpired">({{ $t('trials:researchRecord:label:Expired') }})</span>
</div>
<el-button type="primary" round @click="copyLink" class="shareLinkBtn"
:disabled="!validityPeriod || isExpired">
{{ $t('trials:researchRecord:button:copyLink') }}
</el-button>
</div>
<div class="shareCode">
<h3>{{ $t('trials:researchRecord:label:shareCode') }}</h3>
<div style="display: flex;align-items: center;justify-content: space-between;">
<div class="qrCodeBox">
<div id="qrcode" ref="qrcode"></div>
</div>
<div class="codeBtnBox">
<el-button @click="handleCopyImg" type="primary" round :disabled="!validityPeriod || isExpired">{{
$t('trials:researchRecord:button:copyCode')
}}</el-button>
<el-button @click="savePic" round :disabled="!validityPeriod || isExpired">{{
$t('trials:researchRecord:button:savePic')
}}</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
</base-model>
</div>
</BaseContainer>
</template>
<script>
import {
getTrialSiteSurveyList,
getTrialSiteSelect,
abandonSiteSurvey,
setTrialLinkExpirationTime,
getTrialLinkExpirationTime,
getLinkLinkExpirationTime,
} from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
import { getTrialIsSPMJoin } from '@/api/research'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import Users from './components/users'
import ResearchForm from '@/views/research/form'
import BaseModel from '@/components/BaseModel'
import ImageManual from './components/ImageManual'
import QRCode from 'qrcodejs2'
const searchDataDefault = () => {
return {
SortField: '',
Asc: true,
PageIndex: 1,
PageSize: 20,
TrialSiteId: '',
UserKeyInfo: '',
State: null,
IsDeleted: '',
DateRange: [],
PreliminaryUserName: null,
ReviewerUserName: null,
}
}
import ResearchList from './components/ResearchList'
export default {
name: 'SiteResearchList',
components: { BaseContainer, Pagination, Users, ResearchForm, BaseModel, ImageManual },
name: 'SiteResearch',
components: {
BaseContainer,
ResearchList
},
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
trialId: this.$route.query.trialId,
siteOptions: [],
researchUserVisible: false,
researchInfoVisible: false,
share_model: {
visible: false,
title: this.$t('trials:researchRecord:title:shark'),
width: '1000px',
},
shareLink: '',
researchState: this.$d.ResearchRecord,
qrcode: null,
validityPeriod: null,
LinkVerificationCode: null,
isExpired: false,
shareLoading: false,
shareForm: {
ExpirationDays: null,
OtherExpirationDays: null,
LinkVerificationCode: null,
OtherLinkVerificationCode: null,
},
rules: {
ExpirationDays: [
{ required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === 'default' && !this.shareForm.OtherExpirationDays) {
callback(new Error(this.$t("common:ruleMessage:specify")));
} else {
callback()
}
}, trigger: 'blur'
}
],
LinkVerificationCode: [
{ required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value === 'default' && !this.shareForm.OtherLinkVerificationCode) {
callback(new Error(this.$t("common:ruleMessage:specify")));
} else {
callback()
}
}, trigger: 'blur'
}
],
},
ImageManualVisible: false,
trialSiteSurveyId: null,
isSPMJoin: false,
activeStatus: 0
}
},
watch: {
activeStatus: {
deep: true,
immediate: true,
handler(v) {
this.$nextTick(() =>{
this.$refs['researchList'].searchData.State = v
this.$refs['researchList'].getList()
})
}
}
},
mounted() {
this.getList()
this.getSite()
this.getTrialIsSPMJoin()
},
methods: {
async getLinkTimeIsExpired() {
async getTrialIsSPMJoin() {
try {
let data = {
TrialId: this.$route.query.trialId,
}
this.shareLoading = true
let res = await getLinkLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.isExpired = res.Result.IsIsExpired
}
} catch (err) {
this.shareLoading = false
console.log(err)
let trialId = this.$route.query.trialId
if (!trialId) return
let res = await getTrialIsSPMJoin( trialId )
this.isSPMJoin = res.Result
} catch(e) {
console.log(e)
}
},
async getLinkTime() {
try {
let data = {
TrialId: this.$route.query.trialId,
}
this.shareLoading = true
let res = await getTrialLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.validityPeriod = res.Result.LinkExpirationTime
this.LinkVerificationCode = res.Result.LinkVerificationCode || res.Result.ResearchProgramNo
if (!this.validityPeriod) {
this.LinkVerificationCode = null
}
if (!this.validityPeriod) return false
this.getLinkTimeIsExpired()
this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${this.$route.query.trialId}`
this.$nextTick(() => {
this.creatQrCode()
})
}
} catch (err) {
this.shareLoading = false
console.log(err)
}
handleClick(step) {
this.activeStatus = step
},
async setLink() {
try {
let validate = await this.$refs.shareForm.validate()
if (!validate) return false
let data = {
TrialId: this.$route.query.trialId,
ExpirationDays: this.shareForm.ExpirationDays,
LinkVerificationCode: this.shareForm.LinkVerificationCode
}
if (this.shareForm.LinkVerificationCode === 'researchProgramNo') {
data.LinkVerificationCode = null
}
if (this.shareForm.LinkVerificationCode === 'default') {
data.LinkVerificationCode = this.shareForm.OtherLinkVerificationCode
}
if (this.shareForm.ExpirationDays === 'default') {
data.ExpirationDays = this.shareForm.OtherExpirationDays
}
this.shareLoading = true
let res = await setTrialLinkExpirationTime(data)
this.shareLoading = false
if (res.IsSuccess) {
this.getLinkTime()
}
} catch (err) {
this.shareLoading = false
console.log(err)
}
},
handleInput(val) {
// 过滤掉非数字字符，并取整为正整数
this.shareForm.OtherExpirationDays = val.replace(/[^\d]/g, '').replace(/^0+/, '')
},
openImageManual() {
// if (!this.trialSiteSurveyId) return false
this.ImageManualVisible = true
},
// 获取系统文件数据
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
this.searchData.updateTimeEnd = this.searchData.DateRange[1]
} else {
this.searchData.UpdateTimeBegin = ''
this.searchData.updateTimeEnd = ''
}
getTrialSiteSurveyList(this.searchData)
.then((res) => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
})
.catch(() => {
this.loading = false
})
},
// 查看调查表记录详情
handleViewResearchList(row) {
changeURLStatic('trialSiteSurveyId', row.Id)
this.researchInfoVisible = true
},
// 废除待提交的调查表
handleRepealResearch(row) {
// 是否确认废除？
this.$confirm(this.$t('trials:researchRecord:message:abolish'), {
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {
abandonSiteSurvey(this.trialId, row.Id).then((res) => {
if (res.IsSuccess) {
this.getList()
// 废除成功
this.$message.success(
this.$t('trials:researchRecord:message:abolishSuccessfully')
)
}
})
})
},
// 展示当前项目下所有调查表需生成账户的用户信息
showResearchUser() {
this.researchUserVisible = true
},
// 复制链接
copyLink() {
// 中心调研表链接
this.$copyText(
`${this.$t('trials:researchRecord:message:researchFormLink')}: ${this.shareLink
}\n${this.$t('trials:researchRecord:label:linkVerificationCode')}${this.LinkVerificationCode}\n${this.$t('trials:researchRecord:label:ValidityPeriod')}${this.validityPeriod}`
)
.then((res) => {
// 复制成功
this.$message.success(
this.$t('trials:researchRecord:message:copySuccessfully')
)
})
.catch(() => {
// 复制失败
this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
})
},
// 创建二维码
creatQrCode() {
this.$refs.qrcode.innerHTML = '' //清除二维码方法一
let text = this.shareLink
this.qrcode = new QRCode(this.$refs.qrcode, {
text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
})
// qrcode.clear(); // 清除二维码方法二
},
// 下载二维码
savePic() {
let qrCodeCanvas = document
.getElementById('qrcode')
.getElementsByTagName('canvas')
let a = document.createElement('a')
a.href = qrCodeCanvas[0].toDataURL('image/url')
a.download = `${this.$route.query.researchProgramNo}${this.$t('trials:researchRecord:title:code')}.png`
a.click()
},
// 复制二维码
handleCopyImg() {
let qrCodeCanvas = document
.getElementById('qrcode')
.getElementsByTagName('canvas')
qrCodeCanvas[0].toBlob(async (blob) => {
console.log(blob)
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
] // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
await navigator.clipboard.write(data).then(
() => {
this.$message.success(
this.$t('trials:researchRecord:message:copySuccess')
)
},
() => {
this.$message.error(
this.$t('trials:researchRecord:message:UnableWrite')
)
}
)
})
},
// 获取site下拉框数据
getSite() {
getTrialSiteSelect(this.trialId).then((res) => {
this.siteOptions = res.Result
})
},
// 展示调查表链接
showResearchLink() {
this.shareForm = {
ExpirationDays: null,
OtherExpirationDays: null,
LinkVerificationCode: null,
OtherLinkVerificationCode: null,
}
this.validityPeriod = null
this.isExpired = false
this.share_model.visible = true
this.getLinkTime()
// &lang=${this.$i18n.locale}
// this.trialSiteSurveyId = this.list[0].Id
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.searchData.DateRange = []
if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
this.searchData.updateTimeEnd = this.searchData.DateRange[1]
} else {
this.searchData.UpdateTimeBegin = ''
this.searchData.updateTimeEnd = ''
}
this.getList()
this.$nextTick(() => {
this.$refs.siteResearchList.clearSort()
})
},
// 查询
handleSearch() {
this.getList()
},
// 排序
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.searchData.Asc = true
} else {
this.searchData.Asc = false
}
this.searchData.SortField = column.prop
this.getList()
},
},
beforeDestroy() {
if (this.qrcode) {
this.qrcode = null
}
},
}
}
</script>
<style lang="scss" scoped>
.date,
.share {
width: 55%;
height: 100%;
}
.dayInput {
::v-deep .el-input__inner {
padding-left: 5px;
.step-wrapper {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
background-color: #fff;
}
}
.date {
padding-right: 10px;
}
.share {
width: 45%;
padding-left: 5%;
border-left: 1px solid #f0f0f0;
box-sizing: border-box;
}
.shareLinkBtn {
float: right;
}
.qrCodeBox {
width: 220px;
height: 220px;
display: flex;
border: 1px solid #c0c4cc;
border-radius: 5px;
box-shadow: 1px 1px 5px #c0c4cc;
align-items: center;
justify-content: center;
}
.dateBox {
margin: 10px;
}
.codeBtnBox {
::v-deep .el-button {
display: block;
margin: 10px auto;
.el-steps {
height: 80px;
justify-content: center;
}
}
.step-content {
flex: 1;
}
// .underline {
// // .el-step__title {
// // text-decoration: underline
// // }
// .el-step__title,
// .el-step__title.is-process,
// .el-step__title.is-finish {
// text-decoration: underline;
// }
// }
// .noneUnderline {
// .el-step__title {
// text-decoration: none;
// }
// }
// .el-step__head.is-process,
// .el-step__title.is-process,
// .el-step__description.is-process {
// color: #428bca;
// border-color: #428bca;
// }
// .el-step__head.is-process .el-step__line {
// background-color: #428bca;
// }
// .el-step__head.is-finish,
// .el-step__title.is-finish,
// .el-step__description.is-finish {
// color: #303133;
// border-color: #303133;
// }
// .el-step__title.is-process,
// .el-step__title.is-finish {
// text-decoration: none;
// }
// .el-step__head.is-finish .el-step__line {
// background-color: #303133;
// }
.click_cursor {
cursor: pointer;
}
</style>