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

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

@@ -1 +1 @@
-.ibiz-dashboard-design{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-header{height:48px;padding:var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-header .ibiz-dashboard-design-header-utils{display:flex;align-items:center;justify-content:flex-start}.ibiz-dashboard-design-header-utils__col-num{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design-header-utils__row-h{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content{width:100%;height:calc(100% - 48px);display:flex;align-items:flex-start;justify-content:flex-start}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree{min-width:300px;height:100%;overflow-y:scroll}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-filter{width:100%;height:32px;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content{height:calc(100% - 32px);overflow:auto}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu{height:100%;border:none}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item{display:flex;flex-flow:flex nowrap;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item>span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon{font-size:calc(var(--ibiz-width-icon-medium) - 2px);cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon:hover{color:var(--ibiz-color-primary)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-scroll-box{flex-grow:1;height:100%;overflow-y:scroll;background:var(--ibiz-color-fill-1)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel{position:relative}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout-mask{position:absolute;inset:0;height:100%;min-height:1248px;background:linear-gradient(to bottom,var(--ibiz-color-primary) 10px,transparent 10px),linear-gradient(to right,var(--ibiz-color-primary) 10px,transparent 10px)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .el-card__body{display:flex;flex-flow:column nowrap;height:100%;background-color:var(--ibiz-color-white)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header{display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header ion-icon{cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
+.ibiz-dashboard-design{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-header{height:48px;padding:var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-header .ibiz-dashboard-design-header-utils{display:flex;align-items:center;justify-content:flex-start}.ibiz-dashboard-design-header-utils__col-num{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design-header-utils__row-h{margin-right:var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content{width:100%;height:calc(100% - 48px);display:flex;align-items:flex-start;justify-content:flex-start}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree{min-width:300px;height:100%;overflow-y:scroll}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-filter{width:100%;height:32px;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content{height:calc(100% - 32px);overflow:auto}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu{height:100%;border:none}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item{display:flex;flex-flow:flex nowrap;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item>span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon{font-size:calc(var(--ibiz-width-icon-medium) - 2px);cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-tree .ibiz-dashboard-design-tree-content>.el-menu .el-menu-item ion-icon:hover{color:var(--ibiz-color-primary)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-scroll-box{flex-grow:1;height:100%;overflow-y:scroll;background:var(--ibiz-color-fill-1)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel{position:relative}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout-mask{position:absolute;inset:0;height:100%;min-height:1248px;background:linear-gradient(to bottom,var(--ibiz-color-primary) 10px,transparent 10px),linear-gradient(to right,var(--ibiz-color-primary) 10px,transparent 10px)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item{width:100%;height:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .el-card__body{display:flex;flex-flow:column nowrap;height:100%;background-color:var(--ibiz-color-bg-1)}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header{display:flex;align-items:center;justify-content:space-between}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-header ion-icon{cursor:pointer}.ibiz-dashboard-design .ibiz-dashboard-design-content .ibiz-dashboard-design-panel .ibiz-dashboard-design-grid-layout .ibiz-dashboard-design-grid-layout-item .ibiz-dashboard-design-grid-layout-item-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}

package/lib/control/dashboard/dashboard.cjs

@@ -4,12 +4,15 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./dashboard.css');
 var runtime = require('@ibiz-template/runtime');
+var lodashEs = require('lodash-es');
 
 "use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
+const refreshTagObj = {};
 function renderPortletByType(model, c, opts) {
+  var _a;
   const provider = c.providers[model.id];
   const controller = c.portlets[model.id];
   const commonProps = {
@@ -27,14 +30,14 @@ function renderPortletByType(model, c, opts) {
       key: model.id
     }, {
       default: () => {
-        var _a;
-        return (_a = container.controls) == null ? void 0 : _a.map((child) => renderPortletByType(child, c, opts));
+        var _a2;
+        return (_a2 = container.controls) == null ? void 0 : _a2.map((child) => renderPortletByType(child, c, opts));
       }
     });
   }
   return vue.h(providerComp, {
     ...commonProps,
-    key: model.id
+    key: ((_a = refreshTagObj[model.id]) == null ? void 0 : _a.refreshtag) ? refreshTagObj[model.id].refreshtag : model.id
   });
 }
 const DashboardControl = /* @__PURE__ */ vue.defineComponent({
@@ -61,13 +64,44 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     const vue$1 = vue.getCurrentInstance().proxy;
     const customModelDatas = vue.ref([]);
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
-    c.evt.on("onCreated", () => {
+    c.evt.on("onInitPortlets", () => {
       Object.values(c.portlets).forEach((portlet) => {
-        portlet.state = vue.reactive(portlet.state);
+        if (!vue.isReactive(portlet.state)) {
+          portlet.state = vue.reactive(portlet.state);
+        }
+      });
+    });
+    c.evt.on("onItemModelReset", async (args) => {
+      const {
+        name
+      } = args;
+      const targetIndex = customModelDatas.value.findIndex((item) => {
+        return item.id === name;
       });
+      if (targetIndex !== -1) {
+        const app = ibiz.hub.getApp(ibiz.env.appId);
+        const model = await c.loadDynaPortletById("".concat(app.model.codeName, ".").concat(name));
+        if (model) {
+          refreshTagObj[model.id] = {
+            refreshtag: lodashEs.uniqueId()
+          };
+          customModelDatas.value.splice(targetIndex, 1, model);
+          vue$1.$forceUpdate();
+        }
+      }
     });
     const handleCustomModelChange = (args) => {
-      customModelDatas.value = args.model;
+      const model = args.model;
+      if (args.filter && model && model.length > 0) {
+        model.forEach((element) => {
+          if (element.portletType === "FILTER") {
+            refreshTagObj[element.id] = {
+              refreshtag: lodashEs.uniqueId()
+            };
+          }
+        });
+      }
+      customModelDatas.value = model;
       vue$1.$forceUpdate();
     };
     return {

package/lib/control/dashboard/index.cjs

@@ -19,6 +19,7 @@ var index$5 = require('./portlet/list-portlet/index.cjs');
 var index$6 = require('./portlet/html-portlet/index.cjs');
 var index$7 = require('./portlet/actionbar-portlet/index.cjs');
 var index$8 = require('./portlet/report-portlet/index.cjs');
+var index$9 = require('./portlet/filter-portlet/index.cjs');
 var containerPortlet = require('./portlet/container-portlet/container-portlet.cjs');
 var viewPortlet = require('./portlet/view-portlet/view-portlet.cjs');
 var menuPortlet = require('./portlet/menu-portlet/menu-portlet.cjs');
@@ -28,6 +29,7 @@ var listPortlet = require('./portlet/list-portlet/list-portlet.cjs');
 var htmlPortlet = require('./portlet/html-portlet/html-portlet.cjs');
 var actionbarPortlet = require('./portlet/actionbar-portlet/actionbar-portlet.cjs');
 var reportPortlet = require('./portlet/report-portlet/report-portlet.cjs');
+var filterPortlet = require('./portlet/filter-portlet/filter-portlet.cjs');
 
 "use strict";
 const IBizDashboardControl = vue3Util.withInstall(
@@ -50,6 +52,7 @@ const IBizDashboardControl = vue3Util.withInstall(
     v.use(index$6.IBizHtmlPortlet);
     v.use(index$7.IBizActionBarPortlet);
     v.use(index$8.IBizReportPortlet);
+    v.use(index$9.IBizFilterPortlet);
   }
 );
 
@@ -63,6 +66,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;
@@ -72,5 +76,6 @@ exports.ListPortlet = listPortlet.ListPortlet;
 exports.HtmlPortlet = htmlPortlet.HtmlPortlet;
 exports.ActionBarPortlet = actionbarPortlet.ActionBarPortlet;
 exports.ReportPortlet = reportPortlet.ReportPortlet;
+exports.FilterPortlet = filterPortlet.FilterPortlet;
 exports.IBizDashboardControl = IBizDashboardControl;
 exports.default = IBizDashboardControl;

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}