remuneration/src/views/salary/solution/salarySolution/salarySolutionRules.vue

<template>
  <m-dialog ref="dialog" title="规则配置" width="1000px" @sure="onSure">
    <el-form v-loading="loading" label-width="100px">
      <el-form-item label="名称">
        <el-tag color="primary">{{ itemData.title }}</el-tag>
      </el-form-item>
      <el-form-item label="类型">
        <template v-slot:default>
          <el-tabs type="card" addable v-model="editableTabsValue" @edit="onTabsEdit">
            <el-tab-pane
              v-for="tab in editableTabs"
              :key="tab.name"
              :name="tab.name"
              :closable="editableTabs.length > 1"
            >
              <template v-slot:label>
                {{ tab.title }}
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="click"
                >
                  <el-input v-model="tab.title" size="small"></el-input>
                  <span class="ml-3" slot="reference" @click.stop="">
                    <i class="el-icon-edit"></i>
                  </span>
                </el-popover>
              </template>
              <template v-slot:default>
                <SalarySolutionRulesEdit :item="tab" ref="salarySolutionRulesEditRefs"></SalarySolutionRulesEdit>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-form-item>
    </el-form>
  </m-dialog>
</template>

<script>
import SalarySolutionRulesEdit from './salarySolutionRulesEdit.vue'
import {
  saveSolution,
  getSolutionDetails
} from '@/api/salary'

export default {
  name: 'salarySolutionRules',
  components: {
    SalarySolutionRulesEdit
  },

  inject: ['env'],
  data () {
    return {
      editableTabsValue: '1',
      editableTabs: [],
      ids: 1,
      itemData: {},
      loading: false
    }
  },
  methods: {
    async open (item) {
      this.itemData = item
      this.$refs.dialog.open()
      this.loading = true
      this.ids = 1
      this.editableTabsValue = '1'
      try {
        const { data } = await getSolutionDetails({
          performanceSolutionId: item.performanceSolutionId
        })
        if (!data.performanceSolutionDetailRespCategoryVos.length) {
          this.editableTabs = [{
            title: '类型1',
            name: '1'
          }]
          return
        }
        this.editableTabs = data.performanceSolutionDetailRespCategoryVos.map((e, index) => {
          const key = String(index + 1)
          return {
            title: e.category,
            name: key
          }
        })
        this.ids = this.editableTabs.length
        this.$nextTick(() => {
          this.$refs.salarySolutionRulesEditRefs.forEach((e, index) => {
            e.setValue(data.performanceSolutionDetailRespCategoryVos[index])
          })
        })
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onTabsEdit (targetName, action) {
      if (action === 'add') {
        this.ids++
        this.editableTabs.push(
          { title: '类型' + this.ids, name: String(this.ids) }
        )
      }
      if (action === 'remove') {
        if (this.editableTabs.length === 1) {
          this.$message.error('至少保留一个分类')
          return
        }
        const index = this.editableTabs.findIndex(tab => tab.name === targetName)
        this.editableTabs.splice(index, 1)
        if (index === 0) {
          this.editableTabsValue = this.editableTabs[0].name
          return
        }
        if (targetName === this.editableTabsValue) {
          this.editableTabsValue = this.editableTabs[index - 1].name
        }
      }
    },
    async onSure () {
      // 验证
      Promise.all(this.$refs.salarySolutionRulesEditRefs.map(e => e.valid())).then(async data => {
        try {
          await saveSolution({
            entity: {
              performanceSolutionId: this.itemData.performanceSolutionId,
              env: this.env
            },
            performanceSolutionDetailRespCategoryVos: data
          })
          this.$refs.dialog.close()
          this.$emit('refresh')
          this.$message.success('保存成功')
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(error => {
        console.log(error)
        this.editableTabsValue = error.name
        this.$message.error('请填充完整')
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>