bri-components 1.1.5 → 1.2.0

package/src/index.js

@@ -13,18 +13,17 @@ import DshTable from "./components/list/DshBox/DshTable.vue";
 import DshList from "./components/list/DshBox/DshList.vue";
 
 import BriTable from "./components/list/BriTable.vue";
-import ZTree from "./components/list/ZTree.vue";
 import BriFlatTable from "./components/list/BriFlatTable.vue";
 import DshCascaderTable from "./components/list/DshCascaderTable.vue";
+import DshPage from "./components/list/DshPage.vue";
 
 // form
 import DshForm from "./components/form/DshForm.vue";
 import DshAdvSearchForm from "./components/form/DshAdvSearchForm.vue";
 import DshDefaultSearch from "./components/form/DshDefaultSearch.vue";
-
 // unit
-import DshUnit from "./components/unit/DshUnit.vue";
 import DshFormItem from "./components/unit/DshFormItem.vue";
+import DshUnit from "./components/unit/DshUnit.vue";
 
 // controls
 import DshInput from "./components/controls/base/DshInput.vue";
@@ -33,39 +32,32 @@ import DshSelect from "./components/controls/base/DshSelect.vue";
 import DshCheckbox from "./components/controls/base/DshCheckbox.vue";
 import DshCascader from "./components/controls/base/DshCascader/DshCascader.vue";
 
-// 其他
-import ZCode from "./components/other/ZCode.vue";
-import DshMenu from "./components/other/menu/DshMenu.vue";
-import DshMenuNav from "./components/other/menu/DshMenuNav.vue";
-import DshBtnModal from "./components/other/DshBtnModal.vue";
+// other
+import BriCode from "./components/other/BriCode.vue";
+import BriLoading from "./components/other/BriLoading.vue";
 import DshAvatar from "./components/other/DshAvatar.vue";
-import DshEditPanel from "./components/other/DshEditPanel.vue";
+import DshBtnModal from "./components/other/DshBtnModal.vue";
 import DshColorPanel from "./components/other/DshColorPanel.vue";
-import YNoPermission from "./components/other/YNoPermission.vue";
-import ZGantt from "./components/other/ZGantt.vue";
-import ZCollapseTree from "./components/other/ZCollapseTree.vue";
-import ZLoading from "./components/other/ZLoading.vue";
-import BriTransfer from "./components/other/BriTransfer.vue";
+import DshEditPanel from "./components/other/DshEditPanel.vue";
+import DshMenu from "./components/other/DshMenu.vue";
+import DshMenuNav from "./components/other/DshMenuNav.vue";
 
 // small
-import DshModal from "./components/small/DshModal.vue";
+import BriButton from "./components/small/BriButton.vue";
 import BriDrawer from "./components/small/BriDrawer.vue";
-import DshDropdown from "./components/small/DshDropdown.vue";
-import DshRender from "./components/small/render.js";
-import DshTdRender from "./components/small/DshTdRender.js";
-import DshTitle from "./components/small/DshTitle.vue";
+import BriTooltip from "./components/small/BriTooltip.vue";
 import DshButtons from "./components/small/DshButtons.vue";
-import DshIcons from "./components/small/DshIcons.vue";
-import DshTags from "./components/small/DshTags.vue";
 import DshCrumbs from "./components/small/DshCrumbs.vue";
 import DshCrumbsItem from "./components/small/DshCrumbsItem.vue";
-import DshTabs from "./components/small/DshTabs.vue";
+import DshDropdown from "./components/small/DshDropdown.vue";
+import DshIcons from "./components/small/DshIcons.vue";
+import DshModal from "./components/small/DshModal.vue";
 import DshSteps from "./components/small/DshSteps.vue";
-import Ctooltip from "./components/small/Ctooltip.vue";
-import DshPage from "./components/small/DshPage.vue";
-import DshFileShow from "./components/small/DshFileShow.vue";
-import BriButton from "./components/small/BriButton.vue";
-import BriTree from "./components/small/BriTree.vue";
+import DshTabs from "./components/small/DshTabs.vue";
+import DshTags from "./components/small/DshTags.vue";
+import DshTitle from "./components/small/DshTitle.vue";
+import DshRender from "./components/small/render.js";
+import DshTdRender from "./components/small/DshTdRender.js";
 
 /* -------------------- 局部组件 ----------------------- */
 // error
