修改空间名称的长度，并使超长部分省略不显示

languages/en.js

@@ -206,7 +206,7 @@ module.exports = {
     example: 'Example',
     inputFrameName: 'Please enter the frame name! ',
     inputFrameFullName: 'Please enter the full name!',
-    inputLong: 'Length between 2 and 10 characters',
+    inputLong: 'Length between 2 and 20 characters',
     addBed: 'Add a bed',
     addRoom: 'Add room',
     editFrame: 'Edit frame',

languages/zh-CN.js

@@ -208,7 +208,7 @@ module.exports = {
     example: '示例',
     inputFrameName: '请输入结构名称！',
     inputFrameFullName: '请输入全称!',
-    inputLong: '长度在 2 到 10 个字符',
+    inputLong: '长度在 2 到 20 个字符',
     addBed: '添加床位',
     addRoom: '添加房间',
     editFrame: '编辑节点',

src/views/hospitalFrame/frameTreeView-admin.vue

@@ -34,11 +34,24 @@
           @node-click="nodeClick"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
+            <el-tooltip
+                :content="data.full_name"
+                :disabled="isShowTooltip"
+                :open-delay="300"
+                placement="top"
+                effect="dark"
+            >
             <!--            <span><svg-icon :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'" />{{ data.full_name }}</span>-->
-            <span><svg-icon :style="data.customer_id ? 'color: #0a901c' : ''" :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'" />{{ data.full_name }}</span>
-            <span>
+              <span @mouseover="mouseOver($event)"
+                    class="over-ellipsis"
+              ><svg-icon :style="data.customer_id ? 'color: #0a901c' : ''"
+                         :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'"
+              />{{ data.full_name }}</span>
+            </el-tooltip>
+            <span class="top-right">
               <el-button
                 v-if="data.type!==5"
+                :disabled="data.type===1"
                 type="text"
                 size="mini"
                 icon="el-icon-plus"
@@ -206,6 +219,7 @@ export default {
     return {
       treeData: [],
       treeDataClone: [],
+      isShowTooltip: false,
       /** 当前选中的树节点 */
       selectedNodeId: 0,
       selectedNode: {},
@@ -220,14 +234,14 @@ export default {
       rules: {
         name: [
           this.MixinRequired(this.$t('frameManage.inputFrameName')),
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ],
         alias: [
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ],
         full_name: [
           this.MixinRequired(this.$t('frameManage.inputFrameFullName')),
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ]
       },
       /** 快速创建空间结构弹窗 **/
@@ -291,7 +305,7 @@ export default {
         this.formmodel.frame_parent_id = data.id
         this.formmodel.full_name = data.name
         console.log('this.formmodel.parent_id=', this.formmodel.parent_id)
-        this.formshow = true
+        this.frameDialogVisible = true
       } else {
         if (data.type === FRAME_TYPE.ROOM) {
           this.frameEditTitle = '【' + data.full_name + '】' + this.$t('frameManage.addBed')
@@ -506,12 +520,31 @@ export default {
     },
     handleCustomerChange() {
       this.getFrameTree()
+    },
+    mouseOver(event) {
+      this.isShowTooltip =
+          event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
     }
   }
 }
 </script>
 
 <style scoped>
+.top-right{
+  display: block;
+  min-width: 50px;
+  width: 60px;
+  text-align: right;
+  position: absolute;
+  right: 1px;
+}
+.over-ellipsis{
+  display: block;
+  width: calc(100% - 60px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .el-aside{
   margin: 8px;
   padding: 8px;

src/views/hospitalFrame/frameTreeView.vue

@@ -34,9 +34,22 @@
           @node-click="nodeClick"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
+            <el-tooltip
+                :content="data.full_name"
+                :disabled="isShowTooltip"
+                :open-delay="300"
+                placement="top"
+                effect="dark"
+              >
             <!--            <span><svg-icon :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'" />{{ data.full_name }}</span>-->
-            <span><svg-icon :style="data.customer_id ? 'color: #0a901c' : ''" :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'" />{{ data.full_name }}</span>
-            <span>
+              <span @mouseover="mouseOver($event)"
+                  class="over-ellipsis"
+              ><svg-icon
+                  :style="data.customer_id ? 'color: #0a901c' : ''"
+                  :icon-class="data.type===4?'sickroom':data.type===5?'bed':'area'"
+              />{{ data.full_name }}</span>
+            </el-tooltip>
+            <span class="top-right">
               <el-button
                 v-if="data.type!==5"
                 type="text"
@@ -221,6 +234,7 @@ export default {
     return {
       treeData: [],
       treeDataClone: [],
+      isShowTooltip: false,
       /** 当前选中的树节点 */
       selectedNodeId: 0,
       selectedNode: {},
@@ -235,14 +249,14 @@ export default {
       rules: {
         name: [
           this.MixinRequired(this.$t('frameManage.inputFrameName')),
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ],
         alias: [
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ],
         full_name: [
           this.MixinRequired(this.$t('frameManage.inputFrameFullName')),
-          { min: 2, max: 10, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
+          { min: 2, max: 20, message: this.$t('frameManage.inputLong'), trigger: 'blur' }
         ]
       },
       /** 快速创建空间结构弹窗 **/
@@ -508,12 +522,31 @@ export default {
     },
     handleCustomerChange() {
       this.getFrameTree()
+    },
+    mouseOver(event) {
+      this.isShowTooltip =
+          event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
     }
   }
 }
 </script>
 
 <style scoped>
+.top-right{
+  display: block;
+  min-width: 50px;
+  width: 60px;
+  text-align: right;
+  position: absolute;
+  right: 1px;
+}
+.over-ellipsis{
+  display: block;
+  width: calc(100% - 60px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .el-aside{
     margin: 8px;
     padding: 8px;