bri-components 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/abolish/DshFlatTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`DshFlatTable control-default`">
+    <div class="DshFlatTable">
         <!-- 表格内容 -->
         <div class="DshFlatTable-block">
             <table

package/src/components/controls/base/BriUpload/BriUpload.vue

@@ -14,7 +14,8 @@
             `BriUpload-${showType}`,
             {
                 'BriUpload-readonly': !canEdit,
-                'BriUpload-disabled': canEdit && !propsObj.canEdit
+                'BriUpload-disabled': canEdit && !finalCanEdit,
+                'BriUpload-unit': isUnitShow
             }
         ]"
     >

package/src/components/controls/base/BriUpload/BriUploadImage.vue

@@ -53,10 +53,7 @@
 
             </div>
             <div class="wrap">
-                <Button
-                    type="default"
-                    class="btn-cancel-outline z-default"
-                >点击上传</Button>
+                <Button type="default">点击上传</Button>
                 <input
                     id="fileupload"
                     class="file"
@@ -67,36 +64,26 @@
         </div>
 
         <!-- 修改头像模态框 -->
-        <Modal
-            :title="propsObj._title || '修改头像'"
+        <dsh-modal
             v-model="avatarModal"
-            class="bri-modal"
-            width="500"
-            :mask-closable="false"
-            :footer-hide="true"
+            mode="custom"
+            :propsObj="modalPropsObj"
             @on-visible-change="visibleChange"
         >
-            <div
-                class="avatar-modal"
-                style="width:400px;margin: 0 auto;"
-            >
-                <dsh-cropper
-                    style="width: 400px;height: 400px;"
-                    ref="cropper"
-                    :src="imgSrc"
-                    alt="Source Image"
-                    :cropmove="cropImage"
-                >
-                </dsh-cropper>
-                <div class="avatar-modal-footer bri-footer">
-                    <Button @click="cancelAvatarModal()">取消</Button>
-                    <Button
-                        type="primary"
-                        @click="photoSubmit()"
-                    >保存</Button>
-                </div>
-            </div>
-        </Modal>
+           <dsh-cropper
+                class="BriUploadImage-cropper"
+                ref="cropper"
+                :src="imgSrc"
+                alt="Source Image"
+                :cropmove="cropImage"
+            ></dsh-cropper>
+
+            <dsh-buttons
+                class="bri-modal-footer"
+                :list="$getOperationList(['cancel', 'confirm'])"
+                @click="$dispatchEvent($event)"
+            ></dsh-buttons>
+        </dsh-modal>
     </div>
 </template>
 
