irc_web/src/views/reviewers/curriculumVitae/components/info/setting.vue

422 lines
12 KiB
Vue

<template>
<div class="setting">
<div class="title">
<span>{{ $t('curriculumVitae:setting:title') }}</span>
<el-button
type="text"
class="editBtn"
:disabled="!reviewerId"
@click.stop="openEdit"
>
{{ $t('common:button:edit') }}
</el-button>
</div>
<div class="message">
<el-form :inline="true" class="demo-form-inline">
<el-form-item
:label="$t('system:Setting:label:Blind Name')"
style="width: 45%"
>
{{ DATA.BlindName }}
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Blind NameCN')"
style="width: 45%"
>
{{ DATA.BlindNameCN }}
</el-form-item>
<div style="display: flex; font-size: 14px; margin-bottom: 22px">
<span style="display: inline-block; width: 120px; color: #000">{{
$t('system:Setting:label:Blind Publications')
}}</span>
<span
class="break-word"
style="white-space: pre-wrap; width: calc(100% - 120px)"
v-html="DATA.BlindPublications"
></span>
</div>
<el-form-item
:label="$t('system:Setting:label:Information Confirmed?')"
style="width: 24%"
>
{{
DATA.ReviewStatus === 1
? $t('system:Setting:label:Information Confirmed?:Yes')
: $t('system:Setting:label:Information Confirmed?:No')
}}
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Contractor Status?')"
style="width: 24%"
>
{{
DATA.CooperateStatus === 1
? $t('system:Setting:label:Information Confirmed?:Yes')
: $t('system:Setting:label:Information Confirmed?:No')
}}
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Accepting New Trials?')"
style="width: 24%"
>
{{
DATA.AcceptingNewTrial
? $t('system:Setting:label:Information Confirmed?:Yes')
: $t('system:Setting:label:Information Confirmed?:No')
}}
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Actively Reading?')"
style="width: 24%"
>
{{
DATA.ActivelyReading
? $t('system:Setting:label:Information Confirmed?:Yes')
: $t('system:Setting:label:Information Confirmed?:No')
}}
</el-form-item>
<div style="display: flex; font-size: 14px; margin-bottom: 22px">
<span style="display: inline-block; width: 80px; color: #000">{{
$t('system:Setting:label:Comment:')
}}</span>
<span
class="break-word"
style="white-space: pre-wrap; width: calc(100% - 80px)"
v-html="DATA.AdminComment"
></span>
</div>
</el-form>
</div>
<el-dialog
:title="$t('system:Setting:title:Blinded Setting')"
:visible.sync="visible"
width="50%"
:close-on-click-modal="false"
v-dialogDrag
:before-close="closeDialog"
top="8vh"
append-to-body
>
<div class="base-modal-body">
<el-form
ref="settingFrom"
v-loading="loading"
:model="form"
:rules="rules"
label-width="120px"
size="small"
>
<div class="form_title">
{{ $t('system:Setting:title:Blinded information') }}
</div>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:Setting:label:Blind Name')"
prop="BlindName"
>
<el-input
v-model="form.BlindName"
clearable
:maxlength="400"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('system:Setting:label:Blind NameCN')"
prop="BlindNameCN"
>
<el-input
v-model="form.BlindNameCN"
clearable
:maxlength="400"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item
:label="$t('system:Setting:label:Blind Publications')"
prop="BlindPublications"
>
<el-input
v-model="form.BlindPublications"
type="textarea"
rows="8"
size="small"
:maxlength="4000"
/>
</el-form-item>
<div class="form_title">
{{ $t('system:Setting:title:Blinded Setting') }}
</div>
<el-form-item
:label="$t('system:Setting:label:Information Confirmed?')"
>
<el-radio-group v-model="form.ReviewStatus" @change="handleChange">
<el-radio :label="1">{{
$t('system:Setting:label:Information Confirmed?:Yes')
}}</el-radio>
<el-radio :label="2">{{
$t('system:Setting:label:Information Confirmed?:No')
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('system:Setting:label:Contractor Status?')">
<el-radio-group
v-model="form.CooperateStatus"
@change="handleChange"
>
<el-radio :label="1">{{
$t('system:Setting:label:Information Confirmed?:Yes')
}}</el-radio>
<el-radio :label="2">{{
$t('system:Setting:label:Information Confirmed?:No')
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Accepting New Trials?')"
>
<el-radio-group
v-model="form.AcceptingNewTrial"
:disabled="radioDisabled"
>
<el-radio :label="true">{{
$t('system:Setting:label:Information Confirmed?:Yes')
}}</el-radio>
<el-radio :label="false">{{
$t('system:Setting:label:Information Confirmed?:No')
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('system:Setting:label:Actively Reading?')">
<el-radio-group
v-model="form.ActivelyReading"
:disabled="radioDisabled"
>
<el-radio :label="true">{{
$t('system:Setting:label:Information Confirmed?:Yes')
}}</el-radio>
<el-radio :label="false">{{
$t('system:Setting:label:Information Confirmed?:No')
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('system:Setting:label:Comment:')"
prop="AdminComment"
>
<el-input
v-model="form.AdminComment"
type="textarea"
rows="8"
:maxlength="4000"
/>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="closeDialog">
{{ $t('common:button:cancel') }}
</el-button>
<el-button
size="small"
type="primary"
@click="handleSave"
:loading="loading"
>
{{ $t('common:button:save') }}
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getAuditState, updateAuditResume } from '@/api/reviewers'
const defaultForm = () => {
return {
CooperateStatus: 2,
ResumeStatus: 2,
ReviewStatus: 2,
AcceptingNewTrial: false,
ActivelyReading: false,
IsVirtual: false,
BlindName: '',
AdminComment: '',
InHoliday: '',
BlindNameCN: '',
BlindPublications: '',
}
}
export default {
name: 'setting',
props: {
reviewerId: {
type: String,
default: '',
},
},
data() {
return {
DATA: defaultForm(),
form: defaultForm(),
loading: false,
rules: {
AdminComment: [
{
max: 4000,
message: this.$t('form:rules:maxLength:4000'),
trigger: 'blur',
},
],
BlindName: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
BlindNameCN: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
BlindPublications: [
{
max: 4000,
message: this.$t('form:rules:maxLength:4000'),
trigger: 'blur',
},
],
},
radioDisabled: false,
visible: false,
}
},
created() {
// this.getData()
this.handleChange()
},
watch: {
reviewerId() {
if (this.reviewerId) {
this.getData()
}
},
},
methods: {
openEdit() {
this.visible = true
},
handleChange() {
if (this.form.ReviewStatus === 2 || this.form.CooperateStatus === 2) {
this.form.ActivelyReading = false
this.form.AcceptingNewTrial = false
this.radioDisabled = true
} else {
this.radioDisabled = false
}
},
closeDialog() {
this.visible = false
},
async handleSave() {
try {
let validate = await this.$refs.settingFrom.validate()
if (!validate) return false
const param = {}
Object.assign(param, this.form)
param.ResumeStatus = param.ReviewStatus
this.loading = true
let res = await updateAuditResume(param)
this.loading = false
if (res.IsSuccess) {
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.closeDialog()
this.getData()
}
} catch (err) {
this.loading = false
console.log(err)
}
},
async getData() {
try {
let res = await getAuditState(this.reviewerId)
if (res.IsSuccess) {
Object.keys(this.form).forEach((key) => {
this.form[key] = res.Result[key]
})
Object.keys(this.DATA).forEach((key) => {
this.DATA[key] = res.Result[key]
})
if (res.Result.Id) {
this.form.Id = res.Result.Id
}
}
} catch (err) {
console.log(err)
}
},
},
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 10px 10px 10px 10px;
.base-modal-body {
min-height: 100px;
max-height: 650px;
overflow-y: auto;
padding: 10px;
border: 1px solid #e0e0e0;
}
}
::v-deep .el-dialog__footer {
padding: 10px;
}
.form_title {
margin: 10px 0;
display: flex;
align-items: center;
&::after {
margin-left: 20px;
display: block;
content: '';
border-top: 1px solid #eee;
flex: 1;
}
}
.setting {
min-height: 100px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-weight: bold;
}
.message {
margin: auto;
min-height: 100px;
background-color: #eee;
padding: 10px;
line-height: 30px;
border-radius: 5px;
}
::v-deep .el-form-item__label {
color: #000;
}
}
</style>