bri-components 1.1.5 → 1.2.0

package/src/{components/small → abolish}/DshFileShow.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="dsh-file-show">
+    <div class="DshFileShow">
         <!-- image类型 -->
         <img
             v-for="item in list"
             :key="item._id"
-            class="dsh-file-show-img"
+            class="DshFileShow-img"
             :style="{
                 cursor: isClick ? 'pointer' : 'auto'
             }"
@@ -19,13 +19,13 @@
         <!-- 预览 -->
         <div
             :class="{
-                'dsh-file-show-wrap': true,
-                'dsh-file-show-wrap-show': showModal
+                'DshFileShow-wrap': true,
+                'DshFileShow-wrap-show': showModal
             }"
             @click.stop="closeModal()"
         >
             <div
-                class="dsh-file-show-wrap-preview"
+                class="DshFileShow-wrap-preview"
                 :style="{
                     backgroundImage: `url(${curFile.url})`
                 }"
@@ -35,8 +35,6 @@
 </template>
 
 <script>
-    import axios from "axios";
-
     export default {
         name: "DshFileShow",
         props: {
@@ -68,6 +66,10 @@
         },
         created () {},
         methods: {
+            closeModal () {
+                this.showModal = false;
+            },
+
             // 获取不同类型文件的图片
             getFileImage (item) {
                 const imageMap = this.$imageSrcMap.fileType;
@@ -108,105 +110,28 @@
                         // this.downloadFile(item);
                     }
                 }
-            },
-            downloadFile (file) {
-                axios
-                    .get(file.url, {
-                        responseType: "blob"
-                    })
-                    .then((res) => {
-                        if (window.navigator.msSaveOrOpenBlob) {
-                            // 兼容IE10
-                            navigator.msSaveBlob(res, file.name);
-                        } else {
-                            const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
-                            const a = document.createElement("a");
-                            a.style.display = "none";
-                            a.href = href; // 指定下载链接
-                            a.download = file.name; // 指定下载文件名
-                            a.click();
-                            URL.revokeObjectURL(a.href); // 释放URL对象
-                            a.remove();
-                        }
-                });
-            },
-            closeModal () {
-                this.showModal = false;
             }
+            // downloadFile (file) {
+            //     axios
+            //         .get(file.url, {
+            //             responseType: "blob"
+            //         })
+            //         .then((res) => {
+            //             if (window.navigator.msSaveOrOpenBlob) {
+            //                 // 兼容IE10
+            //                 navigator.msSaveBlob(res, file.name);
+            //             } else {
+            //                 const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
+            //                 const a = document.createElement("a");
+            //                 a.style.display = "none";
+            //                 a.href = href; // 指定下载链接
+            //                 a.download = file.name; // 指定下载文件名
+            //                 a.click();
+            //                 URL.revokeObjectURL(a.href); // 释放URL对象
+            //                 a.remove();
+            //             }
+            //     });
+            // }
         }
     };
 </script>
-
-<style lang="less" scoped>
-    .dsh-file-show {
-        display: block;
-        overflow: hidden;
-        word-break: keep-all;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        display: flex;
-
-        &-img {
-            margin-right: 3px;
-            &:hover{
-                cursor: pointer;
-            }
-        }
-
-        // 遮罩层
-        &-wrap {
-            width: 100%;
-            height: 100%;
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            bottom: 0px;
-            right: 0px;
-            z-index: 9999;
-            text-align: center;
-            overflow: auto;
-            display: none;
-            background: rgba(0,0,0,0);
-
-            &-show {
-                display: block;
-                background: rgba(0,0,0,.6);
-                animation: animate-show .3s linear;
-            }
-
-            &-preview {
-                position: absolute;
-                width: 90%;
-                height: 90%;
-                top: 5%;
-                left: 5%;
-                left: 5%;
-                right: 5%;
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center;
-            }
-
-            // &-roll {
-            //     height: 100%;
-            //     position: absolute;
-            //     top: 0;
-            //     bottom: 0;
-            //     left: 0;
-            //     right: 0;
-            //     margin: auto;
-            // }
-        }
-
-        @keyframes animate-show {
-            from {
-                display: none;
-                background: rgba(0,0,0,0);
-            }
-            to {
-                display: block;
-                background: rgba(0,0,0,.6);
-            }
-        }
-    }
-</style>

package/src/components/controls/base/BriUpload/{index.vue → BriUpload.vue}

