@jeecg/online 1.0.1

package/useChartRender.js

@@ -0,0 +1,405 @@
+import { ref, computed, reactive, watch } from "vue";
+import { router } from "/@/router";
+import { propTypes } from "/@/utils/propTypes";
+import { printJS } from "/@/hooks/web/usePrintJS";
+import { downloadByData } from "/@/utils/file/download";
+import { filterDictText } from "/@/utils/dict/JDictSelectUtil";
+import Bar from "/@/components/chart/Bar.vue";
+import Pie from "/@/components/chart/Pie.vue";
+import BarMulti from "/@/components/chart/BarMulti.vue";
+import LineMulti from "/@/components/chart/LineMulti.vue";
+import { defHttp } from "/@/utils/http/axios";
+import { useMessage } from "/@/hooks/web/useMessage";
+import { isFunction } from "/@/utils/is";
+import { c as cloneDeep } from "./cloneDeep.js";
+const ChartRenderProps = {
+  title: propTypes.string,
+  chartsData: propTypes.object,
+  asComponent: propTypes.bool.def(false)
+};
+const ChartRenderEmits = ["error"];
+const ChartRenderComponents = {
+  LineMulti,
+  BarMulti,
+  Pie,
+  Bar
+};
+const ChartRenderCommon = {
+  components: ChartRenderComponents,
+  props: ChartRenderProps,
+  emits: ChartRenderEmits
+};
+const errorText = {
+  jsonFormattingFailed: "JSON\u5B57\u7B26\u4E32\u683C\u5F0F\u5316\u5931\u8D25"
+};
+function useChartRender(props, { emit }) {
+  const {
+    createMessage: $message,
+    createConfirm: $confirm,
+    createInfoModal: $info,
+    createErrorModal: $error,
+    createSuccessModal: $success,
+    createWarningModal: $warning
+  } = useMessage();
+  const headId = ref(null);
+  const height = ref("400px");
+  const activeKey = ref("bar");
+  const chartTypes = ref([]);
+  const pageSwitch = ref(true);
+  const printId = computed(() => `print-content-${headId.value}`);
+  const lineParams = reactive({
+    chartData: []
+  });
+  const barParams = reactive({
+    chartData: []
+  });
+  const pieParams = reactive({
+    chartData: []
+  });
+  const barLineParams = reactive({
+    dataSource: []
+  });
+  const tableParams = reactive({
+    fixedColumns: [
+      {
+        title: "#",
+        key: "rowIndex",
+        width: "10%",
+        align: "center",
+        customRender: function({ record, index }) {
+          if (record.isTotal === true) {
+            return "\u603B\u8BA1";
+          } else {
+            return parseInt(index) + 1;
+          }
+        }
+      }
+    ],
+    columns: [],
+    dataSource: []
+  });
+  const extendJsHandlerIsolation = reactive({});
+  const extendJsHandler = computed({
+    get() {
+      if (headId.value == null) {
+        return null;
+      } else {
+        return extendJsHandlerIsolation[headId.value];
+      }
+    },
+    set(obj) {
+      if (headId.value != null) {
+        extendJsHandlerIsolation[headId.value] = obj;
+      }
+    }
+  });
+  const hasLine = computed(() => chartTypes.value.includes("line"));
+  const hasBar = computed(() => chartTypes.value.includes("bar"));
+  const hasPie = computed(() => chartTypes.value.includes("pie"));
+  const hasTable = ref(false);
+  const lineProps = computed(() => {
+    return {
+      type: "line",
+      height: height.value,
+      chartData: lineParams.chartData,
+      onClick(params) {
+        emitExtendJsEvent(params);
+      }
+    };
+  });
+  const barProps = computed(() => {
+    return {
+      height: height.value,
+      chartData: barParams.chartData,
+      onClick(params) {
+        emitExtendJsEvent(params);
+      }
+    };
+  });
+  const pieProps = computed(() => {
+    return {
+      height: height.value,
+      chartData: pieParams.chartData,
+      onClick(params) {
+        emitExtendJsEvent(params);
+      }
+    };
+  });
+  const barLineProps = computed(() => {
+    return {
+      height: height.value,
+      dataSource: barLineParams.dataSource,
+      onClick(_event, _chart) {
+        console.debug("barLineProps-click: ", arguments);
+      }
+    };
+  });
+  const chartCardProps = computed(() => {
+    return {
+      title: props.title,
+      headStyle: { paddingLeft: "20px" },
+      bodyStyle: { padding: "10px" },
+      bordered: !props.asComponent
+    };
+  });
+  const tableCardProps = computed(() => {
+    return {
+      title: "\u6570\u636E\u660E\u7EC6",
+      headStyle: { paddingLeft: "20px" },
+      bodyStyle: { padding: "0" },
+      style: { marginTop: "20px" },
+      bordered: !props.asComponent
+    };
+  });
+  const exportButtonProps = computed(() => {
+    return {
+      type: "primary",
+      preIcon: "ant-design:download",
+      text: "\u5BFC\u51FA",
+      style: { margin: "12px" }
+    };
+  });
+  const pageSwitchProps = computed(() => {
+    return {
+      checkedChildren: "\u5206\u9875",
+      unCheckedChildren: "\u5206\u9875",
+      style: {
+        position: "absolute",
+        top: "17px",
+        right: "12px"
+      }
+    };
+  });
+  const tableProps = computed(() => {
+    return {
+      size: "middle",
+      rowKey: "id",
+      pagination: pageSwitch.value ? { pageSize: 10 } : false,
+      columns: tableParams.columns,
+      dataSource: tableParams.dataSource,
+      style: { borderTop: "1px solid #e8e8e8" }
+    };
+  });
+  const showPrint = computed(() => !props.asComponent);
+  const showDetail = computed(() => props.asComponent);
+  watch(() => props.chartsData, (data) => parseChartsData(data), { immediate: true });
+  function executeExtendJs(headId, jsCode) {
+    if (!jsCode || !headId) {
+      return;
+    }
+    let onClick = { line: null, bar: null, pie: null };
+    eval(`;(function () {
+      ${jsCode}
+    })();`);
+    if (extendJsHandler.value == null) {
+      extendJsHandler.value = { click: onClick };
+    } else {
+      extendJsHandler.value.click = onClick;
+    }
+  }
+  const onClickThis = {
+    $router: router,
+    $http: defHttp,
+    $message,
+    $confirm,
+    $info,
+    $error,
+    $success,
+    $warning
+  };
+  function emitExtendJsEvent(params) {
+    if (extendJsHandler.value != null) {
+      let clickType = params.seriesType;
+      let fn = extendJsHandler.value.click[clickType];
+      if (isFunction(fn)) {
+        fn.call(onClickThis, params);
+      }
+    }
+  }
+  function parseChartsData(chartsData) {
+    if (chartsData == null)
+      return null;
+    let { head, data, items, dictOptions } = chartsData;
+    if (head == null)
+      return;
+    let { id, xaxisField, yaxisField, dataType, cgrSql, graphType, extendJs } = head;
+    headId.value = id;
+    executeExtendJs(id, extendJs);
+    try {
+      data = dataType === "sql" || dataType === "api" ? data : JSON.parse(cgrSql);
+    } catch (e) {
+      emit("error", errorText.jsonFormattingFailed);
+      return;
+    }
+    let dictList = dictOptions[xaxisField];
+    let graphTypes = graphType.split(",");
+    activeKey.value = graphTypes[0];
+    chartTypes.value = graphTypes;
+    let yaxisFields = yaxisField.split(",");
+    let fieldMap = /* @__PURE__ */ new Map();
+    items.forEach((item) => fieldMap.set(item.fieldName, item));
+    let index = graphTypes.indexOf("table");
+    hasTable.value = index !== -1;
+    if (hasTable.value) {
+      graphTypes.splice(index, 1);
+    }
+    let parseOption = { graphTypes, data, items, fieldMap, xaxisField, yaxisFields, dictList, dictOptions };
+    parseLineData(parseOption);
+    parseBarData(parseOption);
+    parsePicData(parseOption);
+    parseTableData(parseOption);
+  }
+  function parseCommonData(option) {
+    var _a;
+    let { data, fieldMap, xaxisField, yaxisFields, dictList } = option;
+    let chartData = [];
+    for (let yField of yaxisFields) {
+      for (let item of data) {
+        let name = item[xaxisField];
+        if (dictList) {
+          name = filterDictText(dictList, name);
+        }
+        chartData.push({
+          name,
+          value: item[yField],
+          type: ((_a = fieldMap.get(yField)) == null ? void 0 : _a.fieldTxt) || yField
+        });
+      }
+    }
+    return chartData;
+  }
+  function parseLineData(option) {
+    let { graphTypes } = option;
+    if (graphTypes.includes("line")) {
+      lineParams.chartData = parseCommonData(option);
+    }
+  }
+  function parseBarData(option) {
+    let { graphTypes } = option;
+    if (graphTypes.includes("bar")) {
+      barParams.chartData = parseCommonData(option);
+    }
+  }
+  function parsePicData(option) {
+    let { graphTypes, data, xaxisField, yaxisFields, dictList } = option;
+    let yField = yaxisFields[0];
+    if (graphTypes.includes("pie")) {
+      let chartData = [];
+      for (let item of data) {
+        let name = item[xaxisField];
+        if (dictList) {
+          name = filterDictText(dictList, name);
+        }
+        chartData.push({
+          name,
+          value: item[yField]
+        });
+      }
+      pieParams.chartData = chartData;
+    }
+  }
+  function parseTableData(option) {
+    let { data, items, xaxisField, yaxisFields, dictList, dictOptions } = option;
+    if (hasTable.value) {
+      tableParams.dataSource = data.map((item, index) => {
+        item.id = index;
+        let pieData = {
+          item: item[xaxisField],
+          count: item[yaxisFields[0]]
+        };
+        if (dictList) {
+          pieData.item = filterDictText(dictList, pieData.item);
+        }
+        return item;
+      });
+      let tableColumns = cloneDeep(tableParams.fixedColumns);
+      let isTotals = [];
+      items.forEach((item) => {
+        if (item.isShow === "Y") {
+          let column = {
+            align: "center",
+            width: "10%",
+            title: item.fieldTxt,
+            dataIndex: item.fieldName
+          };
+          if (item.dictCode) {
+            column.customRender = ({ text }) => filterDictText(dictOptions[item.fieldName], text);
+          }
+          tableColumns.push(column);
+          if (item.isTotal === "Y")
+            isTotals.push(item.fieldName);
+        }
+      });
+      tableParams.columns = tableColumns;
+      if (isTotals.length > 0) {
+        let totalRow = { id: tableParams.dataSource.length, isTotal: true };
+        isTotals.forEach((column) => {
+          let count = 0;
+          tableParams.dataSource.forEach((row) => {
+            count += parseFloat(row[column]);
+          });
+          totalRow[column] = isNaN(count) ? "\u5305\u542B\u975E\u6570\u5B57\u5185\u5BB9" : count.toFixed(2);
+        });
+        tableParams.dataSource.push(totalRow);
+      }
+    }
+  }
+  function onExportXls() {
+    let fileName = props.title;
+    defHttp.get({
+      url: "/online/graphreport/api/exportXlsById",
+      params: {
+        id: headId.value,
+        name: fileName
+      },
+      responseType: "blob"
+    }, { isTransformResponse: false }).then((data) => {
+      if (!data || data.size == 0) {
+        $message.warning("\u5BFC\u51FA\u5931\u8D25\uFF01");
+        return;
+      }
+      downloadByData(data, fileName + ".xls");
+    });
+  }
+  function onPrint() {
+    printJS({
+      type: "html",
+      printable: "#" + printId.value
+    });
+  }
+  function onGoToDetail() {
+    goToInfo(props.chartsData);
+  }
+  function goToInfo(data) {
+    let url = `/online/graphreport/chart/${data.head.id}`;
+    router.push({ path: url });
+  }
+  return {
+    headId,
+    printId,
+    height,
+    activeKey,
+    chartTypes,
+    pageSwitch,
+    showPrint,
+    showDetail,
+    hasLine,
+    hasBar,
+    hasPie,
+    hasTable,
+    lineProps,
+    barProps,
+    pieProps,
+    tableProps,
+    barLineProps,
+    chartCardProps,
+    tableCardProps,
+    exportButtonProps,
+    pageSwitchProps,
+    extendJsHandlerIsolation,
+    onPrint,
+    onGoToDetail,
+    onExportXls
+  };
+}
+export { ChartRenderCommon as C, useChartRender as u };

