bri-components 1.1.1 → 1.1.2

package/src/components/other/ZLoading.vue

@@ -9,7 +9,13 @@
     >
         <div class="ZLoading-main">
             <slot>
-                <img :src="imgSrc" />
+                <div class="ZLoading-main-content">
+                    <div class="ZLoading-main-loading" :style="getStyle">
+                    </div>
+                    <div v-if="showLoadingText" class="ZLoading-main-loadingText">
+                        加载中...
+                    </div>
+                </div>
             </slot>
         </div>
    </div>
@@ -37,7 +43,12 @@
             },
             kongImg: {
                 type: String
-            }
+            },
+            mode: {
+                type: String,
+                default: "large" // small middle
+            },
+            showLoadingText: Boolean
         },
         data () {
             return {};
@@ -51,9 +62,27 @@
                 } else {
                     return undefined;
                 }
+            },
+            getStyle () {
+                let styleMap = {
+                    large: {
+                        width: "49px",
+                        height: "49px"
+                    },
+                    middle: {
+                        width: "35px",
+                        height: "35px"
+                    },
+                    small: {
+                        width: "16px",
+                        height: "16px"
+                    }
+                };
+                return styleMap[this.mode];
             }
         },
         created () {},
-        methods: {}
+        methods: {
+        }
     };
 </script>

package/src/components/small/BriDrawer.vue

@@ -0,0 +1,132 @@
+<template>
+    <Drawer
+        class="BriDrawer"
+        v-model="showModal"
+        :title="selfPropsObj.title"
+        :width="selfPropsObj.width"
+        :height="selfPropsObj.height"
+        :closable="selfPropsObj.closable"
+        :mask-closable="selfPropsObj.maskClosable"
+        :mask="selfPropsObj.mask"
+        :mask-style="selfPropsObj.maskStyle"
+        :styles="selfPropsObj.styles"
+        :scrollable="selfPropsObj.scrollable"
+        :placement="selfPropsObj.placement"
+        :transfer="selfPropsObj.transfer"
+        :class-name="selfPropsObj.className"
+        :inner="selfPropsObj.inner"
+        :draggable="selfPropsObj.draggable"
+        :before-close="selfPropsObj.beforeClose"
+        :lock-scroll="selfPropsObj.lockScroll"
+        @on-close="close"
+        @on-visible-change="visibleChange"
+        @on-resize-width="resizeChange"
+    >
+        <div
+            slot="header"
+            class="BriDrawer-header"
+        >
+            <slot name="header">
+                {{ selfPropsObj.title }}
+            </slot>
+        </div>
+
+        <!-- 删除按钮 -->
+        <Icon
+            v-if="selfPropsObj.closable"
+            slot="close"
+            class="BriDrawer-close"
+            type="md-close"
+            size="20"
+            @click.stop="clickClose"
+        />
+
+        <slot
+            slot="trigger"
+            name="trigger"
+        ></slot>
+
+        <div class="BriDrawer-main">
+            <div class="BriDrawer-body">
+                <slot></slot>
+            </div>
+
+            <div
+                v-if="selfPropsObj.footer"
+                class="BriDrawer-footer"
+            >
+                <slot name="footer">
+                    <dsh-buttons
+                        :list="list"
+                        @click="$dshEmit($event)"
+                    ></dsh-buttons>
+                </slot>
+            </div>
+        </div>
+    </Drawer>
+</template>
+
+<script>
+    export default {
+        name: "BriDrawer",
+        props: {
+            value: Boolean,
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        model: {
+            prop: "value",
+            event: "input"
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            showModal: {
+                get () {
+                    return this.value;
+                },
+                set (bool) {
+                    this.input(bool);
+                }
+            },
+            selfPropsObj () {
+                return {
+                    width: 320,
+                    closable: true,
+                    transfer: true,
+                    footer: true,
+                    ...this.propsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            input (bool) {
+                this.$emit("input", bool);
+            },
+            clickClose () {
+                this.showModal = false;
+            },
+            close (...parmas) {
+                this.$emit("on-close", ...parmas);
+            },
+            resizeChange (...parmas) {
+                this.$emit("on-resize-change", ...parmas);
+            },
+            visibleChange (bool = false) {
+                this.$emit("on-visible-change", bool);
+            }
+        }
+    };
+</script>

package/src/components/small/DshButtons.vue

@@ -14,7 +14,7 @@
                     :key="operationItem.type"
                     :style="operationItem.style"
                     :class="[
-                        index ? 'dsh-margin-left5' : undefined,
+                        index ? 'dsh-margin-left8' : undefined,
                         !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
                         itemClass,
                     ]"
@@ -59,7 +59,7 @@
                     :key="operationItem.type"
                     :style="operationItem.style"
                     :class="[
-                        index ? 'dsh-margin-left5' : undefined,
+                        index ? 'dsh-margin-left8' : undefined,
                         !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
                         itemClass,
                     ]"
@@ -82,7 +82,7 @@
                 :key="operationItem.type"
                 :style="operationItem.style"
                 :class="[
-                    index ? 'dsh-margin-left5' : undefined,
+                    index ? 'dsh-margin-left8' : undefined,
                     !operationItem.customIcon && !operationItem.icon ? 'DshButtons-item' : undefined,
                     itemClass,
                     ...(Array.isArray(operationItem.class) ? operationItem.class : [operationItem.class])

package/src/components/small/DshModal.vue

@@ -164,7 +164,6 @@
         &-small {
             .ivu-modal-wrap {
                 .ivu-modal {
-                    padding: 20px;
                     margin: auto;
                     position: absolute;
                     top: 0px;
@@ -216,6 +215,31 @@
                     height: 400px !important;
                     max-height: 100%;
                     max-width: 100%;
+                    .ivu-modal-content{
+                        .DshModal-close {
+                            top: 20px;
+                            right: 24px;
+                            color: rgba(0,0,0,0.6);
+                            font-size: 16px!important;
+                        }
+
+                        .ivu-modal-header {
+                            width: 100%;
+                            height: 44px;
+                            padding: 20px 24px 0px 24px;
+                            border-bottom: none;
+                            &-inner {
+                                color: rgba(0,0,0,0.9);
+                                font-size: 16px;
+                                font-weight: 500;
+                                line-height: 24px;
+                                height: 24px;
+                            }
+                        }
+                        .ivu-modal-body {
+                            padding: 16px 24px 20px;
+                        }
+                    }
                 }
             }
         }

package/src/components/unit/DshFormItem.vue

@@ -1,17 +1,18 @@
 <template>
     <div
         :class="[
-            'DshFormItem',
-            { 'DshFormItem-required': formItem._required&&canEdit },
-            { 'DshFormItem-line': formItem._line },
-            `DshFormItem-${formItem._type}`,
+            {
+                'DshFormItem': true,
+                'DshFormItem-required': formItem._required && canEdit,
+                'DshFormItem-line': formItem._line,
+            },
             formControlClass,
+            formItem.formControlClass
         ]"
         :style="{
             width: `calc(${(formItem._br ? (formItem._span || 24)/24 : 1) * 100}% - 12px)`,
             height: formItem._br || (formItem._span || 24) === 24 ? undefined : `${height}px`,
             minHeight: `${46}px`,
