cnhis-design-vue 3.1.37-beta.1 → 3.1.37-beta.2

package/README.md

@@ -1,123 +1,123 @@
-# 安装
-
-```shell
-npm i cnhis-design-vue@[版本号]
-# or
-yarn add cnhis-design-vue@[版本号] #推荐
-```
-
-## 1.全局引入
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'cnhis-design-vue/es/packages/index.css';
-import cui from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(cui).mount('#app');
-```
-
-## 2. 按需引入
-
-组件现在支持了自动按需引入, 但是样式文件需要额外的处理
-
-### 2.1 样式处理方式 1(按需引入样式)
-
-```shell
-# 安装自动导入样式的插件
-npm i -d vite-plugin-style-import
-```
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { createStyleImportPlugin } from 'vite-plugin-style-import';
-
-export default defineConfig({
-  plugins: [
-    // ...otherPlugins
-    createStyleImportPlugin({
-      libs: [
-        {
-          libraryName: 'cnhis-design-vue',
-          esModule: true,
-          ensureStyleFile: true,
-          resolveStyle: name => {
-            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-### 2.2 样式处理方式 2(全局引入样式)
-
-```typescript
-// main.ts
-import 'cnhis-design-vue/es/components/index.css';
-```
-
-## 3. 注意
-
-由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-
-import { CGrid } from 'cnhis-design-vue';
-// 或者
-import { CBigTable } from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(CGrid);
-// 或者
-app.use(CBigTable);
-app.mount('#app');
-```
-
-## 4.FAQ
-
-### 4.1 项目打包后样式丢失
-
-> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  rollupOptions: {
-    // ..otherOptions
-    output: {
-      dir: './dist',
-      manualChunks(id: string) {
-        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
-          return 'vendor';
-        }
-      }
-    }
-  }
-});
-```
-
-### 4.2 找不到文件
-
-> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
-
-```javascript
-// vite.config.ts
-const config = {
-  // ...otherOptions
-  resolve: {
-    // ...otherOptions
-    // 如果没有配置, 则不用考虑
-    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
-  }
-};
-```
+# 安装
+
+```shell
+npm i cnhis-design-vue@[版本号]
+# or
+yarn add cnhis-design-vue@[版本号] #推荐
+```
+
+## 1.全局引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'cnhis-design-vue/es/packages/index.css';
+import cui from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(cui).mount('#app');
+```
+
+## 2. 按需引入
+
+组件现在支持了自动按需引入, 但是样式文件需要额外的处理
+
+### 2.1 样式处理方式 1(按需引入样式)
+
+```shell
+# 安装自动导入样式的插件
+npm i -d vite-plugin-style-import
+```
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export default defineConfig({
+  plugins: [
+    // ...otherPlugins
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'cnhis-design-vue',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: name => {
+            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+### 2.2 样式处理方式 2(全局引入样式)
+
+```typescript
+// main.ts
+import 'cnhis-design-vue/es/components/index.css';
+```
+
+## 3. 注意
+
+由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import { CGrid } from 'cnhis-design-vue';
+// 或者
+import { CBigTable } from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(CGrid);
+// 或者
+app.use(CBigTable);
+app.mount('#app');
+```
+
+## 4.FAQ
+
+### 4.1 项目打包后样式丢失
+
+> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  rollupOptions: {
+    // ..otherOptions
+    output: {
+      dir: './dist',
+      manualChunks(id: string) {
+        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
+          return 'vendor';
+        }
+      }
+    }
+  }
+});
+```
+
+### 4.2 找不到文件
+
+> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
+
+```javascript
+// vite.config.ts
+const config = {
+  // ...otherOptions
+  resolve: {
+    // ...otherOptions
+    // 如果没有配置, 则不用考虑
+    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
+  }
+};
+```

package/es/components/button-print/src/utils/print.js

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { isArray } from 'lodash-es';
 import { IdentityVerificationDialog, PreviewDialog } from './dialog.js';
 import { isIReport, useBrowserPrint } from './browserPrint.js';
 import { getCurrentInstance } from 'vue';
@@ -318,11 +317,7 @@ class Print {
           onReject(null);
         if (isIReport(params.formatId))
           return onResolve(res);
-        onResolve(await this._downloadPDF(getFiledir(res.filedir)));
-        function getFiledir(filedir) {
-          const result = JSON.parse(filedir);
-          return isArray(result) ? result[0] || "" : "";
-        }
+        onResolve(await this._downloadPDF(res.filedir));
       },
       (err) => onReject(err),
       "downloadPDF"

package/es/components/fabric-chart/src/FabricChart.vue.js

@@ -3,32 +3,32 @@ import { fabric } from './utils/index.js';
 import PopupTip from './components/PopupTip.vue.js';
 import PopupMenu from './components/PopupMenu.js';
 import useTemperatureChart from './hooks/useTemperatureChart.js';
+import useBirthProcessChart from './hooks/useBirthProcessChart.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
   props: {
-    mode: { type: String, default: "temperature" },
+    type: { type: String, default: "temperature" },
     data: { type: Object, required: true },
     addRenderItem: { type: Function }
   },
   emits: [
     "change",
     "add",
-    "delete",
+    "remove",
     "select"
   ],
   setup(__props, { expose, emit: emits }) {
     const props = __props;
-    computed(() => props.mode === "temperature");
+    const isTemperature = computed(() => props.type === "temperature");
     const canvasRef = ref(null);
     const canvas = ref();
-    const { propItems, redrawPoints, select, pointTipProps, pointMenuProps, clickMenu } = useTemperatureChart(
-      canvas,
-      props,
-      emits,
-      canvasRef
-    );
+    const { propItems, redrawPoints, select, pointTipProps, pointMenuProps, clickMenu } = init();
+    function init() {
+      const params = [canvas, props, emits, canvasRef];
+      return isTemperature.value ? useTemperatureChart(...params) : useBirthProcessChart(...params);
+    }
     onMounted(() => {
       canvas.value = new fabric.Canvas(canvasRef.value, {
         width: propItems.canvasWidth,

package/es/components/fabric-chart/src/hooks/useBirthProcess.js

@@ -1,15 +1,13 @@
-import { reactive, onMounted, nextTick } from 'vue';
 import { useBirthProcessCumputedPoint } from './useCumputedPoint.js';
 import useGrid from './useGrid.js';
-import { drawLine, drawPoint, drawText, defaultTextStyle, defaultRectStyle } from './useDraw.js';
+import { drawLine, drawPoint, defaultTextStyle, drawText, defaultRectStyle } from './useDraw.js';
 import { fabric } from '../utils/index.js';
 import { getIndex, isEffectiveNode } from '../utils/utils.js';
-import { useCommon } from './useCommon.js';
 import { cloneDeep } from 'lodash-es';
 
-function useBirthProcess(canvas, propItems, emits) {
+function useBirthProcess(canvas, propItems, emits, pointTipProps, pointMenuProps, commonFunc) {
   const { cumputedX, cumputedY, getXValue, getYValue } = useBirthProcessCumputedPoint(propItems);
-  const { getEqualXTypes } = useCommon(canvas);
+  const { getEqualXTypes, repeatTip } = commonFunc;
   const {
     xAxis,
     grid,
@@ -30,20 +28,18 @@ function useBirthProcess(canvas, propItems, emits) {
     event,
     originYCervix
   } = propItems;
-  const pointTipProps = reactive({
-    show: false,
-    point: { x: 0, y: 0 },
-    list: []
-  });
-  const pointMenuProps = reactive({
-    show: false,
-    point: { x: 0, y: 0 },
-    list: [],
-    target: null
-  });
   const yScaleValue = cloneDeep(scaleValues);
   const gridPoints = /* @__PURE__ */ new Set();
   useGrid(canvas, propItems, true);
+  init();
+  function init() {
+    drawYScale();
+    drawXScale();
+    drawBorder();
+    drawPolyLine();
+    setCanvasEvent();
+    drawIcons();
+  }
   function drawPolyLine() {
     yScaleValue.forEach((item, dataIndex) => {
       var _a;
@@ -161,8 +157,8 @@ function useBirthProcess(canvas, propItems, emits) {
     const { dataIndex, data, index, key } = params;
     const item = yScaleValue.find((v) => v.key === key);
     switch (mode) {
-      case "delete":
-        item.data.splice(index, 0);
+      case "remove":
+        item.data.splice(index, 1);
         break;
       case "change":
         item.data[index] = data;
@@ -240,7 +236,7 @@ function useBirthProcess(canvas, propItems, emits) {
             pointMenuProps.target = null;
             pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
             yScaleValue.forEach((item) => {
-              if (!getEqualXTypes(x, "key").includes(item.key)) {
+              if (!getEqualXTypes(x, "key", xCellWidth).includes(item.key)) {
                 if (["cervix", "fetalPresentation"].includes(item.key) && y < originYCervix)
                   return;
                 pointMenuProps.list.push(getPointMenuList(item, event2.pointer));
@@ -248,17 +244,19 @@ function useBirthProcess(canvas, propItems, emits) {
             });
             if (pointMenuProps.list.length === 1) {
               pointMenuProps.show = false;
+              repeatTip();
               console.log("\u5F53\u524D\u65F6\u95F4\u6BB5\u5185\u65E0\u53EF\u65B0\u589E\u8282\u70B9");
             }
           } else {
             pointMenuProps.target = event2.target;
             pointMenuProps.list = ["\u5220\u9664\u8282\u70B9"];
-            yScaleValue.forEach((item) => {
-              if (getEqualXTypes(x, "key").includes(item.key)) {
+            canvas.value.forEachObject((obj) => {
+              if (obj.origin && obj.left === event2.target.left && obj.top === event2.target.top) {
                 pointMenuProps.list.push({
-                  ...getPointMenuList(item, event2.pointer),
-                  mode: "delete",
-                  index: event2.target.origin.index
+                  renderItem: () => obj.origin.title,
+                  origin: { ...obj.origin },
+                  mode: "remove",
+                  pointer: event2.pointer
                 });
               }
             });
@@ -283,20 +281,120 @@ function useBirthProcess(canvas, propItems, emits) {
   function clickMenu({ item, target }) {
     console.log("item :>> ", item);
     const params = {
-      data: {
-        time: getXValue(item.pointer.x),
-        value: getYValue(item.origin.key, item.pointer.y)
-      },
       ...item.origin
     };
-    if (item.mode === "delete") {
-      emits("delete", params);
-      updateData(params, "delete");
+    if (item.mode === "remove") {
+      emits("remove", params);
+      updateData(params, "remove");
     } else {
+      Object.assign(params, {
+        data: {
+          time: getXValue(item.pointer.x),
+          value: getYValue(item.origin.key, item.pointer.y)
+        }
+      });
       emits("add", params);
       updateData(params);
     }
   }
+  function drawIcons() {
+    const leftX = leftAddAreaWidth / 2;
+    const rightX = canvasWidth - rightAddAreaWidth / 2;
+    _drawIcons(leftScales, leftX);
+    _drawIcons(rightScales, rightX);
+    function _drawIcons(scales, left) {
+      if (!scales.length)
+        return;
+      let topY = originY;
+      const objs = [];
+      scales.forEach((item) => {
+        const title = item.title.split("").join("\n");
+        const dataIndex = scaleValues.findIndex((_item) => _item.key === item.key);
+        const text = new fabric.Text(String(title), {
+          ...defaultTextStyle,
+          ...item.titleStyle || {},
+          originY: "top",
+          left,
+          top: topY,
+          lineHeight: 1
+        });
+        const icon = drawPoint(item.type, {
+          left,
+          top: topY + text.height + 3,
+          ...item.pointAttr,
+          originY: "top",
+          origin: {
+            title: item.title,
+            unit: item.unit,
+            type: item.type,
+            dataIndex,
+            key: item.key,
+            isMenu: true
+          },
+          originLeft: left,
+          originTop: topY + text.height + 3,
+          ...propItems.event
+        });
+        topY += text.height + icon.height + 15;
+        setIconEvent(icon);
+        objs.push(text, icon);
+      });
+      setVerticalCenter(objs);
+      canvas.value.add(...objs);
+    }
+    function setVerticalCenter(objs) {
+      const lastobj = objs.at(-1);
+      const wrapHalf = (endY - originY) / 2;
+      const contentHalf = (lastobj.height + lastobj.top - originY) / 2;
+      objs.forEach((obj) => {
+        const top = obj.top + wrapHalf - contentHalf;
+        obj.set({
+          top,
+          originTop: top
+        });
+      });
+    }
+  }
+  function setIconEvent(point) {
+    point.on("moving", () => {
+      point.set("originY", "center");
+      if (isLimit2(point)) {
+        moveLimit(point);
+        setPopup(point);
+      } else {
+        pointTipProps.show = false;
+      }
+    });
+    point.on("mouseup:before", (event2) => {
+      pointTipProps.show = false;
+      if (event2.e.button === 0) {
+        if (isLimit2(point)) {
+          const isRepeat = getEqualXTypes(point.left, "key", xCellWidth).includes(point.origin.key);
+          if (isRepeat) {
+            repeatTip();
+          } else {
+            const params = {
+              data: {
+                time: getXValue(point.left),
+                value: getYValue(point.origin.key, point.top)
+              },
+              ...point.origin
+            };
+            emits("add", params);
+            updateData(params);
+          }
+        }
+      }
+      setRestore(point);
+    });
+    function isLimit2(point2) {
+      const { left, top } = point2;
+      return left >= originX && left <= endX && top >= originY && top <= endY;
+    }
+  }
+  function setRestore(point) {
+    point.setCoords().set({ originY: "top", left: point.originLeft, top: point.originTop });
+  }
   function drawXScale() {
     const { show, startTime: startTime2, range = [0, 23], position = "top", style } = xAxis.time;
     const { show: processTimeShow, range: processTimeRange = [0, 23], style: processTimeStyle } = xAxis.processTime;
@@ -400,18 +498,7 @@ function useBirthProcess(canvas, propItems, emits) {
     });
     canvas.value.add(border);
   }
-  onMounted(() => {
-    nextTick(() => {
-      drawYScale();
-      drawXScale();
-      drawBorder();
-      drawPolyLine();
-      setCanvasEvent();
-    });
-  });
   return {
-    pointTipProps,
-    pointMenuProps,
     clickMenu
   };
 }