@ibiz-template/vue3-components 0.7.38-alpha.43 → 0.7.39

package/lib/common/grid-setting/grid-setting.cjs

@@ -51,17 +51,13 @@ const IBizGridSetting = /* @__PURE__ */ vue.defineComponent({
         c.changeColumnStateSort(movedDragColumnState.key, newIndex, oldIndex);
       }
     };
-    const onShowNavView = () => {
-      c.state.showNavView = !c.state.showNavView;
-    };
     return {
       ns,
       c,
       dragColumnStates,
       isDraggable,
       handleClick,
-      onDragChange,
-      onShowNavView
+      onDragChange
     };
   },
   render() {
@@ -123,16 +119,16 @@ const IBizGridSetting = /* @__PURE__ */ vue.defineComponent({
           }
         });
       }
-    }), this.c.state.enableNavView ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
+    }), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.showNav"),
       "name": "eye-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : vue.createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
       "name": "eye-off-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : null]);
   }
 });

package/lib/common/index.cjs

@@ -35,10 +35,12 @@ var buttonList = require('./button-list/button-list.cjs');
 var controlNavigation = require('./control-navigation/control-navigation.cjs');
 var ganttSetting = require('./gantt-setting/gantt-setting.cjs');
 var navSplit = require('./nav-split/nav-split.cjs');
+var cropping = require('./cropping/cropping.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(cropping.IBizCropping.name, cropping.IBizCropping);
     v.component(vue3Util.IBizControlBase.name, vue3Util.IBizControlBase);
     v.component(quickEdit.IBizQuickEdit.name, quickEdit.IBizQuickEdit);
     v.component(emojiSelect.IBizEmojiSelect.name, emojiSelect.IBizEmojiSelect);
@@ -70,6 +72,12 @@ const IBizCommonComponents = {
         loader: () => Promise.resolve().then(function () { return require('./map-chart/map-chart.cjs'); })
       })
     );
+    v.component(
+      "IBizMapChartUser",
+      vue.defineAsyncComponent({
+        loader: () => Promise.resolve().then(function () { return require('./map-chart-user/map-chart-user.cjs'); })
+      })
+    );
     v.component(vue3Util.IBizBadge.name, vue3Util.IBizBadge);
     v.component(carousel.IBizCarouselComponent.name, carousel.IBizCarouselComponent);
     v.component(coopAlert.IBizCoopAlert.name, coopAlert.IBizCoopAlert);

package/lib/common/map-chart/map-manager.cjs

@@ -11,6 +11,7 @@ function useMapManager(opts, calcEchartsOpts, emit) {
   const historyNames = vue.ref([]);
   let chart;
   const chartRef = vue.ref();
+  let resizeObserver;
   const parseJson = (json) => {
     const info = {
       cityNames: {},
@@ -64,11 +65,18 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       changeMap(name);
     }
   };
+  const resize = () => {
+    chart == null ? void 0 : chart.resize();
+  };
   vue.onMounted(() => {
     chart = echarts.init(chartRef.value);
-    window.addEventListener("resize", () => {
-      chart == null ? void 0 : chart.resize();
-    });
+    window.addEventListener("resize", resize);
+    if (chartRef.value && ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        resize();
+      });
+      resizeObserver.observe(chartRef.value);
+    }
     chart.on("click", (params) => {
       if (params.componentType === "series") {
         if (params.seriesType === "scatter") {
@@ -109,6 +117,10 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       }
     });
   });
