bri-components 1.2.0 → 1.2.2

package/src/components/small/DshTags.vue

@@ -1,24 +1,78 @@
 <template>
-    <div class="DshTags">
+    <div
+        ref="DshTags"
+        :class="{
+            'DshTags': true,
+            'DshTags-autoEllipsis': autoEllipsis
+        }"
+    >
         <Tag
-            v-for="(tagItem, tagIndex) in list"
+            v-for="(tagItem, tagIndex) in computedList"
             :key="tagIndex"
-            :disabled="propsObj.disabled || tagItem.disabled"
+            ref="tagItem"
+            :style="tagItem.style"
+            :disabled="getItemDisabled(tagItem)"
             :name="tagIndex"
             :type="propsObj.type"
-            :closable="closable(tagItem)"
+            :closable="getItemClosable(tagItem)"
             :checkable="propsObj.checkable"
             :checked="propsObj.checked"
-            :color="propsObj.color || 'default'"
+            :color="propsObj.color || tagItem.color || 'primary'"
             :fade="propsObj.fade || false"
             :size="propsObj.size || 'medium'"
             @on-close="deleteTag($event, tagItem, tagIndex)"
             @on-change="changeChecked"
         >
             <slot :tagItem="tagItem">
-                {{ tagItem }}
+                {{ $dataType(tagItem) === "object" ? tagItem.realname || tagItem.full_name || tagItem.name : tagItem }}
             </slot>
         </Tag>
+
+        <!-- 更多 -->
+        <Tag
+            v-if="subList.length"
+            :type="propsObj.type"
+            :checkable="propsObj.checkable"
+            :checked="propsObj.checked"
+            :color="propsObj.color || 'default'"
+            :fade="propsObj.fade || false"
+            :size="propsObj.size || 'medium'"
+            :disabled="propsObj.disabled"
+        >
+            <Poptip
+                :transfer="true"
+                :width="200"
+                trigger="hover"
+                word-wrap
+                placement="bottom"
+                popper-class="DshTags-poptip"
+            >
+                <dsh-icons :list="[moreOperation]" />
+                {{ subList.length }}项
+                <div slot="content">
+                    <Tag
+                        v-for="(tagItem, tagIndex) in subList"
+                        :key="tagIndex"
+                        :disabled="getItemDisabled(tagItem)"
+                        :name="tagIndex"
+                        :type="propsObj.type"
+                        :closable="getItemClosable(tagItem)"
+                        :checkable="propsObj.checkable"
+                        :checked="propsObj.checked"
+                        :color="propsObj.color || 'default'"
+                        :fade="propsObj.fade || false"
+                        :size="propsObj.size || 'medium'"
+                        class="DshTags-poptip-tag"
+                        @on-close="deleteTag($event, tagItem, tagIndex)"
+                        @on-change="changeChecked"
+                    >
+                        <slot :tagItem="tagItem">
+                            {{ $dataType(tagItem) === "object" ? tagItem.realname || tagItem.full_name || tagItem.name : tagItem }}
+                        </slot>
+                    </Tag>
+                </div>
+            </Poptip>
+        </Tag>
     </div>
 </template>
 
@@ -37,27 +91,96 @@
                 default () {
                     return {};
                 }
+            },
+            autoEllipsis: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
-                closable (tagItem) {
-                    return this.propsObj.disabled || tagItem.disabled ? false : (this.propsObj.closable !== false);
+                maxTagCount: undefined,
+
+                getItemDisabled (item) {
+                    return this.propsObj.disabled || item._disabled || item.disabled;
+                },
+                getItemClosable (item) {
+                    return this.getItemDisabled(item) ? false : (this.propsObj.closable !== false);
                 }
             };
         },
-        computed: {},
+        computed: {
+            moreOperation () {
+                return {
+                    customIcon: "bico-gengduo"
+                };
+            },
+            computedList () {
+                return this.list.slice(0, this.maxTagCount);
+            },
+            subList () {
+                if (this.autoEllipsis && this.maxTagCount) {
+                    return this.list.slice(this.maxTagCount);
+                } else {
+                    return [];
+                }
+            }
+        },
         created () {},
