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

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const crud = require("../../hooks/crud.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");
const tdesignIconsVueNext = require("tdesign-icons-vue-next");
const webVue = require("@arco-design/web-vue");
require("@arco-design/web-vue/es/divider/style/css.js");
require("@arco-design/web-vue/es/space/style/css.js");
const index$1 = require("../form/index.js");
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",
  components: {
    TdButton: tdesignVueNext.Button,
    ClForm: index$1.default
  },
  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: crud$1
    } = core.useCore();
    const {
      style
    } = core.useTools();
    const Form = crud.useForm();
    const config = vue.reactive(vue.mergeProps(props, vue.inject("useSearch__options") || {}));
    async function search() {
      var _a;
      (_a = Form.value) == null ? void 0 : _a.submit((data) => {
        async function next(params) {
          return await crud$1.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 vue.createVNode(index$1.default, {
        "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: vue.createVNode(tdesignIconsVueNext.SearchIcon, null, null),
        reset: vue.createVNode(tdesignIconsVueNext.RefreshIcon, null, null),
        clear: vue.createVNode(tdesignIconsVueNext.DeleteTimeIcon, null, null)
      };
      return (_a = config.op) == null ? void 0 : _a.map((e) => {
        switch (e) {
          case "search":
          case "reset":
          case "clear":
            return vue.h(tdesignVueNext.Button, {
              theme: e === "search" ? "primary" : "default",
              variant: e === "search" ? "base" : "outline",
              size: style.size,
              style: "margin:0",
              onClick: fns[e]
            }, {
              default: () => crud$1.dict.label[e],
              icon: () => {
                return icons[e];
              }
            });
          default:
            return e ?? "";
        }
      });
    }
    expose({
      search,
      reset,
      clear,
      Form
    });
    vue.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 vue.createVNode("div", {
        "class": "cl-search"
      }, [vue.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`
        }
      }, [vue.createVNode(webVue.Row, {
        "align": "center"
      }, {
        default: () => {
          var _a2;
          return [vue.createVNode(webVue.Col, {
            "flex": "1"
          }, _isSlot(_slot = renderForm()) ? _slot : {
            default: () => [_slot]
          }), vue.createVNode(webVue.Space, {
            "direction": (_a2 = config.props) == null ? void 0 : _a2.buttonLayout,
            "size": 16,
            "style": "margin-left:8px"
          }, _isSlot(_slot2 = renderFooter()) ? _slot2 : {
            default: () => [_slot2]
          })];
        }
      })])]);
    };
  }
});
exports.default = index;