bri-components 1.2.1 → 1.2.2

package/package.json

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

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

@@ -23,7 +23,7 @@
                         :class="{
                             ...commonClass,
                             'DshCascader-edit-multiple-edit': true,
-                            'DshCascader-row': isMultipleRow,
+                            'DshCascader-row-edit': isMultipleRow,
                         }"
                         @click="clickInput"
                     >
@@ -132,15 +132,12 @@
                     <div :class="{
                         ...commonClass,
                         'DshCascader-show-multiple': true,
-                        'DshCascader-row': isMultipleRow,
+                        'DshCascader-row-show': isMultipleRow && !isUnitShow,
                     }">
                         <!-- 有值 -->
                         <dsh-tags
                             v-if="!$isEmptyData(curValList)"
-                            :class="{
-                                overflow: true,
-                                'overflow-unit': isUnitShow
-                            }"
+                            class="text"
                             :list="curValNameList"
                             :propsObj="{
                                 closable: false

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

@@ -5,110 +5,108 @@
     >
         <template v-if="canEdit">
             <!-- 平铺 -->
-            <CheckboxGroup
-                v-if="showType === 'flat'"
-                :class="{
+            <template v-if="showType === 'flat'">
+                <CheckboxGroup
+                    :class="{
                     'DshCheckbox-group': true,
-                    'DshCheckbox-group-disabled': !canEdit && selfPropsObj._useColor,
-                    'DshCheckbox-group-color': selfPropsObj._useColor,
-                    'DshCheckbox-group-disabled-color': !canEdit && !selfPropsObj._useColor,
+                    'DshCheckbox-group-color': useColor,
+                    'DshCheckbox-group-disabled': !canEdit,
                     'DshCheckbox-group-scroll': selfPropsObj._span < 24 && !selfPropsObj._br,
                 }"
-                v-model="value[controlKey]"
-                @on-change="change"
-            >
-                <template v-if="listData.length">
-                    <Checkbox
+                    v-model="curValList"
+                >
+                    <!-- 有选项 -->
+                    <template v-if="listData.length">
+                        <Checkbox
+                            v-for="(item, index) in listData"
+                            :key="index"
+                            :class="[
+                                'DshCheckbox-item',
+                                getItemColorClass(item.color),
+                                selfPropsObj.class,
+                                item.class
+                            ]"
+                            :style="getItemStyle(item)"
+                            :label="item._key"
+                            :border="useColor"
+                            :disabled="getItemDisabled(item)"
+                            @click.native="clickOpenTip(item)"
+                        >
+                            <slot :item="item"></slot>
+                            <span>{{ item.name || item._name }}</span>
+                        </Checkbox>
+                    </template>
+
+                    <!-- 无选项 -->
+                    <div
+                        v-else
+                        class="dsh-subtip"
+                        style="backgroundColor: #f3f3f3;"
+                    >-- 无选择项 --</div>
+                </CheckboxGroup>
+            </template>
+
+            <!-- 下拉 -->
+            <template v-else>
+                <Select
+                    v-model="curValList"
+                    :multiple="true"
+                    :placeholder="selfPropsObj._placeholder"
+                    :disabled="!finalCanEdit"
+                    :filterable="selfPropsObj._filterable"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    :max-tag-count="selfPropsObj._maxTagCount"
+                >
+                    <Option
                         v-for="(item, index) in listData"
                         :key="index"
-                        :class="[
-                            'myChecked ',
-                            selfPropsObj.class,
-                            item.class,
-                            getColorClass(item.color)
-                        ]"
-                        :style="{
-                            backgroundColor: selfPropsObj._useColor ? getBgColor(item.color) : '',
-                            color:selfPropsObj._useColor ? getColor(item.color) : undefined
-                        }"
-                        :label="item._key"
-                        :border="selfPropsObj._useColor"
-                        :disabled="isDisabled(item)"
-                        @click.native="clickOpenTip(item)"
+                        :value="item._key"
+                        :label="item.name || item._name"
+                        :disabled="getItemDisabled(item)"
                     >
-                        <slot :item="item"></slot>
-                        <span>{{ item.name || item._name }}</span>
-                    </Checkbox>
-                </template>
+                        <Checkbox :value="curValList.includes(item._key)"></Checkbox>
 
-                <div
-                    v-else
-                    class="dsh-subtip"
-                    style="backgroundColor: #f3f3f3;"
-                >-- 无选择项 --</div>
-            </CheckboxGroup>
+                        <slot :item="item"></slot>
 
-            <!-- 下拉 -->
-            <Select
-                v-else
-                v-model="value[controlKey]"
-                :multiple="true"
-                :placeholder="selfPropsObj._placeholder"
-                :disabled="!finalCanEdit"
-                :filterable="selfPropsObj._filterable"
-                :transfer="selfPropsObj._transfer"
-                :transfer-class-name="selfPropsObj._transferClassName"
-                :max-tag-count="selfPropsObj._maxTagCount"
-                @on-select="select"
-            >
-                <Option
-                    v-for="(item, index) in listData"
-                    :key="index"
-                    :value="item._key"
-                    :label="item.name || item._name"
-                    :disabled="isDisabled(item)"
-                >
-                    <Checkbox :value="!!value[controlKey] && value[controlKey].includes(item._key)">
-                    </Checkbox>
-                    <slot :item="item"></slot>
-                    <span>{{ item.name || item._name }}</span>
-                    <span style="float:right;paddingRight:20px">{{ item.rightName }}</span>
-                </Option>
-            </Select>
+                        <span>{{ item.name || item._name }}</span>
+                        <span style="float:right;paddingRight:20px">
+                            {{ item.rightName }}
+                        </span>
+                    </Option>
+                </Select>
+            </template>
         </template>
 
