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

<template>
  <div class="from-content" style="width: 100%">
    <div class="InputSearch input" v-if="params && types == 'input'">
      <ElInput
        style="width: 100%"
        v-model="value"
        :placeholder="placeholder"
        @change="handleSearch"
      ></ElInput>
      <img src="./search.svg" @click="handleFormShow" />
    </div>
    <ElPopover
      v-else
      ref="PopoverRef"
      placement="bottom"
      popper-class="global-input-search-popover"
      :popperOptions="popperOptions"
      :visibleArrow="false"
      :width="this.width"
      trigger="click"
      @show="handleShow"
      style="width: 100%"
    >
      <div class="InputSearch" slot="reference" ref="ReferenceInputRef">
        <span>{{ placeholder }}</span>
        <img src="./search.svg" @click="handleFormShow" />
      </div>

      <div style="width: 100%; max-height: 360px">
        <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: "请点击右侧图标筛选",
    },
    valueData: {
      type: String,
    },
    params: {
      type: String,
    },
    queryParams: {
      type: Array,
    },
    formConfigOptions: {
      type: Object,
      default: null,
    },
    formList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      types: this.type,
      value: this.valueData,
      width: null,
      popperOptions: {
        popHideCallBack: () => {
          // console.log("---")
        },
      },
    };
  },
  emit: ["handleSearch"],
  computed: {
    getFormConfigOptions() {
      return {
        column: "1",
        labelWidth: "120px",
        ...this.formConfigOptions,
      };
    },
  },
  methods: {
    handleFormShow() {
      console.log(this.params, this.types);
      if (this.params) {
        if (this.types == "form") {
          this.types = "input";
        } else {
          this.types = "form";
        }
      } else {
        this.types = "form";
      }
      console.log(this.params, this.types);
    },
    handleShow() {
      if (this.width) return;

      this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width;
    },
    handleResetForm() {
      this.$refs.FormConfigRef?.reset();

      this.$refs.PopoverRef.doClose();

      this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData));
    },
    handleSearch() {
      if (this.types == "form") {
        this.$refs.FormConfigRef.validate()
          .then((result) => {
            this.$refs.PopoverRef.doClose();
            this.$emit("handleSearch", result);
          })
          .catch((err) => {
            console.log("catch");
          });
      } else {
        let params = {};
        params[this.params] = this.value;
        this.$emit("handleSearch", params);
      }
    },
  },
};
</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>