dy-admin-manager/src/views/levelManager/model/levelSettingAdd.vue

<template>
  <el-dialog
    width="980px"
    title="新增"
    :visible.sync="addVisible"
    :before-close="onClose"
    append-to-body
  >
    <el-form
      class="elForm"
      ref="elForm"
      label-position="top"
      :model="forms"
      :inline="false"
      label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="考级类型"
            :rules="[{ required: true, message: '请选择考级类型' }]"
            prop="degreeType"
            class="el-from-type"
          >
            <el-radio-group v-model="forms.degreeType" @input="onTypeChange">
              <el-radio label="GRADE">考级</el-radio>
              <el-radio label="THEORY">乐理</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" v-if="forms.degreeType === 'GRADE'">
          <el-form-item
            label="声部"
            :rules="[{ required: true, message: '请选择声部' }]"
            prop="subjectId"
          >
            <el-select
              style="width: 100% !important;"
              v-model="forms.subjectId"
              clearable
              filterable
              placeholder="请选择声部"
            >
              <el-option
                v-for="item in selects.subjects"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="forms.degreeType === 'GRADE' ? 19 : 24">
          <el-row :gutter="10">
            <el-col
              :span="7"
              class="el-form-item is-required el-form-item--medium el-form-title"
            >
              <label class="el-form-item__label">级别</label>
            </el-col>
            <el-col
              :span="7"
              class="el-form-item is-required el-form-item--medium el-form-title"
            >
              <label class="el-form-item__label">报考金额</label>
            </el-col>
            <el-col
              :span="7"
              class="el-form-item is-required el-form-item--medium el-form-title"
            >
              <label class="el-form-item__label">是否上传证书</label>
            </el-col>
          </el-row>
          <el-row
            :gutter="10"
            v-for="(item, index) in forms.domains"
            :key="index"
          >
            <el-col :span="7">
              <el-form-item
                :rules="[{ required: true, message: '请选择级别' }]"
                :prop="'domains.' + index + '.level'"
              >
                <el-select
                  style="width: 100% !important;"
                  v-model="item.level"
                  clearable
                  filterable
                  placeholder="请选择级别"
                >
                  <el-option
                    v-for="item in degreeLevel"
                    :key="item.value"
                    :value="item.value"
                    :label="item.text"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item
                :rules="[{ required: true, message: '请输入报考金额' }]"
                :prop="'domains.' + index + '.fee'"
              >
                <el-input
                  @keyup.native="keyupEvent"
                  v-model="item.fee"
                  maxlength="8"
                  placeholder="请输入报考金额"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="7">
              <el-form-item
                :rules="[{ required: true, message: '请选择是否上传证书' }]"
                :prop="'domains.' + index + '.credentials'"
              >
                <el-select
                  style="width: 100% !important;"
                  v-model="item.credentials"
                  clearable
                  placeholder="请选择是否上传证书"
                >
                  <el-option :value="false" label="无需上传"></el-option>
                  <el-option :value="true" label="需上传"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <div class="btnGroup" style="display: inline-block">
                <el-button
                  icon="el-icon-plus"
                  circle
                  @click="onAdd()"
                ></el-button>
                <el-button
                  icon="el-icon-minus"
                  circle
                  :disabled="forms.domains.length <= 1 ? true : false"
                  @click="onRemove(item)"
                ></el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose()">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  degreeLevel,
  degreeTheory,
  degreeLevelFeeSave
} from "../levelManageApi";
export default {
  name: "levelSettingAdd",
  data() {
    return {
      degreeLevel: [],
      addVisible: false,
      forms: {
        degreeType: "GRADE", // theory
        subjectId: null,
        domains: [
          {
            level: null,
            fee: null,
            credentials: null
          }
        ]
      }
    };
  },
  mounted() {
    this.degreeLevel = degreeLevel;
  },
  methods: {
    onClose() {
      this.$refs.elForm && this.$refs.elForm.resetFields();
      this.forms.type = "GRADE";
      this.forms.domains = [
        {
          level: null,
          fee: null,
          credentials: null
        }
      ];
      this.addVisible = false;
    },
    onTypeChange(val) {
      // 当前考级类型变化时，重置表单验证状态
      if (val === "THEORY") {
        this.degreeLevel = degreeTheory;
      } else if (val === "GRADE") {
        this.degreeLevel = degreeLevel;
      }
      this.forms.domains = [
        {
          level: null,
          fee: null,
          credentials: null
        }
      ];
      this.forms.subjectId = null;
      this.$refs.elForm && this.$refs.elForm.clearValidate();
    },
    onAdd() {
      this.forms.domains.push({
        level: null,
        fee: null,
        credentials: null
      });
    },
    onRemove(item) {
      let index = this.forms.domains.indexOf(item);
      if (index !== -1) {
        this.forms.domains.splice(index, 1);
      }
    },
    onSubmit() {
      this.$refs.elForm.validate(async res => {
        if (!res) return;

        try {
          const domains = this.forms.domains;
          domains.forEach(item => {
            item.degreeType = this.forms.degreeType;
            if (this.forms.degreeType === "GRADE") {
              item.subjectId = this.forms.subjectId;
            }
          });
          console.log(domains, "domains");
          await degreeLevelFeeSave(domains);

          this.$message.success("添加成功");
          this.updateVisible = false;
          this.onClose();
          this.$emit("getList");
        } catch {}
      });
    },
    openDialog() {
      this.addVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  padding: 0;
}
.el-form-title {
  margin: 0 !important;
}
.el-from-type {
  display: flex;
  ::v-deep .el-form-item__label {
    width: 100px !important;
  }
}
.btnGroup {
  .el-button + .el-button {
    margin-left: 5px;
  }
}
</style>