@ibiz-template/vue3-components 0.7.34 → 0.7.37-alpha.5

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-design/filter-portlet-design.cjs

@@ -0,0 +1,343 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+require('./filter-portlet-design.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizFilterPortletDesign = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFilterPortletDesign",
+  props: {
+    context: {
+      type: Object,
+      required: true
+    },
+    viewParams: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    dashboardStyle: {
+      type: String
+    },
+    dismiss: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ["lisTSelect", "formChange"],
+  setup(props) {
+    const ns = vue3Util.useNamespace("filter-portlet-design");
+    const loaded = vue.ref(false);
+    const loadding = vue.ref(false);
+    const formRef = vue.ref();
+    const rules = vue.reactive({
+      title: [{
+        required: true,
+        message: ibiz.i18n.t("control.dashboard.filterPortletDesign.ctrlTitleError"),
+        trigger: "blur"
+      }]
+    });
+    const formData = vue.reactive({
+      title: "",
+      selectAll: true,
+      items: []
+    });
+    const condition = vue.ref({});
+    const titleMaxLength = 32;
+    const model = vue.ref();
+    let appPortlets = [];
+    let allFilters = [];
+    const portletParams = vue.ref({});
+    const schemaFields = vue.ref([]);
+    const jsonSchemaMap = /* @__PURE__ */ new Map();
+    const conditionMap = /* @__PURE__ */ new Map();
+    const checkBoxList = vue.ref([]);
+    const getFilters = () => {
+      let result = [];
+      const app = ibiz.hub.getApp(props.context.srfappid);
+      appPortlets = app.model.appPortlets || [];
+      if (appPortlets.length > 0) {
+        result = appPortlets.filter((x) => {
+          if (x.control) {
+            return x.control.controlType === "PORTLET" && x.control.portletType === "FILTER";
+          }
+        });
+      }
+      return result;
+    };
+    const getJsonSchema = async (appDataEntityId) => {
+      if (!appDataEntityId) {
+        return;
+      }
+      if (!jsonSchemaMap.has(appDataEntityId)) {
+        loadding.value = true;
+        schemaFields.value = await ibiz.util.jsonSchema.getEntitySchemaFields(appDataEntityId, props.context, props.viewParams);
+        loadding.value = false;
+        jsonSchemaMap.set(appDataEntityId, schemaFields.value);
+      }
+      schemaFields.value = jsonSchemaMap.get(appDataEntityId);
+    };
+    const setCheckBox = () => {
+      checkBoxList.value = runtime.filterPortletByID(model.value.id, props.context, props.items, props.dashboardStyle === "BIREPORTDASHBOARD" || props.dashboardStyle === "BIREPORTDASHBOARD2");
+    };
+    const init = async () => {
+      allFilters = getFilters();
+      if (props.items) {
+        formData.items = props.items.map((x) => x.id);
+      }
+      if (props.filter) {
+        const item = allFilters.find((x) => x.id === props.filter.model.id);
+        if (item) {
+          model.value = core.clone(item.control);
+          formData.title = props.filter.config.srftitle;
+          portletParams.value = item.portletParams || {};
+          const selectAll = props.filter.filterConfig.scope === "all";
+          if (!selectAll) {
+            formData.selectAll = false;
+            formData.items = props.filter.filterConfig.scopedata.split(",");
+          }
+          condition.value = props.filter.searchConds;
+        }
+      }
+      if (!model.value && allFilters.length > 0) {
+        model.value = core.clone(allFilters[0].control);
+        formData.title = model.value.title || "";
+        portletParams.value = allFilters[0].portletParams || {};
+      }
+      if (model.value) {
+        await getJsonSchema(model.value.appDataEntityId);
+        setCheckBox();
+      }
+      loaded.value = true;
+    };
+    init();
+    const calcConfig = () => {
+      const result = {};
+      if (formData.selectAll) {
+        result.scope = "all";
+      } else {
+        result.scope = "custom";
+        const selectKeys = [];
+        checkBoxList.value.forEach((item) => {
+          if (formData.items.includes(item.id)) {
+            selectKeys.push(item.id);
+          }
+        });
+        result.scopedata = selectKeys.join(",");
+      }
+      if (Object.keys(portletParams.value).length > 0) {
+        result.scopetag = portletParams.value.filtergroup;
+      }
+      return result;
+    };
+    const handleListItemClick = (item, data, disabled) => {
+      if (disabled) {
+        return;
+      }
+      model.value = core.clone(item);
+      formData.title = item.title || "";
+      portletParams.value = data;
+      getJsonSchema(item.appDataEntityId);
+      if (conditionMap.has(item.appDataEntityId)) {
+        condition.value = conditionMap.get(item.appDataEntityId);
+      } else {
+        condition.value = {};
+      }
+      setCheckBox();
+    };
+    const handleConditionChange = (group) => {
+      condition.value = group;
+      conditionMap.set(model.value.appDataEntityId, group);
+    };
+    const onSwitchChange = (value) => {
+      if (value && props.items) {
+        formData.items = props.items.map((x) => x.id);
+      }
+    };
+    const handleCancel = () => {
+      props.dismiss({
+        ok: false
+      });
+    };
+    const handleConfirm = () => {
+      if (!formRef.value) {
+        return;
+      }
+      formRef.value.validate((valid) => {
+        if (valid) {
+          const config = calcConfig();
+          const data = {
+            config,
+            model: Object.assign(model.value, {
+              title: formData.title
+            }),
+            searchconds: condition.value
+          };
+          props.dismiss({
+            ok: true,
+            data: [data]
+          });
+        }
+      });
+    };
+    const renderNoData = () => {
+      return vue.createVNode(vue.resolveComponent("iBizNoData"), {
+        "text": ibiz.i18n.t("control.common.currentNoData")
+      }, null);
+    };
+    const renderLeftList = () => {
+      if (!allFilters.length) {
+        return renderNoData();
+      }
+      return vue.createVNode("ul", {
+        "class": [ns.b("left-list")]
+      }, [allFilters.map((portlet) => {
+        var _a;
+        const item = portlet.control;
+        const data = portlet.portletParams || {};
+        let disabled = false;
+        if (props.filter && props.filter.id !== item.id) {
+          disabled = true;
+        }
+        return vue.createVNode("li", {
+          "class": [ns.be("left-list", "item"), ns.is("disabled", disabled), ns.is("actvie", item.id === ((_a = model.value) == null ? void 0 : _a.id))],
+          "title": item.title,
+          "onClick": () => handleListItemClick(item, data, disabled)
+        }, [item.title]);
+      })]);
+    };
+    const renderCheckBoxGroup = () => {
+      let _slot;
+      if (!checkBoxList.value) {
+        return;
+      }
+      const onlyAdd = checkBoxList.value.length > 0 && formData.items.length === 1;
+      return vue.createVNode(vue.resolveComponent("el-checkbox-group"), {
+        "class": [ns.b("checkbox"), ns.is("only-add", onlyAdd)],
+        "modelValue": formData.items,
+        "onUpdate:modelValue": ($event) => formData.items = $event,
+        "disabled": formData.selectAll
+      }, _isSlot(_slot = checkBoxList.value.map((item) => {
+        return vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "label": item.id
+        }, {
+          default: () => [item.title]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    const renderForm = () => {
+      if (!model.value) {
+        return null;
+      }
+      return vue.createVNode(vue.resolveComponent("el-form"), {
+        "ref": "formRef",
+        "model": formData,
+        "rules": rules,
+        "label-width": "auto",
+        "class": ns.b("right-form")
+      }, {
+        default: () => [vue.createVNode(vue.resolveComponent("el-form-item"), {
+          "required": true,
+          "label": ibiz.i18n.t("control.dashboard.filterPortletDesign.ctrlTitle"),
+          "prop": "title"
+        }, {
+          default: () => [vue.createVNode(vue.resolveComponent("el-input"), {
+            "modelValue": formData.title,
+            "onUpdate:modelValue": ($event) => formData.title = $event,
+            "maxlength": titleMaxLength,
+            "placeholder": ibiz.i18n.t("control.dashboard.filterPortletDesign.ctrlPlaceholder")
+          }, {
+            suffix: () => vue.createVNode("div", null, [formData.title.length, vue.createTextVNode(" / "), titleMaxLength])
+          })]
+        }), vue.createVNode(vue.resolveComponent("el-form-item"), {
+          "class": ns.be("right-form", "checks"),
+          "label": ibiz.i18n.t("control.dashboard.filterPortletDesign.checkTitle"),
+          "required": true,
+          "props": "items"
+        }, {
+          default: () => [vue.createVNode(vue.resolveComponent("el-switch"), {
+            "modelValue": formData.selectAll,
+            "onUpdate:modelValue": ($event) => formData.selectAll = $event,
+            "onChange": onSwitchChange
+          }, null), renderCheckBoxGroup()]
+        })]
+      });
+    };
+    const renderRightContent = () => {
+      return vue.createVNode("div", {
+        "class": [ns.b("right-content")]
+      }, [vue.createVNode("div", {
+        "class": [ns.be("right-content", "title")]
+      }, [ibiz.i18n.t("control.dashboard.filterPortletDesign.baseSet")]), renderForm()]);
+    };
+    const renderLeftContent = () => {
+      const title = props.filter ? ibiz.i18n.t("app.edit") : ibiz.i18n.t("app.newlyBuild");
+      return vue.createVNode("div", {
+        "class": [ns.b("left-content")]
+      }, [vue.createVNode("div", {
+        "class": ns.be("left-content", "title")
+      }, ["".concat(title, " ").concat(ibiz.i18n.t("control.dashboard.filterPortletDesign.filterTitle"))]), renderLeftList()]);
+    };
+    const renderCondition = () => {
+      return vue.withDirectives(vue.createVNode(vue.resolveComponent("iBizCustomFilterCondition"), {
+        "class": ns.b("condition"),
+        "context": props.context,
+        "params": props.viewParams,
+        "value": condition.value,
+        "schemaFields": schemaFields.value,
+        "onChange": handleConditionChange
+      }, null), [[vue.resolveDirective("loading"), loadding.value]]);
+    };
+    const renderFooter = () => {
+      let _slot2, _slot3;
+      return vue.createVNode("div", {
+        "class": ns.b("footer")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": handleCancel
+      }, _isSlot(_slot2 = ibiz.i18n.t("app.cancel")) ? _slot2 : {
+        default: () => [_slot2]
+      }), vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": handleConfirm
+      }, _isSlot(_slot3 = ibiz.i18n.t("app.confirm")) ? _slot3 : {
+        default: () => [_slot3]
+      })]);
+    };
+    return {
+      ns,
+      loaded,
+      formRef,
+      renderRightContent,
+      renderLeftContent,
+      renderCondition,
+      renderFooter
+    };
+  },
+  render() {
+    if (!this.loaded) {
+      return;
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("layout-left")]
+    }, [this.renderLeftContent()]), vue.createVNode("div", {
+      "class": [this.ns.e("layout-right")]
+    }, [this.renderRightContent(), this.renderCondition(), this.renderFooter()])]);
+  }
+});
+
+exports.IBizFilterPortletDesign = IBizFilterPortletDesign;

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-design/filter-portlet-design.css

