irc_web/src/views/trials/trials-panel/attachments/site-research/index.vue

440 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<BaseContainer>
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心 -->
<el-form-item :label="$t('trials:researchRecord:table:siteId')">
<el-select v-model="searchData.SiteId" clearable filterable style="width:120px;">
<el-option
v-for="(item,index) of siteOptions"
:key="index"
:label="item.TrialSiteCode"
:value="item.SiteId"
/>
</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"
show-overflow-tooltip
/>
<!-- 中心名称 -->
<el-table-column
prop="SiteName"
:label="$t('trials:researchRecord:table:siteName')"
min-width="100"
show-overflow-tooltip
/>
<!-- 联系人 -->
<el-table-column
prop="UserName"
:label="$t('trials:researchRecord:table:contactor')"
min-width="100"
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"
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"
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
/>
<el-table-column
width="150"
>
<template slot-scope="scope">
<!-- 查看 -->
<el-button
:disabled="scope.row.State !== 3"
circle
:title="$t('trials:researchRecord:action: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"
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>
</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>
<!-- 调查表链接 -->
<base-model :config="share_model">
<template slot="dialog-body">
<div>
<i style="color:#428bca;" class="el-icon-success" />
<!-- 成功创建调查表链接 -->
<span>{{ $t('trials:researchRecord:message:createLinkSuccessfully') }}</span>
</div>
<div style="margin:10px 0;">
<!-- 链接 -->
{{ $t('trials:researchRecord:label:link') }}
<el-input ref="shareLink" v-model="shareLink" readonly type="textarea" autosize />
</div>
<div>
<!-- 复制链接 -->
<el-button type="primary" round @click="copyLink">
{{ $t('trials:researchRecord:button:copyLink') }}
</el-button>
</div>
</template>
</base-model>
</BaseContainer>
</template>
<script>
import { getTrialSiteSurveyList, getTrialSiteSelect, abandonSiteSurvey } from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
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'
const searchDataDefault = () => {
return {
SortField: '',
Asc: true,
PageIndex: 1,
PageSize: 20,
SiteId: '',
UserKeyInfo: '',
State: null,
IsDeleted: '',
DateRange: [],
PreliminaryUserName: null,
ReviewerUserName: null
}
}
export default {
name: 'SiteResearchList',
components: { BaseContainer, Pagination, Users, ResearchForm, BaseModel },
data() {
return {
searchData: searchDataDefault(),
loading: false,
list: [],
total: 0,
trialId: this.$route.query.trialId,
siteOptions: [],
researchUserVisible: false,
researchInfoVisible: false,
share_model: { visible: false, title: '', width: '500px' },
shareLink: '',
researchState: this.$d.ResearchRecord
}
},
mounted() {
this.getList()
this.getSite()
},
methods: {
// 获取系统文件数据
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}`).then(
res => {
// 复制成功
this.$message.success(this.$t('trials:researchRecord:message:copySuccessfully'))
}
).catch(() => {
// 复制失败
this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
})
},
// 获取site下拉框数据
getSite() {
getTrialSiteSelect(this.trialId).then(res => {
this.siteOptions = res.Result
})
},
// 展示调查表链接
showResearchLink() {
const trialId = this.trialId
this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${trialId}&lang=${this.$i18n.locale}`
this.share_model.visible = true
},
// 重置
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()
}
}
}
</script>