lanan-system-vue/src/views/drivingSchool/schoolCourse/form/schemeForm.vue

<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="right"
    >
      <el-form-item label="方案名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入方案名称"
          clearable
          maxlength="30"
          show-word-limit
        />
      </el-form-item>

      <el-divider content-position="left">提成配置</el-divider>

      <el-form-item label="科目一提成" prop="subject1Deduct">
        <el-input-number
          v-model="formData.subject1Deduct"
          :precision="2"
          :min="0"
          :max="10000"
          :step="100"
          controls-position="right"
        />
        <span class="unit">元</span>
      </el-form-item>

      <el-form-item label="科目二提成" prop="subject2Deduct">
        <el-input-number
          v-model="formData.subject2Deduct"
          :precision="2"
          :min="0"
          :max="10000"
          :step="100"
          controls-position="right"
        />
        <span class="unit">元</span>
      </el-form-item>

      <el-form-item label="科目三提成" prop="subject3Deduct">
        <el-input-number
          v-model="formData.subject3Deduct"
          :precision="2"
          :min="0"
          :max="10000"
          :step="100"
          controls-position="right"
        />
        <span class="unit">元</span>
      </el-form-item>

      <el-form-item label="科目四提成" prop="subject4Deduct">
        <el-input-number
          v-model="formData.subject4Deduct"
          :precision="2"
          :min="0"
          :max="10000"
          :step="100"
          controls-position="right"
        />
        <span class="unit">元</span>
      </el-form-item>

      <el-form-item label="业务经理提成" prop="subject0Deduct">
        <el-input-number
          v-model="formData.subject0Deduct"
          :precision="2"
          :min="0"
          :max="10000"
          :step="100"
          controls-position="right"
        />
        <span class="unit">元</span>
      </el-form-item>

      <el-form-item label="是否默认方案" prop="isDefault">
        <el-switch
          v-model="formData.isDefault"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="默认方案"
          inactive-text="非默认方案"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import * as SchemeApi from '@/views/drivingSchool/schoolCourse/schemeApi';

import * as SchemeApi from '@/views/drivingSchool/schoolCourse/api/schemeApi'

export default {
  name: "SchemeForm",
  data() {
    const validateDeduct = (rule, value, callback) => {
      if (value === null || value === undefined) {
        return callback(new Error('请输入提成金额'));
      }
      if (value < 0) {
        return callback(new Error('提成金额不能为负数'));
      }
      callback();
    };

    return {
      dialogVisible: false,
      dialogTitle: "",
      submitLoading: false,
      formData: {
        id: undefined,
        courseId: undefined,
        name: "",
        subject0Deduct: 0,
        subject1Deduct: 0,
        subject2Deduct: 0,
        subject3Deduct: 0,
        subject4Deduct: 0,
        isDefault: false
      },
      formRules: {
        name: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],

        subject1Deduct: [
          { required: true, validator: validateDeduct, trigger: "blur" }
        ],
        subject2Deduct: [
          { required: true, validator: validateDeduct, trigger: "blur" }
        ],
        subject3Deduct: [
          { required: true, validator: validateDeduct, trigger: "blur" }
        ],
        subject4Deduct: [
          { required: true, validator: validateDeduct, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    open(schemeId, courseId) {
      this.dialogVisible = true;
      this.resetForm();
      this.formData.courseId = courseId;

      if (schemeId) {
        this.dialogTitle = "修改提成方案";
        this.fetchSchemeData(schemeId);
      } else {
        this.dialogTitle = "新增提成方案";
      }
    },

    async fetchSchemeData(id) {
      try {
        this.submitLoading = true;
        const res = await SchemeApi.getScheme(id);
        this.formData = {
          ...res.data,
          // 确保数字类型字段不为null
          subject0Deduct: res.data.subject0Deduct || 0,
          subject1Deduct: res.data.subject1Deduct || 0,
          subject2Deduct: res.data.subject2Deduct || 0,
          subject3Deduct: res.data.subject3Deduct || 0,
          subject4Deduct: res.data.subject4Deduct || 0
        };
      } catch (error) {
        console.error("获取提成方案数据失败:", error);
        this.$modal.msgError("获取数据失败，请重试");
        this.dialogVisible = false;
      } finally {
        this.submitLoading = false;
      }
    },

    handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;

        try {
          this.submitLoading = true;
          const isEdit = !!this.formData.id;

          if (isEdit) {
            await SchemeApi.updateScheme(this.formData);
            this.$modal.msgSuccess("修改成功");
          } else {
            await SchemeApi.createScheme(this.formData);
            this.$modal.msgSuccess("新增成功");
          }

          this.dialogVisible = false;
          this.$emit("success");
        } catch (error) {
          console.error("提交失败:", error);
          this.$modal.msgError(isEdit ? "修改失败" : "新增失败");
        } finally {
          this.submitLoading = false;
        }
      });
    },

    resetForm() {
      this.formData = {
        id: undefined,
        courseId: undefined,
        name: "",
        subject0Deduct: 0,
        subject1Deduct: 0,
        subject2Deduct: 0,
        subject3Deduct: 0,
        subject4Deduct: 0,
        isDefault: false
      };
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.clearValidate();
        }
      });
    }
  }
};
</script>

<style scoped>
.unit {
  margin-left: 10px;
  color: #888;
  font-size: 14px;
}

.el-divider {
  margin: 15px 0;
}

.el-input-number {
  width: 200px;
}

.el-select {
  width: 100%;
}
</style>