cnhis-design-vue 2.1.140 → 2.1.143

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

@@ -14,7 +14,7 @@ import DropPopup from '../components/DropPopup';
 import MouseRightClick from '../components/MouseRightClick';
 import eventCommon from '../mixins/eventCommon';
 import Bus from '../utils/bus';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isNumber } from 'lodash';
 import { sortByTime } from '../utils';
 
 const rightClickNode = [
@@ -69,6 +69,8 @@ export default {
   data() {
     this.markData = sortByTime(cloneDeep(this.templateData.bottom?.list));
     this.markObjs = [];
+    this.otherListPointHeightRange = [];
+    this.inputObj = null;
     return {
       leftStartX: 0,
       isDropVisible: false,
@@ -79,7 +81,11 @@ export default {
       activeEvent: null // 当前可右键活动的对象
     };
   },
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      document.addEventListener('keydown', this.handleInputBoxEnterEvent, true);
+    });
+  },
   computed: {
     girdLineStyle() {
       return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
@@ -123,18 +129,82 @@ export default {
     },
     createEvent() {
       this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          if (this.isGridLimit(x, y)) {
+        const { button, target, pointer } = event;
+        const { x, y } = pointer;
+        if (this.isGridLimit(x, y)) {
+          if (button === 3) {
             this.activeEvent = event;
             !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
             this.isAddEventListenerContextmenu = true;
           }
+          if (button === 1) {
+            if (!this.otherListPointHeightRange?.length || this.inputObj) return;
+            if (target?.id && (!target?.id?.includes('_other') || target?.type !== 'list' || target.isTitle)) return;
+            let content = '';
+            if (target) {
+              if (target.moving) {
+                target.moving = false;
+                return;
+              } else {
+                content = target.origin?.value?.toString();
+              }
+            }
+            const item = this.otherListPointHeightRange.find(({ y1, y2 }) => y >= y1 && y <= y2);
+            if (isNumber(item?.dataIndex)) {
+              this.inputObj = new this.fabric.Textbox(content, {
+                left: x,
+                top: y,
+                width: 100,
+                height: 100,
+                fontSize: 18,
+                objectCaching: false,
+                hasControls: false,
+                borderColor: '#000',
+                editingBorderColor: '#000',
+                backgroundColor: '#fff',
+                fontFamily: '微软雅黑',
+                otherListPointHeightRangeItem: { ...item, left: x, target }
+              });
+              this.canvas.add(this.inputObj).setActiveObject(this.inputObj);
+              this.inputObj.enterEditing();
+              if (content) {
+                this.inputObj.setSelectionEnd(content.length);
+              }
+            }
+          }
+        }
+      });
+
+      this.canvas.on('selection:cleared', ({ deselected }) => {
+        if (deselected?.find(obj => obj.otherListPointHeightRangeItem)) {
+          let { text, otherListPointHeightRangeItem } = this.inputObj;
+          text = text.replace(/^\s+|\s+$/g, '');
+          this.canvas.remove(this.inputObj);
+          this.inputObj = null;
+          if (!text) return;
+          const { dataList, left, target } = otherListPointHeightRangeItem;
+          if (target) {
+            const params = this.getOtherParams(target);
+            if (text == target.origin?.value) return;
+            this.$emit('otherChange', { ...params, data: { ...params.data, value: text } });
+          } else {
+            const index = dataList.findIndex(_left => _left > left);
+            const params = this.getOtherParams(otherListPointHeightRangeItem);
+            this.$emit('addOhter', { ...params, index: !~index ? dataList.length : index, data: { ...params.data, value: text } });
+          }
         }
       });
 
       Bus.$on('deleteOther', otherList => this.$emit('deleteOther', otherList));
     },
+    handleInputBoxEnterEvent(e) {
+      if (!this.inputObj || ![13, 27].includes(e.keyCode)) return;
+      if (e.keyCode === 27) {
+        this.inputObj.text = '';
+      }
+      this.inputObj.exitEditing();
+      this.canvas.discardActiveObject(this.inputObj);
+    },
     // 打开右键菜单
     openRightModal() {
       // 一下方法不会生效，因为，polylines组件中timeRangeData.enabled设置为false操作晚于当前操作，需换一种方式
@@ -288,6 +358,7 @@ export default {
       this.canvas.add(...textList);
     },
     async drawTextDataGroupList(list) {
+      this.otherListPointHeightRange = [];
       let textList = [];
       const { originX, originY } = this.propItems;
       let top = originY + 10;
@@ -313,10 +384,18 @@ export default {
           hasBorders: false,
           ...originOptions,
           ...this.eventStyle,
-          dataList: []
+          dataList: [],
+          isTitle: true
         });
         this.setMovingEvent(title, originOptions);
         textList.push(title);
+        this.otherListPointHeightRange.push({
+          type: 'list',
+          dataIndex: index,
+          dataList: title.dataList,
+          y1: top - title.height / 2,
+          y2: top + title.height / 2
+        });
         const { icon: _icon = { type: 'circle' }, dataList } = item || {};
         let prevPoint;
         for (let i = 0, len = dataList.length; i < len; i++) {
@@ -412,7 +491,7 @@ export default {
           const index = dataList.findIndex(_left => _left > left);
           // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
           setTimeout(() => {
-            this.$emit('addOhter', { ...this.getOtherParams(point), index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index });
+            this.$emit('addOhter', { ...this.getOtherParams(point), index: !~index ? dataList.length : index });
           });
         }
       });
@@ -424,6 +503,7 @@ export default {
       if (this.eventStyle.evented) {
         const { endX, originX } = this.propItems;
         point.on('moving', () => {
+          point.moving = true;
           point.setCoords();
           const { prevPoint, nextPoint } = point;
           const limitLeft = prevPoint?.left || originX;
@@ -825,6 +905,9 @@ export default {
         );
       }
     }
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleInputBoxEnterEvent);
   }
 };
 </script>

