yos_web/src/HDrpManagement/contractManage/components/taskTarget/editTarget.vue

<template>
  <div>
    <el-button  size="mini" type="text" :disabled="disabled" @click="onShow(dialogTableVisible = true)">编 辑</el-button>
    <el-drawer title="编辑人员目标" append-to-body :visible.sync="dialogTableVisible" size="98%" top="20px" :show-close="false">
      <div class="container">
        <el-row :gutter="40">
          <el-form :model="form" :disabled="date.year > year" label-position="right" label-width="80px" size="small">
            <el-col :span="6">
              <el-form-item label="年度">
                <el-input v-model="form.year" disabled autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="基本目标">
                <el-input v-model="form['y1l']" disabled autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="挑战目标">
                <el-input v-model="form['y1h']" disabled autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位">
                <p>万元</p>
              </el-form-item>
            </el-col>
            <div v-for="(i,index) in 4" :key="index">
              <el-col :span="24"><p class="normal-margin normal-title">第{{index+1===1?'一':index+1===2?'二':index+1===3?'三':'四'}}季度</p></el-col>
              <el-col :span="8">
                <el-form-item label="基本目标">
                  <el-input v-model="form[`s${index+1}l`]" disabled autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="挑战目标">
                  <el-input v-model="form[`s${index+1}h`]" disabled autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24"></el-col>
              <el-col :span="8" class="normal-margin">{{index+1===1?'一月':index+1===2?'四月':index+1===3?'七月':'十月'}}:</el-col>
              <el-col :span="8" class="normal-margin">{{index+1===1?'二月':index+1===2?'五月':index+1===3?'八月':'十一月'}}:</el-col>
              <el-col :span="8" class="normal-margin">{{index+1===1?'三月':index+1===2?'六月':index+1===3?'九月':'十二月'}}:</el-col>
              <el-col :span="8">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="基本目标">
                      <el-input type="number" v-model="form[`m${1+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="挑战目标">
                      <el-input type="number" v-model="form[`m${1+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="基本目标">
                      <el-input type="number" v-model="form[`m${2+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="挑战目标">
                      <el-input type="number" v-model="form[`m${2+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="基本目标">
                      <el-input type="number" v-model="form[`m${3+index * 3}l`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="挑战目标">
                      <el-input type="number" v-model="form[`m${3+index * 3}h`]" :disabled="date.month  > (1+index * 3) && date.year > year" autocomplete="off" @change="onChange"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </div>
          </el-form>
        </el-row>
      </div>
      
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props:['data','year','disabled'],
  data () {
    return {
      dialogTableVisible:false,
      form:{
        "sa_contractid":1
      },
      date:{
        year:'',
        month:''
      }
    }
  },
  methods:{
    onShow () {
      console.log(this.data);
      
      this.form = Object.assign({},this.form,this.data)
      let date = new Date()
      this.date = {
        year:date.getFullYear(),
        month:date.getMonth() + 1
      }
    },
    onChange(){
      for (var i = 0 ; i< 4 ; i++) {
        this.form[`s${i + 1}l`] = parseInt(this.form[`m${1 + i*3}l`]) + parseInt(this.form[`m${2 + i*3}l`]) + parseInt(this.form[`m${3 + i*3}l`])
        this.form[`s${i + 1}h`] = parseInt(this.form[`m${1 + i*3}h`]) + parseInt(this.form[`m${2 + i*3}h`]) + parseInt(this.form[`m${3 + i*3}h`])
      }
      this.form.y1l = this.form.s1l + this.form.s2l + this.form.s3l + this.form.s4l
      this.form.y1h = this.form.s1h + this.form.s2h + this.form.s3h + this.form.s4h
    },
    async onSubmit () {
      for (var i = 0 ; i< 4 ; i++) {
        this.form[`s${i + 1}l`] = parseInt(this.form[`m${1 + i*3}l`]) + parseInt(this.form[`m${2 + i*3}l`]) + parseInt(this.form[`m${3 + i*3}l`])
        this.form[`s${i + 1}h`] = parseInt(this.form[`m${1 + i*3}h`]) + parseInt(this.form[`m${2 + i*3}h`]) + parseInt(this.form[`m${3 + i*3}h`])
      }
      this.form.y1l = this.form.s1l + this.form.s2l + this.form.s3l + this.form.s4l
      this.form.y1h = this.form.s1h + this.form.s2h + this.form.s3h + this.form.s4h
      this.form.sa_contractid = this.$route.query.id
      const res = await this.$api.requested({
        "id": 20221229111502,
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.$emit('onSuccess')
        this.dialogTableVisible = false
      })
    }
  }
}

</script>
<style>
</style>