@@ -73,85 +65,84 @@ import Error500 from "./components/Error/Error500.vue";
 import Error403 from "./components/Error/Error403.vue";
 import Error404 from "./components/Error/Error404.vue";
 
+// list
+import BriTree from "./components/list/BriTree.vue";
+
 // controls
 import BriInputs from "./components/controls/base/BriInputs.vue";
 import DshNumberange from "./components/controls/base/DshNumberange.vue";
 import DshDate from "./components/controls/base/DshDate.vue";
 import DshDaterange from "./components/controls/base/DshDaterange.vue";
 import DshSwitch from "./components/controls/base/DshSwitch.vue";
-import BriUpload from "./components/controls/base/BriUpload/index.vue";
+import BriUpload from "./components/controls/base/BriUpload/BriUpload.vue";
 import BriUploadImage from "./components/controls/base/BriUpload/BriUploadImage.vue";
 import DshCoordinates from "./components/controls/base/DshCoordinates.vue";
 import DshEditor from "./components/controls/base/DshEditor.vue";
 import DshDivider from "./components/controls/base/DshDivider.vue";
-
-/* 不挂载全局 */
 import DshPackage from "./components/controls/senior/DshPackage.vue";
 import DshBack from "./components/controls/special/DshBack.vue";
 import DshUndeveloped from "./components/controls/special/DshUndeveloped.vue";
+
 // other
