lshcomment 1.0.0

package/src/components/iris-modal/index.vue

@@ -0,0 +1,237 @@
+<template>
+    <div class="iris-modal-font">
+        <b-modal 
+            id="modalPrevent"
+            ref="mydeletemodalcard"
+            @shown="showM"
+            :hide-footer="true"
+            :hide-header="true"
+        >
+            <div class="myselfDelete">
+                <div class="myselfDelete-mysmall-warning" v-if="hasWarningTitle"><span></span><span>{{ warnigTitle }}</span></div>
+                <div v-if="hasTipsTitle" class="myselfDelete-mysmall-tips">{{ tipsTitle }}</div>
+                <div class="myselfDelete-mysmall-input-modal">
+                    <div v-if="isShowtips" class="myselfDelete-mysmall-input-tips">
+                        输入<span>"{{ sureName }}"</span>点击<span>确认</span>完成{{ whatStep }}操作
+                    </div>
+                    <input class="myself-boxshadow" 
+                        id="myModalInput"
+                        ref="myModalInput"
+                        type="text" 
+                        @blur="loseFouce" 
+                        @focus="inFouce" 
+                        v-model="isSure"
+                        @keydown="quickInput"
+                        :class="{'myselfDelete-input': hasWrite}"/>
+                </div>
+                <div class="myselfDelete-mysmall-button-modal">
+                    <button class="myself-boxshadow" @click="closeDeleteModel">{{ goBackName }}</button>
+                    <button class="myself-boxshadow" :class="{'modal-btn-style': !canSure}" :disabled="canSure" @click="ruins">{{ sureBtnName }}</button>
+                </div>
+            </div>
+        </b-modal>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            // 返回按钮的名称
+            goBackName: {
+                type: String,
+                default: '返回'
+            },
+            // 确认什么操作
+            whatStep: {
+                type: String,
+                default: '作废'
+            },
+            // 作废名称
+            sureName: {
+                type: String,
+                default: 'OK'
+            },
+            // 作废按钮的名称
+            sureBtnName: {
+                type: String,
+                default: '确认'
+            },
+            // 模态框未填或填写不合理样式控制
+            hasWrite: {
+                type: Boolean,
+                default: false
+            },
+            // 提示输入内容标题
+            tipsTitle: {
+                type: String,
+                default: '确认作废吗？'
+            },
+            // 警告标题文字
+            warnigTitle: {
+                type: String,
+                default: '作废操作无法撤销'
+            },
+            // 是否需要提示输入标题
+            hasTipsTitle: {
+                type: Boolean,
+                default: true
+            },
+            // 是否需要警告标题
+            hasWarningTitle: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data() {
+            return {
+                // 获取到用户输入的内容，并回传
+                isSure: '',
+                canSure: true,
+                isShowtips: true,
+                count:0,
+            }
+        },
+        methods: {
+            closeDeleteModel() {
+                this.$refs.mydeletemodalcard.hide()
+                this.$emit('goBack')
+            },
+            ruins() {
+                this.$emit('sureEvent', this.isSure)
+                this.isShowtips = true
+                this.isSure = ''
+                this.canSure = true
+            },
+            showDeleteModel() {
+                this.$refs.mydeletemodalcard.show()
+                this.isShowtips = true
+                this.isSure = ''
+                this.canSure = true
+            },
+            showM(){
+                 //每次打开时默认光标处于焦点位置
+                this.$refs.myModalInput.focus()
+                //document.querySelector('#myModalInput').focus();
+            },
+            //按下enter键走确认流程
+            quickInput(){
+                const { keyCode } = window.event
+                if(keyCode === 13) this.ruins()
+                else this.isShowtips = false
+            },
+            loseFouce() {
+                if(!this.isSure) {
+                    this.isShowtips = true
+                }
+            },
+            inFouce() {
+                //this.isShowtips = false
+            }
+        },
+        watch: {
+            isSure: function(value) {
+                if(value.toLowerCase() === this.sureName.toLowerCase()) {
+                    this.canSure = false                    
+                }else {
+                    this.canSure = true
+                }
+            }
+        }
+    }   
+</script>
+<style>
+    .myself-boxshadow {
+        box-shadow: 0 1px 5px #ccc;
+    }
+    .myselfDelete-mysmall-warning {
+        margin: 0 auto;
+        font-size: 20px;
+        line-height: 30px;
+        padding-left: 30px;
+        position: relative;
+    }
+    .myselfDelete-mysmall-warning>span:nth-child(1) {
+         position: absolute;
+         width: 30px;
+         top: 0px;
+         left: 0px;
+         background-image: url(./../../../static/image/warning.png);
+         background-position: center top;
+         height: 30px;
+     }
+     .iris-modal-font .modal-content {
+        border-radius: 5px;
+    }
+    .myselfDelete-mysmall-input-modal {
+        width: 100%;
+        text-align: center;
+        padding: 10px 0px;
+        position: relative;
+        height: 56px;
+        background-color: transparent;
+    }
+    
+    .myselfDelete-mysmall-input-tips>span:first-child {
+        color: rgb(226, 101, 101);
+    }
+    .myselfDelete-mysmall-input-tips>span:last-child {
+        padding: 2px 5px;
+        background-color: rgb(119, 155, 209);
+        color: #fff;
+        border-radius: 3px;
+    }
+    .myselfDelete-input {
+        border: 1px solid rgb(206, 35, 35);
+    }
+    .myselfDelete-mysmall-tips {
+        padding: 10px 0px;
+        font-size: 20px;
+    }
+    .myselfDelete-mysmall-input-modal input {
+        position: absolute;
+        left: 20%;
+        top: 10px;
+        width: 60%;
+        height: 36px;
+        border-radius: 3px;
+        outline: none;
+        border-style:none;
+        border: 1px solid #ccc;
+        padding-left: 5px;
+        z-index: 10;
+        background-color: transparent;
+    }
+    .myselfDelete-mysmall-input-tips {
+        position: absolute;
+        top: 10px;
+        left: 15%;
+        width: 70%;
+        height: 36px;
+        line-height: 36px;
+        z-index: 0;
+    }
+    .myselfDelete-mysmall-button-modal {
+        text-align: center;
+        padding-top: 10px;
+    }
+    .myselfDelete-mysmall-button-modal button {
+        height: 36px;
+        width: 20%;
+        margin-right: 20px;
+        background-color: #F2F3F5;
+        border: none;
+        border-radius: 5px;
+        color: #48576A;
+    }
+    .myselfDelete-mysmall-button-modal button:last-child {
+        margin-right: 0px;
+    }
+    .myselfDelete {
+        text-align: center;
+        padding-top: 20px;
+        padding-bottom: 10px;
+    }
+    .modal-btn-style {
+        background: #587EB9 !important;
+        color: #fff !important;
+    }
+</style>

