bri-components 1.1.2 → 1.1.3

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

@@ -1,309 +0,0 @@
-<!-- 动态标签 -->
-<template>
-    <div
-        ref="dshLabelsRef"
-        class="DshLabels"
-    >
-        <!-- 编辑 -->
-        <template v-if="canEdit">
-            <!-- 编辑区 -->
-            <Input
-                v-show="status === 'edit'"
-                v-model="curVal"
-                ref="dshLabelsInput"
-                class="DshLabels-input"
-                type="text"
-                :icon="selfPropsObj._inputIcon"
-                :placeholder="selfPropsObj._placeholder"
-                :disabled="!finalCanEdit"
-                @on-enter="onClick"
-                @on-click="onClick"
-                @on-change="onChange"
-                @on-focus="onChange"
-            ></Input>
-
-            <!-- 查看区 -->
-            <div
-                v-show="status === 'show'"
-                :class="{
-                    'DshLabels-show':true,
-                    'DshLabels-showReadOnly':!finalCanEdit
-                }"
-                @click="clickAdd"
-            >
-                <div
-                    class="DshLabels-show-content"
-                    @click="clickAdd"
-                >
-                    <span
-                        v-for="labelItem in val"
-                        :key="labelItem._key"
-                        class="DshLabels-show-content-item"
-                    >
-                        <span
-                            class="DshLabels-show-content-item-content"
-                            :title="labelItem.name"
-                            @click.stop="clickEdit(labelItem)"
-                        >
-                            {{ labelItem.name }}
-                        </span>
-                        <Icon
-                            class="DshLabels-show-content-item-del"
-                            type="ios-close"
-                            size="20"
-                            @click.stop="clickDelete(labelItem)"
-                        />
-                    </span>
-                </div>
-                <div
-                    v-if="canEdit"
-                    class="DshLabels-show-add"
-                >
-                    <Icon
-                        type="md-create"
-                        @click="clickAdd"
-                    />
-                </div>
-
-            </div>
-
-            <!-- 数据选择区：接口依据用户输入返回数据 -->
-            <div
-                v-if="ShowTagList"
-                ref="searchResultRef"
-                class="DshLabels-searchResult"
-                :style="{
-                    width: getStyle()
-                }"
-            >
-                <Icon
-                    type="md-close"
-                    class="DshLabels-searchResult-close"
-                    @click="closeTagList"
-                />
-                <ul
-                    v-if="list&&list.length>0"
-                    class="DshLabels-searchResult-list"
-                >
-                    <li
-                        v-for="item in list"
-                        :key="item._id"
-                        :class="{'selected':item.selected}"
-                        @click="clickTag(item)"
-                    >{{ item.name }}
-                    </li>
-                </ul>
-                <div
-                    v-else
-                    class="DshLabels-searchResult-nodata"
-                >
-                    无匹配数据
-                </div>
-            </div>
-        </template>
-
-        <!-- 查看 -->
-        <div
-            v-else
-            :class="{'DshLabels-view':true,
-                'DshLabels-view-readonly': $isReadonly(canEdit, selfPropsObj),
-                'DshLabels-view-disabled': $isDisabled(canEdit, selfPropsObj),
-            }"
-        >
-            <template v-if="val.length">
-                <Tag
-                    v-for="tagItem in val"
-                    :key="tagItem._key"
-                    size="medium"
-                    class="DshLabels-view-tag"
-                >
-                    {{ tagItem.name }}
-                </Tag>
-            </template>
-
-            <div
-                v-else
-                class="DshLabels-view-nodata"
-            >
-                <template v-if="isUnit">
-                    -
-                </template>
-                <template v-else>
-                    暂无内容
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../controlMixin.js";
-
-    export default {
-        name: "DshLabels",
-        mixins: [controlMixin],
-
-        data () {
-            return {
-                status: "", // edit/show
-                curVal: "",
-                curKey: "", // 当前正在修改label的_key
-                ShowTagList: false,
-                list: []
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj,
-                    _inputIcon: !this.propsObj._onlySelect ? "md-add" : ""
-                };
-            },
-            modKey () {
-                return this.propsObj.modKey;
-            },
-            val: {
-                get () {
-                    return this.value[this.propsObj._key] || [];
-                },
-                set (val) {
-                    this.value[this.propsObj._key] = val;
-                }
-            }
-        },
-        created () {
-            this.init();
-        },
-        methods: {
-            init () {
-                this.status = this.canEdit && !this.val.length
-                    ? "edit"
-                    : "show";
-
-            },
-            // 确认输入
-            onClick () {
-                if (this.finalCanEdit && !this.selfPropsObj._onlySelect) {
-                    if (this.curVal.trim().length > 0) {
-                        this.status = "show";
-                        let labelItem = {_key: "", name: ""};
-                        labelItem._key = this.curKey || this.$randomB36("Labels");
-                        labelItem.name = this.curVal.trim();
-                        labelItem.labelType = this.selfPropsObj._labelType;
-                        this.val = this.val.concat([labelItem]);
-                        this.ShowTagList = false;
-                        this.change();
-                    } else {
-                        this.status = "show";
-                        this.ShowTagList = false;
-                    }
-                }
-            },
-            onChange () {
-                this.getListData();
-            },
-            getListData () {
-                this.$https({
-                    url: {
-                        module: "sheet",
-                        name: "memberAll"
-                    },
-                    params: {
-                        search: {
-                            entityKey: this.entityKey, // 当前工作表关联的数据表Key
-                            modKey: this.modKey,
-                            name: this.curVal,
-                            fieldKey: this.selfPropsObj._key === "_default" ? this.value._key : (this.selfPropsObj.__realKey__ || this.selfPropsObj._key), // 当前字段Key
-                            labelType: this.selfPropsObj._labelType
-                        },
-                        pagination: {
-                            page: 1,
-                            pagesize: 999
-                        }
-                    },
-                    callback: data => {
-                        // 当前已选择的标签
-                        let keysArr = this.val.map(item => item._key);
-                        if (data.list.length > 0) {
-                            this.list = data.list.map(item => ({
-                                ...item,
-                                selected: !!keysArr.includes(item._key)
-                            }));
-                        } else {
-                            this.list = [];
-                        }
-                        this.ShowTagList = true;
-                        // this.ShowTagList = !this.ShowTagList;
-                    }
-                });
-            },
-            clickTag (item) {
-                if (this.finalCanEdit) {
-                    this.status = "show";
-                    let keysArr = this.val.map(i => i._key);
-                    if (!keysArr.includes(item._key)) {
-                        this.val = this.val.concat(this.list.filter(listItem => listItem._key == item._key));
-                        this.ShowTagList = false;
-                        this.change();
-                    } else {
-                        this.ShowTagList = false;
-                        this.status = "show";
-                        this.curVal = "";
-                    }
-                }
-            },
-            clickEdit (labelItem) {
-                if (this.finalCanEdit) {
-                    this.status = "edit";
-                    this.curVal = labelItem.name;
-                    this.curKey = labelItem._key;
-                    this.val = this.val.filter(i => i._key != labelItem._key);
-                }
-            },
-            // 切换为输入框编辑模式
-            clickAdd () {
-                if (this.finalCanEdit) {
-                    this.status = "edit";
-                    this.curVal = "";
-                    this.$nextTick(() => {
-                        this.$refs.dshLabelsInput.focus({
-                            cursor: "start"
-                        });
-                    });
-
-                    this.$debounce(this.getListData(), 100);
-                }
-            },
-            clickDelete (labelItem) {
-                if (this.finalCanEdit) {
-                    this.val = this.val.filter(i => i._key != labelItem._key);
-
-                    if (!this.val.length) {
-                        this.curVal = "";
-                        this.status = "edit";
-                        this.change();
-                    }
-                    this.change();
-                }
-            },
-            closeTagList () {
-                this.ShowTagList = false;
-                this.status = "show";
-            },
-            getStyle () {
-                this.$nextTick(() => {
-                    this.$refs.searchResultRef.style.width = `${this.$refs.dshLabelsRef.offsetWidth}px`;
-                    this.$refs.searchResultRef.style.top = `${this.$refs.dshLabelsRef.getBoundingClientRect().top + 34}px`;
-                });
-            }
-        },
-        watch: {
-            value (newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.init();
-                }
-            }
-        }
-    };
-</script>

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

