From 8d5021bccacd151879c072ac5906aa577e074aa9 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Tue, 10 May 2022 14:22:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A6=85=E9=81=93=E5=B7=B2?=
 =?UTF-8?q?=E7=9F=A5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dict/JDictSelectTag.vue    |  10 +-
 .../src/components/dict/JMultiSelectTag.vue   | 146 ++++++++++--------
 2 files changed, 93 insertions(+), 63 deletions(-)

diff --git a/jero-web/src/components/dict/JDictSelectTag.vue b/jero-web/src/components/dict/JDictSelectTag.vue
index 85718732d..415c2d49f 100644
--- a/jero-web/src/components/dict/JDictSelectTag.vue
+++ b/jero-web/src/components/dict/JDictSelectTag.vue
@@ -10,7 +10,7 @@
   <a-select v-else-if="tagType=='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
 <!--    <a-select-option :value="null">{{$t('pleaseSelect')}}</a-select-option>-->
     <a-select-option v-for="(item, key) in dictOptionsValue" :key="key" :value="item.value">
-      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
+      <span class="itemOption" :title=" item.text || item.label ">
         {{ item.text || item.label }}
       </span>
     </a-select-option>
@@ -118,4 +118,12 @@
   }
 </script>
 <style scoped>
+  .itemOption {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/components/dict/JMultiSelectTag.vue b/jero-web/src/components/dict/JMultiSelectTag.vue
index 2f17d8662..e2cd32698 100644
--- a/jero-web/src/components/dict/JMultiSelectTag.vue
+++ b/jero-web/src/components/dict/JMultiSelectTag.vue
@@ -1,6 +1,7 @@
 <template>
   <a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
-    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
+    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}
+    </a-checkbox>
   </a-checkbox-group>
 
   <a-select
@@ -13,14 +14,14 @@
     :maxTagTextLength="2"
     :placeholder="placeholder"
     :getPopupContainer="getParentContainer"
-    :maxTagPlaceholder="content+'...'"
+    :maxTagPlaceholder="content"
     optionFilterProp="children"
     :filterOption="filterOption">
     <a-select-option
       v-for="(item,index) in dictOptions"
       :key="index"
       :value="item.value">
-      <span style="display: inline-block;width: 100%" :title="item.text || item.label">
+      <span class="itemOption" :title="item.text || item.label">
         {{ item.text || item.label }}
       </span>
     </a-select-option>
@@ -29,7 +30,8 @@
 </template>
 
 <script>
