emis-frontend/src/views/emis/salesCommissionRatio/editForm.vue

<template>
  <div>
    <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
        <el-col :span="12">
          <el-form-item label="销售主管" prop="salesExecutive">
            <EmpNamePicker1 :placeholder="$t('销售主管')" v-model="form.salesExecutive"></EmpNamePicker1>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售主管占比" prop="salesExecutiveRatio">
            <el-input type="number" v-model="form.salesExecutiveRatio" placeholder="" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售联系人" prop="salesmen">
            <EmpNamePicker2 :placeholder="$t('销售联系人')" v-model="form.salesmen"></EmpNamePicker2>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售联系人占比" prop="salesmenRatio">
            <el-input type="number" v-model="form.salesmenRatio" placeholder="" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售支持" prop="salesSupport">
            <EmpNamePicker3 :placeholder="$t('销售支持')" v-model="form.salesSupport"></EmpNamePicker3>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售支持占比" prop="salesSupportRatio">
            <el-input type="number" v-model="form.salesSupportRatio" placeholder="" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startDate">
            <el-date-picker
              style="width: 100%;"
              v-model="form.startDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始时间"
            />
          </el-form-item>
        </el-col> 
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endDate">
            <el-date-picker
              style="width: 100%;"
              v-model="form.endDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
              default-time="23:59:59"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="启用状态" prop="status">
            <!-- 选项水平显示 -->
            <el-radio v-model="form.status" label="1">启用</el-radio>
            <el-radio v-model="form.status" label="0">未启用</el-radio>
            <!-- <el-radio v-model="form.status" label="2">启用已过期</el-radio>
            <el-radio v-model="form.status" label="3">启用未过期</el-radio> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" placeholder="" maxlength="30" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="text-align: center;margin-bottom: 10px;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </div>
</template>

<script>
import { addSalesCommissionRatio, getSalesCommissionRatio, updateSalesCommissionRatio } from "@/api/emis/emisSalesCommissionRatio";
import EmpNamePicker1 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
import EmpNamePicker2 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
import EmpNamePicker3 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';

export default {
  name: "SalesCommissionRatioForm",
  props: {
    id: {
      type: Number
    }
  },
  components: { EmpNamePicker1, EmpNamePicker2, EmpNamePicker3 },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 默认密码
      initPassword: undefined,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        salesExecutive: [
          { required: true, message: "销售主管不能为空", trigger: ["change", "blur"] }
        ],
        salesExecutiveRatio: [
          { required: true, message: "销售主管占比不能为空", trigger: ["change", "blur"] }
        ],
        salesmen: [
          { required: true, message: "销售联系人不能为空", trigger: ["change", "blur"] }
        ],
        salesmenRatio: [
          { required: true, message: "销售联系人占比不能为空", trigger: ["change", "blur"] }
        ],
        startDate: [
          { required: true, message: "开始时间不能为空", trigger: ["change", "blur"] }
        ],
        endDate: [
          { required: true, message: "结束时间不能为空", trigger: ["change", "blur"] }
        ],
        // salesSupport: [
        //   { required: true, message: "销售支持不能为空", trigger: ["change", "blur"] }
        // ],
        // salesSupportRatio: [
        //   { required: true, message: "销售支持占比不能为空", trigger: ["change", "blur"] }
        // ],
      }
    };
  },
  watch: {
    "id": {
      handler(newValue, oldValue) {
        this.id = newValue;
        this.initData();
      },
      deep: true
    }
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
      this.reset();
      if (this.id !== null) {
        getSalesCommissionRatio(this.id).then(response => {
          this.form = response.data;
        });
      }
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        salesExecutive: null,
        salesExecutiveRatio: null,
        salesmen: null,
        salesmenRatio: null,
        salesSupport: null,
        salesSupportRatio: null,
        status: null,
        startDate: null,
        endDate: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.userName = this.form.empCode;
          this.form.nickName = this.form.empName;
          if (this.form.id != null) {
            updateSalesCommissionRatio(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addSalesCommissionRatio(this.form).then(response => {
              this.$modal.msgSuccess("添加成功");
              this.$emit("on-changed");
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped></style>