manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/components/cascader.vue

<template>
  <div tabindex="0" @blur="selectClihide()" style="display: inline-block;position: relative;">  
    <div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
        <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click.stop="selectCli" :ref="disabled ? '' : 'selectDiv'">
            <div :style="'line-height: '+selectHeight+'px;font-size: '+selectFontSize+'px;'" :class="(selectName == $t('defaultText.pleaseChoose') || selectName == $t('qing-xuan-ze-bu-men') || selectName == $t('other.allDepartments')) ? 'selecttex selecttexXuan' : 'selecttex'">
                <!-- <ww-open-data type='departmentName' :openid='selectName'></ww-open-data> -->
                <!-- {{selectName}} -->
                 <span v-if="userName">
                    <span v-if="selectNameType == 'dep'">
                        <ww-open-data type='departmentName' :openid='selectName'></ww-open-data>
                    </span>
                    <span v-if="selectNameType == 'user'">
                        <ww-open-data type='userName' :openid='selectName'></ww-open-data>
                    </span>
                </span>
                <span v-if="!userName">
                    <ww-open-data type='departmentName' :openid='selectName'></ww-open-data>
                </span>
            </div>
            <i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
            <i v-if="moveIon" class="el-icon-circle-close iostu" @click.stop="clearDelete"></i>
        </div>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="show" style="position: relative;z-index: 99;">
        <div class="transitionBox">
            <ul class="transitionBoxUl">
                <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index, item)" @click.stop="liClist(item)"> 
                    <span :class="item.children ? 'idxspan' : ''" v-if="!radios || fistRadio">
                        <!-- {{item.label}} -->
                        <span v-if="userName">
                            <span v-if="item.type == 'dep'">
                                <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
                            </span>
                            <span v-if="item.type == 'user'">
                                <ww-open-data type='userName' :openid='item.label'></ww-open-data>
                            </span>
                        </span>
                        <span v-if="!userName">
                            <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
                        </span>
                        <!-- <ww-open-data type='departmentName' :openid='item.label'></ww-open-data> -->
                    </span>
                    <span v-if="radios && !fistRadio" style="margin-left: -15px">
                        <el-radio v-model="optionsOId" :label="item.value">
                            <span class="idxspan" style="margin-left: -10px"> 
                                <!-- {{item.label}}  -->
                                <span v-if="userName">
                                    <span v-if="item.type == 'dep'">
                                        <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
                                    </span>
                                    <span v-if="item.type == 'user'">
                                        <ww-open-data type='userName' :openid='item.label'></ww-open-data>
                                    </span>
                                </span>
                                <span v-if="!userName">
                                    <ww-open-data type='departmentName' :openid='item.label'></ww-open-data>
                                </span>
                                <!-- <ww-open-data type='departmentName' :openid='item.label'></ww-open-data> -->
                            </span>
                        </el-radio>
                    </span>
                    <i class="el-icon-arrow-right" v-if="item.children"></i>
                </li>
            </ul>
        </div>

        <div v-for="(item, index) in options" :key="index">
            <div v-if="item.children" style="position: absolute;left: 200px;top: 6px">
                <cascaderOption :subject="item.children" :userName="userName" :radios="radios" v-show="transitionBoxLiIdx == index" @cascaderOptionClick="cascaderOptionClick"></cascaderOption>
            </div>
        </div>

      </div>
    </transition>
  </div>
</template>

