bri-components 1.2.34 → 1.2.36

package/src/components/small/DshTabs.vue

@@ -1,227 +1,355 @@
-
 <template>
-    <div class="DshTabs">
-        <dsh-draggable
-            v-model="list"
-            class="DshTabs-draggable"
-            :style="{ minWidth: `${list.length * 110}px` }"
-            @change="$dispatchEvent(operationMap.drag, $event.moved.element, null, list)"
+    <Tabs
+        :class="['DshTabs', `DshTabs-${mode}`]"
+        v-model="curTabKey"
+        :animated="false"
+    >
+        <TabPane
+            v-for="tabItem in list"
+            :key="tabItem._key"
+            class="DshTabs-item"
+            :name="tabItem._key"
+            :label="getLabel(tabItem)"
+        >
+            <slot
+                v-if="renderStatusMap[tabItem._key]"
+                :tabItem="tabItem"
+            ></slot>
+        </TabPane>
+
+        <div
+            slot="extra"
+            class="DshTabs-extra"
         >
             <span
-                v-for="(item, index) in list"
-                :key="item._id"
-                :class="[
-                    'DshTabs-item',
-                    { 'DshTabs-item-normal': item.screenType !== 'all' },
-                    { 'DshTabs-item-active': item.screenType !== 'all' && !!curItem && curItem._id === item._id },
-                    { 'DshTabs-item-isEdit': item.isEdit }
-                ]"
-                @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
+                v-for="tabItem in rightTabList"
+                :key="tabItem._key"
+                :class="{
+                    'DshTabs-extra-item': true,
+                    'DshTabs-extra-item-active': tabItem._key === curTabKey
+                }"
+                @click="curTabKey = tabItem._key"
             >
-                <Input
-                    v-if="item.isEdit"
-                    :ref="item._id"
-                    class="DshTabs-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="DshTabs-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="[`DshTabs-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="DshTabs-item DshTabs-item-create"
-                @click="$dispatchEvent(operationItem, null, null, list)"
-            >
-                <Icon
-                    class="DshTabs-create-icon"
-                    :type="operationItem.icon"
-                    :color="operationItem.color"
-                    :size="operationItem.size"
-                />
+                {{ tabItem.name }}
             </span>