@@ -0,0 +1 @@
+.ibiz-filter-portlet-design{--ibiz-filter-portlet-design-layout-left-width:260px;display:flex;width:100%;height:100%}.ibiz-filter-portlet-design__layout-left{width:var(--ibiz-filter-portlet-design-layout-left-width);background-color:var(--ibiz-color-bg-0);border-right:1px solid var(--ibiz-color-border)}.ibiz-filter-portlet-design__layout-right{display:flex;flex:1;flex-direction:column}.ibiz-filter-portlet-design-left-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-extra-tight) 0;font-size:var(--ibiz-font-size-header-6);line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-left-list{padding:0;padding:0 var(--ibiz-spacing-base-tight);margin:0;margin-top:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);list-style:none outside none;color-scheme:light;cursor:pointer;visibility:visible;unicode-bidi:isolate}.ibiz-filter-portlet-design-left-list__item{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-base-loose);margin-bottom:var(--ibiz-spacing-base-tight);overflow:hidden;line-height:var(--ibiz-height-control-default);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ibiz-border-radius-small);transition:background-color .3s,transform .3s}.ibiz-filter-portlet-design-left-list__item:last-child{margin-bottom:0}.ibiz-filter-portlet-design-left-list__item:hover{background-color:var(--ibiz-color-fill-0)}.ibiz-filter-portlet-design-left-list__item.is-actvie{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-primary-light-default)}.ibiz-filter-portlet-design-left-list__item.is-disabled{cursor:no-drop;background-color:transparent}.ibiz-filter-portlet-design-right-content{flex:auto}.ibiz-filter-portlet-design-right-content__title{height:var(--ibiz-height-control-default);padding:0 var(--ibiz-spacing-extra-loose);margin:var(--ibiz-spacing-tight) 0;line-height:var(--ibiz-height-control-default)}.ibiz-filter-portlet-design-right-form{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-filter-portlet-design-right-form__checks{position:relative}.ibiz-filter-portlet-design-right-form__checks .el-form-item__content{position:static}.ibiz-filter-portlet-design-right-form__checks .el-switch{position:absolute;top:0;right:0}.ibiz-filter-portlet-design-right-form .el-form-item{display:flex;flex-flow:column nowrap;margin-bottom:var(--ibiz-spacing-base)}.ibiz-filter-portlet-design-right-form .el-form-item .el-form-item__label-wrap{margin-left:0!important}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::before,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::before{display:none}.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::after,.ibiz-filter-portlet-design-right-form .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::after{margin-right:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-extra-tight);color:var(--el-color-danger);content:"*"}.ibiz-filter-portlet-design-right-form .el-select{width:100%}.ibiz-filter-portlet-design-checkbox__label{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked{cursor:not-allowed}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner{background-color:var(--el-checkbox-disabled-checked-input-fill);border-color:var(--el-checkbox-disabled-checked-input-border-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__inner::after{border-color:var(--el-checkbox-disabled-checked-icon-color)}.ibiz-filter-portlet-design-checkbox.is-only-add .el-checkbox.is-checked .el-checkbox__label{color:var(--el-disabled-text-color);cursor:not-allowed}.ibiz-filter-portlet-design-checkbox .ibiz-icon{padding-left:var(--ibiz-spacing-tight)}.ibiz-filter-portlet-design-checkbox .el-checkbox__label{display:flex;align-items:center;padding-left:0}.ibiz-filter-portlet-design-checkbox .el-checkbox{--el-checkbox-input-border:var(--el-border-width) var(--el-border-style) var(--ibiz-color-border);--el-checkbox-disabled-checked-input-fill:var(--ibiz-color-border);--el-checkbox-text-color:var(--ibiz-color-disabled-text)}.ibiz-filter-portlet-design-condition{padding:0 var(--ibiz-spacing-extra-loose);overflow:auto}.ibiz-filter-portlet-design-footer{display:flex;justify-content:flex-end;padding:var(--ibiz-spacing-base) var(--ibiz-spacing-extra-loose)}

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-design/index.cjs

@@ -0,0 +1,3 @@
+'use strict';
+
+"use strict";

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-item/filter-portlet-item.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./filter-portlet-item.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FilterPortletItem = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFilterPortletItem",
+  props: {
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      required: true
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    filterNode: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("filter-portlet-item");
+    const editorProvider = vue.ref(void 0);
+    const editor = vue.ref(void 0);
+    const data = vue.ref({
+      value: null,
+      valueOP: null,
+      nodeType: "FIELD",
+      field: props.field.appDEFieldId
+    });
+    const valueOPs = vue.computed(() => {
+      return ibiz.util.jsonSchema.getValueOPsByDataType(props.field.type);
+    });
+    const getEditor = async (valueOP) => {
+      const editorModel = ibiz.util.jsonSchema.getMockEditor(props.context, props.field, valueOP);
+      if (editorModel) {
+        editorProvider.value = await runtime.getEditorProvider(editorModel);
+        if (editorProvider.value) {
+          editor.value = await editorProvider.value.createController(editorModel, {
+            context: props.context,
+            params: props.params
+          });
+        }
+      }
+    };
+    const init = async () => {
+      if (props.filterNode) {
+        data.value = {
+          ...props.filterNode
+        };
+      }
+      getEditor(valueOPs.value[0].valueOP);
+    };
+    vue.watch(() => props.filterNode, () => {
+      init();
+    }, {
+      immediate: true
+    });
+    const onValueChange = (value) => {
+      data.value.value = value;
+      emit("change", data.value);
+    };
+    const onValueOPSelect = (valueOP) => {
+      data.value.valueOP = valueOP;
+      onValueChange(null);
+      getEditor(valueOP);
+    };
+    const renderEditor = () => {
+      if (editor.value) {
+        const component = vue.resolveComponent(editorProvider.value.formEditor);
+        return vue.h(component, {
+          value: data.value.value,
+          controller: editor.value,
+          onChange: (val, _name) => {
+            onValueChange(val);
+          }
+        });
+      }
+    };
+    const renderContent = () => {
+      let _slot;
+      return vue.createVNode("div", {
+        "class": ns.e("content")
+      }, [vue.createVNode("div", {
+        "class": ns.em("content", "option")
+      }, [vue.createVNode(vue.resolveComponent("el-select"), {
+        "model-value": data.value.valueOP,
+        "onChange": (valueOP) => {
+          onValueOPSelect(valueOP);
+        }
+      }, _isSlot(_slot = valueOPs.value.map((mode) => {
+        return vue.createVNode(vue.resolveComponent("el-option"), {
+          "key": mode.valueOP,
+          "value": mode.valueOP,
+          "label": mode.label
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      })]), vue.createVNode("div", {
+        "class": ns.em("content", "editor")
+      }, [renderEditor()])]);
+    };
+    return {
+      ns,
+      renderContent
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("header")
+    }, [vue.createVNode("span", {
+      "class": this.ns.em("header", "caption")
+    }, [this.field.caption])]), this.renderContent()]);
+  }
+});
+
+exports.FilterPortletItem = FilterPortletItem;

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet-item/filter-portlet-item.css

@@ -0,0 +1 @@
+.ibiz-filter-portlet-item{padding:var(--ibiz-spacing-base) var(--ibiz-spacing-extra-loose)}.ibiz-filter-portlet-item__header{display:flex;align-items:center;justify-content:space-between}.ibiz-filter-portlet-item__content--option{width:100%;padding:var(--ibiz-spacing-tight) 0}.ibiz-filter-portlet-item__content--option .el-select{width:100%}.ibiz-filter-portlet-item__content--editor{width:100%;padding:var(--ibiz-spacing-tight) 0}

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+var filterPortletItem = require('./filter-portlet-item/filter-portlet-item.cjs');
+require('./filter-portlet.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FilterPortlet = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizFilterPortlet",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: runtime.FilterPortletController,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a;
+    const c = props.controller;
+    const ns = vue3Util.useNamespace("portlet-".concat((_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()));
+    const handleReset = () => {
+      c.resetFilter();
+    };
+    const handleSearch = () => {
+      c.search();
+    };
+    const renderFilterItem = (filterNode, index) => {
+      const field = c.jsonSchemaFields.find((x) => x.appDEFieldId === filterNode.field);
+      if (field) {
+        return vue.h(filterPortletItem.FilterPortletItem, {
+          field,
+          filterNode,
+          context: c.context,
+          params: c.params,
+          onChange: (data) => {
+            c.state.filterNode.children[index] = data;
+          }
+        });
+      }
+    };
+    const renderFilter = () => {
+      if (!c.state.filterNode) {
+        return;
+      }
+      const children = c.state.filterNode.children || [];
+      return children.map((node, index) => {
+        return renderFilterItem(node, index);
+      });
+    };
+    return {
+      ns,
+      handleReset,
+      handleSearch,
+      renderFilter
+    };
+  },
+  render() {
+    let _slot, _slot2;
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    return vue.createVNode(vue.resolveComponent("iBizPortletLayout"), {
+      "controller": this.controller,
+      "class": classArr
+    }, {
+      default: () => [vue.createVNode("div", {
+        "class": this.ns.e("left")
+      }, [this.renderFilter()]), vue.createVNode("div", {
+        "class": this.ns.e("right")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": this.handleReset
+      }, _isSlot(_slot = ibiz.i18n.t("app.reset")) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": this.handleSearch
+      }, _isSlot(_slot2 = ibiz.i18n.t("app.search")) ? _slot2 : {
+        default: () => [_slot2]
+      })])]
+    });
+  }
+});
+
+exports.FilterPortlet = FilterPortlet;

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet.css

