cnhis-design-vue 2.1.100 → 2.1.102

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

@@ -152,12 +152,7 @@ export default {
       this.isRightVisible = false;
       const text = this._currentPoint;
       this._currentPoint = '';
-      const obj = {
-        type: text.type,
-        index: text.index,
-        dataIndex: text.dataIndex
-      };
-      this.$emit(`${type}Other`, obj);
+      this.$emit(`${type}Other`, this.getOtherParams(text, false));
     },
     removeOther() {
       this.canvas.forEachObject(obj => {
@@ -232,11 +227,13 @@ export default {
       }
     },
     drawTextDataGroupColList(colList) {
-      const { originY } = this.propItems;
+      const { originY, endX } = this.propItems;
       let textList = [];
       colList.forEach((item, index) => {
         const baseTop = originY + (item.marginTop || 10);
         if (this.isLimit(item.scalevalue)) {
+          const textItemPoints = [];
+          const left = this.cumputedX(item.scalevalue);
           item.dataList.forEach((v, i) => {
             const top = baseTop + i * (item.lineHeight || 15);
             const text = new this.fabric.Text(String(v.value), {
@@ -245,9 +242,8 @@ export default {
               ...item.style,
               originX: 'left',
               originY: 'center',
-              left: this.cumputedX(item.scalevalue),
+              left,
               top,
-              lockMovementX: true,
               lockMovementY: true,
               dataIndex: index,
               index: i,
@@ -255,12 +251,23 @@ export default {
               id: `${index}_${i}_other_${Date.now()}`,
               name: v.value,
               objectCaching: false,
+              origin: {
+                time: item.scalevalue,
+                ...v
+              },
               ...this.eventStyle
             });
-            text.hasControls = text.hasBorders = false;
-            this.setPopup(text);
+            textItemPoints.push(text);
+            this.pointOtherEvent(text);
             textList.push(text);
           });
+          const maxTextWidth = Math.max(...textItemPoints.map(obj => obj.width));
+          const isOverstep = left > endX - maxTextWidth;
+          textItemPoints.forEach((point, _, arr) => {
+            point.maxTextWidth = maxTextWidth;
+            point.siblingPoints = arr.filter(_point => _point.index !== point.index);
+            if (isOverstep) point.setCoords().set('originX', 'right');
+          });
         }
       });
       this.canvas.add(...textList);
@@ -296,6 +303,7 @@ export default {
         this.setMovingEvent(title, originOptions);
         textList.push(title);
         const { icon: _icon = { type: 'circle' }, dataList } = item || {};
+        let prevPoint;
         for (let i = 0, len = dataList.length; i < len; i++) {
           const v = dataList[i];
           if (this.isLimit(v.time)) {
@@ -305,7 +313,8 @@ export default {
               dataIndex: index,
               index: i,
               type: 'list',
-              objectCaching: false
+              objectCaching: false,
+              origin: v
             };
             const left = this.cumputedX(v.time);
             title.dataList.push(left);
@@ -327,20 +336,33 @@ export default {
             });
             const groupObj = new this.fabric.Group([icon, text], {
               id: `${index}_${i}_other_${Date.now()}`,
-              lockMovementX: true,
               lockMovementY: true,
               ...commonOptions,
               ...this.eventStyle,
-              realLeft: left
+              realLeft: left,
+              iconHalfWidth: icon.width / 2
             });
-            groupObj.hasControls = groupObj.hasBorders = false;
-            this.setPopup(groupObj);
+            if (prevPoint) {
+              prevPoint.nextPoint = groupObj;
+              groupObj.prevPoint = prevPoint;
+            }
+            prevPoint = groupObj;
+            this.pointOtherEvent(groupObj);
             textList.push(groupObj);
           }
         }
       }
       this.canvas.add(...textList);
     },
+    emitMouseoverTarget(point) {
+      if (point) {
+        Bus.$emit('mouseoverTarget', true);
+        this.showDrapPopup(point, true);
+      } else {
+        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+        this.isDropVisible = false;
+      }
+    },
     setMovingEvent(point) {
       const { originX, originY, endX, endY } = this.propItems;
       const isLimit = () => point.left >= originX && point.left <= endX && point.top >= originY && point.top <= endY;
@@ -355,11 +377,9 @@ export default {
             point.isClone = true;
           });
         if (isLimit()) {
-          Bus.$emit('mouseoverTarget', true);
-          this.showDrapPopup(point, true);
+          this.emitMouseoverTarget(point);
         } else {
-          !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-          this.isDropVisible = false;
+          this.emitMouseoverTarget();
         }
       });
       point.on('moved', () => {
@@ -367,35 +387,60 @@ export default {
         point.isClone = false;
         this.removeOther();
         this.drawTextDataGroup(this.templateData.other);
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
+        this.emitMouseoverTarget();
         if (isLimit()) {
-          const { type, dataIndex, left, dataList } = point;
-          const time = this.getXValue(left);
+          const { left, dataList } = point;
           const index = dataList.findIndex(_left => _left > left);
           // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
           setTimeout(() => {
-            this.$emit('addOhter', {
-              type,
-              dataIndex,
-              index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index,
-              data: {
-                time
-              }
-            });
+            this.$emit('addOhter', { ...this.getOtherParams(point), index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index });
           });
         }
       });
     },
+    pointOtherEvent(point) {
+      point.hasControls = point.hasBorders = false;
+      this.setPopup(point);
+      // 移动中 实时更新相关联的线的坐标
+      if (this.eventStyle.evented) {
+        const { endX, originX } = this.propItems;
+        point.on('moving', () => {
+          point.setCoords();
+          const { prevPoint, nextPoint } = point;
+          const limitLeft = prevPoint?.left || originX;
+          const limitRight = nextPoint?.left || endX;
+          if (point.left > limitRight) point.set('left', limitRight);
+          if (point.left < limitLeft) point.set('left', limitLeft);
+          if (point.realLeft && point.iconHalfWidth) point.realLeft = point.left + point.iconHalfWidth;
+          if (point.maxTextWidth) {
+            const isOverstep = point.left + point.maxTextWidth > limitRight;
+            const originX = isOverstep ? 'right' : 'left';
+            point.setCoords().set({ originX });
+            point.siblingPoints.forEach(_point => _point.setCoords().set({ originX, left: point.left }));
+          }
+          this.showDrapPopup(point);
+        });
+        point.on('moved', () => {
+          this.isDropVisible = false;
+          this.$emit('otherChange', this.getOtherParams(point));
+        });
+      }
+    },
+    getOtherParams(point, isChange = true) {
+      const { type, dataIndex, left, realLeft, origin, index } = point;
+      return {
+        type,
+        dataIndex,
+        index,
+        data: {
+          ...origin,
+          ...(isChange ? { time: this.getXValue(realLeft ?? left) } : {})
+        }
+      };
+    },
     setPopup(point) {
-      point.on('mouseover', () => {
-        Bus.$emit('mouseoverTarget', true);
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
-      });
+      point.on('mouseover', () => this.emitMouseoverTarget(point));
+      point.on('mouseout', () => this.emitMouseoverTarget());
     },
     // 判断当前时间是否超出网格区域
     isLimit(value) {
@@ -441,12 +486,7 @@ export default {
       const lineHeightText = (obj.style?.fontSize || 12) + 2;
       const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
       const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
-      const addCanvas = point => {
-        point.hasControls = point.hasBorders = false;
-        this.pointEvent(point);
-        this.canvas.add(point);
-        // this.canvas.requestRenderAll();
-      };
+
       const setTop = (lineHeight, i, condition) => {
         if (!~condition.limitIndex) {
           condition.y += i === 0 ? lineHeight / 2 : lineHeight;
@@ -469,6 +509,7 @@ export default {
         };
         const x = this.cumputedX(item[0]);
         if (this.isLimit(item[0])) {
+          const pointList = [];
           item[1].forEach(async (v, i) => {
             const common = {
               left: x,
@@ -482,66 +523,80 @@ export default {
               objectCaching: false
             };
 
-            const eventStyle = !this.eventStyle.evented
-              ? {
-                  lockMovementX: true,
-                  lockMovementY: true
-                }
-              : {};
-
             if (this.isObject(v) && !v.value) {
               common.top = setTop(lineHeightImg, i, condition);
-              const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
-                ...common,
-                ...eventStyle
-              });
-              let ele;
-              if (v?.iconClassName) {
-                ele = await this.createImage(v.iconClassName, v);
-              }
-              const img = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
-                ele: ele || '',
-                ...option
-              });
-              addCanvas(img);
+              const option = {
+                ...obj.iconStyle,
+                ...v,
+                ...common
+              };
+              pointList.push(this.drawMarkPoint(v, option, obj));
             } else if (v.value) {
               if (v.seq) {
                 common.top = setTop(lineHeightSeq, i, condition);
-                // 标记增加序号
-                const circle = await this.createPoint('circle', {
-                  ...common,
-                  radius: 5,
-                  strokeWidth: 1,
-                  stroke: '#000',
-                  fill: 'transparent',
-                  ...(obj.seqStyle?.circle || {})
-                });
-                const text = new this.fabric.Text(String(v.value), {
-                  ...defaultVaule.textStyle,
-                  ...common,
-                  ...(obj.seqStyle?.text || {})
-                });
-                const group = new this.fabric.Group([circle, text], {
-                  ...common,
-                  // hoverCursor: 'default',
-                  ...eventStyle
-                });
-                addCanvas(group);
+                pointList.push(this.drawMarkPoint(v, common, obj));
               } else {
                 common.top = setTop(lineHeightText, i, condition);
-                const text = new this.fabric.Text(String(v.value), {
-                  ...defaultVaule.textStyle,
-                  ...obj.style,
-                  ...common,
-                  ...eventStyle
-                });
-                addCanvas(text);
+                pointList.push(this.drawMarkPoint(v, common, obj));
               }
             }
           });
+          Promise.all(pointList).then(res => this.canvas.add(...res));
         }
       });
