drp-ui/src/views/business/ehr/pm/adjustMark/detail111.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">绩效考核表</span>
        <div style="float: right; padding: 3px 0" type="text">
          <el-button size="mini" plain @click="btnBack">返回</el-button>
          <el-button size="mini" plain @click="btnSubmit" v-if="this.$store.state.user.name == form.staff && (form.status == '0' || form.status == '3')">提交</el-button>
          <el-button size="mini" plain @click="btnCopyItem"  v-if="this.$store.state.user.name == form.staff && form.status == '0'">复制指标</el-button>
          <!-- <el-button size="mini" plain @click="btnLog">指标修改记录</el-button> -->
          <el-button size="mini" plain @click="btnApproveLog">指标审批记录</el-button>
          <el-button size="mini" plain @click="btnPreviou" v-if="ids">上一个</el-button>
          <el-button size="mini" plain @click="btnNext" v-if="ids">下一个</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-descriptions :column="6 ">
          <el-descriptions-item label="员工编号">{{form.staff}}</el-descriptions-item>
          <el-descriptions-item label="员工姓名">{{form.staffName}}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{form.dateJoin}}</el-descriptions-item>
          <el-descriptions-item label="转正日期">{{form.probationComplete}}</el-descriptions-item>
          <el-descriptions-item label="一级部门">{{form.oneDeptName}}</el-descriptions-item>
          <el-descriptions-item label="二级部门">{{form.twoDeptName}}</el-descriptions-item>
          <el-descriptions-item label="三级部门">{{form.threeDeptName}}</el-descriptions-item>
          <el-descriptions-item label="职位">{{form.jobName}}</el-descriptions-item>
          <el-descriptions-item label="评估周期">{{form.name}}</el-descriptions-item>
          <el-descriptions-item label="评估人编号">{{form.startTime}}</el-descriptions-item>
          <el-descriptions-item label="评估人姓名">{{form.deadlineTime}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-if="form.status > 3">
          <el-descriptions-item label="个人总结">{{form.summary}}</el-descriptions-item>
        </el-descriptions>
        <div v-if="this.$store.state.user.name == form.staff && form.status == '3'">
          个人总结<el-input type="textarea" v-model="form.summary"></el-input>
        </div>
        <el-descriptions v-if="form.status > 4">
          <el-descriptions-item label="评语">{{form.comment}}</el-descriptions-item>
        </el-descriptions>
        <div style="float:right">
          <el-button type="primary" size="mini" @click="btnAddRow" v-if="this.$store.state.user.name == form.staff && form.status == '0'">增加指标</el-button>
          <el-button size="mini" @click="btnUnfold">{{isUnfold == true ? "收起" : "展开"}}</el-button>
        </div>
        <el-table size="mini"  :data="form.performanceItem" show-summary :summary-method="getSummaries">
          <el-table-column width="100" :show-overflow-tooltip="!isUnfold" label="评估方面" align="center" prop="aspect">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ehr_pm_aspect" :value="scope.row.aspect"/>
            </template>
          </el-table-column>
          <el-table-column width="100" :show-overflow-tooltip="!isUnfold" label="评估指标" align="center" prop="target" />
          <el-table-column :show-overflow-tooltip="!isUnfold" label="评估说明" align="center" prop="instructions">
            <template slot-scope="scope">
              <div style="white-space: pre-wrap;text-align: left">{{scope.row.instructions}}</div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="角色" align="center" prop="role">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ehr_pm_role" :value="scope.row.role"/>
            </template>
          </el-table-column>
          <el-table-column width="80" label="权重" align="center" prop="weight"/>
          <el-table-column :show-overflow-tooltip="!isUnfold" label="绩效标准" align="center" prop="standard">
            <template slot-scope="scope">
              <div style="white-space: pre-wrap;text-align: left">{{scope.row.standard}}</div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="数据来源" align="center" prop="source" />

          <el-table-column width="80" label="自评分" align="center" prop="selfScoring" v-if="form.status > 3"/>
          <el-table-column :show-overflow-tooltip="!isUnfold" label="自评语" align="center" prop="selfComment" v-if="form.status > 3"/>
          <el-table-column width="80" label="自评分" align="center" prop="selfScoring" v-if="this.$store.state.user.name == form.staff && form.status == '3'">
            <template slot-scope="scope">
              <el-input 
                size="mini" 
                v-model.number="scope.row.selfScoring"
                onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>100){value=100}"
                :maxlength="3"
                :minlength="1"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="!isUnfold" label="自评语" align="center" prop="selfComment" v-if="this.$store.state.user.name == form.staff && form.status == '3'">
            <template slot-scope="scope">
              <el-input size="mini" type="textarea" :rows="3" v-model="scope.row.selfComment"></el-input>
            </template>
          </el-table-column>

          <el-table-column width="80" label="上级评分" align="center" prop="leaderScoring" v-if="form.status > 4"/>
          <el-table-column :show-overflow-tooltip="!isUnfold" label="上级评语" align="center" prop="leaderComment" v-if="form.status > 4"/>
          <el-table-column width="80" label="加权得分" align="center" prop="weightedScore" v-if="form.status > 4"/>
        
          <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" v-if="this.$store.state.user.name == form.staff && form.status == '0'">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="btnEdit(scope.row)">修改</el-button>
              <el-button size="mini" type="text" @click="btnDelete(scope.row)">删行</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <el-dialog title="指标明细" :visible.sync="rowDataOpen" width="1000px" :close-on-click-modal="false" :show-close="false">
      <el-form size="mini" label-position="right" ref="rowDataForm" :model="rowData" :rules="rowRules" label-width="80px">
        <el-form-item label="评估方面" prop="aspect">
          <el-select v-model="rowData.aspect" >
            <el-option
              v-for="dict in dict.type.ehr_pm_aspect"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评估指标" prop="target">
          <el-input v-model="rowData.target"></el-input>
        </el-form-item>
        <el-form-item label="评估说明" prop="instructions">
          <el-input type="textarea" v-model="rowData.instructions" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="rowData.role" >
            <el-option
              v-for="dict in dict.type.ehr_pm_role"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加/减分项" prop="asItem">
          <el-checkbox v-model="rowData.asItem"></el-checkbox>
        </el-form-item>
        <el-form-item label="权重(%)" prop="weight" v-if="!rowData.asItem">
          <el-input 
            v-model.number="rowData.weight"
            onkeyup="value=value.replace(/[^\d||/.]/g,'')"
            oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>100){value=100}"
            :maxlength="3"
            :minlength="1"
          >
            <i slot="suffix" style="color: #000;font-style:normal;margin-right: 10px;">%</i>
          </el-input>
        </el-form-item>
        <el-form-item label="绩效标准" prop="standard">
          <el-input type="textarea" v-model="rowData.standard" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="数据来源" prop="source">
          <el-input v-model="rowData.source"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="btnRowClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="btnRowConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getPerformance,fillinFinish,selfestimate} from "@/api/business/ehr/pm/performance";
