management_UI/src/views/kpi/workbench/assessmentGroup/edit/index.vue

<!--  -->
<template>
    <div class="eidt">
         <div class="eidt-header">
            <div @click="handleChangle(1)" :class="{active:active===1}" class="a commonFont" ><span class="eidt-header-circle">1</span>基础设置</div>
            <div @click="handleChangle(2)"  :class="{active:active===2}" class="a commonFont"><span class="eidt-header-circle">2</span>模板设计</div>
            <div @click="handleChangle(3)" :class="{active:active===3}" class="a commonFont"><span class="eidt-header-circle">3</span>流程设计</div>
        </div>
        <div class="eidt-right">
           <el-button :loading='loadings' type="primary" @click="handSaveBasisc">保 存</el-button>
        </div>
        <div class="eidt-content boderAndRadius">
          <basis :basisForm.sync='basisForm'  v-show="active===1"/>
          <template-set :templateForm.sync='templateForm' v-show="active===2"/>
          <process :processInfo.sync='processInfo' v-show="active===3"/>
        </div>
    </div>
</template>

<script>
import basis from './components/basis'
import process from './components/process'
import templateSet from './components/templateSet'
import {saveBaseSet, saveTemSet, saveDetailProcs} from '@/api/workbench'

export default {
  data () {
    return {
      loadings: false,
      active: 1,
      // 基础
      basisForm: {
        // id: 8,
        counts: '', // 参与考核人数
        depIds: '', // 参与部门id，逗号隔开
        managerIds: '395', // 绩效管理员ID，system_user,id，逗号隔开
        outIds: '', // 排除人员ids，逗号隔开
        staffIds: '', // 参与考核员工staff_id，逗号隔开.
        name: ''
      },
      processInfo: {},
      templateForm: {
        calculateId: 1,
        modelItems: []
      },
      id: ''
    }
  },
  components: {
    basis,
    process,
    templateSet
  },
  computed: {},
  beforeMount () {},
  created () {
    const id = this.$route.query.id
    this.$route.meta.title = !id ? '新增考评组' : '编辑考评组'
  },
  mounted () {

  },
  methods: {
    handleChangle (item) {
      this.active = item
    },

    async handSaveBasisc () {
      console.log('this.processInfo: ', this.processInfo)
      console.log('this.basisForm: ', this.basisForm)
      if (!this.basisForm.name) {
        return this.$message.error('请输入考评组名称')
      }
      if (!this.basisForm.depIds && !this.basisForm.staffIds) {
        return this.$message.error('请选择被考核人员')
      }

      this.loadings = true
      try {
        let res = await saveBaseSet(this.basisForm)
        res = res.data
        this.basisForm = res
        this.templateForm.evaluationGroupId = res.id
        for (let i in this.processInfo) {
          console.log('processInfo: ', i)
          try {
            let res1 = await saveDetailProcs(Object.assign({}, this.processInfo[i].chartDetails, {evaluationGroupId: res.id}))
            console.log('res: ', res1)
          } catch (error) {
            console.log('error: ', error)
          }
        }
        console.log('res: ', res)
      } catch (error) {
        this.$message.error(error.msg)
      }
      console.log('this.templateForm: ', JSON.stringify(this.templateForm))
      try {
        let res = await saveTemSet(this.templateForm)
        res = res.data
        // this.basisForm = res
        console.log('res: ', res)
      } catch (error) {
        this.$message.error(error.msg)
      }
      this.loadings = false
      this.$message({
        message: '保存成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
          this.$router.replace({name: 'workbench-group'})
        }
      })
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.eidt{
  position: relative;
  &-right{
    position: absolute;
     z-index: 50;
     top: -(@headerHeight+30px);
    right: 0;
    height: @headerHeight;
    .center()
  }
  &-content{
    height: 600px;
    background: #fff;
    padding: 40px 28px;
    overflow: auto;
  }
  &-header{
    cursor: pointer;
    position: absolute;
    z-index: 50;
    width: 420px;
    height: @headerHeight;
    top: -(@headerHeight+30px);
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    >div{
      flex:1;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing:1px
    }
    .active{
      background: @fontBlue;
      color: #fff;
    }
    &-circle{
      margin: 0 4px;
      display: inline-block;
      border: 1px solid #eeeeee;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }
  }
}
</style>