@@ -0,0 +1 @@
+.ibiz-portlet-filter__left{display:flex;flex-wrap:wrap;overflow:auto}.ibiz-portlet-filter__right{display:flex;align-items:flex-end;padding:var(--ibiz-spacing-base-tight)}.ibiz-portlet-filter .ibiz-portlet-layout-content{display:flex;justify-content:space-between}

package/lib/control/dashboard/portlet/filter-portlet/filter-portlet.provider.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FilterPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFilterPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new runtime.FilterPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+exports.FilterPortletProvider = FilterPortletProvider;

package/lib/control/dashboard/portlet/filter-portlet/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+var filterPortlet = require('./filter-portlet.cjs');
+var filterPortlet_provider = require('./filter-portlet.provider.cjs');
+var filterPortletDesign = require('./filter-portlet-design/filter-portlet-design.cjs');
+
+"use strict";
+const IBizFilterPortlet = vue3Util.withInstall(filterPortlet.FilterPortlet, function(v) {
+  v.component(filterPortlet.FilterPortlet.name, filterPortlet.FilterPortlet);
+  v.component(filterPortletDesign.IBizFilterPortletDesign.name, filterPortletDesign.IBizFilterPortletDesign);
+  runtime.registerPortletProvider("FILTER", () => new filterPortlet_provider.FilterPortletProvider());
+});
+
+exports.FilterPortlet = filterPortlet.FilterPortlet;
+exports.IBizFilterPortlet = IBizFilterPortlet;
+exports.default = IBizFilterPortlet;

