erp-el-element/Dialog/addbrand.vue

<!--
 * @Author: your name
 * @Date: 2021-01-30 11:18:29
 * @LastEditTime: 2021-03-03 10:24:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aiguo_erp_vue\src\components\Dialog\addbrand.vue
-->
<template>
  <el-dialog
    :title="Obj.DialogTitle"
    :visible.sync="Add_brand"
    width="420px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      :rules="rules" 
      label-position="top"
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      size="mini"
      :inline="true"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col style="display:flex;justify-content:space-between">
          <el-form-item label="分类级别" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="1">分类</el-radio>
              <el-radio :label="2">品牌</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="ruleForm.type == 2" label="上级分类" prop="cate_id">
            <el-select v-model="ruleForm.cate_id" clearable @blur="e => searchKeyBlur(e, 'ruleForm','cate_id')"  filterable placeholder="请选择上级分类">
              <el-option
               v-for="(item,index) in modaloptions.cate" :key="index"
               :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>              
        </el-col>
        <el-col style="display:flex;justify-content:space-between">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort" placeholder="请输入排序"></el-input>
          </el-form-item> 
          <el-form-item v-if="ruleForm.type == 1" label="分类名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入分类名称"></el-input>
          </el-form-item> 
          <el-form-item v-if="ruleForm.type == 2" label="选择品牌" prop="brand_id">
            <el-select v-model="ruleForm.brand_id" clearable filterable placeholder="请选择品牌">
              <el-option
               v-for="(item,index) in modaloptions.brand" :key="index"
               :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span @click="addbrands()" style="float:right;color:#409EFF;cursor: pointer;">自定义品牌</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="resetForm()">取 消</el-button>
      <el-button size="small" type="primary" @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)">确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "addbrand",
  data() {
    var checkCate_id = (rule, value, callback) => {
      if (this.modaloptions.cate.length == 0) {
        return callback(new Error('请先添加上级分类'));
      }else if (!value) {
        return callback(new Error('请选择上级'));
      }else{
        callback()
      }
    };
    return {
      rules: {
          type: [
            { required: true, message: '请输入选择类型', trigger: 'change' },
          ],
          name: [
            { required: true, message: '请输入名称', trigger: ['blur','change'] },
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: ['blur','change'] },
          ],
          cate_id: [
            { required: true,validator:checkCate_id, trigger: ['blur','change'] },
          ],
          brand_id: [
            { required: true, message: '请选择品牌', trigger: ['blur','change'] }
          ],
        }      
    };
  },
  props: {
    Add_brand: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    modaloptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Input: {
      type: Array,
      default: () => {
        return [];
      },
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    searchKeyBlur(e, formName, type) {
      // 代表触发 formName 表单所对应 type 属性的规则 
      this.$refs[formName].validateField(type) 
    },
    handleClose() {
      this.$emit("update:Add_brand", false);
    },
    resetForm() {
      this.$emit("update:Add_brand", false);
    },
    input(e){
      this.$forceUpdate();
    },
    change(enName, e, DialogTitle) {
      this.$emit("hide", { enName: enName, e: e, DialogTitle: DialogTitle });
    },
    focus(row, item) {
      this.$emit("Selectfocus", { row: row, item: item });
    },
    addbrands(){
      this.$emit('addbrands')
    },
    submitForm(formName, name, DialogTitle) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("save", {
            row: this.ruleForm,
            tabPosition:this.tabPosition,
            checked:this.checked,
            name: name,
            DialogTitle: DialogTitle,
          });
          this.$emit("update:Add_brand", false);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>