增加tooltip组件，增加selectTool，更新文档说明

qq10137383 · Oct 20, 2022 · e49b427 · e49b427
1 parent 5909db6
commit e49b427
Show file tree

Hide file tree

Showing 19 changed files with 520 additions and 219 deletions.
diff --git a/README.md b/README.md
diff --git a/src/components/BuildingTable/BuildingHeader.vue b/src/components/BuildingTable/BuildingHeader.vue
@@ -1,6 +1,7 @@
 <script>
 import { getBuildingTable } from "./utils";
 import SwitchLogicTool from "./tools/SwitchLogicTool";
+import SelectTool from "./tools/SelectTool";
 import LocateTool from "./tools/LocateTool";
 
 /**
@@ -11,8 +12,21 @@ export default {
   inject: ["store"],
   components: {
     SwitchLogicTool,
+    SelectTool,
     LocateTool,
   },
+  props: {
+    // 是否显示标题
+    showTitle: {
+      type: Boolean,
+      default: false,
+    },
+    // 楼盘表工具
+    tools: {
+      type: Array,
+      default: () => [],
+    },
+  },
   computed: {
     title() {
       const { buildName, buildAddress } = this.store.states;
@@ -21,23 +35,27 @@ export default {
   },
   render() {
     // 渲染父元素插槽
-    const { headerLeft, headerRight } = getBuildingTable(this);
+    const root = getBuildingTable(this);
+    const { headerLeft, headerRight } = root.$slots;
 
     return (
       <div class="building-header-wrap">
-        <h4 class="building-header_title" title={this.title}>
-          {this.title}
-        </h4>
+        {this.showTitle && (
+          <h4 class="building-header_title" title={this.title}>
+            {this.title}
+          </h4>
+        )}
         <div class="building-header__left">
-          <switch-logic-tool />
+          {this.tools.includes("switchLogic") && <switch-logic-tool />}
+          {this.tools.includes("select") && <select-tool />}
           {headerLeft}
         </div>
         <div class="building-header__right">
-          <locate-tool />
           {headerRight}
+          {this.tools.includes("locate") && <locate-tool />}
         </div>
       </div>
     );
   },
 };
-</script>
+</script>
diff --git a/src/components/BuildingTable/BuildingTable.vue b/src/components/BuildingTable/BuildingTable.vue
@@ -2,7 +2,7 @@
   <div :class="['building-table-wrap', className]" :style="tableStyle">
     <div v-if="logicBuild.id" class="building-table__visual">
       <div class="building-table__header">
-        <building-header />
+        <building-header :show-title="showTitle" :tools="tools" />
       </div>
       <div :class="['building-table__content', { 'has-legend': showLegends }]">
         <div class="building-table__content-left">
@@ -58,11 +58,21 @@ export default {
       validator: (val) => ["single", "multiple", "disable"].includes(val),
       default: "multiple",
     },
+    // 是否显示标题
+    showTitle: {
+      type: Boolean,
+      default: false,
+    },
     // 是否显示图例
     showLegends: {
       type: Boolean,
       default: true,
     },
+    // 楼盘表工具
+    tools: {
+      type: Array,
+      default: () => ["locate", "select", "switchLogic"],
+    },
     // 提示信息
     tipText: {
       type: String,
@@ -111,6 +121,10 @@ export default {
     removeSelections(houseIds) {
       this.store.commit("removeSelectHouses", houseIds);
     },
+    // 全选(onlyEnabled为true，isEnabled为false的房屋不会被选中)
+    selectAll(onlyEnabled = true) {
+      this.store.commit("selectAll", onlyEnabled);
+    },
     // 清空选择
     clearSelection() {
       this.store.commit("clearSelect");

diff --git a/src/components/BuildingTable/HouseDefinition.vue b/src/components/BuildingTable/HouseDefinition.vue
@@ -18,6 +18,8 @@ const props = {
   showSymbol: Boolean,
   // 每行显示几个房屋符号(symbol)，默认：3
   symbolColumn: Number,
+  // 是否以精简模式显示
+  simple: Boolean,
 };
 
 /**
@@ -34,6 +36,12 @@ export default {
     // 创建房屋配置定义
     createHouseDefinition() {
       const definition = deepClone(this.$options.propsData);
+      // 精简模式
+      if (definition.simple) {
+        definition.className = "simple-cell";
+        definition.showBlock = false;
+        definition.width = 90;
+      }
       // 定义render函数，如果有自定义模板使用自定义模块，否则使用默认模板
       if (this.$scopedSlots.default) {
         definition.render = (h, context) => {

diff --git a/src/components/BuildingTable/HouseTooltip.vue b/src/components/BuildingTable/HouseTooltip.vue
@@ -0,0 +1,64 @@
+<template>
+  <transition name="tooltip">
+    <div
+      v-show="show"
+      class="house-tooltip-wrap"
+      :style="{
+        left: x + 'px',
+        top: y + 'px',
+      }"
+    >
+      <slot v-bind="house" />
+    </div>
+  </transition>
+</template>
+
+<script>
+/**
+ * 房屋tooltip
+ */
+export default {
+  name: "HouseTooltip",
+  data() {
+    return {
+      house: {},
+      show: false,
+      x: 0,
+      y: 0,
+    };
+  },
+  created() {
+    this.$parent.$on("house-over", this.handleHouseOver);
+    this.$parent.$on("house-out", this.handleHouseOut);
+  },
+  beforeDestroy() {
+    this.$parent.$off("house-over", this.handleHouseOver);
+    this.$parent.$off("house-out", this.handleHouseOut);
+  },
+  methods: {
+    handleHouseOver({ house, event }) {
+      const rect = this.$parent.$el.getBoundingClientRect();
+      this.x = event.clientX - rect.left + 8;
+      this.y = event.clientY - rect.top + 8;
+      this.house = house;
+      this.show = true;
+      this.$nextTick(() => this.adjustEdge());
+    },
+    handleHouseOut() {
+      this.show = false;
+    },
+    // 如果tooltip超出视图范围，调整边界
+    adjustEdge() {
+      const houseWrap = this.$parent.$el.querySelector(".house-display-wrap");
+      const { width, height } = houseWrap.getBoundingClientRect();
+      const { clientWidth, clientHeight } = this.$el;
+      if (this.x + clientWidth > width - 10) {
+        this.x = this.x - clientWidth - 8;
+      }
+      if (this.y + clientHeight > height - 10) {
+        this.y = this.y - clientHeight - 8;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/BuildingTable/config/house-config.js b/src/components/BuildingTable/config/house-config.js
@@ -20,9 +20,11 @@ const houseConfig = {
     showSymbol: true,
     // 每行显示几个房屋符号
     symbolColumn: 3,
+    // 是否以精简模式显示
+    simple: false,
     // 房屋单元格默认渲染函数
     render: function (h, { definition, houseInfo }) {
-        const { className, houseStyle, showBlock, includeFields, excludeFields, showSymbol, symbolColumn } = definition
+        const { className, houseStyle, showBlock, includeFields, excludeFields, showSymbol, symbolColumn, simple } = definition
         const { houseName, blocks, symbols } = houseInfo
         const root = getBuildingTable(this)
 
@@ -51,23 +53,23 @@ const houseConfig = {
                 const items = []
                 if (index % symbolColumn == 0) {
                     for (let i = index; i < Math.min(index + symbolColumn, symbols.length); i++) {
-                        const { color, text } = symbols[i]
-                        items.push(<span class="house-cell__symbol-item" style={{ backgroundColor: toColor(color) }} title={text} />)
+                        const { name, value } = symbols[i]
+                        items.push(<span class="house-cell__symbol-item" style={{ backgroundColor: toColor(value) }} title={name} />)
                     }
                     symbolVNodes.push(<div class="house-cell__symbol-row">{items}</div>)
                 }
             }
             return symbolVNodes
         }
         const clickTitle = (event) => {
-            event.stopPropagation()
+            !simple && event.stopPropagation()
             root && root.$emit('house-title-click', { house: houseInfo, event })
         }
 
         return (
             <div class={['house-cell-wrap', className]} style={houseStyle}>
                 <div class="house-cell__block">
-                    <h4 class="house-cell__block-title" title={houseName} on-click={clickTitle}>{houseName}</h4>
+                    <h4 class="house-cell__block-title" on-click={clickTitle}>{houseName}</h4>
                     {renderBlock()}
                 </div>
                 <div class="house-cell__symbol">

diff --git a/src/components/BuildingTable/core/select-manager.js b/src/components/BuildingTable/core/select-manager.js
@@ -104,6 +104,18 @@ export default class SelectionManager {
         this.raiseEvent()
     }
 
+    // 全选
+    selectAll(onlyEnabled) {
+        if (this.disabled) return
+
+        this.query.queryAll().forEach(house => {
+            if (!onlyEnabled || (onlyEnabled && house.isEnabled)) {
+                this.setHouseCell(house, true)
+            }
+        })
+        this.raiseEvent()
+    }
+
     // 清空选择
     clearSelect() {
         if (this.disabled) return

diff --git a/src/components/BuildingTable/core/table-query.js b/src/components/BuildingTable/core/table-query.js
@@ -7,6 +7,17 @@ export default class TableQuery {
         this.currentLogic = null  // 当前逻辑幢
     }
 
+    // 查询所有房屋
+    queryAll() {
+        const result = []
+        for (const logic of this.logicBuilds) {
+            for (const house of logic.houses) {
+                result.push(house)
+            }
+        }
+        return result
+    }
+
     // 切换逻辑幢，logicId为空时切换第一个逻辑幢
     setLogicId(logicId) {
         if (!this.currentLogic || this.currentLogic.logicBuildId != logicId) {

diff --git a/src/components/BuildingTable/index.js b/src/components/BuildingTable/index.js
@@ -1,6 +1,11 @@
 export { default as UnitDefinition } from './UnitDefinition'
 export { default as FloorDefinition } from './FloorDefinition'
 export { default as HouseDefinition } from './HouseDefinition'
+export { default as HouseTooltip } from './HouseTooltip.vue'
+
+export { default as SwitchLogicTool } from './tools/SwitchLogicTool'
+export { default as SelectTool } from './tools/SelectTool'
+export { default as LocateTool } from './tools/LocateTool'
 
 import BuildingTable from './BuildingTable'
 

diff --git a/src/components/BuildingTable/store/selector.js b/src/components/BuildingTable/store/selector.js
@@ -51,6 +51,10 @@ export default {
         removeSelectHouses(houseIds) {
             this._selector.selectHouseByIds(houseIds, false)
         },
+        // 全选(onlyEnabled为true，isEnabled为false的房屋不会被选中)
+        selectAll(onlyEnabled) {
+            this._selector.selectAll(onlyEnabled)
+        },
         // 清空选择
         clearSelect() {
             this._selector.clearSelect()

diff --git a/src/components/BuildingTable/style/house.scss b/src/components/BuildingTable/style/house.scss
@@ -51,6 +51,18 @@
     position: relative;
     cursor: pointer;
 
+    &.simple-cell {
+      padding-top: 6px;
+
+      .house-cell__block-title {
+        text-align: center;
+        text-decoration: initial;
+        display: block;
+        white-space: initial;
+        text-overflow: initial;
+      }
+    }
+
     &::before {
       position: absolute;
       right: -2px;

diff --git a/src/components/BuildingTable/style/index.scss b/src/components/BuildingTable/style/index.scss
@@ -7,4 +7,5 @@
 @import "./unit.scss";
 @import "./house.scss";
 @import "./legend.scss";
+@import "./tooltip.scss";
 
diff --git a/src/components/BuildingTable/style/table.scss b/src/components/BuildingTable/style/table.scss
@@ -1,4 +1,7 @@
 .building-table-wrap {
+  position: relative;
+  overflow: visible;
+
   .building-table__content {
     position: relative;