irc_web/.svn/pristine/09/093933c723f7a9dc2cb70e59deb...

343 lines
9.2 KiB
Plaintext

<template>
<box-content v-loading="loading">
<!-- 搜索框 -->
<div class="search">
<el-form
:inline="true"
size="mini"
class="base-search-form"
>
<!-- 审核问题 -->
<el-form-item
:label="$t('trials:qcCfg:table:questionName')"
>
<el-input
v-model="searchData.QuestionName"
clearable
style="width:120px;"
/>
</el-form-item>
<!-- 类型 -->
<el-form-item
:label="$t('trials:qcCfg:table:type')"
>
<el-select
v-model="searchData.Type"
clearable
style="width:120px;"
>
<el-option
v-for="item of $d.QcType"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleSearch"
>{{ $t('common:button:search') }}</el-button>
<el-button
type="primary"
@click="handleReset"
>{{ $t('common:button:reset') }}</el-button>
</el-form-item>
</el-form>
<span style="margin-left:auto">
<el-button
type="primary"
size="mini"
:disabled="selectArr.length<=0"
@click="handleSubmit"
>
{{ $t('common:button:submit') }}
</el-button>
</span>
</div>
<el-table
:data="list"
stripe
size="small"
height="600"
@selection-change="handleSelectChange"
>
<el-table-column
type="selection"
align="left"
width="45"
/>
<el-table-column type="index" width="60" />
<!-- 审核问题 -->
<el-table-column
prop="QuestionName"
:label="$t('trials:qcCfg:table:questionName')"
show-overflow-tooltip
/>
<!-- 类型 -->
<el-table-column
prop="Type"
:label="$t('trials:qcCfg:table:type')"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ $fd('QcType', scope.row.Type) }}
</template>
</el-table-column>
<!-- 选项 -->
<el-table-column
prop="TypeValue"
:label="$t('trials:qcCfg:table:typeValue')"
show-overflow-tooltip
min-width="110"
/>
<!-- 序号 -->
<el-table-column
prop="ShowOrder"
:label="$t('trials:qcCfg:table:order')"
min-width="70"
/>
<!-- 是否必填 -->
<el-table-column
prop="IsRequired"
:label="$t('trials:qcCfg:table:isRequired')"
min-width="90"
>
<template slot-scope="scope">
{{ $fd('YesOrNo', scope.row.IsRequired) }}
</template>
</el-table-column>
<!-- 启用状态 -->
<el-table-column
prop="IsEnable"
:label="$t('trials:qcCfg:table:isEnable')"
min-width="120"
>
<template slot-scope="scope">
{{ $fd('IsEnable', scope.row.IsEnable) }}
</template>
</el-table-column>
</el-table>
<!-- 自定义QC问题 -->
<el-dialog
v-if="customQuestionVisible"
:show-close="true"
:visible.sync="customQuestionVisible"
append-to-body
>
<div
style="border:1px solid #e0e0e0;padding:10px;"
>
<el-form
ref="qcQuestionForm"
:model="form"
:rules="rules"
label-width="100px"
size="small"
>
<!-- 审核问题 -->
<el-form-item
label="审核问题: "
prop="QuestionName"
>
<el-input v-model="form.QuestionName" />
</el-form-item>
<el-form-item
label="是否必填: "
>
<el-radio-group
v-model="form.IsRequired"
>
<el-radio
:label="true"
>是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="启用状态: "
>
<el-radio-group
v-model="form.IsEnable"
>
<el-radio
:label="true"
>
启用
</el-radio>
<el-radio
:label="false"
>
停用
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="类型: "
>
<el-select
v-model="form.Type"
>
<el-option
value="select"
label="下拉框"
/>
<el-option
value="input"
label="单行文本框"
/>
<el-option
value="textarea"
label="多行文本框"
/>
<el-option
value="radio"
label="单选框"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="form.Type === 'textarea' || form.Type === 'input'"
label="选项: "
>
<el-input-number
v-model="form.TypeValue"
placeholder="输入文本框最大长度限制"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item
v-else
label="选项: "
prop="TypeValue"
>
<el-input
v-model="form.TypeValue"
placeholder="选项请用‘|’分割多个选项"
/>
</el-form-item>
<el-form-item
label="序号: "
prop="ShowOrder"
>
<el-input-number
v-model="form.ShowOrder"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-form>
</div>
<div
slot="footer"
class="base-modal-footer"
>
<el-button
size="small"
type="primary"
@click="customQuestionVisible = false"
>Cancel</el-button>
<el-button
size="small"
type="primary"
@click="handleSaveCustomQuestion"
>Save</el-button>
</div>
</el-dialog>
</box-content>
</template>
<script>
import { getQCQuestionConfigureList } from '@/api/dictionary'
import { batchAddTrialQCQuestionConfigure } from '@/api/trials'
import BoxContent from '@/components/BoxContent'
const searchDataDefault = () => {
return {
QuestionName: '',
Type: ''
}
}
export default {
name: 'QcQuestions',
components: { BoxContent },
data() {
return {
trialId: '',
searchData: searchDataDefault(),
list: [],
loading: false,
selectArr: [],
customQuestionVisible: false,
form: {
Id: '',
QuestionName: '',
IsRequired: true,
IsEnable: true,
Type: 'select',
TypeValue: '',
ParentTriggerValue: '',
ParentId: '',
ShowOrder: 0
},
rules: {
QuestionName: [{ required: true, message: 'Please specify', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }],
TypeValue: [{ required: true, message: 'Please specify', trigger: 'blur' },
{ max: 200, message: 'The maximum length is 200' }]
}
}
},
mounted() {
this.trialId = this.$route.query.trialId
this.getList()
},
methods: {
// 获取受试者列表信息
getList() {
this.loading = true
this.searchData.TrialId = this.trialId
getQCQuestionConfigureList(this.searchData).then(res => {
this.loading = false
this.list = res.Result
}).catch(() => { this.loading = false })
},
handleSelectChange(val) {
this.selectArr = val
},
handleSubmit() {
this.loading = true
batchAddTrialQCQuestionConfigure(this.trialId, this.selectArr).then(res => {
this.loading = false
if (res.IsSuccess) {
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.$emit('getList')
this.$emit('closeDialog')
}
}).catch(() => { this.loading = false })
},
handleNewQuestion() {
this.customQuestionVisible = true
},
handleSaveCustomQuestion() {
this.$refs.qcQuestionForm.validate(valid => {
if (!valid) return
this.list.unshift(this.form)
this.customQuestionVisible = false
})
},
// 查询
handleSearch() {
this.getList()
},
// 重置
handleReset() {
this.searchData = searchDataDefault()
this.getList()
}
}
}
</script>