-  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
+  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+
   export default {
     name: 'JMultiSelectTag',
     props: {
@@ -37,124 +39,124 @@
       placeholder: String,
       disabled: Boolean,
       value: String,
-      db_field_name:String,
+      db_field_name: String,
       type: String,
-      options:Array,
-      spliter:{
+      options: Array,
+      spliter: {
         type: String,
         required: false,
         default: ','
       },
-      popContainer:{
-        type:String,
-        default:'',
-        required:false
-      },
+      popContainer: {
+        type: String,
+        default: '',
+        required: false
+      }
     },
     data() {
       return {
         dictOptions: [],
-        tagType:"",
-        arrayValue:!this.value?[]:this.value.split(this.spliter),
-        content:''
+        tagType: '',
+        arrayValue: !this.value ? [] : this.value.split(this.spliter),
+        content: ''
       }
     },
     created() {
-      if(!this.type || this.type==="list_multi"){
-        this.tagType = "select"
-      }else{
+      if (!this.type || this.type === 'list_multi') {
+        this.tagType = 'select'
+      } else {
         this.tagType = this.type
       }
       //获取字典数据
       //this.initDictData();
     },
-    watch:{
-      options: function(val){
-        this.setCurrentDictOptions(val);
+    watch: {
+      options: function(val) {
+        this.setCurrentDictOptions(val)
       },
-      dictCode:{
-        immediate:true,
+      dictCode: {
+        immediate: true,
         handler() {
           this.initDictData()
-        },
+        }
       },
-      value (val) {
-        if(!val){
+      value(val) {
+        if (!val) {
           this.arrayValue = []
-        }else{
+        } else {
           this.arrayValue = this.value.split(this.spliter)
-          let arrayValue=JSON.parse(JSON.stringify(this.arrayValue))
+          let arrayValue = JSON.parse(JSON.stringify(this.arrayValue))
           let item = []
-          this.dictOptions.forEach(res=>{
-            arrayValue.forEach((val,index)=>{
-              if (res.value == val&&index!=0){
-                  item.push(res.text || res.label)
+          this.dictOptions.forEach(res => {
+            arrayValue.forEach((val, index) => {
+              if (res.value == val && index != 0) {
+                item.push(res.text || res.label)
               }
 
             })
-            this.content=item.join(',')
+            this.content = item.join(',')
           })
           let arrayLabel = []
           this.dictOptions.forEach((item) => {
             this.arrayValue.forEach((val) => {
-               if(item.value === val) {
-                 arrayLabel.push(item)
-               }
+              if (item.value === val) {
+                arrayLabel.push(item)
+              }
             })
           })
-          this.$emit('changelabel', arrayLabel);
+          this.$emit('changelabel', arrayLabel)
         }
       }
     },
     methods: {
       initDictData() {
-        if(this.options && this.options.length>0){
+        if (this.options && this.options.length > 0) {
           this.dictOptions = [...this.options]
-        }else{
+        } else {
           //优先从缓存中读取字典配置
           let cacheOption = getDictItemsFromCache(this.dictCode)
-          if(cacheOption && cacheOption.length>0){
+          if (cacheOption && cacheOption.length > 0) {
             this.dictOptions = cacheOption
             return
           }
           //根据字典Code, 初始化字典数组
           ajaxGetDictItems(this.dictCode, null).then((res) => {
             if (res.success) {
-              this.dictOptions = res.result;
+              this.dictOptions = res.result
             }
           })
         }
 
       },
-      onChange (selectedValue) {
+      onChange(selectedValue) {
         let content = []
         let item = []
-         this.dictOptions.forEach(res=>{
-           selectedValue.forEach((val,index)=>{
-                if (res.value == val){
-                  content.push(res.text || res.label)
-                  if(index!=0){
-                    item.push(res.text || res.label)
-                  }
-                }
+        this.dictOptions.forEach(res => {
+          selectedValue.forEach((val, index) => {
+            if (res.value == val) {
+              content.push(res.text || res.label)
+              if (index != 0) {
+                item.push(res.text || res.label)
+              }
+            }
 
-           })
-           this.content=item.join(',')
-         })
-        this.$emit('change', selectedValue.join(this.spliter));
-        this.$emit('changeQuery', content.join(this.spliter),this.db_field_name);
+          })
+          this.content = item.join(',')
+        })
+        this.$emit('change', selectedValue.join(this.spliter))
+        this.$emit('changeQuery', content.join(this.spliter), this.db_field_name)
       },
-      setCurrentDictOptions(dictOptions){
+      setCurrentDictOptions(dictOptions) {
         this.dictOptions = dictOptions
 
       },
-      getCurrentDictOptions(){
+      getCurrentDictOptions() {
         return this.dictOptions
       },
-      getParentContainer(node){
-        if(!this.popContainer){
+      getParentContainer(node) {
+        if (!this.popContainer) {
           return node.parentNode
-        }else{
+        } else {
           return document.querySelector(this.popContainer)
         }
       },
@@ -170,8 +172,28 @@
     }
   }
 </script>
+<style scoped>
+  .itemOption {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+  }
+</style>
 <style>
-  .ant-select-selection__choice{
-      max-width: 50% !important;
+  /*.ant-select-selection__choice{*/
+  /*    max-width: 50% !important;*/
+  /*}*/
+  .ant-select-selection--multiple {
+    overflow: hidden;
+  }
+
+  .ant-select-selection__rendered ul {
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    float: left;
   }
 </style>