dy-admin-manager/src/views/categroyManager/specialSetup/modals/create-discount.vue

<template>
  <div>
    <el-form :model="form"
             ref="form">
      <el-form-item label="声部选择"
                    prop="subjectId"
                    :label-width="formLabelWidth"
                    :rules="[{ required: true, message: '请选择声部', trigger: 'change' }]">
        <el-select v-model.trim="form.subjectId"
                   filterable
                   style="width: 100%!important;"
                   placeholder="请选择声部组合"
                   clearable>
          <el-option-group v-for="group in subjectList"
                           :key="group.id"
                           :label="group.label">
            <el-option v-for="item in group.options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item v-for="item in typesList"
                    :key="item.value"
                    :label="item.label + '折扣(%)'"
                    :prop="`types.${item.value}`"
                    :label-width="formLabelWidth"
                    :rules="[
                      { required: true, message: '请输入折扣', trigger: 'blur' },
                      { pattern: /^\d+(\.\d{1,8})?$/, message: '请输入正确的折扣' }
                    ]">
        <el-input v-model.trim="form.types[item.value]"
                  autocomplete="off"
                  type="number"
                  placeholder="请输入折扣"
                  controls-position="right"
                  class="number-input"
                  min="0"
                  max="100"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button type="primary"
                 @click="submit">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { insertChargeTypeSubjectMapper } from '@/api/specialSetting'
import { listeners } from 'process';
export default {
  props: ['typesList', 'subjectList'],
  data () {
    return {
      formLabelWidth: '130px',
      form: {
        subjectId: '',
        types: {},
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = []
          for (const key in this.form.types) {
            if (this.form.types.hasOwnProperty(key)) {
              const item = this.form.types[key];
              data.push({
                chargeTypeId: key,
                subjectId: this.form.subjectId,
                goodsDiscountRate: item
              })
            }
          }
          try {
            await insertChargeTypeSubjectMapper(data)
            this.$message.success('创建成功')
            this.$listeners.submited()
            this.$listeners.close()
          } catch (error) { }
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.dialog-footer {
  display: block;
  text-align: right;
}
.number-input {
  ::v-deep  .el-input__inner {
    text-align: left;
  }

  width: 100%;
}
</style>