-        <bri-tooltip
-            v-else
-            placement="top"
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-        >
-            <div
-                v-if="showVal"
-                class="DshCheckbox-value-wrapper"
-                :style="{
-                    justifyContent: flatShowAlign
-                }"
+        <!-- 查看 -->
+        <template v-else>
+            <bri-tooltip
+                :content="showMultipleVal"
+                placement="top"
+                maxWidth="200"
+                :transfer="true"
             >
-                <span
-                    v-for="col in colData"
-                    :key="col._id || col._key"
-                    class="DshCheckbox-value dsh-ellipsis"
-                    :style="{
-                        background: selfPropsObj._useColor ? getBgColor(col.color) : '',
-                        color: selfPropsObj._useColor ? getColor(col.color) : ''
-                    }"
-                >{{ col.name }}</span>
-            </div>
+                <div :class="{
+                    ...commonClass,
+                    'DshCheckbox-show': true
+                }">
+                    <!-- 有值 -->
+                    <dsh-tags
+                        v-if="!$isEmptyData(curValList)"
+                        class="text"
+                        :list="curValObjList"
+                        :propsObj="{
+                            closable: false
+                        }"
+                    ></dsh-tags>
 
-            <div
-                v-else
-                class="bri-control-nodata dsh-ellipsis"
-            >
-                {{ emptyShowVal }}
-            </div>
-        </bri-tooltip>
+                    <!-- 无值 -->
+                    <template v-else>
+                        {{ emptyShowVal }}
+                    </template>
+                </div>
+            </bri-tooltip>
+        </template>
 
         <!-- tip项弹框提示 -->
         <dsh-render :render="tipModalRender"></dsh-render>
@@ -116,9 +114,9 @@
 </template>
 
 <script>
-    import { resourceData } from "bri-datas";
     import controlMixin from "../controlMixin.js";
     import selectMixin from "./selectMixin.js";
+    import { resourceData } from "bri-datas";
 
     // optionKind值 'flat'、'dropdown'
     export default {
@@ -129,18 +127,7 @@
         ],
         props: {},
         data () {
-            return {
-                getBgColor: color => {
-                    let curColor = this.colorMap[color] || this.colorMap["color-1"];
-                    return this.$getColor(curColor, 0.1);
-                },
-                getColor: color => {
-                    return this.colorMap[color] || this.colorMap["color-1"];
-                },
-                getColorClass: color => {
-                    return this.colorMap[color] ? color : "color-1";
-                }
-            };
+            return {};
         },
         computed: {
             selfPropsObj () {
@@ -150,55 +137,61 @@
                     _data: [],
 
                     ...this.propsObj,
-                    ...this.commonDealPropsObj,
-                    _maxTagCount: this.propsObj._maxTagCount || undefined
+                    ...this.commonDealPropsObj
                 };
             },
-            colorMap () {
-                return this.selfPropsObj.colorMap || resourceData.colorMap;
+            listData () {
+                return (this.selfPropsObj._data || []).concat(this.initListData);
             },
+
             showType () {
                 return this.selfPropsObj._optionKind;
             },
-
-            listData () {
-                return (this.selfPropsObj._data || []).concat(this.initListData);
+            useColor () {
+                return this.selfPropsObj._useColor;
             },
-            showVal () {
-                return this.colData.map(col => col.name).join("、");
+            colorMap () {
+                return this.selfPropsObj.colorMap || resourceData.colorMap;
             },
-            // 选项数据
-            colData () {
-                return this.listData.filter(item => (this.curVal || []).includes(item._key));
+
+            // 已选择项的对象列表
+            curValObjList () {
+                return this.listData
+                    .filter(item => this.curValList.includes(item._key))
+                    .map(item => {
+                        return {
+                            ...item,
+                            style: this.getItemStyle(item),
+                            color: undefined
+                        };
+                });
             },
-            flatShowAlign () {
-                return !this.propsObj._align || this.propsObj._align == "left" || !this.isUnitShow
-                    ? "flex-start"
-                    : this.propsObj._align == "right"
-                        ? "flex-end"
-                        : "center";
+            showMultipleVal () {
+                return this.curValObjList.map(item => item.name).join("、");
             }
         },
         created () {},
         methods: {
-            // 下拉框的选择
-            select (item) {
-                let val = this.curVal;
-                if (val.includes(item.value)) {
-                    let itemIndex = val.findIndex(valItem => valItem === item.value);
-                    val.splice(itemIndex, 1);
-                } else {
-                    val.push(item.value);
-                }
-
-                this.$emit("change", val);
+            getItemColorClass (color) {
+                return this.colorMap[color] ? color : "color-1";
             },
-
-            isDisabled (item) {
+            getItemStyle (item) {
+                const getColor = (color) => {
+                    return this.colorMap[color] || this.colorMap["color-1"];
+                };
+                const getBgColor = (color) => {
+                    return this.$getColor(getColor(color), 0.1);
+                };
+                return {
+                    background: this.useColor ? getBgColor(item.color) : undefined,
+                    color: this.useColor ? getColor(item.color) : undefined
+                };
+            },
+            getItemDisabled (item) {
                 return !!(
                     !this.finalCanEdit ||
                     item._disabled ||
-                    this.curVal && this.curVal.length >= this.selfPropsObj._max && !this.curVal.includes(item._key)
+                    this.curValList.length >= this.selfPropsObj._max && !this.curValList.includes(item._key)
                 );
             }
         }