bri-components 1.1.3 → 1.1.5

package/src/components/controls/base/{textMultiple/MultipleInput.vue → BriInputs.vue}

@@ -1,5 +1,5 @@
 <template>
-    <div class="MutipleInput">
+    <div class="BriInputs">
         <Input
             v-show="status === 'edit'"
             v-model="curInputVal"
@@ -10,25 +10,25 @@
         ></Input>
         <div
             v-show="status === 'show'"
-            class="MutipleInput-show"
+            class="BriInputs-show"
         >
             <span
-                class="MutipleInput-show-content"
+                class="BriInputs-show-content"
                 @click="clickAdd"
             >
                 <span
                     v-for="(val,index) in value[controlKey]"
-                    class="MutipleInput-show-content-item"
+                    class="BriInputs-show-content-item"
                     :key="index"
                 >
                     <span
-                        class="MutipleInput-show-content-item-content"
+                        class="BriInputs-show-content-item-content"
                         @click.stop="clickEdit(val,index)"
                     >
                         {{val}}
                     </span>
                     <Icon
-                        class="MutipleInput-show-content-item-del"
+                        class="BriInputs-show-content-item-del"
                         type="ios-close"
                         size="20"
                         @click.stop="clickDelete(val)"
@@ -36,7 +36,7 @@
                 </span>
             </span>
             <Icon
-                class="MutipleInput-show-add"
+                class="BriInputs-show-add"
                 type="md-create"
                 @click="clickAdd"
             />
@@ -45,13 +45,14 @@
 </template>
 
 <script>
