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

<template>
  <m-form ref="form" label-width="100px" :items="formItems" v-model="formValues">
    <template #content>
      <m-table
        clearHeader
        shadow="never"
        :headers="headers"
        :items="items"
      >
        <template #name="{ row }">
          <el-input v-model="row.name" placeholder="请输入参数名称" size="small"></el-input>
        </template>
        <template #value="{ row }">
          <el-input v-model="row.value" placeholder="请输入参数值" size="small"></el-input>
        </template>
        <template #actions="{ $index }">

          <m-button circle type="danger" icon="el-icon-delete" size="mini" @click="onRemove($index)"></m-button>
        </template>
        <div class="text-center">
          <m-button type="orange" size="mini" @click="onAdd">添加一组数据</m-button>
        </div>
      </m-table>
    </template>
  </m-form>
</template>

<script>
import {
  DICT_CATEGORY
} from '../utils/Dict'
export default {
  name: 'salarySolutionRulesEditParam',
  data () {
    return {
      headers: [
        { label: '参数名称', prop: 'name' },
        { label: '参数值', prop: 'value' },
        { label: '操作', prop: 'actions' }
      ],
      items: [],
      id: 0,
      formValues: {
        name: null,
        valueCategory: 0,
        miniValue: null,
        maxValue: null,
        value: null
      }
    }
  },
  computed: {
    formItems () {
      const style = 'margin-bottom: 12px'
      const common = [
        {
          label: '参数名称',
          prop: 'name',
          type: 'input',
          options: {
            placeholder: '请输入参数名称',
            size: 'small'
          },
          rules: [
            { required: true, message: '请输入参数名称', trigger: 'blur' }
          ],
          style
        },
        {
          label: '参数类型',
          prop: 'valueCategory',
          type: 'select',
          options: {
            placeholder: '请选择参数类型',
            items: DICT_CATEGORY,
            size: 'small'
          },
          rules: [
            { required: true, message: '请选择参数类型', trigger: 'change' }
          ],
          style
        }
      ]
      const maxAndMin = [
        {
          label: '最小值',
          prop: 'miniValue',
          type: 'number',
          options: {
            size: 'small',
            step: 0.1
          },
          style
        },
        {
          label: '最大值',
          prop: 'maxValue',
          type: 'number',
          options: {
            size: 'small',
            step: 0.1
          },
          style
        }
      ]
      if (this.formValues.valueCategory === 0) {
        return [
          ...common,
          ...maxAndMin,
          {
            label: '初始值',
            prop: 'value',
            type: 'number',
            options: {
              size: 'small',
              step: 0.1
            },
            style
          }
        ]
      }
      if (this.formValues.valueCategory === 2) {
        return [
          ...common,
          ...maxAndMin,
          {
            label: '数据',
            prop: 'content',
            style
          }
        ]
      }
      return [
        ...common,
        {
          label: '数据',
          prop: 'content',
          style
        }
      ]
    }
  },
  methods: {
    setValue (item) {
      console.log(item)
      const {
        valueCategory,
        value,
        maxValue,
        miniValue,
        ...obj
      } = item
      this.formValues = {
        ...obj,
        maxValue: !maxValue ? undefined : Number(maxValue),
        miniValue: !miniValue ? undefined : Number(miniValue),
        valueCategory,
        value: valueCategory === 0 ? value : JSON.parse(value)
      }

      if (valueCategory !== 0) {
        this.id = 0
        this.items = JSON.parse(value).map(e => {
          return {
            name: e.name,
            value: e.value,
            index: this.id++
          }
        })
      }
    },
    onAdd () {
      this.items.push({
        name: null,
        valueCategory: 0,
        miniValue: null,
        maxValue: null,
        value: null,
        index: this.id++
      })
    },
    onRemove (index) {
      this.items.splice(index, 1)
    },
    valid () {
      if (!this.formValues.name) {
        return
      }
      if (this.formValues.valueCategory !== 0) {
        return this.items.every(e => {
          return (e.name === null && e.value === null) || (e.name !== null && e.value !== null)
        })
      }
      return true
    },
    getValue () {
      const {
        name,
        valueCategory,
        miniValue,
        maxValue,
        value
      } = this.formValues
      if (valueCategory === 0) {
        return {
          name,
          valueCategory,
          miniValue: miniValue ?? null,
          maxValue: maxValue ?? null,
          value
        }
      }
      const items = this.items.map(e => {
        return {
          name: e.name,
          value: e.value
        }
      })
      if (valueCategory === 1) {
        return {
          name,
          valueCategory,
          value: JSON.stringify(items)
        }
      }
      return {
        name,
        valueCategory,
        miniValue: miniValue ?? null,
        maxValue: maxValue ?? null,
        value: JSON.stringify(items)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>