+        mounted () {
+            this.callEliipsis();
+
+            window.addEventListener("resize", this.callEliipsis, true);
+        },
         methods: {
             // 删除标签
             deleteTag (event, item, index) {
                 this.list.splice(index, 1);
+                this.getAutoEllipsis();
                 this.$emit("delete", item, index);
             },
             // 改变标签状态
             changeChecked (checked, name) {
 
+            },
+
+            getAutoEllipsis () {
+                let parWidth = this.$refs.DshTags.clientWidth;
+                let tags = this.$refs.tagItem;
+
+                for (let idx in tags) {
+                    let el = tags[idx]["$el"];
+                    let showEllipsis = el.clientWidth + el.offsetLeft > parWidth;
+
+                    if (showEllipsis) {
+                        // 判断加上... 是否被隐藏
+                        if (el.clientWidth + el.offsetLeft + 40 < parWidth) {
+                            this.maxTagCount = idx;
+                        } else {
+                            this.maxTagCount = idx - 1;
+                        }
+                        break;
+                    } else {
+                        this.maxTagCount = undefined;
+                    }
+                }
+            },
+            callEliipsis () {
+                if (this.autoEllipsis) {
+                    this.maxTagCount = undefined;
+                    this.$nextTick(() => {
+                        this.getAutoEllipsis();
+                    });
+                }
             }
+        },
+        watch: {
+            list: function () {
+                this.callEliipsis();
+            }
+        },
+        destroyed () {
+            window.removeEventListener("resize", this.callEliipsis, true);
         }
     };
 </script>

package/src/index.js

@@ -12,8 +12,8 @@ import DshBox from "./components/list/DshBox/DshBox.vue";
 import DshTable from "./components/list/DshBox/DshTable.vue";
 import DshList from "./components/list/DshBox/DshList.vue";
 
-import BriTable from "./components/list/BriTable.vue";
 import BriFlatTable from "./components/list/BriFlatTable.vue";
+import BriTable from "./components/list/BriTable.vue";
 import DshCascaderTable from "./components/list/DshCascaderTable.vue";
 import DshPage from "./components/list/DshPage.vue";
 
@@ -66,7 +66,9 @@ import Error403 from "./components/Error/Error403.vue";
 import Error404 from "./components/Error/Error404.vue";
 
 // list
+import BriCard from "./components/list/BriCard.vue";
 import BriTree from "./components/list/BriTree.vue";
+import BriTreeItem from "./components/list/BriTreeItem.vue";
 
 // controls
 import BriInputs from "./components/controls/base/BriInputs.vue";
