290 lines
		
	
	
		
			8.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			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>
 |