@@ -14,7 +14,7 @@
             `BriUpload-${showType}`,
             {
                 'BriUpload-readonly': !canEdit,
-                'BriUpload-disabled': !finalCanEdit
+                'BriUpload-disabled': canEdit && !propsObj.canEdit
             }
         ]"
     >
@@ -84,11 +84,11 @@
     import controlMixin from "../../controlMixin.js";
     import uploadMixin from "./uploadMixin.js";
     import BriUploadImage from "./BriUploadImage.vue";
-    import uploadList from "./upload-list.vue";
+    import uploadList from "./uploadList.vue";
 
     const prefixCls = "ivu-upload";
     export default {
-        name: "Upload",
+        name: "BriUpload",
         mixins: [
             controlMixin,
             uploadMixin

package/src/components/controls/base/BriUpload/{upload-list.vue → uploadList.vue}

@@ -12,11 +12,11 @@
             >
                 <div
                     v-for="fileItem in files"
-                    :key="fileItem.url"
-                    class="uploadList-listItem"
+                    :key="fileItem._key || fileItem._id"
+                    class="item"
                 >
                     <!-- 展示图 -->
-                    <div class="uploadList-listItem-show">
+                    <div class="item-show">
                         <img
                             v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
                             :data-original="fileItem.url"
@@ -31,26 +31,27 @@
                     </div>
 
                     <!-- 展示名称 -->
-                    <Ctooltip
+                    <bri-tooltip
                         v-if="propsObj._fileType != 'image'"
-                        class="uploadList-listItem-name"
+                        class="item-name"
                         :content="fileItem.name"
                         :transfer="true"
                         placement="top-start"
                         max-width="300"
                     >
-                        <p class="uploadList-listItem-name-title">{{ fileItem.name }}</p>
-                    </Ctooltip>
+                        <p class="item-name-title">{{ fileItem.name }}</p>
+                    </bri-tooltip>
 
                     <!-- 图标 -->
                     <dsh-icons
-                        class="uploadList-listItem-action"
-                        item-class="uploadList-listItem-action-icon"
+                        class="item-action"
+                        item-class="item-action-icon"
                         :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1)))"
                         @click="$dispatchEvent($event,fileItem)"
                     ></dsh-icons>
                 </div>
             </div>
+
             <div
                 v-else
                 class="uploadList-nodata"
@@ -59,17 +60,18 @@
                 <span>{{ noText }}</span>
             </div>
         </template>
+
         <!-- 自定义新的展示方式 -->
         <template v-else>
             <div
                 v-if="files && files.length > 0"
-                class="uploadList-inline-list bri-scrollbar6"
                 ref="viewerImage"
+                class="uploadList-inline-list"
             >
                 <div
-                    class="uploadList-inline-listItem"
                     v-for="fileItem in files"
                     :key="fileItem.url"
+                    class="item"
                 >
                     <img
                         v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
@@ -82,14 +84,16 @@
                         :src="getFileImage(fileItem)"
                         :alt="fileItem.name"
                     >
+
                     <dsh-icons
-                        class="uploadList-inline-listItem-action"
-                        item-class="uploadList-inline-listItem-action-icon"
+                        class="item-action"
+                        item-class="item-action-icon"
                         :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1) || (fileItem.mimetype=='text/plain')))"
                         @click="$dispatchEvent($event,fileItem)"
                     ></dsh-icons>
                 </div>
             </div>
+
             <span
                 v-else
                 class="uploadList-inline-nodata"

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

@@ -97,11 +97,7 @@ export default {
                 }
             })
                 .then(response => {
-                    const newResponse = {
-                        data: response,
-                        res: {}
-                    };
-                    this.handleSuccess && this.handleSuccess(newResponse, newResponse.data, file);
+                    this.handleSuccess && this.handleSuccess(response, response.data, file);
                     callback && callback(response.data);
                 }).catch(error => {
                     this.handleError && this.handleError(error, {}, file);

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

@@ -3,7 +3,7 @@
         <!-- 编辑 -->
         <template v-if="canEdit">
             <!-- 多选 多选的filterable必须是false，不然出bug -->
-            <template v-if="useMultiple === true">
+            <template v-if="useMultiple">
                 <Cascader
                     class="DshCascader-multiple"
                     :value="multipleSelectVal"
@@ -23,32 +23,29 @@
                         :class="{
                             ...commonClass,
                             'DshCascader-multiple-input': true,
-                            'DshCascader-multiplerow': isSelfRow,
+                            'DshCascader-multiple-input-row': isMultipleRow,
                         }"
                         @click="clickInput"
                     >
                         <!-- 有值 -->
-                        <div
+                        <dsh-tags
                             v-if="!$isEmptyData(curVal)"
                             class="hasdata"
-                        >
-                            <dsh-tags
-                                :list="curValNameList"
-                                :propsObj="{
-                                    closable: canEdit,
-                                    size: isSelfRow ? 'medium' : 'default'
-                                }"
-                                @delete="deleteItem"
-                            ></dsh-tags>
-                        </div>
+                            :list="curValNameList"
+                            :propsObj="{
+                                disabled: !finalCanEdit,
+                                size: 'medium'
+                            }"
+                            @delete="deleteItem"
+                        ></dsh-tags>
 
                         <!-- 无值 -->