import { getPerformanceItem,addPerformanceItem,updatePerformanceItem,batchUpdatePerformanceItem,delPerformanceItem} from "@/api/business/ehr/pm/performanceitem";

export default {
  name: 'detail',
  dicts: ['ehr_pm_aspect','ehr_pm_role'],
  props: ['pageStu','rowId',"ids"],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      //id
      id:null,
      //表单
      form:{},
      //遮罩
      loading: false,
      //单行明细
      rowData:{},
      //是否显示行明细弹出层
      rowDataOpen:false,
      //当行明细校验规则
      rowRules:{
        aspect: [
          { required: true, message: "评估方面不能为空", trigger: "blur" },
        ],
        target: [
          { required: true, message: "评估指标不能为空", trigger: "blur" },
        ],
        instructions: [
          { required: true, message: "评估说明不能为空", trigger: "blur" },
        ],
        role: [
          { required: true, message: "角色不能为空", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "权重不能为空", trigger: "blur" },
        ],
        standard: [
          { required: true, message: "绩效标准不能为空", trigger: "blur" },
        ],
        source: [
          { required: true, message: "数据来源不能为空", trigger: "blur" },
        ],
      },
      //是否展开
      isUnfold:false,
      //明细权重合计值
      weightSum: 0,
    }
  },
  async created() {
    this.id = this.rowId;
    this.fetchPerformance(this.id);
    if(this.pageStu == 'add'){
    }
    if(this.pageStu == 'edit' || this.pageStu == 'see') {
    }
  },
  watch: {
  },
  methods: {
    //返回
    btnBack(){
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    //查询详情
    async fetchPerformance(id){
      this.loading = true;
      await getPerformance(id).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.id = res.data.id;
         }
         this.loading = false;
      })
    },
    //增行
    btnAddRow(){
      this.rowData = {assessId: this.form.id};
      this.rowDataOpen = true;
    },
    //修改
    async btnEdit(row){
      await getPerformanceItem(row.id).then(res => {
        if (res.code === 200) {
          this.rowData = res.data
          this.rowDataOpen = true;
         }
      })
    },
    //删行
    btnDelete(row){
      this.$modal.confirm('是否确认删除【"' + row.aspect + '"】数据项？').then(function() {
        return delPerformanceItem(row.id);
      }).then(() => {
        this.fetchPerformance(this.id);
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //单行明细取消
    btnRowClose(){
      this.rowDataOpen = false;
    },
    //单行明细确认
    btnRowConfirm(){
      this.$refs["rowDataForm"].validate(valid => {
        if (valid) {
          if (this.rowData.id != undefined) {
            updatePerformanceItem(this.rowData).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.rowDataOpen = false;
              this.fetchPerformance(this.id);
            });
          } else {
            addPerformanceItem(this.rowData).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.rowDataOpen = false;
              this.fetchPerformance(this.id);
            });
          }
        }
      });
    },
    //展开/收起
    btnUnfold(){
      this.isUnfold = !this.isUnfold;
    },
    //上一个
    btnPreviou(){
      let i = this.ids.indexOf(this.id) - 1;
      if(i > -1){
        let id = this.ids[i];
        this.fetchPerformance(id);
      }else{
        this.$modal.msgSuccess("已经是当前页第一条了！");
      }
    },
    //下一个
    btnNext(){
      let i = this.ids.indexOf(this.id) + 1;
      if(i < this.ids.length){
        let id = this.ids[i];
        this.fetchPerformance(id);
      }else{
        this.$modal.msgSuccess("已经是当前页最后一条了！");
      }
      
    },
    //合计
    getSummaries(param){
      const { columns, data } = param;
      let val = data.reduce((sum, e) => sum + Number(e.weight || 0), 0);
      this.weightSum = val;
      return ['合计','','','',val];
    },
    //提交
    btnSubmit(){
      if(this.form.status == '0'){
        if(this.weightSum != 100){
          this.$modal.msgWarning("权重不为100%无法提交！");
          return;
        }
        this.$confirm('确认提交吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          fillinFinish(this.form).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.fetchPerformance(this.id);
          });
        }).catch(() => {      
        });
      }
      if(this.form.status == '3'){
        let v = false;
        this.form.performanceItem.forEach((item) => {
          if(!item.selfScoring || !item.selfComment){
            v = true;
          }
        });
        if(v){
          this.$modal.msgWarning("请自评后再提交！");
          return;
        }
        if(!this.form.summary){
          this.$modal.msgWarning("请填写个人总结再提交！");
          return;
        }
        this.$confirm('确认提交吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          selfestimate(this.form).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.fetchPerformance(this.id);
          });
        }).catch(() => {      
        });
      }
    },
    //复制指标
    btnCopyItem(){

    },
    //指标修改记录
    btnLog(){

    },
    //指标审批记录
    btnApproveLog(){
      
    }
  }
}
</script>

<style lang="scss" scoped>

.btn_group {
  z-index: 500;
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}
</style>