dd_jx_pc/src/views/set/addIndexSet.vue

<template>
  <div class="box boxMinHeight">
    <PageHeadTwo :title="title"></PageHeadTwo>
    <div class="main">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
		  <el-form-item label="指标类型" prop="type">
			<el-radio-group v-model="ruleForm.type">
			  <el-radio :label="1">量化指标</el-radio>
			  <el-radio :label="2">非量化指标</el-radio>
			  <el-radio :label="3">额外加分项</el-radio>
			  <el-radio :label="4">额外扣分项</el-radio>
			</el-radio-group>
		  </el-form-item>
        <el-form-item label="指标分类" prop="cate_id">
          <el-select filterable v-model="ruleForm.cate_id" clearable style="width: 100%;">
            <el-option v-for="item in indexTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标名称" prop="name">
          <el-input placeholder="请输入指标名称" v-model="ruleForm.name" clearable show-word-limit maxlength="30"></el-input>
        </el-form-item>
        <el-form-item :label="fromName" prop="per_remark">
          <el-input placeholder="请输入" type="textarea" :rows="4" v-model="ruleForm.per_remark" clearable  show-word-limit maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="加分上限" prop="point_limit" v-if="ruleForm.type == 3">
          <el-input placeholder="请输入加分上限" id="input2" v-model="ruleForm.point_limit" clearable @input="resetInput('input2')"></el-input>
        </el-form-item>
        <el-form-item label="扣分上限" prop="point_limit" v-if="ruleForm.type == 4">
          <el-input placeholder="请输入扣分上限" id="input3" v-model="ruleForm.point_limit" clearable @input="resetInput('input3')"></el-input>
        </el-form-item>
		<el-form-item label="备注" prop="remark">
		  <el-input placeholder="请输入" type="textarea" v-model="ruleForm.remark" clearable :rows="4" show-word-limit maxlength="500"></el-input>
		</el-form-item>
        <el-form-item label="目标值" prop="target" v-if="ruleForm.type == 1"><el-input placeholder="请输入目标值" v-model="ruleForm.target" clearable></el-input></el-form-item>
        <el-form-item label="量化指标单位" prop="unit" v-if="ruleForm.type == 1">
          <el-input placeholder="请输入单位,比如%,元,万元" v-model="ruleForm.unit" clearable></el-input>
        </el-form-item>
		<el-form-item label="权重" prop="weight" v-if="ruleForm.type == 2 || ruleForm.type == 1">
		  <el-input @input="resetInput('input')" id="input" placeholder="请输入权重(1~100)" v-model="ruleForm.weight"><span slot="append">%</span></el-input>
		</el-form-item>
		<el-form-item label="评分方式"><el-input placeholder="直接输入分数" disabled></el-input></el-form-item>
        <el-form-item label="结果值录入" prop="result_type" v-if="ruleForm.type == 1">
          <template slot="label">
            <span>结果值录入:</span>
            <el-tooltip effect="dark" placement="top">
              <template slot="content">
                开启后，当前指标评分前需要先录入结果值。结果值用来记录考核周期内指标的实际完成情况。
              </template>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </template>
          <el-select v-model="ruleForm.result_type" class="width-250">
            <el-option label="不开启" value="none"></el-option>
            <el-option label="被考核人" value="self"></el-option>
            <el-option label="指定员工" value="special"></el-option>
            <el-option label="直属部门主管" value="supervisor"></el-option>
          </el-select>
          <div style="position: relative;margin-top: 10px;" v-if="ruleForm.result_type == 'special'" class="width-250">
            <el-input v-model="assignUser.name" placeholder="请选择指定员工"></el-input>
            <div @click="addUser(1)" class="inputDc"></div>
          </div>
        </el-form-item>
        <el-form-item label="管理记录人" prop="employee_ids">
          <div class="border flex-box-ce">
            <div class="flex-1" v-if="record_ids.length == 0">请选择记录人</div>
            <div v-else style="width: 510px;" class="font-flex-word">
              <span v-for="(item, index) in record_ids" :key="index">
                <i v-if="index != 0">,</i>
                {{ item.name }}
              </span>
            </div>
            <span v-if="record_ids.length > 0" class="blue">{{ record_ids.length }}人</span>
            <i class="el-icon-arrow-down icon-right" v-else></i>
            <div @click="isShowRecordFun()" class="inputDc"></div>
          </div>
        </el-form-item>
        <el-form-item label="指定评分人" prop="isReviewer">
          <el-switch v-model="ruleForm.isReviewer"></el-switch>
          <div>
            <div style="position: relative;" v-if="ruleForm.isReviewer">
              <el-input v-model="assignScoreUser.name" placeholder="请选择指定员工"></el-input>
              <div @click="addUser(2)" class="inputDc"></div>
            </div>
            <div class="fontColorF">开启后，该指标如被制定目标引用，该指标将由指定的人进行评分</div>
          </div>
        </el-form-item>
		<el-form-item label="加入统计项" prop="enable_ds" v-if="ruleForm.type == 1">
          <el-switch v-model="ruleForm.enable_ds"></el-switch>
          <div>
            <div class="fontColorF">开启后，该指标可以加入数据中台做汇总统计并分析</div>
          </div>
        </el-form-item>
		<el-form-item label="标签" prop="tag_ids">
          <el-select v-model="ruleForm.tag_ids" multiple placeholder="请选择标签" style="width:100%;">
            <el-option v-for="item in tabs" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right;position: sticky;bottom: 0px;z-index: 999;width: 700px;margin: 0 auto;padding: 10px 0;background-color: #fff;">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存设置</el-button>
      </div>
    </div>
    <!-- 选择子管理员 -->
    <EmployeeSelector :multi="false" :is_filtration_creator="false" :selected="selected" :isChecKedAll="false" :visible.sync="setAdministrator" @confirm="confirmAdministrator" />
    <EmployeeSelector :is_filtration_creator="false" :selected="selected2" :visible.sync="isShowRecord" @confirm="confirmAdministrator2" />
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHeadTwo from '@/components/public/PageHeadTwo';
export default {
  name: 'addIndexSet',
  components: { EmployeeSelector, PageHeadTwo },
  data() {
    return {
      title: '新增指标',
      tabs: [],
      AdministratorName: '',
      setAdministrator: false,
      fromName: '考核标准',
      selected: { employee: [], dept: [] }, //已经选择人员
      selected2: { employee: [], dept: [] }, //已经选择人员
      assignUser: {},
      assignScoreUser: {},
      record_ids: [],
      isShowRecord: false,
      ruleForm: {
        cate_id: '', //指标分类id
        name: '', //指标名称
        per_remark: '', //考核标准
        remark: '', //备注
        type: 1, //默认1 指标种类 1-量化指标 2-行为价值观指标 3-额外加分项 4-额外扣分项
        unit: '', //量化指标单位
        target: '', //目标值
        result_type: 'none', //(结果值录入者设置,none-不开启 self-被考核人 special-指定员工 supervisor-指定主管’
        result_employee_id: '', //结果值录入者id, 只有result_type为special时才需要指定
        weight: null, //权重 0-100之间
        reviewer_id: '', //指定审批人(评分人)id
        point_limit: '', //分数上限,只对额外加分项以及额外扣分项有用
        tag_ids: [], //指标id 数组或逗号分割
        enable_ds: false, //是否加入统计项
        isReviewer: false, //指定评分人
        record_ids: [] //管理记录人
      },
      rules: {
        name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }, { min: 2, message: '最少2个字符', trigger: 'blur' }],
        cate_id: [{ required: true, message: '请选择指标分类', trigger: 'change' }],
        per_remark: [{ required: true, message: '请输入标准', trigger: 'blur' }],
        weight: [{ required: true, message: '请输入权重', trigger: 'blur' }]
      },
      indexTypeList: [],
      isUserIndex: 1,
      id: '' //编辑时用
    };
  },
  watch: {
    id(val) {
      if (val) {
        this.title = '指标详情';
      } else {
        this.title = '新增指标';
      }
    },
    assignUser(val) {
      if (val) {
        this.ruleForm.result_employee_id = val.id;
      }
    },
    assignScoreUser(val) {
      if (val) {
        this.ruleForm.reviewer_id = val.id;
      }
    },
    'ruleForm.type'(val) {
      this.ruleForm.enable_ds = false
      if (val == 3) {
        this.fromName = '加分标准';
      } else if (val == 4) {
        this.fromName = '扣分标准';
      } else {
        this.fromName = '考核标准';
      }
    },
    record_ids(val) {
      let ids = val.map(item => {
        return item.id;
      });
      this.ruleForm.record_ids = ids || '';
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getIndexType();
      this.getTagList();
    });
    if (this.$route.query.item) {
      this.recoverData();
    }
    if (this.$route.query.cate_id) {
      this.ruleForm.cate_id =parseInt(this.$route.query.cate_id);
    }
  },
  methods: {
    isShowRecordFun() {
      this.selected2.employee = this.record_ids;
      this.isShowRecord = true;
    },
    confirmAdministrator2(e) {
      this.record_ids = e.employee.length > 0 ? e.employee : [];
    },
    // 最大值不能大于100
    resetInput(str) {
      //解决v-model与oninput同时使用失效问题
      var dom = document.getElementById(str);
      var value = dom.value;
      //写你自己的输入规则
      value = value.replace(/[^\d]/g, '');
      if (value > 100 && str == 'input') {
        this.ruleForm.weight = '';
        this.$message.error('不能大于100');
        return false;
      }
      dom.value = value; //输入框赋值
      str == 'input' ? (this.ruleForm.weight = dom.value) : (this.ruleForm.point_limit = dom.value);
    },
    recoverData() {
      let item = JSON.parse(this.$route.query.item);
      item.isReviewer = item.reviewer_id ? true : false;
      item.enable_ds = item.enable_ds == 1 ? true : false;
      this.id = item.id;
      this.ruleForm = item;
      item.point_limit = item.point_limit == 0 ? '' : item.point_limit;
      let record_ids = item.record_ids;
      this.record_ids = record_ids.map(e => {
        let user = this.$getEmployeeList()[e];
        return user;
      });
      this.assignUser = this.$getEmployeeList()[item.result_employee_id] ? this.$getEmployeeList()[item.result_employee_id] : {};
      this.assignScoreUser = this.$getEmployeeList()[item.reviewer_id] ? this.$getEmployeeList()[item.reviewer_id] : {};
    },
    //选择人员
    addUser(index) {
      if (index == 1) {
        this.selected.employee = this.assignUser.name ? [this.assignUser] : [];
      } else {
        this.selected.employee = this.assignScoreUser.name ? [this.assignScoreUser] : [];
      }
      this.isUserIndex = index;
      this.setAdministrator = true;
    },
    //获取指标分类
    getIndexType() {
      this.$axios('get', 'api/per/index/cate/list').then(res => {
        this.indexTypeList = res.data.data.list || [];
      });
    },
    //获取标签列表
    getTagList() {
      this.$axios('get', 'api/per/index/tag').then(res => {
        this.tabs = res.data.data.list || [];
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.result_type == 'special') {
            if (!this.ruleForm.result_employee_id) {
              this.$message.error('请选择指定人员');
              return;
            }
          }
          if (this.ruleForm.type == 1 || this.ruleForm.type == 2) {
            if (this.ruleForm.weight == '0') {
              this.$message.error('权重不能为0');
              return false;
            }
          }
          if (this.ruleForm.type == 3 || this.ruleForm.type == 4) {
            if (this.ruleForm.point_limit == '0') {
              this.$message.error('分数上限不能为0');
              return false;
            }
          }
          if (this.ruleForm.isReviewer) {
            if (!this.ruleForm.reviewer_id) {
              this.$message.error('请选择指定评分人');
              return;
            }
          }
          let ruleForm = this.ruleForm;
          let data = {
            cate_id: ruleForm.cate_id, //指标分类id
            name: ruleForm.name, //指标名称
            per_remark: ruleForm.per_remark, //考核标准
            remark: ruleForm.remark, //备注
            type: ruleForm.type, //默认1 指标种类 1-量化指标 2-行为价值观指标 3-额外加分项 4-额外扣分项
            unit: ruleForm.unit, //量化指标单位
            target: ruleForm.target, //目标值
            result_type: ruleForm.result_type, //(结果值录入者设置,none-不开启 self-被考核人 special-指定员工 supervisor-指定主管’
            result_employee_id: ruleForm.result_employee_id, //结果值录入者id, 只有result_type为special时才需要指定
            weight: ruleForm.weight, //权重 0-100之间
            reviewer_id: ruleForm.isReviewer ? ruleForm.reviewer_id : '', //指定审批人(评分人)id
            point_limit: ruleForm.point_limit, //分数上限,只对额外加分项以及额外扣分项有用
            tag_ids: ruleForm.tag_ids.length > 0 ? ruleForm.tag_ids : '', //指标id 数组或逗号分割
            record_ids: ruleForm.record_ids.length > 0 ? ruleForm.record_ids : '', //指定跟踪管理记录人 数组
            enable_ds: ruleForm.enable_ds ? 1 : 0
          };
          if (this.id) {
            data.index_id = this.id;
          }
          let url = this.id ? 'api/per/index/update' : 'api/per/index/add';
          this.$axios('post', url, data).then(res => {
            this.$message.success(this.id ? '编辑成功' : '添加成功');
            this.$router.go(-1);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 保存人员
    confirmAdministrator(e) {
      if (this.isUserIndex == 1) {
        this.assignUser = e.employee.length > 0 ? e.employee[0] : {};
      } else {
        this.assignScoreUser = e.employee.length > 0 ? e.employee[0] : {};
      }
      this.setAdministrator = false;
    }
  }
};
</script>

<style scoped="scoped">
.border {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #c0c4cf;
  font-size: inherit;
  height: auto;
  outline: 0;
  padding: 0 15px;
  /* width: 400px; */
  position: relative;
  cursor: pointer;
}
.border .font-flex-word {
  color: #606266;
}
.box {
  padding: 20px;
  font-size: 14px;
  background-color: #fff;
}
.main {
  margin-top: 40px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  cursor: pointer;
}
.demo-ruleForm {
  width: 700px;
  margin: 0 auto;
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}
/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
::v-deep .el-textarea__inner::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
::v-deep .el-textarea__inner:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  height: 20px;
}
</style>