@@ -98,8 +100,8 @@ const map = {
     DshTable,
     DshList,
 
-    BriTable,
     BriFlatTable, // 可取消全局
+    BriTable,
     DshCascaderTable, // 可取消全局
     DshPage,
 
@@ -186,9 +188,11 @@ export {
     DshTable,
     DshList,
 
+    BriCard,
+    BriFlatTable,
     BriTable,
     BriTree,
-    BriFlatTable,
+    BriTreeItem,
     DshCascaderTable,
     DshPage,
 

package/src/styles/common/control.less

@@ -1,100 +1,105 @@
-// 表格展示-非通用
-.unit-show () {
+// 单元格标签式展示 -非全部类型通用
+.bri-unit-show () {
     background-color: @theme-focus;
     color: @themeColor;
     border-radius: @borderRadius;
-    padding: 3px 8px;
+    padding: 2px 8px;
     line-height: 24px;
     display: inline;
 }
 
-// 表单模式
-.control-edit {
+// 表单控件共用样式
+.bri-control-edit {
     border: 1px solid @borderColor;
     border-radius: @borderRadius;
     background: @inputBg;
     cursor: pointer;
     color: @textColor;
-    &.control-notext {
-        .control-placeholder();
+
+    &.bri-control-nodata {
+        .bri-control-nodata();
     }
 }
-.control-disabled {
+.bri-control-disabled {
     border: 1px solid @border-disabled;
     border-radius: @borderRadius;
     background: @inputBg-disabled;
     cursor: not-allowed;
     color: @textColor;
-    &.control-notext {
-        .control-disPlaceholder();
+
+    &.bri-control-nodata {
+        .bri-control-disabled-placeholder();
     }
 }
-.control-readonly {
-    border: 1px solid @border-readonly;
-    border-radius: @borderRadius;
-    background: @inputBg-readonly;
-    cursor: not-allowed;
-    color: @textColor-readonly;
-}
-.control-show {
+// .bri-control-readonly {
+//     border: 1px solid @border-readonly;
+//     border-radius: @borderRadius;
+//     background: @inputBg-readonly;
+//     cursor: not-allowed;
+//     color: @textColor-readonly;
+// }
+.bri-control-show {
     border: none;
     background-color: transparent;
-    &.control-notext {
-        .control-notext();
+
+    &.bri-control-nodata {
+        .bri-control-nodata();
     }
 }
-.control-unit {
+.bri-control-unit {
     border: none;
     background-color: transparent;
-    &.control-notext {
-        color: @text-color;
+
+    // unit 模式下不用特殊处理颜色
+    &.bri-control-nodata {
+        .bri-control-nodata();
     }
 }
-
-// 编辑模式下无数据
-.control-placeholder {
+// 无数据
+.bri-control-nodata {
     color: @placeholderColor;
 }
 // 编辑disabled模式下无数据
-.control-disPlaceholder {
+.bri-control-disabled-placeholder {
     color: @textColor-disabled;
 }
-// 查看模式下无数据
-.control-notext {
-    color: @placeholderColor;
-}
-
-// unit 模式下不用特殊处理颜色
-
 
 // 展示为tag标签公共样式
-.control-wrap {
-    width: 100%;
-    &-box {
-        height: 32px;
-        padding: 4px 0 4px 4px;
-        line-height: 24px;
-        .dsh-flex-row-between-center();
-        &:hover {
-            .control-wrap-close {
-                display: block;
-            }
-        }
+#bri-control-wrap () {
+    .dsh-flex-row-between-center();
+    height: 32px;
+    padding: 4px 0 4px 4px;
+    line-height: 24px;
+
+    .text {
+        .dsh-ellipsis();
     }
-    
-    .control-edit.control-notext {
-        padding-left: 7px;
+
+    .overflow {
+        overflow: auto;
+        .bri-scrollbar3();
     }
 
-    &-text {
-        .dsh-ellipsis();
+    .icon {
+        &-default {
+            padding: 5px;
+            color: @placeholderColor;
+        }
+
+        &-close {
+            padding: 5px;
+            display: none;
+            color: @placeholderColor;
+        }
     }
 
-    &-close {
-        padding: 5px;
-        display: none;
+    &:hover {
+        .icon-close {
+            display: block;
+        }
     }
-    &-icon {
-        padding: 5px;
+
+    &.bri-control-nodata {
+        padding-left: 7px;
     }
 }

package/src/styles/components/controls/base/BriUpload/BriUpload.less

@@ -132,7 +132,7 @@
     }
     
     &-disabled {
-        .control-disabled();
+        .bri-control-disabled();
     
         .uploadList {
             &-old {
@@ -147,12 +147,20 @@
             }
 
             &-nodata {
-                .control-disPlaceholder();
+                .bri-control-disabled-placeholder();
                 text-indent: 7px;
                 text-align: left;
             }
             &-inline-nodata {
-                .control-disPlaceholder();
+                .bri-control-disabled-placeholder();
+            }
+        }
+    }
+
+    &-unit {
+        .uploadList {
+            &-inline-nodata {
+                .bri-control-nodata();
             }
         }
     }

package/src/styles/components/controls/base/BriUpload/BriUploadImage.less

@@ -78,4 +78,10 @@
             }
         }
     }
+
+    &-cropper {
+        width: 400px;
+        height: 400px;
+        margin: 0 auto;
+    }
 }

package/src/styles/components/controls/base/DshCascader/DshCascader.less

@@ -1,104 +1,56 @@
 .DshCascader {
     width: 100%;
 
-    #multiple-content () {
-        .hasdata {
+    &-edit {
+        // 多选
+        &-multiple {
             width: 100%;
-            height: 100%;
-            padding: 0px 7px;
-            .bri-scrollbar3();
-            overflow-y: hidden;
-        }
-
-        .nodata {
-            padding: 0px 7px;
-            line-height: 28px;
-            color: @placeholderColor;
-        }
-
-        // 多选类型 且独自一行时
-        &-row {
-            height: 68px;
-    
-            .hasdata {
-                overflow-y: auto;
-                display: flex;
-                flex-wrap: wrap;
+            
+            &-edit {
+                #bri-control-wrap();
             }
         }
-    }
 
-    // 多选
-    &-multiple {
-        width: 100%;
-        
-        &-input {
+        // 单选 -新模式
+        &-custom {
             width: 100%;
-            height: 32px;
-            #multiple-content();
-
-            .hasdata {
-
-            }
-            .nodata {
-
-            }
-
-            // 多选类型 且独自一行时
-            &-row {
-
-            }
+            #bri-control-wrap();
         }
-    }
-
-    // 单选 -新模式
-    &-custom {
-        width: 100%;
-
-        &-input {
+        // 单选 -默认模式
+        &-single {
             width: 100%;
-            height: 32px;
-            padding: 0px 7px;
-            .dsh-flex-row-between-center();
-
-            .text {
-                .dsh-ellipsis();
-            }
-            
-            .clear {
-                margin-left: 5px;
-            }
         }
     }
-    
-    // 单选 -默认模式
-    &-single {
-        width: 100%;
-    }
-    
+
     // 查看
     &-show {
         &-multiple {
-            #multiple-content();
+            #bri-control-wrap();
+        }
 
-            .hasdata {
-                &-unit {
-                    .dsh-ellipsis();
-                }
-            }
-            .nodata {
+        &-single {
 
-            }
+        }
+    }
 
-            // 多选类型 且独自一行时
-            &-row {
-                height: auto;
-                min-height: 32px;
+    // 多选类型且独自一行时
+    &-row {
+        &-edit,
+        &-show {
+            .text,
+            .overflow {
+                width: 100%;
+                height: 100%;
+                white-space: normal;
+                overflow: auto;
+                .bri-scrollbar3();
             }
         }
-
-        &-single {
-
+        &-edit {
+            height: 68px;
+        }
+        &-show {
+            height: auto;
         }
     }
 }