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

<template>
  <div style="padding:10px">
    <h2 style="text-align: center;">经营发展部考核表</h2>
    <table class="table" ref="tableDatas">
      <tr>
        <td class="table-title">项目编号</td>
        <td colspan="1" style="text-align:left;padding-left:10px;">
          {{ tableForm.projectNumber }}
        </td>
        <td class="table-title">项目名称</td>
        <td colspan="9" style="text-align:left;padding-left:10px;">
          {{ tableForm.projectName }}
        </td>
      </tr>
      <tr>
        <td class="table-title">姓名</td>
        <td style="text-align:left;padding-left:10px;">{{ tableForm.nickName }}</td>
        <td class="table-title">考核年度</td>
        <td> {{ tableForm.assessTime }}</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 }}</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-title">被考核人填写</td>
        <td colspan="3" class="table-title">项目负责人考核</td>
      </tr>
      <tr>
        <td class="table-title">等级、比例尺等</td>
        <td class="table-title">单位</td>
        <td class="table-title">工作量</td>
        <td class="table-title">熟练程度</td>
        <td class="table-title">备注</td>
        <td class="table-title">工作量</td>
        <td class="table-title">岗位综合表现</td>
        <td class="table-title">考核建议</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" @click.native.prevent="cancelSelect(0, 'familiar01',!isStaff)">生疏</el-radio></div>
            <div><el-radio :label="2" @click.native.prevent="cancelSelect(2, 'familiar01',!isStaff)">熟练</el-radio></div>
            <div><el-radio :label="3" @click.native.prevent="cancelSelect(3, 'familiar01',!isStaff)">精通</el-radio></div>
          </el-radio-group>
        </td>
        
        <td rowspan="6">
          <div v-if="!isStaff">{{ 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')">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="6">
          <el-radio-group v-model="tableForm.accessment01" :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, 'accessment01')">
                {{ 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="3">商务标书</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="3">
          <el-radio-group v-model="tableForm.familiar02" :disabled="!isStaff">
            <div><el-radio :label="0" @click.native.prevent="cancelSelect(0, 'familiar02',!isStaff)">生疏</el-radio></div>
            <div><el-radio :label="2" @click.native.prevent="cancelSelect(2, 'familiar02',!isStaff)">熟练</el-radio></div>
            <div><el-radio :label="3" @click.native.prevent="cancelSelect(3, 'familiar02',!isStaff)">精通</el-radio></div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <div v-if="!isStaff">{{ tableForm.remark02 }}</div>
          <el-input v-if="isStaff" v-model="tableForm.remark02"  type="textarea" :rows="4"></el-input>
        </td>
        <td rowspan="3">
          <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')">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <el-radio-group v-model="tableForm.accessment02" :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, 'accessment02')">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <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 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" @click.native.prevent="cancelSelect(0, 'familiar03',!isStaff)">生疏</el-radio></div>
            <div><el-radio :label="2" @click.native.prevent="cancelSelect(2, 'familiar03',!isStaff)">熟练</el-radio></div>
            <div><el-radio :label="3" @click.native.prevent="cancelSelect(3, 'familiar03',!isStaff)">精通</el-radio></div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <div v-if="!isStaff">{{ 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')">
                {{ dict.label }}
              </el-radio>
            </div>
          </el-radio-group>
        </td>
        <td rowspan="3">
          <el-radio-group v-model="tableForm.accessment03" :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, 'accessment03')">
                {{ 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;"
      v-if="tableForm.taskName == undefined || tableForm.taskName == '员工填报'">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { JYContent } from '@/assets/datas/JYContent'
import { getDicts as getDicts } from '@/api/system/dict/data'
export default {
  dicts: ['cmc_role', 'cmc_skill', 'cmc_accessment','cmc_workload'],
  props: {
    tableForm: {
      type: Object,
      required: true
    },
  },
  watch: {
    tableForm: function (newval, oldval) {
      this.formatForm();
    }
  },
  data() {
    return {
      form: {},
      radio1: "",
      radio2: "",
      textarea1: "",
      textarea2: "",
      isDeptLeader: false,
      isPiLeader: false,
      isManager: false,
      isStaff: false,
    }
  },
  created() {
    this.initForm();
  },
  mounted() {
    this.formatForm();
  },
  methods: {
    initForm() {

    },
    formatForm() {
      if (this.tableForm.taskName == '负责人审核') {
        this.isPiLeader = true;
        this.isDeptLeader = false;
        this.isManager = false;
        this.isStaff = false;
      } else if (this.tableForm.taskName == '部门审核') {
        this.isPiLeader = false;
        this.isDeptLeader = true;
        this.isManager = false;
        this.isStaff = false;
      } else if (this.tableForm.taskName == '分管领导审核') {
        this.isPiLeader = false;
        this.isDeptLeader = false;
        this.isManager = true;
        this.isStaff = false;
      } else if (this.tableForm.taskName == '员工填报') {
        this.isPiLeader = false;
        this.isDeptLeader = false;
        this.isManager = false;
        this.isStaff = true;
      }
    },
    submit() {
      this.formValidate(this.tableForm)
      this.$emit('submit', this.tableForm);
    },
    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("表格未填写，请填写表格");
        return
      }
    },
    cancelSelect(value, name, disabled) {
      
      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 (disabled) {
          return
        }
        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: #dad4d4;
}

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

td {
  height: 24px;
  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>