erp-el-element/CommonInput/Compound.vue

<template>
  <div>
    <el-form label-position="top" :inline="true" class="popover">
      <el-select
        v-model="select"
        placeholder="请选择"
        class="dateselect"
        :size="size"
        @keydown.enter.native="search"
        @change="changeText"
      >
        <template slot="prefix">
          {{ (PopUp.find((e) => e.enName == select) || {}).lable }}
        </template>
        <el-option
          v-for="item in PopUp"
          :key="item.enName"
          :label="item.lable"
          :value="item.enName"
        >
        </el-option>
      </el-select>

      <el-popover
        placement="bottom"
        trigger="manual"
        ref="popover"
        popper-class="popperOptions"
        v-model="popBox"
      >
        <el-input
          v-model="textarea"
          type="textarea"
          :rows="12"
          placeholder="一行一项，最多支持200行"
          resize="none"
          @input="changeText('textarea')"
        />
        <el-divider class="divider"></el-divider>
        <div class="btnbox">
          <div>
            <el-button size="mini" @click="close">关闭</el-button>
          </div>
          <div>
            <el-button size="mini" @click="clear">清空</el-button>
            <el-button size="mini" type="primary" plain @click="search"
              >查询</el-button
            >
          </div>
        </div>
        <el-input
          slot="reference"
          v-model="value"
          :size="size"
          class="compound-input"
          :placeholder="placeholder"
          @input="changeText('value')"
          @keydown.enter.native="search"
        >
          <i
            slot="suffix"
            class="iconfont iconicon-piliangcaozuo imeiicondefault"
            :class="popBox ? 'imeiiconActive' : 'imeiicon'"
            style="font-size: 12px; margin-top: 4px"
            @click.prevent="eject"
          ></i>
        </el-input>
      </el-popover>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "small",
    },
    default: {
      default: null,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {},
  data() {
    return {
      select: this.default,
      value: "",
      textarea: "",
      values: "",
      popBox: false,
      placeholder: "请输入内容",
    };
  },
  computed: {
    // 带弹出框
    PopUp() {
      if (!this.data) return;
      let arr = [];
      arr = this.data.filter((item) => item.isPopUp && item.show);
      if (arr && arr.length) {
        arr.findIndex((e) => e.enName == this.select) == -1
          ? this.$set(this, "select", arr[0].enName)
          : "";
      }
      return arr;
    },
  },
  methods: {
    changeText(mark) {
      if (mark) {
        const rep = /[^\s]+/g;
        let values = "";
        if (mark == "textarea") {
          this.value = "";
          values = this._.words(this.textarea, rep).join();
        } else {
          this.textarea = "";
          values = this.value;
        }
        this.values = values;
      }
      this.$emit("CompoundSearch", this.select, this.values);
    },
    //弹出层
    eject() {
      this.popBox = !this.popBox;
    },
    //清除
    clear() {
      this.$set(this, "textarea", "");
      this.$set(this, "value", "");
      this.$set(this, "values", "");
      this.disable = false;
    },
    //关闭弹出层
    close() {
      this.popBox = false;
    },
    //回车事件
    search() {
      this.close();
      this.$emit("SearchCompound");
    },
  },
};
</script>

<style scoped lang='scss'>
.popover {
  width: 330px;
  display: flex;
  line-height: 0;
  span {
    width: 100%;
  }
}
::v-deep .dateselect {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 105px;
  max-width: 155px;
  color: #fff;
  text-align: start;
  .el-input__prefix {
    position: relative;
    top: 0;
    left: 0;
    padding: 0 35px 0 18px;
    box-sizing: border-box;
    color: #606266;
    visibility: hidden;
  }
  .el-input {
    height: 100%;
  }
  .el-input__inner {
    padding: 0 15px;
    border-radius: 4px 0 0 4px;
    z-index: 1;
  }
  .el-input__inner:hover {
    z-index: 1;
  }
  .el-input__suffix {
    display: flex;
    align-items: flex-start;
    z-index: 50;
  }
  .el-input__inner {
    position: absolute;
    left: 0;
  }
}
::v-deep .compound-input {
  flex-grow: 1;
  margin-left: -1px;
  .imeiicondefault {
    padding: 5px;
    border-radius: 4px;
    background: #f0f2f5;
    cursor: pointer;
  }

  .imeiiconActive {
    color: #409eff;
    background: #e9f1fc;
  }
  .el-input__inner {
    position: relative;
    border-radius: 0 4px 4px 0 !important;
  }
  .el-input__inner:hover {
    position: relative;
    z-index: 1;
  }
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    position: relative;
    z-index: 1;
  }
  .el-input__suffix {
    display: flex;
    align-items: center;
    z-index: 50;
  }
}
.btnbox {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  border: none;
}
.divider {
  margin: 0;
}
::v-deep .el-textarea__inner {
  border: none;
}
</style>