<script>
// 引入里面的
import cascaderOption from "@/components/cascaderOption.vue"
export default {
    components: {
        cascaderOption
    },
    props: {
        subject:{
            type: Array
        },
        size: {
            type: String,
        },
        subjectId: {
            type: [String, Number]
        },
        // 是否为单选
        radios: {
            type: Boolean,
            default: false
        },
        // 当前页面用到的第几个
        distinction: {
            type: String,
            default: '1',
        },
        // 真对填写日报单独处理
        idx: {
            type: String
        },
        flg: {
            type: Boolean,
            default: false, // 默认值，不是填写日报
        },
        // 剩下统一索引
        index: {
            type: String
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否可清空
        clearable: {
            type: Boolean,
            default: false
        },
        // 是否可搜索
        filterable: {
            type: Boolean,
            default: false
        },
        // 其他数据
        other: {
            type: [String, Number, Boolean],
            default: false
        },
        // 宽度
        widthStr: {
            type: String,
            default: false
        },
        // 默认文字
        selectNameChuan: {
            type: String
        },
        userName: {
            type: Boolean,
            default: false
        },
        // 第一季是否不选中
        fistRadio: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectWidth: '150',
            selectHeight: '28',
            selectFontSize: '12',
            show: false, // 下拉框
            options: [], // 列表数据
            transitionBoxLiIdx: '-1', // hover 背景色
            selectName: this.$t('defaultText.pleaseChoose'), // 显示的文字
            classDiv: false, // 获得焦点样式
            optionsOId: '', // 选中人的id
            dailyListObj: null, // 填写日报的数据
            dailyListIndex: null, // 日报点的索引
            move: false,
            moveIon: false,
            hoverValIdx: '-1', // 鼠标移入的值 
            hoverList: [],
            radioVal: ''
        };
    },
    computed: {},
    watch: {
        subject: {
            handler(newValue, oldValue) {
                this.options = newValue
                console.log(this.options, '我收到的数据')
                if(newValue) {
                    
                }
            },
        },
        // 日报点的索引, 真对填写的日报
        idx: {
            handler(newValue, oldValue) {
                console.log(newValue, oldValue)
                this.dailyListIndex = newValue
            },
        },
        subjectId: {
            handler(newValue, oldValue) {
                console.log(newValue, '过来的id')
                this.optionsOId = newValue
                if(this.optionsOId && this.optionsOId.length != 0) {
                    this.traverseArr(this.options, this.optionsOId)
                } else {
                    this.selectName = this.$t('defaultText.pleaseChoose')
                }
            },
        },
        widthStr: {
            handler(newValue, oldValue) {
                this.selectWidth = newValue
            },
        }
    },
    created() {
        console.log(this.size)
        if(this.size == 'mini') {
            this.selectWidth = '150'
            this.selectHeight = '28'
        } else if(this.size == 'small') {
            this.selectWidth = '191'
            this.selectHeight = '32'
        } else if(this.size == 'medium') {
            this.selectWidth = '205'
            this.selectHeight = '40'
            this.selectFontSize = '14'
        }
        if(this.widthStr) {
            this.selectWidth = this.widthStr
        }
    },
    mounted() {
        if(this.selectNameChuan) {
            this.selectName = this.selectNameChuan
        }
        if(this.subject) {
            this.options = JSON.parse(JSON.stringify(this.subject))
            console.log(this.options, '我收到的数据')
        }
        if(this.subjectId) {
            this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
            console.log(this.options, '过来的数据')
            this.traverseArr(this.options, this.optionsOId)
            for(let i in this.options) {
                if(this.options[i].id == this.optionsOId || this.options[i].auditorId == this.optionsOId) {
                     this.selectName = this.options[i].name || this.options[i].auditorName
                     if(this.options[i].type) {
                        this.selectNameType = this.options[i].type
                     }
                }
            }
        }
        this.dailyListIndex = this.idx
        console.log(this.selectWidth, this.selectHeight)
        // this.moveIon = JSON.parse(JSON.stringify(this.clearable))
    },
    methods: {
        // 循环取值
        traverseArr(arr, idd){
            let id = idd[0]
            if(arr) {
                for(var i in arr) {
                    console.log(arr[i].value, idd)
                    if(arr[i].label != this.$t('lable.department') && arr[i].label != this.$t('designatedpersonnel')) {
                        if(arr[i].value == idd) {
                            console.log('将要付给的值', arr[i])
                            this.selectName = arr[i].label
                            if(arr[i].type) {
                                this.selectNameType = arr[i].type
                            }
                            return
                        }
                    }
                    if(arr[i].children) {
                        this.traverseArr(arr[i].children, idd)
                    }
                }
            }
        },
        selectCli() {
            if(!this.disabled) {
                this.$refs.selectDiv.focus()
                this.classDiv = !this.classDiv
                this.show = !this.show
                this.move = !this.move
            }
        },
        selectClihide() {
            if(this.classDiv) {
                let that = this
                setTimeout(function () {
                    that.transitionBoxLiIdx = ''
                    that.show = !that.show
                    that.classDiv = false
                    that.move = false
                }, 100)
            }
        },
        liMouseOver(index, item) {
            this.transitionBoxLiIdx = index
            if(item.children) {
                this.hoverList = []
                this.hoverList = item.children
                this.$forceUpdate()
            } else {
                this.hoverList = []
            }
        },
        // 点击
        liClist(item) {
            if(item.label != this.$t('lable.department') && item.label != this.$t('designatedpersonnel')) {
                if(!item.children) {
                    this.selectName = item.label
                    if(item.type) {
                        this.selectNameType = item.type
                    }
                    let obj = {
                        id: item.value,
                        distinction: this.distinction
                    }
                    this.$emit('vueCasader', obj)
                }
                if(this.radios) {
                    this.selectName = item.label
                    if(item.type) {
                        this.selectNameType = item.type
                    }
                    let obj = {
                        id: item.value,
                        distinction: this.distinction,
                        item: item
                    }
                    this.$emit('vueCasader', obj)
                } else {
                    this.transitionBoxLiIdx = ''
                    this.show = !this.show
                    this.classDiv = false
                    this.move = false
                }
            }
        },
        // 接受子组件传过来的值
        cascaderOptionClick(item) {
            this.liClist(item)
        },
        moveIonDiv() {
            console.log(this.selectName)
            if(this.clearable) {
                if(this.selectName != this.$t('defaultText.pleaseChoose')) {
                    this.moveIon = true
                }
            }
        },
        outIonDiv() {
            if(this.clearable) {
                this.moveIon = false
            }
        },
        clearDelete() {
            this.selectName = this.$t('defaultText.pleaseChoose')
            let obj = {
                label: this.$t('defaultText.pleaseChoose'),
                value: ''
            }
            this.show = false
            this.classDiv = false
            this.move = false
            this.liClist(obj)
        }
    },
    triggerOption(){

    },
    choose(item,value){
      
    },

};
</script>