+  vue.onUnmounted(() => {
+    window.removeEventListener("resize", resize);
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  });
   return {
     chartRef,
     historyNames,

package/lib/common/map-chart-user/map-chart-user.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+var mapChartUser_util = require('./map-chart-user.util.cjs');
+var mapUserManager = require('./map-user-manager.cjs');
+require('./map-chart-user.css');
+
+"use strict";
+const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMapChartUser",
+  props: {
+    areaData: {
+      type: Array
+    },
+    pointData: {
+      type: Array
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    controller: {
+      type: runtime.MapController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("map-chart-user");
+    const c = props.controller;
+    let option = mapChartUser_util.defaultOpts;
+    if (c.controlParams.defaultopts) {
+      const data = JSON.parse(c.controlParams.defaultopts);
+      option = ramda.mergeDeepLeft(data, option);
+    }
+    const options = vue.computed(() => {
+      return ramda.mergeDeepWithKey((_key, x, z) => {
+        return ramda.isNil(z) ? x : z;
+      }, option, props.options);
+    });
+    const {
+      chartRef,
+      historyNames,
+      changeMap,
+      getCityInfo,
+      goBack
+    } = mapUserManager.useMapManager(props.controller, options, (mapName) => {
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
+      const tooltip = mapChartUser_util.getTooltip();
+      const visualMap = mapChartUser_util.getVisualMap(options.value);
+      const cityInfo = getCityInfo();
+      const pointOption = {
+        ...mapChartUser_util.getPointStaticOption(options.value),
+        ...mapChartUser_util.getPointOption(pointData, areaData)
+      };
+      const areaOption = {
+        ...mapChartUser_util.getAreaStaticOption(options.value),
+        ...mapChartUser_util.getAreaOption(mapName, pointData, areaData, cityInfo)
+      };
+      const result = {
+        geo: {
+          map: mapName
+        },
+        tooltip,
+        visualMap,
+        series: [
+          // 地图区块序列
+          areaOption,
+          // 地图散点序列
+          pointOption
+        ]
+      };
+      return result;
+    });
+    vue.onMounted(() => {
+      const name = options.value.defaultAreaCode;
+      const areaCode = c.state.strAreaCode ? "".concat(name) : Number(name);
+      c.state.areaCode = areaCode;
+      changeMap(name, areaCode, true);
+    });
+    return {
+      ns,
+      chartRef,
+      historyNames,
+      goBack
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("chart"),
+      "ref": "chartRef"
+    }, null), this.historyNames.length > 1 && vue.createVNode("div", {
+      "class": this.ns.e("goback"),
+      "onClick": () => {
+        this.goBack();
+      }
+    }, [ibiz.i18n.t("app.return")])]);
+  }
+});
+
+exports.IBizMapChartUser = IBizMapChartUser;
+exports.default = IBizMapChartUser;

package/lib/common/map-chart-user/map-chart-user.css

@@ -0,0 +1 @@
+.ibiz-map-chart-user{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart-user__chart{width:100%;height:100%}.ibiz-map-chart-user__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:var(--ibiz-font-size-header-4);color:var(--ibiz-color-link);text-decoration:underline;letter-spacing:6px;cursor:pointer}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-base)}

package/lib/common/map-chart-user/map-chart-user.util.cjs