@@ -1,52 +0,0 @@
-<template>
-    <div class="controlShow">
-        <Ctooltip
-            :transfer="true"
-            maxWidth="200"
-            :content="showVal"
-        >
-            <div
-                v-if="$isFormItemHasData(showVal)"
-                class="dsh-ellipsis controlShow-val"
-            >
-                {{ showVal }}
-            </div>
-            <div
-                v-else
-                class="controlShow-nodata dsh-ellipsis"
-            >
-                {{noDataText}}
-            </div>
-        </Ctooltip>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        name: "controlShow",
-        props: {
-            showVal: String,
-            propsObj: {
-                type: Object,
-                default: () => {
-                    return {};
-                }
-            },
-            isUnit: Boolean
-        },
-        data () {
-            return {
-            };
-        },
-        computed: {
-            noDataText () {
-                return this.isUnit ? "-" : "暂无内容";
-            }
-        },
-        created () {
-        },
-        methods: {
-        }
-    };
-</script>

package/src/styles/components/controls/DshLabels.less

@@ -1,187 +0,0 @@
-.DshLabels {
-    width: 100%;
-    position: relative;
-
-    i {
-        font-size: 16px;
-        cursor: pointer;
-    }
-
-    &-input{
-        .ivu-input{
-            height: 30px;
-            border: 1px solid #e5e5e5;
-            border-radius: 0;
-        }
-    }
-
-    &-show {
-        display: flex;
-        align-items: center;
-        border: 1px solid #e5e5e5;
-        border-radius: 4px;
-        background: @white;
-        color: #515a6e;
-        padding-left: 5px;
-        height: 30px;
-
-        &-content {
-            display: flex;
-            width: calc(100% - 20px);
-            height: 100%;
-            white-space: nowrap;
-
-            div{
-                width: 100%;
-                height: 38px;
-                display: flex;
-                overflow-x: scroll;
-                overflow-y: hidden;
-
-                .DshLabels-show-content-item {
-                    display: flex;
-                    width: fit-content;
-                    max-width: 50%;
-                    height: 28px;
-                    margin: 0 4px 1px 0;
-                    padding-left: 8px;
-                    background: #f7f7f7;
-                    border: 1px solid #e8eaec;
-                    border-radius: 3px;
-                    font-size: 14px;
-                    cursor: pointer;
-    
-                    &-content {
-                        width: fit-content;
-                        line-height: 28px;
-                        vertical-align: middle;
-                        display: inline-block;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-    
-                    &-del {
-                        display: inline-block;
-                        width: 20px;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-
-        &-add {
-            .dsh-flex ();
-            position: absolute;
-            right: 5px;
-            width: 24px;
-            height: 28px;
-            background: #fff;
-
-        }
-    }
-    
-    &-showReadOnly{
-        cursor: not-allowed;
-
-        .DshLabels-show-content{
-            width: 100%;
-        }
-    }
-
-    &-view{
-        .dsh-flex-row-start-start();
-        flex-wrap: wrap;
-        height: 32px;
-        overflow-y: hidden;
-
-        &-readonly{
-            width: 100%;
-            background: @white;
-            border: 1px solid #eee;
-            border-radius: 4px;
-            height: 32px;
-            cursor: not-allowed;
-
-            .DshLabels-view-nodata{
-                display: none;
-            }
-        }
-
-        &-tag {
-            width: fit-content;
-            margin-right: 10px;
-        }
-
-        &-nodata {
-            color: @textColor;
-        }
-    }
-
-    &-searchResult {
-        position: fixed;
-        z-index: 333;
-        max-height: 150px;
-        overflow: auto;
-        padding: 5px 10px;
-        background:  @white;
-        box-sizing: border-box;
-        border-radius: 4px;
-        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-
-        &-close{
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            z-index: 670;
-        }
-
-        &-select{
-            position: relative;
-            z-index: 666;
-            margin-right: 16px;
-        }
-
-        &-list{
-            .dsh-flex-row-start-start();
-            flex-wrap: wrap;
-
-            &>li{
-                display: inline-block;
-                width: fit-content;
-                background: #f5f5f5;
-                margin: 5px 10px 5px 0;
-                cursor: pointer;
-                font-size: @textSize;
-                line-height: 28px;
-                padding: 0 5px;
-                border-radius: 3px;
-                
-                &:hover{
-                    background: #f0faff;
-                    color:@themeColor;
-                }
-
-                &.active{
-                    background: #f0faff;
-                    color:@themeColor;
-                }
-
-                &.selected{
-                    cursor: not-allowed;
-                    background: #f0faff;
-                    color:@themeColor;
-                    &:hover{
-                        background:  #f0faff;
-                        color:@themeColor;
-                    }
-                }
-            }
-        }
-
-        
-        
-    }
-
-}