package/packages/select-person/select-person.vue

@@ -18,70 +18,72 @@
             <div class="type-btn" :class="{ 'type-active': typeActiveIndex === 1 }" @click="onTypeClick(1)">选科室</div>
             <div class="type-btn" :class="{ 'type-active': typeActiveIndex === 2 }" @click="onTypeClick(2)">选角色</div>
           </div>
-          <template v-if="!isSingleCheck">
-            <a-checkbox v-if="searchTreeVisable" v-model="searchChecked" :indeterminate="searchIndeterminate" @change="radioChange">
-              <!-- {{ $t("1.10.139") }} -->
-              全选
-            </a-checkbox>
-
-            <a-checkbox v-else v-model="singleChecked" :indeterminate="indeterminate" @change="radioChange">
-              <!-- {{ $t("1.10.139") }} -->
-              全选
-            </a-checkbox>
-          </template>
-
-          <div v-show="search.status == 3 || (search.status == 0 && treeData.temp && treeData.temp.length == 0)" class="no-data-tips">
-            查无结果
-          </div>
-          <!-- main tree -->
-          <a-tree
-            class="main-tree-container"
-            v-show="search.status == 0"
-            ref="antTree"
-            v-model="checkedKeys.temp"
-            @expand="onExpand"
-            @check="onTreeCheck"
-            checkable
-            :expandedKeys="expandedKeys"
-            :autoExpandParent="autoExpandParent"
-            :checkStrictly="checkStrictly"
-            :selectable="false"
-            :treeData="treeData.temp"
-            :load-data="getLoadChildData"
-            :disabled="isDetail"
-          >
-            <template slot="custom" slot-scope="scope">
-              <span v-if="scope.isLeaf">
-                <a-tooltip :title="`${scope.title} ${scope.sub_title}`" :mouseEnterDelay="0.3">
-                  <span class="c-title">{{ scope.title || scope.key }}&thinsp; </span>
-                  <span class="c-sub-title">{{ scope.sub_title }}</span>
-                </a-tooltip>
-              </span>
-              <span v-else class="p-title">
-                <span v-if="scope.title">{{ scope.title }}</span>
-                <span v-else>{{ scope.key }}</span>
-                {{ treeCount(scope.count) }}
-              </span>
+          <div class="tree-wrap">
+            <template v-if="!isSingleCheck">
+              <a-checkbox v-if="searchTreeVisable" v-model="searchChecked" :indeterminate="searchIndeterminate" @change="radioChange">
+                <!-- {{ $t("1.10.139") }} -->
+                全选
+              </a-checkbox>
+
+              <a-checkbox v-else v-model="singleChecked" :indeterminate="indeterminate" @change="radioChange">
+                <!-- {{ $t("1.10.139") }} -->
+                全选
+              </a-checkbox>
             </template>
