cnhis-design-vue 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "基于 Ant Desgin Vue 的UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

package/packages/big-table/index.js

@@ -1,10 +1,16 @@
 // 导入组件
 import BigTable from './src/BigTable.vue';
+import Fieldset from './src/Fieldset.vue';
 
 // 为组件提供 install 安装方法，供按需引入
 BigTable.install = function(Vue) {
   Vue.component(BigTable.name, BigTable);
+  Vue.component(Fieldset.name, Fieldset);
 };
 
+Object.assign(BigTable, {
+  Fieldset
+});
+
 // 默认导出组件
 export default BigTable;

package/packages/big-table/src/BigTable.vue

@@ -46,6 +46,7 @@
     </div>
     <c-grid
       border
+      show-overflow
       show-header-overflow
       highlight-hover-row
       highlight-current-row
@@ -71,6 +72,7 @@
       @sort-change="sortChange"
       @scroll="handlerScroll"
       @cell-mouseenter="handleCellMouseenter"
+      :tooltip-config="{ enterable: false }"
       :checkbox-config="{
         checkField: 'checked',
         labelField: 'checked',
@@ -152,6 +154,7 @@ import batchEditing from './utils/batchEditing';
 import EditForm from './components/edit-form/EditForm.vue';
 
 import nestTable from './utils/nestTable';
