jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/InputSearch/index.vue

<template>
  <div class="from-content" style="width: 100%">
    <!-- <div ref="mask" style="position: fixed; z-index: 9999999; left: 0; top:0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5);" @click.prevent="onClickMask" v-if="visible"></div> -->
    <ElPopover
      ref="PopoverRef"
      placement="bottom"
      popper-class="global-input-search-popover"
      :popperOptions="popperOptions"
      :width="this.width"
      trigger="manual"
      v-model="visible"
      @show="handleShow"
      style="width: 100%"
    >
      <div
        class="InputSearch input"
        v-if="params && types == 'input'"
        slot="reference"
        ref="ReferenceInputRef"
      >
        <ElInput
          style="width: 100%"
          v-model="value"
          :placeholder="placeholder"
          clearable
          @keyup.enter.native="handleSearch"
        ></ElInput>
        <img src="./search.svg" v-show="!disable" @click="onOpenPop" />
      </div>
      <div
        class="InputSearch"
        v-else
        slot="reference"
        ref="ReferenceInputRef"
        @click="onOpenPop"
      >
        <span>{{ placeholder }}</span>
        <img src="./search.svg" />
      </div>

      <div style="width: 100%; max-height: 360px" v-show="visible">
        <slot>
          <Form
            v-if="formList && formList.length"
            class="form"
            ref="FormConfigRef"
            :formList="formList"
            v-bind="getFormConfigOptions"
          />
          <!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> -->
          <div v-else class="no-data">暂无数据</div>
        </slot>

        <div class="footer">
          <Button
            style="background-color: rgba(0, 179, 204, 0.3)"
            @click.native="handleResetForm"
          >
            重置
          </Button>
          <Button @click.native="handleSearch"> 搜索 </Button>
        </div>
      </div>
    </ElPopover>
  </div>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import { cloneDeep } from "lodash";

export default {
  name: "InputSearch",
  components: {
    Button,
    Form,
  },
  props: {
    // 表单类型
    type: {
      type: String,
      default: "form",
    },
    placeholder: {
      type: String,
      default: "请点击右侧图标筛选",
    },
    // 是否禁用图标仅type为 input时有效
    disable: {
      type: Boolean,
      default: false,
    },
    // 搜索参数，仅type为 input时有效
    params: {
      type: String,
    },
    formConfigOptions: {
      type: Object,
      default: null,
    },
    formList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isClickedBtn: false,
      visible: false,
      types: this.type,
      value: "",
      width: null,
      popperOptions: {
        popHideCallBack: () => {
          // console.log("---")
        },
      },
    };
  },
  emit: ["handleSearch", "handleResetForm"],
  computed: {
    getFormConfigOptions() {
      return {
        column: "1",
        labelWidth: "120px",
        ...this.formConfigOptions,
      };
    },
  },
  mounted() {
    // document.getElementById("app")
    document.addEventListener(
      "click",
      () => {
        if (!this.isClickedBtn) {
          setTimeout(() => {
            this.visible = false;
          }, 100);
        }
        this.isClickedBtn = false;
      },
      false
    );
  },

  methods: {
    onOpenPop() {
      this.isClickedBtn = true;
      this.visible = !this.visible;
    },
    onClickMask() {
      this.visible = false;
    },
    handleShow() {
      if (this.width) return;

      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width;
    },
    handleResetForm() {
      if(this.params && this.types == 'input'){
        this.value = "";
      }
      // this.visible = true;
      this.$refs.FormConfigRef?.reset();
      this.$refs.FormConfigRef?.$refs.ElFormRef.resetFields();
      // this.$refs.PopoverRef.doClose();
      
      this.$emit(
        "handleSearch",
        cloneDeep(this.$refs.FormConfigRef?.formData),
        "reset"
        );
    },
    async handleSearch(value) {
      if (this.types === "input") {
        let params = {};
        params[this.params] = this.value;
        let result = {};
        if (!this.disable) {
          await this.$refs.FormConfigRef.validate()
            .then((res) => {
              result = res;
              this.$refs.PopoverRef.doClose();
            })
            .catch((err) => {
              console.log("catch");
            });
        }

        let resultParams = { ...result, ...params };
        this.$emit("handleSearch", resultParams, "search");
      } else {
        this.$refs.FormConfigRef.validate()
          .then((result) => {
            this.$refs.PopoverRef.doClose();
            this.$emit("handleSearch", result, "search");
          })
          .catch((err) => {
            console.log("catch");
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.InputSearch {
  width: 100%;
  height: 26px;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%) !important;
  color: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 15px;
  padding-right: 9px;
  cursor: pointer;

  font-size: 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 14px;
}
.input ::v-deep .el-input__inner {
  background: none;
  height: auto !important;
  font-size: 12px;
  padding: 0px 0;
  line-height: 14px;
}
::v-deep .el-input__inner::placeholder {
  font-size: 12px;
}
</style>