erp-el-element/CommonInput/MoreClass.vue

<!-- 分类传值 -->
<!-- input: [{
  lable: "分类",------------------------------------输入框名称（选填）
  type: "el-select",--------------------------------输入框类型（el-inpit,el-select组件没用到但最好必填）
  enName: "cate_id",--------------------------------返回值与model双向绑定（必填)
  placeholder: "请选择机器类型",---------------------输入框占位文本（选填）
  size: "small",------------------------------------输入框大小（选填）
  show: true,---------------------------------------是否展示（必填）
  filterable: true,---------------------------------是否可搜索（选填）
  clearable: true,----------------------------------是否可清除（选填）
  classifiable: true,-------------------------------是否分类，使用组件必填（必填）
  disabled: false,----------------------------------是否禁用（选填）
  loading: false,-----------------------------------加载效果（选填）
  options: [],--------------------------------------输入框下拉的值，父组件调用接口传递
}] -->
<template>
  <div class="machinemore">
    <el-popover
      placement="bottom"
      :offset="90"
      :width="width"
      v-model="classvisible"
      trigger="manual"
      popper-class="machine-box"
    >
      <el-form label-position="top" :inline="true">
        <el-row :gutter="10">
          <el-col :span="12" v-for="(item, index) in ClassData" :key="index">
            <el-form-item
              :label="item.lable"
              :prop="item.prop"
              v-show="item.show"
            >
              <el-select
                v-model="formLabelAlign[item.enName]"
                :size="item.size"
                :placeholder="item.placeholder"
                :clearable="item.clearable"
                :filterable="item.filterable"
                :disabled="item.disabled"
                v-loading="item.loading"
                @change="SelectChange(item, formLabelAlign[item.enName])"
                @clear="Selectclear()"
              >
                <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btnbox1">
        <el-button size="mini" plain @click="CancelClass">取消</el-button>
        <el-button size="mini" type="primary" plain @click="SearchClass"
          >查询</el-button
        >
      </div>
      <el-input
        readonly
        slot="reference"
        v-model="classval"
        :placeholder="Title"
        :size="size"
        :disabled="disabled"
        clearable
        @focus="FocusInput"
        @change="changeInput"
      ></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  name:"erpMoreClass",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    width: {
      type: String,
      default: "450",
    },
    Title: {
      type: String,
      default: "请选择分类/品牌/型号",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      classvisible: false, //机器分类更多弹出框
      classval: "", //分类-input回显文本
      result: [],
    };
  },
  computed: {
    //分类-需要合并的
    ClassData() {
      if (!this.data) return;
      return this.data.filter((item) => item.classifiable);
    },
  },
  methods: {
    //———————————————————————— 分类input
    // 获取焦点
    FocusInput() {
      this.classvisible = true;
    },
    // 改变值
    changeInput() {},
    //清空
    ClearInput() {
      this.classval = "";
      this.classvisible = false;
      this.$emit("resetfrom");
    },
    //———————————————————————— 分类select
    //选择
    SelectChange(item, val) {
      this.$emit("SelectChange", item);
      this.result = this.result.filter((e) => e);
      const selectedOption = item.options.find((i) => i.value === val);
      if (selectedOption) {
        selectedOption.enName = item.enName;
      }
      const index = this.result.findIndex((e) => e.enName === item.enName);
      if (index >= 0) {
        if (this.ClassData.every((e) => e.options.length)) {
          this.result.splice(index, 1, selectedOption);
        } else {
          this.result.splice(index, this.ClassData.length, selectedOption);
        }
      } else {
        this.result.push(selectedOption);
      }
      this.classval = this.result
        .filter((e) => e)
        .map((e) => e.label)
        .join("/");
    },
    //清空
    Selectclear() {},
    //———————————————————————— 分类弹出框
    //分类查询
    SearchClass() {
      this.$emit("SearchClass");
    },
    //取消
    CancelClass() {
      this.classvisible = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.machinemore {
  width: 230px;
}
.machine-box {
  height: 275px !important;
  display: flex;
  flex-wrap: wrap;

  .machine {
    margin-bottom: 5px;
  }

  .btnbox1 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .el-form {
    width: 100%;
  }
  .el-form-item {
    width: 100%;
    margin: 0px;
  }
  .el-select {
    width: 100%;
  }
}

::v-deep .el-form-item__label {
  padding: 0px !important;
  height: 20px;
  line-height: 20px;
}
::v-deep .el-form-item__content {
  line-height: 32px;
}
::v-deep .el-loading-spinner {
  height: 32px;
  margin-top: -15px;
  .circular {
    height: 26px !important;
    width: 26px !important;
  }
}
</style>