+import bigTableProps from './utils/bigTableProps';
 
 let addInlineEditPrimaryKey = '';
 export default create({
@@ -172,93 +175,7 @@ export default create({
     [VideoList.name]: VideoList
   },
   mixins: [format, batchEditing, nestTable],
-  props: {
-    data: Array,
-    MAX_CHECK_SIZE: [String, Number],
-    showFooter: Boolean,
-    sumData: Object,
-    avgData: Object,
-    columnConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    refreshRow: Number,
-    relatedItems: {
-      type: Object,
-      default: () => {
-        return {
-          triggerMethodPc: '', // 相关项打开方式
-          triggerMethodField: '' // 相关项打开字段
-        };
-      }
-    },
-    pageVO: {
-      type: Object,
-      default: () => {
-        return {
-          pageIndex: 1, // 当前第几页
-          pageSize: 20, // 每页几条数据
-          total: 20 // 总数多少条
-        };
-      }
-    },
-    tableOptions: Object,
-    quickSearchConfig: Array,
-    primaryKey: String,
-    tableDataCache: {
-      type: Array,
-      default: () => []
-    },
-    oldtableData: {
-      // 原始数据
-      type: Array,
-      default: () => []
-    },
-    tableName: String,
-    fieldListOriginal: Array,
-    tableParams: Object,
-    emptyItems: {
-      type: Object,
-      default: () => {
-        return {
-          noDataImg: 'nodata',
-          noDataTip: ''
-        };
-      }
-    },
-    styleSetting: Object,
-    sysImageSize: Array,
-    height: String,
-    groupCountFields: Array,
-    groupCountMap: Object,
-    listFormUnionSetting: Object,
-    inlineEditFormConfig: Object,
-    clickRowData: Object,
-    btnList: Array,
-    spinning: Boolean,
-    rowGroupSetting: Object,
-    inlineEditFormSubmitDone: Boolean,
-    isInlineOperating: Boolean,
-    inlineEditCurrentOperateBtnId: String,
-    tableRefreshCache: Object, // 记录需要刷新的列表，当切换到当前列表时更新
-    userInfo: Object,
-    isInlineEditing: Boolean,
-    isInlineAdding: Boolean,
-    isInlineSave: Boolean,
-    isInlineCancel: Boolean,
-    resetInlineEdit: Function, // 重置状态（不包含编辑、新增状态)
-    resetEditRowStatus: Function, // 重置编辑行保存表单相关状态
-    pageIndexOldtableData: {
-      // 原始数据
-      type: Array,
-      default: () => []
-    },
-    submitForm: Function,
-    isMatchComponent: Boolean,
-    asyncCount: Boolean
-  },
+  props: Object.assign({}, bigTableProps),
   beforeCreate() {
     Vue.use(Button)
       .use(Checkbox)
@@ -362,7 +279,7 @@ export default create({
       };
     },
     treeConfig() {
-      let result = {};
+      let result = null;
       switch (Number(this.isTree)) {
         case 1:
         case 3:
@@ -566,7 +483,6 @@ export default create({
     async loadData(data) {
       this.isShowEmpty = !data?.length;
 
-      const startTime = Date.now();
       const list = JSON.parse(JSON.stringify(data));
 
       let table = this.$refs.xGrid;
@@ -595,7 +511,6 @@ export default create({
 
       this.setGroupTreeExpand();
       this.resetTableInlineEditStatus();
-      console.log('--------------loadData-----------', Date.now() - startTime);
     },
     setGroupTreeExpand() {
       let isExpand = this.isTree == 1 && this.isExpand == 1 && this.total < 1001;
@@ -2252,10 +2167,10 @@ export default create({
         return { rowspan: 1, colspan: 0 };
       }
     },
-    handleCellMouseenter({ column }, evnt) {
+    handleCellMouseenter({ column, $event }) {
       // vxe-table@2.10+  触发tooltip给vxe-cell父节点设置了title 导致显示有误
       if (column.showOverflow === 'title') {
-        const target = evnt?.currentTarget;
+        const target = $event?.currentTarget;
         const cls = target?.className;
         const bodyCls = ' vxe-body--column ';
         if (cls && ` ${cls} `.includes(bodyCls) && target && target.hasAttribute('title')) {
@@ -2662,7 +2577,7 @@ export default create({
       this.$refs.xGrid.setCurrentRow(row);
       this.$emit('setNestTableClick', this.isNestTable);
       this.$emit('setCurRowIndex', index);
-      this.$emit('linkDetail', row, col, row[this.handleRowId]);
+      this.$emit('linkDetail', row, col, row[this.handleRowId], null, false, index);
     },
     // 按钮事件
     clickBtn(row, btn, index, e, j) {
@@ -2671,7 +2586,7 @@ export default create({
       this.recordClickBtnInfo(row, index);
       this.$emit('setNestTableClick', this.isNestTable);
       this.$emit('setCurRowIndex', index);
-      this.$emit('clickBtn', row, btn, row[this.handleRowId]);
+      this.$emit('clickBtn', row, btn, row[this.handleRowId], index);
       // this.handleTopBtnTracher(btn, j);
     },
     recordClickBtnInfo(row, index) {
@@ -2999,11 +2914,13 @@ export default create({
      */
     tableUpdateData(data, oldIndex) {
       if (this.isNestTable) return;
+      if (!this.originFormatList[oldIndex]) return;
       let formatData = this.setChecklist(data) || [];
       let vxeTable = this.$refs.xGrid;
       this.originFormatList.splice(oldIndex, 1, formatData[0]);
       vxeTable.loadData(this.originFormatList);
       this.$emit('triggerSpinning', false);
+      this.$emit('handlerClickRow', formatData[0], oldIndex);
     }
   }
 });

package/packages/big-table/src/Fieldset.vue

@@ -295,10 +295,10 @@
 </template>
 <script>
 import draggable from 'vuedraggable';
-
+import create from '@/core/create';
 const DEFLAYOUTPCNAME = '资料';
-export default {
-  name: 'Fieldset',
+export default create({
+  name: 'fieldset',
   props: {
     // tableId: String,
     fields: Array,
@@ -1545,7 +1545,7 @@ export default {
       return ele.sid != '0001' && find;
     }
   }
-};
+});
 </script>
 <style scoped lang="less">
 ul {

package/packages/big-table/src/utils/bigTableProps.js

@@ -0,0 +1,82 @@
+const bigTableProps = {
+  data: { type: Array, default: () => [] },
+  MAX_CHECK_SIZE: [String, Number],
+  showFooter: Boolean,
+  sumData: { type: Object, default: () => ({}) },
+  avgData: { type: Object, default: () => ({}) },
+  columnConfig: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+  refreshRow: Number,
+  relatedItems: {
+    type: Object,
+    default: () => {
+      return {
+        triggerMethodPc: '', // 相关项打开方式
+        triggerMethodField: '' // 相关项打开字段
+      };
+    }
+  },
+  pageVO: {
+    type: Object,
+    default: () => {
+      return {
+        pageIndex: 1, // 当前第几页
+        pageSize: 20, // 每页几条数据
+        total: 20 // 总数多少条
+      };
+    }
+  },
+  tableOptions: { type: Object, default: () => ({}) },
+  quickSearchConfig: { type: Array, default: () => [] },
+  primaryKey: String,
+  tableDataCache: { type: Array, default: () => [] },
+  oldtableData: { type: Array, default: () => [] }, // 原始数据
+  tableName: String,
+  fieldListOriginal: { type: Array, default: () => [] },
+  tableParams: { type: Object, default: () => ({}) },
+  emptyItems: {
+    type: Object,
+    default: () => {
+      return {
+        noDataImg: 'nodata',
+        noDataTip: ''
+      };
+    }
+  },
+  styleSetting: { type: Object, default: () => ({}) },
+  sysImageSize: { type: Array, default: () => [] },
+  height: String,
+  groupCountFields: { type: Array, default: () => [] },
+  groupCountMap: { type: Object, default: () => ({}) },
+  listFormUnionSetting: { type: Object, default: () => ({}) },
+  inlineEditFormConfig: { type: Object, default: () => ({}) },
+  clickRowData: { type: Object, default: () => ({}) },
+  btnList: { type: Array, default: () => [] },
+  spinning: Boolean,
+  rowGroupSetting: { type: Object, default: () => ({}) },
+  inlineEditFormSubmitDone: Boolean,
+  isInlineOperating: Boolean,
+  inlineEditCurrentOperateBtnId: String,
+  tableRefreshCache: { type: Object, default: () => ({}) }, // 记录需要刷新的列表，当切换到当前列表时更新
+  userInfo: { type: Object, default: () => ({}) },
+  isInlineEditing: Boolean,
+  isInlineAdding: Boolean,
+  isInlineSave: Boolean,
+  isInlineCancel: Boolean,
+  resetInlineEdit: Function, // 重置状态（不包含编辑、新增状态)
+  resetEditRowStatus: Function, // 重置编辑行保存表单相关状态
+  pageIndexOldtableData: {
+    // 原始数据
+    type: Array,
+    default: () => []
+  },
+  submitForm: Function,
+  isMatchComponent: Boolean,
+  asyncCount: Boolean
+};
+
+export default bigTableProps;

package/packages/color-picker/src/color-picker.vue

@@ -3,7 +3,7 @@
     <!-- 颜色显示小方块 -->
     <div class="colorBtn" v-bind:style="`background-color: ${showColor}`" @click="openPanel" v-bind:class="{ disabled: disabled }"></div>
     <!-- 颜色色盘 -->
-    <div class="box" v-bind:class="{ open: openStatus }">
+    <div class="box" ref="colorPickerBox" v-clickoutside="handleClickOutside" v-bind:class="{ open: openStatus }">
       <div class="hd">
         <div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
         <div class="defaultColor" @click="handleDefaultColor" @mouseover="hoveColor = defaultColor" @mouseout="hoveColor = null">
@@ -40,9 +40,14 @@
  * @desc 一个颜色选择器
  * @time 2021-05-11
  */
+
 import create from '@/core/create';
+
+import Clickoutside from '@/utils/clickoutside';
+
 export default create({
   name: 'color-picker',
+  directives: { Clickoutside },
   props: {
     // 当前颜色值
     value: {
@@ -113,9 +118,13 @@ export default create({
     }
   },
   methods: {
-    openPanel() {
+    openPanel(e) {
       if (this.disabled) return;
       this.openStatus = !this.openStatus;
+      const domNode = e.currentTarget;
+      const boxNode = this.$refs['colorPickerBox'];
+      const { left, bottom } = domNode && domNode.getBoundingClientRect();
+      boxNode.setAttribute('style', `left:${left}px;top:${bottom}px;`);
     },
     triggerHtml5Color() {
       this.$refs.html5Color.click();
@@ -169,6 +178,9 @@ export default create({
         gradientColorArr.push(this.rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])));
       }
       return gradientColorArr;
+    },
+    handleClickOutside() {
+      this.openStatus = false;
     }
   }
 });

package/packages/color-picker/src/style.less

@@ -30,7 +30,7 @@
     padding-bottom: 5px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
     opacity: 0;
-    transition: all 0.3s ease;
+    transition: opacity 0.3s ease;
     box-sizing: content-box;
     h3 {
       margin: 0;

package/packages/fabric-chart/src/FabricChart.vue

@@ -25,7 +25,6 @@
         <fabric-text-group
           v-if="hasXScalevalue"
           :templateData="templateData"
-          :other="templateData.other"
           v-on="$listeners"
         ></fabric-text-group>
         <fabric-grid></fabric-grid>

package/packages/fabric-chart/src/const/defaultVaule.js

@@ -33,7 +33,26 @@ const data = {
     strokeWidth: 1, // 描边宽度
     originX: 'center',
     originY: 'center'
-  }
+  },
+  topSpaceHeight: 10, // templateData.top.spaceHeight
+  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
+  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
+  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
+  topTotal: {
+    title: '总量',
+    width: 0,
+    style: {
+      fontFamily: '微软雅黑',
+      fontSize: 12,
+      fill: '#000',
+      lineHeight: 1
+    }
+  },
+  criticalStyle: { // 危急值样式
+    stroke: 'purple', // 颜色 默认 #999
+    strokeWidth: 1, // 线宽 默认 1
+    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
+  },
 };
 
 export default data;

package/packages/fabric-chart/src/fabric-chart/FabricCanvas.vue

@@ -7,11 +7,8 @@
 
 <script>
 import { fabric } from 'fabric';
+import defaultVaule from '../const/defaultVaule';
 
-const topSpaceHeight = 10; // templateData.top.spaceHeight
-const topSpaceGridNumber = 3; // templateData.top.xScalevalue.spaceGridNumber
-const leftSpaceGridNumber = 2; // templateData.left.leftYScalevalue.spaceGridNumber
-const rightSpaceGridNumber = 2; // templateData.right.rightYScalevalue.spaceGridNumber
 export default {
   name: 'FabricCanvas',
   props: {
@@ -67,31 +64,31 @@ export default {
           endYTop: this.endYTop,
           treeList: this.treeList,
           xScaleList: this.xScaleList,
-          // xScaleCell: this.xScaleCell,
           xScaleCellList: this.xScaleCellList,
           yScaleCellLeft: this.yScaleCellLeft,
           yScaleCellRight: this.yScaleCellRight,
           eventStyle: this.eventStyle,
+          topTotal: this.topTotal
         };
       }
     };
   },
-    created() {
-      if (!this.templateData.top) {
-        try {
-          throw new Error('缺少顶部数据对象, 无法生成水平方向刻度');
-        } catch (error) {
-          console.warn(error);
-        }
+  created() {
+    if (!this.templateData.top) {
+      try {
+        throw new Error('缺少顶部数据对象, 无法生成水平方向刻度');
+      } catch (error) {
+        console.warn(error);
       }
-      if (!this.templateData.left || !this.templateData.right) {
-        try {
-          throw new Error('缺少左/右侧数据对象, 无法生成垂直方向刻度');
-        } catch (error) {
-          console.warn(error);
-        }
+    }
+    if (!this.templateData.left || !this.templateData.right) {
+      try {
+        throw new Error('缺少左/右侧数据对象, 无法生成垂直方向刻度');
+      } catch (error) {
+        console.warn(error);
       }
-    },
+    }
+  },
   computed: {
     canvasWidth() {
       // 画布宽度
@@ -104,13 +101,16 @@ export default {
     treeTableminCellWidth() {
       return this.templateData.top?.treeTableminCellWidth || this.templateData.left?.titleWidth || 20;
     },
+    topTotal() {
+      return this.templateData.top?.total ? { ...defaultVaule.topTotal, ...this.templateData.top.total } : defaultVaule.topTotal;
+    },
     gridXNumber() {
       // 网格水平方向总数    如果设置了默认值就直接取用
       if (this.templateData.table.mainXCell && this.templateData.table.subXCell) {
         return this.templateData.table.mainXCell * this.templateData.table.subXCell;
       }
       // 如果没设置 就从顶部列表内自己计算一下 list遍历后将每一项完全展开后的数组长度存入topListLength取出最大值即可
-      const spaceGridNumber = this.templateData.top?.xScalevalue?.spaceGridNumber || topSpaceGridNumber;
+      const spaceGridNumber = this.templateData.top?.xScalevalue?.spaceGridNumber || defaultVaule.topSpaceGridNumber;
       return (this.templateData.top?.xScalevalue?.list?.length || 1) * spaceGridNumber;
     },
     gridYNumber() {
@@ -127,12 +127,12 @@ export default {
       // 顶部列表高度 网格不需要的高度放到顶部，因为底部不一定存在列表
       const topHeight = this.endYTop;
       const residue = (this.endY - topHeight) % this.gridYNumber;
-      return topHeight + residue + (this.templateData.top?.spaceHeight || topSpaceHeight);
+      return topHeight + residue + (this.templateData.top?.spaceHeight || defaultVaule.topSpaceHeight);
     },
     endX() {
       // 网格区域水平方向最大坐标值, 也是整个画布右侧列表坐标起始值，网格右下角x轴坐标值
-      if (!this.templateData.right) return this.templateData.canvasWidth;
-      return this.templateData.canvasWidth - this.templateData.right.width;
+      if (!this.templateData.right && !this.topTotal) return this.templateData.canvasWidth;
+      return this.templateData.canvasWidth - (this.templateData.right?.width || 20) - this.topTotal.width;
     },
     endY() {
       // 画布高度 - 底部列表高度 ，网格右下角y轴坐标值
@@ -152,7 +152,7 @@ export default {
       // 头部表格底部空白位置的高，用于显示x轴时间点
       const topHeight = this.endYTop;
       const residue = (this.endY - topHeight) % this.gridYNumber;
-      return residue + (this.templateData.top?.spaceHeight || topSpaceHeight);
+      return residue + (this.templateData.top?.spaceHeight || defaultVaule.topSpaceHeight);
     },
     yCellHeightTop() {
       // 头部表格垂直方向网格高度
@@ -166,7 +166,7 @@ export default {
       const list = this.templateData.top?.xScalevalue?.list || [];
       return list.map(item => {
         return new Date(item).getTime();
-      })
+      });
     },
     // x轴每个网格每1px的毫秒值和每个网格刻度对应的时间戳和每个网格对应的像素px值，返回一个list数组
     xScaleCellList() {
@@ -183,29 +183,24 @@ export default {
               time: v + i * cellTime, // 网格刻度对应的时间戳
               xScaleTime: scaleCellTime // 每个网格每1px的毫秒值
             });
-          } 
+          }
         }
-      })
+      });
       return list;
     },
-    // // x轴每分钟的宽度值，不能刻度list长度值除以总格子数计算，因为有可能刻度比较短，不能满足所有的格子
-    // // x轴每毫秒的宽度值
-    // xScaleCell() {
-    //   return this.xCellWidth / ((this.xScaleList[1] - this.xScaleList[0]) / this.templateData.top.xScalevalue.spaceGridNumber);
-    // },
     // y轴每mmHg的脉搏/血压的高度值
     yScaleCellLeft() {
       const list = this.templateData.left?.leftYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.left?.leftYScalevalue?.spaceGridNumber || leftSpaceGridNumber)) : 10;
+      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.left?.leftYScalevalue?.spaceGridNumber || defaultVaule.leftSpaceGridNumber)) : 10;
     },
     // y轴每摄氏度的高度值
     yScaleCellRight() {
       const list = this.templateData.right?.rightYScalevalue?.list || [];
-      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.right?.rightYScalevalue?.spaceGridNumber || rightSpaceGridNumber)) : 10;
+      return list?.length ? this.yCellHeight / ((parseInt(list[1]) - parseInt(list[0])) / (this.templateData.right?.rightYScalevalue?.spaceGridNumber || defaultVaule.rightSpaceGridNumber)) : 10;
     },
     eventStyle() {
-      return this.templateData.table?.eventStyle || {selectable: true,evented: true};
-    },
+      return this.templateData.table?.eventStyle || { selectable: true, evented: true };
+    }
   },
   mounted() {
     this.init();
@@ -227,7 +222,7 @@ export default {
     getGridYnumberTop(list) {
       // 头部表格垂直方向网格总数
       for (let i = 0; i < list.length; i++) {
-        if (list[i].children?.length) {
+        if (list[i]?.children?.length) {
           this.getGridYnumberTop(list[i].children);
         } else {
           this.gridYnumberTop++;
@@ -245,24 +240,25 @@ export default {
       const arr = [];
       const { treeTableminCellWidth, treeTableminCellHeight } = this.templateData.top;
       for (let i = 0; i < list.length; i++) {
+        const node = list[i];
         const obj = {};
         Object.assign(obj, {
-          title: list[i].title || '',
+          title: node.title || '',
           left: levelCol * treeTableminCellWidth,
           top: this.levelRow * treeTableminCellHeight
         });
         this.levelRow++;
-        if (list[i].children?.length) {
+        if (node?.children?.length) {
           this.levelRow--;
           obj.title = obj.title.split('').join('\n'); // 如果有子级则文字竖形排列
           obj.width = treeTableminCellWidth;
-          obj.children = this.setTreeStyle(list[i].children, levelCol + 1);
-          obj.subSize = this.getChildrenSize(list[i].children);
+          obj.children = this.setTreeStyle(node.children, levelCol + 1);
+          obj.subSize = this.getChildrenSize(node.children);
           obj.height = obj.subSize * treeTableminCellHeight;
         } else {
           obj.width = this.originX - obj.left;
           obj.height = treeTableminCellHeight;
-          obj.lineList = JSON.parse(JSON.stringify(list[i].lineList));
+          obj.lineList = JSON.parse(JSON.stringify(node.lineList));
         }
         arr.push(obj);
       }
@@ -271,7 +267,7 @@ export default {
     getChildrenSize(list) {
       let subSize = 0;
       for (let i = 0; i < list.length; i++) {
-        if (list[i].children?.length) {
+        if (list[i]?.children?.length) {
           subSize += this.getChildrenSize(list[i].children);
         } else {
           subSize += 1;