hir_web/src/views/dictionary/template/components/CriterionsConfig.vue

383 lines
11 KiB
Vue

<template>
<div class="criterion-config">
<el-tabs v-model="activeName">
<el-tab-pane label="访视阅片" name="0">
<div class="search-form" style="display:flex;justify-content: space-between;">
<el-form :inline="true" size="mini" class="base-search-form">
<el-form-item label="阅片问题">
<el-input v-model="searchData.QuestionName" clearable style="width:120px;" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleReset">重置</el-button>
<el-button type="primary" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
<div>
<el-button
:disabled="list.length === 0"
size="mini"
type="primary"
@click="preview.visible = true"
>
预览
</el-button>
<el-button
v-if="Object.keys(data).length > 0 && !(data.IsCompleteConfig || data.IsBeUsed)"
size="mini"
type="primary"
@click="handleAdd"
>
添加
</el-button>
</div>
</div>
<el-table
ref="criterionQSList"
v-loading="loading"
v-adaptive="{bottomOffset:80}"
height="100"
:data="list"
stripe
@sort-change="handleSortByColumn"
>
<el-table-column
prop="ShowOrder"
label=""
width="50"
/>
<el-table-column
prop="GroupName"
label="分组"
show-overflow-tooltip
/>
<el-table-column
prop="GroupEnName"
label="分组(EN)"
show-overflow-tooltip
/>
<el-table-column
prop="QuestionName"
label="名称"
show-overflow-tooltip
/>
<el-table-column
prop="QuestionEnName"
label="名称(EN)"
show-overflow-tooltip
/>
<el-table-column
prop="Type"
label="题型"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('Criterion_Question_Type',scope.row.Type) }}
</template>
</el-table-column>
<el-table-column
prop="IsRequired"
label="是否必填"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('QuestionRequired',scope.row.IsRequired) }}
</template>
</el-table-column>
<el-table-column
prop="ShowQuestion"
label="是否显示"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('ShowQuestion',scope.row.ShowQuestion) }}
</template>
</el-table-column>
<el-table-column
prop="IsJudgeQuestion"
label="是否裁判问题"
width="120"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsJudgeQuestion) }}
</template>
</el-table-column>
<el-table-column
prop="IsShowInDicom"
label="是否在阅片页面显示"
width="140"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsShowInDicom) }}
</template>
</el-table-column>
<!-- 注释 -->
<el-table-column
prop="Remark"
:label="$t('trials:readingUnit:qsList:title:Remark')"
width="140"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="GlobalReadingShowType"
label="是否在全局阅片显示"
width="160"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('GlobalReadingShowType', scope.row.GlobalReadingShowType) }}
</template>
</el-table-column>
<!-- 限制编辑 -->
<el-table-column
prop="LimitEdit"
:label="$t('trials:readingUnit:qsList:title:limitEdit')"
width="160"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('LimitEdit', scope.row.LimitEdit) }}
</template>
</el-table-column>
<el-table-column
prop=""
label="操作"
width="250"
show-overflow-tooltip
fixed="right"
>
<template slot-scope="scope">
<el-button
v-if="Object.keys(data).length > 0 && !(data.IsCompleteConfig || data.IsBeUsed)"
type="primary"
size="mini"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
v-else
type="primary"
size="mini"
@click="handleLook(scope.row)"
>
查看
</el-button>
<el-button
type="primary"
size="mini"
:disabled="scope.row.Type !== 'table'"
@click="handleConfig(scope.row)"
>
表格问题
</el-button>
<el-button
v-if="Object.keys(data).length > 0 && !(data.IsCompleteConfig || data.IsBeUsed)"
type="danger"
size="mini"
:disabled="scope.row.IsEnable"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination style="text-align: right;margin-top: 10px;" class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
</el-tab-pane>
<el-tab-pane label="全局阅片" name="Global">
<EvaluationOfGlobalConfig v-if="activeName === 'Global'" :data="data" :criterion-id="criterionId" />
</el-tab-pane>
<el-tab-pane label="肿瘤学阅片" name="Oncology">
<EvaluationOfOncologyConfig v-if="activeName === 'Oncology'" :data="data" :criterion-id="criterionId" />
</el-tab-pane>
</el-tabs>
<el-dialog
v-if="addOrEdit.visible"
:visible.sync="addOrEdit.visible"
:close-on-click-modal="false"
:title="addOrEdit.title"
width="600px"
append-to-body
custom-class="base-dialog-wrapper"
>
<CriterionQuestionForm
ref="addOrEdit"
:data="rowData"
:type="type"
@close="addOrEdit.visible = false"
@getList="getList"
/>
</el-dialog>
<!-- 预览 -->
<el-dialog
v-if="preview.visible"
v-dialogDrag
:visible.sync="preview.visible"
:close-on-click-modal="false"
:title="preview.title"
fullscreen
append-to-body
>
<div>
<ECRF
:criterion-id="criterionId"
/>
</div>
</el-dialog>
<el-dialog
v-if="config.visible"
:visible.sync="config.visible"
:close-on-click-modal="false"
:title="config.title"
width="90%"
append-to-body
>
<TableQsList
:criterion-id="criterionId"
:reading-question-id="rowData.Id"
:is-complete-config="data.IsCompleteConfig"
:lesion-type="rowData.LesionType"
/>
</el-dialog>
</div>
</template>
<script>
import { getReadingQuestionSystemList, deleteReadingQuestionSystem } from '@/api/dictionary'
import Pagination from '@/components/Pagination'
import CriterionQuestionForm from './CriterionQuestionForm'
import EvaluationOfOncologyConfig from './EvaluationOfOncologyConfig'
import EvaluationOfGlobalConfig from './EvaluationOfGlobalConfig'
import ECRF from './ECRF'
import TableQsList from './TableQsList'
const searchDataDefault = () => {
return {
QuestionName: '',
PageIndex: 1,
PageSize: 20
}
}
export default {
name: 'QcQuestions',
components: { Pagination, CriterionQuestionForm, ECRF, TableQsList, EvaluationOfOncologyConfig, EvaluationOfGlobalConfig },
props: {
criterionId: {
type: String,
required: true
},
data: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
searchData: searchDataDefault(),
list: [],
total: 0,
type: null,
loading: false,
rowData: {},
activeName: '0',
addOrEdit: { visible: false, title: '' },
preview: { visible: false, title: 'eCRF预览' },
config: { visible: false, title: '' }
}
},
watch: {
list() {
this.$nextTick(() => {
if(this.$refs.criterionQSList){
this.$refs.criterionQSList.doLayout()
}
})
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.loading = true
this.searchData.ReadingQuestionCriterionSystemId = this.criterionId
getReadingQuestionSystemList(this.searchData).then(res => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
}).catch(() => { this.loading = false })
},
handleAdd() {
this.rowData = { ReadingQuestionCriterionSystemId: this.criterionId, Id: '' }
this.type = 'add'
this.addOrEdit.title = '添加'
this.addOrEdit.visible = true
},
handleLook(row) {
this.rowData = { ...row }
this.type = 'look'
this.addOrEdit.title = '查看'
this.addOrEdit.visible = true
},
handleEdit(row) {
this.rowData = { ...row }
this.type = 'edit'
this.addOrEdit.title = '编辑'
this.addOrEdit.visible = true
},
handleDelete(row) {
this.$confirm(this.$t('trials:staffResearch:message:confirmDel'), {
type: 'warning',
distinguishCancelAndClose: true
})
.then(() => {
this.loading = true
deleteReadingQuestionSystem(row.Id)
.then(res => {
this.loading = false
if (res.IsSuccess) {
this.getList()
this.$message.success('删除成功!')
}
}).catch(() => { this.loading = false })
})
},
handleConfig(row) {
this.rowData = { ...row }
this.config.title = `${this.$fd('LesionType', row.LesionType)}:表格问题`
this.config.visible = true
},
// 查询
handleSearch() {
this.getList()
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
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()
}
}
}
</script>
<style lang="scss" scoped>
</style>