cnhis-design-vue 3.1.40-beta.0 → 3.1.40-beta.10

package/es/components/table-filter/src/components/search-filter/SearchFilter.vue.js

@@ -0,0 +1,199 @@
+import { defineComponent, ref, computed, onBeforeUnmount, watch, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, normalizeStyle, createElementVNode, createTextVNode, mergeProps, createElementBlock, Fragment, createCommentVNode } from 'vue';
+import { NModal, NCard, NButton } from 'naive-ui';
+import { DataTypeEnums } from '../../types/enums.js';
+import SearchCondition from '../search-condition/SearchCondition.vue.js';
+import SearchConditionByApi from '../classify-filter/index.vue.js';
+import script from '../../../../../shared/components/SvgIcon/SvgIcon.vue.js';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
+
+const _hoisted_1 = { class: "svg-wrap" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchFilter",
+  props: {
+    visible: { type: Boolean, default: false },
+    modalTitle: { type: String, default: "\u8BBE\u7F6E\u5206\u7C7B" },
+    conditionList: { type: Array, default: () => [] },
+    searchFieldList: { type: Array, default: () => [] },
+    tableDataType: { type: String, default: "" },
+    filterApiConfig: { type: Object, default: () => ({}) }
+  },
+  emits: [
+    "cancelSaveAdd"
+  ],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    const addVisible = ref(props.visible);
+    const isChangeWindow = ref(false);
+    const modalWidth = ref("860px");
+    let bodyStyle = ref({
+      maxHeight: "496px",
+      height: "496px",
+      overflowY: "auto"
+    });
+    let conditionApiRef = ref(null);
+    let conditionSqlRef = ref(null);
+    let filterTimer = null;
+    const isApiFilter = computed(() => {
+      return props.tableDataType === DataTypeEnums.API;
+    });
+    onBeforeUnmount(() => {
+      clearTimer();
+    });
+    function init() {
+      clearTimer();
+      filterTimer = setTimeout(() => {
+        handleInitConditions();
+      }, 30);
+    }
+    function clearTimer() {
+      if (filterTimer)
+        clearTimeout(filterTimer);
+    }
+    function handleInitConditions() {
+      switch (props.tableDataType) {
+        case DataTypeEnums.API:
+          conditionApiRef && conditionApiRef.value.handleInitConditions();
+          break;
+        case DataTypeEnums.SQL:
+          conditionSqlRef && conditionSqlRef.value.handleInitConditions();
+          break;
+      }
+    }
+    function saveAdd() {
+      switch (props.tableDataType) {
+        case DataTypeEnums.API:
+          conditionApiRef && conditionApiRef.value.saveAdd();
+          break;
+        case DataTypeEnums.SQL:
+          conditionSqlRef && conditionSqlRef.value.saveAdd();
+          break;
+      }
+    }
+    function cancelSaveAdd() {
+      addVisible.value = false;
+      emits("cancelSaveAdd");
+      resetChangeWindow();
+      clearConditions();
+    }
+    function clearConditions() {
+      switch (props.tableDataType) {
+        case DataTypeEnums.API:
+          conditionApiRef && conditionApiRef.value.cancelSaveAdd();
+          break;
+        case DataTypeEnums.SQL:
+          conditionSqlRef && conditionSqlRef.value.cancelSaveAdd();
+          break;
+      }
+    }
+    function resetChangeWindow() {
+      modalWidth.value = "860px";
+      bodyStyle.value = {
+        height: "496px",
+        maxHeight: "496px",
+        overflowY: "auto"
+      };
+      isChangeWindow.value = false;
+    }
+    function changeModalWindow() {
+      isChangeWindow.value = !isChangeWindow.value;
+      let docHeight = document.body.clientHeight;
+      if (modalWidth.value === "860px") {
+        modalWidth.value = "100%";
+        bodyStyle.value.maxHeight = `${docHeight}px`;
+        bodyStyle.value.height = `${docHeight}px`;
+      } else {
+        modalWidth.value = "860px";
+        bodyStyle.value.maxHeight = "496px";
+        bodyStyle.value.height = "";
+      }
+    }
+    watch(
+      () => props.visible,
+      (val) => {
+        addVisible.value = val;
+        if (val) {
+          init();
+        }
+      }
+    );
+    expose({
+      cancelSaveAdd
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NModal), {
+        show: addVisible.value,
+        "onUpdate:show": _cache[0] || (_cache[0] = ($event) => addVisible.value = $event),
+        maskClosable: false,
+        width: modalWidth.value,
+        bodyStyle: unref(bodyStyle),
+        class: normalizeClass(["search-filter-modal-wrap standard-modal standard-modal-white", { "modal-screen": isChangeWindow.value }]),
+        closable: false,
+        centered: "",
+        onPositiveClick: saveAdd,
+        onNegativeClick: cancelSaveAdd
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(NCard), {
+            style: normalizeStyle({ width: modalWidth.value, ...unref(bodyStyle) }),
+            title: props.modalTitle,
+            bordered: false,
+            size: "huge",
+            role: "dialog",
+            "aria-modal": "true"
+          }, {
+            "header-extra": withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                createVNode(unref(script), {
+                  onClick: changeModalWindow,
+                  "icon-class": isChangeWindow.value ? "xitongtubiaodaohangtubiaozuixiaohua" : "xitongtubiaodaohangtubiaozuidahua"
+                }, null, 8, ["icon-class"]),
+                createVNode(unref(script), {
+                  "icon-class": "xitongtubiaodaohangtubiaoguanbi",
+                  onClick: cancelSaveAdd
+                })
+              ])
+            ]),
+            footer: withCtx(() => [
+              createVNode(unref(NButton), { onClick: cancelSaveAdd }, {
+                default: withCtx(() => [
+                  createTextVNode("\u53D6\u6D88")
+                ]),
+                _: 1
+              }),
+              createVNode(unref(NButton), {
+                type: "info",
+                onClick: saveAdd
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("\u4FDD\u5B58")
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              unref(isApiFilter) ? (openBlock(), createBlock(SearchConditionByApi, mergeProps({ key: 0 }, _ctx.$attrs, {
+                ref_key: "conditionApiRef",
+                ref: conditionApiRef,
+                conditionList: props.conditionList
+              }), null, 16, ["conditionList"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createCommentVNode(" SQL\u7B5B\u9009\u5206\u7C7B\u5F39\u7A97\u4E3B\u4F53\u5185\u5BB9 "),
+                createVNode(SearchCondition, mergeProps(_ctx.$attrs, {
+                  ref_key: "conditionSqlRef",
+                  ref: conditionSqlRef,
+                  conditionList: props.conditionList,
+                  searchFieldList: props.searchFieldList,
+                  filterApiConfig: __props.filterApiConfig
+                }), null, 16, ["conditionList", "searchFieldList", "filterApiConfig"])
+              ], 2112))
+            ]),
+            _: 1
+          }, 8, ["style", "title"])
+        ]),
+        _: 1
+      }, 8, ["show", "width", "bodyStyle", "class"]);
+    };
+  }
+});
+var SearchFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "SearchFilter.vue"]]);
+
+export { SearchFilter as default };