package/src/components/iris-oldtree/tree-node.vue

@@ -0,0 +1,376 @@
+<template>
+    <ul>
+        <li v-for='(item, index) of nodeData' v-show="!item.hasOwnProperty('visible') || item.visible" :key="item.key">
+            <div :key="index" v-show="item.hasOwnProperty('dynamicAdd')">
+                <input ref="inputadd" type="text" class="add-input" value="" v-focus :key="item.key" @blur="addNode(item, $event)" @keyup.enter="addNode(item, $event)">
+            </div>
+            <!--:class="{'node-selected':(item.checked && !options.showCheckbox) || item.searched }"  :class="{'node-selected':item.checked}"-->
+            <div v-show="!item.hasOwnProperty('dynamicAdd')" class="item-handle-area" :class="{'node-selected':(item.checked && !options.showCheckbox) || item.searched }" @click="handleNode(item)">
+                <i v-if=" isLeaf(item) " @click.stop='handleNodeExpand(item, index)' class="icon iconfont  handle-icon" :class="[ item.open ? options.iconClass.open : options.iconClass.close ]" :style="options.iconStyle"></i>
+                <i v-else class="icon iconfont " :class="leafIcon(item)" :style="options.iconStyle"></i>
+                <div class="inputCheck" :class="{notAllNodes:item.nodeSelectNotAll}" :style="{width:inputWidth+'px', height:inputWidth+'px', color: options.iconStyle.color}" v-if="options.showCheckbox" @click.stop="walkCheckBox(item)">
+                    <input type="checkbox" class="check" v-if="options.showCheckbox  &&  !item.nodeSelectNotAll" :checked="item.checked" @change="checkBoxChange(item, $event)" :key="item.key" />
+                </div>
+                <span class="halo-tree-icon_loading halo-tree-iconEle" v-show="item.loading" :style="options.iconStyle">
+                </span>
+                <span class="label">
+                        <!--{{ item[options.labelKey] }}-->
+                        {{ item.label }}
+                    </span>
+                </span>
+                <i class="iconfont add-icon" :class="options.iconClass.add" :style="options.iconStyle" v-if="canAdd(item)" @click.stop="handleClickAddNode(item, index)"></i>
+            </div>
+            <tree-node ref="treenode" v-if="item.children && item.children.length > 0" :options="options" @handlecheckedChange="handlecheckedChange" v-show='item.open' :tree-data="item.children">
+            </tree-node>
+        </li>
+    </ul>
+</template>
+<script>
+    import Vue from 'vue'
+    Vue.directive('focus', {
+        update: function(el) {
+            el.focus()
+        }
+    })
+    export default {
+        name: 'treeNode',
+        props: {
+            treeData: Array,
+            options: Object
+        },
+        data() {
+            return {
+                nodeData: []
+            }
+        },
+        created() {
+            const parent = this.$parent
+            if (parent.isTree) {
+                this.tree = parent
+            } else {
+                this.tree = parent.tree
+            }
+            const tree = this.tree
+            if (!tree) {
+                console.warn('找不到树节点')
+            }
+            this.nodeData = (this.treeData || []).slice(0)
+        },
+        computed: {
+            inputWidth: function() {
+                if (this.checkFirfox()) {
+                    return 14
+                }
+                return 13
+            }
+        },
+        watch: {
+            treeData: function(data) {
+                this.nodeData = (data || []).slice(0)
+            },
+            options: function(value) {
+                console.info(value)
+            }
+        },
+        methods: {
+            checkFirfox() {
+                let u = navigator.userAgent
+                if (u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1) {
+                    return true
+                }
+                return false
+            },
+            walkCheckBox(node) {
+                if (node.nodeSelectNotAll) {
+                    Vue.set(node, 'checked', false)
+                    this.handlecheckedChange(node)
+                }
+
+            },
+            checkBoxChange(node, e) {
+                Vue.set(node, 'checked', e.target.checked)
+                this.handlecheckedChange(node)
+            },
+            handleNodeExpand(node, index) {
+                if (node.open) {
+                    Vue.set(node, 'open', false)
+                    return false
+                }
+                if (node.hasOwnProperty('children') && node.children && node.children.length > 0) {
+                    Vue.set(node, 'open', true)
+                    return
+                }
+                if (!node.open && this.options.lazy && this.options.load) {
+                    try {
+                        Vue.set(node, 'loading', true)
+                        this.options.load(node, index).then((d) => {
+                            Vue.set(node, 'open', true)
+                            Vue.set(node, 'loaded', true)
+                            Vue.set(node, 'loading', false)
+                            if (this.options.showCheckbox) {
+                                this.handlecheckedChange(node)
+                            }
+                        })
+                    } catch (e) {
+                        console.log('Get Child Error')
+                    }
+                }
+            },
+            handlecheckedChange(node) {
+                this.$emit('handlecheckedChange', node)
+            },
+            handleNode(node) {
+                if (this.tree.store.last) {
+                    if (this.tree.store.last.key === node.key) {
+                        this.tree.store.last.checked = !this.tree.store.last.checked
+                        Vue.set(node, 'checked', this.tree.store.last.checked)
+                    } else {
+                        if (!this.options.showCheckbox) {
+                            Vue.set(this.tree.store.last, 'checked', false)
+                        }
+                        Vue.set(node, 'checked', !node.checked)
+                        this.tree.store.last = node
+                    }
+                } else {
+                    this.tree.store.last = node
+                    Vue.set(node, 'checked', true)
+                }
+                this.tree.$emit('node-click', node)
+            },
+            async handleClickAddNode(item, index) {
+                try {
+                    //                    this.$nextTick(function () {
+                    //                        this.tree
+                    //                    })
+                    // todo loading
+                    let a = await this.options.dynamicAddNode(item, index)
+                    //                    // update data
+                    //                    a.forEach((node, i) => {
+                    //                        this.tree.store.setData(node)
+                    //                    })
+                    return Promise.resolve(true)
+                } catch (e) {
+                    return Promise.reject(e)
+                }
+            },
+            /**
+             * filter is show add icon
+             * @param item
+             * @returns {*}
+             */
+            canAdd(item) {
+                if (this.options.dynamicAdd) {
+                    return this.options.dynamicAddFilter(item)
+                }
+                return false
+            },
+            /**
+             * 叶子节点的 icon
+             * @param item
+             */
+            leafIcon(node) {
+                return this.options.leafIcon(node)
+            },
+            /**
+             * when trigger blur or keyup.enter
+             * @param item
+             * @param e
+             */
+            async addNode(item, e) {
+                try {
+                    let d = await this.options.dynamicSaveNode(item, e)
+                    //                    this.tree.store.setData(d)
+                    this.handlecheckedChange(item)
+                } catch (e) {
+                    console.log('Tree: save node error')
+                }
+            },
+            isLeaf(item) {
+                if (item.hasOwnProperty('leaf') && item.leaf) {
+                    return false
+                }
+                return item.children && item.children.length > 0 || this.options.hasOwnProperty('lazy') && this.options.lazy && !item.hasOwnProperty('loaded')
+                if ( !item.children ) {
+                    return false
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    @import '../../assets/css/iconfont.css';
+    .halo-tree {
+        font-size: 14px;
+        min-height: 20px;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+    }
+    .halo-tree li:hover {
+        cursor: pointer;
+    }
+    /*.halo-tree .node-selected {
+        background-color: #ddd
+    }*/
+    .halo-tree li {
+        line-height: 20px;
+        margin: 0;
+        padding: 4px 0 4px 4px;
+        position: relative;
+        list-style: none;
+        user-select: none;
+    }
+    .halo-tree li>span,
+    .halo-tree li>i,
+    .halo-tree li>a {
+        line-height: 20px;
+        vertical-align: middle;
+    }
+    .halo-tree li:hover {
+        background: rgba(0, 0, 0, .065)
+    }
+    .halo-tree li:after,
+    .halo-tree li:before {
+        content: '';
+        left: -11px;
+        position: absolute;
+        right: auto;
+        border-width: 1px
+    }
+    .halo-tree li:before {
+        border-left: 1px dashed #999;
+        bottom: 50px;
+        height: 100%;
+        top: -10px;
+        width: 1px;
+    }
+    .halo-tree li:after {
+        border-top: 1px dashed #999;
+        height: 20px;
+        top: 15px;
+        width: 12px
+    }
+    .halo-tree .item-handle-area {
+        height: 24px;
+    }
+    .halo-tree li .add-input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 4px;
+        border: 1px solid #bfcbd9;
+        box-sizing: border-box;
+        color: #1f2d3d;
+        display: inline-block;
+        font-size: inherit;
+        height: 24px;
+        outline: none;
+        padding: 3px 10px;
+        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+        width: 100%;
+    }
+    /* loading */
+    .halo-tree li span.halo-tree-iconEle {
+        margin: 0;
+        width: 24px;
+        height: 24px;
+        line-height: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        border: 0 none;
+        cursor: pointer;
+        outline: none;
+        text-align: center;
+    }
+    .halo-tree li span.halo-tree-icon_loading::after {
+        display: inline-block;
+        font-family: 'iconfont';
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        content: "\e63d";
+        -webkit-animation: loadingCircle 1s infinite linear;
+        animation: loadingCircle 1s infinite linear;
+    }
+    @keyframes loadingCircle {
+        0% {
+            transform-origin: 50% 50%;
+            transform: rotate(0deg);
+        }
+        100% {
+            transform-origin: 50% 50%;
+            transform: rotate(360deg);
+        }
+    }
+    .halo-tree li .label {
+        color: #000000 !important; 
+    }
+    .halo-tree li span {
+        display: inline-block;
+        padding: 3px 0;
+        text-decoration: none;
+        border-radius: 3px;
+    }
+    .halo-tree li:last-child::before {
+        height: 26px
+    }
+    .halo-tree>ul {
+        padding-left: 0
+    }
+    .halo-tree ul ul {
+        padding-left: 19px;
+        padding-top: 10px;
+    }
+    .halo-tree .check {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+    }
+    .halo-tree .handle-icon {
+        margin-right: 0;
+    }
+    .halo-tree .add-icon {
+        position: absolute;
+        top: 8px;
+        right: 0;
+    }
+    .search {
+        width: 14px;
+        height: 14px;
+        // background-image: url("../../assets/image/search.png");
+    }
+    /*.check.notAllNodes{
+              -webkit-appearance: none;
+              -moz-appearance: none;
+              -ms-appearance: none;
+              width: 13px;
+            }*/
+    .halo-tree .inputCheck {
+        display: inline-block;
+        position: relative;
+    }
+    .halo-tree .inputCheck.notAllNodes {
+        font-family: "iconfont" !important;
+        font-size: 14px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    .halo-tree .inputCheck.notAllNodes:before {
+        content: "\e640";
+        display: inline-block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 10;
+        top: -1px;
+        left: 7px;
+        transform: translate3d(-30%, -5%, 0);
+        /*background-image: url("/../../assets/half.png");*/
+    }
+    .item-handle-area .label {
+        color: #000 !important;
+    }
+</style>