-          </a-tree>
-          <!-- search tree -->
-          <searchTree
-            v-on="$listeners"
-            ref="searchTree"
-            :visable="searchTreeVisable"
-            :formatTreeData="treeData.search"
-            :searchValue="searchValue"
-            :allCheckedKeys="checkedKeys"
-            :defaultExpandedKeys="search.defaultExpandedKeys"
-            :dataListKeys="search.dataListKeys"
-            :searchNoMore="searchNoMore"
-            :loadMorenLoadinng="loadMorenLoadinng"
-            @addCheckedkeysMain="addCheckedkeysMain"
-            @removeCheckedkeysMain="removeCheckedkeysMain"
-            @addCheckedkeysOther="addCheckedkeysOther"
-            @removeCheckedkeysOther="removeCheckedkeysOther"
-            @searchOnloadMore="searchOnloadMore"
-          ></searchTree>
+
+            <div v-show="search.status == 3 || (search.status == 0 && treeData.temp && treeData.temp.length == 0)" class="no-data-tips">
+              查无结果
+            </div>
+            <!-- main tree -->
+            <a-tree
+              class="main-tree-container"
+              v-show="search.status == 0"
+              ref="antTree"
+              v-model="checkedKeys.temp"
+              @expand="onExpand"
+              @check="onTreeCheck"
+              checkable
+              :expandedKeys="expandedKeys"
+              :autoExpandParent="autoExpandParent"
+              :checkStrictly="checkStrictly"
+              :selectable="false"
+              :treeData="treeData.temp"
+              :load-data="getLoadChildData"
+              :disabled="isDetail"
+            >
+              <template slot="custom" slot-scope="scope">
+                <span v-if="scope.isLeaf">
+                  <a-tooltip :title="`${scope.title} ${scope.sub_title}`" :mouseEnterDelay="0.3">
+                    <span class="c-title">{{ scope.title || scope.key }}&thinsp; </span>
+                    <span class="c-sub-title">{{ scope.sub_title }}</span>
+                  </a-tooltip>
+                </span>
+                <span v-else class="p-title">
+                  <span v-if="scope.title">{{ scope.title }}</span>
+                  <span v-else>{{ scope.key }}</span>
+                  {{ treeCount(scope.count) }}
+                </span>
+              </template>
+            </a-tree>
+            <!-- search tree -->
+            <searchTree
+              v-on="$listeners"
+              ref="searchTree"
+              :visable="searchTreeVisable"
+              :formatTreeData="treeData.search"
+              :searchValue="searchValue"
+              :allCheckedKeys="checkedKeys"
+              :defaultExpandedKeys="search.defaultExpandedKeys"
+              :dataListKeys="search.dataListKeys"
+              :searchNoMore="searchNoMore"
+              :loadMorenLoadinng="loadMorenLoadinng"
+              @addCheckedkeysMain="addCheckedkeysMain"
+              @removeCheckedkeysMain="removeCheckedkeysMain"
+              @addCheckedkeysOther="addCheckedkeysOther"
+              @removeCheckedkeysOther="removeCheckedkeysOther"
+              @searchOnloadMore="searchOnloadMore"
+            ></searchTree>
+          </div>
         </div>
         <!-- 树已选的数据 -->
         <div class="select-wrap">