-      // this.canvas.add(...textList);
+    },
+    async drawMarkPoint(v, option, obj) {
+      let point;
+      const eventStyle = !this.eventStyle.evented
+        ? {
+            lockMovementX: true,
+            lockMovementY: true
+          }
+        : {};
+      if (this.isObject(v) && !v.value) {
+        let ele;
+        if (v?.iconClassName) {
+          ele = await this.createImage(v.iconClassName, v);
+        }
+        point = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
+          ele: ele || '',
+          ...option,
+          ...eventStyle
+        });
+      } else if (v.value) {
+        if (v.seq) {
+          // 标记增加序号
+          const circle = await this.createPoint('circle', {
+            ...option,
+            radius: 5,
+            strokeWidth: 1,
+            stroke: '#000',
+            fill: 'transparent',
+            ...(obj.seqStyle?.circle || {})
+          });
+          const text = new this.fabric.Text(String(v.value), {
+            ...defaultVaule.textStyle,
+            ...option,
+            ...(obj.seqStyle?.text || {})
+          });
+          point = await new this.fabric.Group([circle, text], {
+            ...option,
+            ...eventStyle
+          });
+        } else {
+          point = await new this.fabric.Text(String(v.value), {
+            ...defaultVaule.textStyle,
+            ...obj.style,
+            ...option,
+            ...eventStyle
+          });
+        }
+      }
+
+      point.hasControls = point.hasBorders = false;
+      this.pointEvent(point);
+
+      return point;
     },
     pointEvent(point) {
       this.setPopup(point);
@@ -653,8 +708,5 @@ export default {
       }
     }
   }
