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

import { defineComponent, reactive, mergeProps, inject, onMounted, createVNode, isVNode, h } from "vue";
import { useForm } from "../../hooks/crud.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 } from "tdesign-vue-next";
import { SearchIcon, RefreshIcon, DeleteTimeIcon } from "tdesign-icons-vue-next";
import { Row, Col, Space } from "@arco-design/web-vue";
import "@arco-design/web-vue/es/divider/style/css.js";
import "@arco-design/web-vue/es/space/style/css.js";
import ClForm from "../form/index.mjs";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const index = /* @__PURE__ */ defineComponent({
  name: "cl-search",
  components: {
    TdButton: Button,
    ClForm
  },
  props: {
    /** 表单值 */
    data: {
      type: Object
    },
    /** 表单协议 */
    schema: {
      type: Object
    },
    /** 协议表达式作用域 */
    scope: Object,
    /** 注册组件列表 */
    registerComponents: Object,
    /** 副作用逻辑，用于实现各种联动逻辑 */
    formEffects: Function,
    /** 表单配置项 */
    props: Object,
    /** 操作按钮 */
    op: {
      type: Array,
      default: () => ["clear", "reset", "search"]
    },
    /** 搜索钩子 */
    onSearch: Function,
    /** 搜索钩子 */
    onClear: Function,
    /** 搜索钩子 */
    onReset: Function,
    formRow: {
      type: Object,
      default: () => {
        return {
          style: "width:100%;margin:0;",
          gutter: [16, 16],
          justify: "start",
          align: "start",
          div: false,
          wrap: true
        };
      }
    }
  },
  setup(props, {
    expose,
    emit,
    slots
  }) {
    const {
      crud
    } = useCore();
    const {
      style
    } = useTools();
    const Form = useForm();
    const config = reactive(mergeProps(props, inject("useSearch__options") || {}));
    async function search() {
      var _a;
      (_a = Form.value) == null ? void 0 : _a.submit((data) => {
        async function next(params) {
          return await crud.refresh({
            page: 1,
            ...params
          });
        }
        if (config.onSearch) {
          config.onSearch(data, {
            next
          });
        } else {
          next(data);
        }
      });
    }
    function reset() {
      var _a;
      const form = (_a = Form.value) == null ? void 0 : _a.reset();
      if (config.onReset) {
        config.onReset(form);
      }
      emit("reset", form);
    }
    function clear() {
      var _a;
      const form = (_a = Form.value) == null ? void 0 : _a.clear();
      if (config.onClear) {
        config.onClear(form);
      }
      emit("clear", form);
    }
    function renderForm() {
      return createVNode(ClForm, {
        "ref": Form,
        "layout": "horizontal",
        "inner": true,
        "inline": true,
        "formEffects": props.formEffects
      }, {
        ...slots,
        default: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      });
    }
    function renderFooter() {
      var _a;
      const fns = {
        search,
        reset,
        clear
      };
      const icons = {
        search: createVNode(SearchIcon, null, null),
        reset: createVNode(RefreshIcon, null, null),
        clear: createVNode(DeleteTimeIcon, null, null)
      };
      return (_a = config.op) == null ? void 0 : _a.map((e) => {
        switch (e) {
          case "search":
          case "reset":
          case "clear":
            return h(Button, {
              theme: e === "search" ? "primary" : "default",
              variant: e === "search" ? "base" : "outline",
              size: style.size,
              style: "margin:0",
              onClick: fns[e]
            }, {
              default: () => crud.dict.label[e],
              icon: () => {
                return icons[e];
              }
            });
          default:
            return e ?? "";
        }
      });
    }
    expose({
      search,
      reset,
      clear,
      Form
    });
    onMounted(() => {
      var _a;
      (_a = Form.value) == null ? void 0 : _a.open({
        op: {
          hidden: true
        },
        props: config.props,
        schema: config.schema || {},
        scope: config.scope || {},
        effects: config.effects || void 0,
        registerComponents: config.registerComponents || {},
        form: config.data || {},
        isReset: false
      });
    });
    return () => {
      var _a, _b, _c;
      let _slot, _slot2;
      return createVNode("div", {
        "class": "cl-search"
      }, [createVNode("div", {
        "class": "cl-search__container",
        "style": {
          marginLeft: `-${(((_c = (_b = (_a = config.props) == null ? void 0 : _a.formRow) == null ? void 0 : _b.gutter) == null ? void 0 : _c[0]) ?? 16) / 2}px`
        }
      }, [createVNode(Row, {
        "align": "center"
      }, {
        default: () => {
          var _a2;
          return [createVNode(Col, {
            "flex": "1"
          }, _isSlot(_slot = renderForm()) ? _slot : {
            default: () => [_slot]
          }), createVNode(Space, {
            "direction": (_a2 = config.props) == null ? void 0 : _a2.buttonLayout,
            "size": 16,
            "style": "margin-left:8px"
          }, _isSlot(_slot2 = renderFooter()) ? _slot2 : {
            default: () => [_slot2]
          })];
        }
      })])]);
    };
  }
});
export {
  index as default
};