@@ -120,10 +107,29 @@
             isAvatar: {
                 type: Boolean,
                 default: false
+            },
+            // 阿里云上传方式
+            ossType: {
+                type: String,
+                default: "binaryMultipartUpload"
             }
         },
         data () {
             return {
+                operationMap: {
+                    cancel: {
+                        name: "取消",
+                        type: "cancel",
+                        btnType: "cancel",
+                        event: "cancelAvatarModal"
+                    },
+                    confirm: {
+                        name: "确认",
+                        type: "confirm",
+                        btnType: "primary",
+                        event: "photoSubmit"
+                    }
+                },
                 // 头像
                 avatarModal: false,
                 inputType: "file",
@@ -132,6 +138,13 @@
             };
         },
         computed: {
+            modalPropsObj () {
+                return {
+                    title: this.propsObj._name,
+                    class: "bri-modal",
+                    width: 450
+                };
+            },
             imageResizeConfig () {
                 return this.propsObj._imageResizeConfig || {
                     m: "fixed",
@@ -170,7 +183,7 @@
                     }
                     if (typeof FileReader === "function") {
                         const reader = new FileReader();
-                        if (this.propsObj._kind == "uploadImage") {
+                        if (this.propsObj._kind == "uploadImage" && !this.propsObj.cropper) {
                             reader.onload = (event) => {
                                 let data = event.target.result;
                                 this.inputType = "text";

package/src/components/controls/base/BriUpload/uploadMixin.js

@@ -255,7 +255,8 @@ export default {
                 };
             };
         },
-        putUpload (file, res, callback) {
+        // bri-upload-image 用的是这种方式
+        binaryMultipartUpload (file, res, callback) {
             let type = "jpg";
             let remoteName = `${this.randomTimeStampFn()}.${type}`;
 
@@ -277,7 +278,7 @@ export default {
                 callbackBody: this.transferCallBody(callbackBody)
             };
 
-            new this.$aliOss(res.ossConfig).put(remoteName, file, {
+            new this.$aliOss(res.ossConfig).multipartUpload(remoteName, file, {
                 progress: (percentage) => {
                     this.inProgress(Number((percentage * 100).toFixed(0)));
                     this.handleProgress && this.handleProgress(percentage, file);

package/src/components/controls/base/DshCascader/DshCascader.vue

@@ -3,9 +3,9 @@
         <!-- 编辑 -->
         <template v-if="canEdit">
             <!-- 多选 多选的filterable必须是false，不然出bug -->
-            <template v-if="useMultiple">
+            <template v-if="multipleMode">
                 <Cascader
-                    class="DshCascader-multiple"
+                    class="DshCascader-edit-multiple"
                     :value="multipleSelectVal"
                     :data="renderCascaderData"
                     :disabled="!finalCanEdit"
@@ -22,30 +22,32 @@
                     <div
                         :class="{
                             ...commonClass,
-                            'DshCascader-multiple-input': true,
-                            'DshCascader-multiple-input-row': isMultipleRow,
+                            'DshCascader-edit-multiple-edit': true,
+                            'DshCascader-row-edit': isMultipleRow,
                         }"
                         @click="clickInput"
                     >
                         <!-- 有值 -->
-                        <dsh-tags
-                            v-if="!$isEmptyData(curVal)"
-                            class="hasdata"
-                            :list="curValNameList"
-                            :propsObj="{
-                                disabled: !finalCanEdit,
-                                size: 'medium'
-                            }"
-                            @delete="deleteItem"
-                        ></dsh-tags>
+                        <template v-if="!$isEmptyData(curValList)">
+                            <dsh-tags
+                                class="overflow"
+                                :list="curValNameList"
+                                :propsObj="{
+                                    disabled: !finalCanEdit
+                                }"
+                                @delete="deleteItem"
+                            ></dsh-tags>
+
+                            <Icon
+                                class="icon-default"
+                                type="ios-arrow-down"
+                            />
+                        </template>
 
                         <!-- 无值 -->
-                        <div
-                            v-else
-                            class="nodata"
-                        >
+                        <template v-else>
                             {{ emptyShowVal }}
-                        </div>
+                        </template>
                     </div>
                 </Cascader>
             </template>
@@ -57,7 +59,7 @@
                     <div
                         :class="{
                             ...commonClass,
-                            'DshCascader-custom-input': true
+                            'DshCascader-edit-custom': true
                         }"
                         @mouseenter="isHover = true"
                         @mouseleave="isHover = false"
@@ -65,19 +67,19 @@
                     >
                         <!-- 内容 -->
                         <div class="text">
-                            {{ showText }}
+                            {{ showVal }}
                         </div>
 
                         <!-- 右侧图标 -->
                         <Icon
                             v-if="selfPropsObj._clearable && isHover"
-                            class="clear"
+                            class="icon-close"
                             type="md-close"
                             @click.stop="clickClear"
                         />
                         <Icon
                             v-else
-                            class="clear"
+                            class="icon-default"
                             type="ios-arrow-down"
                         />
                     </div>
@@ -97,7 +99,7 @@
                 <!-- 输入框方式 -->
                 <template v-else>
                     <Cascader
-                        class="DshCascader-single"
+                        class="DshCascader-edit-single"
                         :value="curValList"
                         :data="renderCascaderData"
                         :placeholder="selfPropsObj._placeholder"
@@ -120,9 +122,9 @@
         <!-- 查看 -->
         <template v-else>
             <!-- 多选 -->
-            <template v-if="useMultiple">
+            <template v-if="multipleMode">
                 <bri-tooltip
-                    :content="showMultipleText"
+                    :content="showMultipleVal"
                     placement="top"
                     maxWidth="200"
                     :transfer="true"
@@ -130,29 +132,22 @@
                     <div :class="{
                         ...commonClass,
                         'DshCascader-show-multiple': true,
-                        'DshCascader-show-multiple-row': isMultipleRow,
+                        'DshCascader-row-show': isMultipleRow && !isUnitShow,
                     }">
                         <!-- 有值 -->
                         <dsh-tags
-                            v-if="!$isEmptyData(curVal)"
-                            :class="{
-                                hasdata: true,
-                                'hasdata-unit': isUnitShow
-                            }"
+                            v-if="!$isEmptyData(curValList)"
+                            class="text"
                             :list="curValNameList"
                             :propsObj="{
-                                disabled: true,
-                                size: 'medium'
+                                closable: false
                             }"
                         ></dsh-tags>
 
                         <!-- 无值 -->
-                        <div
-                            v-else
-                            class="nodata"
-                        >
+                        <template v-else>
                             {{ emptyShowVal }}
-                        </div>
+                        </template>
                     </div>
                 </bri-tooltip>
             </template>
@@ -160,7 +155,7 @@
             <!-- 单选 -->
             <template v-else>
                 <bri-tooltip
-                    :content="showText"
+                    :content="showVal"
                     placement="top"
                     maxWidth="200"
                     :transfer="true"
@@ -169,7 +164,7 @@
                         ...commonClass,
                         'DshCascader-show-single': true
                     }">
-                        {{ showText }}
+                        {{ showVal }}
                     </div>
                 </bri-tooltip>
             </template>
@@ -234,7 +229,7 @@
                 return {
                     _filterable: true,
                     _showMode: false,
-                    _transfer: true,
+                    _transfer: false,
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
@@ -262,29 +257,33 @@
             },
 
             // 是否多选类型
-            useMultiple () {
+            multipleMode () {
                 return ["regions", "cascaders"].includes(this.propsObj._type);
             },
+            // 只有多选时有效
             isMultipleRow () {
-                return this.useMultiple && (this.selfPropsObj._span === 24 || !this.selfPropsObj._span);
+                return this.multipleMode && (this.selfPropsObj._span === 24 || !this.selfPropsObj._span);
             },
+            // 只有单选时有效
             showMode () {
                 return this.selfPropsObj._showMode;
             },
 
-            showText () {
-                return this.$isEmptyData(this.curVal)
-                    ? this.emptyShowVal
-                    : this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
-            },
-            showMultipleText () {
-                return this.curValNameList.join("、");
-            },
-            // 多选用的展示文字
+            // 多选用 名字组成的列表
             curValNameList () {
                 return this.curValList.map(item =>
                     this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
                 );
+            },
+            showVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+            },
+            showMultipleVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValNameList.join("、");
             }
         },
         created () {},

package/src/components/controls/base/DshCascader/InfoCascader.vue

@@ -124,10 +124,6 @@
                     let newarr = [];
                     treeList.forEach(element => {
                         if (element.children && element.children.length) {
-                            if (element.title.indexOf(value) > -1) {
-                                element.expand = true;
-                                newarr.push(element);
-                            }
                             const ab = rebuildData(value, element.children);
                             const obj = {
                                 ...element,
@@ -136,6 +132,9 @@
                             };
                             if (ab && ab.length) {
                                 newarr.push(obj);
+                            } else if (element.title.indexOf(value) > -1) {
+                                element.expand = true;
+                                newarr.push(element);
                             }
                         } else {
                             if (element.title.indexOf(value) > -1) {