-    import controlMixin from "../../controlMixin.js";
+    import controlMixin from "../controlMixin.js";
 
     export default {
-        name: "MutipleInput",
-        mixins: [controlMixin],
-        props: {
-        },
+        name: "BriInputs",
+        mixins: [
+            controlMixin
+        ],
+        props: {},
         data () {
             return {
                 status: "edit", // show

package/src/components/controls/base/{ZUpload/YUploadImage.vue → BriUpload/BriUploadImage.vue}

@@ -1,35 +1,68 @@
 <template>
-    <div class="YUploadImage">
-        <div class="YUploadImage-set" ref="viewerImage">
+    <div class="BriUploadImage">
+        <div
+            class="BriUploadImage-set"
+            ref="viewerImage"
+        >
             <div
                 v-if="value[propsObj._key] || propsObj._default || percent"
-                :class="['YUploadImage-set-img', isAvatar ? 'YUploadImage-set-avatar' : '']"
+                :class="['BriUploadImage-set-img', isAvatar ? 'BriUploadImage-set-avatar' : '']"
                 :style="{
                     backgroundImage: `url(${$imageResize(value[propsObj._key] || propsObj._default, imageResizeConfig)})`,
                     borderRadius: propsObj.radius ? '50%' : ''
                 }"
             >
-                <img :data-original="value[propsObj._key]" style="display:none">
-                <div v-if="value[propsObj._key] && propsObj._canAction" class="YUploadImage-set-action">
-                    <Icon class="YUploadImage-set-img-action" type="ios-eye-outline" size="16" @click.native="handlePreview"></Icon>
-                    <Icon class="YUploadImage-set-img-action" type="ios-trash-outline" size="16" @click.native="handleRemove"></Icon>
+                <img
+                    :data-original="value[propsObj._key]"
+                    style="display:none"
+                >
+                <div
+                    v-if="value[propsObj._key] && propsObj._canAction"
+                    class="BriUploadImage-set-action"
+                >
+                    <Icon
+                        class="BriUploadImage-set-img-action"
+                        type="ios-eye-outline"
+                        size="16"
+                        @click.native="handlePreview"
+                    ></Icon>
+                    <Icon
+                        class="BriUploadImage-set-img-action"
+                        type="ios-trash-outline"
+                        size="16"
+                        @click.native="handleRemove"
+                    ></Icon>
                 </div>
                 <!-- 上传进度 -->
-                <div  v-if="percent" class="YUploadImage-set-img-circle">
+                <div
+                    v-if="percent"
+                    class="BriUploadImage-set-img-circle"
+                >
                     <i-circle
                         class="circle"
                         :percent="percent"
                         :stroke-color="percentColor"
                     >
-                        <Icon v-if="percent == 100" type="ios-checkmark"></Icon>
+                        <Icon
+                            v-if="percent == 100"
+                            type="ios-checkmark"
+                        ></Icon>
                         <span v-else>{{ percent }}%</span>
                     </i-circle>
                 </div>
 
             </div>
             <div class="wrap">
-                <Button type="default" class="btn-cancel-outline z-default">点击上传</Button>
-                <input id="fileupload" class="file" :type="inputType" @change="setImage" />
+                <Button
+                    type="default"
+                    class="btn-cancel-outline z-default"
+                >点击上传</Button>
+                <input
+                    id="fileupload"
+                    class="file"
+                    :type="inputType"
+                    @change="setImage"
+                />
             </div>
         </div>
 
@@ -43,7 +76,10 @@
             :footer-hide="true"
             @on-visible-change="visibleChange"
         >
-            <div class="avatar-modal" style="width:400px;margin: 0 auto;">
+            <div
+                class="avatar-modal"
+                style="width:400px;margin: 0 auto;"
+            >
                 <dsh-cropper
                     style="width: 400px;height: 400px;"
                     ref="cropper"
@@ -54,7 +90,10 @@
                 </dsh-cropper>
                 <div class="avatar-modal-footer bri-footer">
                     <Button @click="cancelAvatarModal()">取消</Button>
-                    <Button type="primary" @click="photoSubmit()">保存</Button>
+                    <Button
+                        type="primary"
+                        @click="photoSubmit()"
+                    >保存</Button>
                 </div>
             </div>
         </Modal>
@@ -66,8 +105,10 @@
     import Viewer from "viewerjs";
 
     export default {
-        name: "YUploadImage",
-        mixins: [uploadMixin],
+        name: "BriUploadImage",
+        mixins: [
+            uploadMixin
+        ],
         components: {},
         props: {
             value: Object,

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

@@ -1,21 +1,20 @@
 <template>
-    <y-upload-image
+    <bri-upload-image
         v-if="propsObj._kind === 'uploadImage'"
         :value="value"
-        ossType="putUpload"
         :propsObj="propsObj"
         @change="change"
-    ></y-upload-image>
+    ></bri-upload-image>
 
     <div
         v-else
         :class="[
             prefixCls,
-            'ZUpload',
-            `ZUpload-${showType}`,
+            'BriUpload',
+            `BriUpload-${showType}`,
             {
-                'ZUpload-readonly': !canEdit,
-                'ZUpload-disabled': !finalCanEdit
+                'BriUpload-readonly': !canEdit,
+                'BriUpload-disabled': !finalCanEdit
             }
         ]"
     >
@@ -40,11 +39,11 @@
                 :disabled="!canClickUpload"
             >
             <slot>
-                <div :class="`ZUpload-${showType}-imageadd`">
+                <div :class="`BriUpload-${showType}-imageadd`">
 
                     <i-circle
                         v-if="percent"
-                        :class="`ZUpload-${showType}-circle`"
+                        :class="`BriUpload-${showType}-circle`"
                         :percent="percent"
                         :stroke-color="percentColor"
                     >
@@ -84,7 +83,7 @@
 <script>
     import controlMixin from "../../controlMixin.js";
     import uploadMixin from "./uploadMixin.js";
-    import YUploadImage from "./YUploadImage.vue";
+    import BriUploadImage from "./BriUploadImage.vue";
     import uploadList from "./upload-list.vue";
 
     const prefixCls = "ivu-upload";
@@ -95,7 +94,7 @@
             uploadMixin
         ],
         components: {
-            YUploadImage,
+            BriUploadImage,
             uploadList
         },
         props: {
@@ -232,7 +231,7 @@
                         [`${prefixCls}-select`]: this.type === "select",
                         [`${prefixCls}-drag`]: this.type === "drag",
                         [`${prefixCls}-dragOver`]: this.type === "drag" && this.dragOver,
-                        [`ZUpload-${this.showType}-wrapper`]: true
+                        [`BriUpload-${this.showType}-wrapper`]: true
                     }
                 ];
             }

package/src/components/controls/base/{ZUpload → BriUpload}/uploadMixin.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+
 const minio = require("minio");
 const stream = require("stream");
 export default {
@@ -25,8 +26,7 @@ export default {
             percent: 0
         };
     },