-  // render(h) {
-  //   return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  // }
 };
 </script>

package/packages/fabric-chart/src/mixins/draw.js

@@ -150,7 +150,7 @@ export default {
       return new this.fabric.Circle({
         objectCaching: false,
         strokeWidth: 1,
-        radius: data.width / 2,
+        radius: data.width ? data.width / 2 : data.radius,
         scale: 1,
         fill: '#fff',
         ...data

package/packages/table-filter/src/base-search-com/BaseSearch.vue

@@ -1805,6 +1805,7 @@ export default create({
       this.outRelationQuickSearch = [];
       let mySearchFieldList = JSON.parse(JSON.stringify(this.searchFieldList)).filter(i => ((i.random_key = this.getFiledRandom_key(i)), i.isShowSearch == 1 && i.filterExplicit == 1));
       this.outSearchFieldList = mySearchFieldList;
+      this.sourceTrigger = 'baseSearch'
       // 跨表
       let outRelationQuickSearch = this.relationTableList.map(item => {
         return {

package/packages/table-filter/src/components/render-widget/components/Text.vue

@@ -0,0 +1,58 @@
+<template>
+  <Input
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-model="valueCp"
+    class="widget-input"
+  >
+    <template v-if="showPrefix" #prefix>
+      <Checkbox v-model="componentCfg.isAccurateSearch">精准查询</Checkbox>
+    </template>
+  </Input>
+</template>
+
+<script>
+import { Input, Checkbox } from 'ant-design-vue';
+
+export default {
+  inheritAttrs: false,
+  components: {
+    Input,
+    Checkbox
+  },
+  props: {
+    value: {
+      type: [Array, String, Number],
+    },
+    componentCfg: {
+      type: Object
+    },
+    isQuick: {type: Boolean, default: false}
+  },
+  model: {
+    prop: "value",
+    event: "update:value"
+  },
+  computed: {
+    valueCp: {
+      set(val) {
+        this.$emit("update:value", val);
+      },
+      get() {
+        return this.value;
+      }
+    },
+    showPrefix() {
+      return !this.isQuick && this.componentCfg?.widgetCfg?.accurateSearch?.switchEnable
+    }
+  },
+  methods: {},
+}
+</script>
+<style lang='less'>
+.widget-input {
+  .ant-input:not(:first-child) {
+    padding-left: 100px;
+  }
+}
+</style>

package/packages/table-filter/src/components/render-widget/components/index.js

@@ -4,6 +4,7 @@ import NumberRange from './NumberRange.vue';
 import DateRangeQuick from './DateRangeQuick.vue';
 import SelectDynamic from './SelectDynamic.vue';
 import Label from './Label.vue';
-import SelectLabel from './SelectLabel.vue'
+import SelectLabel from './SelectLabel.vue';
+import Text from './Text.vue';
 
-export { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel };
+export { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel, Text };

package/packages/table-filter/src/components/render-widget/index.vue

@@ -58,7 +58,15 @@ export default {
       if(cfg?.fieldType?.includes?.('DATE') && cfg?.widgetCfg?.rangeFilter) {
         defW = 350
       }
-      return `${cfg.advanceColWidth||defW}px`;
+      const isInputSwitchEnable = cfg?.fieldType === WidgetTypeEnums.INPUT && cfg?.widgetCfg?.accurateSearch?.switchEnable
+      if(isInputSwitchEnable) {
+        defW = 300
+      }
+      let width = cfg.advanceColWidth;
+      if (width && !isNaN(+width) && isInputSwitchEnable) {
+        width = +width + 100;
+      }
+      return `${width||defW}px`;
     },
     getEleMinWidth(cfg){
       if(!this.isQuick) return `${cfg.advanceColWidth|| 195}px`;
@@ -76,11 +84,11 @@ export default {
       if (customPlaceholder) {
         Props.placeholder = customPlaceholder;
       }
-      if(widgetType === 'SELECT_DYNAMIC') {
+      if(widgetType === WidgetTypeEnums.SELECT_DYNAMIC) {
         Props.dropdownVisibleChangeRender = this.dropdownVisibleChangeRender;
         Props.handleWordBookSearchRender = this.handleWordBookSearchRender;
       }
-      if(widgetType === 'LABEL' || widgetType === 'SELECT_LABEL') {
+      if(widgetType === WidgetTypeEnums.LABEL || widgetType === WidgetTypeEnums.SELECT_LABEL) {
         Props.getLabelListMethodRender = this.getLabelListMethodRender;
       }
       this.initialProps = Props;

package/packages/table-filter/src/components/render-widget/widgetCfgMaps.js

@@ -1,6 +1,6 @@
 import { WidgetTypeEnums, DatePresetValEnums } from './enums';
 import { InputNumber, Input, DatePicker } from 'ant-design-vue';
-import { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel } from './components';
+import { CheckboxGroup, Select, NumberRange, DateRangeQuick, SelectDynamic, Label, SelectLabel, Text } from './components';
 import moment from 'moment';
 import { presetValToTimestamp } from './helpers/presetValToTimestamp';
 
@@ -34,7 +34,7 @@ export const WidgetCfgMaps = new Map([
   [
     WidgetTypeEnums.INPUT,
     {
-      component: Input,
+      component: Text,
       props: {
         allowClear: true
       },
@@ -48,8 +48,8 @@ export const WidgetCfgMaps = new Map([
           }
         }
       ],
-      handlerProps(props, { title } = {}) {
-        const Props = { ...props, placeholder: `请输入${title}` };
+      handlerProps(props, { title, isQuick } = {}) {
+        const Props = { ...props, placeholder: `请输入${title}`, isQuick };
         return Props;
       },
       setDefaultValue: SetDefVal
@@ -284,5 +284,5 @@ export const WidgetCfgMaps = new Map([
         return defaultValue;
       }
     }
-  ],
+  ]
 ]);

package/packages/table-filter/src/mixins/renderWidget.js

@@ -13,6 +13,11 @@ function randomkey() {
 const BlockEle = [WidgetTypeEnums.CHECKBOX_GROUP, WidgetTypeEnums.DATE_RANGE_QUICK, WidgetTypeEnums.CHECKBOX_GROUP, WidgetTypeEnums.LABEL];
 
 export default {
+  data() {
+    return {
+      sourceTrigger: ''
+    };
+  },
   methods: {
     isRender(cfg) {
       return cfg.widgetCfg?.isRender;
@@ -31,12 +36,18 @@ export default {
       const isRender = this.isRender(cfg);
       if (!isRender) return isRender;
 
-      const { widgetType } = cfg.widgetCfg || {};
+      let { widgetType } = cfg.widgetCfg || {};
 
       this.$set(cfg, '_frontId', randomkey());
       this.$set(cfg, 'isRender', isRender);
       this.$set(cfg, 'widgetType', widgetType);
       this.$set(cfg, 'con', 'EQ');
+      // 高级筛选中不处理
+      let { switchEnable = false, searchKey = '' } = cfg.widgetCfg?.accurateSearch || {};
+      if (this.sourceTrigger === 'baseSearch' && cfg.widgetType === WidgetTypeEnums.INPUT && switchEnable) {
+        this.$set(cfg, 'isAccurateSearch', false);
+        this.$set(cfg, 'accurateSearchKey', searchKey);
+      }
 
       if (BlockEle.includes(widgetType)) this.$set(cfg, '_isBlock', true);
 
@@ -47,7 +58,7 @@ export default {
     getRenderSearchConObj(cfg) {
       const isRender = this.isRender(cfg);
       if (!isRender) return null;
-      const { columnName, con, value, widgetType } = cfg;
+      const { columnName, con, value, widgetType, widgetCfg, isAccurateSearch, accurateSearchKey } = cfg;
 
       let unit = null;
       // 时间组件 unit 设置为自定义
@@ -57,13 +68,18 @@ export default {
       }
 
       const val = Array.isArray(value) ? value : value ? [value] : [];
-
-      return {
+      let obj = {
         field_key: columnName,
         con,
         value: val.length > 0 ? val : null,
         unit
       };
+
+      if (widgetType === WidgetTypeEnums.INPUT && widgetCfg?.accurateSearch?.switchEnable) {
+        obj.isAccurateSearch = isAccurateSearch;
+        obj.accurateSearchKey = accurateSearchKey;
+      }
+      return obj;
     },
     getDefValByRenderConObj(conObj, cfg) {
       const isRender = this.isRender(cfg);
@@ -87,7 +103,7 @@ export default {
     resetRenderWidgetValue(cfg) {
       const isRender = this.isRender(cfg);
       if (!isRender) return isRender;
-      if (cfg.widgetType == 'DATE_RANGE_QUICK') {
+      if (cfg.widgetType == WidgetTypeEnums.DATE_RANGE_QUICK) {
         cfg.con = undefined;
       }
       cfg.value = undefined;

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -826,6 +826,7 @@ export default create({
     return {
       modalVisible: this.visible,
       showInner: false,
+      showInnerOutFilterConOBj: [], // 保存到分类时, 携带外部条件
       quickSearch: [],
       relationTableList: [], // 跨表查询
       relationQuickSearch: [], // 跨表查询检索条件
@@ -851,6 +852,7 @@ export default create({
       showAdd: false,
       addVal: "",
       fetchingWordbook: false,
+
       ...dataOptions
     };
   },
@@ -1372,12 +1374,14 @@ export default create({
       this.isChangeWindow = false;
     },
     // 填写搜索设置条件后打开新增搜索分类名称弹框
-    openSaveToCalss() {
+    openSaveToCalss(outFilterConOBj = []) {
       let conObj = this.getConObjParams();
       if (!conObj) return;
       if (conObj.length > 0) {
         if (!this.validConObj(conObj, this.searchFieldList, this.searchFieldLimit)) return;
         this.showInner = true;
+        // 保存到分类时, 携带外部条件
+        this.showInnerOutFilterConOBj = outFilterConOBj
       } else {
         this.$message.warning(this.getI18nText('1.1.6.18', '请设置搜索条件'), 2);
       }
@@ -1591,6 +1595,9 @@ export default create({
           conObj = [];
         }
         let displayCategory = this.parentNames.filter(item => item.selected)[0]?.value;
+        if(this.showInnerOutFilterConOBj?.length) {
+          conObj.push(...this.showInnerOutFilterConOBj)
+        }
         let params = {
           tableId: this.$attrs.tableId || "",
           setting: JSON.stringify({
@@ -1672,6 +1679,7 @@ export default create({
         let res = await this.handleGetConfigApi(params, 'requestSaveTableCondiTion');
         if (!res) return;
         this.showInner = false;
+        this.showInnerOutFilterConOBj = [];
         this.formInner.resetFields();
         this.$emit("updateTableCondiTion");
         this.clearData();
@@ -1682,6 +1690,7 @@ export default create({
     },
     cancelSaveToCalss() {
       this.showInner = false;
+      this.showInnerOutFilterConOBj = [];
     },
     // 清空快速搜索设置条件
     clearData() {