dd_pc/src/components/publics/workpoints.vue

<template>
  <div class="all">
    <div class="initialPoint">
      <div class="initia_title">{{initia_head.initial_suername}}</div>
      <div class="initia_title_1">{{initia_head.initial_suertext}}</div>
      <div v-for="(v,i) in initia_arr" :key="i">
        <el-form  :model="v.initia_input"  ref="v.initia_input"  :label-width="initia_head.initial_width"  class="demo-ruleForm">
		  <el-form-item  style="margin: 20px 0 0 0" v-if="v.type=='switch'">
				  <template slot="label">
					<span :style="'width:'+initia_head.initial_left">{{v.initialName}}</span>
					<el-tooltip placement="top">
					  <div slot="content" v-html="v.initial_text"></div>
					  <span class="initia_mark" v-show="v.initia_mark">?</span>
					</el-tooltip>
				  </template>
				<el-switch v-model="v.initia_input.age" :active-value="is" :inactive-value="no" @change="changeAge"></el-switch>
		  </el-form-item>
		  <div v-else-if="v.type=='object'" style="padding: 20px 0px;margin-left: 160px;">
			<div style="margin-bottom: 10px;">全勤加分需同时满足以下条件</div>
			<div style="padding-left: 23px;">1、当月无旷工</div>
			<div style="margin: 15px 0;">
				<div><el-checkbox v-model="v.absent_holiday.enable" :true-label="1" :false-label="0">2、当月未提交以下请假
					<el-tooltip placement="top" content="填写的请假名称必须与钉钉考勤打卡-假期管理-假期规则对应，否则此项不生效">
					  <span class="initia_mark" style="background-color: #666;">?</span>
					</el-tooltip>
				</el-checkbox></div>
				<div class="flex-box" style="margin-top: 10px;padding-left: 20px;">
					<el-input :disabled="v.absent_holiday.enable==1?false:true" style="width: 150px;" :key="1" type="text" v-model="val1" placeholder="假期类型"></el-input>
					<el-input :disabled="v.absent_holiday.enable==1?false:true" style="width: 150px;margin: 0 10px;" :key="2" type="text" v-model="val2" placeholder="假期类型"></el-input>
					<el-input :disabled="v.absent_holiday.enable==1?false:true" style="width: 150px;" type="text" :key="3" v-model="val3" placeholder="假期类型"></el-input>
				</div>
			</div>
			<div>
				<div><el-checkbox v-model="v.absent_late.enable" :true-label="1" :false-label="0">
				3、当月迟到少于 
				<el-input @input="[v.absent_late.count=v.absent_late.count.replace(/[^\d]/g,'')]" :disabled="v.absent_late.enable==1?false:true" style="width: 150px;" v-model="v.absent_late.count" placeholder="次数"></el-input>
				 次</el-checkbox></div>
<!-- 				<div class="flex-box">
					<el-input style="width: 150px;" placeholder="假期类型"></el-input>
					<el-input style="width: 150px;margin: 0 10px;" placeholder="假期类型"></el-input>
					<el-input style="width: 150px;" placeholder="假期类型"></el-input>
				</div> -->
			</div>
		  </div>  
          <el-form-item  style="margin: 20px 0 0 0 " v-else>
            <template slot="label">
				<template v-if="v.message">
					<el-popover placement="bottom" width="400" trigger="hover">
					  <div style="padding: 10px;">{{v.message}}</div>
					  <span slot="reference" :style="'width:'+initia_head.initial_left">{{v.initialName}} <i class="el-icon-warning"></i></span>
					</el-popover>
				</template>
				<template v-else>
					<span slot="reference" :style="'width:'+initia_head.initial_left">{{v.initialName}}</span>
				</template>
            </template>
            <el-input type="age" v-model="v.initia_input.age" :disabled="disabled"  autocomplete="off"  class="nitia_list_input"  placeholder="请输入分值" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}"></el-input>
		  </el-form-item>
        </el-form>
      </div>

      <el-button
        type="primary"
        class="initia_button"
        @click="save()"
        :style="'margin: 20px 0 20px '+initia_head.initial_left"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    initia_arr: Array,
    initia_head: Object,
  },
  data() {
    return {
		is: 1,
		no: 0,
		disabled:false,
		checked1:'',
		val1:'',
		val2:'',
		val3:'',
	};
  },
  created() {
	 if(this.initia_arr.length==9){
		 this.val1=this.initia_arr[8].absent_holiday.list[0]
		 this.val2=this.initia_arr[8].absent_holiday.list[1]
		 this.val3=this.initia_arr[8].absent_holiday.list[2]
	 }
  },
  mounted() {;
	  if(this.initia_arr[0].type=="switch"){
		this.disabled=this.initia_arr[0].initia_input.age==1? false:true;
	  }
  },
  methods: {
	changeAge(e){
		this.disabled=e==1? false:true
	},
    save() {
      let arr = [];
	  let checkAllData={};//全勤配置
      for (var i = 0; i < this.initia_arr.length; i++) {
		  if(this.initia_arr[i].type!='object'){
			 arr.push({sj: this.initia_arr[i].initia_input.age});
		  }else{
			  checkAllData=this.initia_arr[i]
			  let list=[this.val1,this.val2,this.val3];
			  checkAllData.absent_holiday.list=list.filter(x=>{
				  if(x){
					  return x
				  }
			  })
		  }
      }
	  this.$emit("initia", {arr,checkAllData});
    },
  },
};
</script>

<style>
.el-form-item__label {
  text-align: left;
}
.initialPoint {
  margin-left: 30px;
}
.initia_mark {
  background: #409eff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  cursor: default;
}
.initia_title {
  font-size: 20px;
  color: rgba(48, 49, 51, 1);
  padding-top: 30px;
  font-family: PingFangSC-Regular;
}
.initia_title_1 {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}
.nitia_list_input {
  width: 160px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
}
</style>