-                        <span
+                        <div
                             v-else
                             class="nodata"
                         >
                             {{ emptyShowVal }}
-                        </span>
+                        </div>
                     </div>
                 </Cascader>
             </template>
@@ -62,39 +59,27 @@
                             ...commonClass,
                             'DshCascader-custom-input': true
                         }"
+                        @mouseenter="isHover = true"
+                        @mouseleave="isHover = false"
                         @click="openModal"
                     >
-                        <!-- 有值 -->
-                        <div
-                            v-if="!$isEmptyData(curValList)"
-                            class="hasdata"
-                            @mouseenter="isHover = true"
-                            @mouseleave="isHover = false"
-                        >
-                            <span class="hasdata-text">
-                                {{ curValNameStr }}
-                            </span>
-
-                            <Icon
-                                v-if="selfPropsObj._clearable && isHover"
-                                class="hasdata-clear"
-                                type="md-close"
-                                @click.stop="clickClear"
-                            />
-                            <Icon
-                                v-else
-                                class="hasdata-clear"
-                                type="ios-arrow-down"
-                            />
+                        <!-- 内容 -->
+                        <div class="text">
+                            {{ showText }}
                         </div>
 
-                        <!-- 无值 -->
-                        <span
+                        <!-- 右侧图标 -->
+                        <Icon
+                            v-if="selfPropsObj._clearable && isHover"
+                            class="clear"
+                            type="md-close"
+                            @click.stop="clickClear"
+                        />
+                        <Icon
                             v-else
-                            class="nodata"
-                        >
-                            {{ emptyShowVal }}
-                        </span>
+                            class="clear"
+                            type="ios-arrow-down"
+                        />
                     </div>
 
                     <!-- 内容弹框 -->
@@ -134,48 +119,60 @@
 
         <!-- 查看 -->
         <template v-else>
-            <div :class="{
-                ...commonClass,
-                'DshCascader-show': true,
-                'DshCascader-multiplerow': isSelfRow,
-            }">
-                <!-- 有值 -->
-                <div
-                    v-if="!$isEmptyData(curVal)"
-                    class="hasdata"
+            <!-- 多选 -->
+            <template v-if="useMultiple">
+                <bri-tooltip
+                    :content="showMultipleText"
+                    placement="top"
+                    maxWidth="200"
+                    :transfer="true"
                 >
-                    <!-- 多选 -->
-                    <dsh-tags
-                        v-if="useMultiple"
-                        class="hasdata-multiple"
-                        :list="curValNameList"
-                        :propsObj="{
-                            size: isSelfRow ? 'medium' : 'default'
-                        }"
-                    ></dsh-tags>
+                    <div :class="{
+                        ...commonClass,
+                        'DshCascader-show-multiple': true,
+                        'DshCascader-show-multiple-row': isMultipleRow,
+                    }">
+                        <!-- 有值 -->
+                        <dsh-tags
+                            v-if="!$isEmptyData(curVal)"
+                            :class="{
+                                hasdata: true,
+                                'hasdata-unit': isUnitShow
+                            }"
+                            :list="curValNameList"
+                            :propsObj="{
+                                disabled: true,
+                                size: 'medium'
+                            }"
+                        ></dsh-tags>
 
-                    <!-- 单选 -->
-                    <Ctooltip
-                        v-else
-                        :content="curValNameStr"
-                        placement="top"
-                        maxWidth="200"
-                        :transfer="true"
-                    >
-                        <div class="hasdata-single">
-                            {{ curValNameStr }}
+                        <!-- 无值 -->
+                        <div
+                            v-else
+                            class="nodata"
+                        >
+                            {{ emptyShowVal }}
                         </div>
-                    </Ctooltip>
-                </div>
+                    </div>
+                </bri-tooltip>
+            </template>
 