-            alignItems: formItem._labelAlignItems || 'center',
             ...rowStyle
         }"
     >
@@ -19,11 +20,9 @@
         <div
             v-if="!formItem._noLabel"
             class="DshFormItem-label"
-            :style="[
-                selfLabelStyle,
-                { justifyContent: formItem._labelAlign }
-            ]"
+            :style="labelStyle"
         >
+            <!-- 左 -->
             <span
                 class="DshFormItem-label-left"
                 :style="labelLeftStyle"
@@ -32,13 +31,23 @@
                     :content="formItem._name"
                     transfer
                 >
-                    <span class="DshFormItem-label-name dsh-ellipsis">
+                    <span :class="{
+                        'DshFormItem-label-name': true,
+                        'dsh-ellipsis': true,
+                        'DshFormItem-label-name-edit': canEdit,
+                        'DshFormItem-label-name-show': !canEdit
+                    }">
                         <slot name="label">
                             {{ formItem._name }}
-                            <template v-if="changedFields && changedFields.includes(formItem._key)">
-                                <span class="DshFormItem-label-name-sign">！有更新</span>
-                            </template>
+
+                            <!-- 有更新标记-->
+                            <span
+                                v-if="changedFields.includes(formItem._key)"
+                                class="DshFormItem-label-name-sign"
+                            >！有更新</span>
                         </slot>
+
+                        <!-- label后可自定义内容 -->
                         <dsh-render
                             v-if="formItem._tipsRender"
                             :render="tipsRender(formItem,formData)"
