bri-components 1.2.10 → 1.2.11

package/package.json

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

package/src/components/controls/BriControlInput.vue

@@ -1,6 +1,52 @@
 <template>
-    <div class="BriControlInput">
+    <div
+        class="BriControlInput"
+        @mouseenter="isHover = true"
+        @mouseleave="isHover = false"
+    >
+        <!-- 有值 -->
+        <template v-if="!$isEmptyData(value)">
+            <!-- 数组的 -->
+            <dsh-tags
+                v-if="Array.isArray(value)"
+                class="overflow"
+                :list="value"
+                :propsObj="{
+                    disabled: !canEdit,
+                    closable: true
+                }"
+                @delete="clickDeleteItem"
+            ></dsh-tags>
 
+            <!-- 文字的 -->
+            <div
+                v-else
+                class="text"
+            >
+                {{ value }}
+            </div>
+        </template>
+        <!-- 无值 -->
+        <template v-else>
+            <div class="placeholder">
+                {{ propsObj._placeholder }}
+            </div>
+        </template>
+
+        <!-- 图标 -->
+        <template>
+            <Icon
+                v-if="!$isEmptyData(value) && propsObj._clearable && isHover"
+                class="icon-close"
+                type="ios-close-circle"
+                @click.stop="clickClear"
+            />
+            <Icon
+                v-else
+                class="icon-default"
+                :type="inputIcon"
+            />
+        </template>
     </div>
 </template>
 
@@ -9,15 +55,33 @@
         name: "BriControlInput",
         mixins: [],
         props: {
-
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            value: [Array, String],
+            inputIcon: String,
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
         },
         data () {
             return {
-
+                isHover: false
             };
         },
         computed: {},
         created () {},
-        methods: {}
+        methods: {
+            clickDeleteItem (...params) {
+                this.$emit("clickDeleteItem", ...params);
+            },
+            clickClear () {
+                this.$emit("clickClear");
+            }
+        }
     };
 </script>

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

@@ -13,9 +13,9 @@
             'BriUpload',
             `BriUpload-${showType}`,
             {
-                'BriUpload-readonly': !canEdit,
                 'BriUpload-disabled': canEdit && !finalCanEdit,
-                'BriUpload-unit': isUnitShow
+                'BriUpload-readonly': !canEdit,
+                'BriUpload-unit': !canEdit && isUnitShow
             }
         ]"
     >
@@ -23,25 +23,25 @@
         <div
             v-if="finalCanEdit"
             :class="classes"
-            @click="handleClick"
-            @drop.prevent="onDrop"
+            @click="clickUpload"
+            @drop.prevent="handleDrop"
             @paste="handlePaste"
             @dragover.prevent="dragOver = true"
             @dragleave.prevent="dragOver = false"
         >
             <input
                 ref="input"
-                type="file"
                 :class="[prefixCls + '-input']"
-                @change="handleChange"
-                :multiple="multiple"
-                :webkitdirectory="webkitdirectory"
+                type="file"
                 :accept="accept"
-                :disabled="!canClickUpload"
+                :multiple="multipleMode"
+                :webkitdirectory="false"
+                :disabled="finalCanEdit && percent > 0"
+                @change="handleChange"
             >
+
             <slot>
                 <div :class="`BriUpload-${showType}-imageadd`">
-
                     <i-circle
                         v-if="percent"
                         :class="`BriUpload-${showType}-circle`"
@@ -49,17 +49,23 @@
                         :stroke-color="percentColor"
                     >
                         <Icon
-                            v-if="percent == 100"
+                            v-if="percent === 100"
                             type="ios-checkmark"
                         ></Icon>
-                        <span v-else-if="showType=='old'">{{ percent }}%</span>
+                        <span v-else-if="showType === 'old'">
+                            {{ percent }}%
+                        </span>
                     </i-circle>
+
                     <template v-else>
                         <dsh-icons