-                <!-- 无值 -->
-                <span
-                    v-else
-                    class="nodata"
+            <!-- 单选 -->
+            <template v-else>
+                <bri-tooltip
+                    :content="showText"
+                    placement="top"
+                    maxWidth="200"
+                    :transfer="true"
                 >
-                    {{ emptyShowVal }}
-                </span>
-            </div>
+                    <div :class="{
+                        ...commonClass,
+                        'DshCascader-show-single': true
+                    }">
+                        {{ showText }}
+                    </div>
+                </bri-tooltip>
+            </template>
         </template>
     </div>
 </template>
@@ -233,10 +230,6 @@
             };
         },
         computed: {
-            // 是否多选模式
-            useMultiple () {
-                return ["regions", "cascaders"].includes(this.propsObj._type);
-            },
             selfPropsObj () {
                 return {
                     _filterable: true,
@@ -268,16 +261,24 @@
                     : this.cascaderData;
             },
 
+            // 是否多选类型
+            useMultiple () {
+                return ["regions", "cascaders"].includes(this.propsObj._type);
+            },
+            isMultipleRow () {
+                return this.useMultiple && (this.selfPropsObj._span === 24 || !this.selfPropsObj._span);
+            },
             showMode () {
                 return this.selfPropsObj._showMode;
             },
-            isSelfRow () {
-                return this.selfPropsObj._span === 24 || !this.selfPropsObj._span;
-            },
 
-            // 单选用的展示文字
-            curValNameStr () {
-                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+            showText () {
+                return this.$isEmptyData(this.curVal)
+                    ? this.emptyShowVal
+                    : this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+            },
+            showMultipleText () {
+                return this.curValNameList.join("、");
             },
             // 多选用的展示文字
             curValNameList () {

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

@@ -77,7 +77,7 @@
             </Select>
         </template>
 
-        <Ctooltip
+        <bri-tooltip
             v-else
             placement="top"
             :transfer="true"
@@ -108,7 +108,7 @@
             >
                 {{ emptyShowVal }}
             </div>
-        </Ctooltip>
+        </bri-tooltip>
 
         <!-- tip项弹框提示 -->
         <dsh-render :render="tipModalRender"></dsh-render>
@@ -191,7 +191,7 @@
                     val.push(item.value);
                 }
 
-                this.change(val, item);
+                this.$emit("change", val);
             },
 
             isDisabled (item) {

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

@@ -1,6 +1,6 @@
 <template>
     <div class="DshCoordinates">
-        <Ctooltip
+        <bri-tooltip
             :content="curValName"
             placement="top"
             maxWidth="200"
@@ -155,7 +155,7 @@
                     {{ curValName || emptyShowVal }}
                 </span>
             </template>
-        </Ctooltip>
+        </bri-tooltip>
     </div>
 </template>
 

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

@@ -5,10 +5,11 @@
     >
         <!-- 编辑 -->
         <template v-if="canEdit">
+            <!-- 时间子类型 -->
             <template v-if="['time'].includes(subType)">
                 <TimePicker
-                    style="width: 100%;"
-                    v-model="val"
+                    class="DshDate-edit"
+                    v-model="curValDate"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
                     :disabled="!finalCanEdit"
@@ -18,10 +19,11 @@
                 ></TimePicker>
             </template>
 
+            <!-- 日期、日期时间、年、月 -->
             <template v-else>
                 <DatePicker
-                    style="width: 100%;"
-                    v-model="val"
+                    class="DshDate-edit"
+                    v-model="curValDate"
                     :type="subType"
                     :placeholder="selfPropsObj._placeholder"
                     :disabled="!finalCanEdit"
@@ -35,11 +37,19 @@
 
         <!-- 查看 -->
         <template v-else>
-            <control-show
-                :showVal="curVal"
-                :emptyShowVal="emptyShowVal"
-                :propsObj="selfPropsObj"
-            ></control-show>
+            <bri-tooltip
+                :content="showText"
+                maxWidth="200"
+                :transfer="true"
+            >
+                <div :class="{
+                    ...commonClass,
+                    'DshDate-unit': isUnitShow,
+                    'DshDate-show': !isUnitShow
+                }">
+                    {{ showText }}
+                </div>
+            </bri-tooltip>
         </template>
     </div>
 </template>
@@ -62,12 +72,13 @@
             selfPropsObj () {
                 return {
                     _transfer: true,
+
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
 
-            val: {
+            curValDate: {
                 get () {
                     const val = this.value[this.controlKey];
                     return this.$transformDateCompatible(val, this.subType);