-        </dsh-draggable>
-    </div>
+        </div>
+    </Tabs>
 </template>
 
 <script>
     export default {
         name: "DshTabs",
         props: {
-            theme: {
+            value: {
+                type: String
+            },
+            mode: {
                 type: String,
-                default: "分组"
+                default: "creative",
+                validator (val) {
+                    return ["creative", "tradition", "page"].includes(val);
+                }
             },
-            value: {
+            list: {
                 type: Array,
                 default () {
                     return [];
                 }
-            },
-            canDeleFunc: Function
+            }
         },
         data () {
             return {
-                curItem: null
+                renderStatusMap: {}
             };
         },
         computed: {
-            list: {
+            curTabKey: {
                 get () {
-                    return this.value.map(item => {
-                        this.$set(item, "isEdit", item.isEdit || false);
-                        return item;
-                    });
+                    return this.value;
                 },
-                set (val) {
-                    this.$emit("input", val);
+                set (tabKey) {
+                    // iview的组件有问题，重复点击tab的某一项，set函数还是会触发！
+                    if (tabKey !== this.tmpTabKey) {
+                        this.init(tabKey);
+
+                        this.$emit("input", tabKey);
+                        this.$emit("change", tabKey, this.list.find(item => item._key === tabKey));
+                    }
                 }
             },
-            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"
-                    }
-                };
+            rightTabList () {
+                return this.list.filter(item => item.slot === "extra");
             }
         },
         created () {
-            this.init();
+            this.init(this.curTabKey != undefined ? this.curTabKey : (this.list[0] && this.list[0]._key));
         },
+        mounted () {},
         methods: {
-            // 初始化
-            init () {
-                this.curItem = this.list[0];
-                this.select();
+            init (tabKey) {
+                this.tmpTabKey = tabKey;
+                this.$set(this.renderStatusMap, tabKey, true);
             },
 
-            // 添加
-            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();
+            getLabel (tabItem) {
+                return tabItem.slot !== "extra"
+                    ? (h) => {
+                        return h("div", {
+                            style: {
+                                padding: "0px 16px"
+                            }
+                        }, tabItem.name);
+                    }
+                    : undefined;
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshTabs {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-item {
+            width: 100%;
+            height: 100%;
+            padding-top: 20px;
+        }
+
+        &-extra {
+            height: 100%;
+
+            &-item {
+                display: inline-block;
+                padding: 8px 16px;
+                font-size: @textSize;
+                cursor: pointer;
+
+                &-active {
+                    color: @themeColor;
+                    position: relative;
+
+                    &::after {
+                        content: "";
+                        width: 100%;
+                        height: 2px;
+                        position: absolute;
+                        bottom: 0px;
+                        left: 0;
+                        z-index: 1;
+                        background-color: @themeColor;
                     }
-                    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();
+        &-creative,
+        &-tradition {
+            .ivu-tabs {
+                color: @titleColor;
+
+                &-bar {
+                    height: 100%;
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
+
+                    .ivu-tabs-nav-right {
+                        margin-top: 8px;
+                        margin-left: 40px;
+                    }
+
+                    .ivu-tabs-nav-container {
+                        height: 100%;
+                        overflow: visible;
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    height: 100%;
+                                    display: flex;
+                                    flex-direction: row;
+                                    justify-content: center;
+                                    align-items: center;
+
+                                    i {
+                                        display: inline-block;
+                                        font-size: @largeTitleSize;
+                                    }
+                                }
+
+                                &-scroll {
+                                    &-disabled {
+                                        display: none;
+                                    }
+
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+                                            height: 0;
+                                            background-color: #FFF;
+                                        }
+
+                                        .ivu-tabs-tab {
+                                            // display: inline-block;
+                                            // height: 44px;
+                                            padding: 0px!important;
+                                            margin-right: 1px!important;
+                                            // background-color: #E5E5E5;
+                                            text-align: center;
+                                            line-height: 44px;
+                                            font-size: @textSize;
+                                            color: @titleColor;
+
+                                            &-active,
+                                            &-focused {
+                                                color: @themeColor;
+                                                background-color: #FFF;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
-            },
-            // 点击视图名
-            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);
+        &-tradition {
+            .ivu-tabs {
+                color: #ffffff;
+
+                &-bar {
+
+                    .ivu-tabs-nav-right {
+
+                    }
+
+                    .ivu-tabs-nav-container {
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    color: #ffffff;
+                                }
+
+                                &-scroll {
+                                    .ivu-tabs-nav {
+
+                                        .ivu-tabs-ink-bar {
+
+                                        }
+
+                                        .ivu-tabs-tab {
+                                            color: #ffffff;
+
+                                            &:hover {
+                                                color: #ffffff;
+                                            }
+
+                                            &-active,
+                                            &-focused {
+                                                color: @theme-active;
+
+                                                &:hover {
+                                                    color: @theme-active;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
             }
         }
-    };
-</script>
+
+        // 页面编辑版
+        &-page {
+            .ivu-tabs {
+
+                &-bar {
+                    border-bottom: 0px!important;
+                    margin-bottom: 0px!important;
+
+                    .ivu-tabs-nav-right {
+                        margin-left: 40px;
+                    }
+
+                    .ivu-tabs-nav-container {
+
+                        .ivu-tabs-nav-wrap {
+
+                            .ivu-tabs-nav {
+                                &-prev,
+                                &-next {
+                                    padding-top: 4px;
+
+                                    i {
+                                        font-size: @titleSize;
+                                    }
+                                }
+
+                                &-scroll {
+                                    .ivu-tabs-nav {
+                                        display: flex;
+                                        align-items: center;
+
+                                        // tab切换下方下划线
+                                        .ivu-tabs-ink-bar {
+                                            display: none;
+                                            &-animated {
+                                                display: none;
+                                            }
+                                        }
+
+                                        // tab切换标签
+                                        .ivu-tabs-tab {
+                                            display: inline-block;
+                                            height: 40px;
+                                            padding: 0px!important;
+                                            margin-right: 1px!important;
+                                            background-color: #E5E5E5;
+                                            text-align: center;
+                                            line-height: 40px;
+                                            font-size: @smallTitleSize;
+                                            color: #666666;
+
+                                            &-active {
+                                                background: @white!important;
+                                                color: @themeColor!important;
+                                                font-weight: 700;
+                                            }
+
+                                            &:hover {
+                                                color: @themeColor!important;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                &-content {
+                    flex: 1;
+                    min-height: 0px;
+                }
+
+                &-context-menu {
+
+                }
+            }
+        }
+    }
+</style>