@zhsz/cool-design-crud/es/components/search-key/index.mjs

import { defineComponent, ref, computed, watch, createVNode, withDirectives, vShow, isVNode } from "vue";
import "../../utils/test.mjs";
import { useCore, useTools } from "../../hooks/core.mjs";
import "clone-deep";
import "array.prototype.flat";
import "merge";
import "@formily/core";
import "lodash-es";
import "../../hooks/table.mjs";
import { Button, Input, Select, Option } from "tdesign-vue-next";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const index = /* @__PURE__ */ defineComponent({
  name: "cl-search-key",
  components: {
    TdButton: Button,
    TdInput: Input,
    TdSelect: Select,
    TdOption: Option
  },
  props: {
    // 绑定值
    modelValue: String,
    // 选中字段
    field: {
      type: String,
      default: "keyWord"
    },
    // 字段列表
    fieldList: {
      type: Array,
      default: () => []
    },
    // 搜索时的钩子
    onSearch: Function,
    // 输入框占位内容
    placeholder: String,
    // 宽度
    width: {
      type: String,
      default: "300px"
    }
  },
  emits: ["update:modelValue", "change", "field-change"],
  setup(props, {
    emit,
    expose
  }) {
    const {
      crud
    } = useCore();
    const {
      style
    } = useTools();
    const selectField = ref(props.field);
    const loading = ref(false);
    const placeholder = computed(() => {
      if (props.placeholder) {
        return props.placeholder;
      } else {
        const item = props.fieldList.find((e) => e.value === selectField.value);
        if (item) {
          return crud.dict.label.placeholder + item.label;
        } else {
          return crud.dict.label.searchKey;
        }
      }
    });
    const value = ref("");
    watch(() => props.modelValue, (val) => {
      value.value = val || "";
    }, {
      immediate: true
    });
    let lock = false;
    function search() {
      if (!lock) {
        const params = {};
        props.fieldList.forEach((e) => {
          params[e.value] = void 0;
        });
        const next = async (newParams) => {
          loading.value = true;
          await crud.refresh({
            page: 1,
            ...params,
            [selectField.value]: value.value || void 0,
            ...newParams
          });
          loading.value = false;
        };
        if (props.onSearch) {
          props.onSearch(params, {
            next
          });
        } else {
          next();
        }
      }
    }
    function onEnter() {
      search();
    }
    function onBlur(val) {
      search();
      lock = true;
      setTimeout(() => {
        lock = false;
      }, 300);
      emit("update:modelValue", val);
      emit("change", val);
    }
    function onFieldChange() {
      emit("field-change", selectField.value);
      value.value = "";
    }
    expose({
      search
    });
    return () => {
      let _slot;
      return createVNode("div", {
        "class": "cl-search-key"
      }, [withDirectives(createVNode(Select, {
        "class": "cl-search-key__select",
        "filterable": true,
        "size": style.size,
        "modelValue": selectField.value,
        "onUpdate:modelValue": ($event) => selectField.value = $event,
        "onChange": onFieldChange
      }, _isSlot(_slot = props.fieldList.map((e, i) => createVNode(Option, {
        "key": i,
        "label": e.label,
        "title": e.label,
        "value": e.value
      }, null))) ? _slot : {
        default: () => [_slot]
      }), [[vShow, props.fieldList.length > 0]]), createVNode("div", {
        "class": "cl-search-key__wrap",
        "style": {
          width: props.width
        }
      }, [createVNode(Input, {
        "modelValue": value.value,
        "onUpdate:modelValue": ($event) => value.value = $event,
        "size": style.size,
        "placeholder": placeholder.value,
        "onEnter": onEnter,
        "onBlur": onBlur,
        "clearable": true
      }, null), createVNode(Button, {
        "size": style.size,
        "theme": "primary",
        "onClick": search
      }, {
        default: () => [crud.dict.label.search]
      })])]);
    };
  }
});
export {
  index as default
};