package/useMessageOnline.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode } from "vue";
+import { message, Modal } from "ant-design-vue";
+import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from "@ant-design/icons-vue";
+import { isString } from "/@/utils/is";
+function getIcon(iconType) {
+  if (iconType === "warning") {
+    return createVNode(InfoCircleFilled, {
+      "class": "modal-icon-warning"
+    }, null);
+  } else if (iconType === "success") {
+    return createVNode(CheckCircleFilled, {
+      "class": "modal-icon-success"
+    }, null);
+  } else if (iconType === "info") {
+    return createVNode(InfoCircleFilled, {
+      "class": "modal-icon-info"
+    }, null);
+  } else {
+    return createVNode(CloseCircleFilled, {
+      "class": "modal-icon-error"
+    }, null);
+  }
+}
+function renderContent({
+  content
+}) {
+  if (isString(content)) {
+    return createVNode("div", {
+      "innerHTML": `<div>${content}</div>`
+    }, null);
+  } else {
+    return content;
+  }
+}
+function createConfirm(options) {
+  const iconType = options.iconType || "warning";
+  Reflect.deleteProperty(options, "iconType");
+  const opt = __spreadProps(__spreadValues({
+    centered: true,
+    icon: getIcon(iconType)
+  }, options), {
+    content: renderContent(options)
+  });
+  return Modal.confirm(opt);
+}
+function useMessageOnline() {
+  return {
+    createMessage: message,
+    createConfirm
+  };
+}
+export { useMessageOnline };