参数样例

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

@@ -135,7 +135,8 @@ export default {
           this.$message.error(error)
         }
       }).catch(error => {
-        this.editableTabsValue = error.data.name
+        console.log(error)
+        this.editableTabsValue = error.name
         this.$message.error('请填充完整')
       })
     }

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

@@ -1,81 +1,71 @@
 <template>
   <m-card shadow="never">
-    <el-form ref="form">
-      <el-form-item label="参数配置" class="mb-3">
-        <m-table
-          ref="tableRefs"
-          shadow="naver"
-          clearHeader
-          :items="items"
-          row-key="index"
-          :headers="[
-            { type: 'expand', prop: 'expandProp' },
-            { label: '参数', prop: 'label' },
-            { label: '参数类型', prop: 'valueCategory' },
-            { label: '操作', prop: 'actions' }
-          ]"
-        >
-          <template #expandProp="{ row }">
-            <el-form label-width="100px">
-              <el-form-item label="参数">
-                <el-input v-model="row.label" size="small"></el-input>
-              </el-form-item>
-              <el-form-item label="参数类型">
-                <el-select v-model="row.valueCategory" size="small">
-                  <el-option
-                    v-for="item in DICT_CATEGORY"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-form>
-          </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>
-      </el-form-item>
-      <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>
-    </el-form>
-    <!-- <SalarySolutionRulesEditParam ref="salarySolutionRulesEditParamRefs" @submit="onAddSubmit"></SalarySolutionRulesEditParam> -->
+    <div>
+      <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="{ row }">
+              <SalarySolutionRulesEditParam ref="salarySolutionRulesEditParamRefs" @assign="onAssign(row, $event)"></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>
+    </div>
   </m-card>
 </template>
 
 <script>
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import '@wangeditor/editor/dist/css/style.css'
-// import SalarySolutionRulesEditParam from './salarySolutionRulesEditParam.vue'
+import SalarySolutionRulesEditParam from './salarySolutionRulesEditParam.vue'
 import {
   DICT_CATEGORY
 } from '../utils/Dict'
 export default {
   name: 'salarySolutionRulesEdit',
-  components: { Editor, Toolbar },
+  components: { Editor, Toolbar, SalarySolutionRulesEditParam },
   props: {
     item: {
       type: Object,
@@ -107,13 +97,16 @@ export default {
     editor.destroy() // 组件销毁时，及时销毁编辑器
   },
   methods: {
+    onAssign (row, obj) {
+      Object.assign(row, obj)
+    },
     onCreated (editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
     onAdd () {
       const item = {
         index: this.items.length,
-        label: '未命名',
+        name: '未命名',
         valueCategory: 0
       }
       this.items.push(item)
@@ -126,25 +119,22 @@ export default {
       }).catch(_ => {})
     },
     valid () {
+      console.log('this.$refs.salarySolutionRulesEditParamRefs', this.$refs)
       return new Promise((resolve, reject) => {
-        resolve(this.getValue())
-        // this.$refs.form.validate(valid => {
-        //   if (valid) {
-        //     resolve(this.getValue())
-        //   } else {
-        //     const obj = {
-        //       data: this.item,
-        //       $refs: this.$refs.form
-        //     }
-        //     reject(obj)
-        //   }
-        // })
+        const check = this.$refs.salarySolutionRulesEditParamRefs.some(e => {
+          return !e.valid()
+        })
+        if (check) {
+          reject(this.item)
+        } else {
+          resolve(this.getValue())
+        }
       })
     },
     setValue (data) {
       this.items = data.calculateConfigurations.map(e => {
         return {
-          label: e.name,
+          name: e.name,
           valueCategory: e.valueCategory
         }
       })
@@ -155,12 +145,7 @@ export default {
     getValue () {
       return {
         category: this.item.title,
-        calculateConfigurations: this.items.map(e => {
-          return {
-            name: e.label,
-            value: e.value
-          }
-        }),
+        calculateConfigurations: this.items,
         calculateFormulas: [
           {
             category: this.item.title,
@@ -177,4 +162,13 @@ export default {
 ::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>

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

@@ -1,7 +1,28 @@
 <template>
-  <m-dialog ref="dialog" title="添加参数" append-to-body @sure="onSure">
-    <m-form ref="form" :items="formItems" v-model="formValues"></m-form>
-  </m-dialog>
+  <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>
@@ -12,25 +33,62 @@ export default {
   name: 'salarySolutionRulesEditParam',
   data () {
     return {
+      headers: [
+        { label: '参数名称', prop: 'name' },
+        { label: '参数值', prop: 'value' },
+        { label: '操作', prop: 'actions' }
+      ],
+      items: [],
+      id: 0,
       formValues: {
-        label: null,
-        valueCategory: 0
+        name: null,
+        valueCategory: 0,
+        miniValue: 0,
+        maxValue: 0,
+        value: 0
       }
     }
   },
+  watch: {
+    formValues: {
+      handler (val) {
+        if (val.valueCategory === 0) {
+          this.$emit('assign', val)
+          return
+        }
+        if (val.valueCategory === 1) {
+          this.$emit('assign', {
+            name: val.name,
+            valueCategory: val.valueCategory,
+            value: this.items
+          })
+          return
+        }
+        const { value, ...obj } = val
+        this.$emit('assign', {
+          ...obj,
+          value: this.items
+        })
+      },
+      deep: true
+    }
+  },
   computed: {
     formItems () {
-      return [
+      const style = 'margin-bottom: 12px'
+      const common = [
         {
           label: '参数名称',
-          prop: 'label',
+          prop: 'name',
           type: 'input',
           options: {
-            placeholder: '请输入参数名称'
+            placeholder: '请输入参数名称',
+            size: 'small'
           },
           rules: [
             { required: true, message: '请输入参数名称', trigger: 'blur' }
-          ]
+          ],
+          style
         },
         {
           label: '参数类型',
@@ -38,31 +96,114 @@ export default {
           type: 'select',
           options: {
             placeholder: '请选择参数类型',
-            items: DICT_CATEGORY
+            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: {
-    open () {
-      this.formValues = {
-        label: null,
-        valueCategory: 0
-      }
-      this.$refs.dialog.open()
+    onAdd () {
+      this.items.push({
+        name: null,
+        value: null,
+        index: this.id++
+      })
+    },
+    onRemove (index) {
+      this.items.splice(index, 1)
     },
-    onSure () {
+    valid () {
       this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$emit('submit', this.formValues)
-          this.$refs.dialog.close()
+        if (!valid) {
+          this.$message.error('请填写完整参数配置')
+          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
       })
     }
+    // open () {
+    //   this.formValues = {
+    //     label: null,
+    //     valueCategory: 0
+    //   }
+    //   this.$refs.dialog.open()
+    // },
+    // onSure () {
+    //   this.$refs.form.validate(valid => {
+    //     if (valid) {
+    //       this.$emit('submit', this.formValues)
+    //       this.$refs.dialog.close()
+    //     }
+    //   })
+    // }
   }
 }
 </script>