irc_web/src/views/trials/trials-panel/visit/reupload-audit/index.vue

527 lines
22 KiB
Vue

<template>
<BaseContainer class="reuploa-audit-wrapper">
<!-- 搜索框 -->
<template slot="search-container">
<el-form :inline="true">
<!-- 中心编号 -->
<el-form-item :label="$t('trials:reuploadAudit:table:siteId')">
<el-select v-model="searchData.TrialSiteId" clearable filterable style="width: 120px"
placeholder="">
<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:reuploadAudit:table:subjectId')">
<el-input v-model="searchData.SubjectCode" style="width: 100px" clearable />
</el-form-item>
<!-- 访视名称 -->
<el-form-item :label="$t('trials:reuploadAudit:table:visitName')">
<el-select v-model="searchData.VisitPlanArray" style="width: 200px" clearable multiple
:collapse-tags="true" placeholder="">
<el-option v-for="(item, index) of visitPlanOptions" :key="index" :label="item.VisitName"
:value="item.VisitNum">
<span style="float: left">{{ item.VisitName }}</span>
</el-option>
<el-option key="Other" label="Out of Plan" value="1.11" />
</el-select>
</el-form-item>
<!-- 申请人 -->
<el-form-item class="my_multiple" :label="$t('trials:reuploadAudit:table:CreateUserId')">
<el-select v-model="searchData.CreateUserId" style="width: 140px" clearable placeholder="">
<el-option v-for="(item) of userOptions" :key="item.CreateUserId" :label="item.FullName"
:value="item.CreateUserId">
</el-option>
</el-select>
</el-form-item>
<!-- 申请人角色 -->
<el-form-item class="my_multiple" :label="$t('trials:reuploadAudit:table:ApplyUserRole')">
<el-select v-model="searchData.ApplyUserRole" style="width: 140px" clearable placeholder="">
<el-option v-for="(item) of $d.ImageBackApplyEnum" :key="item.id" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 申请时间 -->
<el-form-item :label="$t('trials:reuploadAudit:table:createTime')">
<el-date-picker v-model="timeListC" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="changeTimeListC"
style="width: 360px" />
</el-form-item>
<!-- 审核状态 -->
<el-form-item :label="$t('trials:reuploadAudit:table:auditState')" class="my_multiple">
<el-select v-model="searchData.ImageBackState" clearable style="width: 140px" placeholder="">
<el-option v-for="item of $d.ImageBackstateEnum" :key="item.id" :value="item.value"
:label="item.label" />
</el-select>
</el-form-item>
<!-- 审核通过时间 -->
<el-form-item :label="$t('trials:reuploadAudit:table:auditTime')">
<el-date-picker v-model="timeList" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="changeTimeList"
style="width: 360px" />
</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" @click="handleExport"
v-if="hasPermi(['trials:trials-panel:visit:reupload-audit:export'])">
{{ $t('common:button:export') }}
</el-button>
</el-form-item>
</el-form>
</template>
<!-- 重传审批列表 -->
<template slot="main-container">
<el-table ref="reuploadAuditList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe
height="100" @sort-change="handleSortByColumn">
<!-- 是否加急 -->
<el-table-column prop="IsUrgent" :label="$t('trials:reuploadAudit:table:isUrgent')"
show-overflow-tooltip width="120" sortable="custom">
<template slot-scope="scope">
<el-button v-if="
scope.row.IsUrgent &&
hasPermi(['trials:trials-panel:visit:reuploa-audit:set-urgent'])
" type="danger" size="mini" :disabled="!(userTypeEnumInt === 1 || userTypeEnumInt === 3)"
@click="handleUrgentStatus(scope.row)">
{{ $fd('YesOrNo', scope.row.IsUrgent) }}
</el-button>
<el-button v-else-if="
!scope.row.IsUrgent &&
hasPermi(['trials:trials-panel:visit:reuploa-audit:set-urgent'])
" size="mini" type="primary" :disabled="!(userTypeEnumInt === 1 || userTypeEnumInt === 3)"
@click="handleUrgentStatus(scope.row)">
{{ $fd('YesOrNo', scope.row.IsUrgent) }}
</el-button>
<span v-else>
<el-tag v-if="scope.row.IsUrgent" type="danger">
{{ $fd('YesOrNo', scope.row.IsUrgent) }}
</el-tag>
<el-tag v-else type="primary">
{{ $fd('YesOrNo', scope.row.IsUrgent) }}
</el-tag>
</span>
</template>
</el-table-column>
<!-- 中心编号 -->
<el-table-column prop="TrialSiteCode" :label="$t('trials:reuploadAudit:table:siteId')"
show-overflow-tooltip sortable="custom" min-width="120px" />
<!-- 受试者编号 -->
<el-table-column prop="SubjectCode" :label="$t('trials:reuploadAudit:table:subjectId')"
show-overflow-tooltip sortable="custom" min-width="120px" />
<!-- 访视名称 -->
<el-table-column prop="VisitName" :label="$t('trials:reuploadAudit:table:visitName')"
show-overflow-tooltip sortable="custom" min-width="120px">
</el-table-column>
<!-- 最晚拍片日期 -->
<el-table-column prop="LatestScanDate" :label="$t('trials:reuploadAudit:table:lScanDate')"
show-overflow-tooltip min-width="170" sortable="custom">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="`${scope.row.EarliestScanDate
? moment(scope.row.EarliestScanDate).format('YYYY-MM-DD')
: ''
} ~ ${scope.row.LatestScanDate
? moment(scope.row.LatestScanDate).format('YYYY-MM-DD')
: ''
}`" placement="top">
<span>
{{
scope.row.LatestScanDate
? moment(scope.row.LatestScanDate).format('YYYY-MM-DD')
: ''
}}
</span>
</el-tooltip>
</template>
</el-table-column>
<!-- 提交时间 -->
<el-table-column prop="SubmitTime" :label="$t('trials:reuploadAudit:table:SubmitTime')"
show-overflow-tooltip sortable="custom" min-width="150px" />
<!-- 申请人 -->
<el-table-column prop="CreateUserFullName" :label="$t('trials:reuploadAudit:table:createUserFullName')"
show-overflow-tooltip sortable="custom" min-width="120px" />
<!-- 申请人角色 -->
<el-table-column prop="ApplyUserRole" :label="$t('trials:reuploadAudit:table:applyUserRole')"
show-overflow-tooltip sortable="custom" min-width="120px">
<template slot-scope="scope">
<span>{{ $fd('ImageBackApplyEnum',
scope.row.ApplyUserRole) }}</span>
</template>
</el-table-column>
<!-- 申请原因 -->
<el-table-column prop="ApplyReason" :label="$t('trials:reuploadAudit:table:ApplyReason')"
show-overflow-tooltip sortable="custom" min-width="120px" />
<!-- 申请时间 -->
<el-table-column prop="CreateTime" :label="$t('trials:reuploadAudit:table:createTime')"
show-overflow-tooltip sortable="custom" min-width="150px" />
<!-- 审核状态 -->
<el-table-column prop="ImageBackState" :label="$t('trials:reuploadAudit:table:imageBackState')"
show-overflow-tooltip sortable="custom" min-width="120px">
<template slot-scope="scope">
<el-tag :type="['warning', '', 'danger'][scope.row.ImageBackState]">{{ $fd('ImageBackstateEnum',
scope.row.ImageBackState) }}</el-tag>
</template>
</el-table-column>
<!-- 备注 -->
<el-table-column prop="ResultRemark" :label="$t('trials:reuploadAudit:table:ResultRemark')"
show-overflow-tooltip sortable="custom" min-width="120px" />
<!-- 审核时间 -->
<el-table-column prop="AuditTime" :label="$t('trials:reuploadAudit:table:auditTime')"
show-overflow-tooltip sortable="custom" min-width="150px" />
<el-table-column :label="$t('common:action:action')" fixed="right"
v-if="hasPermi(['trials:trials-panel:visit:reupload-audit:agree'])" min-width="120px">
<template slot-scope="scope">
<el-button :title="$t('trials:reuploadAudit:button:imageBack')"
v-hasPermi="['trials:trials-panel:visit:reupload-audit:agree']" circle
:disabled="scope.row.ImageBackState > 0" icon="el-icon-edit-outline" size="mini"
@click="audit(scope.row)" />
<!-- <el-button :title="$t('trials:reuploadAudit:button:auditNo')"
v-hasPermi="['trials:trials-panel:visit:reupload-audit:refuse']"
:disabled="scope.row.ImageBackState > 0" circle icon="el-icon-close" size="mini"
@click="audit(scope.row, 2)" /> -->
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
@pagination="getList" />
</template>
<base-model v-if="config.visible" :config="config">
<template slot="dialog-body">
<el-form ref="imageBackform" :model="form" class="demo-form-inline" :rules="rules"
:label-width="isEN ? '150px' : '100px'">
<el-form-item :label="$t('trials:reuploadAudit:table:Matters')" prop="Matters">
<span>{{ rowData.title }}</span>
</el-form-item>
<el-form-item :label="$t('trials:reuploadAudit:form:ApplyReason')" prop="ApplyReason">
<span>{{ rowData.ApplyReason }}</span>
</el-form-item>
<el-form-item :label="$t('trials:reuploadAudit:form:IsAgree')" prop="IsAgree">
<el-radio-group v-model="form.IsAgree">
<el-radio :label="true">{{ $t('trials:reuploadAudit:button:auditYes') }}</el-radio>
<el-radio :label="false">{{ $t('trials:reuploadAudit:button:auditNo') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('trials:reuploadAudit:form:ResultRemark')" prop="ResultRemark">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder=""
v-model="form.ResultRemark">
</el-input>
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button type="primary" @click="auditImageBack" :loading="loading">
{{ $t('common:button:confirm') }}
</el-button>
<el-button @click="config.visible = false" :loading="loading">
{{ $t('common:button:cancel') }}
</el-button>
</template>
</base-model>
</BaseContainer>
</template>
<script>
import {
getImageBackList,
getTrialSiteSelect,
auditImageBack,
getImageBackApplyUserList,
getTrialVisitStageSelect
} from '@/api/trials'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import baseModel from '@/components/BaseModel'
import { GetImageBackList_Export } from '@/api/export'
const searchDataDefault = () => {
return {
TrialId: null,
TrialSiteId: null,
SubjectCode: null,
CreateUserId: null,
ApplyUserRole: null,
ApplyBeginTime: null,
ApplyEndTime: null,
ImageBackState: null,
AuditBeginTime: null,
AuditEndTime: null,
VisitName: null,
VisitPlanArray: [],
PageIndex: 1,
PageSize: 20,
Asc: false,
SortField: 'CreateTime'
}
}
export default {
name: 'QcCheck',
components: {
BaseContainer,
Pagination,
baseModel
},
data() {
return {
searchData: searchDataDefault(),
total: 0,
list: [],
loading: false,
siteOptions: [],
userOptions: [],
visitPlanOptions: [],
timeListC: [],
timeList: [],
trialId: null,
moment,
rowData: {},
config: {
visible: false,
title: this.$t("trials:reuploadAudit:confirmMessage:imageBack"),
width: '500px',
appendToBody: true,
},
form: {
IsAgree: null,
ResultRemark: null
},
rules: {
IsAgree: [
{
required: true,
message: this.$t('common:ruleMessage:select'),
trigger: ['blur', 'change'],
},
],
}
}
},
computed: {
isEN() {
return this.$i18n.locale !== 'zh'
},
},
watch: {
list(val) {
this.doLayout()
},
},
mounted() {
this.trialId = this.$route.query.trialId
this.getList()
this.getSite()
this.getUser()
this.getVisitPlanOptions()
},
methods: {
async audit(row) {
try {
this.rowData = Object.assign({}, row)
this.rowData.title = `${row.CreateUserFullName} (${this.$fd('ImageBackApplyEnum', row.ApplyUserRole)}) ${this.$t('trials:reuploadAudit:title:imageBack').replace('xxx', row.SubjectCode).replace('yyy', row.VisitName)}`
Object.keys(this.form).forEach(key => {
this.form[key] = null
})
this.config.visible = true
} catch (err) {
console.log(err)
this.loading = false
}
},
async auditImageBack() {
try {
let validate = await this.$refs.imageBackform.validate()
if (!validate) return false
let params = Object.assign({}, this.form)
params.IamgeBackRecordId = this.rowData.Id
// return console.log(params)
this.loading = true
let res = await auditImageBack(params)
this.loading = false
if (res.IsSuccess) {
this.config.visible = false
this.getList()
}
} catch (err) {
this.loading = false
console.log(err)
}
},
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
getImageBackList(this.searchData)
.then((res) => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
this.OtherInfo = res.OtherInfo
})
.catch(() => {
this.loading = false
})
},
// 获取site下拉框数据
getSite() {
getTrialSiteSelect(this.trialId).then((res) => {
this.siteOptions = res.Result
})
},
// 获取访视下拉框数据
getVisitPlanOptions() {
getTrialVisitStageSelect(this.trialId).then((res) => {
this.visitPlanOptions = res.Result
})
},
// 获取申请人下拉框数据
getUser() {
getImageBackApplyUserList({
TrialId: this.trialId
}).then((res) => {
this.userOptions = res.Result
})
},
doLayout() {
const scope = this
this.$nextTick(() => {
scope.$refs.reuploadAuditList.doLayout()
})
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.timeList = []
this.getList()
this.timeListC = []
this.$nextTick(() => {
this.$refs.reuploadAuditList.clearSort()
})
},
// 查询
handleSearch() {
this.searchData.PageIndex = 1
this.getList()
},
// 排序
handleSortByColumn(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()
},
changeTimeList() {
if (this.timeList) {
this.searchData.AuditBeginTime = this.timeList[0]
this.searchData.AuditEndTime = this.timeList[1]
} else {
this.searchData.AuditBeginTime = null
this.searchData.AuditEndTime = null
}
},
changeTimeListC() {
if (this.timeListC) {
this.searchData.ApplyBeginTime = this.timeListC[0]
this.searchData.ApplyEndTime = this.timeListC[1]
} else {
this.searchData.ApplyBeginTime = null
this.searchData.ApplyEndTime = null
}
},
handleExport() {
return GetImageBackList_Export(this.searchData)
}
},
}
</script>
<style lang="scss">
.reuploa-audit-wrapper {
position: relative;
.remark {
position: absolute;
left: 5px;
bottom: 7px;
font-size: 12px;
}
height: 100%;
.qc-dialog {
.el-dialog__headerbtn {
top: 10px;
font-size: 30px;
}
.el-dialog__body {
height: calc(100% - 70px);
padding: 0 10px;
.qc-dialog-body {
padding: 10px 20px;
height: 100%;
overflow-y: auto;
}
}
.link-breadcrumb {
cursor: pointer;
color: #428bca;
}
}
.box-title {
padding: 12px;
margin-bottom: 10px;
background-color: #dcdfe6;
}
.status-primary-circle {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 18px;
border-radius: 50%;
border: 1px solid #f56c6c;
color: #f56c6c;
font-size: 10px;
}
.manuals-dialog-container {
margin-top: 50px !important;
width: 75%;
height: 80%;
.el-dialog__body {
padding: 10px;
height: calc(100% - 50px) !important;
}
.el-dialog__header {
position: relative;
}
}
.manuals-full-dialog-container {
.el-dialog__body {
padding: 10px;
height: calc(100% - 50px) !important;
}
.el-dialog__header {
position: relative;
}
}
}
</style>