@@ -0,0 +1,218 @@
+'use strict';
+
+var vue3Util = require('@ibiz-template/vue3-util');
+
+"use strict";
+async function getJsonUrl(baseUrl, code) {
+  const res = await ibiz.net.axios({
+    url: "".concat(baseUrl, "/").concat(code, ".json")
+  });
+  return res.data;
+}
+const GradientColors = ["#90d1e7", "#fff600", "#ff5200"];
+const defaultOpts = {
+  /** true地图code标识使用字符串，false使用数字 */
+  strAreaCode: false,
+  /** 热力图配置 */
+  visualMap: {
+    /** 两端的文本，如 ['高', '低'] */
+    text: [
+      ibiz.i18n.t("component.mapChart.high"),
+      ibiz.i18n.t("component.mapChart.low")
+    ],
+    /** 底部代表的值 */
+    min: 0,
+    /** 顶部代表的值 */
+    max: 100,
+    /** 热力图渐变颜色数组 */
+    rangeColor: GradientColors
+  },
+  /** 区块颜色 */
+  areaColor: "#87cefa",
+  /** 区块边界颜色 */
+  areaBorderColor: "#FFF",
+  /** 悬浮时区块颜色 */
+  hoverAreaColor: "#fbdb2f",
+  /** 点图标 */
+  pointSymbol: "pin",
+  /** 地图json数据基础路径 */
+  jsonBaseUrl: "./assets/json/map",
+  /** 默认打开的区域编码 */
+  defaultAreaCode: 1e5
+};
+const findData = (id, type, pointData = [], areaData = []) => {
+  if (type === "area") {
+    return areaData.find((item) => item._id === id);
+  }
+  if (type === "point") {
+    return pointData.find((item) => item._id === id);
+  }
+};
+const getCssVarByName = (name) => {
+  let result = name;
+  const styles = window.getComputedStyle(document.documentElement);
+  if (styles) {
+    result = styles.getPropertyValue(name) || result;
+  }
+  return result;
+};
+const getPointStaticOption = (params) => {
+  const { pointSymbol } = params;
+  const ns = vue3Util.useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-header-4"));
+  const options = {
+    type: "scatter",
+    coordinateSystem: "geo",
+    symbol: pointSymbol,
+    symbolSize: Number(fontSize.slice(0, 2)),
+    visualMap: false,
+    itemStyle: {
+      color: textColor
+    }
+  };
+  return options;
+};
+const getPointOption = (pointData, areaData) => {
+  const options = {};
+  const ns = vue3Util.useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  options.label = {
+    show: true,
+    color: textColor,
+    fontSize: Number(fontSize.slice(0, 2)),
+    textShadowBlur: 0,
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "point", pointData, areaData);
+      return find == null ? void 0 : find._text;
+    },
+    // 偏移
+    position: "left",
+    offset: [10, -15]
+  };
+  options.tooltip = {
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "point", pointData, areaData);
+      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+    },
+    padding: 0
+  };
+  options.data = pointData.map((item) => {
+    let symbol;
+    if (item._symbol) {
+      symbol = "image://".concat(item._symbol);
+    }
+    return {
+      _id: item._id,
+      symbol,
+      value: [Number(item._longitude), Number(item._latitude)],
+      // 每个点逃离visualMap
+      visualMap: false
+    };
+  });
+  return options;
+};
+const getAreaStaticOption = (params) => {
+  const { areaColor, areaBorderColor, hoverAreaColor } = params;
+  const options = {
+    type: "map",
+    nameProperty: "adcodeStr",
+    itemStyle: {
+      // 默认区域颜色
+      areaColor,
+      borderColor: areaBorderColor,
+      borderWidth: 2
+    },
+    // 悬浮样式
+    emphasis: {
+      itemStyle: {
+        areaColor: hoverAreaColor
+      }
+    }
+  };
+  return options;
+};
+const getAreaOption = (mapName, pointData, areaData, cityInfo = []) => {
+  const options = {};
+  const ns = vue3Util.useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  options.map = mapName;
+  options.label = {
+    show: true,
+    color: textColor,
+    fontSize: Number(fontSize.slice(0, 2)),
+    formatter: (params) => {
+      return cityInfo.cityNames[params.name];
+    }
+  };
+  options.tooltip = {
+    formatter: (params) => {
+      if (!params.data) {
+        return;
+      }
+      const find = findData(params.data._id, "area", pointData, areaData);
+      return '<div style="color:'.concat(find._color, ";background: ").concat(find._bgcolor, '" class="').concat(find._className, " ").concat(ns.e("popper"), '">').concat(find == null ? void 0 : find._tooltip, "</div>");
+    },
+    padding: 0
+  };
+  options.data = areaData.map((item) => {
+    return {
+      name: "".concat(item._areaCode),
+      value: item._value,
+      _id: item._id
+    };
+  });
+  options.select = {
+    disabled: true
+  };
+  return options;
+};
+const getTooltip = () => {
+  const ns = vue3Util.useNamespace("map-chart-user");
+  const textColor = getCssVarByName(ns.cssVarName("color-text-1"));
+  const fontSize = getCssVarByName(ns.cssVarName("font-size-regular"));
+  const backgroundColor = getCssVarByName(ns.cssVarName("color-bg-0"));
+  return {
+    trigger: "item",
+    textStyle: {
+      color: textColor,
+      fontSize: Number(fontSize.slice(0, 2))
+    },
+    backgroundColor,
+    borderWidth: 0,
+    extraCssText: "backdrop-filter: blur(3px);"
+  };
+};
+const getVisualMap = (options) => {
+  const { visualMap } = options;
+  return {
+    min: visualMap.min,
+    max: visualMap.max,
+    text: visualMap.text,
+    realtime: false,
+    hoverLink: false,
+    inRange: {
+      color: visualMap.rangeColor
+    }
+  };
+};
+
+exports.GradientColors = GradientColors;
+exports.defaultOpts = defaultOpts;
+exports.findData = findData;
+exports.getAreaOption = getAreaOption;
+exports.getAreaStaticOption = getAreaStaticOption;
+exports.getCssVarByName = getCssVarByName;
+exports.getJsonUrl = getJsonUrl;
+exports.getPointOption = getPointOption;
+exports.getPointStaticOption = getPointStaticOption;
+exports.getTooltip = getTooltip;
+exports.getVisualMap = getVisualMap;

