emis-frontend/src/views/emis/emisCustomsLevel/levelForm.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="customerName">
               <CustomLevelSimplePicker v-model="form.customerName"  placeholder="请选择客户名称" @onChange="handleCustomerChange"></CustomLevelSimplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="报关/清关" prop="bizType">
            <el-select v-model="form.bizType" placeholder="请选择" style="width: 100%;">
              <el-option label="报关" value="1"></el-option>
              <el-option label="清关" value="2"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别" prop="category">
                 <el-select v-model="form.category"   style="width: 100%;" clearable :placeholder="$t('类别')">
                    <el-option
                    v-for="dict in dict.type.emis_customs_level"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker
                style="width: 100%;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                v-model="form.startDate"
                type="date"
                placeholder="开始时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker
                style="width: 100%;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                v-model="form.endDate"
                type="date"
                placeholder="结束时间"
              ></el-date-picker>
            </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 { getCustomsLevel, addCustomsLevel, updateCustomsLevel } from "@/api/emis/emisCustomsLevel";
import CustomLevelSimplePicker from "@/views/emis/EmisBaseTools/CustomLevelSimplePicker.vue";

export default {
  name: "LevelForm",
  components: {
    CustomLevelSimplePicker
  },
  props:{
    id:{
      type:[Number,Array]
    },
    customerType:{
      type:[Number,String],
      required: true
    }
  },
  dicts: ['emis_customs_level'],
  data() {
    return {
      openSiteSelectTreeForm:false,
      emisCustomerUserOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        customerName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" },
          //不能有空格校验
          // { pattern: /^\S+$/, message: "客户名称不能有空格", trigger: "blur" },
          // { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/, message: "客户名称不能有空格和特殊字符", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        bizType: [
          { required: true, message: "报关/清关等级不能为空", trigger: "blur" }
        ],
        category: [
          { required: true, message: "级别不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
        if(this.id !=null) {
          this.loading = true;
          getCustomsLevel(this.id).then(response => {
            this.form = response.data;
            this.loading = false;
          });
        }else{
            this.reset();
        }
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        customerName: null,
        startDate: null,
        endDate: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.company=this.form.customerName;
            updateCustomsLevel(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addCustomsLevel(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.$emit("on-changed");
            });
          }
        }
      });
    },
    handleCustomerChange(val){
      this.form.customerName=val.customerName;
    }
  }
};
</script>

<style lang="scss" scoped>
// .el-row{
//   display:flex;
//   flex-wrap: wrap;
// }

// .el-col{
//     min-height: 1px;
// }

</style>