@zhsz/cool-design-crud/lib/components/search-key/index.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../utils/test.js");
const core = require("../../hooks/core.js");
require("clone-deep");
require("array.prototype.flat");
require("merge");
require("@formily/core");
require("lodash-es");
require("../../hooks/table.js");
const tdesignVueNext = require("tdesign-vue-next");
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const index = /* @__PURE__ */ vue.defineComponent({
  name: "cl-search-key",
  components: {
    TdButton: tdesignVueNext.Button,
    TdInput: tdesignVueNext.Input,
    TdSelect: tdesignVueNext.Select,
    TdOption: tdesignVueNext.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
    } = core.useCore();
    const {
      style
    } = core.useTools();
    const selectField = vue.ref(props.field);
    const loading = vue.ref(false);
    const placeholder = vue.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 = vue.ref("");
    vue.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 vue.createVNode("div", {
        "class": "cl-search-key"
      }, [vue.withDirectives(vue.createVNode(tdesignVueNext.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) => vue.createVNode(tdesignVueNext.Option, {
        "key": i,
        "label": e.label,
        "title": e.label,
        "value": e.value
      }, null))) ? _slot : {
        default: () => [_slot]
      }), [[vue.vShow, props.fieldList.length > 0]]), vue.createVNode("div", {
        "class": "cl-search-key__wrap",
        "style": {
          width: props.width
        }
      }, [vue.createVNode(tdesignVueNext.Input, {
        "modelValue": value.value,
        "onUpdate:modelValue": ($event) => value.value = $event,
        "size": style.size,
        "placeholder": placeholder.value,
        "onEnter": onEnter,
        "onBlur": onBlur,
        "clearable": true
      }, null), vue.createVNode(tdesignVueNext.Button, {
        "size": style.size,
        "theme": "primary",
        "onClick": search
      }, {
        default: () => [crud.dict.label.search]
      })])]);
    };
  }
});
exports.default = index;