@@ -47,8 +56,9 @@
                 </Ctooltip>
             </span>
 
+            <!-- 右 -->
             <span
-                v-if="canEdit || formItem._alwaysShowExtra"
+                v-if="canEdit"
                 class="DshFormItem-label-right"
             >
                 <slot name="extra">
@@ -66,12 +76,7 @@
         </div>
 
         <!-- 控件 -->
-        <div
-            class="DshFormItem-control"
-            :style="{
-                justifyContent: formItem._controlAlign
-            }"
-        >
+        <div class="DshFormItem-control">
             <!-- 控件位置放置的dom -->
             <slot name="control"></slot>
 
@@ -100,9 +105,20 @@
 
     export default {
         name: "DshFormItem",
-        mixins: [unitMixin],
+        mixins: [
+            unitMixin
+        ],
         props: {
-            changedFields: Array,
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            changedFields: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
 
             // 实际最精确值是74px（label:30px, control:32px, 上下padding各: 6px，因为ivu-form-item-content里line-height: 32px导致有问题，故先76px
             height: {
@@ -121,29 +137,12 @@
                     return {};
                 }
             },
-
-            labelWidth: [String, Number],
             formControlClass: String
         },
         data () {
-            return {
-                showTipModal: false
-            };
-        },
-        computed: {
-            selfLabelStyle () {
-                return {
-                    width: this.labelWidth + "px",
-                    ...this.labelStyle
-                    // marginRight: "20px"
-                };
-            },
-            labelLeftStyle () {
-                return {
-                    minWidth: this.labelWidth + "px"
-                };
-            }
+            return {};
         },
+        computed: {},
         created () {},
         methods: {
             // 校验方法 -供外部使用

package/src/components/unit/DshUnit.vue

@@ -16,15 +16,14 @@
         <template v-else>
             <component
                 :is="componentNameMap[formItem._type]"
-                :canEdit="canEdit"
                 :isUnit="isUnit"
-                :parentData="parentData"
                 :value="formData"
                 :propsObj="{
                     ...formItem,
                     size: 'default',
                     inTable: true
                 }"
+                :parentData="parentData"
                 @blur="blur"
                 @change="change"
             ></component>