-                            :list="$getOperationList([propsObj._fileType === 'image' ? 'add' : 'upload'])"
-                            @click="handleClick"
+                            :list="$getOperationList([fileType === 'image' ? 'add' : 'upload'])"
+                            @click="clickUpload"
                         ></dsh-icons>
-                        <span v-if="showType!='inline'">点击上传{{ propsObj._fileType === 'image' ? "图片" : "文件" }}</span>
+
+                        <span v-if="showType !== 'inline'">
+                            点击上传{{ fileType === 'image' ? "图片" : "文件" }}
+                        </span>
                     </template>
                 </div>
             </slot>
@@ -70,12 +76,12 @@
             <upload-list
                 v-if="showUploadList"
                 :canEdit="finalCanEdit"
-                :files="val"
+                :files="curValList"
                 :emptyShowVal="emptyShowVal"
                 :showType="showType"
                 :propsObj="propsObj"
-                @on-file-remove="handleRemove"
-                @on-file-preview="handlePreview"
+                @on-file-remove="clickDeteItem"
+                @on-file-preview="clickPreviewItem"
             ></upload-list>
         </slot>
     </div>
@@ -115,61 +121,6 @@
             },
             maxSize: {
                 type: Number
-            },
-            beforeUpload: Function,
-            onProgress: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onSuccess: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onError: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onRemove: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onPreview: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onExceededSize: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            onFormatError: {
-                type: Function,
-                default () {
-                    return {};
-                }
-            },
-            paste: {
-                type: Boolean,
-                default: false
-            },
-            disabled: {
-                type: Boolean,
-                default: false
-            },
-            webkitdirectory: {
-                type: Boolean,
-                default: false
             }
         },
         data () {
@@ -188,24 +139,20 @@
             };
         },
         computed: {
-            val: {
-                get () {
-                    return this.value[this.propsObj._key] || [];
-                },
-                set (val) {
-                    this.value[this.propsObj._key] = val;
-                }
-            },
-            itemDisabled () {
-                return !this.finalCanEdit;
-            },
             showType () {
                 // 宽度不为100%,级联表格或内部表格中显示新版
-                return this.propsObj.showType || ((this.propsObj._span < 24 && this.propsObj._span > 0 || this.propsObj.inTable) ? "inline" : "old");
+                return this.propsObj.showType
+                    ? this.propsObj.showType
+                    : ((!this.isFullRow || this.isInTable) ? "inline" : "old");
             },
-            multiple () {
+            fileType () {
+                // 宽度不为100%,级联表格或内部表格中显示新版
+                return this.propsObj._fileType;
+            },
+            multipleMode () {
                 return this.propsObj._multiple !== false;
             },
+
             accept () {
                 let documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf"];
                 let imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
@@ -215,7 +162,7 @@
 
                 // 限制文件格式
                 let format = [];
-                if (this.propsObj._fileType === "image") {
+                if (this.fileType === "image") {
                     format = imageType;
                 } else {
                     format = [...documentType, ...imageType, ...videoType, ...audioType, ...packageType];
@@ -236,130 +183,66 @@
                     }
                 ];
             }
-
         },
         methods: {
-            handleClick () {
+            clickUpload () {
                 this.$refs.input.click();
             },
-            handleChange (e) {
-                const files = e.target.files;
-
-                if (!files) {
-                    return;
-                }
-                this.uploadFiles(files);
-                this.$refs.input.value = null;
-            },
-            onDrop (e) {
-                this.dragOver = false;
-                if (this.itemDisabled) return;
-                this.uploadFiles(e.dataTransfer.files);
-            },
-            handlePaste (e) {
-                if (this.itemDisabled) return;
-                if (this.paste) {
-                    this.uploadFiles(e.clipboardData.files);
-                }
-            },
-            uploadFiles (files) {
-                let postFiles = Array.prototype.slice.call(files);
-                if (!this.multiple) postFiles = postFiles.slice(0, 1);
-
-                if (postFiles.length === 0) return;
-                postFiles.forEach(file => {
-                    this.upload(file);
-                });
+            clickDeteItem (fileItem) {
+                this.curValList.splice(this.curValList.indexOf(fileItem), 1);
+                this.curValList = [...this.curValList];
             },
-            upload (file) {
-                if (!this.beforeUpload) {
-                    return this.post(file);
-                }
+            clickPreviewItem (fileItem) {
+                if (fileItem.status === "finished") {
 
-                const before = this.beforeUpload(file);
-                if (before && before.then) {
-                    before.then(processedFile => {
-                        if (Object.prototype.toString.call(processedFile) === "[object File]") {
-                            this.post(processedFile);
-                        } else {
-                            this.post(file);
-                        }
-                    }, () => {
-                    });
-                } else if (before !== false) {
-                    this.post(file);
-                } else {
                 }
             },
-            post (file) {
-                // check format
-                if (this.format.length) {
-                    const fileFormat = file.name.split(".").pop().toLocaleLowerCase();
-                    const checked = this.format.some(item => item.toLocaleLowerCase() === fileFormat);
-                    if (!checked) {
-                        this.onFormatError(file, this.value[this.propsObj._key]);
-                        return false;
-                    }
-                }
-
-                // check maxSize
-                if (this.maxSize) {
-                    if (file.size > this.maxSize * 1024) {
-                        this.onExceededSize(file, this.value[this.propsObj._key]);
-                        return false;
-                    }
-                }
-
-                // 上传接口
-                this.handlePost(file);
-            },
-            getFile (file) {
-                const fileList = this.value[this.propsObj._key];
-                let target;
-                fileList.every(item => {
-                    target = file.uid === item.uid ? item : null;
-                    return !target;
-                });
-                return target;
-            },
-            handleProgress (percentage, file) {
-                this.onProgress(percentage, file, this.value[this.propsObj._key]);
-            },
-            handleSuccess (res, data, file) {
+            successCb (res, data) {
                 if (data.res === 0) {
-
-                    if (!this.value[this.propsObj._key]) {
-                        this.$set(this.value, this.propsObj._key, []);
-                    }
-                    this.value[this.propsObj._key].push(data.data);
-                    this.onSuccess(res, file, this.value[this.propsObj._key]);
-
-                    this.change();
-
+                    this.curValList = [
+                        ...this.curValList,
+                        ...data.data
+                    ];
                 } else {
                     this.$Message.error({
                         content: `操作失败！${this.$getMsgText(data.msg)}`,
                         duration: 4
                     });
-                    this.handleError && this.handleError(res, data, file);
                 }
             },
-            handleError (err, response, file) {
-                this.onError(err, response, file);
+
+            handleChange (e) {
+                if (e.target.files) {
+                    this.dealUpload(e.target.files);
+                    this.$refs.input.value = null;
+                }
             },
-            handleRemove (file) {
-                const fileList = this.value[this.propsObj._key];
-                fileList.splice(fileList.indexOf(file), 1);
-                this.onRemove(file, fileList);
-                this.change();
+            handleDrop (e) {
+                this.dragOver = false;
+                this.dealUpload(e.dataTransfer.files);
             },
-            handlePreview (file) {
-                if (file.status === "finished") {
-                    this.onPreview(file);
-                }
+            handlePaste (e) {
+                this.dealUpload(e.clipboardData.files);
             },
-            clearFiles () {
-                this.value[this.propsObj._key] = [];
+            dealUpload (files) {
+                if (this.finalCanEdit) {
+                    let postFiles = Array.prototype.slice.call(files);
+                    if (!this.multipleMode) {
+                        postFiles = postFiles.slice(0, 1);
+                    }
+
+                    postFiles.forEach(fileItem => {
+                        if (
+                            (this.format.length && !this.format.some(item => item.toLocaleLowerCase() === fileItem.name.split(".").pop().toLocaleLowerCase())) ||
+                            (this.maxSize && (fileItem.size > this.maxSize * 1024))
+                        ) {
+                            return false;
+                        } else {
+                            // 上传接口
+                            this.handlePost(fileItem);
+                        }
+                    });
+                }
             }
         }
     };

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

@@ -70,7 +70,7 @@
             :propsObj="modalPropsObj"
             @on-visible-change="visibleChange"
         >
-           <dsh-cropper
+            <dsh-cropper
                 class="BriUploadImage-cropper"
                 ref="cropper"
                 :src="imgSrc"
@@ -100,7 +100,8 @@
         props: {
             value: Object,
             propsObj: Object,
-            requestOssType: { // 上传的是阿里云还是本地
+            // 上传的是阿里云还是本地
+            requestOssType: {
                 type: String,
                 default: "default"
             },
@@ -248,7 +249,7 @@
                 }
                 return new File([u8arr], `${filename}.${extension}`, {type: mime});
             },
-            handleSuccess (response, res) {
+            successCb (response, res) {
                 this.value[this.propsObj._key] = res.data.downloadUrl;
                 this.$emit("change", res);
             },

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

@@ -27,7 +27,7 @@ export default {
             percent: 0
         };
     },
-    created () {},
+    created () { },
     computed: {
         computedGroupKey () {
             return this.propsObj.groupKey || this.groupKey;
@@ -47,21 +47,15 @@ export default {
             } else {
                 return "#6090ed";
             }
-        },
-        // 是否允许点击
-        canClickUpload () {
-            if (this.percent > 0) {
-                return false;
-            } else {
-                return this.finalCanEdit;
-            }
         }
     },
     methods: {
         handlePost (file, callback) {
             this.$https({
                 url: this.computedUrlModule,
-                params: {token: this.$route.query && this.$route.query.token},
+                params: {
+                    token: this.$route.query && this.$route.query.token
+                },
                 callback: res => {
                     this.inputType = "file";
                     if (res.ossType === "ali-oss") {
@@ -96,13 +90,12 @@ export default {
                 onUploadProgress: progressEvent => {
                     this.inProgress(Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0)));
                 }
-            })
-                .then(response => {
-                    this.handleSuccess && this.handleSuccess(response, response.data, file);
-                    callback && callback(response.data);
-                }).catch(error => {
-                    this.handleError && this.handleError(error, {}, file);
-                    callback && callback(error);
+            }).then(response => {
+                this.successCb && this.successCb(response, response.data, file);
+                callback && callback(response.data);
+            }).catch(error => {
+                this.handleError && this.handleError(error, {}, file);
+                callback && callback(error);
             });
         },
         multipartUpload (file, res, callback) {
@@ -161,7 +154,7 @@ export default {
                     "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
                 }
             }).then(response => {
-                this.handleSuccess && this.handleSuccess(response, response.data, file);
+                this.successCb && this.successCb(response, response.data, file);
                 callback && callback(response.data);
             }).catch((err, response) => {
                 this.handleError && this.handleError(err, response, file);
@@ -248,8 +241,9 @@ export default {
                                 groupKey: this.computedGroupKey,
                                 archiveKey: this.archiveKey[this.archiveKey.length - 1]
                             };
-                            axios.post(res.ossHost + res.confirmPath, {...callbackBody}).then(response => {
-                                this.handleSuccess && this.handleSuccess(null, response, null);
+                            axios.post(res.ossHost + res.confirmPath, { ...callbackBody })
+                                .then(response => {
+                                    this.successCb && this.successCb(null, response, null);
                             });
                         }
                     });
@@ -302,7 +296,7 @@ export default {
                     "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
                 }
             }).then(response => {
-                this.handleSuccess && this.handleSuccess(response, response.data, file);
+                this.successCb && this.successCb(response, response.data, file);
                 callback && callback(response.data);
             }).catch((err, response) => {
                 this.handleError && this.handleError(err, response, file);