<style scoped lang="scss">
    .selectDiv {
        border-color: #409EFF !important;
    }
    .disabledTrue {
        background: #F5F7FA !important;
        border-radius: 4px;
        cursor: not-allowed !important;
        position: relative;
    }
    .disabledFalse .select {
        background: #FFF;
        border-radius: 4px;
    }
    .select {
        -webkit-appearance: none;
        // background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        position: relative;
        cursor: pointer;
    }
    .selecttex {
        height: 28px;
        line-height: 28px;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .selecttex span {
        padding: 0 !important;
    }
    .iostu {
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 8px;
        color: #C0C4CC;
        transition: All 0.2s ease-in-out;
    }
    .iostuHover {
        transform: rotate(-180deg);
    }
    .transitionBox {
        background: #FFF;
        position: absolute; 
        min-width: 200px;
        border-radius: 2em;
        border: 1px solid #E4E7ED;
        border-radius: 4px;
        background-color: #FFF;
        box-sizing: border-box;
        margin: 5px 0;
        // box-shadow: 0 2px 12px #dfdfdf;
        height: 274px;
        overflow: auto;
        z-index: 500 !important;
    }
    .transitionBoxUl {
        list-style: none;
        padding: 6px 0;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .transitionBoxUl li {
        font-size: 14px;
        padding: 0 20px;
        // position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .liHover {
        background-color: #F5F7FA;
        // color: #409eff !important;
    }
    .liHover .idxspan {
        color: #409eff !important;
        font-weight: 700;
    }
    .idxspan span{
        padding: 0 !important;
    }
    .transitionBoxUl span {
        flex: 1;
        width: 110px;
        width: 20px;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .selecttexXuan {
        color: #C0C4CC;;
    }
</style>