@@ -425,8 +427,16 @@ export default create({
     data: {
       immediate: true,
       handler() {
+        this.$set(this.treeData, 'main', []);
+        this.$set(this.treeData, 'dept', []);
+        this.$set(this.treeData, 'temp', []);
         this.$set(this.dataList, 'main', []);
         this.$set(this.dataList, 'dept', []);
+        this.$set(this.checkedKeys, 'main', []);
+        this.$set(this.checkedKeys, 'dept', []);
+        this.$set(this.checkedKeys, 'temp', []);
+        this.singleChecked = false;
+        this.indeterminate = false;
         this.handleData();
         this.staticDataInit();
         this.staticDeptAndRoleDataInit();
@@ -453,17 +463,16 @@ export default create({
       if (this.getLoadChildData) {
         this.getDefaultList();
       } else {
-        this.$nextTick(() => {
+        setTimeout(() => {
           const userIds = this.defaultList.filter(item => item.itemType === 'person').map(item => item.id);
           const deptIds = this.defaultList.filter(item => item.itemType === 'dept').map(item => item.id);
           const roleIds = this.defaultList.filter(item => item.itemType === 'role').map(item => item.id);
           const key = ['main', 'dept', 'role'][this.typeActiveIndex];
-          console.log(deptIds, key, '666 init');
           this.checkedKeys.main = userIds;
           this.checkedKeys.dept = deptIds;
           this.checkedKeys.role = roleIds;
           this.checkedKeys.temp = this.checkedKeys[key];
-        });
+        }, 300);
       }
     },
 
@@ -1527,7 +1536,6 @@ export default create({
     padding: 22px 12px 0;
     max-height: 376px;
     height: 376px;
-    overflow-y: auto;
     &.people-tree-left {
       display: flex;
       flex-direction: column;
@@ -1550,6 +1558,10 @@ export default create({
         border-bottom-left-radius: 0;
       }
     }
+    .tree-wrap {
+      flex: 1;
+      overflow-y: auto;
+    }
     /deep/ .main-tree-container {
       > li {
         width: 100%;

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

@@ -14,10 +14,10 @@ export default {
     value: {
       type: [Array, String, Number],
     },
-    multiple: {
-      type: Boolean,
-      default: false,
-    }
+    multiple: {type: Boolean, default: false},
+    explicitRequired: {type: Number, default: 0},
+    filterExplicit: {type: Number, default: 0},
+    showMode: {type: String, default: 'DROPDOWN'},
   },
   model: {
     prop: "value",
@@ -31,6 +31,10 @@ export default {
       get() {
         return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
       }
+    },
+    // 筛选外显, 外显必填并且为平铺时, 最少得一个选项
+    isNotEmpty() {
+      return this.explicitRequired == 1 && this.filterExplicit == 1 && this.showMode === 'TILE'
     }
   },
   methods: {
@@ -38,6 +42,16 @@ export default {
       return val.filter((v) => !this.valueCp.includes(v));
     },
     onChange(val) {
+      if(this.isNotEmpty) {
+        if(Array.isArray(val) && (!val || !val.length)){
+          this.$message.warning('至少选中一个');
+          return
+        }
+        if(!Array.isArray(val) && !val){
+          this.$message.warning('至少选中一个');
+          return
+        }
+      }
       if (!this.multiple && Array.isArray(val)) {
         this.valueCp = this.filterNewVal(val)[0];
         this.$emit("change");

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

@@ -79,11 +79,11 @@ export default {
       return `unset`;
     },
     initComponentProps(cfg) {
-      const { widgetType, alias, title, placeholder: customPlaceholder, widgetCfg, fieldType, explicitRequired, optionSetting } = cfg;
+      const { widgetType, alias, title, placeholder: customPlaceholder, widgetCfg, fieldType, explicitRequired, optionSetting, filterExplicit } = cfg;
       const { props, handlerProps } = WidgetCfgMaps.get(widgetType);
       let Props = { ...props };
       if (handlerProps) {
-        Props = handlerProps(Props, { ...widgetCfg, title: alias || title, fieldType, isQuick: this.isQuick, explicitRequired, optionSetting });
+        Props = handlerProps(Props, { ...widgetCfg, title: alias || title, fieldType, isQuick: this.isQuick, explicitRequired, optionSetting, filterExplicit });
       }
       if (customPlaceholder) {
         Props.placeholder = customPlaceholder;

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

@@ -160,9 +160,9 @@ export const WidgetCfgMaps = new Map([
           }
         }
       ],
-      handlerProps(props, { valueList, multiple, explicitRequired } = {}) {
+      handlerProps(props, { valueList, multiple, explicitRequired, filterExplicit, showMode } = {}) {
         const allowClear = explicitRequired != 1;
-        const Props = { ...props, multiple, allowClear };
+        const Props = { ...props, multiple, allowClear, explicitRequired, filterExplicit, showMode };
         if (Array.isArray(valueList)) Props.options = valueList.map(({ value, label }) => ({ value, label }));
         return Props;
       },