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

<template>
  <!-- <m-card shadow="never"> -->
  <div>
    <el-form-item label="参数配置">
      <m-card shadow="never">
        <el-row>
          <el-col :span="8">参数名称</el-col>
          <el-col :span="4" class="text-center">初始值</el-col>
          <el-col :span="5" class="text-center">最小值 （是否启用）</el-col>
          <el-col :span="5" class="text-center">最大值 （是否启用）</el-col>
          <el-col :span="2">操作</el-col>
        </el-row>
        <el-row
          v-for="(row, index) in items"
          :key="row.key"
        >
          <el-col :span="8">
            <el-input v-model="row.name" placeholder="请输入参数名称" size="small"></el-input>
          </el-col>
          <el-col :span="4" class="text-center">
            <el-input-number v-model="row.value" placeholder="初始值" size="small"></el-input-number>
          </el-col>
          <el-col :span="5" class="text-center">
            <el-input-number :disabled="!row.miniValueActive" v-model="row.miniValue" placeholder="最小值" size="small"></el-input-number>
            <el-switch active-color="#13ce66" class="ml-3" v-model="row.miniValueActive"></el-switch>
          </el-col>
          <el-col :span="5" class="text-center">
            <el-input-number :disabled="!row.maxValueActive" v-model="row.maxValue" placeholder="最大值" size="small"></el-input-number>
            <el-switch active-color="#13ce66" class="ml-3" v-model="row.maxValueActive"></el-switch>
          </el-col>
          <el-col :span="2">
            <m-button :disabled="items.length === 1" size="small" type="danger" @click="onDelete(index)">移除</m-button>
          </el-col>
        </el-row>
        <div class="text-center mt-3">
          <m-button type="orange" size="small" @click="onAdd">添加一个参数</m-button>
        </div>
      </m-card>
    </el-form-item>
    <!-- <div class="d-flex mb-3">
      <div class="boxLabel">参数配置</div>
      <div class="boxContent">
        <m-table
          ref="tableRefs"
          shadow="naver"
          clearHeader
          :items="items"
          row-key="index"
          :headers="[
            { type: 'expand', prop: 'expandProp' },
            { label: '参数', prop: 'name' },
            { label: '参数类型', prop: 'valueCategory' },
            { label: '操作', prop: 'actions' }
          ]"
        >
          <template #expandProp="{ $index }">
            <SalarySolutionRulesEditParam :ref="`salarySolutionRulesEditParamRefs${$index}`" v-model="items[$index]"></SalarySolutionRulesEditParam>
          </template>
          <div class="text-center mt-3">
            <m-button icon="el-icon-plus" type="orange" size="small" @click="onAdd">添加参数</m-button>
          </div>
          <template #valueCategory="{ row }">
            {{ DICT_CATEGORY.find(item => item.value === row.valueCategory)?.label }}
          </template>
          <template #actions="scope">
            <m-button size="small" text type="danger" @click="onDelete(scope)">移除</m-button>
          </template>
        </m-table>
      </div>
    </div>
    <div class="d-flex">
      <div class="boxLabel">计算公式</div>
      <div class="boxContent">
        <m-card shadow="never">
          <Toolbar
            style="border-bottom: 1px solid #eee"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
              style="height: 250px; overflow-y: hidden;"
              v-model="formulaData"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
          />
        </m-card>
      </div>
    </div> -->

    <el-form-item label="计算公式">
      <m-card shadow="never">
        <Toolbar
          style="border-bottom: 1px solid #eee"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
            style="height: 250px; overflow-y: hidden;"
            v-model="formulaData"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </m-card>
    </el-form-item>
  </div>
  <!-- </m-card> -->
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
// import {
//   DICT_CATEGORY
// } from '../utils/Dict'
export default {
  name: 'salarySolutionRulesRulesEdit',
  components: { Editor, Toolbar },
  // props: {
  //   item: {
  //     type: Object,
  //     default: () => ({})
  //   }
  // },
  data () {
    return {
      // DICT_CATEGORY,
      editor: null,
      formulaData: '',
      toolbarConfig: {
        toolbarKeys: [
          'headerSelect',
          // 分割线
          '|',
          'bold',
          'italic'
        ]
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      id: 0,
      items: [
        {
          key: 0,
          miniValue: 0,
          miniValueActive: true,
          maxValue: 1,
          maxValueActive: true,
          name: null,
          value: 0,
          valueCategory: 0
        }
      ]
    }
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onAdd () {
      // const item = {
      //   index: this.items.length,
      //   name: null,
      //   valueCategory: 0
      // }
      this.items.push({
        key: this.id++,
        miniValue: 0,
        miniValueActive: true,
        maxValue: 1,
        maxValueActive: true,
        name: null,
        value: 0,
        valueCategory: 0
      })
      // const ref = this.$refs.tableRefs.getRefs()
      // ref.toggleRowExpansion(item)
    },
    onDelete (index) {
      this.items.splice(index, 1)
      // this.$confirm('确定要移除改组参数吗？', '提示').then(e => {
      //   this.items.splice(scope.$index, 1)
      // }).catch(_ => {})
    },
    valid () {
      return new Promise((resolve, reject) => {
        const check = this.items.every(e => {
          return e.name && e.value !== null && (!e.miniValueActive || e.miniValue !== null) && (!e.maxValueActive || e.maxValue !== null)
        })
        if (!check) {
          reject(check)
        } else {
          resolve(this.getValue())
        }
      })
    },
    setValue (data) {
      this.id = 0
      this.formulaData = data.calculateFormulas.length ? data.calculateFormulas[0].content : ''
      if (!data.calculateConfigurations.length) {
        this.items = [
          {
            key: 0,
            miniValue: 0,
            miniValueActive: true,
            maxValue: 1,
            maxValueActive: true,
            name: null,
            value: 0,
            valueCategory: 0
          }
        ]
        return
      }
      this.items = data.calculateConfigurations.map(e => {
        return {
          key: this.id++,
          maxValueActive: e.maxValue !== null,
          miniValueActive: e.miniValue !== null,
          ...e
        }
      })
    },
    getValue () {
      const calculateConfigurations = this.items.map(e => {
        const {
          name,
          valueCategory,
          miniValue,
          miniValueActive,
          maxValue,
          maxValueActive,
          value
        } = e
        // if (valueCategory === 0) {
        return {
          name,
          valueCategory,
          miniValue: miniValueActive ? miniValue : null,
          maxValue: maxValueActive ? maxValue : null,
          value: value.toString()
        }
        // }
        // const _value = JSON.stringify(value.map(_e => {
        //   return {
        //     name: _e.name,
        //     value: _e.value
        //   }
        // }))
        // if (valueCategory === 1) {
        //   return {
        //     name,
        //     valueCategory,
        //     value: _value
        //   }
        // }
        // return {
        //   name,
        //   valueCategory,
        //   miniValue: miniValue ?? null,
        //   maxValue: maxValue ?? null,
        //   value: _value
        // }
      })
      return {
        category: '类型',
        calculateConfigurations,
        calculateFormulas: [
          {
            category: '类型',
            content: this.formulaData
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  height: 40px;
}
.boxLabel {
  width: 80px;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}
.boxContent {
  flex: 1;
}
</style>