cmc-oa/oa-ui/src/views/flowable/form/xmTable.vue

<template>
  <div style="padding:10px">
    <h2 style="text-align: center;">项目管理部考核表</h2>
    <table class="table" ref="tableDatas">
      <tr>
        <td class="table-title">姓名</td>
        <td style="text-align:left;padding-left:10px;">{{ tableForm.nickName }}</td>
        <td class="table-title" style="width:50px">考核时间</td>
        <td>
          <el-date-picker v-model="tableForm.assessTime" type="month" placeholder="选择日期">
          </el-date-picker>
        </td>
        <td colspan="3" class="table-title">部门负责人考核意见</td>
        <td colspan="3" class="table-title" style="width:300px;">分管领导考核意见</td>
      </tr>
      <tr>
        <td class="table-title">所在部门</td>
        <td colspan="3" style="text-align:left;padding-left:10px;">{{ tableForm.deptName }}</td>
        <td colspan="3">
          <el-radio-group v-model="tableForm.deptAssessment" :disabled="!isDeptLeader">
            <el-radio v-for="dict in dict.type.cmc_accessment" :key="dict.value" :label="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </td>
        <td colspan="3">
          <el-radio-group v-model="tableForm.managerAssessment" :disabled="!isManager">
            <el-radio v-for="dict in dict.type.cmc_accessment" :key="dict.value" :label="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr>
        <td class="table-title">部门职务</td>
        <td colspan="3" style="text-align:left;padding-left:10px;">{{ tableForm.postGroup }}</td>
        <td colspan="3" rowspan="3">
          <el-input type="textarea" :rows="4" placeholder="请输入考核意见" v-model="tableForm.deptAdvice"
            :disabled="!isDeptLeader">
          </el-input>
          <el-row justify="center" type="flex">
            <el-col :span="12">考核人：<el-input v-model="tableForm.deptAssesser" style="width:150px;" placeholder="请输入考核人"
                :disabled="!isDeptLeader"></el-input> </el-col>
            <el-col :span="12">日期：<el-date-picker type="date" placeholder="请选择考核日期" v-model="tableForm.deptTime"
                style="width:150px;" :disabled="!isDeptLeader"></el-date-picker> </el-col>
          </el-row>
        </td>
        <td colspan="3" rowspan="3">
          <el-input type="textarea" :rows="4" placeholder="请输入考核意见" v-model="tableForm.managerAdvice"
            :disabled="!isManager">
          </el-input>
          <el-row justify="center">
            <el-col :span="12">考核人：<el-input v-model="tableForm.managerAssesser" style="width:150px;" placeholder="请输入考核人"
                :disabled="!isManager"></el-input></el-col>
            <el-col :span="12">日期：<el-date-picker type="date" placeholder="请选择考核日期" v-model="tableForm.managerTime"
                style="width:150px;" :disabled="!isManager"></el-date-picker></el-col>
          </el-row>
        </td>
      </tr>
      <tr>
        <td class="table-title">技术职称</td>
        <td colspan="3" style="text-align:left;padding-left:10px;">{{ tableForm.titles }}</td>
      </tr>
      <tr>
        <td class="table-title">入职年月</td>
        <td style="text-align:left;padding-left:10px;">{{ tableForm.entryDate != null ?
          tableForm.entryDate.substring(0, 10) : tableForm.entryDate }}</td>
        <td class="table-title">年龄</td>
        <td style="text-align:left;padding-left:10px;">{{ tableForm.age }}</td>
      </tr>
      <tr>
        <td rowspan="2" class="table-title">考核内容</td>
        <td colspan="5" class="table-fillin">被考核人填写</td>
        <td colspan="3" class="table-fzr" style="width:300px;">负责人考核</td>
      </tr>
      <tr>
        <td class="table-fillin">工作内容</td>
        <td class="table-fillin">单位</td>
        <td class="table-fillin">工作量</td>
        <td class="table-fillin">熟练程度</td>
        <td class="table-fillin">备注</td>
        <td class="table-fzr">工作量</td>
        <td class="table-fzr">岗位综合表现</td>
        <td class="table-fzr">考核建议</td>
      </tr>
      <tr>
        <td rowspan="6">参与生产</td>
        <td>项目负责</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0101 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0101"></el-input>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.familiar01" :disabled="!isStaff">
            <div><el-radio :label="0">生疏</el-radio></div>
            <div><el-radio :label="2">熟练</el-radio></div>
            <div><el-radio :label="3">精通</el-radio></div>
          </el-radio-group>
        </td>

        <td rowspan="6">
          <div>{{ tableForm.remark01 }}</div>
          <el-input v-if="isStaff" v-model="tableForm.remark01" type="textarea" :rows="4"></el-input>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.workload01" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_workload" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'workload01', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.assessment01" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_accessment" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'assessment01', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <el-input type="textarea" :rows="4" v-model="tableForm.advice01" :disabled="!isPiLeader">
          </el-input>
        </td>
      </tr>
      <tr>
        <td>外业负责</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0102 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0102"></el-input>
        </td>
      </tr>
      <tr>
        <td>内业负责</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0103 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0103"></el-input>
        </td>
      </tr>
      <tr>
        <td>参与外业</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0104 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0104"></el-input>
        </td>
      </tr>
      <tr>
        <td>参与内业</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0105 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0105"></el-input>
        </td>
      </tr>
      <tr>
        <td>资料整编</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0106 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0106">
          </el-input>
        </td>
      </tr>

      <!--  -->
      <tr>
        <td rowspan="6">项目管理</td>
        <td>项目备案</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0201 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0201"></el-input>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.familiar02" :disabled="!isStaff">
            <div><el-radio :label="0">生疏</el-radio></div>
            <div><el-radio :label="2">熟练</el-radio></div>
            <div><el-radio :label="3">精通</el-radio></div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <div>{{ tableForm.remark02 }}</div>
          <el-input v-if="isStaff" v-model="tableForm.remark02" type="textarea" :rows="4"></el-input>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.workload02" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_workload" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'workload02', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.assessment02" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_accessment" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'assessment02', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <el-input type="textarea" :rows="4" v-model="tableForm.advice02" :disabled="!isPiLeader">
          </el-input>
        </td>
      </tr>
      <tr>
        <td>项目预算</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0202 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0202"></el-input>
        </td>
      </tr>
      <tr>
        <td>任务分发</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0203 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0203"></el-input>
        </td>
      </tr>
      <tr>
        <td>项目交底</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0204 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0204"></el-input>
        </td>
      </tr>
      <tr>
        <td>项目内部结算</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0205 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0205"></el-input>
        </td>
      </tr>
      <tr>
        <td>顾客回访</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0206 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0206"></el-input>
        </td>
      </tr>



      <!--  -->
      <tr>
        <td rowspan="3">委外管理</td>
        <td>委外合同办理</td>
        <td>项</td>
        <td class="personInput">
          <span v-if="!isStaff">{{ tableForm.f0301 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0301"></el-input>
        </td>
        <td rowspan="3">
          <el-radio-group v-model="tableForm.familiar03" :disabled="!isStaff">
            <div><el-radio :label="0">生疏</el-radio></div>
            <div><el-radio :label="2">熟练</el-radio></div>
            <div><el-radio :label="3">精通</el-radio></div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <div>{{ tableForm.remark03 }}</div>
          <el-input v-if="isStaff" v-model="tableForm.remark03" type="textarea" :rows="4"></el-input>
        </td>
        <td rowspan="3">
          <el-radio-group v-model="tableForm.workload03" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_workload" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'workload03', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <el-radio-group v-model="tableForm.assessment03" :disabled="!isPiLeader">
            <div v-for="dict in dict.type.cmc_accessment" style="text-align:left">
              <el-radio :key="dict.value" :label="dict.value"
                @click.native.prevent="cancelSelect(dict.value, 'assessment03', isStaff)">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <el-input type="textarea" :rows="4" v-model="tableForm.advice03" :disabled="!isPiLeader">
          </el-input>
        </td>
      </tr>
      <tr>
        <td>委外支付办理</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0302 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0302"></el-input>
        </td>
      </tr>
      <tr>
        <td>合格分包商管理</td>
        <td>项</td>
        <td>
          <span v-if="!isStaff">{{ tableForm.f0303 }}</span>
          <el-input v-if="isStaff" v-model="tableForm.f0303"></el-input>
        </td>
      </tr>
      <!--  -->
      <tr style="height:90px;">
        <td>其他工作</td>
        <td colspan="9">
          <span v-if="!isStaff">{{ tableForm.otherWork }}</span>
          <el-input v-if="isStaff" v-model="tableForm.otherWork" type="textarea" :rows="2"></el-input>
        </td>
      </tr>
      <tr style="height:90px;">
        <td>年度自述</td>
        <td colspan="9">
          <span v-if="!isStaff">{{ tableForm.selfAssess }}</span>
          <el-input v-if="isStaff" v-model="tableForm.selfAssess" type="textarea" :rows="2"></el-input>
        </td>
      </tr>
    </table>
    <el-row justify="center" type="flex" style="margin-top:20px;">
      <el-button type="primary" size="mini" @click="submit">{{ taskName == '员工填报' ? '提交' : '审核通过'  }}</el-button>
      <el-button v-if="taskName == '员工填报'" type="warning" size="mini" @click="$emit('close')">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { XMContent } from '@/assets/datas/XMContent'
import { getDicts as getDicts } from '@/api/system/dict/data'
import { complete, getNextFlowNode } from "@/api/flowable/todo";
import { getAssess, modifyAssess, submitAssess, listAssess } from '@/api/oa/assess/assess';
import { getUsersDeptLeader, getUsersManageLeader } from '@/api/system/post.js'
export default {
  dicts: ['cmc_role', 'cmc_skill', 'cmc_accessment', 'cmc_workload'],
  props: {
    taskName: {
      type: String
    },
    taskForm: {
      type: Object
    }
  },
  watch: {
    tableForm: function (newval, oldval) {
      this.formatForm();
    }
  },
  data() {
    return {
      tableForm: {},      
      form: {},
      radio1: "",
      radio2: "",
      textarea1: "",
      textarea2: "",
      isDeptLeader: false,
      isPiLeader: false,
      isManager: false,
      isStaff: false,
    }
  },
  created() {
    this.initForm();
  },
  mounted() {
    this.formatForm();
  },
  methods: {
    initForm() {
      getAssess(this.taskForm.formId).then(res => {
        let data = res.data;
        for (let d in data) {
          if (d.includes('role')) {
            if (data[d] != "" && data[d] != undefined && data[d] != null)
              data[d] = data[d].split(',')
          }
          if (d.includes('familiar')) {
            if (data[d] != "" && data[d] != undefined && data[d] != null)
              data[d] = parseInt(data[d])
          }
        }
        this.tableForm = data;
      })
    },
    formatForm() {
      if (this.taskName == '项目负责人审核') {
        this.isPiLeader = true;
        this.isDeptLeader = false;
        this.isManager = false;
        this.isStaff = false;
      } else if (this.taskName == '部门审核') {
        this.isPiLeader = false;
        this.isDeptLeader = true;
        this.isManager = false;
        this.isStaff = false;
      } else if (this.taskName == '分管审核') {
        this.isPiLeader = false;
        this.isDeptLeader = false;
        this.isManager = true;
        this.isStaff = false;
      } else if (this.taskName == '员工填报') {
        this.isPiLeader = false;
        this.isDeptLeader = false;
        this.isManager = false;
        this.isStaff = true;
      }
    },
    submit() {
      let flag = this.formValidate(this.tableForm)
      if (flag) {
        // this.$emit('submit', this.tableForm);
        let formData = new FormData();
        this.tableForm.formId = this.taskForm.formId;
        let form = JSON.stringify(this.tableForm);
        formData.append("form", form);
        listAssess({ assessId: this.tableForm.formId }).then(result => {
          let list = result;
          if (list.total != 0) {
            modifyAssess(formData);
          } else {
            submitAssess(formData);
          }
        })
        const params = { taskId: this.taskForm.taskId }
        getNextFlowNode(params).then(res => {
          if (this.taskName == '员工填报') {
            getUsersDeptLeader({ userId: this.$store.getters.userId }).then(res => {
              if (res.data)
                this.$set(this.taskForm.variables, "approval", res.data.userId);
              complete(this.taskForm).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$emit("goBack");
              });
            })
          } else if (this.taskName == '部门审核') {
            getUsersManageLeader({ userId: this.$store.getters.userId }).then(res => {
              let userId = res.data.userId;
              this.$set(this.taskForm.variables, "approval", userId);
              complete(this.taskForm).then(response => {
                this.$modal.msgSuccess(response.msg);
                this.$emit("goBack");
              });
            })
          } else if (this.taskName == '分管审核') {
            complete(this.taskForm).then(response => {
              this.$modal.msgSuccess(response.msg);
              this.$emit("goBack");
            });
          }
        })
      }
    },
    formValidate(form) {
      let flag = [];
      for (let f in form) {

        if (f.startsWith('familiar') && form[f] != null) {
          flag.push(f.slice(-2));
        } else if (f.length == 5 && f.startsWith('f')) {
          if (form[f] != "" && form[f] != undefined && form[f] != null)
            flag.push(f.substring(1, 3));
        }
      }
      let isF = false;
      if (flag.length == 0) {
        this.$modal.msgError("表格未填写，请填写表格");
      } else {
        isF = true
      }
      return isF
    },
    cancelSelect(value, name, disabled) {
      if (disabled) {
        return
      }
      if (this.isStaff) {
        if (this.tableForm[name] == value) {
          this.tableForm[name] = null
        } else {
          if (this.tableForm[name] !== undefined)
            this.tableForm[name] = value
          else {
            this.$set(this.tableForm, name, value)
          }
        }
      }
      if (this.isPiLeader) {
        if (this.tableForm[name] == value) {
          this.tableForm[name] = null
        } else {
          if (this.tableForm[name] !== undefined)
            this.tableForm[name] = value
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  border-collapse: collapse;
  width: 100%;
}

.table-title {
  background-color: #90d6f1;
  font-weight: bold;
}

.table-fillin {
  background-color: #bfee93;
  font-weight: bold;
}

.table-fzr {
  background-color: #eead93;
  font-weight: bold;
}


.table,
th,
td {
  border: 1px solid black;
  text-align: center;
}

td {
  height: 50px;
  // width: 100px;
}

.head {
  background-color: #ccc;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

::v-deep .el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: #000;
}

::v-deep .el-checkbox__label {
  font-size: 12px;
}

::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}

::v-deep .el-radio__input.is-disabled+span.el-radio__label {
  color: #000;
}


::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 5px;
  border: 2px solid #409eff;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>