@@ -37,11 +36,22 @@
 
     export default {
         name: "DshUnit",
-        mixins: [unitMixin],
+        mixins: [
+            unitMixin
+        ],
         props: {
+            isUnit: {
+                type: Boolean,
+                default: true
+            },
             indexStr: String,
             rowIndex: Number,
-            parentData: Array
+            parentData: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
         },
         data () {
             return {};
@@ -52,16 +62,13 @@
     };
 </script>
 
-<style lang="less" scoped>
-    .DshUnit {}
-</style>
 <style lang="less">
     .DshUnit {
         .ivu-input {
             font-size: 12px;
         }
 
-        .DshLabels-searchResult{
+        .DshLabels-searchResult {
             position:absolute;
             top: 32px !important;
             left:0;

package/src/components/unit/unitMixin.js

@@ -3,10 +3,6 @@ import { componentNameMap, registerComponents } from "../controls/controlMap.js"
 export default {
     components: registerComponents(),
     props: {
-        canEdit: {
-            type: Boolean,
-            default: true
-        },
         formData: Object,
         formItem: {
             type: Object,
@@ -19,10 +15,6 @@ export default {
             default () {
                 return [];
             }
-        },
-        isUnit: {
-            type: Boolean,
-            default: false
         }
     },
     data () {

package/src/index.js

@@ -8,8 +8,8 @@ import { VeTable, VeLocale } from "vue-easytable";
 import CN from "vue-easytable/libs/locale/lang/zh-CN.js";
 
 // list
-import { VTable } from "./components/list/easyTable/index.js";
-import EvTable from "./components/list/evTable/EvTable.vue"; // 大表格
+// import { VTable } from "./components/list/easyTable/index.js";
+// import EvTable from "./components/list/evTable/EvTable.vue"; // 大表格
 import DshBox from "./components/list/DshBox/DshBox.vue";
 import DshTable from "./components/list/DshBox/DshTable.vue";
 import DshList from "./components/list/DshBox/DshList.vue";
@@ -52,6 +52,7 @@ import BriTransfer from "./components/other/BriTransfer.vue";
 
 // small
 import DshModal from "./components/small/DshModal.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";
@@ -104,8 +105,8 @@ const map = {
     DshDraggable,
     DshCropper,
 
-    VTable,
-    EvTable,
+    // VTable,
+    // EvTable,
     DshBox,
     DshTable,
     DshList,
@@ -142,6 +143,7 @@ const map = {
     BriTransfer,
 
     DshModal,
+    BriDrawer,
     DshDropdown,
     DshRender,
     DshTdRender,
@@ -232,6 +234,7 @@ export {
     BriTransfer,
 
     DshModal,
+    BriDrawer,
     DshDropdown,
     DshRender,
     DshTdRender,

package/src/styles/common/box.less

@@ -41,6 +41,19 @@
     margin-right: 5px;
 }
 
+.dsh-margin-top8 {
+    margin-top: 8px;
+}
+.dsh-margin-bottom8 {
+    margin-bottom: 8px;
+}
+.dsh-margin-left8 {
+    margin-left: 8px;
+}
+.dsh-margin-right8 {
+    margin-right: 8px;
+}
+
 .dsh-margin-top10 {
     margin-top: 10px;
 }
@@ -115,6 +128,9 @@
 .dsh-padding20 {
     padding: 20px;
 }
+.dsh-padding24 {
+    padding: 24px;
+}
 .dsh-padding100 {
     padding: 100px;
 }
@@ -155,3 +171,16 @@
 .dsh-padding-right20 {
     padding-right: 20px;
 }
+.dsh-padding-top24 {
+    padding-top: 24px;
+}
+.dsh-padding-bottom24 {
+    padding-bottom: 24px;
+}
+.dsh-padding-left24 {
+    padding-left: 24px;
+}
+.dsh-padding-right24 {
+    padding-right: 24px;
+}
+

package/src/styles/common/control.less

@@ -19,6 +19,7 @@
     border: 1px solid @borderColor;
     background: @inputBg;
     border-radius: @borderRadius;
+    line-height: 32px;
     cursor: pointer;
 }
 .control-placeholder {

package/src/styles/components/controls/BriLabels.less

@@ -12,6 +12,11 @@
             border: 1px solid @borderColor;
             padding-left: 5px;
 
+            &-list {
+                display: flex;
+                align-items: center;
+            }
+
             &-active {
                 border-color: #64c6d1;
                 box-shadow: 0 0 0 2px rgba(61, 184, 197, 0.2);
@@ -66,6 +71,17 @@
                 }
             }
         }
+
+        &-btnWrap {
+            border-top: 1px solid #E7E7E7;
+            margin: 12px 8px 0;
+            padding-top: 8px;
+        }
+
+        &-add {
+            width: 300px;
+            margin-bottom: 8px;
+        }
     }
 
     .ivu-select-dropdown {
@@ -89,27 +105,25 @@
     }
 
     &-view {
-        .dsh-flex-row-start-start();
+        display: flex;
         flex-wrap: wrap;
+        align-items: center;
         height: 32px;
         overflow-y: hidden;
-
-        &-readonly {
-            width: 100%;
-            background: @white;
-            border: 1px solid #eee;
-            border-radius: 4px;
-            height: 32px;
-            cursor: not-allowed;
-
-            .DshLabels-view-nodata {
-                display: none;
-            }
-        }
-
-        &-tag {
-            width: fit-content;
-            margin-right: 10px;
+        &-item{
+            .unit-show();
+            .dsh-ellipsis();
+            display: inline-flex;
+            max-width: 100%;
+            height: fit-content;
+            padding: 0 8px;
+            background-color: @borderColor;
+            color: rgba(0,0,0,0.9);
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 24px;
+            border-radius: @borderRadius;
+            margin-right: 8px;
         }
 
         &-nodata {

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

@@ -18,18 +18,20 @@
 
             &-text {
                 .dsh-ellipsis();
+
                 &-disabled {
                     color: @borderColor;
                 }
             }
-            
+
             &-clear {
                 margin-left: 5px;
             }
         }
 
         &-placeholder {
-            color: @borderColor;
+            color: @placeholderColor;
+            padding: 0 7px;
         }
     }
 
@@ -57,6 +59,7 @@
             &-footer {
                 width: 100%;
                 padding: 10px;
+
                 .btn {
                     text-align: right;
                 }
@@ -66,7 +69,8 @@
 }
 
 .ivu-cascader-transfer {
-    max-height: 400px!important;
+    max-height: 400px !important;
+
     .ivu-cascader-menu {
         max-height: 400px;
         height: auto;