bri-components 1.5.22 → 1.6.0

package/src/components/small/DshTabsSet.vue

@@ -1,309 +1,309 @@
-
-<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="{
-                    'item': true,
-                    'item-active': !!curItem && curItem._id === item._id ,
-                    'item-edit': item.isEdit
-                }"
-                @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
-            >
-                <Input
-                    v-if="item.isEdit"
-                    class="item-input"
-                    :ref="item._id"
-                    v-model="item.name"
-                    :placeholder="`输入${theme}名字……`"
-                    @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
-                    @on-change="$dispatchEvent(operationMap.changeVal, item, index, list)"
-                    @click.native.stop="0"
-                />
-                <span
-                    v-else
-                    class="item-name dsh-ellipsis"
-                >{{ item.name }}</span>
-
-                <template v-if="!item.isEdit && item.screenType !== 'all'">
-                    <Icon
-                        v-for="operationItem in $getOperationList(['delete', 'update'])"
-                        :key="operationItem.type"
-                        :class="[`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="item item-create"
-                @click="$dispatchEvent(operationItem, null, null, list)"
-            >
-                <Icon
-                    class="item-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"
-                    },
-                    changeVal: {
-                        name: "修改",
-                        type: "changeVal",
-                        event: "changeVal"
-                    },
-                    drag: {
-                        name: "拖动",
-                        type: "drag",
-                        event: "drag"
-                    },
-
-                    update: {
-                        name: "点击修改",
-                        type: "update",
-                        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();
-                }
-            },
-            // 修改
-            changeVal (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;
-
-            &-delete,
-            &-update {
-                display: none;
-                padding: 2px;
-                position: absolute;
-                right: 2px;
-            }
-            &-delete {
-                top: 2px;
-            }
-            &-update {
-                bottom: 2px;
-            }
-            &-create {
-                padding: 10px;
-                min-width: 60px;
-                border-right: 1px solid @borderColor;
-                &-icon {}
-            }
-
-            &:hover,
-            &-active,
-            &-edit {
-                background-color: @bgColor;
-                font-weight: 600;
-                color: #515a6e;
-            }
-            &:hover {
-                .item-delete,
-                .item-update {
-                    display: inline-block;
-                }
-            }
-
-            &-input {
-                .ivu-input-wrapper {
-                    vertical-align: baseline;
-                }
-                .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;
-                    }
-                }
-            }
-            &-name {}
-        }
-    }
-</style>
+
+<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="{
+                    'item': true,
+                    'item-active': !!curItem && curItem._id === item._id ,
+                    'item-edit': item.isEdit
+                }"
+                @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
+            >
+                <Input
+                    v-if="item.isEdit"
+                    class="item-input"
+                    :ref="item._id"
+                    v-model="item.name"
+                    :placeholder="`输入${theme}名字……`"
+                    @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
+                    @on-change="$dispatchEvent(operationMap.changeVal, item, index, list)"
+                    @click.native.stop="0"
+                />
+                <span
+                    v-else
+                    class="item-name dsh-ellipsis"
+                >{{ item.name }}</span>
+
+                <template v-if="!item.isEdit && item.screenType !== 'all'">
+                    <Icon
+                        v-for="operationItem in $getOperationList(['delete', 'update'])"
+                        :key="operationItem.type"
+                        :class="[`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="item item-create"
+                @click="$dispatchEvent(operationItem, null, null, list)"
+            >
+                <Icon
+                    class="item-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"
+                    },
+                    changeVal: {
+                        name: "修改",
+                        type: "changeVal",
+                        event: "changeVal"
+                    },
+                    drag: {
+                        name: "拖动",
+                        type: "drag",
+                        event: "drag"
+                    },
+
+                    update: {
+                        name: "点击修改",
+                        type: "update",
+                        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();
+                }
+            },
+            // 修改
+            changeVal (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;
+
+            &-delete,
+            &-update {
+                display: none;
+                padding: 2px;
+                position: absolute;
+                right: 2px;
+            }
+            &-delete {
+                top: 2px;
+            }
+            &-update {
+                bottom: 2px;
+            }
+            &-create {
+                padding: 10px;
+                min-width: 60px;
+                border-right: 1px solid @borderColor;
+                &-icon {}
+            }
+
+            &:hover,
+            &-active,
+            &-edit {
+                background-color: @bgColor;
+                font-weight: 600;
+                color: #515a6e;
+            }
+            &:hover {
+                .item-delete,
+                .item-update {
+                    display: inline-block;
+                }
+            }
+
+            &-input {
+                .ivu-input-wrapper {
+                    vertical-align: baseline;
+                }
+                .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;
+                    }
+                }
+            }
+            &-name {}
+        }
+    }
+</style>