irc_web/.svn/pristine/a1/a10a4474149ad133cd73826ebad...

290 lines
8.7 KiB
Plaintext

<template>
<div v-loading="loading" class="check-container">
<div class="check-content">
<el-form ref="checkForm" :model="checkForm" label-width="200px" size="small" :rules="rules">
<el-card shadow="never">
<el-form-item label="Information Confirmed?">
<el-radio-group v-model="checkForm.ReviewStatus" @change="handleChange">
<el-radio :label="1">Yes</el-radio>
<el-radio :label="2">No</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Contractor Status?">
<el-radio-group v-model="checkForm.CooperateStatus" @change="handleChange">
<el-radio :label="1">Yes</el-radio>
<el-radio :label="2">No</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Accepting New Trials?">
<el-radio-group v-model="checkForm.AcceptingNewTrial" :disabled="radioDisabled">
<el-radio :label="true">Yes</el-radio>
<el-radio :label="false">No</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Actively Reading?">
<el-radio-group v-model="checkForm.ActivelyReading" :disabled="radioDisabled">
<el-radio :label="true">Yes</el-radio>
<el-radio :label="false">No</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="On Vacation: ">
<span style="font-size:12px;margin-right:20px;">{{ checkForm.InHoliday }}</span>
<el-button type="text" @click="handleView">Planned Vacation</el-button>
</el-form-item>
<el-form-item label="Comment: " prop="AdminComment">
<el-input
v-model="checkForm.AdminComment"
type="textarea"
style="width:60%;"
rows="8"
/>
</el-form-item>
<el-form-item style="margin-top:20px">
<el-button type="primary" :disabled="isDisabled" @click="handleSave">Save</el-button>
</el-form-item>
</el-card>
</el-form>
</div>
<el-dialog
title="Vacation"
:visible.sync="dialogVisible"
width="50%"
:close-on-click-modal="false"
@close="closeDialog"
>
<div>
<el-date-picker
v-model="daterange"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
type="daterange"
range-separator="to"
start-placeholder="Beginning Date"
end-placeholder="End Date"
size="small"
/>
<el-button style="margin-left:10px;" type="primary" size="small" @click="handleAddHoliday">Add</el-button>
</div>
<el-table v-loading="loading2" :data="gridData" size="small">
<el-table-column type="index" />
<el-table-column
property="StartDate"
label="Beginning Date"
min-width="120"
:formatter="beginTimeFormatter"
/>
<el-table-column
property="EndDate"
label="End Date"
min-width="120"
:formatter="endTimeFormatter"
/>
<el-table-column label="Action" fixed="right" min-width="200">
<template slot-scope="scope">
<el-button type="text" @click="handleDelete(scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total,sizes,prev, pager, next"
:total="totalItems"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
:current-page.sync="pageIndex"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</el-dialog>
</div>
</template>
<script>
import { getAuditState, updateAuditResume, getVacationList, addOrUpdateVacation, deleteVacation } from '@/api/reviewers'
import { fmtDate } from '@/utils/formatter'
export default {
name: 'Setting',
props: {
id: {
type: String,
default() {
return ''
}
}
},
data() {
return {
loading: false,
checkForm: {
Id: '',
CooperateStatus: 2,
ResumeStatus: 2,
ReviewStatus: 2,
AcceptingNewTrial: false,
ActivelyReading: false,
AdminComment: '',
InHoliday: ''
},
rules: {
AdminComment: [{ max: 500, message: 'The maximum length is 500' }]
},
doctorId: this.$route.query.Id,
isDisabled: false,
radioDisabled: false,
dialogVisible: false,
gridData: [],
daterange: '',
pageIndex: 1,
pageSize: 5,
totalItems: 0,
loading2: false
}
},
mounted() {
this.initForm()
},
methods: {
initForm() {
getAuditState(this.doctorId).then(res => {
if (res.Result) {
this.checkForm = res.Result
this.checkForm.InHoliday = res.Result.InHoliday ? 'Yes' : 'No'
}
})
},
handleSave() {
this.isDisabled = true
const param = {}
Object.assign(param, this.checkForm)
param.InHoliday = this.checkForm.InHoliday === 'Yes'
param.ResumeStatus = param.ReviewStatus
updateAuditResume(param)
.then(res => {
if (res.IsSuccess) {
if (res.Result) { this.checkForm.Id = res.Result }
this.isDisabled = false
this.$message.success('Saved successfully')
}
})
.catch(() => {
this.isDisabled = false
})
},
handleView() {
this.dialogVisible = true
this.initHolidayList()
},
initHolidayList() {
this.loading2 = true
getVacationList(this.doctorId, this.pageIndex, this.pageSize)
.then(res => {
if (res.IsSuccess) {
this.gridData = res.Result.CurrentPageData
this.totalItems = res.Result.TotalCount
}
this.loading2 = false
})
.catch(() => {
this.loading2 = false
})
},
handleAddHoliday() {
if (this.daterange) {
const param = {
DoctorId: this.doctorId,
StartDate: this.daterange[0],
EndDate: this.daterange[1]
}
this.loading2 = true
addOrUpdateVacation(param)
.then(res => {
if (res.IsSuccess) {
param.Id = res.Result
this.gridData.push(param)
this.totalItems = this.totalItems + 1
this.daterange = ''
} else {
this.$message.error(res.ErrorMessage)
}
this.loading2 = false
})
.catch(() => {
this.daterange = ''
this.loading2 = false
})
}
},
handleDelete(row) {
this.$confirm('Sure to delete?', {
type: 'warning',
distinguishCancelAndClose: true,
confirmButtonText: 'Ok',
cancelButtonText: 'Cancel'
})
.then(() => {
this.loading2 = true
deleteVacation(row.Id)
.then(res => {
if (res.IsSuccess) {
var index = this.gridData.findIndex((item) => item.Id === row.Id)
if (index !== -1) {
this.gridData.splice(index, 1)
this.totalItems = this.totalItems - 1
}
this.$message.success('Deleted successfully!')
}
this.loading2 = false
})
.catch(() => {
this.loading2 = false
})
})
.catch(action => {})
},
closeDialog() {
this.initForm()
},
handleChange() {
if (this.checkForm.ReviewStatus === 2 || this.checkForm.cooperateStatus === 2) {
this.checkForm.ActivelyReading = false
this.checkForm.AcceptingNewTrial = false
this.radioDisabled = true
} else {
this.radioDisabled = false
}
},
beginTimeFormatter(row) {
if (row.StartDate) {
return fmtDate(row.StartDate)
}
},
endTimeFormatter(row) {
if (row.EndDate) {
return fmtDate(row.EndDate)
}
},
statusFormatter(row) {
if (row.Status) {
return 'on vacation'
} else {
return ''
}
},
handleCurrentChange(val) {
this.pageIndex = val
this.initHolidayList()
},
handleSizeChange(val) {
this.pageSize = val
this.initHolidayList()
}
}
}
</script>