bri-components 1.2.33 → 1.2.35

package/src/components/small/DshTabsSet.vue

@@ -0,0 +1,311 @@
+
+<template>
+    <div class="DshTabsSet">
+        <dsh-draggable
+            v-model="list"
+            class="DshTabsSet-draggable"
+            :style="{ minWidth: `${list.length * 110}px` }"
+            @change="$dispatchEvent(operationMap.drag, $event.moved.element, null, list)"
+        >
+            <span
+                v-for="(item, index) in list"
+                :key="item._id"
+                :class="[
+                    'DshTabsSet-item',
+                    { 'DshTabsSet-item-normal': item.screenType !== 'all' },
+                    { 'DshTabsSet-item-active': item.screenType !== 'all' && !!curItem && curItem._id === item._id },
+                    { 'DshTabsSet-item-isEdit': item.isEdit }
+                ]"
+                @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
+            >
+                <Input
+                    v-if="item.isEdit"
+                    :ref="item._id"
+                    class="DshTabsSet-item-input"
+                    v-model="item.name"
+                    :placeholder="`输入${theme}名字……`"
+                    @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
+                    @on-change="$dispatchEvent(operationMap.update, item, index, list)"
+                    @click.native.stop="0"
+                />
+                <span
+                    v-else
+                    class="DshTabsSet-item-name dsh-ellipsis"
+                >{{ item.name }}</span>
+
+                <template v-if="!item.isEdit && item.screenType !== 'all'">
+                    <Icon
+                        v-for="operationItem in $getOperationList(['delete', 'clickUpdate'])"
+                        :key="operationItem.type"
+                        :class="[`DshTabsSet-item-${operationItem.type}`]"
+                        :type="operationItem.icon"
+                        :color="operationItem.color"
+                        :size="operationItem.size || 18"
+                        @click.native.stop="$dispatchEvent(operationItem, item, index, list)"
+                    />
+                </template>
+            </span><!--
+
+            添加
+        --><span
+                v-for="operationItem in $getOperationList(['create'])"
+                :key="operationItem.type"
+                class="DshTabsSet-item DshTabsSet-item-create"
+                @click="$dispatchEvent(operationItem, null, null, list)"
+            >
+                <Icon
+                    class="DshTabsSet-create-icon"
+                    :type="operationItem.icon"
+                    :color="operationItem.color"
+                    :size="operationItem.size"
+                />
+            </span>
+        </dsh-draggable>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTabsSet",
+        props: {
+            theme: {
+                type: String,
+                default: "分组"
+            },
+            value: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            canDeleFunc: Function
+        },
+        data () {
+            return {
+                curItem: null
+            };
+        },
+        computed: {
+            list: {
+                get () {
+                    return this.value.map(item => {
+                        this.$set(item, "isEdit", item.isEdit || false);
+                        return item;
+                    });
+                },
+                set (val) {
+                    this.$emit("input", val);
+                }
+            },
+            operationMap () {
+                return {
+                    clickTab: {
+                        name: "点击",
+                        type: "clickTab",
+                        event: "clickTab"
+                    },
+                    create: {
+                        name: "添加",
+                        type: "create",
+                        icon: "md-add",
+                        size: 16,
+                        event: "create"
+                    },
+                    delete: {
+                        name: "删除",
+                        type: "delete",
+                        icon: "md-trash",
+                        size: 12,
+                        color: "red",
+                        event: "delete"
+                    },
+                    update: {
+                        name: "修改",
+                        type: "update",
+                        event: "update"
+                    },
+                    drag: {
+                        name: "拖动",
+                        type: "drag",
+                        event: "drag"
+                    },
+
+                    clickUpdate: {
+                        name: "点击修改",
+                        type: "clickUpdate",
+                        icon: "md-create",
+                        size: 12,
+                        color: "#1b9aee",
+                        event: "clickUpdate"
+                    },
+                    nameBlur: {
+                        name: "输入框失去焦点",
+                        type: "nameBlur",
+                        event: "nameBlur"
+                    }
+                };
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.curItem = this.list[0];
+                this.select();
+            },
+
+            // 添加
+            create (operationItem, data, index, list) {
+                let item = {
+                    _id: this.$ObjectID().str,
+                    _key: this.$randomB36("FieldGroup"),
+                    name: `${this.theme}${this.list.length + 1}`,
+                    isEdit: false
+                };
+                list.push(item);
+
+                this.curItem = item;
+                this.select();
+                this.change();
+            },
+            // 删除
+            delete (operationItem, data, index, list) {
+                if (!this.canDeleFunc || this.canDeleFunc(data, index, list)) {
+                    list.splice(index, 1);
+
+                    if (this.curItem && this.curItem._id === data._id) {
+                        this.curItem = list[1];
+                        this.select();
+                    }
+                    this.change();
+                }
+            },
+            // 修改
+            update (operationItem, data, index, list) {
+                this.change();
+            },
+            // 拖动
+            drag (operationItem, data, index, list) {
+                this.change();
+            },
+
+            // 切换视图
+            clickTab (operationItem, data, index, list) {
+                if (data.screenType !== "all" && (!this.curItem || this.curItem._id !== data._id)) {
+                    this.curItem = data;
+                    this.select();
+                }
+            },
+            // 点击视图名
+            clickUpdate (operationItem, data, index) {
+                data.isEdit = true;
+                data.oldName = data.name;
+
+                this.$nextTick(() => {
+                    this.$refs[data._id] && this.$refs[data._id][0].focus();
+                });
+            },
+            // 输入框失去焦点
+            nameBlur (operationItem, data, index) {
+                data.isEdit = false;
+                data.name = data.name || data.oldName;
+            },
+
+            // 当前值change回调事件
+            select () {
+                this.$emit("select", this.curItem);
+            },
+            // 标记改变回调事件
+            change () {
+                this.$emit("input", this.list);
+                this.$emit("change", this.list);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshTabsSet {
+        width: 100%;
+        min-height: 38px;
+        overflow: auto;
+        &-draggable {
+            height: 100%;
+            display: flex;
+        }
+
+        &-item {
+            display: inline-block;
+            min-width: 110px;
+            height: 100%;
+            padding: 10px 20px 10px 5px;
+            border-left: 1px solid @borderColor;
+            line-height: 18px;
+            text-align: center;
+            color: @textColor;
+            cursor: pointer;
+            overflow: hidden;
+            position: relative;
+            &-normal:hover,
+            &-isEdit,
+            &-active {
+                background-color: @bgColor;
+                font-weight: 600;
+                color: #515a6e;
+            }
+            &:hover {
+                .DshTabsSet-item-delete,
+                .DshTabsSet-item-clickUpdate {
+                    display: inline-block;
+                }
+            }
+
+            &-delete,
+            &-clickUpdate {
+                display: none;
+                padding: 2px;
+                position: absolute;
+                right: 2px;
+            }
+            &-delete {
+                top: 2px;
+            }
+            &-clickUpdate {
+                bottom: 2px;
+            }
+            &-create {
+                padding: 10px;
+                min-width: 60px;
+                border-right: 1px solid @borderColor;
+                &-icon {}
+            }
+
+            &-name {}
+            &-input {}
+        }
+    }
+
+    .DshTabsSet {
+        .ivu-input-wrapper {
+            vertical-align: baseline;
+        }
+        &-item-input {
+            .ivu-input {
+                min-width: 150px;
+                height: 18px;
+                padding: 3px;
+                border: none;
+                border-radius: 0px;
+                background-color: @bgColor;
+                line-height: 16px;
+                font-size: 12px;
+                color: #515a6e;
+                &:focus {
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+</style>

package/src/index.js

@@ -49,6 +49,7 @@ import DshIcons from "./components/small/DshIcons.vue";
 import DshModal from "./components/small/DshModal.vue";
 import DshSteps from "./components/small/DshSteps.vue";
 import DshTabs from "./components/small/DshTabs.vue";
+import DshTabsSet from "./components/small/DshTabsSet.vue";
 import DshTags from "./components/small/DshTags.vue";
 import DshTitle from "./components/small/DshTitle.vue";
 
@@ -135,6 +136,7 @@ const map = {
     DshModal,
     DshSteps,
     DshTabs,
+    DshTabsSet,
     DshTags,
     DshTitle,
     DshRender,
@@ -212,7 +214,7 @@ export {
     DshIcons,
     DshModal,
     DshSteps,
-    DshTabs,
+    DshTabsSet,
     DshTags,
     DshTitle,
     DshRender,

package/src/styles/components/index.less

@@ -70,7 +70,6 @@
 @import "./small/DshIcons.less";
 @import "./small/DshModal.less";
 @import "./small/DshSteps.less";
-@import "./small/DshTabs.less";
 @import "./small/DshTags.less";
 @import "./small/DshTitle.less";
 

package/src/styles/components/small/DshTabs.less

@@ -1,82 +0,0 @@
-.DshTabs {
-    width: 100%;
-    min-height: 38px;
-    overflow: auto;
-    &-draggable {
-        height: 100%;
-        display: flex;
-    }
-
-    &-item {
-        display: inline-block;
-        min-width: 110px;
-        height: 100%;
-        padding: 10px 20px 10px 5px;
-        border-left: 1px solid @borderColor;
-        line-height: 18px;
-        text-align: center;
-        color: @textColor;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-        &-normal:hover,
-        &-isEdit,
-        &-active {
-            background-color: @bgColor;
-            font-weight: 600;
-            color: #515a6e;
-        }
-        &:hover {
-            .DshTabs-item-delete,
-            .DshTabs-item-clickUpdate {
-                display: inline-block;
-            }
-        }
-
-        &-delete,
-        &-clickUpdate {
-            display: none;
-            padding: 2px;
-            position: absolute;
-            right: 2px;
-        }
-        &-delete {
-            top: 2px;
-        }
-        &-clickUpdate {
-            bottom: 2px;
-        }
-        &-create {
-            padding: 10px;
-            min-width: 60px;
-            border-right: 1px solid @borderColor;
-            &-icon {}
-        }
-
-        &-name {}
-        &-input {}
-    }
-}
-
-
-.DshTabs {
-    .ivu-input-wrapper {
-        vertical-align: baseline;
-    }
-    &-item-input {
-        .ivu-input {
-            min-width: 150px;
-            height: 18px;
-            padding: 3px;
-            border: none;
-            border-radius: 0px;
-            background-color: @bgColor;
-            line-height: 16px;
-            font-size: 12px;
-            color: #515a6e;
-            &:focus {
-                box-shadow: none;
-            }
-        }
-    }
-}