-import ZIframe from "./components/other/ZIframe.vue";
-import BriSvg from "./components/other/BriSvg.vue";
+import BriCollapseTree from "./components/other/BriCollapseTree.vue";
+import BriGantt from "./components/other/BriGantt.vue";
+import BriIframe from "./components/other/BriIframe.vue";
 
 // ！！！！！！挂载全局的组件，不是别写在这
 const map = {
     DshDraggable,
     DshCropper,
 
+    // list
     DshBox,
     DshTable,
     DshList,
+
     BriTable,
-    ZTree,
-    BriFlatTable,
-    DshCascaderTable,
+    BriFlatTable, // 可取消全局
+    DshCascaderTable, // 可取消全局
+    DshPage,
 
+    // form
     DshForm,
     DshAdvSearchForm,
     DshDefaultSearch,
-
-    DshUnit,
+    // unit
     DshFormItem,
+    DshUnit,
 
+    // controls
     DshInput,
     DshNumber,
     DshSelect,
     DshCheckbox,
     DshCascader,
 
-    ZCode,
-    DshMenu,
-    DshMenuNav,
-    DshBtnModal,
+    // other
+    BriLoading,
     DshAvatar,
+    DshBtnModal,
     DshEditPanel,
     DshColorPanel,
-    YNoPermission,
-    ZGantt,
-    ZCollapseTree,
-    ZLoading,
-    BriTransfer,
+    DshMenu,
+    DshMenuNav,
 
-    DshModal,
+    // small
+    BriButton,
     BriDrawer,
-    DshDropdown,
-    DshRender,
-    DshTdRender,
-    DshTitle,
+    BriTooltip,
     DshButtons,
-    DshIcons,
-    DshTags,
     DshCrumbs,
     DshCrumbsItem,
-    DshTabs,
+    DshDropdown,
+    DshIcons,
+    DshModal,
     DshSteps,
-    Ctooltip,
-    DshPage,
-    DshFileShow,
-    BriButton,
-    BriTree,
-
-    BriSvg
+    DshTabs,
+    DshTags,
+    DshTitle,
+    DshRender,
+    DshTdRender
 };
 const install = function (Vue, opts = {}) {
     ViewUI.LoadingBar.config({
@@ -187,64 +178,35 @@ export {
     DshDraggable,
     DshCropper,
 
+    Error500,
+    Error403,
+    Error404,
+
     DshBox,
     DshTable,
     DshList,
+
     BriTable,
-    ZTree,
+    BriTree,
     BriFlatTable,
     DshCascaderTable,
+    DshPage,
 
+    // form
     DshForm,
     DshAdvSearchForm,
     DshDefaultSearch,
-
-    DshUnit,
+    // unit
     DshFormItem,
+    DshUnit,
 
+    // controls
     DshInput,
     DshNumber,
     DshSelect,
     DshCheckbox,
     DshCascader,
 
-    ZCode,
-    DshMenu,
-    DshMenuNav,
-    DshBtnModal,
-    DshAvatar,
-    DshEditPanel,
-    DshColorPanel,
-    YNoPermission,
-    ZGantt,
-    ZCollapseTree,
-    ZLoading,
-    BriTransfer,
-
-    DshModal,
-    BriDrawer,
-    DshDropdown,
-    DshRender,
-    DshTdRender,
-    DshTitle,
-    DshButtons,
-    DshIcons,
-    DshTags,
-    DshCrumbs,
-    DshCrumbsItem,
-    DshTabs,
-    DshSteps,
-    Ctooltip,
-    DshPage,
-    DshFileShow,
-    BriButton,
-    BriTree,
-
-    /* 局部 */
-    Error500,
-    Error403,
-    Error404,
-
     BriInputs,
     DshNumberange,
     DshDate,
@@ -255,11 +217,38 @@ export {
     DshCoordinates,
     DshEditor,
     DshDivider,
-
     DshPackage,
     DshBack,
     DshUndeveloped,
 
-    ZIframe,
-    BriSvg
+    // other
+    BriCode,
+    BriLoading,
+    DshAvatar,
+    DshBtnModal,
+    DshColorPanel,
+    DshEditPanel,
+    DshMenu,
+    DshMenuNav,
+
+    BriCollapseTree,
+    BriGantt,
+    BriIframe,
+
+    // small
+    BriButton,
+    BriDrawer,
+    DshButtons,
+    BriTooltip,
+    DshCrumbs,
+    DshCrumbsItem,
+    DshDropdown,
+    DshIcons,
+    DshModal,
+    DshSteps,
+    DshTabs,
+    DshTags,
+    DshTitle,
+    DshRender,
+    DshTdRender
 };

package/src/styles/common/control.less

@@ -1,91 +1,100 @@
-// 表格展示
+// 表格展示-非通用
 .unit-show () {
     background-color: @theme-focus;
     color: @themeColor;
     border-radius: @borderRadius;
     padding: 3px 8px;
-    text-align: center;
     line-height: 24px;
+    display: inline;
 }
 
-// // 表单模式
-// .control {
-//     &-show {
-//         border: none;
-//         background-color: transparent;
-//     }
-
-//     &-edit {
-//         height: 32px;
-//         border: 1px solid @borderColor;
-//         border-radius: @borderRadius;
-//         background: @inputBg;
-//         line-height: 32px;
-//         color: @textColor;
-//         cursor: pointer;
-//     }
-
-//     &-placeholder {
-//         color: @placeholderColor;
-//     }
-
-//     &-readonly {
-//         border: 1px solid @border-readonly;
-//         border-radius: @borderRadius;
-//         background: @inputBg-readonly;
-//         line-height: 32px;
-//         color: @textColor-readonly;
-//     }
-
-//     &-disabled {
-//         color: @textColor-disabled;
-//         border: 1px solid @border-disabled;
-//         background: @inputBg-disabled;
-//         border-radius: @borderRadius;
-//         cursor: not-allowed;
-//     }
-
-//     &-notext {
-//         color: @placeholderColor;
-//     }
-// }
-
 // 表单模式
 .control-edit {
-    height: 32px;
     border: 1px solid @borderColor;
     border-radius: @borderRadius;
     background: @inputBg;
-    line-height: 32px;
     cursor: pointer;
     color: @textColor;
+    &.control-notext {
+        .control-placeholder();
+    }
 }
 .control-disabled {
     border: 1px solid @border-disabled;
     border-radius: @borderRadius;
     background: @inputBg-disabled;
     cursor: not-allowed;
-    color: @textColor-disabled;
+    color: @textColor;
+    &.control-notext {
+        .control-disPlaceholder();
+    }
+}
+.control-readonly {
+    border: 1px solid @border-readonly;
+    border-radius: @borderRadius;
+    background: @inputBg-readonly;
+    cursor: not-allowed;
+    color: @textColor-readonly;
 }
 .control-show {
     border: none;
     background-color: transparent;
+    &.control-notext {
+        .control-notext();
+    }
 }
 .control-unit {
     border: none;
     background-color: transparent;
+    &.control-notext {
+        color: @text-color;
+    }
 }
 
+// 编辑模式下无数据
 .control-placeholder {
     color: @placeholderColor;
 }
-.control-readonly {
-    border: 1px solid @border-readonly;
-    border-radius: @borderRadius;
-    background: @inputBg-readonly;
-    line-height: 32px;
-    color: @textColor-readonly;
+// 编辑disabled模式下无数据
+.control-disPlaceholder {
+    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;
+            }
+        }
+    }
+    
+    .control-edit.control-notext {
+        padding-left: 7px;
+    }
+
+    &-text {
+        .dsh-ellipsis();
+    }
+
+    &-close {
+        padding: 5px;
+        display: none;
+    }
+    &-icon {
+        padding: 5px;
+    }
+}

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

@@ -0,0 +1,159 @@
+.BriUpload {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid @borderColor;
+    border-radius: @borderRadius;
+    background-color: @white;
+
+    // 外围
+    &-old {
+        overflow: hidden;
+        display: flex;
+
+        &-wrapper {
+            min-width: 120px;
+            height: 100%;
+            margin: 16px 0px 16px 16px;
+            border-radius: 0px;
+            border: none;
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            .dsh-flex-col-center-center();
+            width: 120px;
+            height: 120px;
+            position: relative;
+            border: 1px @borderColor dashed;
+            color: @themeColor;
+            border-radius: @borderRadius;
+            cursor: pointer;
+            &:hover {
+                border-color: @themeColor;
+                background-color: @theme-focus;
+            }
+        }
+
+        &-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 50px !important;
+            height: 50px !important;
+            margin-top: -25px;
+            margin-left: -25px;
+            border-radius: 50%;
+            background-color: @inputBg-readonly;
+
+            i {
+                color: @scuess-color;
+                font-size: 40px;
+            }
+        }
+    }
+
+    &-new,
+    &-inline {
+        display: flex;
+
+        &-wrapper {
+            min-width: 30px;
+            background-color: @border-readonly;
+            height: 30px;
+            line-height: 30px;
+            border: none;
+            border-radius: 0px !important;
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            .dsh-flex-row-center-center();
+            height: 30px;
+            background-color: @btn-hover;
+            color: @textColor;
+            border: none;
+            border-radius: 0px;
+            &:hover {
+                color: @themeColor;
+                background-color: @theme-focus;
+            }
+        }
+
+        &-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 24px !important;
+            height: 24px !important;
+            margin-top: -12px;
+            margin-left: -12px;
+            background-color: #f4f5fa;
+            border-radius: 50%;
+            i {
+                color: @scuess-color;
+                font-size: 24px;
+            }
+        }
+    }
+
+    &-readonly {
+        border: none;
+        border-radius: 0px;
+        background-color: transparent;
+    
+        .uploadList {
+            &-old {
+                margin: 0px;
+            }
+    
+            &-list {
+                .item {
+                    flex: 0 0 80px;
+                    height: 80px;  
+                }
+            }
+    
+            &-inline {
+                .bri-scrollbar6();
+                height: 48px;
+                line-height: 48px;
+    
+                .item {
+                    flex: 0 0 48px
+                }
+            }
+        }
+    }
+    
+    &-disabled {
+        .control-disabled();
+    
+        .uploadList {
+            &-old {
+                margin: 0px;
+            }
+    
+            &-list {
+                .item {
+                    flex: 0 0 80px;
+                    height: 80px;  
+                }
+            }
+
+            &-nodata {
+                .control-disPlaceholder();
+                text-indent: 7px;
+                text-align: left;
+            }
+            &-inline-nodata {
+                .control-disPlaceholder();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+.BriUploadImage {
+    position: relative;
+
+    &-set {
+        width: 100%;
+
+        &-img {
+            width: 100px;
+            height: 100px;
+            float: left;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            background-color: #fff;
+            border: 1px solid @borderColor;
+            border-radius: 0px;
+            position: relative;
+            overflow: hidden;
+
+            &-action {
+                color: @themeColor;
+                cursor: pointer;
+            }
+
+            &-circle {
+                position: absolute;
+                top: 0px;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                background-color: #f4f5fa;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .circle {
+                    width: 50px !important;
+                    height: 50px !important;
+                }
+
+                i {
+                    color: #5cb85c;
+                    font-size: 40px;
+                }
+            }
+        }
+
+        &-avatar {
+            background-size: cover;
+        }
+
+        .wrap {
+            width: 100px;
+            height: 32px;
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+            line-height: 18px;
+            text-align: center;
+            vertical-align: middle;
+            cursor: pointer;
+
+            button {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+            }
+
+            .file {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                margin: 0;
+                border: solid transparent;
+                opacity: 0;
+                filter: alpha(opacity=0);
+                cursor: pointer;
+            }
+        }
+    }
+}