-    created () {
-    },
+    created () {},
     computed: {
         computedGroupKey () {
             return this.propsObj.groupKey || this.groupKey;

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

@@ -0,0 +1,393 @@
+<template>
+    <div class="DshCascader">
+        <!-- 编辑 -->
+        <template v-if="canEdit">
+            <!-- 多选 多选的filterable必须是false，不然出bug -->
+            <template v-if="useMultiple === true">
+                <Cascader
+                    class="DshCascader-multiple"
+                    :value="multipleSelectVal"
+                    :data="renderCascaderData"
+                    :disabled="!finalCanEdit"
+                    :change-on-select="selfPropsObj._changeOnSelect"
+                    :clearable="selfPropsObj._clearable"
+                    :size="selfPropsObj._size"
+                    :filterable="false"
+                    :transfer="selfPropsObj._transfer"
+                    :transfer-class-name="selfPropsObj._transferClassName"
+                    :load-data="loadData"
+                    @on-visible-change="multipleVisibleChange"
+                    @on-change="createItem"
+                >
+                    <div
+                        :class="{
+                            ...commonClass,
+                            'DshCascader-multiple-input': true,
+                            'DshCascader-multiplerow': isSelfRow,
+                        }"
+                        @click="clickInput"
+                    >
+                        <!-- 有值 -->
+                        <div
+                            v-if="!$isEmptyData(curVal)"
+                            class="hasdata"
+                        >
+                            <dsh-tags
+                                :list="curValNameList"
+                                :propsObj="{
+                                    closable: canEdit,
+                                    size: isSelfRow ? 'medium' : 'default'
+                                }"
+                                @delete="deleteItem"
+                            ></dsh-tags>
+                        </div>
+
+                        <!-- 无值 -->
+                        <span
+                            v-else
+                            class="nodata"
+                        >
+                            {{ emptyShowVal }}
+                        </span>
+                    </div>
+                </Cascader>
+            </template>
+
+            <!-- 单选 -->
+            <template v-else>
+                <!-- 弹框方式 -->
+                <template v-if="showMode === 'custom'">
+                    <div
+                        :class="{
+                            ...commonClass,
+                            'DshCascader-custom-input': true
+                        }"
+                        @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>
+
+                        <!-- 无值 -->
+                        <span
+                            v-else
+                            class="nodata"
+                        >
+                            {{ emptyShowVal }}
+                        </span>
+                    </div>
+
+                    <!-- 内容弹框 -->
+                    <info-cascader
+                        v-if="showModal"
+                        :showModal="showModal"
+                        v-model="curValList"
+                        :data="cascaderData"
+                        :propsObj="selfPropsObj"
+                        @change="change"
+                        @changeShowModal="changeShowModal"
+                    ></info-cascader>
+                </template>
+
+                <!-- 输入框方式 -->
+                <template v-else>
+                    <Cascader
+                        class="DshCascader-single"
+                        :value="curValList"
+                        :data="renderCascaderData"
+                        :placeholder="selfPropsObj._placeholder"
+                        :disabled="!finalCanEdit"
+                        :change-on-select="selfPropsObj._changeOnSelect"
+                        :clearable="selfPropsObj._clearable"
+                        :size="selfPropsObj._size"
+                        :filterable="selfPropsObj._filterable"
+                        :transfer="selfPropsObj._transfer"
+                        :transfer-class-name="selfPropsObj._transferClassName"
+                        :load-data="loadData"
+                        @on-visible-change="visibleChange"
+                        @on-change="changeVal"
+                        @click.stop="clickCascader"
+                    ></Cascader>
+                </template>
+            </template>
+        </template>
+
+        <!-- 查看 -->
+        <template v-else>
+            <div :class="{
+                ...commonClass,
+                'DshCascader-show': true,
+                'DshCascader-multiplerow': isSelfRow,
+            }">
+                <!-- 有值 -->
+                <div
+                    v-if="!$isEmptyData(curVal)"
+                    class="hasdata"
+                >
+                    <!-- 多选 -->
+                    <dsh-tags
+                        v-if="useMultiple"
+                        class="hasdata-multiple"
+                        :list="curValNameList"
+                        :propsObj="{
+                            size: isSelfRow ? 'medium' : 'default'
+                        }"
+                    ></dsh-tags>
+
+                    <!-- 单选 -->
+                    <Ctooltip
+                        v-else
+                        :content="curValNameStr"
+                        placement="top"
+                        maxWidth="200"
+                        :transfer="true"
+                    >
+                        <div class="hasdata-single">
+                            {{ curValNameStr }}
+                        </div>
+                    </Ctooltip>
+                </div>
+
+                <!-- 无值 -->
+                <span
+                    v-else
+                    class="nodata"
+                >
+                    {{ emptyShowVal }}
+                </span>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import { regionData } from "bri-datas";
+    import controlMixin from "../../controlMixin.js";
+    import InfoCascader from "./InfoCascader.vue";
+
+    const loop = function (data = [], level, parentCode, filterVals = []) {
+        if (data && filterVals.length) {
+            data = data.filter(item => filterVals.includes(item._key));
+        }
+        return data
+            ? data.reduce((arr, item) => {
+                const newItem = {
+                    ...item,
+                    value: item._key,
+                    label: item.name,
+                    codeArr: [ ...(parentCode || []), item._key ]
+                };
+                if (!level || level > item.level) {
+                    newItem.children = loop(item.children, level, newItem.codeArr);
+                    newItem.children.length && (newItem.loading = false); // 此代码为了所请求的级出现继续加载的箭头图标
+                } else {
+                    newItem.children = [];
+                }
+                arr.push(newItem);
+
+                return arr;
+            }, [])
+            : [];
+    };
+
+    export default {
+        name: "DshCascader",
+        mixins: [
+            controlMixin
+        ],
+        components: {
+            InfoCascader
+        },
+        props: {},
+        data () {
+            return {
+                renderDataFlag: true,
+                clickInputFlag: true,
+                isVisible: false,
+                multipleSelectVal: [], // 必须要，每次选完之后再选，需清空上次选的
+                selectVal: [],
+
+                isHover: false,
+                showModal: false,
+                modalVallist: []
+            };
+        },
+        computed: {
+            // 是否多选模式
+            useMultiple () {
+                return ["regions", "cascaders"].includes(this.propsObj._type);
+            },
+            selfPropsObj () {
+                return {
+                    _filterable: true,
+                    _showMode: false,
+                    _transfer: true,
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            cascaderData: {
+                get () {
+                    return loop(
+                        ["region", "regions"].includes(this.propsObj._type) ? regionData : this.selfPropsObj._data,
+                        this.selfPropsObj._cascaderLevel,
+                        undefined,
+                        this.selfPropsObj._cascaderFilterVals
+                    );
+                },
+                set () {}
+            },
+            renderCascaderData () {
+                return this.renderDataFlag
+                    ? this.cascaderData.map(item => {
+                        return {
+                            ...item,
+                            children: []
+                        };
+                    })
+                    : this.cascaderData;
+            },
+
+            showMode () {
+                return this.selfPropsObj._showMode;
+            },
+            isSelfRow () {
+                return this.selfPropsObj._span === 24 || !this.selfPropsObj._span;
+            },
+
+            // 单选用的展示文字
+            curValNameStr () {
+                return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
+            },
+            // 多选用的展示文字
+            curValNameList () {
+                return this.curValList.map(item =>
+                    this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
+                );
+            }
+        },
+        created () {},
+        methods: {
+            // 动态加载数据
+            loadData (treeItem, cb) {
+                let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
+                treeItem.children = list[list.length - 1].children.map(item => ({ ...item, children: [] }));
+
+                cb();
+            },
+
+            /* --------- 多选使用 -------- */
+            clickInput (e) {
+                if (!this.finalCanEdit) {
+                    e.stopPropagation();
+                }
+            },
+            // 展开和关闭弹窗时触发
+            multipleVisibleChange (bool) {
+                this.isVisible = bool;
+
+                if (bool === false) {
+                    if (this.selectVal.length) {
+                        if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
+                            this.$Message.error({
+                                content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
+                                duration: 5
+                            });
+                        } else {
+                            this.curValList = [...this.curValList, this.selectVal];
+                        }
+                    }
+
+                    this.selectVal = [];
+                    this.multipleSelectVal = [];
+                }
+            },
+            // 添加
+            createItem (selectVal, ...params) {
+                if (this.isVisible) {
+                    this.selectVal = selectVal;
+                }
+            },
+            // 删除
+            deleteItem (item, index) {
+                this.curValList.splice(index, 1);
+                this.curValList = [...this.curValList];
+            },
+
+            /* -------- 单选使用 ------- */
+            // 弹窗方式的 -打开模态框
+            openModal () {
+                if (this.finalCanEdit) {
+                    this.modalVallist = this.curValList;
+                    this.showModal = true;
+                }
+            },
+            // 弹窗方式的 -关闭模态框
+            changeShowModal (bool) {
+                this.showModal = bool;
+            },
+            // 弹窗方式的 -点击清除
+            clickClear () {
+                this.curValList = [];
+            },
+
+            // 默认方式的
+            clickCascader () {
+                if (this.finalCanEdit) {
+                    if (
+                        ["cascader"].includes(this.selfPropsObj._type) &&
+                        this.selfPropsObj._filterable === true &&
+                        this.renderDataFlag === true &&
+                        this.clickInputFlag === true
+                    ) {
+                        this.clickInputFlag = false; // 这个处理其实觉大概率没必要，有没有不受影响
+                        setTimeout(() => {
+                            this.renderDataFlag = false;
+                        }, 0);
+                    }
+                }
+            },
+            // 默认方式的 -展开和关闭弹窗时触发
+            visibleChange (bool) {
+                if (bool) {
+                    this.isVisible = bool;
+                } else {
+                    setTimeout(() => {
+                        this.isVisible = bool;
+                    }, 0);
+                }
+            },
+            // 默认方式的 -值改变
+            changeVal (val, ...params) {
+                if (this.isVisible || !val.length) {
+                    this.curValList = val;
+                }
+            }
+        },
+        watch: {
+            "propsObj._cascaderLevel" () {
+                this.value[this.controlKey] = [];
+            }
+        }
+    };
+</script>