package/lib/common/map-chart-user/map-user-manager.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+var echarts = require('echarts');
+var vue = require('vue');
+var core = require('@ibiz-template/core');
+var mapChartUser_util = require('./map-chart-user.util.cjs');
+
+"use strict";
+function useMapManager(controller, opts, calcEchartsOpts) {
+  const mapInfos = /* @__PURE__ */ new Map();
+  const currentName = vue.ref("");
+  const historyNames = vue.ref([]);
+  let chart;
+  const chartRef = vue.ref();
+  let resizeObserver;
+  const parseJson = (json) => {
+    const info = {
+      cityNames: {},
+      noChild: json.features.length === 1
+    };
+    json.features.forEach((item) => {
+      const { adcode, name } = item.properties;
+      info.cityNames[adcode] = name;
+    });
+    return info;
+  };
+  const setOption = async (data) => {
+    controller.options = data;
+    await controller.evt.emit("onBeforeUpdate", { data });
+    chart.setOption(data, true);
+  };
+  const registerMap = async (name) => {
+    if (mapInfos.has(name)) {
+      return;
+    }
+    const json = await mapChartUser_util.getJsonUrl(opts.value.jsonBaseUrl, name);
+    mapInfos.set(name, parseJson(json));
+    echarts.registerMap(name, json);
+  };
+  const getCityInfo = () => {
+    return mapInfos.get(currentName.value);
+  };
+  const refresh = () => {
+    if (currentName.value) {
+      const options = calcEchartsOpts(currentName.value);
+      setOption(options);
+      chart.resize();
+    }
+  };
+  const changeMap = async (name, areaCode, isInit = false) => {
+    if (!isInit) {
+      controller.onMapChange(areaCode);
+    }
+    const strName = "".concat(name);
+    if (!mapInfos.has(strName)) {
+      await registerMap(strName);
+    }
+    controller.state.mapInfo = getCityInfo();
+    currentName.value = strName;
+    historyNames.value.push(strName);
+    refresh();
+  };
+  const goBack = async () => {
+    if (historyNames.value.length > 1) {
+      historyNames.value.pop();
+      const name = historyNames.value.pop();
+      const areaCode = opts.value.strAreaCode ? "".concat(name) : Number(name);
+      controller.state.areaCode = areaCode;
+      await controller.evt.emit("onBackClick", void 0);
+      changeMap(name, areaCode);
+    }
+  };
+  const cleanup = core.listenJSEvent(window, "resize", () => {
+    if (chart) {
+      chart.resize();
+    }
+  });
+  vue.onMounted(() => {
+    chart = echarts.init(chartRef.value);
+    controller.chart = chart;
+    if (chartRef.value && ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        chart == null ? void 0 : chart.resize();
+      });
+      resizeObserver.observe(chartRef.value);
+    }
+    chart.on("click", (params) => {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          if (!params.data) {
+            return;
+          }
+          const { pointData, areaData } = controller.state;
+          const data = mapChartUser_util.findData(params.data._id, "point", pointData, areaData);
+          if (data) {
+            controller.onPointClick(data);
+          }
+          return;
+        }
+        if (params.seriesType === "map") {
+          const areaCode = opts.value.strAreaCode ? "".concat(params.name) : Number(params.name);
+          controller.state.areaCode = areaCode;
+          if (params.data) {
+            const { pointData, areaData } = controller.state;
+            const data = mapChartUser_util.findData(params.data._id, "area", pointData, areaData);
+            if (data) {
+              controller.onAreaClick(data);
+            }
+          }
+          if (params.name !== currentName.value) {
+            changeMap(params.name, areaCode);
+          }
+        }
+      }
+    });
+    chart.on("mouseover", function(data) {
+      controller.evt.emit("onMouseOver", { data });
+      if (data.componentType === "series") {
+        if (data.seriesType === "scatter") {
+          const dataIndex = data.dataIndex;
+          const options = chart.getOption();
+          const seriesData = options.series[data.seriesIndex].data;
+          const originSize = options.series[data.seriesIndex].symbolSize;
+          seriesData[dataIndex].symbolSize = originSize + 10;
+          setOption(options);
+        }
+      }
+    });
+    chart.on("mouseout", function(data) {
+      controller.evt.emit("onMouseOut", { data });
+      if (data.componentType === "series") {
+        if (data.seriesType === "scatter") {
+          const dataIndex = data.dataIndex;
+          const options = chart.getOption();
+          const seriesData = options.series[data.seriesIndex].data;
+          delete seriesData[dataIndex].symbolSize;
+          setOption(options);
+        }
+      }
+    });
+  });
+  vue.onUnmounted(() => {
+    cleanup();
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  });
+  return {
+    chartRef,
+    historyNames,
+    currentName,
+    changeMap,
+    getCityInfo,
+    goBack,
+    refresh
+  };
+}
+
+exports.useMapManager = useMapManager;