package/lib/control/dashboard/portlet/index.cjs

@@ -10,6 +10,7 @@ var index$5 = require('./list-portlet/index.cjs');
 var index$6 = require('./html-portlet/index.cjs');
 var index$7 = require('./actionbar-portlet/index.cjs');
 var index$8 = require('./report-portlet/index.cjs');
+var index$9 = require('./filter-portlet/index.cjs');
 var containerPortlet = require('./container-portlet/container-portlet.cjs');
 var viewPortlet = require('./view-portlet/view-portlet.cjs');
 var menuPortlet = require('./menu-portlet/menu-portlet.cjs');
@@ -19,6 +20,7 @@ var listPortlet = require('./list-portlet/list-portlet.cjs');
 var htmlPortlet = require('./html-portlet/html-portlet.cjs');
 var actionbarPortlet = require('./actionbar-portlet/actionbar-portlet.cjs');
 var reportPortlet = require('./report-portlet/report-portlet.cjs');
+var filterPortlet = require('./filter-portlet/filter-portlet.cjs');
 
 "use strict";
 
@@ -32,6 +34,7 @@ exports.IBizListPortlet = index$5.IBizListPortlet;
 exports.IBizHtmlPortlet = index$6.IBizHtmlPortlet;
 exports.IBizActionBarPortlet = index$7.IBizActionBarPortlet;
 exports.IBizReportPortlet = index$8.IBizReportPortlet;
+exports.IBizFilterPortlet = index$9.IBizFilterPortlet;
 exports.ContainerPortlet = containerPortlet.ContainerPortlet;
 exports.ViewPortlet = viewPortlet.ViewPortlet;
 exports.MenuPortlet = menuPortlet.MenuPortlet;
@@ -41,3 +44,4 @@ exports.ListPortlet = listPortlet.ListPortlet;
 exports.HtmlPortlet = htmlPortlet.HtmlPortlet;
 exports.ActionBarPortlet = actionbarPortlet.ActionBarPortlet;
 exports.ReportPortlet = reportPortlet.ReportPortlet;
+exports.FilterPortlet = filterPortlet.FilterPortlet;

package/lib/control/dashboard/portlet/portlet-layout/portlet-layout.cjs

@@ -59,7 +59,7 @@ const PortletLayout = /* @__PURE__ */ vue.defineComponent({
       state
     } = this.controller;
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.is("no-header", !this.isShowHeader)]
+      "class": [this.ns.b(), this.ns.is("no-header", !this.isShowHeader), this.ns.is("hight-light", state.hightLight)]
     }, [this.isShowHeader && vue.createVNode("div", {
       "key": "header",
       "class": this.ns.b("header")