package/lib/common/pql-editor/pql-editor.module.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 var editor = require('@wangeditor/editor');
-require('../../node_modules/.pnpm/snabbdom@3.6.2/node_modules/snabbdom/build/index.cjs');
+require('../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/index.cjs');
 var index = require('./utils/index.cjs');
-var h = require('../../node_modules/.pnpm/snabbdom@3.6.2/node_modules/snabbdom/build/h.cjs');
+var h = require('../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/h.cjs');
 
 "use strict";
 const pqlType = [

package/lib/common/quick-edit/quick-edit.cjs

@@ -22,6 +22,10 @@ const IBizQuickEdit = /* @__PURE__ */ vue.defineComponent({
     },
     modelData: {
       type: Object
+    },
+    isFilterHiddenItem: {
+      type: Boolean,
+      default: true
     }
   },
   emits: {
@@ -33,20 +37,24 @@ const IBizQuickEdit = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("quick-edit");
     const controller = vue.ref(void 0);
     const editItemModel = [];
-    const findEditItem = (detail) => {
+    const hiddenItemModel = [];
+    const findItem = (detail) => {
       const childern = runtime.findChildFormDetails(detail);
       childern.forEach((child) => {
         if (child.detailType === "FORMITEM" && !child.hidden) {
           editItemModel.push(child);
         }
-        findEditItem(child);
+        if (child.detailType === "FORMITEM" && child.hidden) {
+          hiddenItemModel.push(child);
+        }
+        findItem(child);
       });
     };
     const init = () => {
       var _a;
       if (props.modelData) {
         (_a = props.modelData.deformPages) == null ? void 0 : _a.forEach((child) => {
-          findEditItem(child);
+          findItem(child);
         });
       }
     };
@@ -66,10 +74,22 @@ const IBizQuickEdit = /* @__PURE__ */ vue.defineComponent({
       });
       return data;
     };
+    const getItemData = () => {
+      const data = {};
+      const item = controller.value.getDiffData();
+      [...editItemModel, ...hiddenItemModel].forEach((formItem) => {
+        const uiKey = formItem.id.toLowerCase();
+        const deKey = formItem.fieldName || formItem.appDEFieldId;
+        if (item[uiKey]) {
+          data[deKey] = item[uiKey];
+        }
+      });
+      return data;
+    };
     const onConfirm = () => {
       let data;
       if (controller.value) {
-        const item = getEditItemData();
+        const item = props.isFilterHiddenItem ? getEditItemData() : getItemData();
         if (Object.keys(item).length > 0) {
           data = [item];
         }
@@ -95,12 +115,12 @@ const IBizQuickEdit = /* @__PURE__ */ vue.defineComponent({
     let _slot, _slot2;
     return vue.createVNode("div", {
       "class": this.ns.b()
-    }, [vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+    }, [vue.createVNode(vue.resolveComponent("iBizControlShell"), vue.mergeProps({
       "params": this.params,
       "context": this.context,
       "modelData": this.modelData,
       "onCreated": this.onCreated
-    }, null), vue.createVNode("div", {
+    }, this.$attrs), null), vue.createVNode("div", {
       "class": this.ns.e("footer")
     }, [vue.createVNode(vue.resolveComponent("el-button"), {
       "text": true,